/* ==========================================================================
   Amana — Global Theme v5 (Institutional Charcoal, Formal)
   - Multi-layered shadow system & cubic-bezier transitions
   - Blackish-grey brand with neutral tones — institutional feel
   - Polished buttons, cards, forms, dashboard & payroll components
   - Bootstrap 5 RTL + DataTables integration
   ========================================================================== */

/* Tell the browser the page is theme-aware so native widgets (scrollbars,
   form controls) pick the matching OS chrome rather than OS defaults. */
html                     { color-scheme: light; }
html[data-theme="dark"]  { color-scheme: dark;  }

/* ---------- Design Tokens ---------- */
:root{
  /* Base neutrals — warm-grey institutional backgrounds */
  --bg:            #f0f1f3;
  --surface:       #ffffff;
  --surface-2:     #f5f6f8;
  --surface-3:     #e8eaed;   /* deeper tint for active/hover areas */
  --ink:           #0a0a0a;   /* near-black — authoritative text */
  --muted:         #64748b;   /* slate-500 */
  --line:          #e2e5ea;   /* neutral-200 */

  /* Brand — blackish-grey institutional family */
  --brand:         #1a1a1a;   /* dark grey — primary */
  --brand-700:     #2a2a2a;   /* medium grey — hover/pressed */
  --brand-900:     #0a0a0a;   /* near-black — deepest */
  --brand-50:      #f2f2f2;   /* grey-100 — light tint */
  --accent:        #3a3a3a;   /* grey-700 — secondary accent */
  --accent-700:    #1a1a1a;   /* dark grey — deeper accent */

  /* Semantic — muted, formal tones accessible on white */
  --good:          #15803d;   /* green-700 — darker, formal */
  --good-700:      #166534;   /* green-800 */
  --good-bg:       #f0fdf4;   /* green-50 */
  --warn:          #b45309;   /* amber-700 — subdued */
  --warn-700:      #92400e;   /* amber-800 */
  --warn-bg:       #fffbeb;   /* amber-50 */
  --bad:           #b91c1c;   /* red-700 — serious, not flashy */
  --bad-700:       #991b1b;   /* red-800 */
  --bad-bg:        #fef2f2;   /* red-50 */
  --info:          #0369a1;   /* sky-700 — institutional blue */
  --info-700:      #075985;   /* sky-800 */
  --info-bg:       #f0f9ff;   /* sky-50 */

  /* Interaction */
  --ring:          rgba(20,20,20,.25);
  --ring-danger:   rgba(185,28,28,.25);

  /* Elevation — multi-layered for depth */
  --shadow-sm:     0 1px 3px rgba(20,20,20,.08), 0 3px 8px rgba(20,20,20,.06);
  --shadow:        0 3px 12px rgba(20,20,20,.1), 0 8px 28px rgba(20,20,20,.1);
  --shadow-lg:     0 10px 32px rgba(20,20,20,.12), 0 24px 56px rgba(20,20,20,.14);
  --shadow-inset:  inset 0 1px 2px rgba(20,20,20,.06);

  /* Shape — slightly tighter for formal feel */
  --radius:        10px;
  --radius-sm:     6px;
  --radius-xs:     4px;

  /* Motion */
  --ease:          cubic-bezier(.4, 0, .2, 1);
  --ease-out:      cubic-bezier(0, 0, .2, 1);
  --t-fast:        .12s;
  --t:             .2s;

  /* Button sizing */
  --btn-radius:    calc(var(--radius) - 4px);
  --btn-py:        .55rem;
  --btn-px:        1.05rem;
  --btn-py-sm:     .38rem;
  --btn-px-sm:     .72rem;
  --btn-py-lg:     .75rem;
  --btn-px-lg:     1.3rem;

  /* Glass system — subtle, not flashy */
  --glass-bg:          rgba(255,255,255,0.6);
  --glass-border:      rgba(200,170,80,0.5);
  --glass-blur:        blur(16px) saturate(120%);
  --glass-strong-bg:   rgba(255,255,255,0.72);
  --glass-strong-blur: blur(24px) saturate(130%);
  --glass-subtle-bg:   rgba(255,255,255,0.35);
  --glass-subtle-blur: blur(10px) saturate(120%);
  --glass-chrome-bg:   rgba(255,255,255,0.5);
  --glass-chrome-blur: blur(20px) saturate(130%);
  --gradient-page:     linear-gradient(160deg, #eceef1 0%, #f0f1f4 30%, #f4f5f7 60%, #eceef1 100%);

  /* ── navv2 tokens (header redesign 2026-04-15) ───────────────────── */
  /* color-mix is Chrome 111+/Firefox 113+/Safari 15.4+. Each color-mix token
     is preceded by a solid fallback for any older browser that would
     otherwise silently resolve the property to its initial value. */
  /* Navbar height; logo size is independent so padding around the logo grows. */
  --nav-height-desktop: 100px;
  --nav-height-mobile:  80px;
  --nav-bg:             var(--surface);
  --nav-bg:             color-mix(in oklab, var(--surface) 70%, transparent);
  --nav-bg-solid:       var(--surface);
  --nav-bg-solid:       color-mix(in oklab, var(--surface) 88%, transparent);
  --nav-item-hover:     var(--surface-2, #f5f6f8);
  --nav-item-hover:     color-mix(in oklab, var(--brand) 6%, transparent);
  --nav-item-active:    var(--surface-3, #e8eaed);
  --nav-item-active:    color-mix(in oklab, var(--brand) 10%, transparent);
  --nav-ring:           var(--line);
  --nav-ring:           color-mix(in oklab, var(--brand) 12%, var(--line));
  --pop-bg:             var(--surface);
  --pop-shadow:         0 1px 1px rgba(0,0,0,.04),
                        0 8px 24px -8px rgba(0,0,0,.12),
                        0 16px 48px -16px rgba(0,0,0,.18);
  --pop-ring:           1px solid var(--line);
  --pop-ring:           1px solid color-mix(in oklab, var(--brand) 8%, var(--line));
  --nav-radius:         14px;
  --nav-row-radius:     8px;
  --pop-offset:         4px;
}

html[data-theme="dark"]{
  --bg:        #0a0a0a;   /* deep charcoal */
  --surface:   #141414;   /* near-black card bg */
  --surface-2: #1e1e1e;   /* dark grey */
  --surface-3: #2a2a2a;   /* hover/active */
  --ink:       #e8eaed;   /* neutral-200 — clean text */
  --muted:     #8b95a5;   /* grey-400 */
  --line:      #252525;   /* dark border */

  --brand:     #a0a0a0;   /* grey-400 — lighter brand in dark */
  --brand-700: #cccccc;   /* grey-300 */
  --brand-900: #080808;   /* deepest */
  --brand-50:  #2a2a2a;   /* grey-800 tint */

  --accent:    #a0a0a0;   /* grey-400 */
  --accent-700:#6b6b6b;   /* grey-500 */

  --good:      #4ade80;  --good-700:#22c55e;  --good-bg:#052e16;
  --warn:      #fbbf24;  --warn-700:#f59e0b;  --warn-bg:#1c1a05;
  --bad:       #f87171;  --bad-700:#ef4444;   --bad-bg:#1f0a0a;
  --info:      #38bdf8;  --info-700:#0ea5e9;  --info-bg:#0c1418;

  --ring:      rgba(148,163,184,.3);
  --shadow-sm: 0 1px 3px rgba(210,185,140,.12), 0 2px 8px rgba(210,185,140,.08);
  --shadow:    0 2px 10px rgba(210,185,140,.15), 0 6px 24px rgba(210,185,140,.1);
  --shadow-lg: 0 8px 28px rgba(210,185,140,.18), 0 20px 52px rgba(210,185,140,.12);

  --glass-bg:          rgba(15,15,15,0.92);
  --glass-border:      rgba(210,185,140,0.15);
  --glass-blur:        blur(24px) saturate(130%);
  --glass-strong-bg:   rgba(15,15,15,0.95);
  --glass-strong-blur: blur(32px) saturate(140%);
  --glass-subtle-bg:   rgba(15,15,15,0.85);
  --glass-subtle-blur: blur(14px) saturate(120%);
  --glass-chrome-bg:   rgba(10,10,10,0.6);
  --glass-chrome-blur: blur(28px) saturate(140%);
  --gradient-page:     linear-gradient(160deg, #0b0b0b 0%, #0d0d0d 30%, #101010 60%, #0b0b0b 100%);

  /* navv2 dark-specific overrides — deepen the popover shadow against dark surfaces */
  --pop-shadow: 0 1px 1px rgba(0,0,0,.2),
                0 8px 24px -8px rgba(0,0,0,.4),
                0 16px 48px -16px rgba(0,0,0,.6);
}

/* ---------- Glass System ---------- */
.glass{
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
}
.glass-strong{
  background: var(--glass-strong-bg);
  backdrop-filter: var(--glass-strong-blur);
  -webkit-backdrop-filter: var(--glass-strong-blur);
  border: 1px solid var(--glass-border);
}
.glass-subtle{
  background: var(--glass-subtle-bg);
  backdrop-filter: var(--glass-subtle-blur);
  -webkit-backdrop-filter: var(--glass-subtle-blur);
  border: 1px solid var(--glass-border);
}

@supports not (backdrop-filter: blur(1px)){
  .glass        { background: var(--surface); }
  .glass-strong { background: var(--surface); }
  .glass-subtle { background: var(--surface-2); }
  .app-header   { background: var(--surface); }
  .app-footer   { background: var(--surface-2); }
}

/* Page image backdrop */
body::before{
  content: "";
  position: fixed; inset: 0; z-index: -1;
  background: var(--bg) url('../img/lightbg.png') center/600px repeat fixed;
  pointer-events: none;
}
html[data-theme="dark"] body::before{
  background: var(--bg) url('../img/darkbg.png') center/600px repeat fixed;
}
body::after{
  content: "";
  position: fixed;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1616px, 100% - 2rem);
  z-index: -1;
  background: var(--bg);
  opacity: 0.88;
  pointer-events: none;
  border-radius: 0 0 var(--radius) var(--radius);
}
html[data-theme="dark"] body::after{
  opacity: 0.82;
}
.page, main.page, .container.page{ background: transparent; }

/* ---------- Base / Typography ---------- */
*, *::before, *::after{ box-sizing: border-box; }

html{ height: 100%; background: var(--bg); color: var(--ink); }
body{ height: 100%; background: transparent; color: var(--ink); }

body{
  font-family: 'Tajawal', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
  font-size: 0.9375rem;
}

/* Links */
a{ color: var(--brand); text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover{ color: var(--brand-700); }

/* Text utilities */
.text-muted{ color: var(--muted) !important; }
.text-soft { color: color-mix(in oklab, var(--ink) 55%, var(--muted)); }

/* Containers */
.container{ max-width: 1616px !important; }
.container.page{ padding-top: 1.25rem; padding-bottom: 2.5rem; }

/* ---------- Elevation & Surfaces ---------- */
.card,
.section{
  background: var(--surface);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 2px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card .table{ margin-bottom: 0; }

.shadow-soft{ box-shadow: var(--shadow) !important; }
.border-soft{ border: 1px solid var(--line) !important; }

/* ---------- Header / Navbar ---------- */
.app-header{
  position: sticky; top: 0; z-index: 1000;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(28px) saturate(170%);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  border-bottom: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 1px 8px rgba(0,0,0,.05);
}
html[data-theme="dark"] .app-header{
  background: rgba(20,20,20,.88);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  border-bottom: 1px solid rgba(148,163,184,.1);
}
.app-header .navbar-nav .nav-link{
  color: var(--ink) !important;
  font-weight: 600;
  font-size: .9rem;
}
.app-header .navbar-nav .nav-link:hover,
.app-header .navbar-nav .nav-link.active{
  color: var(--brand) !important;
}
/* ── Notification badges (RTL-safe) ── */
.utq-nav-badge {
    position: absolute;
    top: 2px;
    left: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    color: #fff;
    background: #ef4444;
    border-radius: 9px;
    box-shadow: 0 0 0 2px var(--surface);
    pointer-events: none;
}

.app-header .navbar-brand{
  color: var(--ink) !important;
  font-weight: 700;
}
.app-header .dropdown-menu{
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(28px) saturate(170%);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: var(--shadow-lg);
}
html[data-theme="dark"] .app-header .dropdown-menu{
  background: rgba(20,20,20,.95);
  border-color: rgba(255,255,255,.08);
}
.app-header .dropdown-item{
  color: var(--ink);
  font-weight: 500;
}
.app-header .dropdown-item:hover,
.app-header .dropdown-item:focus{
  background: color-mix(in oklab, var(--brand) 10%, transparent);
  color: var(--brand-700);
}
.app-header .dropdown-item.active{
  background: color-mix(in oklab, var(--brand) 15%, transparent);
  color: var(--brand-700);
  font-weight: 600;
}
.app-header .dropdown-divider{
  border-color: var(--line);
  opacity: .5;
}
.app-header .utq-nav-avatar{
  box-shadow: 0 0 0 2px rgba(255,255,255,.15);
}

/* ── Mobile: hide desktop collapse, show offcanvas drawer ── */
@media (max-width: 991.98px) {
  /* Hide the desktop collapse menu on mobile */
  .app-header #utqNav { display: none !important; }

  /* Toggler styling */
  .app-header .navbar-toggler {
    border: 2px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: .4rem .6rem;
    order: 3;
  }
  .app-header .navbar-toggler:focus {
    box-shadow: 0 0 0 3px var(--ring);
  }
}

/* ── Offcanvas Drawer ─────────────────────────────────── */
#utqDrawer {
  width: min(320px, 85vw);
  background: var(--surface);
  border-inline-start: 2px solid var(--glass-border);
  box-shadow: -8px 0 40px rgba(0,0,0,.15);
}
html[data-theme="dark"] #utqDrawer {
  box-shadow: -8px 0 40px rgba(0,0,0,.5);
}

.utq-drawer-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line);
  background: color-mix(in oklab, var(--brand) 5%, var(--surface));
}
.utq-drawer-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem; flex-shrink: 0;
}

.utq-drawer-body { overflow-y: auto; }

.utq-drawer-nav {
  display: flex; flex-direction: column;
  padding: .5rem 0;
}

.utq-drawer-section-label {
  font-size: .7rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: .5rem 1.25rem .25rem;
}

.utq-drawer-divider {
  height: 1px;
  background: var(--line);
  margin: .4rem 1rem;
}

.utq-drawer-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .7rem 1.25rem;
  color: var(--ink);
  font-size: .88rem;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--t-fast) var(--ease), color var(--t-fast);
  border-inline-start: 3px solid transparent;
}
.utq-drawer-item i {
  width: 20px;
  text-align: center;
  font-size: .9rem;
  color: var(--muted);
  flex-shrink: 0;
}
.utq-drawer-item:hover {
  background: color-mix(in oklab, var(--brand) 6%, var(--surface));
  color: var(--brand);
}
.utq-drawer-item:hover i { color: var(--brand); }
.utq-drawer-item.active {
  background: color-mix(in oklab, var(--brand) 8%, var(--surface));
  color: var(--brand);
  font-weight: 700;
  border-inline-start-color: var(--brand);
}
.utq-drawer-item.active i { color: var(--brand); }

.utq-drawer-logout {
  color: var(--bad);
}
.utq-drawer-logout i { color: var(--bad); }
.utq-drawer-logout:hover {
  background: var(--bad-bg);
  color: var(--bad-700);
}

/* ---------- Buttons (Unified System) ---------- */
.btn{
  border-radius: var(--btn-radius);
  font-weight: 600;
  letter-spacing: .015em;
  padding: var(--btn-py) var(--btn-px);
  transition:
    transform var(--t-fast) var(--ease),
    box-shadow var(--t) var(--ease),
    background var(--t) var(--ease),
    color var(--t) var(--ease),
    border-color var(--t) var(--ease);
}
.btn:active{ transform: translateY(1px); }
.btn-sm{ padding: var(--btn-py-sm) var(--btn-px-sm); font-size: .84rem; font-weight: 600; }
.btn-lg{ padding: var(--btn-py-lg) var(--btn-px-lg); font-size: 1.0rem; }

/* Primary — solid brand */
.btn-brand,
.btn-primary{
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-700);
  --bs-btn-hover-border-color: var(--brand-700);
  --bs-btn-focus-shadow-rgb: 140,122,107;
  color: #fff !important;
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 1px 3px rgba(111,95,82,.25), 0 3px 8px rgba(111,95,82,.15);
}
.btn-brand:hover,
.btn-primary:hover{
  background: var(--brand-700);
  border-color: var(--brand-700);
  box-shadow: 0 2px 6px rgba(111,95,82,.3), 0 6px 16px rgba(111,95,82,.2);
  transform: translateY(-1px);
}

/* Outline brand */
.btn-outline-brand,
.btn-outline-primary{
  color: var(--brand) !important;
  background: transparent;
  border-color: var(--brand) !important;
}
.btn-outline-brand:hover,
.btn-outline-primary:hover{
  color: #fff !important;
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 2px 8px rgba(111,95,82,.2);
  transform: translateY(-1px);
}

/* Soft — subtle fill */
.btn-soft{
  background: color-mix(in oklab, var(--brand) 11%, white);
  color: var(--brand-700) !important;
  border: 1px solid color-mix(in oklab, var(--brand) 22%, white);
}
.btn-soft:hover{
  background: color-mix(in oklab, var(--brand) 18%, white);
  color: var(--brand-700) !important;
  border-color: color-mix(in oklab, var(--brand) 32%, white);
  transform: translateY(-1px);
}

/* Ghost */
.btn-ghost{
  background: transparent;
  border: 1px solid transparent;
  color: var(--brand);
}
.btn-ghost:hover{
  background: var(--brand-50);
  border-color: color-mix(in oklab, var(--brand) 20%, white);
  color: var(--brand-700);
}

/* Harmonised Bootstrap variants */
.btn-secondary{
  --bs-btn-bg: var(--brand);
  --bs-btn-color: #fff;
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-700);
  --bs-btn-hover-border-color: var(--brand-700);
}
.btn-success{
  --bs-btn-bg: var(--good);
  --bs-btn-color: #fff;
  --bs-btn-border-color: var(--good);
  --bs-btn-hover-bg: var(--good-700);
  --bs-btn-hover-border-color: var(--good-700);
  color: #fff !important;
}
.btn-info{
  --bs-btn-bg: var(--info);
  --bs-btn-color: #fff;
  --bs-btn-border-color: var(--info);
  --bs-btn-hover-bg: var(--info-700);
  --bs-btn-hover-border-color: var(--info-700);
  color: #fff !important;
}
.btn-warning{
  --bs-btn-bg: var(--warn);
  --bs-btn-color: #fff;
  --bs-btn-border-color: var(--warn);
  --bs-btn-hover-bg: var(--warn-700);
  --bs-btn-hover-border-color: var(--warn-700);
  color: #fff !important;
}

/* Danger */
.btn-danger{
  --bs-btn-bg: var(--bad);
  --bs-btn-border-color: var(--bad);
  color: #fff !important;
  box-shadow: 0 1px 3px rgba(196,60,48,.2);
}
.btn-danger:hover{
  --bs-btn-hover-bg: var(--bad-700);
  --bs-btn-hover-border-color: var(--bad-700);
  box-shadow: 0 2px 8px rgba(196,60,48,.3);
  transform: translateY(-1px);
}

/* Light */
.btn-light{
  --bs-btn-bg: var(--surface-2);
  --bs-btn-color: var(--ink);
  --bs-btn-border-color: var(--line);
}
.btn-light:hover{
  --bs-btn-hover-bg: var(--surface-3);
  --bs-btn-hover-border-color: var(--line);
}

/* Dark — pinned via semantic tokens so it can't pick up Bootstrap 5.3's
   layered `[data-bs-theme=dark]` inversion by accident. `--ink` is dark in
   light mode and light in dark mode; `--surface` flips the opposite direction,
   so the contrast stays correct automatically.
   Bootstrap is loaded as `@layer(bootstrap)`, so these unlayered rules win
   regardless of the layered selector specificity. */
.btn-dark{
  --bs-btn-bg: var(--ink);
  --bs-btn-color: var(--surface);
  --bs-btn-border-color: var(--ink);
  --bs-btn-hover-bg: var(--ink);
  --bs-btn-hover-color: var(--surface);
  --bs-btn-hover-border-color: var(--ink);
  background: var(--ink);
  color: var(--surface) !important;
  border-color: var(--ink);
}
.btn-dark:hover{
  opacity: 0.92;
}

/* Icon-only */
.btn-icon{
  display: inline-grid;
  place-items: center;
  width: 2.25rem; height: 2.25rem;
  padding: 0;
  border-radius: var(--radius-sm);
}
.btn-icon.btn-sm{ width: 1.9rem; height: 1.9rem; }

/* Disabled */
.btn:disabled,
.btn.disabled{ opacity: .55; pointer-events: none; }

/* Loading spinner */
.btn.is-loading{ position: relative; color: transparent !important; }
.btn.is-loading::after{
  content: "";
  position: absolute; inset: 0;
  margin: auto; width: 1.1em; height: 1.1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .65s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* ---------- Dark-Mode Button Overrides ---------- */
html[data-theme="dark"] .btn-brand,
html[data-theme="dark"] .btn-primary{
  background: var(--surface-3);
  border-color: var(--line);
  color: var(--ink) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
html[data-theme="dark"] .btn-brand:hover,
html[data-theme="dark"] .btn-primary:hover{
  background: #363636;
  border-color: #444;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.45);
}

html[data-theme="dark"] .btn-outline-brand,
html[data-theme="dark"] .btn-outline-primary{
  color: #e8eaed !important;
  border-color: rgba(232,234,237,.35) !important;
  background: transparent;
}
html[data-theme="dark"] .btn-outline-brand:hover,
html[data-theme="dark"] .btn-outline-primary:hover{
  color: #fff !important;
  background: var(--surface-3);
  border-color: #444;
}

html[data-theme="dark"] .btn-secondary{
  background: var(--surface-3);
  border-color: var(--line);
  color: var(--ink) !important;
  box-shadow: none;
}
html[data-theme="dark"] .btn-secondary:hover{
  background: #3a3a3a;
  border-color: #444;
  color: #fff !important;
}

html[data-theme="dark"] .btn-success{
  background: color-mix(in oklab, var(--good) 16%, var(--surface));
  border-color: color-mix(in oklab, var(--good) 28%, var(--surface-2));
  color: var(--good) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
html[data-theme="dark"] .btn-success:hover{
  background: color-mix(in oklab, var(--good) 24%, var(--surface));
  border-color: color-mix(in oklab, var(--good) 40%, var(--surface-2));
  color: var(--good) !important;
}

html[data-theme="dark"] .btn-info{
  background: color-mix(in oklab, var(--info) 16%, var(--surface));
  border-color: color-mix(in oklab, var(--info) 28%, var(--surface-2));
  color: var(--info) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
html[data-theme="dark"] .btn-info:hover{
  background: color-mix(in oklab, var(--info) 24%, var(--surface));
  border-color: color-mix(in oklab, var(--info) 40%, var(--surface-2));
  color: var(--info) !important;
}

html[data-theme="dark"] .btn-warning{
  background: color-mix(in oklab, var(--warn) 16%, var(--surface));
  border-color: color-mix(in oklab, var(--warn) 28%, var(--surface-2));
  color: var(--warn) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
html[data-theme="dark"] .btn-warning:hover{
  background: color-mix(in oklab, var(--warn) 24%, var(--surface));
  border-color: color-mix(in oklab, var(--warn) 40%, var(--surface-2));
  color: var(--warn) !important;
}

html[data-theme="dark"] .btn-danger{
  background: color-mix(in oklab, var(--bad) 18%, var(--surface));
  border-color: color-mix(in oklab, var(--bad) 30%, var(--surface-2));
  color: var(--bad) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
html[data-theme="dark"] .btn-danger:hover{
  background: color-mix(in oklab, var(--bad) 26%, var(--surface));
  border-color: color-mix(in oklab, var(--bad) 42%, var(--surface-2));
  color: var(--bad) !important;
}

html[data-theme="dark"] .btn-outline-secondary{
  color: var(--ink) !important;
  border-color: var(--line) !important;
  background: transparent;
}
html[data-theme="dark"] .btn-outline-secondary:hover{
  background: var(--surface-3);
  border-color: #444;
  color: #fff !important;
}

html[data-theme="dark"] .btn-outline-success{
  color: var(--good) !important;
  border-color: rgba(74,222,128,.35) !important;
  background: transparent;
}
html[data-theme="dark"] .btn-outline-success:hover{
  background: var(--good);
  border-color: var(--good);
  color: #0a0a0a !important;
}

html[data-theme="dark"] .btn-outline-info{
  color: var(--info) !important;
  border-color: rgba(56,189,248,.35) !important;
  background: transparent;
}
html[data-theme="dark"] .btn-outline-info:hover{
  background: var(--info);
  border-color: var(--info);
  color: #0a0a0a !important;
}

html[data-theme="dark"] .btn-outline-warning{
  color: var(--warn) !important;
  border-color: rgba(251,191,36,.35) !important;
  background: transparent;
}
html[data-theme="dark"] .btn-outline-warning:hover{
  background: var(--warn);
  border-color: var(--warn);
  color: #0a0a0a !important;
}

html[data-theme="dark"] .btn-outline-danger{
  color: var(--bad) !important;
  border-color: rgba(248,113,113,.35) !important;
  background: transparent;
}
html[data-theme="dark"] .btn-outline-danger:hover{
  background: #dc2626;
  border-color: #dc2626;
  color: #fff !important;
}

html[data-theme="dark"] .btn-outline-dark{
  color: var(--ink) !important;
  border-color: rgba(232,234,237,.25) !important;
  background: transparent;
}
html[data-theme="dark"] .btn-outline-dark:hover{
  background: var(--surface-3);
  border-color: #444;
  color: #fff !important;
}

html[data-theme="dark"] .btn-light{
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--ink) !important;
}
html[data-theme="dark"] .btn-light:hover{
  background: var(--surface-3);
  border-color: #444;
}

html[data-theme="dark"] .btn-soft{
  background: rgba(232,234,237,.08);
  color: var(--ink) !important;
  border-color: rgba(232,234,237,.12);
}
html[data-theme="dark"] .btn-soft:hover{
  background: rgba(232,234,237,.14);
  border-color: rgba(232,234,237,.2);
  color: #fff !important;
}

html[data-theme="dark"] .btn-ghost{
  color: var(--ink);
}
html[data-theme="dark"] .btn-ghost:hover{
  background: var(--surface-2);
  border-color: var(--line);
  color: #fff;
}

/* ---------- Badges ---------- */
.badge-soft{
  color: var(--brand-700);
  background: color-mix(in oklab, var(--brand) 11%, white);
  border: 1px solid color-mix(in oklab, var(--brand) 20%, white);
}
.badge-muted{
  color: var(--muted);
  background: color-mix(in oklab, var(--muted) 9%, white);
  border: 1px solid color-mix(in oklab, var(--muted) 18%, white);
}

/* Status badges */
.badge-status-success{ background: var(--good-bg);  color: var(--good-700); }
.badge-status-warn{    background: var(--warn-bg);  color: var(--warn-700); }
.badge-status-bad{     background: var(--bad-bg);   color: var(--bad-700); }

/* Dark-mode badge overrides */
html[data-theme="dark"] .badge-soft{
  background: rgba(232,234,237,.08);
  color: var(--ink);
  border-color: rgba(232,234,237,.12);
}
html[data-theme="dark"] .badge-muted{
  background: rgba(139,149,165,.12);
  color: var(--muted);
  border-color: rgba(139,149,165,.18);
}
html[data-theme="dark"] .badge-status-success{ background: var(--good-bg); color: var(--good); }
html[data-theme="dark"] .badge-status-warn{    background: var(--warn-bg); color: var(--warn); }
html[data-theme="dark"] .badge-status-bad{     background: var(--bad-bg);  color: var(--bad); }

/* Inline-styled badge dark overrides — soften bright badges with inline backgrounds */
html[data-theme="dark"] .badge[style*="background"] {
  filter: brightness(.75) saturate(.85) !important;
  color: #fff !important;
}

/* Bootstrap bg-* badge dark overrides */
html[data-theme="dark"] .bg-primary   { background-color: rgba(232,234,237,.12) !important; color: var(--ink) !important; }
html[data-theme="dark"] .bg-secondary { background-color: var(--surface-3) !important; color: var(--ink) !important; }
html[data-theme="dark"] .bg-success   { background-color: var(--good-bg) !important; color: var(--good) !important; }
html[data-theme="dark"] .bg-danger    { background-color: var(--bad-bg) !important; color: var(--bad) !important; }
html[data-theme="dark"] .bg-warning   { background-color: var(--warn-bg) !important; color: var(--warn) !important; }
@layer bootstrap{html[data-bs-theme="dark"] .bg-warning{background-color: var(--warn-bg,#1c1a05) !important; color: var(--warn,#fbbf24) !important;}}
html[data-theme="dark"] .bg-info      { background-color: var(--info-bg) !important; color: var(--info) !important; }
html[data-theme="dark"] .bg-dark      { --bs-dark-rgb: none; background: var(--surface-3) !important; color: var(--ink) !important; }
html[data-theme="dark"] .bg-light     { --bs-light-rgb: none; background: var(--surface-2) !important; color: var(--ink) !important; }
html[data-theme="dark"] .bg-info.text-dark      { color: var(--info) !important; }
html[data-theme="dark"] .bg-warning.text-dark   { color: var(--warn) !important; }
html[data-theme="dark"] .bg-light.text-dark,
html[data-theme="dark"] .badge.text-dark,
html[data-theme="dark"] .text-dark                { --bs-dark-rgb: 232,234,237; color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity,1)) !important; }

/* Bootstrap text-bg-* composites */
html[data-theme="dark"] .text-bg-success   { background-color: var(--good-bg) !important; color: var(--good) !important; }
html[data-theme="dark"] .text-bg-danger    { background-color: var(--bad-bg) !important; color: var(--bad) !important; }
html[data-theme="dark"] .text-bg-warning   { background-color: var(--warn-bg) !important; color: var(--warn) !important; }
html[data-theme="dark"] .text-bg-info      { background-color: var(--info-bg) !important; color: var(--info) !important; }
html[data-theme="dark"] .text-bg-secondary { background-color: var(--surface-3) !important; color: var(--ink) !important; }

/* Bootstrap subtle badge overrides */
html[data-theme="dark"] .bg-success-subtle { background-color: var(--good-bg) !important; }
html[data-theme="dark"] .bg-danger-subtle  { background-color: var(--bad-bg) !important; }
html[data-theme="dark"] .bg-warning-subtle { background-color: var(--warn-bg) !important; }
html[data-theme="dark"] .bg-info-subtle    { background-color: var(--info-bg) !important; }
html[data-theme="dark"] .bg-secondary-subtle { background-color: var(--surface-3) !important; }
html[data-theme="dark"] .text-success-emphasis { color: var(--good) !important; }
html[data-theme="dark"] .text-danger-emphasis  { color: var(--bad) !important; }
html[data-theme="dark"] .text-warning-emphasis { color: var(--warn) !important; }
html[data-theme="dark"] .text-info-emphasis    { color: var(--info) !important; }
html[data-theme="dark"] .text-secondary-emphasis { color: var(--muted) !important; }

/* ---------- Forms ---------- */
.form-control,
.form-select,
.input-group-text{
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius-sm);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.form-control::placeholder{ color: color-mix(in oklab, var(--muted) 70%, transparent); }
.form-control:focus,
.form-select:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 .22rem var(--ring);
  background: var(--surface);
}
label.form-label{ color: var(--muted); font-size: .875rem; font-weight: 500; margin-bottom: .3rem; }

.form-check-input:checked{ background-color: var(--brand); border-color: var(--brand); }

.is-valid{   border-color: var(--good) !important; }
.is-invalid{ border-color: var(--bad)  !important; }

/* ---------- Select2 UTQ Theme ---------- */
.select2-container--bootstrap-5 .select2-selection{
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
  border-radius: var(--radius-sm);
  min-height: 38px;
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered{
  color: var(--ink);
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder{
  color: var(--muted);
}
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection{
  border-color: var(--accent);
  box-shadow: 0 0 0 .22rem var(--ring);
}
.select2-container--bootstrap-5 .select2-dropdown{
  background: var(--surface);
  border-color: var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}
.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field{
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
  border-radius: var(--radius-xs);
}
.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 .18rem var(--ring);
}
.select2-container--bootstrap-5 .select2-results__option{
  color: var(--ink);
  font-size: .9rem;
  padding: .45rem .75rem;
}
.select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected]{
  background: color-mix(in oklab, var(--brand) 14%, var(--surface));
  color: var(--brand-700);
}
.select2-container--bootstrap-5 .select2-results__option--selected{
  background: color-mix(in oklab, var(--brand) 10%, var(--surface));
  color: var(--brand-700);
}
.select2-container--bootstrap-5 .select2-selection__clear{
  color: var(--muted);
}

/* ---------- Tables ---------- */
.table{
  --table-hover-bg:  color-mix(in oklab, var(--surface) 88%, var(--brand) 12%);
  --table-zebra-bg:  color-mix(in oklab, var(--surface) 96%, var(--brand) 4%);
}
.table thead th{
  background: var(--surface-2);
  background: var(--glass-subtle-bg);
  backdrop-filter: var(--glass-subtle-blur);
  -webkit-backdrop-filter: var(--glass-subtle-blur);
  border-bottom: 1px solid var(--glass-border);
  color: var(--muted);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .02em;
  text-transform: none;
}
.table td, .table th{ border-color: var(--line); vertical-align: middle; }
.table-striped > tbody > tr:nth-of-type(odd) > *{ background: var(--table-zebra-bg); }
.table-hover > tbody > tr:hover > *{
  background: var(--table-hover-bg);
  transition: background var(--t-fast) var(--ease);
}

/* ---------- Alerts ---------- */
.alert{
  border-radius: var(--radius-sm);
  border-left-width: 3px;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
}
.alert-success{ background: var(--good-bg); color: var(--good-700); border-color: color-mix(in oklab, var(--good) 25%, white); }
.alert-warning{ background: var(--warn-bg); color: var(--warn-700); border-color: color-mix(in oklab, var(--warn) 30%, white); }
.alert-danger{  background: var(--bad-bg);  color: var(--bad-700);  border-color: color-mix(in oklab, var(--bad) 30%, white); }
.alert-info{    background: var(--info-bg); color: var(--info-700); border-color: color-mix(in oklab, var(--info) 25%, white); }

/* ---------- Nav / Tabs / Pills ---------- */
.nav-pills .nav-link{
  border-radius: 999px;
  color: var(--brand);
  font-weight: 500;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav-pills .nav-link:hover{ background: var(--brand-50); color: var(--brand-700); }
.nav-pills .nav-link.active{ background: var(--brand); color: #fff; font-weight: 600; }

.nav-tabs .nav-link.active{
  color: var(--brand);
  border-color: var(--brand) var(--brand) transparent;
  font-weight: 600;
}

/* ---------- Chips ---------- */
.chip{
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .65rem; border-radius: 999px;
  background: color-mix(in oklab, var(--surface) 91%, var(--brand) 9%);
  color: var(--brand-700);
  border: 1px solid color-mix(in oklab, var(--surface) 82%, var(--brand) 18%);
  font-size: .82rem; font-weight: 500;
}

/* ---------- Sections (group frames) ---------- */
.section{ padding: 1.1rem; }
.section-head{
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .2rem .2rem .6rem; margin-bottom: .6rem;
  border-bottom: none;
  position: relative;
}
.section-head::after{
  content: "";
  position: absolute; bottom: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(to left, transparent, var(--line), transparent);
}
.section-head h6{ margin: 0; font-weight: 800; color: var(--ink); }
.section-note{ color: var(--muted); font-size: .875rem; }

/* ---------- DataTables ---------- */
.dataTables_wrapper .dt-buttons .btn{ margin: 0 .25rem .5rem .25rem; }

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input{
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius-sm);
}

table.dataTable tbody tr:hover{
  background: var(--table-hover-bg);
  transition: background var(--t-fast) var(--ease);
}

/* Pagination */
.dataTables_wrapper .dataTables_paginate .pagination{ gap: .2rem; }
.dataTables_wrapper .dataTables_paginate .page-link{
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: var(--radius-xs);
  padding: .4rem .65rem;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.dataTables_wrapper .dataTables_paginate .page-link:hover{
  background: color-mix(in oklab, var(--surface) 88%, var(--brand) 12%);
  color: var(--brand-700);
  border-color: color-mix(in oklab, var(--surface) 78%, var(--brand) 22%);
}
.dataTables_wrapper .dataTables_paginate .page-link:focus{
  outline: 0; box-shadow: 0 0 0 .2rem var(--ring);
}
.dataTables_wrapper .dataTables_paginate .page-item.active .page-link{
  background: var(--brand); border-color: var(--brand); color: var(--surface);
}
.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link{
  background: var(--surface-2); border-color: var(--line); color: var(--muted); opacity: .6;
}

/* Non-BS DT fallback */
.dataTables_wrapper .paginate_button{
  background: var(--surface) !important; border: 1px solid var(--line) !important;
  color: var(--ink) !important; border-radius: var(--radius-xs) !important;
}
.dataTables_wrapper .paginate_button.current{
  background: var(--brand) !important; border-color: var(--brand) !important; color: var(--surface) !important;
}
.dataTables_wrapper .paginate_button.disabled{
  background: var(--surface-2) !important; border-color: var(--line) !important;
  color: var(--muted) !important; opacity: .6 !important;
}

/* ---------- DataTables — Dark Mode Overrides ---------- */
html[data-theme="dark"] .table{
  --table-hover-bg:  color-mix(in oklab, var(--surface) 82%, var(--brand) 18%);
  --table-zebra-bg:  color-mix(in oklab, var(--surface) 94%, var(--brand) 6%);
}
html[data-theme="dark"] .table thead th{
  background: var(--surface-2);
  border-bottom-color: var(--line);
  color: var(--muted);
}
html[data-theme="dark"] table.dataTable tbody tr:hover{
  background: var(--surface-3) !important;
  color: var(--ink);
}
html[data-theme="dark"] table.dataTable tbody tr:hover td{
  color: var(--ink);
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .page-link{
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--muted);
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .page-link:hover{
  background: var(--surface-3);
  color: var(--ink);
  border-color: color-mix(in oklab, var(--line) 60%, var(--brand) 40%);
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .page-item.active .page-link{
  background: var(--brand);
  border-color: var(--brand);
  color: var(--bg);
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link{
  background: var(--surface);
  border-color: var(--line);
  color: var(--muted);
  opacity: .4;
}
html[data-theme="dark"] .dataTables_wrapper .paginate_button{
  background: var(--surface-2) !important;
  border-color: var(--line) !important;
  color: var(--muted) !important;
}
html[data-theme="dark"] .dataTables_wrapper .paginate_button:hover{
  background: var(--surface-3) !important;
  color: var(--ink) !important;
  border-color: color-mix(in oklab, var(--line) 60%, var(--brand) 40%) !important;
}
html[data-theme="dark"] .dataTables_wrapper .paginate_button.current{
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: var(--bg) !important;
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_length select,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input{
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_length select:focus,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input:focus{
  border-color: color-mix(in oklab, var(--line) 50%, var(--brand) 50%);
  box-shadow: 0 0 0 .2rem var(--ring);
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_info{
  color: var(--muted);
}
html[data-theme="dark"] .dataTables_wrapper .dt-buttons .btn{
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--muted);
}
html[data-theme="dark"] .dataTables_wrapper .dt-buttons .btn:hover{
  background: var(--surface-3);
  color: var(--ink);
  border-color: color-mix(in oklab, var(--line) 60%, var(--brand) 40%);
}
html[data-theme="dark"] .table-card{
  background: var(--surface);
  border-color: var(--line);
}
html[data-theme="dark"] .table-card tbody tr:hover{
  background: var(--surface-3);
}

/* ---------- RTL ---------- */
[dir="rtl"] .form-check{ padding-right: 1.5em; }
[dir="rtl"] .form-check .form-check-input{ float: right; margin-right: 0; margin-left: .5em; }
[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before{ content: "›"; }

/* ---------- Footer ---------- */
.app-footer{
  background: var(--glass-chrome-bg);
  backdrop-filter: var(--glass-chrome-blur);
  -webkit-backdrop-filter: var(--glass-chrome-blur);
  border-top: 1px solid var(--glass-border);
  color: var(--muted);
}
html[data-theme="dark"] .app-footer a:hover{
  text-shadow: 0 0 8px rgba(168,145,126,.2);
}

/* ---------- Accessibility ---------- */
:focus-visible{
  outline: 2.5px solid var(--ring);
  outline-offset: 2px;
}

/* ---------- Utilities ---------- */
.hr-soft{ border: 0; border-top: 1px solid var(--line); margin: 1rem 0; }
.kpi-value{ font-size: 2rem; font-weight: 900; line-height: 1; letter-spacing: -.02em; }

/* ══════════════════════════════════════════════════════════════════════════
   Dashboard v3 — Hero · KPI strip · Quick Actions · Tool cards
   ══════════════════════════════════════════════════════════════════════════ */

.dash-root{ background: transparent; min-height: 100vh; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.dash-hero{
  background: linear-gradient(
    140deg,
    var(--brand-900)   0%,
    #4a3728            30%,
    var(--brand)       70%,
    var(--accent)      100%
  );
  padding: 3.25rem 0 2.75rem;
  position: relative;
  overflow: hidden;
}
.dash-hero::before{
  content: "";
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
/* Subtle bottom fade to merge with page bg */
.dash-hero::after{
  content: "";
  position: absolute; bottom: 0; left: 0; right: 0; height: 64px;
  background: linear-gradient(to bottom, transparent, rgba(24,12,8,.12));
  pointer-events: none;
}

.dash-hero-shimmer{
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.04) 50%, transparent 60%);
  background-size: 200% 100%;
  animation: hero-shimmer 12s ease-in-out infinite;
}
@keyframes hero-shimmer{
  0%,100%{ background-position: 200% 0; }
  50%    { background-position: -200% 0; }
}

.dash-hero-inner{
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  position: relative; z-index: 1;
}
.dash-hero-text{ flex: 1; }

.dash-greeting{
  font-size: .9rem; font-weight: 600;
  color: rgba(255,255,255,.65);
  letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: .3rem;
}
.dash-name{
  font-size: clamp(1.8rem, 4vw, 2.65rem);
  font-weight: 900;
  color: #fff;
  margin: 0 0 .85rem;
  line-height: 1.12;
  letter-spacing: -.015em;
}
.dash-meta{
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
}
.dash-role-chip,
.dash-date-chip{
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .28rem .8rem; border-radius: 999px;
  font-size: .8rem; font-weight: 600; letter-spacing: .025em;
}
.dash-role-chip{
  background: rgba(255,255,255,.2);
  color: #fff;
  border: 1px solid rgba(255,255,255,.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.dash-date-chip{
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.dash-hero-icon{
  flex-shrink: 0;
  width: clamp(72px, 11vw, 120px);
  opacity: .55;
}
.dash-hero-icon svg{ width: 100%; height: auto; }

/* ── Body ─────────────────────────────────────────────────────────────── */
.dash-body{ padding: 1.75rem 1rem 3.5rem; }

/* ── KPI row ──────────────────────────────────────────────────────────── */
.kpi-row{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.kpi-card{
  background: var(--surface);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.kpi-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.kpi-card-inner{
  display: flex; align-items: center; gap: 1rem;
  padding: 1.2rem 1.3rem .8rem;
}
.kpi-icon{
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 11px;
  font-size: 1.2rem; flex-shrink: 0;
}
.kpi-val{
  font-size: 2rem; font-weight: 900;
  line-height: 1; letter-spacing: -.025em;
}
.kpi-lbl{
  font-size: .8rem; color: var(--muted);
  margin-top: .2rem; line-height: 1.35;
}
.kpi-link{
  display: flex; align-items: center; gap: .4rem;
  padding: .55rem 1.3rem; font-size: .8rem; font-weight: 600;
  text-decoration: none;
  border-top: 1px solid var(--glass-border);
  background: var(--glass-subtle-bg);
  backdrop-filter: var(--glass-subtle-blur);
  -webkit-backdrop-filter: var(--glass-subtle-blur);
  transition: background var(--t-fast) var(--ease);
  margin-top: auto;
}
.kpi-link i{ font-size: .72rem; }
.kpi-link:hover{ background: var(--glass-bg); }

/* KPI colour variants */
.kpi-my    { border-top: 3px solid var(--brand); }
.kpi-my .kpi-icon{ background: color-mix(in oklab, var(--brand) 13%, white); color: var(--brand); }
.kpi-my .kpi-val, .kpi-my .kpi-link{ color: var(--brand); }

.kpi-pending{ border-top: 3px solid var(--warn); }
.kpi-pending .kpi-icon{ background: var(--warn-bg); color: var(--warn-700); }
.kpi-pending .kpi-val, .kpi-pending .kpi-link{ color: var(--warn-700); }

.kpi-alert{ animation: pulse-border 2.5s ease-in-out infinite; }
@keyframes pulse-border{
  0%,100%{ border-top-color: var(--warn); }
  50%    { border-top-color: var(--bad); }
}

.kpi-team{ border-top: 3px solid var(--info); }
.kpi-team .kpi-icon{ background: var(--info-bg); color: var(--info-700); }
.kpi-team .kpi-val, .kpi-team .kpi-link{ color: var(--info-700); }

.kpi-org{ border-top: 3px solid var(--good); }
.kpi-org .kpi-icon{ background: var(--good-bg); color: var(--good-700); }
.kpi-org .kpi-val, .kpi-org .kpi-link{ color: var(--good-700); }

/* KPI semantic hover glow */
.kpi-my:hover    { box-shadow: 0 8px 24px rgba(154,125,101,.12), var(--shadow-lg); }
.kpi-pending:hover{ box-shadow: 0 8px 24px rgba(176,120,0,.12), var(--shadow-lg); }
.kpi-team:hover  { box-shadow: 0 8px 24px rgba(61,107,122,.12), var(--shadow-lg); }
.kpi-org:hover   { box-shadow: 0 8px 24px rgba(42,125,50,.12), var(--shadow-lg); }

html[data-theme="dark"] .kpi-my:hover    { box-shadow: 0 0 20px rgba(168,145,126,.15), var(--shadow-lg); }
html[data-theme="dark"] .kpi-pending:hover{ box-shadow: 0 0 20px rgba(212,168,30,.15), var(--shadow-lg); }
html[data-theme="dark"] .kpi-team:hover  { box-shadow: 0 0 20px rgba(94,154,174,.15), var(--shadow-lg); }
html[data-theme="dark"] .kpi-org:hover   { box-shadow: 0 0 20px rgba(56,176,72,.15), var(--shadow-lg); }

/* ── Dashboard sections ───────────────────────────────────────────────── */
.dash-section{
  background: var(--surface);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.35rem 1.35rem 1.6rem;
  margin-bottom: 1.5rem;
}
.dash-section-head{
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.2rem;
  padding-bottom: .85rem;
  border-bottom: none;
  position: relative;
}
.dash-section-head::after{
  content: "";
  position: absolute; bottom: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(to left, transparent, var(--line), transparent);
}
.dash-section-title{
  font-size: 1rem; font-weight: 800; color: var(--ink);
  display: flex; align-items: center; gap: .5rem;
}
.dash-section-title i{ color: var(--brand); font-size: .9rem; }
.dash-section-note{ font-size: .8rem; color: var(--muted); }

/* ── Quick Actions ────────────────────────────────────────────────────── */
.qa-grid{ display: flex; flex-wrap: wrap; gap: .75rem; }
.qa-tile{
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: .9rem 1rem; min-width: 86px;
  border-radius: 11px;
  background: var(--surface-2);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  text-decoration: none;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  cursor: pointer; flex: 0 0 auto;
}
.qa-tile:hover{
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,.09);
  background: var(--glass-strong-bg);
  text-decoration: none;
}
.qa-icon{
  position: relative; width: 44px; height: 44px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.qa-icon-brand{ background: var(--brand); color: #fff; }
.qa-icon-soft { background: color-mix(in oklab, var(--brand) 12%, white); color: var(--brand); }
.qa-icon-warn { background: var(--warn-bg); color: var(--warn-700); }
.qa-icon-info { background: var(--info-bg); color: var(--info-700); }
.qa-icon-good { background: var(--good-bg); color: var(--good-700); }
.qa-badge{
  position: absolute; top: -5px; left: -5px;
  min-width: 17px; height: 17px; border-radius: 999px;
  background: var(--bad); color: #fff;
  font-size: .65rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px; border: 2px solid var(--surface);
}
.qa-label{
  font-size: .76rem; font-weight: 600;
  color: var(--ink); text-align: center; line-height: 1.25;
}

/* ── Tool cards ───────────────────────────────────────────────────────── */
.tool-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 1rem;
}
.tool-card{
  background: var(--surface-2);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: calc(var(--radius) - 2px);
  padding: 1.15rem 1.2rem 1rem;
  display: flex; flex-direction: column; gap: .5rem;
  transition: box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.tool-card:hover{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), var(--shadow-lg);
  transform: translateY(-2px);
}
.tool-card-alert{
  border-color: color-mix(in oklab, var(--warn) 35%, var(--line));
  background: color-mix(in oklab, var(--warn) 4%, var(--surface-2));
}
.tool-card-head{
  display: flex; align-items: center; gap: .65rem; margin-bottom: .2rem;
}
.tool-card-head h6{
  margin: 0; font-weight: 800; font-size: .96rem; color: var(--ink);
  display: flex; align-items: center;
}
.tool-icon{
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; flex-shrink: 0;
}
.tc-leave   { background: color-mix(in oklab, var(--brand) 14%, white); color: var(--brand); }
.tc-attend  { background: var(--info-bg); color: var(--info-700); }
.tc-pay     { background: var(--good-bg); color: var(--good-700); }
.tc-approve { background: var(--warn-bg); color: var(--warn-700); }
.tc-calendar{ background: var(--info-bg); color: var(--info); }
.tc-hr      { background: color-mix(in oklab, var(--accent) 15%, white); color: var(--accent-700); }
.tc-report  { background: var(--good-bg); color: var(--good-700); }
.tc-settings{ background: color-mix(in oklab, var(--muted) 13%, white); color: var(--muted); }

.tool-card p{
  font-size: .865rem; color: var(--muted);
  margin: 0; line-height: 1.55; flex: 1;
}
.tool-actions{ display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .5rem; align-items: center; }
.tool-empty{ font-size: .84rem; color: var(--muted); display: flex; align-items: center; gap: .4rem; }

.badge-count{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.35rem; height: 1.35rem; border-radius: 999px;
  background: var(--warn-bg); color: var(--warn-700);
  border: 1px solid color-mix(in oklab, var(--warn) 28%, white);
  font-size: .7rem; font-weight: 800; padding: 0 .3rem;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 576px){
  .dash-hero  { padding: 2rem 0 2rem; }
  .dash-body  { padding: 1.25rem .75rem 2.5rem; }
  .kpi-row    { grid-template-columns: 1fr 1fr; }
  .qa-tile    { min-width: 72px; padding: .65rem .75rem; }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce){
  .kpi-card, .tool-card, .qa-tile, .pay-kpi, .btn{ transition: none; }
  .kpi-card:hover, .tool-card:hover, .qa-tile:hover, .pay-kpi:hover, .btn:hover{ transform: none; }
  .kpi-alert{ animation: none; }
  .dash-hero-shimmer{ animation: none; }
}

/* ── Print ────────────────────────────────────────────────────────────── */
@media print{
  .app-header, .app-footer, .dt-buttons, .btn, .no-print{ display: none !important; }
  body{ background: #fff; color: #000; }
  body::before{ display: none; }
  .card, .section, .dash-section, .pay-card, .kpi-card, .tool-card, .payslip-doc{
    background: #fff; box-shadow: none; border-color: #ccc;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .dash-hero{ background: #f0ece6 !important; color: #000; }
  .dash-hero-shimmer{ display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   PAYROLL MODULE
   ═══════════════════════════════════════════════════════════════════ */

.pay-shell{
  background: transparent;
  padding: 2rem 0 3.5rem;
  min-height: 70vh;
}

/* Page header */
.pay-page-head{
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: .75rem; margin-bottom: 1.5rem;
}
.pay-page-title{ font-size: 1.35rem; font-weight: 900; color: var(--ink); margin: 0 0 .2rem; }
.pay-page-sub  { font-size: .84rem; color: var(--muted); }

/* Card */
.pay-card{
  background: var(--surface);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  margin-bottom: 1.25rem; overflow: hidden;
}

/* Section heading */
.pay-section-head{
  font-size: .88rem; font-weight: 800; color: var(--ink);
  padding: .75rem 1.25rem;
  border-bottom: 1px solid var(--glass-border);
  background: var(--glass-subtle-bg);
  backdrop-filter: var(--glass-subtle-blur);
  -webkit-backdrop-filter: var(--glass-subtle-blur);
  display: flex; align-items: center; gap: .4rem;
}

/* Table */
.pay-table thead th{
  font-size: .76rem; font-weight: 800; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em;
  background: var(--glass-subtle-bg);
  backdrop-filter: var(--glass-subtle-blur);
  -webkit-backdrop-filter: var(--glass-subtle-blur);
  border-bottom: 1px solid var(--glass-border);
  padding: .6rem 1rem; white-space: nowrap;
}
.pay-table tbody td{ font-size: .865rem; padding: .65rem 1rem; vertical-align: middle; }
.pay-table tbody tr:last-child td{ border-bottom: none; }

/* Status badges */
.badge-status-draft     { background: #f1f2f4; color: #4b5563; border-radius: 999px; padding: .25rem .65rem; font-size: .71rem; font-weight: 700; }
.badge-status-submitted { background: var(--warn-bg); color: var(--warn-700); border-radius: 999px; padding: .25rem .65rem; font-size: .71rem; font-weight: 700; }
.badge-status-warning   { background: var(--brand-50); color: var(--brand-700); border-radius: 999px; padding: .25rem .65rem; font-size: .71rem; font-weight: 700; }
.badge-status-approved  { background: var(--good-bg); color: var(--good-700); border-radius: 999px; padding: .25rem .65rem; font-size: .71rem; font-weight: 700; }
.badge-status-closed    { background: #ede9fe; color: #4c1d95; border-radius: 999px; padding: .25rem .65rem; font-size: .71rem; font-weight: 700; }
html[data-theme="dark"] .badge-status-draft     { background: var(--surface-3); color: var(--muted); }
html[data-theme="dark"] .badge-status-submitted { color: var(--warn); }
html[data-theme="dark"] .badge-status-approved  { color: var(--good); }
html[data-theme="dark"] .badge-status-closed    { background: rgba(139,92,246,.15); color: #a78bfa; }

/* KPI strip */
.pay-kpi-row{
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1rem; margin-bottom: 1.25rem;
}
@media (max-width: 768px){ .pay-kpi-row{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px){ .pay-kpi-row{ grid-template-columns: 1fr; } }

.pay-kpi{
  background: var(--surface);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-top: 3px solid var(--brand); border-radius: var(--radius);
  padding: 1rem 1.15rem; box-shadow: var(--shadow);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.pay-kpi:hover{ transform: translateY(-2px); box-shadow: 0 8px 24px rgba(154,125,101,.12), var(--shadow-lg); }
.pay-kpi-val{ font-size: 1.45rem; font-weight: 900; color: var(--ink); line-height: 1.2; }
.pay-kpi-val small{ font-size: .62rem; font-weight: 600; color: var(--muted); }
.pay-kpi-lbl{ font-size: .76rem; color: var(--muted); margin-top: .25rem; }

/* ════════════════════════════════════════════════════════════════════
   PAYSLIP DOCUMENT
   ════════════════════════════════════════════════════════════════════ */
.payslip-doc{
  background: var(--surface);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius); box-shadow: 0 4px 28px rgba(0,0,0,.1);
  max-width: 860px; margin: 0 auto 2rem; overflow: hidden;
}

/* Doc header */
.payslip-doc-head{
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, var(--brand-900) 0%, var(--brand) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff; padding: 1.35rem 1.6rem; flex-wrap: wrap; gap: .75rem;
}
.payslip-org-name{ font-size: 1.15rem; font-weight: 900; }
.payslip-org-sub { font-size: .8rem; opacity: .78; margin-top: .1rem; }
.payslip-period-badge{
  text-align: center;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 10px; padding: .55rem 1.1rem; min-width: 140px;
  border: 1px solid rgba(255,255,255,.22);
}
.payslip-period-label{ font-size: .7rem; opacity: .72; }
.payslip-period-val  { font-size: 1.15rem; font-weight: 900; }
.payslip-period-sub  { font-size: .7rem; opacity: .68; margin-top: .1rem; }

/* Employee strip */
.payslip-emp-strip{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; border-bottom: 1px solid var(--line);
}
@media (max-width: 600px){ .payslip-emp-strip{ grid-template-columns: repeat(2, 1fr); } }
.payslip-emp-row{
  display: flex; flex-direction: column;
  padding: .7rem 1.15rem; border-left: 1px solid var(--line);
}
.payslip-emp-row:last-child{ border-left: none; }
.payslip-emp-lbl{ font-size: .7rem; color: var(--muted); margin-bottom: .15rem; }
.payslip-emp-val{ font-size: .875rem; font-weight: 700; color: var(--ink); }

/* Body — earnings + deductions */
.payslip-body{ display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
@media (max-width: 580px){ .payslip-body{ grid-template-columns: 1fr; } }
.payslip-col{ padding: 0 0 .5rem; }
.payslip-col-earn{ border-left: 1px solid var(--line); }

.payslip-col-head{
  font-size: .78rem; font-weight: 800;
  padding: .65rem 1.15rem; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: .4rem;
}
.earn-head{
  background: var(--glass-subtle-bg); color: var(--good);
  backdrop-filter: var(--glass-subtle-blur);
  -webkit-backdrop-filter: var(--glass-subtle-blur);
}
.ded-head{
  background: var(--glass-subtle-bg); color: var(--bad);
  backdrop-filter: var(--glass-subtle-blur);
  -webkit-backdrop-filter: var(--glass-subtle-blur);
}

.payslip-line{
  display: flex; justify-content: space-between; align-items: center;
  padding: .44rem 1.15rem; font-size: .83rem;
  border-bottom: 1px solid color-mix(in oklab, var(--line) 45%, transparent);
}
.payslip-line:last-child{ border-bottom: none; }
.payslip-line-lbl{ color: var(--ink); flex: 1; }
.payslip-line-amt{ font-weight: 700; white-space: nowrap; padding-right: .3rem; }
.earn-amt{ color: var(--good); }
.ded-amt { color: var(--bad); }

.payslip-subtotal{
  background: var(--surface-2); font-weight: 800;
  border-top: 2px solid var(--line) !important; margin-top: .25rem;
}

.payslip-absence-dates{
  padding: .35rem 1.15rem .5rem;
  background: color-mix(in oklab, var(--bad) 6%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--line) 45%, transparent);
  font-size: .78rem;
}
.payslip-absence-label{ color: var(--ink-2); font-weight: 600; margin-inline-end: .4rem; }
.payslip-absence-badge{
  display: inline-block; background: color-mix(in oklab, var(--bad) 14%, #fff);
  color: var(--bad); border: 1px solid color-mix(in oklab, var(--bad) 25%, transparent);
  border-radius: .3rem; padding: .05rem .4rem; margin: .1rem .15rem 0 0; font-size: .75rem;
}

/* Net pay */
.payslip-net{
  background: linear-gradient(90deg, var(--brand-900) 0%, var(--brand) 100%);
  color: #fff; text-align: center;
  padding: 1.2rem 1rem;
  border-top: 3px solid color-mix(in oklab, var(--brand) 65%, #000);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.payslip-net-label { font-size: .84rem; opacity: .84; margin-bottom: .2rem; }
.payslip-net-amount{ font-size: 2.1rem; font-weight: 900; }
.payslip-net-amount span{ font-size: 1rem; opacity: .78; }

/* Attendance summary */
.payslip-att{ border-top: 1px solid var(--line); padding: 1.1rem 1.15rem; }
.payslip-att-title{
  font-size: .8rem; font-weight: 800; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: .8rem;
}
.payslip-att-grid{
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: .75rem; text-align: center;
}
@media (max-width: 480px){ .payslip-att-grid{ grid-template-columns: repeat(2, 1fr); } }
.payslip-att-num{ font-size: 1.5rem; font-weight: 900; color: var(--ink); }
.payslip-att-lbl{ font-size: .7rem; color: var(--muted); margin-top: .15rem; }

/* Footer note */
.payslip-footer-note{
  border-top: 1px solid var(--glass-border);
  background: var(--glass-subtle-bg);
  backdrop-filter: var(--glass-subtle-blur);
  -webkit-backdrop-filter: var(--glass-subtle-blur);
  font-size: .72rem; color: var(--muted);
  text-align: center; padding: .7rem 1.15rem; line-height: 1.7;
}

/* ── Payslip print ────────────────────────────────────────────────────── */
@media print{
  .pay-shell{ padding: 0; }
  .payslip-doc{ box-shadow: none; border: 1px solid #ccc; max-width: 100%; font-size: 10pt; }
  .payslip-doc-head,
  .payslip-net{ print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* ---------- Dark Mode Ambient Glow ---------- */
html[data-theme="dark"] .card,
html[data-theme="dark"] .section,
html[data-theme="dark"] .dash-section,
html[data-theme="dark"] .pay-card,
html[data-theme="dark"] .tool-card,
html[data-theme="dark"] .kpi-card{
  box-shadow: 0 0 1px rgba(168,145,126,.08), var(--shadow);
}
html[data-theme="dark"] .dash-hero::before{
  opacity: .08;
}

/* ════════════════════════════════════════════════════════════════════
   VIEW-EXTRACTED STYLES — Consolidated from inline <style> blocks
   ════════════════════════════════════════════════════════════════════ */

/* ── Layout: Header / Navbar ─────────────────────────────────────── */
.page { padding-top: 16px; padding-bottom: 32px; }
.navbar-utq .nav-link { font-weight: 500; color: var(--ink) !important; }
.navbar-utq .nav-link:hover,
.navbar-utq .nav-link.active { color: var(--brand) !important; }
.navbar-utq .navbar-brand { color: var(--ink) !important; }
.navbar-utq .navbar-toggler { border-color: var(--muted); }
.navbar-utq .navbar-toggler-icon {
  filter: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%236b6b6b' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
html[data-theme="dark"] .navbar-utq .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23aaaaaa' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.brand-logo { max-height: 40px; }

/* Splash */
.splash{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:10000;
  background: radial-gradient(ellipse 120% 80% at 50% 30%, #1a1a1a 0%, #0e0e0e 60%, #080808 100%);
  color:#fff; overflow:hidden; transition: opacity .8s ease;
}
/* Per-app splash backgrounds */
.splash[data-app="amana"]  { background: radial-gradient(ellipse 120% 80% at 50% 30%, #1a1a1a 0%, #0e0e0e 60%, #080808 100%); }
.splash[data-app="minhaj"] { background: radial-gradient(ellipse 120% 80% at 50% 30%, #0f2027 0%, #0a1a20 60%, #061218 100%); }
.splash[data-app="majlis"] { background: radial-gradient(ellipse 120% 80% at 50% 30%, #1a0f0f 0%, #120a0a 60%, #0d0606 100%); }
.splash.show{ display:flex; }
.splash.fade-out{ opacity:0; }
.splash-stars{ position:absolute; inset:0; width:100%; height:100%; }
.splash-content{
  position:relative; z-index:1; text-align:center; padding:48px 40px;
  max-width:min(92vw,680px);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 40px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,0.08);
  transform:translateY(20px) scale(.97); opacity:0;
  animation: splashContentIn .9s cubic-bezier(.2,.8,.2,1) .15s forwards;
}
.splash-logo{ margin-bottom:1.5rem; opacity:0; animation: fadeIn .6s ease .1s forwards; }
.splash-logo img{ height:64px; filter: drop-shadow(0 4px 20px rgba(37,99,235,.3)); }
.splash-aya{
  font-size:clamp(1.3rem, 3.5vw, 1.75rem); line-height:2.2; letter-spacing:.3px;
  background: linear-gradient(135deg, #e8d5a3 0%, #f5e6c8 30%, #daa520 60%, #e8d5a3 100%);
  background-size: 200% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  animation: shimmer 3s linear infinite, fadeUp .8s ease .4s forwards;
  opacity:0; transform:translateY(10px);
  text-shadow: none;
}
@keyframes shimmer { to { background-position: -200% center; } }
.splash-ref{
  font-size:.9rem; color:#94a3b8; margin-top:10px; letter-spacing:.5px;
  opacity:0; animation: fadeIn .6s ease .8s forwards;
}
.splash-values{
  display:flex; justify-content:center; gap:12px; margin-top:1.25rem;
  opacity:0; animation: fadeUp .6s ease 1s forwards;
}
.splash-pill{
  padding:5px 18px; border-radius:20px; font-size:.82rem; font-weight:500;
  background:rgba(255,255,255,.06); color:rgba(220,220,220,.85);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(4px);
}
.splash[data-app="minhaj"] .splash-pill{
  background:rgba(13,148,136,.12); color:rgba(180,220,215,.9);
  border-color:rgba(13,148,136,.25);
}
.splash[data-app="majlis"] .splash-pill{
  background:rgba(180,83,9,.12); color:rgba(230,200,170,.9);
  border-color:rgba(180,83,9,.25);
}
.splash-system{
  margin-top:1.5rem; font-size:.8rem; color:#64748b; letter-spacing:1px;
  opacity:0; animation: fadeIn .5s ease 1.3s forwards;
}
@keyframes splashContentIn { to { transform:translateY(0) scale(1); opacity:1; } }
@keyframes fadeUp { to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn { to { opacity:1; } }

/* Profile avatar (navbar trigger) */
.utq-nav-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--brand, #1a1a1a);
  color: #fff; font-size: .78rem; font-weight: 700;
  line-height: 1; flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--glass-border);
  letter-spacing: -.5px;
}

/* Profile dropdown card */
.utq-profile-card {
  min-width: 240px; padding: 0; border-radius: 12px; overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.08);
}
.utq-profile-head {
  display: flex; align-items: flex-start; gap: 12px; padding: 16px 14px 14px;
}
.utq-profile-avatar-lg {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%;
  background: var(--brand, #1a1a1a);
  color: #fff; font-size: 1.1rem; font-weight: 700;
  box-shadow: 0 0 0 3px rgba(37,99,235,.3);
  letter-spacing: -.5px;
}
.utq-profile-meta { flex: 1; min-width: 0; }
.utq-profile-name {
  font-weight: 700; font-size: .97rem; color: var(--ink, #f1f0ee);
  line-height: 1.3; margin-bottom: 4px; white-space: normal; word-break: break-word;
}
.utq-profile-dept { font-size: .78rem; color: var(--ink-muted, #9b9b9b); margin-bottom: 6px; }
.utq-role-badge {
  display: inline-block; font-size: .72rem; font-weight: 600; padding: 2px 10px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--brand, #1a1a1a) 20%, transparent);
  color: var(--brand, #3a3a3a);
  border: 1px solid color-mix(in oklab, var(--brand, #1a1a1a) 40%, transparent);
  letter-spacing: .3px;
}
.utq-logout-item {
  color: #f87171 !important; padding: 9px 16px; font-size: .9rem;
  display: flex; align-items: center; gap: 7px;
}
.utq-logout-item:hover { background: rgba(248,113,113,.1); }

/* Dark mode toggle */
.utq-theme-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 9px 16px; font-size: .9rem;
  color: var(--ink, #f1f0ee); border: 0; background: none; cursor: pointer;
  border-radius: 0; transition: background var(--t-fast, .12s);
}
.utq-theme-toggle:hover { background: rgba(37,99,235,.1); }
.utq-theme-toggle .toggle-track {
  position: relative; width: 36px; height: 20px; flex-shrink: 0;
  background: var(--line, #e2e8f0); border-radius: 999px;
  transition: background var(--t, .2s);
}
html[data-theme="dark"] .utq-theme-toggle .toggle-track { background: var(--brand, #3a3a3a); }
.utq-theme-toggle .toggle-thumb {
  position: absolute; top: 3px; right: 3px; width: 14px; height: 14px;
  background: #fff; border-radius: 50%;
  transition: transform var(--t, .2s) var(--ease, cubic-bezier(.4,0,.2,1));
}
html[data-theme="dark"] .utq-theme-toggle .toggle-thumb { transform: translateX(-16px); }

/* ── Employee Form ───────────────────────────────────────────────── */
.emp-form-shell {
  background: transparent;
  padding: 2rem 0 4rem; min-height: 100vh;
}
.emp-page-header {
  background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 2px solid var(--glass-border);
  border-radius: var(--radius,14px); box-shadow: var(--shadow,0 10px 24px rgba(0,0,0,.08));
  padding: 1.25rem 1.5rem; margin-bottom: 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.emp-page-header .emp-title { font-size: 1.4rem; font-weight: 800; color: var(--ink,#2a2a2a); margin: 0; }
.emp-page-header .emp-subtitle { color: var(--muted,#6e6e6e); font-size: .9rem; margin-top: .2rem; }
.emp-form-layout { display: grid; grid-template-columns: 200px 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 900px) {
  .emp-form-layout { grid-template-columns: 1fr; }
  .emp-form-nav    { display: none; }
}
.emp-form-nav {
  position: sticky; top: 80px;
  background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 2px solid var(--glass-border);
  border-radius: var(--radius,14px); padding: .75rem 0;
  box-shadow: var(--shadow,0 10px 24px rgba(0,0,0,.08));
}
.emp-nav-item {
  display: flex; align-items: center; gap: .6rem; padding: .55rem 1rem;
  color: var(--muted,#6e6e6e); font-size: .85rem; font-weight: 500;
  cursor: pointer; border-right: 3px solid transparent; transition: all .15s; text-decoration: none;
}
.emp-nav-item:hover { color: var(--brand,#1a1a1a); background: color-mix(in oklab,var(--surface,#fff) 90%,var(--brand,#1a1a1a) 10%); }
.emp-nav-item.active { color: var(--brand,#1a1a1a); border-right-color: var(--brand,#1a1a1a); font-weight: 700; }
.emp-nav-item .nav-icon { font-size: 1rem; width: 20px; text-align: center; }
.emp-section {
  background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 2px solid var(--glass-border);
  border-radius: var(--radius,14px); box-shadow: var(--shadow,0 10px 24px rgba(0,0,0,.08));
  margin-bottom: 1.25rem; overflow: hidden; scroll-margin-top: 80px;
}
.emp-section-header {
  padding: .9rem 1.25rem; border-bottom: 1px solid var(--border,#e7e2db);
  display: flex; align-items: center; gap: .75rem;
  background: color-mix(in oklab, var(--surface,#fff) 96%, var(--brand,#1a1a1a) 4%);
}
.emp-section-icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0;
}
.emp-section-title { font-weight: 700; font-size: .95rem; color: var(--ink,#2a2a2a); }
.emp-section-body { padding: 1.25rem; }
.sec-identity .emp-section-icon { background: #fef3c7; }
.sec-name     .emp-section-icon { background: #e8eaed; }
.sec-work     .emp-section-icon { background: #d1fae5; }
.sec-contact  .emp-section-icon { background: #ede9fe; }
.sec-salary   .emp-section-icon { background: #fce7f3; }
html[data-theme="dark"] .sec-identity .emp-section-icon { background: #422006; }
html[data-theme="dark"] .sec-name     .emp-section-icon { background: var(--surface-3,#2a2a2a); }
html[data-theme="dark"] .sec-work     .emp-section-icon { background: #052e16; }
html[data-theme="dark"] .sec-contact  .emp-section-icon { background: #2e1065; }
html[data-theme="dark"] .sec-salary   .emp-section-icon { background: #500724; }
.emp-form-shell .form-label { font-size: .82rem; font-weight: 600; color: var(--ink,#2a2a2a); margin-bottom: .35rem; }
.emp-form-shell .form-label .req { color: #ef4444; margin-right: .2rem; }
.emp-form-shell .form-label .opt { color: var(--muted,#6e6e6e); font-weight: 400; font-size: .75rem; }
.emp-form-shell .form-control,
.emp-form-shell .form-select {
  font-size: .88rem; border-color: var(--border,#e7e2db); border-radius: 8px;
  padding: .45rem .75rem; transition: border-color .15s, box-shadow .15s;
}
.emp-form-shell .form-control:focus,
.emp-form-shell .form-select:focus {
  border-color: var(--brand,#1a1a1a);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand,#1a1a1a) 15%, transparent);
}
.field-hint { font-size: .76rem; color: var(--muted,#6e6e6e); margin-top: .25rem; }
.salary-total-bar {
  background: color-mix(in oklab, var(--brand,#1a1a1a) 8%, var(--surface,#fff));
  border: 1px solid color-mix(in oklab, var(--brand,#1a1a1a) 20%, var(--border,#e7e2db));
  border-radius: 10px; padding: .75rem 1rem; margin-top: 1rem;
  display: flex; align-items: center; justify-content: space-between;
}
.salary-total-bar .stb-label { font-size: .85rem; color: var(--muted,#6e6e6e); font-weight: 600; }
.salary-total-bar .stb-val   { font-size: 1.25rem; font-weight: 900; color: var(--brand,#1a1a1a); }
.sal-contractor, .sal-volunteer, .sal-both { transition: opacity .2s; }
.emp-errors { background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px; padding: .85rem 1.1rem; margin-bottom: 1.25rem; }
.emp-errors ul { margin: 0; padding-right: 1.2rem; }
.emp-errors li { font-size: .88rem; color: #991b1b; }
html[data-theme="dark"] .emp-errors { background: #450a0a; border-color: #7f1d1d; }
html[data-theme="dark"] .emp-errors li { color: #fca5a5; }
.emp-actions {
  background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 2px solid var(--glass-border);
  border-radius: var(--radius,14px); padding: 1rem 1.25rem;
  display: flex; gap: .75rem; align-items: center;
  box-shadow: var(--shadow,0 10px 24px rgba(0,0,0,.08));
}

/* ── Employee Index ──────────────────────────────────────────────── */
.emp-page{ padding: 1.5rem 0 3rem; }
.kpi-strip{ display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.kpi-card{
  background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 2px solid var(--glass-border); border-radius: var(--radius-sm);
  padding: 1rem 1.15rem; display: flex; align-items: center; gap: .85rem; transition: box-shadow var(--t);
}
.kpi-card:hover{ box-shadow: var(--shadow); }
.kpi-icon{
  width: 42px; height: 42px; border-radius: var(--radius-xs);
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0;
}
.kpi-icon--blue   { background: color-mix(in oklab, var(--brand) 12%, var(--surface)); color: var(--brand); }
.kpi-icon--green  { background: var(--good-bg); color: var(--good); }
.kpi-icon--amber  { background: var(--warn-bg); color: var(--warn); }
.kpi-icon--purple { background: color-mix(in oklab, #7c3aed 10%, var(--surface)); color: #7c3aed; }
.kpi-val{ font-size: 1.5rem; font-weight: 700; line-height: 1.1; color: var(--ink); }
.kpi-lbl{ font-size: .78rem; color: var(--muted); margin-top: 2px; }
.emp-page .filter-bar{
  background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 2px solid var(--glass-border); border-radius: var(--radius-sm);
  padding: .75rem 1rem; margin-bottom: 1rem;
  display: flex; flex-wrap: wrap; gap: .65rem; align-items: center;
  /* Firefox 149+ renders native <select> popups as in-DOM HTML elements that
     respect stacking contexts. Without these two lines the popup extends below
     .filter-bar into .table-card's region, where .table-card's own
     backdrop-filter stacking context (later in document order) paints over it,
     hiding the options. Lifting .filter-bar above its siblings keeps the popup
     visible. */
  position: relative;
  z-index: 5;
}
.emp-page .filter-bar select, .emp-page .filter-bar input{
  font-size: .85rem; border-color: var(--line); background: var(--bg);
  border-radius: var(--radius-xs); padding: .4rem .65rem; min-width: 140px;
}

/* Firefox renders native <select> popups with the options' CSS backgrounds.
   Default option bg is transparent, so on a glassmorphic page the popup shows
   through to whatever is behind it (the table-card's blurred content), and
   hover highlights look "partially covered". Chrome uses OS chrome regardless
   and is unaffected. Giving option/optgroup an explicit surface color fixes
   Firefox without changing Chrome. Scoped to html[data-theme] so it follows
   the theme's token values. */
option, optgroup {
  background-color: var(--surface);
  color: var(--ink);
}
.emp-page .filter-bar .filter-label{ font-size: .8rem; color: var(--muted); font-weight: 600; white-space: nowrap; }
.table-card{
  background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 2px solid var(--glass-border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.table-card .table{ margin: 0; }
.table-card thead th{
  font-size: .8rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .3px;
  border-bottom: 2px solid var(--line); padding: .7rem .65rem; white-space: nowrap; text-align: center;
}
.table-card tbody td{ padding: .6rem .65rem; vertical-align: middle; font-size: .88rem; white-space: nowrap; }
.table-card tbody tr{ cursor: pointer; transition: background var(--t-fast); }
.table-card tbody tr:hover{ background: color-mix(in oklab, var(--surface) 93%, var(--brand) 7%); }
.badge-class{
  font-size: .75rem; font-weight: 600; padding: .2rem .55rem; border-radius: var(--radius-xs);
  background: color-mix(in oklab, var(--brand) 10%, var(--surface));
  color: var(--brand); border: 1px solid color-mix(in oklab, var(--brand) 18%, var(--surface));
}
.badge-dept{ font-size: .78rem; color: var(--ink); font-weight: 500; }
.badge-role{
  font-size: .75rem; padding: .2rem .5rem; border-radius: var(--radius-xs);
  background: var(--surface-2); color: var(--muted); font-weight: 500;
}
.emp-name{ font-weight: 600; color: var(--ink); }
.emp-code{ font-size: .75rem; color: var(--muted); }
.act-btn{
  width: 30px; height: 30px; border-radius: var(--radius-xs);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  transition: all var(--t-fast); cursor: pointer; font-size: .8rem;
}
.act-btn:hover{ border-color: var(--brand); color: var(--brand); background: var(--brand-50); }
.act-btn--danger:hover{ border-color: var(--bad); color: var(--bad); background: var(--bad-bg); }
.page-header{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap; gap: .75rem; }
.page-header h1{ font-size: 1.5rem; font-weight: 700; margin: 0; color: var(--ink); }
.page-header .subtitle{ font-size: .88rem; color: var(--muted); margin-top: .15rem; }
.emp-page .dataTables_wrapper .dataTables_filter{ display: none; }
.emp-page .dataTables_wrapper .dataTables_info{ color: var(--muted); font-size: .82rem; }
.emp-page .dataTables_wrapper .dt-buttons .btn{ margin: 0 .2rem; }
.fab{
  position: fixed; inset-inline-start: 1rem; inset-block-end: 1.25rem; z-index: 10;
  border-radius: 999px; padding: .5rem 1rem; box-shadow: var(--shadow-lg);
  background: var(--brand); color: #fff; font-weight: 600; text-decoration: none; display: none;
}
@media (max-width: 767px){ .fab{ display: flex; align-items: center; gap: .35rem; } }
@media (max-width: 767px){
  .kpi-strip{ grid-template-columns: repeat(2, 1fr); }
  .emp-page .filter-bar{ flex-direction: column; align-items: stretch; }
  .emp-page .filter-bar select, .emp-page .filter-bar input{ min-width: 100%; }
}

/* ── Employee Show ───────────────────────────────────────────────── */
.page-shell{
  background: transparent;
  padding: 2rem 0 3rem;
}
.page-shell .hero{
  background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 2px solid var(--glass-border);
  border-radius: 16px; box-shadow: var(--shadow); padding: 1.25rem 1.25rem;
}
.page-shell .avatar{
  width: 68px; height: 68px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  font-weight: 700; font-size: 1.25rem; color: #fff;
  background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.4);
}
.page-shell .chip{
  display:inline-flex; align-items:center; gap:.4rem;
  border:1px solid var(--line); background: var(--surface-2);
  color: var(--ink); border-radius: 999px; padding: .25rem .6rem;
  font-size: .85rem; font-weight: 600;
}
.page-shell .badge-soft{
  color: var(--brand);
  background: color-mix(in oklab, var(--brand) 12%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--brand) 20%, var(--surface));
}
.section-card{
  background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 2px solid var(--glass-border);
  border-radius: 14px; padding: 1rem 1rem;
  box-shadow: var(--shadow);
}
.section-title{ font-weight: 700; margin-bottom: .75rem; font-size: 1.05rem; color: var(--ink); }
.kv{ display:flex; gap:.5rem; align-items:baseline; margin-bottom: .35rem; }
.kv .k{ color: var(--muted); min-width: 120px; }
.kv .v{ color: var(--ink); font-weight: 600; }
[data-copy]{ cursor: pointer; }
.page-shell .btn-brand{
  --bs-btn-bg: var(--brand,#1a1a1a); --bs-btn-border-color: var(--brand,#1a1a1a);
  --bs-btn-hover-bg: var(--brand-600,#2a2a2a); --bs-btn-hover-border-color: var(--brand-600,#2a2a2a);
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff;
}

/* ── Leaves: My Requests ─────────────────────────────────────────── */
.my-hero {
  background: linear-gradient(135deg, var(--brand) 0%, color-mix(in oklab, var(--brand) 70%, #000) 100%);
  border-radius: 14px; padding: 24px 28px; color: #fff; margin-bottom: 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.my-hero-title { font-size: 1.4rem; font-weight: 700; margin: 0 0 4px; }
.my-hero-sub   { font-size: .9rem; opacity: .85; margin: 0; }
.balance-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px,1fr)); gap: 12px; margin-bottom: 24px; }
.balance-card {
  background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 2px solid var(--glass-border); border-radius: 12px;
  padding: 14px 16px; text-align: center;
}
.balance-card .bc-type { font-size: .78rem; color: var(--ink-muted); margin-bottom: 6px; }
.balance-card .bc-num  { font-size: 2rem; font-weight: 800; color: var(--brand); line-height: 1; }
.balance-card .bc-sub  { font-size: .75rem; color: var(--ink-muted); margin-top: 4px; }
.balance-card .bc-bar  { height: 4px; border-radius: 2px; background: var(--line); margin-top: 10px; overflow: hidden; }
.balance-card .bc-fill { height: 100%; background: var(--brand); border-radius: 2px; }
.my-table-wrap { overflow-x: auto; }
.my-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.my-table thead th {
  background: color-mix(in oklab, var(--brand) 12%, transparent);
  color: var(--brand); font-weight: 700; padding: 10px 12px;
  border-bottom: 2px solid var(--line); text-align: right; white-space: nowrap;
}
.my-table tbody tr { border-bottom: 1px solid var(--line); transition: background .15s; }
.my-table tbody tr:hover { background: color-mix(in oklab, var(--brand) 5%, transparent); }
.my-table td { padding: 10px 12px; vertical-align: middle; }
.badge-warn  { background: #fff3cd; color: #c17a00; border: 1px solid #fbbf24; }
.badge-good  { background: #d1fae5; color: #1c7a3c; border: 1px solid #6ee7b7; }
.badge-bad   { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }
html[data-theme="dark"] .badge-warn { background: var(--warn-bg); color: var(--warn); border-color: rgba(251,191,36,.25); }
html[data-theme="dark"] .badge-good { background: var(--good-bg); color: var(--good); border-color: rgba(74,222,128,.25); }
html[data-theme="dark"] .badge-bad  { background: var(--bad-bg);  color: var(--bad);  border-color: rgba(248,113,113,.25); }
.badge-muted { background: var(--bg); color: var(--ink-muted); border: 1px solid var(--line); }
.status-badge { display: inline-block; font-size: .75rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.mini-steps { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.ms-dot {
  width: 22px; height: 22px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-size: .65rem; font-weight: 700;
  border: 2px solid var(--line); color: var(--ink-muted); background: var(--bg); flex-shrink: 0;
}
.ms-dot.approved { background: #d1fae5; border-color: #6ee7b7; color: #1c7a3c; }
.ms-dot.rejected { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }
.ms-dot.pending  { background: #fff3cd; border-color: #fbbf24; color: #c17a00; }
.ms-dot.current  { box-shadow: 0 0 0 3px color-mix(in oklab, var(--warn,#f59e0b) 30%, transparent); }
.ms-connector { width: 10px; height: 2px; background: var(--line); border-radius: 1px; flex-shrink: 0; }
.empty-state { text-align: center; padding: 60px 20px; color: var(--ink-muted); }
.empty-state i { font-size: 3rem; display: block; margin-bottom: 12px; opacity: .4; }

/* ── Leaves: Index (stepper v2) ──────────────────────────────────── */
.stepper-v2 { display: flex; align-items: flex-start; padding: 6px 2px 2px; margin: 0; }
.stepper-v2 .step { position: relative; flex: 1; text-align: center; }
.stepper-v2 .step:not(:last-child)::after {
  content: ''; position: absolute; top: 13px; left: -50%;
  height: 3px; width: 100%; background: #e4e4e4; border-radius: 2px; z-index: 1;
}
.stepper-v2 .step-icon {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  border: 2.5px solid #ddd; background: #f9fafb; color: #aaa;
  font-size: 12px; font-weight: 700; line-height: 1; transition: transform .15s;
}
.stepper-v2 .step-label {
  display: block; margin-top: 5px; font-size: 10px; color: #888;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 95%; margin-inline: auto;
}
.stepper-v2 .step.is-approved .step-icon  { background: #22c55e; border-color: #16a34a; color: #fff; }
.stepper-v2 .step.is-approved::after       { background: #22c55e; }
.stepper-v2 .step.is-approved .step-label  { color: #166534; }
.stepper-v2 .step.is-current .step-icon   { background: #fff; border-color: #f59e0b; color: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.15); }
.stepper-v2 .step.is-current .step-label  { color: #92400e; font-weight: 600; }
.stepper-v2 .step.is-rejected .step-icon  { background: #ef4444; border-color: #dc2626; color: #fff; }
.stepper-v2 .step.is-rejected .step-label { color: #991b1b; font-weight: 600; }
.stepper-v2 .step.is-skipped .step-icon   { background: #d1d5db; border-color: #9ca3af; color: #fff; }
.stepper-v2 .step.is-skipped::after        { background: #22c55e; }
.stepper-v2 .step.is-skipped .step-label  { color: #6b7280; text-decoration: line-through; }
.stepper-v2 .step.is-future .step-icon    { background: #f3f4f6; border-color: #e5e7eb; color: #d1d5db; }
table .stepper-cell { min-width: 260px !important; }
table.table-hover tbody tr.row-link { cursor: pointer; }
table.table-hover tbody tr.row-link:hover { background-color: rgba(13,110,253,.06); }

/* ── Leaves: Show (detail) ───────────────────────────────────────── */
.leaves-show .card{border:1px solid #e6e6e6;border-radius:10px;background:#fff;margin-bottom:16px}
.leaves-show .card-header{padding:12px 16px;border-bottom:1px solid #eee;font-weight:700}
.leaves-show .card-body{padding:16px}
.meta-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.meta-grid .item{background:#fafafa;border:1px solid #f0f0f0;border-radius:8px;padding:10px}
.meta-grid .label{color:#666;font-size:.85rem;margin-bottom:4px}
.meta-grid .value{font-weight:600}
.ap-track { padding: 6px 0 0; }
.ap-rail-wrap { position: relative; display: flex; align-items: center; height: 36px; }
.ap-rail { position: absolute; left: 0; right: 0; height: 5px; border-radius: 3px; background: #e4e4e4; overflow: hidden; }
.ap-fill { position: absolute; top: 0; right: 0; height: 100%; width: 0; background: linear-gradient(to left, #22c55e, #16a34a); transition: width .5s ease; border-radius: 3px; }
.ap-nodes { position: relative; width: 100%; display: flex; justify-content: space-between; pointer-events: none; }
.ap-dot {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; border: 3px solid #ddd; background: #fff;
  position: relative; z-index: 2; pointer-events: auto;
  transition: transform .2s, box-shadow .2s; cursor: default;
}
.ap-dot:hover { transform: scale(1.12); box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.ap-dot.approved { background: #22c55e; border-color: #16a34a; color: #fff; }
.ap-dot.pending  { background: #fff; border-color: #f59e0b; color: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.15); }
.ap-dot.rejected { background: #ef4444; border-color: #dc2626; color: #fff; }
.ap-dot.skipped  { background: #9ca3af; border-color: #6b7280; color: #fff; }
@keyframes ap-pulse { 0%,100%{box-shadow:0 0 0 3px rgba(245,158,11,.2)} 50%{box-shadow:0 0 0 6px rgba(245,158,11,.08)} }
.ap-dot.pending { animation: ap-pulse 2s ease-in-out infinite; }
.ap-labels { display: flex; justify-content: space-between; margin-top: 10px; gap: 4px; }
.ap-label-col { flex: 1; min-width: 0; text-align: center; font-size: .78rem; line-height: 1.4; }
.ap-label-role { color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-label-name { font-weight: 600; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-label-badge { display: inline-block; margin-top: 2px; padding: 1px 8px; border-radius: 999px; font-size: .7rem; font-weight: 600; }
.ap-label-badge.approved { background: #dcfce7; color: #166534; }
.ap-label-badge.pending  { background: #fef9c3; color: #854d0e; }
.ap-label-badge.rejected { background: #fee2e2; color: #991b1b; }
.ap-label-badge.skipped  { background: #f3f4f6; color: #4b5563; }
.ap-label-date  { color: #aaa; font-size: .72rem; }
.steps-table th, .steps-table td { vertical-align: middle; }
@media (max-width: 992px){ .meta-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 576px){ .meta-grid{grid-template-columns:1fr} }

/* ── Leaves Show: Dark theme ─────────────────────────────────────── */
html[data-theme="dark"] .leaves-show .card{ background:var(--surface); border-color:var(--line); }
html[data-theme="dark"] .leaves-show .card-header{ border-bottom-color:var(--line); }
html[data-theme="dark"] .meta-grid .item{ background:var(--surface-2); border-color:var(--surface-3); }
html[data-theme="dark"] .meta-grid .label{ color:var(--muted); }
html[data-theme="dark"] .meta-grid .value{ color:var(--ink); }
html[data-theme="dark"] .ap-rail{ background:var(--surface-3); }
html[data-theme="dark"] .ap-dot.pending{ background:var(--surface); border-color:#f59e0b; color:#f59e0b; box-shadow:0 0 0 3px rgba(245,158,11,.2); }
html[data-theme="dark"] .ap-label-role{ color:var(--muted); }
html[data-theme="dark"] .ap-label-name{ color:var(--ink); }
html[data-theme="dark"] .ap-label-date{ color:var(--muted); }
html[data-theme="dark"] .ap-label-badge.approved{ background:var(--good-bg); color:var(--good); }
html[data-theme="dark"] .ap-label-badge.pending { background:var(--warn-bg); color:var(--warn); }
html[data-theme="dark"] .ap-label-badge.rejected{ background:var(--bad-bg); color:var(--bad); }
html[data-theme="dark"] .ap-label-badge.skipped { background:var(--surface-3); color:var(--muted); }

/* ── Leaves: Team Calendar ───────────────────────────────────────── */
.cal-shell{ background:transparent; padding:2rem 0 3rem; }
.cal-hero{
  background:var(--glass-bg); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:2px solid var(--glass-border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:1.1rem 1.25rem; margin-bottom:1rem;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.75rem;
}
.cal-hero-title{ font-size:1.25rem; font-weight:900; color:var(--ink); margin:0; }
.cal-hero-sub{ font-size:.85rem; color:var(--muted); margin-top:.15rem; }
.cal-filters{
  background:var(--glass-bg); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:2px solid var(--glass-border); border-radius:var(--radius);
  padding:.85rem 1.25rem; margin-bottom:1rem; display:flex; flex-wrap:wrap; gap:.75rem; align-items:flex-end;
}
.cal-filters .form-label{ font-size:.8rem; color:var(--muted); margin-bottom:.25rem; }
.month-nav{ display:flex; align-items:center; gap:.5rem; }
.month-nav a{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:8px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); text-decoration:none;
  transition:background .12s, color .12s;
}
.month-nav a:hover{ background:var(--brand); color:#fff; border-color:var(--brand); }
.month-label{ font-size:.95rem; font-weight:800; color:var(--ink); min-width:160px; text-align:center; }
.cal-wrap{
  background:var(--glass-bg); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:2px solid var(--glass-border); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden; margin-bottom:1.5rem;
}
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); }
.cal-dow{
  background:var(--surface-2); border-bottom:1px solid var(--line);
  padding:.45rem 0; text-align:center; font-size:.78rem; font-weight:800; color:var(--muted);
}
.cal-dow.fri-sat{ color:var(--bad); }
.cal-cell{
  min-height:100px; border:1px solid var(--line); padding:.4rem .45rem .35rem;
  position:relative; vertical-align:top; font-size:.8rem; transition:background .1s;
}
.cal-cell.empty{ background:var(--surface-2); opacity:.5; }
.cal-cell.today{ background:color-mix(in oklab, var(--brand) 6%, white); }
.cal-cell.today .cal-day-num{ background:var(--brand); color:#fff; border-radius:50%; }
.cal-cell.weekend{ background:color-mix(in oklab, var(--bad) 3%, var(--surface)); }
.cal-day-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; font-size:.78rem; font-weight:700; color:var(--ink); margin-bottom:.3rem;
}
.leave-chip{
  display:flex; align-items:center; gap:.3rem;
  padding:.18rem .45rem; border-radius:5px; margin-bottom:.2rem;
  font-size:.7rem; font-weight:600; line-height:1.3; cursor:default;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.leave-chip .lc-dot{ width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.leave-chip a{ color:inherit; text-decoration:none; }
.leave-chip a:hover{ text-decoration:underline; }
.chip-pending{ opacity:.7; }
.cal-more{ font-size:.68rem; color:var(--muted); padding:.1rem .3rem; cursor:pointer; }
.upcoming-section{
  background:var(--glass-bg); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:2px solid var(--glass-border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:1.1rem 1.25rem;
}
.upcoming-head{
  display:flex; align-items:center; gap:.5rem;
  font-size:1rem; font-weight:800; margin-bottom:.85rem;
  padding-bottom:.65rem; border-bottom:1px solid var(--line);
}
.upcoming-head i{ color:var(--brand); }
.upc-row{
  display:flex; align-items:center; gap:.75rem;
  padding:.55rem 0; border-bottom:1px solid var(--line); flex-wrap:wrap;
}
.upc-row:last-child{ border-bottom:none; }
.upc-avatar{
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.8rem; color:#fff;
}
.upc-name{ font-weight:700; font-size:.9rem; color:var(--ink); }
.upc-dept{ font-size:.78rem; color:var(--muted); }
.upc-dates{
  margin-right:auto; font-size:.82rem; color:var(--muted);
  display:flex; align-items:center; gap:.35rem;
}
.upc-type-badge{ font-size:.72rem; font-weight:600; padding:.2rem .55rem; border-radius:5px; }
.upc-status{ font-size:.72rem; font-weight:700; padding:.2rem .5rem; border-radius:5px; }
.status-approved{ background:#dcfce7; color:#166534; }
.status-submitted{ background:#fef9c3; color:#854d0e; }
@media(max-width:640px){
  .cal-cell{ min-height:52px; padding:.25rem; }
  .leave-chip{ font-size:.62rem; padding:.12rem .3rem; }
  .cal-day-num{ width:18px; height:18px; font-size:.7rem; }
}

/* ── Leaves: Direct Entry ────────────────────────────────────────── */
.de-shell { padding: 1.5rem 0 3rem; direction: rtl; }
.de-card  {
  background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 2px solid var(--glass-border);
  border-radius: var(--radius, 14px); padding: 1.5rem; margin-bottom: 1.5rem;
}
.de-section-head {
  font-weight: 700; font-size: .95rem; color: var(--ink);
  border-bottom: 1px solid var(--line, #e2e8f0);
  padding-bottom: .6rem; margin-bottom: 1rem;
  display: flex; align-items: center; gap: .5rem;
}
.de-badge-warn {
  background: #fef9c3; color: #854d0e; border: 1px solid #fde68a;
  border-radius: 8px; padding: .45rem .9rem; font-size: .85rem;
  margin-bottom: 1.25rem; display: flex; align-items: flex-start; gap: .5rem;
}

/* ── Attendance Index ────────────────────────────────────────────── */
.att-page-shell{ background:linear-gradient(180deg,color-mix(in oklab,var(--bg,#f7f5f2) 85%,#fff 15%),var(--bg,#f7f5f2)); padding:2.25rem 0 3rem; }
.page-card { background:var(--glass-bg); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); border:2px solid var(--glass-border); border-radius:var(--radius,14px); box-shadow:var(--shadow,0 10px 24px rgba(0,0,0,.08)); }
.att-page-shell .hero,
.page-shell .hero-att { background:var(--glass-bg); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); border:2px solid var(--glass-border); border-radius:var(--radius,14px); box-shadow:var(--shadow,0 10px 24px rgba(0,0,0,.08)); padding:1.25rem; }
.att-page-shell .hero .title,
.page-shell .hero .title { margin:0; font-size:clamp(1.25rem,2.2vw,1.75rem); color:var(--ink); }
.att-page-shell .hero .subtitle,
.page-shell .hero .subtitle { color:var(--muted); margin-top:.25rem; font-size:.95rem; }
.kpi-strip  { display:flex; gap:.75rem; flex-wrap:wrap; margin-bottom:1rem; }
.kpi-chip   { flex:1 1 140px; background:var(--glass-bg); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); border:2px solid var(--glass-border); border-radius:10px; padding:.75rem 1rem; display:flex; flex-direction:column; gap:.2rem; }
.kpi-chip .kval{ font-size:1.7rem; font-weight:900; line-height:1; }
.kpi-chip .klbl{ font-size:.82rem; color:var(--muted); }
.kpi-chip.kpi-present { border-right:4px solid #22c55e; }
.kpi-chip.kpi-late    { border-right:4px solid #f59e0b; }
.kpi-chip.kpi-absent  { border-right:4px solid #ef4444; }
.kpi-chip.kpi-latemins{ border-right:4px solid #8b5cf6; }
.kpi-chip.kpi-leave   { border-right:4px solid #3b82f6; }
.kpi-chip .kval{ color:var(--ink); }

/* Attendance row status highlights */
.row-leave > td { background:color-mix(in oklab, var(--surface) 92%, #3b82f6 8%); }
.row-absent > td { background:color-mix(in oklab, var(--surface) 93%, #ef4444 7%); }
.row-holiday > td { background:color-mix(in oklab, var(--surface) 92%, #8b5cf6 8%); }
.row-leave:hover > td { background:color-mix(in oklab, var(--surface) 85%, #3b82f6 15%) !important; }
.row-absent:hover > td { background:color-mix(in oklab, var(--surface) 86%, #ef4444 14%) !important; }
.row-holiday:hover > td { background:color-mix(in oklab, var(--surface) 85%, #8b5cf6 15%) !important; }
html[data-theme="dark"] .row-leave > td { background:color-mix(in oklab, var(--surface) 88%, #3b82f6 12%); }
html[data-theme="dark"] .row-absent > td { background:color-mix(in oklab, var(--surface) 89%, #ef4444 11%); }
html[data-theme="dark"] .row-holiday > td { background:color-mix(in oklab, var(--surface) 88%, #8b5cf6 12%); }
html[data-theme="dark"] .row-leave:hover > td { background:color-mix(in oklab, var(--surface) 80%, #3b82f6 20%) !important; }
html[data-theme="dark"] .row-absent:hover > td { background:color-mix(in oklab, var(--surface) 82%, #ef4444 18%) !important; }
html[data-theme="dark"] .row-holiday:hover > td { background:color-mix(in oklab, var(--surface) 80%, #8b5cf6 20%) !important; }

/* Late/early time text — readable in dark mode */
html[data-theme="dark"] .table .text-warning{ color:#fbbf24 !important; }

.badge-present{ background:#dcfce7; color:#166534; border:1px solid #bbf7d0; }
.badge-late   { background:#fef9c3; color:#854d0e; border:1px solid #fde68a; }
.badge-absent { background:#fee2e2; color:#991b1b; border:1px solid #fecaca; }
.badge-leave  { background:#e8eaed; color:#2a2a2a; border:1px solid #cbd5e1; }
.badge-holiday{ background:#ede9fe; color:#5b21b6; border:1px solid #c4b5fd; }
.badge-src    { background:color-mix(in oklab,var(--brand,#1a1a1a) 15%,var(--surface,#fff)); color:var(--brand,#1a1a1a); border:1px solid color-mix(in oklab,var(--brand,#1a1a1a) 25%,var(--surface,#fff)); }

/* Soft badge variants (ledger transaction types) */
.badge-success-soft{ background:var(--good-bg); color:var(--good-700); border:1px solid color-mix(in oklab, var(--good) 25%, var(--surface)); }
.badge-warning-soft{ background:var(--warn-bg); color:var(--warn-700); border:1px solid color-mix(in oklab, var(--warn) 25%, var(--surface)); }
.badge-danger-soft { background:var(--bad-bg);  color:var(--bad-700);  border:1px solid color-mix(in oklab, var(--bad) 25%, var(--surface)); }
html[data-theme="dark"] .badge-present{ background:#14532d; color:#86efac; border-color:#166534; }
html[data-theme="dark"] .badge-late   { background:#451a03; color:#fcd34d; border-color:#78350f; }
html[data-theme="dark"] .badge-absent { background:#450a0a; color:#fca5a5; border-color:#7f1d1d; }
html[data-theme="dark"] .badge-leave  { background:#2a2a2a; color:#94a3b8; border-color:#3a3a3a; }
html[data-theme="dark"] .badge-holiday{ background:#2e1065; color:#c4b5fd; border-color:#4c1d95; }
.period-nav {
  background:var(--glass-bg); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:2px solid var(--glass-border); border-radius:var(--radius,14px);
  box-shadow:var(--shadow,0 10px 24px rgba(0,0,0,.08));
  padding:.85rem 1.25rem; display:flex; align-items:center; gap:1rem; margin-bottom:1rem;
}
.period-nav .period-label { flex:1; text-align:center; font-size:1rem; font-weight:700; color:var(--ink); }
.period-nav .period-tag {
  background:color-mix(in oklab,var(--brand,#1a1a1a) 15%,var(--surface,#fff));
  color:var(--brand,#1a1a1a); border-radius:20px; padding:.15rem .75rem;
  font-size:.78rem; font-weight:600; white-space:nowrap;
}
.filter-bar {
  background:var(--glass-bg); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:2px solid var(--glass-border); border-radius:var(--radius,14px);
  padding:.75rem 1.25rem; margin-bottom:1rem; display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
}
.filter-bar .emp-count { margin-right:auto; color:var(--muted); font-size:.85rem; }
.emp-accordion { display:flex; flex-direction:column; gap:.5rem; }
.emp-item {
  background:var(--glass-bg); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:2px solid var(--glass-border); border-radius:10px;
  overflow:hidden; transition:border-color .15s, box-shadow .15s;
}
.emp-item:has(.emp-collapse.show),
.emp-item:has(.emp-collapse.collapsing) { border-color:var(--brand,#1a1a1a); box-shadow:0 2px 8px rgba(0,0,0,.06); }
.emp-toggle {
  display:flex; align-items:center; gap:.75rem; padding:.7rem 1rem;
  cursor:pointer; user-select:none; background:transparent; border:none; width:100%; text-align:right;
}
.emp-toggle:hover { background:color-mix(in oklab,var(--surface) 92%,var(--brand,#1a1a1a) 8%); }
.emp-chevron { color:var(--muted); transition:transform .2s; font-size:.75rem; flex-shrink:0; }
.emp-toggle[aria-expanded="true"] .emp-chevron { transform:rotate(-90deg); }
.att-page-shell .emp-name,
.emp-accordion .emp-name { font-weight:600; color:var(--ink); font-size:.9rem; min-width:0; }
.emp-dept { color:var(--muted); font-size:.8rem; flex:1; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.emp-badges { display:flex; gap:.4rem; flex-shrink:0; align-items:center; }
.emp-detail-table { width:100%; border-collapse:collapse; font-size:.82rem; }
.emp-detail-table th {
  background:color-mix(in oklab,var(--surface) 92%,var(--ink) 8%);
  color:var(--muted); padding:.45rem .75rem; text-align:right; font-weight:600;
  border-bottom:1px solid var(--line); white-space:nowrap;
}
.emp-detail-table td {
  padding:.45rem .75rem; border-bottom:1px solid var(--line);
  white-space:nowrap; color:var(--ink); vertical-align:middle;
}
.emp-detail-table tr:last-child td { border-bottom:none; }
.emp-detail-table tbody tr:hover td { background:color-mix(in oklab,var(--surface) 94%,var(--brand,#1a1a1a) 6%); }
table.dataTable td,table.dataTable th{ vertical-align:middle; }
/* DataTables RTL fix — force RTL direction on wrapper and table */
[dir="rtl"] .dataTables_wrapper { direction: rtl; text-align: right; }
[dir="rtl"] .dataTables_wrapper table.dataTable thead th,
[dir="rtl"] .dataTables_wrapper table.dataTable thead td { text-align: right; }
[dir="rtl"] .dataTables_wrapper .dataTables_filter { text-align: left; }
[dir="rtl"] .dataTables_wrapper .dataTables_length { text-align: right; }
[dir="rtl"] .dataTables_wrapper .dataTables_info { text-align: right; }
[dir="rtl"] .dataTables_wrapper .dataTables_paginate { text-align: left; }
/* RTL fix: DataTables sorting arrows and padding are hardcoded LTR */
[dir="rtl"] table.dataTable thead>tr>th.sorting,
[dir="rtl"] table.dataTable thead>tr>th.sorting_asc,
[dir="rtl"] table.dataTable thead>tr>th.sorting_desc,
[dir="rtl"] table.dataTable thead>tr>th.sorting_asc_disabled,
[dir="rtl"] table.dataTable thead>tr>th.sorting_desc_disabled {
    padding-right: 0.75rem !important;
    padding-left: 26px !important;
}
[dir="rtl"] table.dataTable thead>tr>th.sorting:before,
[dir="rtl"] table.dataTable thead>tr>th.sorting:after,
[dir="rtl"] table.dataTable thead>tr>th.sorting_asc:before,
[dir="rtl"] table.dataTable thead>tr>th.sorting_asc:after,
[dir="rtl"] table.dataTable thead>tr>th.sorting_desc:before,
[dir="rtl"] table.dataTable thead>tr>th.sorting_desc:after,
[dir="rtl"] table.dataTable thead>tr>th.sorting_asc_disabled:before,
[dir="rtl"] table.dataTable thead>tr>th.sorting_desc_disabled:after {
    right: auto !important;
    left: 10px !important;
}
table.dataTable tbody tr:hover{ background:color-mix(in oklab,var(--surface) 92%,var(--brand,#1a1a1a) 8%); }
.dataTables_empty{ padding:3rem 1rem !important; color:var(--muted,#6e6e6e) !important; text-align:center; font-size:.95rem; }
.emp-item.hidden-by-search { display:none; }

/* ── Payroll: Create ─────────────────────────────────────────────── */
.cr-shell        { max-width:860px; margin:0 auto; padding:2rem 1rem; direction:rtl }
.cr-header       { display:flex; align-items:center; justify-content:space-between; margin-bottom:2rem }
.cr-title        { font-size:1.45rem; font-weight:700; color:var(--ink,#2a2a2a); display:flex; align-items:center; gap:.6rem }
.cr-grid         { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem }
@media(max-width:640px){ .cr-grid{ grid-template-columns:1fr } }
.cr-card         { background:var(--surface,#fff); border:1px solid var(--line,#e2e8f0); border-radius:14px; padding:1.6rem; box-shadow:0 1px 4px rgba(0,0,0,.06) }
.cr-card-title   { font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted,#64748b); margin-bottom:1.1rem }
.cr-month-wrap   { position:relative }
.cr-month-input  { width:100%; padding:.75rem 1rem; font-size:1.05rem; border:2px solid var(--line,#e2e8f0); border-radius:10px; background:var(--surface-2,#f8fafc); color:var(--ink,#2a2a2a); transition:border-color .2s }
.cr-month-input:focus{ outline:none; border-color:var(--brand,#0369a1); background:var(--surface,#fff) }
.cr-month-badge  { display:inline-block; margin-top:.5rem; font-size:.8rem; font-weight:600; padding:.25rem .7rem; border-radius:99px }
.cr-month-badge.ok   { background:#dcfce7; color:#166534 }
.cr-month-badge.taken{ background:#fee2e2; color:#991b1b }
.cr-timeline     { display:flex; flex-direction:column; gap:.75rem; margin-top:.3rem }
.cr-tl-item      { display:flex; align-items:flex-start; gap:.8rem }
.cr-tl-dot       { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:.85rem }
.cr-tl-dot.start { background:var(--surface-2,#e8eaed); color:var(--ink,#2a2a2a) }
.cr-tl-dot.end   { background:#fef9c3; color:#a16207 }
.cr-tl-dot.pay   { background:#dcfce7; color:#166534 }
.cr-tl-label     { font-size:.78rem; color:var(--muted,#64748b); font-weight:500 }
.cr-tl-date      { font-size:1rem; font-weight:700; color:var(--ink,#2a2a2a) }
.cr-stat-row     { display:flex; gap:.75rem; flex-wrap:wrap }
.cr-stat         { flex:1; min-width:100px; background:var(--surface-2,#f8fafc); border:1px solid var(--line,#e2e8f0); border-radius:10px; padding:.85rem 1rem; text-align:center }
.cr-stat-val     { font-size:1.5rem; font-weight:800; color:var(--ink,#2a2a2a) }
.cr-stat-lbl     { font-size:.72rem; color:var(--muted,#64748b); margin-top:.15rem }
.cr-steps        { display:flex; flex-direction:column; gap:.6rem }
.cr-step         { display:flex; align-items:center; gap:.75rem; padding:.6rem .85rem; border-radius:9px; background:var(--surface-2,#f8fafc); border:1px solid var(--line,#e2e8f0) }
.cr-step-num     { width:26px; height:26px; border-radius:50%; background:var(--brand,#0369a1); color:#fff; font-size:.78rem; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.cr-step-text    { font-size:.84rem; color:var(--ink,#374151); font-weight:500 }
.cr-step-text small{ display:block; color:var(--muted,#6b7280); font-weight:400; font-size:.76rem }
.cr-cfg-row      { display:flex; align-items:center; justify-content:space-between; padding:.55rem 0; border-bottom:1px solid var(--line,#f1f5f9); font-size:.84rem }
.cr-cfg-row:last-child{ border-bottom:none }
.cr-cfg-key      { color:var(--muted,#64748b) }
.cr-cfg-val      { font-weight:600; color:var(--ink,#2a2a2a) }
.cr-period-chip  { display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .7rem; border-radius:99px; font-size:.78rem; font-weight:600; margin:.2rem }
.cr-period-chip.open      { background:var(--surface-2,#e8eaed); color:var(--ink,#2a2a2a) }
.cr-period-chip.calculated{ background:#fef3c7; color:#92400e }
.cr-period-chip.approved  { background:#d1fae5; color:#065f46 }
.cr-period-chip.closed    { background:var(--surface-2,#f1f5f9); color:var(--muted,#475569) }
.cr-submit       { width:100%; padding:.9rem; font-size:1rem; font-weight:700; background:var(--brand,#0369a1); color:#fff; border:none; border-radius:10px; cursor:pointer; transition:opacity .2s }
.cr-submit:hover { opacity:.92 }
.cr-submit:disabled{ opacity:.5; cursor:not-allowed }
/* Dark overrides for colored badges */
html[data-theme="dark"] .cr-month-badge.ok   { background:#052e16; color:#4ade80 }
html[data-theme="dark"] .cr-month-badge.taken{ background:#450a0a; color:#fca5a5 }
html[data-theme="dark"] .cr-tl-dot.end       { background:#422006; color:#fbbf24 }
html[data-theme="dark"] .cr-tl-dot.pay       { background:#052e16; color:#4ade80 }
html[data-theme="dark"] .cr-period-chip.calculated{ background:#422006; color:#fbbf24 }
html[data-theme="dark"] .cr-period-chip.approved  { background:#052e16; color:#4ade80 }

/* ── Payroll: Payslip print override ─────────────────────────────── */
@media print {
  .no-print, nav, .sidebar, footer { display:none !important; }
  body { background:#fff !important; }
}

/* ── Payroll: Period Detail (deductions popup, gross edit) ────────── */
.ded-overlay { display: none; position: fixed; inset: 0; z-index: 1050; background: rgba(0,0,0,.45); align-items: center; justify-content: center; }
.ded-overlay.show { display: flex; }
.ded-card {
  background: var(--surface, #fff); border: 1px solid var(--line, #e2e8f0);
  border-radius: var(--radius, 14px); box-shadow: 0 20px 60px rgba(0,0,0,.25);
  width: min(600px, 95vw); max-height: 80vh; display: flex; flex-direction: column; overflow: hidden;
}
.ded-card-head {
  display: flex; align-items: center; gap: .75rem; padding: .9rem 1.25rem;
  border-bottom: 1px solid var(--line, #e2e8f0);
  background: color-mix(in oklab, var(--surface,#fff) 94%, var(--brand,#1a1a1a) 6%);
}
.ded-card-head h6 { margin: 0; font-size: .95rem; font-weight: 700; color: var(--ink); flex: 1; }
.ded-card-body { overflow-y: auto; padding: 1rem 1.25rem; flex: 1; }
.ded-card-foot {
  padding: .75rem 1.25rem; border-top: 1px solid var(--line, #e2e8f0);
  display: flex; justify-content: space-between; align-items: center;
  background: color-mix(in oklab, var(--surface,#fff) 96%, var(--brand,#1a1a1a) 4%);
}
.ded-items-tbl { width: 100%; border-collapse: collapse; font-size: .88rem; }
.ded-items-tbl th { color: var(--muted); font-weight: 600; padding: .35rem .6rem; border-bottom: 1px solid var(--line); text-align: right; }
.ded-items-tbl td { padding: .5rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink); }
.ded-items-tbl tr:last-child td { border-bottom: none; }
.ded-edit-row { display: none; }
.ded-edit-row.open { display: table-row; }
.ded-edit-row td { padding: .4rem .6rem .7rem; background: color-mix(in oklab, var(--surface,#fff) 90%, var(--brand,#1a1a1a) 10%); }
.cell-editable { cursor: pointer; }
.cell-editable .cell-display { border-bottom: 1px dashed var(--muted, #888); }
.cell-editable:hover .cell-display { border-bottom-color: var(--brand, #1a1a1a); }
.ded-clickable { cursor: pointer; }
.ded-clickable:hover .ded-val { text-decoration: underline dotted; }
.gross-edit-panel {
  display: none; position: fixed; z-index: 1060;
  background: var(--surface, #fff); border: 1px solid var(--line, #e2e8f0);
  border-radius: var(--radius, 14px); box-shadow: 0 8px 32px rgba(0,0,0,.2);
  padding: 1rem 1.25rem; width: 320px; direction: rtl;
}
.gross-edit-panel.show { display: block; }

/* ── Shifts: Bulk ────────────────────────────────────────────────── */
.shifts-bulk .page-card{background:#fff;border:1px solid #e7e2db;border-radius:14px;box-shadow:0 10px 24px rgba(0,0,0,.08);}
.shifts-bulk .hero{background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:2px solid var(--glass-border);border-radius:14px;box-shadow:var(--shadow);padding:1.25rem;}
.shifts-bulk .hero h1{font-size:clamp(1.2rem,2.2vw,1.6rem);margin:0}
.shifts-bulk .form-select, .shifts-bulk .form-control{border-color:#e7e2db}
.shifts-bulk .hint{color:#6b7280;font-size:.95rem}
.shifts-bulk .chip{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .55rem;border-radius:999px;border:1px solid #e7e2db;background:#faf8f5;font-size:.85rem}
.shifts-bulk .icon-btn{border:1px solid #e7e2db;background:#fff;border-radius:10px;padding:.4rem .65rem}
.shifts-bulk .icon-btn:hover{background:#faf8f5}
.shifts-bulk .divider{height:1px;background:#eee;margin:.5rem 0}
.shifts-bulk .sticky-actions{position:sticky;bottom:0;background:#fff;border-top:1px solid #eee;padding:12px;border-radius:0 0 12px 12px}
.shifts-bulk .muted{color:#6b7280}
.shifts-bulk .badge-soft{color:#2a2a2a;background:color-mix(in oklab, var(--brand,#1a1a1a) 12%, white);border:1px solid color-mix(in oklab, var(--brand,#1a1a1a) 20%, white);font-weight:600}
.shifts-bulk .kbd{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-size:.85em;padding:.1rem .35rem;border-radius:.35rem;border:1px solid #ddd;background:#fafafa}

/* ── Notifications Index ─────────────────────────────────────────── */
.notif-wrap { max-width: 680px; margin: 0 auto; }
.notif-hero { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.notif-hero h4 { margin: 0; font-size: 1.25rem; font-weight: 700; }
.notif-list { display: flex; flex-direction: column; gap: 0; }
.notif-item {
  display: flex; gap: 14px; align-items: flex-start; padding: 14px 18px;
  border-bottom: 1px solid var(--glass-border); background: var(--glass-bg);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  transition: background .15s; position: relative;
}
.notif-item:first-child { border-radius: 12px 12px 0 0; }
.notif-item:last-child  { border-bottom: none; border-radius: 0 0 12px 12px; }
.notif-item:only-child  { border-radius: 12px; }
.notif-item:hover       { background: color-mix(in oklab, var(--brand) 5%, transparent); }
.notif-item.unread { background: color-mix(in oklab, var(--brand) 8%, transparent); }
.notif-item.unread::before {
  content: ''; position: absolute; right: 0; top: 0; bottom: 0;
  width: 4px; background: var(--brand); border-radius: 0 2px 2px 0;
}
.notif-icon {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.ni-leave-approved { background:#d1fae5; color:#1c7a3c; }
.ni-leave-rejected { background:#fee2e2; color:#b91c1c; }
.ni-leave-submitted { background:#fff3cd; color:#c17a00; }
.ni-payslip-ready { background:#e8eaed; color:#2a2a2a; }
.ni-default { background:var(--bg); color:var(--ink-muted); }
.notif-body { flex: 1; min-width: 0; }
.notif-title { font-weight: 600; font-size: .92rem; color: var(--ink); margin-bottom: 3px; }
.notif-desc  { font-size: .82rem; color: var(--ink-muted); line-height: 1.5; }
.notif-time  { font-size: .75rem; color: var(--ink-muted); margin-top: 5px; white-space: nowrap; }
.notif-empty { text-align: center; padding: 60px 20px; color: var(--ink-muted); }
.notif-empty i { font-size: 3rem; display: block; margin-bottom: 12px; opacity:.35; }

/* ── Settings Hub ────────────────────────────────────────────────── */
.sh-hero {
  background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
  border-radius: 14px; padding: 24px 28px; color: #fff;
  display: flex; align-items: center; gap: 20px; margin-bottom: 28px;
}
.sh-hero-icon { font-size: 2.5rem; opacity: .85; }
.sh-hero-title { font-size: 1.4rem; font-weight: 700; margin: 0 0 4px; }
.sh-hero-sub   { font-size: .88rem; opacity: .7; margin: 0; }
.sh-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap: 12px; margin-bottom: 28px; }
.sh-stat  {
  background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); border-radius: 12px; padding: 14px 16px; text-align: center;
}
.sh-stat .ss-num  { font-size: 2rem; font-weight: 800; color: var(--brand); }
.sh-stat .ss-lbl  { font-size: .78rem; color: var(--ink-muted); margin-top: 2px; }
.sh-stat a        { text-decoration: none; color: inherit; }
.sh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 16px; margin-bottom: 28px; }
.sh-link-card {
  background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); border-radius: 12px;
  padding: 18px 20px; display: flex; align-items: center; gap: 14px;
  text-decoration: none; color: inherit; transition: all .2s;
}
.sh-link-card:hover {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 15%, transparent); color: inherit;
}
.sh-link-icon {
  width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
}
.sh-link-text strong { display: block; font-weight: 600; font-size: .92rem; }
.sh-link-text small  { color: var(--ink-muted); font-size: .78rem; }
.sh-section { margin-bottom: 28px; }
.sh-section-title {
  font-size: 1rem; font-weight: 700; color: var(--brand);
  margin-bottom: 14px; padding-bottom: 8px;
  border-bottom: 2px solid color-mix(in oklab, var(--brand) 25%, transparent);
  display: flex; align-items: center; gap: 8px;
}
.sh-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 14px; }
.sh-form-group label { font-size: .82rem; font-weight: 600; color: var(--ink-muted); margin-bottom: 4px; display: block; }
.sh-form-group input, .sh-form-group select {
  width: 100%; padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  font-size: .9rem; font-family: inherit;
}
.sh-form-group input:focus, .sh-form-group select:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 15%, transparent);
}
.sh-toggle { display: flex; align-items: center; gap: 10px; }
.sh-toggle input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--brand); cursor: pointer; }
.sh-toggle label { margin: 0; font-size: .88rem; cursor: pointer; }
.card-settings {
  background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); border-radius: 14px; padding: 24px; margin-bottom: 20px;
}
.alert-success-custom {
  background: #d1fae5; color: #1c7a3c; border: 1px solid #6ee7b7;
  border-radius: 10px; padding: 12px 18px; margin-bottom: 20px; font-weight: 600;
}

/* ── Reports Sidebar ─────────────────────────────────────────────── */
.reports-sidebar {
  background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); border-radius: 12px; padding: 8px 0; min-width: 220px;
}
.reports-sidebar__link {
  display: flex; align-items: center; gap: 10px; padding: 10px 18px;
  font-size: .925rem; font-weight: 500; color: var(--ink); text-decoration: none;
  border-radius: 0; transition: background var(--t-fast, .12s), color var(--t-fast, .12s); white-space: nowrap;
}
.reports-sidebar__link:hover {
  background: color-mix(in oklab, var(--surface) 75%, var(--accent) 25%);
  color: var(--ink); text-decoration: none;
}
.reports-sidebar__link.active {
  background: color-mix(in oklab, var(--accent) 15%, var(--surface));
  color: var(--accent); font-weight: 700;
  border-inline-end: 3px solid var(--accent);
}
html[data-theme="dark"] .reports-sidebar__link.active {
  background: color-mix(in oklab, var(--accent) 12%, var(--surface));
}
.reports-sidebar__icon { width: 18px; text-align: center; flex-shrink: 0; color: var(--accent); font-size: .9rem; }
.reports-sidebar__link.active .reports-sidebar__icon { color: var(--accent); }

/* ── Section filter & summary (shared across reports) ────────────── */
.section-summary-card {
  background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 2px solid var(--glass-border);
  border-radius: var(--radius-sm); padding: 1rem;
  margin-top: 1rem;
}
.section-summary-card .table { margin: 0; }

/* Utility: solid card (no glass morphism) */
.card-solid {
    background: var(--surface) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: var(--line) !important;
}
/* =============================================================================
 * navv2 — bar + primary nav + popover styles
 * Appended to shared/css/utq-theme.css at Task 2.3 Step 3.
 *
 * Tokens consumed (defined earlier in utq-theme.css by Task 1.3):
 *   --nav-height-desktop, --nav-height-mobile, --nav-bg, --nav-bg-solid,
 *   --nav-item-hover, --nav-item-active, --nav-ring, --pop-bg, --pop-shadow,
 *   --pop-ring, --nav-radius, --nav-row-radius, --pop-offset.
 * ========================================================================== */

/* ── Bar ────────────────────────────────────────────────────────────────── */
.utq-bar {
  position: sticky; top: 0; z-index: 1030;
  /* ROOT-CAUSE FIX (2026-04-17): body is `d-flex flex-column` + `height: 100%`
     (capped to viewport). On tall pages (e.g. content-rich dashboards) the
     flex column's content exceeds viewport and the flex algorithm shrinks
     items with flex-shrink: 1. `.utq-bar` would collapse to its min-content
     size (~51px = logo height + border), making the header visibly shorter
     on tall pages than on short ones. flex-shrink: 0 opts the bar out of
     compression; the excess overflow correctly spills into page scroll. */
  flex-shrink: 0;
  height: var(--nav-height-desktop);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding-inline: 16px;
  background: var(--nav-bg);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: background 160ms ease, border-color 160ms ease;
  font-family: "Tajawal", "Noto Sans Arabic", "Inter", system-ui, sans-serif;
}
.utq-bar.is-firm {
  background: var(--nav-bg-solid);
  border-bottom-color: var(--line);
}
@supports not (backdrop-filter: blur(1px)) {
  .utq-bar { background: var(--nav-bg-solid); }
}

/* ── Brand lockup (right in RTL) ─────────────────────────────────────────── */
.utq-brand {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink); text-decoration: none;
  font-weight: 700; font-size: 15px; letter-spacing: -0.01em;
  padding-inline: 4px; border-radius: 8px;
  transition: opacity 160ms ease;
}
.utq-brand:hover { opacity: 0.78; color: var(--ink); }
/* The org logo PNGs are horizontal wordmarks (~4:1 aspect), not square icons.
   Fix the HEIGHT to fit the bar and let width auto-compute from intrinsic aspect. */
/* Logo size is decoupled from the bar height — padding grows as the bar grows. */
.utq-brand-mark { height: 50px; width: auto; max-width: 220px; display: inline-block; }
.utq-brand-name { white-space: nowrap; }

/* ── Primary nav (right-aligned — hugs the brand lockup in RTL) ──────────── */
.utq-nav {
  display: flex; align-items: center; gap: 2px;
  /* In RTL, flex-start = right edge → nav items sit adjacent to the brand
     (which is in the first grid column, right-most in RTL). Utility cluster
     stays in its own grid column on the left. */
  justify-content: flex-start;
  min-width: 0;
}
.utq-nav-item {
  position: relative;
  display: inline-flex; align-items: center; gap: 5px;
  height: 32px; padding-inline: 8px;
  /* 11.7px = 13px × 0.9 — navbar links reduced 10% (2026-04-17). */
  font: 500 11.7px/1 inherit;
  color: var(--ink); text-decoration: none;
  background: transparent; border: 0; border-radius: 8px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
  white-space: nowrap;
}
.utq-nav-item:hover { background: var(--nav-item-hover); }
.utq-nav-item.is-active {
  background: var(--nav-item-active);
  font-weight: 600;
}
.utq-nav-item.is-active::after {
  content: "";
  position: absolute;
  inset-inline: 10px; bottom: -12px; height: 2px;
  background: var(--brand);
  border-radius: 2px;
}
.utq-nav-caret { transition: transform 160ms ease; }
.utq-nav-item[aria-expanded="true"] .utq-nav-caret { transform: rotate(180deg); }

/* ── Popover container ───────────────────────────────────────────────────── */
.utq-pop {
  position: absolute;
  /* z-index ordering: .utq-bar=1030 (same as Bootstrap fixed navbar),
     .utq-pop=1040 (above bar, below .ded-overlay=1050 and Bootstrap modal=1055
     and the 1060 fixed element elsewhere in this file). A nav pop opened while
     a DED overlay is visible will correctly render below it. */
  z-index: 1040;
  min-width: 240px;
  max-width: 360px;
  padding: 8px;
  background: var(--pop-bg);
  border: var(--pop-ring);
  border-radius: var(--nav-radius);
  box-shadow: var(--pop-shadow);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 160ms cubic-bezier(.16,1,.3,1),
              transform 160ms cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.utq-pop[data-open] {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  display: block !important; /* overrides [hidden] while open */
}
.utq-pop[hidden] { display: none; }

/* 2-column mega-menu for popovers with many children */
@media (min-width: 1024px) {
  .utq-pop[data-cols="2"] {
    max-width: 560px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 4px;
  }
  .utq-pop[data-cols="2"][data-open] { display: grid !important; }
}

/* ── Popover row variants ────────────────────────────────────────────────── */
.utq-pop-row {
  display: flex; align-items: center;
  gap: 12px; padding: 8px; border-radius: var(--nav-row-radius);
  color: var(--ink); text-decoration: none;
  font: 500 14px/1 inherit;
  background: transparent; border: 0; cursor: pointer;
  width: 100%;
  transition: background 120ms ease;
}
.utq-pop-row:hover { background: var(--nav-item-hover); color: var(--ink); }
.utq-pop-row.is-active { background: var(--nav-item-active); font-weight: 600; }
.utq-pop-row.is-active .utq-pop-row-tile { background: var(--brand); }
.utq-pop-row.is-active .utq-pop-row-tile .ico { color: var(--surface); }

.utq-pop-row--compact { height: 36px; }

.utq-pop-row--twoline {
  min-height: 48px;
  /* align-items: center so rows that happen to lack a desc (promoted from
     compact for popover-level consistency) center their label vertically
     rather than stick to the top of the 48px slot. Rows with desc are still
     laid out correctly because label+desc live in a nested flex column. */
  align-items: center;
}
.utq-pop-row-tile {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: color-mix(in oklab, var(--brand) 5%, transparent);
  color: var(--brand);
  transition: background 120ms ease;
}
.utq-pop-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.utq-pop-row-label {
  font: 500 14px/1.2 inherit;
  color: inherit;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.utq-pop-row-desc {
  font: 400 12px/1.3 inherit;
  color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.utq-pop-row[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.utq-pop-row--button {
  appearance: none; -webkit-appearance: none;
  text-align: start;
}
.utq-pop-row--danger { color: var(--bad); }
.utq-pop-row--danger:hover { background: var(--bad-bg); color: var(--bad); }

/* Section header label (11px, muted, no horizontal rule) */
.utq-pop-section-label {
  display: block;
  font: 500 11px/1 inherit;
  color: var(--muted);
  letter-spacing: .04em;
  padding: 12px 12px 4px;
}

/* Exception: avatar popover uses dividers (spec section 3) */
.utq-pop-divider {
  border: 0; height: 0;
  border-top: 1px solid var(--line);
  margin: 8px 0;
}

/* ── Tabler SVG icon sizing + RTL mirror ─────────────────────────────────── */
.ico {
  display: inline-block;
  width: 1em; height: 1em;
  stroke: currentColor; fill: none;
  vertical-align: -0.15em;
  flex-shrink: 0;
}
.ico-14 { width: 14px; height: 14px; }
.ico-16 { width: 16px; height: 16px; }
.ico-18 { width: 18px; height: 18px; }
html[dir="rtl"] .ico-rtl-mirror { transform: scaleX(-1); }

/* ── Focus-visible ring ──────────────────────────────────────────────────── */
.utq-bar button:focus-visible,
.utq-bar a:focus-visible,
.utq-pop button:focus-visible,
.utq-pop a:focus-visible,
.utq-sheet button:focus-visible,
.utq-sheet a:focus-visible,
.utq-cmdk button:focus-visible,
.utq-cmdk a:focus-visible,
.utq-cmdk input:focus-visible,
.utq-chip-strip button:focus-visible,
.utq-chip-strip a:focus-visible {
  outline: 2px solid var(--nav-ring);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Screen-reader-only utility — used by cmdk dialog's invisible <h2> label, etc. */
.utq-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Header date/time block (XL only) ────────────────────────────────────── */
.utq-datetime {
  display: none; /* visible only at XL; see media query below */
  flex-direction: column; align-items: center; line-height: 1.25;
  padding-inline: 12px;
  border-inline-end: 1px solid var(--line);
  margin-inline-end: 4px;
  text-align: center;
}
.utq-datetime-hijri { font-size: 11px; color: var(--muted); font-weight: 500; }
.utq-datetime-hijri i { font-size: .55em; opacity: .6; margin-inline-end: 3px; }
.utq-datetime-greg  { font-size: 10px; color: var(--muted); opacity: .8; }
.utq-datetime-clock {
  font-size: 12px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: .5px;
  min-width: 72px;
}
@media (min-width: 1400px) {
  .utq-datetime { display: inline-flex; }
}

/* ── Profile pill (replaces the initials circle) ────────────────────────── */
.utq-profile-pill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding-inline: 10px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font: 500 13px/1 inherit;
  cursor: pointer;
  max-width: 320px;
  transition: background 120ms ease, border-color 120ms ease;
}
.utq-profile-pill:hover {
  background: var(--nav-item-hover);
  border-color: var(--nav-ring);
}
.utq-profile-pill[aria-expanded="true"] {
  background: var(--nav-item-active);
  border-color: var(--brand);
}
.utq-profile-pill .bi-person-circle { font-size: 18px; color: var(--brand); flex-shrink: 0; }
.utq-profile-pill-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
@media (max-width: 767.98px) {
  /* On mobile, collapse the pill to just the icon to save horizontal space. */
  .utq-profile-pill-name,
  .utq-profile-pill .utq-nav-caret { display: none; }
  .utq-profile-pill { padding: 0; width: 32px; justify-content: center; border-radius: 999px; }
}

/* Avatar popover identity-icon (replaces the initials circle inside the popover) */
.utq-avatar-identity-icon { font-size: 36px; color: var(--brand); flex-shrink: 0; }

/* ── Main wrapper (opened in header-v2.php, closed in footer.php) ────────── */
/* flex: 1 0 auto  → grow to fill the flex column, never shrink below content.
   Combined with body `d-flex flex-column min-vh-100`, this guarantees the footer
   sticks to the viewport bottom on short pages AND flows naturally after tall
   pages. !important defeats any later generic `main { … }` selectors in vendor CSS. */
.utq-main { flex: 1 0 auto !important; }

/* Page-content wrapper inside .utq-main — mirrors the legacy
   `<div class="container-fluid px-3 px-md-4 py-3" style="max-width:1616px;margin:0 auto;">`
   so pages render centered with a readable max width instead of spanning
   the entire viewport. */
.utq-container {
  width: 100%;
  max-width: 1616px;
  margin-inline: auto;
  padding: 1rem 0.75rem;
}
@media (min-width: 768px) {
  .utq-container { padding-inline: 1.5rem; }
}

/* ── Reduced motion overrides ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .utq-bar, .utq-pop, .utq-nav-item, .utq-pop-row, .utq-nav-caret {
    transition: none !important;
  }
  .utq-pop[data-open] { transform: none !important; }
}

/* ── Mobile: hide primary nav, show chip strip (chip strip CSS is in Task 4.1) ─ */
/* Brand column groups the logo, the "أمانة" name link, and (on mobile) the hamburger. */
.utq-brand-col {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 0;
}
.utq-brand-name-link {
  color: var(--ink); text-decoration: none;
  font-weight: 700; font-size: 15px; letter-spacing: -0.01em;
}
.utq-brand-name-link:hover { opacity: 0.78; color: var(--ink); }

/* Desktop: hide the hamburger (drawer is mobile-only). */
.utq-burger { display: none !important; }

/* Mobile: three absolute-positioned elements in a block-layout bar.
     - hamburger pinned to the right edge of the bar
     - logo centered horizontally and vertically
     - "أمانة" link pinned to the left edge
   Physical properties (top/left/right + translate) work identically in RTL and
   LTR and sidestep the display:contents / grid edge cases that caused the bar
   to wrap onto two rows. */
@media (max-width: 991.98px) {
  .utq-bar {
    display: block !important;           /* override desktop grid */
    height: var(--nav-height-mobile);
    /* .utq-bar already has `position: sticky` which makes it a positioning
       context for absolute descendants. */
  }
  .utq-brand-col { display: block; height: 100%; position: static; }

  /* Logo — centered. */
  .utq-brand {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    padding: 0;
  }

  /* "أمانة" — pinned to LEFT edge of bar. */
  .utq-brand-name-link {
    position: absolute;
    top: 50%; left: 16px; right: auto;
    transform: translateY(-50%);
    font-size: 14px;
  }

  /* Hamburger — pinned to RIGHT edge of bar. */
  .utq-burger {
    display: inline-flex !important;
    position: absolute;
    top: 50%; right: 16px; left: auto;
    transform: translateY(-50%);
  }

  /* Primary nav + their popovers hidden on mobile; drawer replaces them. */
  .utq-bar .utq-nav--primary,
  .utq-nav-pop { display: none !important; }
  /* Whole utility cluster hidden on mobile (its children were already hidden). */
  .utq-util { display: none !important; }
}

/* ── Tablet / mid-desktop (992–1399.98): nav items don't fit next to
   brand+utility at these widths, so they overflow the middle grid column and
   visually overlap the utility icons (which include the date/time block and
   profile pill at ≥1200). Hide primary nav + popovers and surface the
   hamburger inline. Desktop grid layout and the utility cluster stay intact;
   the drawer (already wired) holds all nav items. Threshold matches the
   date/time block below. */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .utq-bar .utq-nav--primary,
  .utq-nav-pop { display: none !important; }
  .utq-burger { display: inline-flex !important; }
}

/* ── Drawer (right edge in RTL; off-canvas) ─────────────────────────────── */
.utq-drawer {
  position: fixed;
  inset-block: 0; /* top:0 + bottom:0 */
  /* Pin to the RTL start edge (visual right in RTL, visual left in LTR).
     inset-inline-start: 0 resolves to `right: 0` under html[dir="rtl"]. */
  inset-inline-start: 0;
  inset-inline-end: auto;
  width: 320px; max-width: 86vw;
  background: var(--surface); color: var(--ink);
  border-inline-end: 1px solid var(--line);
  box-shadow: -16px 0 48px -16px rgba(0,0,0,.25);
  display: flex; flex-direction: column;
  z-index: 1060;
  /* translateX is physical: LTR drawer is on the LEFT → slide off left (-100%).
     RTL drawer is on the RIGHT → slide off right (+100%). */
  transform: translateX(-100%);
  transition: transform 260ms cubic-bezier(.16,1,.3,1);
  overflow: hidden;
}
html[dir="rtl"] .utq-drawer { transform: translateX(100%); }
.utq-drawer[data-open] { transform: translateX(0) !important; }
.utq-drawer[hidden]    { display: none !important; }

.utq-drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1055;
  opacity: 0;
  transition: opacity 180ms ease;
}
.utq-drawer-backdrop[data-open] { opacity: 1; }
.utq-drawer-backdrop[hidden]    { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .utq-drawer, .utq-drawer-backdrop { transition: none !important; }
}

.utq-drawer-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 16px; border-bottom: 1px solid var(--line);
  background: var(--surface-2, var(--surface));
}
.utq-drawer-identity { display: flex; gap: 12px; min-width: 0; }
.utq-drawer-avatar { font-size: 36px; color: var(--brand); flex-shrink: 0; line-height: 1; }
.utq-drawer-identity-text { min-width: 0; }
.utq-drawer-name {
  font: 600 14px/1.3 inherit; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.utq-drawer-meta {
  font: 400 12px/1.3 inherit; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.utq-drawer-close {
  width: 32px; height: 32px; border: 0;
  background: var(--nav-item-hover); border-radius: 8px;
  color: var(--ink); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.utq-drawer-close:hover { background: var(--nav-item-active); }

.utq-drawer-nav {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px; overflow-y: auto; flex: 1;
}
.utq-drawer-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 8px;
  color: var(--ink); text-decoration: none;
  font: 500 14px/1.2 inherit;
  background: transparent; border: 0; cursor: pointer;
  width: 100%; text-align: start;
}
.utq-drawer-item:hover { background: var(--nav-item-hover); color: var(--ink); }
.utq-drawer-item.is-active { background: var(--nav-item-active); font-weight: 600; }
.utq-drawer-item--top { font-weight: 600; }
.utq-drawer-item--button { appearance: none; -webkit-appearance: none; }
.utq-drawer-item--danger { color: var(--bad); }
.utq-drawer-item--danger:hover { background: var(--bad-bg); color: var(--bad); }
.utq-drawer-section-label {
  padding: 12px 12px 4px;
  font: 500 11px/1 inherit; color: var(--muted); letter-spacing: .04em;
}
.utq-drawer-divider {
  border: 0; height: 0;
  border-top: 1px solid var(--line);
  margin: 8px 4px;
}

/* Lock body scroll while the drawer is open. */
body.utq-drawer-open { overflow: hidden; }
/* =============================================================================
 * navv2 — utility cluster + avatar popover + command palette container
 * Appended to shared/css/utq-theme.css at Task 2.4 Step 1.
 * ========================================================================== */

/* ── Utility cluster container ───────────────────────────────────────────── */
.utq-util {
  display: flex; align-items: center; gap: 4px;
  padding-inline-start: 24px;
}

/* ── 32×32 utility button base ───────────────────────────────────────────── */
.utq-util-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: transparent; border: 0; border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
  position: relative;
  transition: background 120ms ease;
  text-decoration: none;
}
.utq-util-btn:hover { background: var(--nav-item-hover); color: var(--ink); }

/* ── Search pill (desktop) + search icon (mobile) ────────────────────────── */
.utq-search-pill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; width: 220px;
  padding-inline: 10px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  cursor: pointer;
  font: 400 13px/1 inherit;
  text-align: start;
  transition: border-color 120ms ease, background 120ms ease;
}
.utq-search-pill:hover {
  border-color: var(--nav-ring);
  background: var(--nav-item-hover);
}
.utq-search-placeholder {
  flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.utq-search-pill kbd,
.utq-cmdk-header kbd {
  font: 500 10px/1 ui-monospace, "SF Mono", Menlo, monospace;
  padding: 3px 5px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--muted);
  background: var(--surface-2);
}

/* Bootstrap-Icon fonts inside utility buttons need explicit sizing + tight
   line-height, otherwise their line-box is taller than the glyph and the
   icon renders visually higher than sibling SVG icons. */
.utq-util-btn .bi {
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Notifications badge slot ────────────────────────────────────────────── */
.utq-notif-btn { overflow: visible; }
.utq-notif-badge {
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 2px;    /* top-start in RTL = top-right physically */
  min-width: 14px; height: 14px;
  padding: 0 4px;
  font: 600 10px/14px inherit;
  background: var(--bad); color: #fff;
  border: 2px solid var(--nav-bg-solid);
  border-radius: 999px;
  text-align: center;
}
/* Dark mode: --bad is lighter (#f87171), so white-on-red fails AA for small
   text. Darken to --bad-700 (#ef4444) in dark for ≈3.9:1. */
html[data-theme="dark"] .utq-notif-badge { background: var(--bad-700); }

/* ── Support trigger — reserve the unread-dot slot (widget injects .utq-unread-dot) ─ */
.utq-support-trigger { position: relative; overflow: visible; }
.utq-support-trigger .utq-unread-dot {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-start: 4px;
  width: 8px; height: 8px;
  background: var(--bad);
  border-radius: 999px;
  border: 2px solid var(--nav-bg-solid);
}

/* ── Avatar circle ───────────────────────────────────────────────────────── */
.utq-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: color-mix(in oklab, var(--brand) 10%, var(--surface));
  color: var(--ink);
  font: 600 12px/1 inherit;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: border 160ms ease, background 160ms ease;
}
.utq-avatar:hover { background: color-mix(in oklab, var(--brand) 14%, var(--surface)); }
.utq-avatar[aria-expanded="true"] { border: 2px solid var(--brand); }
.utq-avatar--lg { width: 40px; height: 40px; font-size: 14px; }

/* ── Avatar popover ──────────────────────────────────────────────────────── */
.utq-avatar-pop {
  min-width: 300px;
  max-width: 340px;
}
.utq-avatar-identity {
  display: flex; align-items: center; gap: 12px;
  padding: 8px; margin-bottom: 4px;
}
.utq-avatar-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.utq-avatar-name {
  font: 600 14px/1.2 inherit; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.utq-avatar-meta {
  font: 400 12px/1.3 inherit; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Bottom sheet (mobile) ───────────────────────────────────────────────── */
.utq-sheet {
  border: 0; padding: 0; margin: 0;
  position: fixed; inset-inline: 0; inset-block-end: 0; inset-block-start: auto;
  width: 100%; max-width: 100%;
  max-height: 70dvh;
  border-radius: 20px 20px 0 0;
  background: var(--surface); color: var(--ink);
  box-shadow: 0 -16px 48px -16px rgba(0,0,0,.25);
  transform: translateY(100%);
  transition: transform 220ms cubic-bezier(.16,1,.3,1);
}
.utq-sheet[open] {
  transform: translateY(0);
  display: flex; flex-direction: column;
}
.utq-sheet::backdrop { background: rgba(0,0,0,.45); }
.utq-sheet-handle {
  width: 40px; height: 4px; border-radius: 999px;
  background: var(--line);
  margin: 8px auto;
}
.utq-sheet-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 16px 12px; border-bottom: 1px solid var(--line);
}
.utq-sheet-header h2 { font: 600 15px/1 inherit; margin: 0; color: var(--ink); }
.utq-sheet-close {
  width: 32px; height: 32px;
  border: 0; background: var(--nav-item-hover); border-radius: 8px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.utq-sheet-body { padding: 8px; overflow-y: auto; flex: 1; }
@media (prefers-reduced-motion: reduce) { .utq-sheet { transition: none !important; } }

/* ── Command palette ─────────────────────────────────────────────────────── */
.utq-cmdk {
  border: 0; padding: 0; margin: 8vh auto 0;
  background: var(--pop-bg); color: var(--ink);
  width: min(640px, 90vw); max-height: 70vh;
  border-radius: var(--nav-radius);
  border: var(--pop-ring); box-shadow: var(--pop-shadow);
  overflow: hidden;
}
.utq-cmdk::backdrop {
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.utq-cmdk-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.utq-cmdk-header .ico { color: var(--muted); }
.utq-cmdk-header input {
  flex: 1; border: 0; background: transparent; outline: none;
  font: 500 15px/1 inherit; color: var(--ink);
}
.utq-cmdk-body { padding: 8px; overflow-y: auto; max-height: calc(70vh - 55px); }
.utq-cmdk-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 8px;
  color: var(--ink); text-decoration: none;
  cursor: pointer;
}
.utq-cmdk-row[aria-selected="true"] { background: var(--nav-item-active); }
.utq-cmdk-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.utq-cmdk-row-label { font: 500 14px/1.2 inherit; }
.utq-cmdk-row-sub { font: 400 12px/1.3 inherit; color: var(--muted); }
.utq-cmdk-section {
  padding: 12px 12px 4px;
  font: 500 11px/1 inherit; color: var(--muted); letter-spacing: .04em;
}
.utq-cmdk-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
@media (prefers-reduced-motion: reduce) {
  .utq-cmdk::backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* =============================================================================
 * navv2 — mobile chip strip (Task 4.1)
 * Hidden on desktop; horizontal scroll on mobile below the bar.
 * ========================================================================== */
.utq-chip-strip { display: none; }

@media (max-width: 767.98px) {
  .utq-chip-strip {
    display: flex; gap: 4px; padding: 8px 12px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    background: var(--nav-bg-solid); border-bottom: 1px solid var(--line);
    /* hide scrollbar but stay scrollable */
    scrollbar-width: none;
  }
  .utq-chip-strip::-webkit-scrollbar { display: none; }
  .utq-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border: 1px solid var(--line);
    border-radius: 999px; background: var(--surface);
    color: var(--ink); text-decoration: none; white-space: nowrap;
    scroll-snap-align: start;
    font: 500 13px/1 inherit;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
  }
  .utq-chip:hover { background: var(--nav-item-hover); }
  .utq-chip.is-active {
    background: var(--brand); color: var(--surface); border-color: var(--brand);
  }
}

/* =========================================================================
   Shared navv2 header — 10% shorter (2026-04-17)
   --------------------------------------------------------------------------
   Rationale for NOT using `zoom: 0.9` (the first approach): combining CSS
   `zoom` with `position: sticky` + `backdrop-filter` caused the bar's
   rendered height to vary between routes — routes with/without a vertical
   scrollbar, and initial vs post-scroll states, each recomputed the sticky
   offset in a slightly different coordinate system, producing visible height
   jumps on navigation.
   Replacement: override the two height tokens the bar reads from. One-line
   override, no sticky/backdrop interaction, consistent across routes.
   The logo + fonts + paddings stay at their original pixel sizes (the bar
   just has less vertical whitespace). If the user wants those shrunk too,
   it's a separate per-element change.
   ========================================================================= */
:root {
    --nav-height-desktop: 90px;
    --nav-height-mobile:  72px;
}

/* =========================================================================
   Numeric rendering — always Western (0-9) digits (2026-04-17)
   --------------------------------------------------------------------------
   App policy: numbers appear as 0-9 regardless of the user's OS locale.
   - `font-variant-numeric: lining-nums tabular-nums` forces lining (Western-
     style) glyphs and fixed-width digits across all fonts.
   - PHP side: IntlDateFormatter uses `ar-u-nu-latn`; number_format() already
     produces Western digits.
   - JS side: Intl.NumberFormat calls pin `en-US`; qistas-index.js fmt() too.
   ========================================================================= */
html {
    font-variant-numeric: lining-nums tabular-nums;
}