/* ════════════════════════════════════════════════════════════════
   HADREEN — TASK-MODULE DESIGN SYSTEM RESKIN
   Loaded after all shipped styles; overrides tokens + key surfaces.

   Reference: Hadreen-Task-Module-Prototype-v2-AR-EN
     ink   #122521   paper #F5F3EC   card  #FFFFFF   line #E4E0D3
     pine  #0E3B33   amber #D98E1F   green #1B7F4E   red  #C2410C
     blue  #2563EB   violet #6D28D9  slate #64748B   crit #B91C1C
     fonts: Bricolage Grotesque (display) · Instrument Sans (body)
            IBM Plex Mono (mono) · Noto Kufi Arabic (Arabic display)
   ════════════════════════════════════════════════════════════════ */

/* ── 1. TYPOGRAPHY ──────────────────────────────────────────────── */
/* toggleLang() writes an inline font-family on <body>, so these must
   carry !important to win. */
html[lang="en"] body {
  font-family: 'Twemoji Country Flags', 'Instrument Sans', 'Inter',
               'IBM Plex Sans Arabic', sans-serif !important;
}
html[lang="ar"] body {
  font-family: 'Twemoji Country Flags', 'Noto Kufi Arabic',
               'IBM Plex Sans Arabic', 'Cairo', sans-serif !important;
}
h1, h2, h3, .page-title, .login-title, .greeting h1,
.panel-title, .kpi-num, .kcard-num, .cc-num, .modal-title {
  font-family: 'Bricolage Grotesque', 'Noto Kufi Arabic', 'IBM Plex Sans Arabic', sans-serif;
  letter-spacing: -0.01em;
}
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] .page-title, html[lang="ar"] .panel-title {
  font-family: 'Noto Kufi Arabic', 'IBM Plex Sans Arabic', sans-serif;
  letter-spacing: 0;
}
code, kbd, pre, .mono, .emp-code, .tsk-id {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
}
.btn { font-family: inherit; }

/* ── 2. LIGHT THEME → PAPER & PINE ──────────────────────────────── */
html[data-theme="light"] {
  --bg:       #F5F3EC;
  --surface:  #FFFFFF;
  --surface2: #EFECE0;
  --surface3: #E7E3D4;
  --border:   #E4E0D3;
  --border2:  #D3CEBB;

  --text:     #122521;
  --text2:    #4C5B56;
  --text3:    #5F6F6A;

  --gold:     #D98E1F;
  --gold2:    #B9770F;
  --gold-ink: #9A6410;

  /* teal/mint are the app's primary action tokens → pine-green */
  --teal:     #146450;
  --teal2:    #1B7F4E;
  --mint:     #146450;
  --mint2:    #1B7F4E;

  --pri:        #0E3B33;
  --pri-hover:  #145247;
  --pri-ink:    #0E3B33;
  --pri-tint:   rgba(14,59,51,0.08);
  --pri-border: rgba(14,59,51,0.28);
  --pri-ring:   rgba(14,59,51,0.15);
  --row-hover:  rgba(14,59,51,0.04);

  --yellow:   #D98E1F;
  --orange:   #C2410C;
  --coral:    #C2410C;
  --blue:     #2563EB;
  --purple:   #6D28D9;
  --green:    #1B7F4E;
  --info:     #2563EB;

  --sem-legal:  #B91C1C;
  --sem-action: #C2410C;
  --sem-warn:   #D98E1F;
  --sem-info:   #2563EB;
  --sem-ok:     #1B7F4E;
  --sem-exp:    #6D28D9;

  --icon-default: #4C5B56;
  --icon-gold:    #D98E1F;

  --radius:    16px;
  --radius-sm: 12px;
  --radius-xs: 8px;

  --shadow-sm: 0 1px 2px rgba(18,37,33,0.05);
  --shadow:    0 1px 2px rgba(18,37,33,0.05), 0 8px 24px -12px rgba(18,37,33,0.12);
  --shadow-lg: 0 24px 60px -18px rgba(14,59,51,0.35);
}

/* ── 3. DARK THEME → DEEP PINE INK ──────────────────────────────── */
html:not([data-theme="light"]) {
  --bg:       #0C1613;
  --surface:  #12211D;
  --surface2: #182B26;
  --surface3: #1F362F;
  --border:   #22392F;
  --border2:  #2F4A40;
  --gold:     #D98E1F;
  --gold2:    #E5A33C;
  --gold-ink: #E5A33C;
  --teal:     #2AA37F;
  --teal2:    #5BCBA5;
  --mint:     #2AA37F;
  --mint2:    #5BCBA5;
  --green:    #34B473;
  --text:     #F2F5F0;
  --text2:    #9FB4AC;
  --text3:    #8A9C93;
  --radius:    16px;
  --radius-sm: 12px;
  --radius-xs: 8px;
}

/* ── 4. PINE SIDEBAR (reference look, light mode) ───────────────── */
html[data-theme="light"] .sidebar,
html[data-theme="light"] #nav-rail {
  background: #0E3B33;
  border-color: rgba(245,243,236,0.08);
}
html[data-theme="light"] .sidebar .nav-item,
html[data-theme="light"] .sidebar .nav-group-title,
html[data-theme="light"] .sidebar .nav-section,
html[data-theme="light"] .rail-btn {
  color: #C9D8D2;
}
html[data-theme="light"] .sidebar .nav-item:hover,
html[data-theme="light"] .rail-btn:hover {
  background: rgba(245,243,236,0.08);
  color: #FFFFFF;
}
html[data-theme="light"] .sidebar .nav-item.active,
html[data-theme="light"] .rail-btn.active {
  background: rgba(245,243,236,0.14);
  color: #FFFFFF;
  box-shadow: inset 3px 0 0 #D98E1F;
}
html[dir="rtl"][data-theme="light"] .sidebar .nav-item.active,
html[dir="rtl"][data-theme="light"] .rail-btn.active {
  box-shadow: inset -3px 0 0 #D98E1F;
}
html[data-theme="light"] .sidebar .nav-item.active .nav-ico,
html[data-theme="light"] .rail-btn.active { color: #F5C97B; }
html[data-theme="light"] .sidebar .nav-badge,
html[data-theme="light"] .rail-badge { background:#D98E1F; color:#122521; }
/* user chip + logo area on pine */
html[data-theme="light"] .sidebar .user-chip,
html[data-theme="light"] .sidebar .sidebar-user {
  background: rgba(245,243,236,0.10);
  color: #F5F3EC;
}
html[data-theme="light"] .sidebar .user-chip *,
html[data-theme="light"] .sidebar .sidebar-user * { color: #E8EFEA; }

/* Secondary panel of the dual-tier nav keeps a slightly lighter pine */
html[data-theme="light"] #nav-panel,
html[data-theme="light"] .sidebar .nav-panel {
  background: #11453B;
  border-color: rgba(245,243,236,0.08);
}
html[data-theme="light"] #nav-panel .nav-item { color:#C9D8D2; }
html[data-theme="light"] #nav-panel .nav-item.active {
  background: rgba(245,243,236,0.16); color:#fff;
}

/* Sidebar search box on pine */
html[data-theme="light"] .sidebar input,
html[data-theme="light"] .sidebar .nav-search input {
  background: rgba(245,243,236,0.10);
  border-color: rgba(245,243,236,0.15);
  color: #F5F3EC;
}
html[data-theme="light"] .sidebar input::placeholder { color:#9FB4AC; }

/* ── 5. TOPBAR / CONTENT SURFACES ───────────────────────────────── */
html[data-theme="light"] .topbar {
  background: #F5F3EC;
  border-bottom: 1px solid #E4E0D3;
}
html[data-theme="light"] .panel,
html[data-theme="light"] .kcard,
html[data-theme="light"] .card {
  border-radius: var(--radius);
}

/* ── 6. BUTTONS ─────────────────────────────────────────────────── */
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .btn.primary,
html[data-theme="light"] .authx-btn {
  background: #0E3B33; color: #F5F3EC;
}
html[data-theme="light"] .btn-primary:hover,
html[data-theme="light"] .btn.primary:hover,
html[data-theme="light"] .authx-btn:hover { background: #145247; }

/* Login screen accents */
html[data-theme="light"] .login-btn,
html[data-theme="light"] #login-btn {
  background: #0E3B33 !important; color:#F5F3EC !important;
}
html[data-theme="light"] .login-btn:hover,
html[data-theme="light"] #login-btn:hover { background:#145247 !important; }

/* ── 6b. ATTENDANCE DASHBOARD ───────────────────────────────────── */
/* Remove the colored corner blobs on the KPI tiles */
#page-attendance .ad-k::after { display: none; }

/* Analytics blocks (Workforce Status · Department Attendance · Shift
   Coverage) and "Resolved today" move up, right after the KPI tiles;
   exceptions and approvals follow. Flex order survives re-renders. */
#att-main { display: flex; flex-direction: column; }
#att-main > .ad-head      { order: 0; }
#att-main > .ad-filters   { order: 1; }
#att-main > .ad-kpi-wrap  { order: 2; }
#att-main > .ad-an        { order: 3; }
#att-main > .ad-resolved  { order: 4; }
#att-main > .ad-ex        { order: 5; }
#att-main > .ad-approvals { order: 6; }
#att-main > .ad-foot      { order: 7; }

/* ── 7. SCROLLBARS (subtle, paper-toned) ────────────────────────── */
html[data-theme="light"] ::-webkit-scrollbar { width:10px; height:10px; }
html[data-theme="light"] ::-webkit-scrollbar-thumb {
  background:#D3CEBB; border-radius:8px; border:2px solid #F5F3EC;
}
html[data-theme="light"] ::-webkit-scrollbar-track { background:transparent; }