/* ============================================================================
   nabdlife — Frankincense Identity (هوية نبض الحياة)
   Design source: claude.ai/design/p/ae21b598-1baf-4b73-89e7-f3675a01d511
   Load this file LAST so its app-shell overrides win by cascade order.
   Rollback: remove the single <link> line that pulls this file in.
   ========================================================================== */

/* ── 1. Design tokens ─────────────────────────────────────────────────── */
:root {
    /* Core palette */
    --nl-dhofar:        #0B332C;   /* أخضر ظفار   — deepest brand green */
    --nl-heal:          #0F6B58;   /* أخضر شفاء   — primary action green */
    --nl-mint:          #8FCFB6;   /* نعناع فاتح  — light mint */
    --nl-gold:          #C9A227;   /* ذهبي لباني  — frankincense gold */
    --nl-gold-soft:     #E4C97E;   /* gold on dark surfaces */
    --nl-ivory:         #FBF7EF;   /* عاجي بخور   — card / panel ivory */
    --nl-clay:          #7A6A55;   /* طيني        — clay */

    /* Surfaces & lines */
    --nl-canvas:        #F3EEE4;   /* page background */
    --nl-surface:       #FFFFFF;
    --nl-surface-2:     #FDFBF6;
    --nl-border:        #E0D9C8;
    --nl-border-soft:   #F0EADD;
    --nl-border-warm:   #EDE4D2;

    /* Type colours */
    --nl-ink:           #10222E;
    --nl-ink-2:         #37424C;
    --nl-body:          #4A5560;
    --nl-muted:         #8A8073;
    --nl-on-dark:       #A8C3B8;   /* body text on Dhofar green */

    /* Status */
    --nl-success:       #17845F;
    --nl-warning:       #D08C1E;
    --nl-danger:        #B3372B;
    --nl-info:          #2F6E8F;

    /* Type stacks */
    --nl-display: 'Reem Kufi', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
    --nl-text:    'IBM Plex Sans Arabic', 'IBM Plex Sans', 'Segoe UI', Tahoma, sans-serif;
    --nl-latin:   'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
    --nl-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --nl-radius:   18px;
    --nl-radius-sm: 12px;
    --nl-shadow:   0 10px 30px rgba(11, 51, 44, .08);
}

/* ── 2. Brand primitives ──────────────────────────────────────────────── */

/* Khanjar diamond grid — headers, certificates, official backgrounds only.
   Never wash it across large content areas. */
.nl-pattern {
    background:
        repeating-linear-gradient(45deg,  var(--nl-gold-soft) 0 1px, transparent 1px 18px),
        repeating-linear-gradient(135deg, var(--nl-gold-soft) 0 1px, transparent 1px 18px);
    opacity: .14;
}
.nl-pattern-fade {
    -webkit-mask-image: linear-gradient(to left, black, transparent 58%);
    mask-image: linear-gradient(to left, black, transparent 58%);
}
.nl-pattern-dots {
    background:
        radial-gradient(circle at 50% 50%, var(--nl-gold) 0 3px, transparent 4px) 0 0 / 26px 26px,
        radial-gradient(circle at 50% 50%, rgba(143, 207, 182, .55) 0 2px, transparent 3px) 13px 13px / 26px 26px,
        #0E4136;
}

.nl-display { font-family: var(--nl-display); font-weight: 600; }
.nl-label {
    font-family: var(--nl-mono);
    font-size: 11px;
    letter-spacing: .16em;
    color: var(--nl-muted);
    text-transform: uppercase;
}

/* Logo lockup — see resources/views/partials/brand_logo.blade.php */
.nl-logo { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; }
.nl-logo svg { flex: 0 0 auto; }
.nl-logo-words { display: flex; flex-direction: column; gap: 2px; }
.nl-logo-line { display: flex; align-items: baseline; white-space: nowrap; gap: .45em; }
.nl-logo-nizam { font-family: var(--nl-display); font-weight: 400; line-height: 1; }
.nl-logo-name  { font-family: var(--nl-display); font-weight: 600; line-height: 1.1; }
.nl-logo-latin { font-family: var(--nl-latin); font-weight: 300; letter-spacing: .3em; }
.nl-logo--stacked { flex-direction: column; gap: .35rem; }
.nl-logo--stacked .nl-logo-words { align-items: center; }
.nl-logo--stacked .nl-logo-line  { justify-content: center; }

/* ── 3. App-shell theming (Vuexy / Bootstrap surfaces) ────────────────── */
:root {
    --bs-primary:        #0F6B58;
    --bs-primary-rgb:    15, 107, 88;
    --bs-link-color:     #0F6B58;
    --bs-link-hover-color: #0B332C;
    --bs-border-radius:  .5rem;
}

.text-primary                                 { color: var(--nl-heal) !important; }
.bg-primary                                   { background-color: var(--nl-heal) !important; }
.border-primary                               { border-color: var(--nl-heal) !important; }

.btn-primary {
    background-color: var(--nl-heal);
    border-color: var(--nl-heal);
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--nl-dhofar);
    border-color: var(--nl-dhofar);
    color: #fff;
}
.btn-primary:focus,
.btn-primary.focus { box-shadow: 0 0 0 .15rem rgba(15, 107, 88, .3); }

.btn-outline-primary {
    color: var(--nl-heal);
    border-color: var(--nl-heal);
}
.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary.active {
    background-color: var(--nl-heal);
    border-color: var(--nl-heal);
    color: #fff;
}

.btn-label-primary {
    background-color: rgba(15, 107, 88, .12);
    color: var(--nl-heal);
    border-color: transparent;
}
.btn-label-primary:hover { background-color: var(--nl-heal); color: #fff; }

.badge.bg-label-primary { background-color: rgba(15, 107, 88, .14) !important; color: var(--nl-heal) !important; }
.badge.bg-label-warning { background-color: rgba(201, 162, 39, .16) !important; color: #8F6E12 !important; }

a { color: var(--nl-heal); }
a:hover { color: var(--nl-gold); }

.form-control:focus,
.form-select:focus {
    border-color: var(--nl-heal);
    box-shadow: 0 0 0 .12rem rgba(15, 107, 88, .18);
}
.form-check-input:checked {
    background-color: var(--nl-heal);
    border-color: var(--nl-heal);
}

.page-item.active .page-link {
    background-color: var(--nl-heal);
    border-color: var(--nl-heal);
}

.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
    color: #fff;
    background-color: var(--nl-heal);
    border-color: var(--nl-heal);
}
.nav-tabs .nav-link.active { color: var(--nl-heal); background: transparent; border-bottom-color: var(--nl-heal); }

.progress-bar { background-color: var(--nl-heal); }

.table > thead { background-color: var(--nl-ivory); }

/* Sidebar / vertical menu */
.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle),
.menu-vertical .menu-item.active > .menu-link.menu-toggle {
    background: var(--nl-heal);
    color: #fff;
}
.menu-vertical .menu-item.active > .menu-link .menu-icon { color: inherit; }

/* Avatars used as brand chips in the navbar */
.avatar-initial[style*="696cff"] { background: linear-gradient(135deg, var(--nl-heal), var(--nl-dhofar)) !important; }

/* Status semantics — keep clinical meaning aligned with the identity */
.text-success { color: var(--nl-success) !important; }
.text-danger  { color: var(--nl-danger)  !important; }
.text-warning { color: var(--nl-warning) !important; }
.text-info    { color: var(--nl-info)    !important; }

/* Arabic display face for headings when the document is RTL */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] .nl-display { font-family: var(--nl-display); }