/* ============================================================================
   NAHDA THEME v2 — native visual layer for the Al Nahda web app
   ----------------------------------------------------------------------------
   REBUILT 2026-10-18: the layout components (HR sidebar, PC sidebar, header
   navbar, stat cards, bottom nav, rail toggle) are now native in
   src13Group.jsx. This sheet is their FIRST-CLASS stylesheet — not an
   override layer anymore for those areas. Sections 2/3/4/5/6/15 were
   rewritten as native component CSS; the old override hacks (!important
   wars, MutationObserver-injected button styles) were removed.

   REMOVED vs the v2 override sheet:
   - Old §2 HR-sidebar overrides  -> native §2 below (V29 grid takeover
     neutralized with body-prefixed selectors, still needs !important [2]).
   - Old §3 rail-mode overrides   -> native §3 below (same body.nahda-rail
     contract; the toggle button is now React-rendered, nahda-skin.js no
     longer injects it).
   - Old §4 PC-sidebar overrides  -> native §4 below. The component's
     React-injected <style> block was DELETED from source; its rules now
     live here (fixes: white text on the active gradient, logical
     border-radius for RTL, icon-first order via CSS).
   - Old §5 .header-blue restyle  -> REMOVED outright. The Header no longer
     uses .header-blue (now .nt-navbar, §5). .header-blue is still used by
     the drawer + sidebar brandbar and keeps its base styling.
   - Old §6 card overrides         -> native §6 below (.nt-stat-card,
     .pc-kpi-card). Type-C .stat-card rules kept as-is.
   - Old §15 mobile overrides     -> native §15 below (.bottom-tab-active,
     .fab margin in CSS, drawer RTL mirror).

   KEPT verbatim: tables, buttons, forms, modals/toasts/badges, progress
   bars, hero banners, tab pills, chart hooks, RTL corrections, print rules,
   global polish, slim scrollbars.

   !important USAGE that remains (each forced by base CSS):
   [1] Beats inline style={{...}} set by React.
   [2] Beats an existing !important in the app's own stylesheet (V29 block).
   ========================================================================== */

:root{
  --nt-blue:#1e4d8c;
  --nt-blue-dark:#163a6b;
  --nt-blue-soft:#e8f0fa;
  --nt-navy:#06162b;
  --nt-navy-2:#0a2547;
  --nt-ink:#0f172a;
  --nt-muted:#64748b;
  --nt-line:#e6ebf2;
  --nt-bg:#f3f6fa;
  --nt-card:#ffffff;
  --nt-radius:12px;
  --nt-radius-lg:16px;
  --nt-shadow:0 8px 24px rgba(15,43,75,.07);
  --nt-shadow-lg:0 18px 44px rgba(15,43,75,.13);
  --nt-green:#059669;
  --nt-amber:#d97706;
  --nt-red:#dc2626;
}

/* ==========================================================================
   1. GLOBAL POLISH
   ========================================================================== */
body{
  background:var(--nt-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* Main content canvas */
.main-area{
  background:
    radial-gradient(1200px 320px at 85% -80px, rgba(30,77,140,.06), transparent 60%),
    var(--nt-bg);
}
/* Slim, quiet scrollbars on nav regions */
.nav-pro::-webkit-scrollbar,
.pc-nav::-webkit-scrollbar,
.drawer::-webkit-scrollbar,
aside.pc-navy-aside::-webkit-scrollbar{width:8px}
.nav-pro::-webkit-scrollbar-thumb,
.pc-nav::-webkit-scrollbar-thumb,
.drawer::-webkit-scrollbar-thumb,
aside.pc-navy-aside::-webkit-scrollbar-thumb{
  background:rgba(140,170,205,.35);border-radius:8px}
.nav-pro::-webkit-scrollbar-track,
.pc-nav::-webkit-scrollbar-track,
.drawer::-webkit-scrollbar-track,
aside.pc-navy-aside::-webkit-scrollbar-track{background:transparent}

/* Generic card refinement (used across HR pages) */
.card{
  border-radius:var(--nt-radius-lg);
  border:1px solid var(--nt-line);
  box-shadow:var(--nt-shadow);
}

/* ==========================================================================
   2. HR SIDEBAR  (aside.sidebar) — desktop, native AdminLTE treeview
   ----------------------------------------------------------------------------
   Neutralizes the V29 uniform-navigation grid takeover (index.html ~L1040:
   `.nav-pro .nav-group-head, .nav-pro .menu-item{display:grid!important;...}`).
   This sheet loads after base styles: body-prefixed selectors win at
   equal-or-higher specificity (WHY !important [2]).
   DOM order (icon, title, chevron) is already AdminLTE order — flex with
   logical properties mirrors it for RTL automatically.
   ========================================================================== */
aside.sidebar{
  background:
    radial-gradient(900px 480px at 120% -60px, rgba(64,140,220,.16), transparent 55%),
    linear-gradient(165deg,#1a2332 0%,#243447 60%,#1a2332 100%);
  border-inline-end:1px solid rgba(143,205,255,.14);
  color:#e8f4ff;
}
/* V29 takeover neutralization */
body .nav-pro .nav-group-head,
body .nav-pro .menu-item{
  display:flex!important;align-items:center;gap:10px;
  grid-template-columns:none!important;
  min-height:0!important;height:auto!important;
  padding:10px 12px!important;text-align:start!important;transform:none!important;
}
body .nav-pro .nav-group-title,
body .nav-pro .menu-item>span:not(.nav-child-line){
  grid-column:auto!important;grid-row:auto!important;
  text-align:start!important;font-size:13.5px!important;line-height:1.45!important;font-weight:600!important;
}
body .nav-pro .nav-group-icon,
body .nav-pro .menu-item>i{
  grid-column:auto!important;grid-row:auto!important;
  width:38px!important;height:38px!important;min-width:38px!important;
  margin:0!important;font-size:15px!important;
  display:inline-flex!important;align-items:center;justify-content:center;
  border-radius:12px!important;background:rgba(120,180,240,.14)!important;
  color:#dbeafe!important;transform:none!important;box-shadow:none!important;
  flex:0 0 auto;
}
body .nav-pro .nav-chevron{
  grid-column:auto!important;grid-row:auto!important;
  width:auto!important;background:none!important;box-shadow:none!important;
  font-size:10px!important;margin-inline-start:auto;color:#8fa9c7;flex:0 0 auto;
}
body .nav-pro .nav-child-line{display:none!important}
body .nav-pro .nav-submenu{padding-inline:7px!important}
/* Group titles */
.nav-group-head{
  border-radius:10px;
  margin:2px 8px;
  width:calc(100% - 16px);
  color:#dbe7f5;
  transition:background .15s ease,color .15s ease;
}
.nav-group-head:hover{background:rgba(120,180,240,.10);color:#fff}
.nav-group.open .nav-group-head{background:rgba(30,77,140,.28);color:#fff}
.nav-group-head.active-group{color:#fff;font-weight:700}
/* Treeview items */
.menu-item{
  border-radius:10px;
  margin:2px 8px;
  width:calc(100% - 16px);
  color:#c4d6ec;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease;
}
.menu-item:hover{background:rgba(120,180,240,.12);color:#fff}
/* Active item: brand-blue gradient pill (WHY !important [2]: base sets
   .nav-child.active background/color with !important) */
body .nav-pro .menu-item.active,
body .nav-pro .nav-child.active{
  background:linear-gradient(135deg,#1e4d8c,#2f6db3)!important;
  color:#fff!important;
  font-weight:700;
  box-shadow:0 6px 16px rgba(30,77,140,.35);
}
body .nav-pro .menu-item.active>i,
body .nav-pro .nav-child.active>i{color:#fff!important;background:transparent!important}
.nav-child{border-radius:8px!important}
.nav-child:hover{background:rgba(120,180,240,.12)!important;color:#fff}
/* Logout */
body .nav-pro .logout-item{color:#f3a3a3!important;background:rgba(220,38,38,.10)!important;border-top:1px solid rgba(220,38,38,.25)!important;border-radius:12px!important}
body .nav-pro .logout-item>i{color:#f3a3a3!important;background:transparent!important}
body .nav-pro .logout-item:hover{background:rgba(220,38,38,.22)!important;color:#fff!important}
/* Brandbar (sidebar brand block) */
aside.sidebar .sidebar-brandbar{
  background:transparent;
  border-bottom:1px solid rgba(143,205,255,.12);
  padding:12px;
  flex-shrink:0;
}
.brandbar-top{display:flex;align-items:center;gap:10px}
.brandbar-logo{
  width:40px;height:40px;border-radius:12px;flex:0 0 auto;
  background:linear-gradient(135deg,#1e4d8c,#2f6db3);
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;font-size:17px;box-shadow:0 6px 14px rgba(30,77,140,.4);
}
.brandbar-name{
  flex:1;min-width:0;margin:0;
  font-size:13px;font-weight:800;color:#fff;line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.brandbar-user{display:flex;align-items:center;gap:10px;margin-top:12px}
.brandbar-avatar{
  width:42px;height:42px;border-radius:50%;flex:0 0 auto;
  border:2px solid rgba(255,255,255,.3);overflow:hidden;background:rgba(255,255,255,.12);
  display:inline-flex;align-items:center;justify-content:center;color:rgba(255,255,255,.8);
}
.brandbar-username{margin:0 0 3px;font-size:13px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Native rail toggle button (rendered by React — replaces skin.js injection) */
.nahda-rail-btn{
  margin-inline-start:auto;
  width:34px;height:34px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:10px;border:1px solid rgba(143,205,255,.25);
  background:rgba(120,180,240,.12);color:#cfe6ff;cursor:pointer;
  transition:background .15s ease,transform .2s ease;
}
.nahda-rail-btn:hover{background:rgba(120,180,240,.25)}
.nahda-rail-btn i{transition:transform .2s ease}

/* ==========================================================================
   3. SIDEBAR RAIL MODE — body.nahda-rail  (desktop only)
   Toggled natively by React (App `rail` state); the body class contract is
   unchanged so any external CSS keying off it keeps working.
   ========================================================================== */
@media (min-width:768px){
  body.nahda-rail aside.sidebar{
    width:76px;min-width:76px;max-width:76px;
  }
  /* Hide all text labels, keep icons */
  body.nahda-rail aside.sidebar .brandbar-name,
  body.nahda-rail aside.sidebar .brandbar-user,
  body.nahda-rail aside.sidebar .nav-group-title,
  body.nahda-rail aside.sidebar .nav-chevron,
  body.nahda-rail aside.sidebar .nav-child-line,
  body.nahda-rail aside.sidebar .menu-item>span:last-child{
    display:none;
  }
  body.nahda-rail aside.sidebar .brandbar-top{justify-content:center}
  body.nahda-rail aside.sidebar .nahda-rail-btn{margin-inline-start:0;margin-top:8px}
  body.nahda-rail aside.sidebar .menu-item,
  body.nahda-rail aside.sidebar .nav-group-head{
    justify-content:center;
    margin:2px 6px;
    width:calc(100% - 12px);
    padding-left:0!important;padding-right:0!important;
  }
  body.nahda-rail aside.sidebar .nav-group-head .nav-group-icon,
  body.nahda-rail aside.sidebar .menu-item>i{margin:0!important}
  body.nahda-rail aside.sidebar .nav-submenu{padding:0!important}
  /* Rail toggle button icon flips */
  body.nahda-rail .nahda-rail-btn i{transform:rotate(180deg)}
  /* PC sidebar also rails */
  body.nahda-rail aside.pc-navy-aside{
    width:76px;min-width:76px;max-width:76px;
  }
  body.nahda-rail aside.pc-navy-aside .pc-top-label,
  body.nahda-rail aside.pc-navy-aside .pc-group-label,
  body.nahda-rail aside.pc-navy-aside .pc-sub-label,
  body.nahda-rail aside.pc-navy-aside .pc-chevron,
  body.nahda-rail aside.pc-navy-aside .pc-brand-name,
  body.nahda-rail aside.pc-navy-aside .pc-brand-sub,
  body.nahda-rail aside.pc-navy-aside .pc-back-btn span,
  body.nahda-rail aside.pc-navy-aside .pc-brand-logo{
    display:none;
  }
  body.nahda-rail aside.pc-navy-aside .pc-brand{justify-content:center;margin:8px;padding:8px}
  body.nahda-rail aside.pc-navy-aside .pc-group-head,
  body.nahda-rail aside.pc-navy-aside .pc-top-entry,
  body.nahda-rail aside.pc-navy-aside .pc-subitem{justify-content:center}
  body.nahda-rail aside.pc-navy-aside .pc-submenu{padding:0}
}

/* ==========================================================================
   4. PROJECT CENTER SIDEBAR  (aside.pc-navy-aside) — native
   ----------------------------------------------------------------------------
   MOVED here from the React-injected <style> block (SmartHrProjectCenterShell)
   — the injection was deleted from source, ending the specificity war, so
   these are plain native rules now (no body-prefix needed).
   Fixes applied in the move:
   - .pc-sub-active: white text on the brand-blue gradient (was dark text
     #164c88!important on pale #e7f0fb).
   - Physical border-radius:0 18px 18px 0 -> logical properties (RTL-safe).
   - Icon-first AdminLTE order via CSS `order` (DOM order untouched; no JS
     depends on child order).
   - .pc-top-active unified to the same gradient pill language.
   ========================================================================== */
.pc-navy-aside{width:294px;min-width:294px;max-width:294px;background:radial-gradient(circle at 82% 8%,rgba(41,171,255,.20),transparent 26%),radial-gradient(circle at 8% 82%,rgba(91,83,255,.18),transparent 30%),linear-gradient(165deg,#06162b 0%,#09284f 54%,#071a35 100%);position:relative;overflow-y:auto;overflow-x:hidden;color:#e8f4ff;display:flex;flex-direction:column;flex-shrink:0;scrollbar-width:thin;scrollbar-color:rgba(92,194,255,.65) transparent}
.pc-navy-aside:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.24;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:28px 28px}
.pc-navy-aside>*{position:relative;z-index:1}
.pc-navy-aside::-webkit-scrollbar{width:5px}
.pc-navy-aside::-webkit-scrollbar-thumb{background:linear-gradient(#31c5ff,#5878ff);border-radius:20px}
.pc-brand{margin:12px;border-radius:18px;padding:14px;background:linear-gradient(135deg,#123e73 0%,#1e4d8c 100%);display:flex;align-items:center;gap:12px;box-shadow:0 8px 22px rgba(2,13,30,.3);flex-shrink:0}
.pc-brand-logo{width:44px;height:44px;border-radius:50%;flex-shrink:0;border:2px solid rgba(255,255,255,.85);background:linear-gradient(135deg,#31a8ff,#1e6fd6);display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px}
.pc-brand-name{color:#fff;font-weight:800;font-size:13px;line-height:1.35;margin:0}
.pc-brand-sub{color:#91aecf;font-size:10px;margin:2px 0 0}
.pc-back-btn{flex-shrink:0;display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.10);color:#e4efff;border:1px solid rgba(255,255,255,.22);border-radius:10px;padding:7px 10px;font-size:11px;font-weight:700;cursor:pointer;transition:background .15s}
.pc-back-btn:hover{background:rgba(255,255,255,.20)}
.pc-chip{border-radius:14px;background:linear-gradient(135deg,#31a8ff 0%,#1e6fd6 100%);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(46,163,242,.45),inset 0 1px 0 rgba(255,255,255,.35);flex-shrink:0}
.pc-chip i{color:#fff;font-size:15px}
.pc-nav{padding:4px 10px 14px;flex:1}
.pc-top-entry{width:100%;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;border:0;cursor:pointer;background:transparent;transition:background .18s,box-shadow .18s;margin-bottom:4px}
.pc-top-entry:hover{background:rgba(255,255,255,.07)}
.pc-top-entry:hover .pc-top-label{color:#dbe7f5}
.pc-top-label{flex:1;text-align:start;font-size:14px;font-weight:600;color:#7d93ac}
.pc-top-entry.pc-top-active{background:linear-gradient(135deg,#1e4d8c,#2f6db3);box-shadow:0 8px 22px rgba(2,13,30,.25)}
.pc-top-entry.pc-top-active .pc-top-label{color:#fff;font-weight:800}
.pc-group{margin:3px 0;border-radius:14px;overflow:hidden;position:relative}
.pc-group-head{width:100%;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;border:0;cursor:pointer;background:transparent;transition:background .18s,box-shadow .18s}
.pc-group-label{flex:1;text-align:start;font-size:13.5px;font-weight:600;color:#7d93ac}
.pc-chevron{font-size:10px;color:#7d93ac;transition:transform .18s;flex-shrink:0}
.pc-chev-open{transform:rotate(180deg)}
.pc-group-head:hover{background:rgba(255,255,255,.07)}
.pc-group-head:hover .pc-group-label{color:#dbe7f5}
.pc-group-open{background:rgba(255,255,255,.04)}
.pc-group-open .pc-group-label{color:#e8f4ff;font-weight:700}
.pc-group-open .pc-chevron{color:#9fc0e0}
.pc-group-active:before{content:"";position:absolute;inset-inline-start:0;top:10px;bottom:10px;width:4px;border-radius:4px;background:linear-gradient(#f59e0b,#fbbf24);box-shadow:0 0 10px rgba(245,158,11,.6);z-index:2}
.pc-submenu{padding:2px 6px 8px;display:flex;flex-direction:column;gap:2px}
.pc-subitem{position:relative;width:100%;display:flex;align-items:center;gap:9px;min-height:44px;padding:8px 10px;border-radius:10px;border:0;cursor:pointer;background:transparent;transition:background .15s}
.pc-subitem:hover{background:rgba(255,255,255,.08)}
.pc-sub-label{flex:1;text-align:start;font-size:12.5px;color:#b8c9dd;font-weight:500}
.pc-subitem .pc-chip{border-radius:10px}
.pc-subitem .pc-chip i{font-size:12px}
.pc-sub-active{background:linear-gradient(135deg,#1e4d8c,#2f6db3);color:#fff;font-weight:700;box-shadow:0 6px 16px rgba(30,77,140,.35)}
.pc-sub-active .pc-sub-label{color:#fff;font-weight:800}
.pc-sub-active:before{content:"";position:absolute;inset-inline-start:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:rgba(255,255,255,.7)}
/* Icon-first order (AdminLTE): chip, label, chevron */
.pc-top-entry>.pc-chip,.pc-group-head>.pc-chip,.pc-subitem>.pc-chip{order:0}
.pc-top-entry>.pc-top-label,.pc-group-head>.pc-group-label,.pc-subitem>.pc-sub-label{order:1}
.pc-group-head>.pc-chevron{order:2;margin-inline-start:auto}
.pc-group-open > .pc-group-head{background:rgba(30,77,140,.30)}
.pc-group-active > .pc-group-head .pc-group-label{color:#fff;font-weight:800}

/* ==========================================================================
   5. TOP BAR — white AdminLTE navbar (.nt-navbar, Header only)
   ----------------------------------------------------------------------------
   Scoped to the Header component. .header-blue is intentionally NOT
   restyled here (shared with the drawer + sidebar brandbar).
   ========================================================================== */
.nt-navbar{
  background:#fff;
  border-bottom:1px solid var(--nt-line);
  box-shadow:0 2px 12px rgba(15,43,75,.08);
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding:10px 16px;
}
.nt-navbar-left{display:flex;align-items:center;gap:8px;min-width:0}
.nt-title-wrap{min-width:0}
.nt-title{font-size:16px;font-weight:800;color:var(--nt-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nt-navbar-right{display:flex;align-items:center;gap:8px}
/* Icon buttons */
.nt-icon-btn{
  position:relative;
  width:40px;height:40px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:12px;border:1px solid transparent;background:transparent;
  color:#3c5a76;font-size:16px;cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.nt-icon-btn:hover{background:var(--nt-blue-soft);color:var(--nt-blue)}
.nt-icon-btn:active{transform:scale(.96)}
.nt-badge-dot{
  position:absolute;top:2px;inset-inline-end:2px;
}
/* Search (visual only — no search data exists in the app; the input fires
   the existing onSearch prop which sets an unread searchOpen state) */
.nt-search{
  display:flex;align-items:center;gap:8px;
  background:#f1f5f9;border:1px solid transparent;border-radius:12px;
  padding:0 12px;height:40px;min-width:180px;max-width:260px;
  color:#94a3b8;font-size:14px;cursor:text;
  transition:border-color .15s ease,background .15s ease;
}
.nt-search:focus-within{background:#fff;border-color:#b9cce0}
.nt-search input{
  border:0;background:transparent;outline:none;flex:1;min-width:0;
  font-size:13px;color:var(--nt-ink);height:100%;cursor:text;
}
.nt-search input::placeholder{color:#94a3b8}
/* Language button */
.nt-lang-btn{
  display:inline-flex;align-items:center;gap:6px;
  height:40px;padding:0 14px;border-radius:12px;flex:0 0 auto;
  background:var(--nt-blue-soft);color:var(--nt-blue);border:0;
  font-size:12px;font-weight:800;cursor:pointer;white-space:nowrap;
  transition:background .15s ease;
}
.nt-lang-btn:hover{background:#d8e7f8}
/* User chip (desktop) */
.nt-user-chip{
  display:flex;align-items:center;gap:10px;
  padding:4px 12px 4px 4px;border-radius:999px;flex:0 0 auto;
  background:#f8fafc;border:1px solid var(--nt-line);
}
[dir="rtl"] .nt-user-chip{padding:4px 4px 4px 12px}
.nt-user-avatar{
  width:32px;height:32px;border-radius:50%;flex:0 0 auto;overflow:hidden;
  background:var(--nt-blue-soft);color:var(--nt-blue);
  display:inline-flex;align-items:center;justify-content:center;font-size:14px;
}
.nt-user-avatar img{width:100%;height:100%;object-fit:cover}
.nt-user-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.nt-user-name{font-size:12px;font-weight:800;color:var(--nt-ink);white-space:nowrap;max-width:140px;overflow:hidden;text-overflow:ellipsis}
/* Notification bell dropdown (read-only; never calls markAllRead) */
.nt-bell-wrap{position:relative}
.nt-bell-backdrop{
  position:fixed;inset:0;z-index:90;background:transparent;border:0;cursor:default;
}
.nt-bell-dropdown{
  position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:95;
  width:320px;max-width:calc(100vw - 32px);max-height:380px;
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--nt-line);border-radius:16px;
  box-shadow:var(--nt-shadow-lg);overflow:hidden;
}
.nt-bell-head{padding:12px 16px;border-bottom:1px solid var(--nt-line);font-size:13px;font-weight:800;color:var(--nt-ink)}
.nt-bell-list{overflow-y:auto;flex:1;min-height:0}
.nt-bell-item{padding:10px 16px;border-bottom:1px solid #f1f5f9}
.nt-bell-item:last-child{border-bottom:0}
.nt-bell-item-title{margin:0;font-size:12px;font-weight:700;color:var(--nt-ink)}
.nt-bell-item-body{margin:2px 0 0;font-size:11px;color:var(--nt-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nt-bell-item-time{display:block;margin-top:2px;font-size:10px;color:#94a3b8}
.nt-bell-empty{margin:0;padding:20px 16px;text-align:center;font-size:12px;color:#94a3b8}
.nt-bell-viewall{
  border:0;border-top:1px solid var(--nt-line);background:#f8fafc;color:var(--nt-blue);
  font-size:12px;font-weight:800;padding:11px;cursor:pointer;
}
.nt-bell-viewall:hover{background:var(--nt-blue-soft)}
/* Dark mode */
.dark .nt-navbar{background:#0f172a;border-bottom-color:#1e293b}
.dark .nt-title{color:#f1f5f9}
.dark .nt-icon-btn{color:#94a3b8}
.dark .nt-icon-btn:hover{background:#1e293b;color:#93c5fd}
.dark .nt-search{background:#1e293b;color:#64748b}
.dark .nt-search:focus-within{background:#0f172a;border-color:#334155}
.dark .nt-search input{color:#e2e8f0}
.dark .nt-lang-btn{background:#1e293b;color:#93c5fd}
.dark .nt-user-chip{background:#1e293b;border-color:#334155}
.dark .nt-user-name{color:#f1f5f9}
.dark .nt-bell-dropdown{background:#1e293b;border-color:#334155}
.dark .nt-bell-head{border-bottom-color:#334155;color:#f1f5f9}
.dark .nt-bell-item{border-bottom-color:#0f172a}
.dark .nt-bell-item-title{color:#f1f5f9}
.dark .nt-bell-viewall{background:#0f172a;border-top-color:#334155;color:#93c5fd}

/* ==========================================================================
   6. DASHBOARD / KPI CARDS — native small-box
   ----------------------------------------------------------------------------
   (a) Type-C .stat-card (~30 usages) — untouched by the rebuild, kept as-is.
   (b) HR dashboard small-box cards (.nt-stat-card).
   (c) Project Center KPI cards (.pc-kpi-card + .pc-kpi-icon).
   ========================================================================== */
/* (a) Generic .stat-card (leave, attendance, payroll, BOQ tab…) */
.stat-card{
  background:#fff;border-radius:var(--nt-radius-lg);
  border:1px solid var(--nt-line);box-shadow:var(--nt-shadow);
  transition:transform .15s ease,box-shadow .15s ease;
}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--nt-shadow-lg)}
/* (b) HR small-box cards */
.nt-stat-card{
  position:relative;
  background:#fff;border:1px solid var(--nt-line);
  border-radius:var(--nt-radius-lg);box-shadow:var(--nt-shadow);
  padding:16px;display:flex;gap:12px;align-items:flex-start;
  transition:transform .15s ease,box-shadow .15s ease;
  overflow:hidden;
}
.nt-stat-card:hover{transform:translateY(-2px);box-shadow:var(--nt-shadow-lg)}
.nt-stat-chip{
  width:46px;height:46px;border-radius:14px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;font-size:19px;
  box-shadow:inset 0 0 0 1px rgba(15,43,75,.06);
}
.nt-stat-body{flex:1;min-width:0}
.nt-stat-num{
  margin:0;font-size:28px;line-height:1.15;font-weight:800;color:var(--nt-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nt-stat-label{margin:2px 0 0;font-size:12px;color:var(--nt-muted)}
.nt-stat-trend{
  position:absolute;top:12px;inset-inline-end:12px;
  display:inline-flex;align-items:center;gap:2px;
  font-size:11px;font-weight:800;padding:3px 8px;border-radius:999px;
  white-space:nowrap;
}
.nt-trend-up{background:#ecfdf5;color:#059669}
.nt-trend-down{background:#fef2f2;color:#dc2626}
/* (c) PC KPI cards */
.pc-kpi-card{background:#fff;border:1px solid var(--nt-line);border-radius:var(--nt-radius-lg);box-shadow:var(--nt-shadow);transition:transform .15s ease,box-shadow .15s ease}
.pc-kpi-card:hover{transform:translateY(-2px);box-shadow:var(--nt-shadow-lg)}
.pc-kpi-icon{
  width:36px;height:36px;border-radius:12px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;font-size:15px;
  box-shadow:inset 0 0 0 1px rgba(15,43,75,.06);
}
/* Dark mode */
.dark .nt-stat-card{background:#1e293b;border-color:#334155}
.dark .nt-stat-num{color:#f1f5f9}
.dark .nt-trend-up{background:rgba(5,150,105,.18);color:#34d399}
.dark .nt-trend-down{background:rgba(220,38,38,.18);color:#f87171}
.dark .pc-kpi-card{background:#1e293b;border-color:#334155}

/* ==========================================================================
   7. TABLES — zebra striping + hover + clean headers
   (App already sets thead th / tbody td element rules; these refine them.)
   ========================================================================== */
thead th{
  background:linear-gradient(180deg,#eef4fa,#e2ecf6);
  color:#33475e;font-size:11px;font-weight:800;
  text-transform:uppercase;letter-spacing:.04em;
  border-bottom:2px solid #cfdeee;
  padding:11px 10px;
  position:sticky;top:0;z-index:2;
}
/* NOTE: thead is sticky above — do NOT add overflow ancestors that clip it. */
tbody tr:nth-child(even){background:#f8fafc}
tbody tr{
  transition:background .12s ease;
}
tbody tr:hover{background:#e9f1fb}
tbody td{
  border-bottom:1px solid #edf2f7;padding:10px;
  vertical-align:middle;
}
/* Dark navy header variant used in some reports — keep, just polish */
tr.bg-\[\#06162b\] th, tr.bg-\[\#06162b\] td{
  background:#0a2547;color:#e8f4ff;
}


/* ==========================================================================
   8. BUTTONS
   ========================================================================== */
.btn-main{
  background:linear-gradient(135deg,#1e4d8c,#2b6cb8);
  border-radius:12px;font-weight:700;letter-spacing:.01em;
  box-shadow:0 8px 18px rgba(30,77,140,.28);
  transition:transform .1s ease,box-shadow .15s ease,filter .15s ease;
}
.btn-main:hover{filter:brightness(1.07);box-shadow:0 10px 22px rgba(30,77,140,.34)}
.btn-main:active{transform:translateY(1px)}
/* NOTE: 12 buttons carry inline style={{background:"#dc2626"|"#e5e7eb"|…}}
   (semantic delete/cancel colors) — intentionally NOT overridden. */
/* Dead classes with real usage but no CSS definition — safe to define fresh */
.btn-soft{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:#e8f0fa;color:#1e4d8c;border:1px solid #c9dcf2;
  border-radius:12px;min-height:44px;padding:0 18px;
  font-weight:700;font-size:14px;cursor:pointer;
  transition:background .15s ease;
}
.btn-soft:hover{background:#d8e7f8}
.btn-secondary{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:#fff;color:#33475e;border:1px solid #dbe3ed;
  border-radius:12px;min-height:44px;padding:0 18px;
  font-weight:700;font-size:14px;cursor:pointer;
  transition:border-color .15s ease,background .15s ease;
}
.btn-secondary:hover{border-color:#b9cce0;background:#f8fafc}
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:transparent;color:#1e4d8c;border:none;
  border-radius:12px;min-height:44px;padding:0 14px;
  font-weight:700;font-size:14px;cursor:pointer;
}
.btn-ghost:hover{background:rgba(30,77,140,.08)}


/* ==========================================================================
   9. FORMS
   ========================================================================== */
.input{
  border-radius:12px;border:1px solid #dbe3ed;background:#fff;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.input:hover{border-color:#b9cce0}
.input:focus{
  outline:none;border-color:#2f6db3;
  box-shadow:0 0 0 3px rgba(47,109,179,.14);
}
/* Dead .lbl class (202 usages, never styled) — safe to define fresh */
.lbl{
  display:block;font-size:12px;font-weight:700;color:#475569;
  margin-bottom:6px;letter-spacing:.01em;
}
select.input{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
  padding-inline-end:34px;appearance:none;
}
[dir="rtl"] select.input{background-position:left 12px center}


/* ==========================================================================
   10. MODALS / SHEETS / TOASTS / BADGES
   ========================================================================== */
.modal-sheet{
  border-radius:20px 20px 0 0;
  box-shadow:0 -18px 50px rgba(2,13,30,.28);
  border:1px solid var(--nt-line);
}
@media(min-width:768px){
  .modal-sheet{border-radius:18px;box-shadow:var(--nt-shadow-lg)}
}
/* Toast — keep position:fixed (JS/scroll contract), just beautify */
.toast{
  border-radius:12px;box-shadow:var(--nt-shadow-lg);
  border:1px solid rgba(255,255,255,.18);
}
/* Status pill primitive (defined in app but never used — safe to improve) */
.status-pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:999px;
  background:#eef5fb;color:#3c5a76;border:1px solid #d7e5f2;
  font-size:10px;font-weight:800;white-space:nowrap;
}
.role-badge{
  border-radius:999px;font-size:10px;font-weight:800;
  padding:3px 10px;letter-spacing:.02em;
}


/* ==========================================================================
   11. PROGRESS BARS — polish only. Fill WIDTH stays inline (data-driven).
   ========================================================================== */
div[class*="bg-slate-100"][class*="rounded-full"]{
  border-radius:999px;
  box-shadow:inset 0 1px 3px rgba(15,43,75,.10);
  overflow:hidden;
}


/* ==========================================================================
   12. HERO / BANNER BLOCKS (navy gradient headers across PC modules)
   WHY !important [1]: background is set via inline style={{...}}.
   ========================================================================== */
div[style*="linear-gradient(135deg,#06162b"]{
  background:linear-gradient(135deg,#0a2547 0%,#123e73 55%,#1e4d8c 100%)!important;
  border-radius:18px!important;
  border:1px solid rgba(143,205,255,.18)!important;
  box-shadow:var(--nt-shadow-lg)!important;
}
/* Login backdrop (inline gradient at app-shell) */
div[style*="linear-gradient(180deg,#1e4d8c,#163a6b)"]{
  background:linear-gradient(160deg,#0a2547 0%,#123e73 55%,#1e4d8c 110%)!important;
}


/* ==========================================================================
   13. TAB PILLS (tenders, finance, compliance…)
   ========================================================================== */
.tab-pill{border-radius:999px;transition:all .15s ease}
.tab-active{
  background:linear-gradient(135deg,#1e4d8c,#2f6db3);color:#fff;
  box-shadow:0 6px 14px rgba(30,77,140,.30);font-weight:700;
}
.tab-inactive{background:#eef2f7;color:#5b6b7f}
.tab-inactive:hover{background:#e2e9f2}


/* ==========================================================================
   14. PC DASHBOARD SVG CHARTS — recolor hooks (geometry untouched)
   ========================================================================== */
/* S-curve / sparkline strokes keep brand blue; gridlines soften */
body .pc-watermark{opacity:.5}

/* ==========================================================================
   15. MOBILE  (max-width:767px) — native AdminLTE bottom nav & drawer
   ----------------------------------------------------------------------------
   - .bottom-tab-active is now a dedicated JSX class (the fragile
     text-[#1e4d8c]-as-flag ternary is kept too for the index.html dark rule).
   - .fab margin-top moved here from JSX inline style (no !important needed).
   - Drawer: navy like the desktop sidebar, mirrored for RTL via logical
     properties + [dir="rtl"] side swap.
   ========================================================================== */
@media (max-width:767px){
  /* Bottom bar: floating, blurred, rounded top */
  .bottom-bar{
    background:rgba(255,255,255,.94);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border-top:1px solid var(--nt-line);
    border-radius:20px 20px 0 0;
    box-shadow:0 -10px 30px rgba(15,43,75,.14);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .bottom-bar .bottom-tab{
    border-radius:12px;min-width:60px;
    transition:background .15s ease,color .15s ease;
  }
  .bottom-bar .bottom-tab:active{background:#e8f0fa}
  /* Active tab: dedicated class (plus legacy Tailwind hook for dark rule) */
  .bottom-bar .bottom-tab-active,
  .bottom-bar button.text-\[\#1e4d8c\]{
    background:#e8f0fa;border-radius:12px;color:#1e4d8c;
  }
  /* Center FAB — gradient (inline style removed from JSX) */
  .bottom-bar .fab{
    background:linear-gradient(135deg,#1e4d8c,#2f6db3);
    box-shadow:0 10px 24px rgba(30,77,140,.45),0 0 0 4px #fff;
    margin-top:-28px;
    border:4px solid #fff;
    transition:transform .15s ease;
  }
  .bottom-bar .fab:active{transform:scale(.94)}
  /* Hamburger drawer: navy like the desktop sidebar */
  .drawer{
    background:linear-gradient(165deg,#1a2332 0%,#243447 60%,#1a2332 100%);
    color:#e8f4ff;
    border-start-end-radius:18px;border-end-end-radius:18px;
    border-start-start-radius:0;border-end-start-radius:0;
  }
  .drawer .menu-item{color:#cfe0f4}
  .drawer .nav-group-head{color:#e8f4ff}
  /* Order Box tiles (RequestsGrid) — softer, tactile */
  .max-w-2xl .grid.grid-cols-3 > button{
    border-radius:16px;box-shadow:var(--nt-shadow);
    transition:transform .12s ease,box-shadow .12s ease;
  }
  .max-w-2xl .grid.grid-cols-3 > button:active{
    transform:scale(.96);box-shadow:none;
  }
  /* Mobile cards breathe a little more */
  .card{border-radius:14px}
  /* Toast sits above the bottom bar */
  .toast{bottom:96px}
}
/* Dark-mode bottom bar */
.dark .bottom-bar{background:rgba(15,23,42,.94);border-top-color:#1e293b}
.dark .bottom-bar .bottom-tab-active,
.dark .bottom-bar button.text-\[\#1e4d8c\]{
  background:#1e293b;color:#93c5fd;
}

/* ==========================================================================
   16. RTL CORRECTIONS
   ========================================================================== */
/* WHY !important [2]: base forces .menu-item{text-align:left!important} in one sheet */
[dir="rtl"] .menu-item{text-align:right!important}
[dir="rtl"] aside.sidebar{box-shadow:10px 0 34px rgba(2,13,30,.18)}
[dir="rtl"] .nav-child.active{box-shadow:inset 3px 0 0 #1e4d8c}
/* Drawer mirrors to the inline-start side in RTL (base pins it right:0) */
[dir="rtl"] .drawer{right:auto;left:0}
/* Rail mode in RTL mirrors automatically via logical properties above */
/* Bell chevron / back arrows already flip via isEn ternaries in JSX */

/* ==========================================================================
   17. PRINT SAFETY — reskin must never leak into print output
   ========================================================================== */
@media print{
  .nahda-rail-btn,.nt-bell-dropdown,.nt-bell-backdrop{display:none!important}
  body.nahda-rail aside.sidebar,
  body.nahda-rail aside.pc-navy-aside{
    width:294px;min-width:294px;max-width:294px;
  }
}

/* ==========================================================================
   18. DASHBOARD V2 — AdminLTE v2 small-box / info-box / card pattern
   Used only by the management HomePage. RTL-safe via logical properties;
   numbers keep dir="ltr" in JSX. Table cells reuse the global §7 rules.
   ========================================================================== */

/* ---- text-bg color utilities (AdminLTE v2 palette + app accents) ---- */
.text-bg-primary{background:#0d6efd!important;color:#fff!important}
.text-bg-success{background:#198754!important;color:#fff!important}
.text-bg-info{background:#0dcaf0!important;color:#fff!important}
.text-bg-warning{background:#ffc107!important;color:#212529!important}
.text-bg-danger{background:#dc3545!important;color:#fff!important}
.text-bg-secondary{background:#6c757d!important;color:#fff!important}
/* App accents kept from the current chips — outside the AdminLTE palette */
.text-bg-orange{background:#ea580c!important;color:#fff!important}
.text-bg-indigo{background:#6366f1!important;color:#fff!important}

/* ---- Small boxes (hero row) ---- */
.v2-sbox{position:relative;display:block;border-radius:.375rem;box-shadow:0 0 1px rgba(0,0,0,.125),0 1px 3px rgba(0,0,0,.2);overflow:hidden}
.v2-sbox-inner{position:relative;z-index:1;padding:1rem}
.v2-sbox-inner h3{font-size:2rem;font-weight:700;margin:0;white-space:nowrap;line-height:1.2}
.v2-sbox-inner p{margin:.25rem 0 0;font-size:.92rem;opacity:.9}
.v2-sbox-icon{position:absolute;top:15px;inset-inline-end:15px;font-size:70px;line-height:1;color:rgba(0,0,0,.15);z-index:0;transition:transform .3s ease}
.v2-sbox:hover .v2-sbox-icon{transform:scale(1.08)}
.v2-sbox-footer{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:.35rem;width:100%;padding:.45rem .5rem;background:rgba(0,0,0,.1);color:inherit;border:0;font-size:.85rem;font-weight:600;cursor:pointer}
.v2-sbox-footer:hover{background:rgba(0,0,0,.15);color:inherit}
@media(max-width:575px){.v2-sbox-icon{display:none}}

/* ---- Info boxes style-1 (colored icon square + label + number) ---- */
.v2-ibox1{display:flex;align-items:stretch;min-height:80px;border-radius:.375rem;box-shadow:0 0 1px rgba(0,0,0,.125),0 1px 3px rgba(0,0,0,.2);overflow:hidden;padding:0;text-align:start;border:0;width:100%}
button.v2-ibox1{cursor:pointer}
div.v2-ibox1{cursor:default}
button.v2-ibox1:hover{filter:brightness(.95)}
.v2-ibox1-icon{display:flex;align-items:center;justify-content:center;width:80px;flex-shrink:0;font-size:1.875rem;background:rgba(0,0,0,.1)}
.v2-ibox1-content{flex:1;min-width:0;padding:.5rem .8rem;display:flex;flex-direction:column;justify-content:center}
.v2-ibox1-text{display:block;font-size:.78rem;opacity:.92;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v2-ibox1-num{display:block;font-size:1.35rem;font-weight:700;line-height:1.4;white-space:nowrap}

/* ---- Info boxes style-2 (quick actions) ---- */
.v2-ibox2{display:flex;align-items:center;gap:.75rem;width:100%;text-align:start;border:0;border-radius:.5rem;padding:.7rem .9rem;box-shadow:0 0 1px rgba(0,0,0,.125),0 1px 3px rgba(0,0,0,.2);cursor:pointer;font-weight:700;font-size:.9rem}
.v2-ibox2:hover{filter:brightness(.94)}
.v2-ibox2-icon{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:.5rem;background:rgba(255,255,255,.22);font-size:1.1rem;flex-shrink:0}
.text-bg-warning .v2-ibox2-icon{background:rgba(0,0,0,.08)}
.v2-ibox2-text{flex:1;min-width:0}

/* ---- Cards ---- */
.v2-card{background:#fff;border-radius:.5rem;box-shadow:0 0 1px rgba(0,0,0,.125),0 1px 3px rgba(0,0,0,.2);overflow:hidden}
.v2-card-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.9rem 1.1rem;border-bottom:1px solid rgba(0,0,0,.08)}
.v2-card-title{margin:0;font-size:.95rem;font-weight:700;color:#1f2937}
.v2-card-sub{font-size:.75rem;color:#94a3b8;margin-inline-start:.5rem}
.v2-card-body{padding:1.1rem}
.v2-card-footer{padding:.9rem 1.1rem;border-top:1px solid rgba(0,0,0,.08);background:#fafbfc}
.v2-card-footer-btn{padding:.55rem}
.v2-footbtn{display:block;width:100%;text-align:center;font-size:.8rem;font-weight:700;color:#1e4d8c;background:none;border:0;cursor:pointer;padding:.25rem}
.v2-footbtn:hover{text-decoration:underline}
.v2-footstat{text-align:center;padding:.25rem .5rem}
.v2-footstat+.v2-footstat{border-inline-start:1px solid rgba(0,0,0,.08)}
.v2-footstat h5{margin:0 0 .15rem;font-size:1.15rem;font-weight:700;color:#111827}
.v2-footstat span{font-size:.75rem;color:#6b7280}
.v2-empty{margin:0;padding:1.5rem .5rem;text-align:center;font-size:.8rem;color:#94a3b8}
.v2-count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:1.5rem;height:1.5rem;padding:0 .375rem;border-radius:9999px;background:#f43f5e;color:#fff;font-size:.7rem;font-weight:700}
.v2-table-wrap{overflow-x:auto}
.v2-row-ic{color:#1e4d8c}

/* ---- Progress groups ---- */
.v2-pgroup{margin-bottom:.65rem}
.v2-pgroup:last-child{margin-bottom:0}
.v2-pgroup-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.25rem}
.v2-pgroup-text{font-size:.8rem;color:#475569}
.v2-pgroup-num{font-size:.8rem;color:#64748b}
.v2-pgroup-num b{color:#0f172a}
.v2-progress{height:8px;background:#e9ecef;border-radius:4px;overflow:hidden}
.v2-bar{height:100%;border-radius:4px;transition:width .4s ease}
.v2-bg-primary{background:#0d6efd}
.v2-bg-success{background:#198754}
.v2-bg-info{background:#0dcaf0}
.v2-bg-warning{background:#ffc107}
.v2-bg-danger{background:#dc3545}

/* ---- Delta badge: shown only where real trend data exists ---- */
.v2-delta{display:inline-block;font-size:.68rem;font-weight:700;padding:.12rem .45rem;border-radius:9999px;margin-inline-start:.4rem;vertical-align:middle}
.v2-delta-up{background:rgba(25,135,84,.16);color:#157347}
.v2-delta-down{background:rgba(220,53,69,.16);color:#b02a37}

/* ---- Status badges (approvals table; app has no .badge of its own) ---- */
.v2-badge{display:inline-block;font-size:.68rem;font-weight:700;padding:.22rem .6rem;border-radius:9999px;white-space:nowrap;color:#fff}
.v2-badge.v2-bg-warning{color:#212529}

/* ---- Dark mode ---- */
.dark .v2-card{background:#1e293b;color:#e2e8f0}
.dark .v2-card-title{color:#f1f5f9}
.dark .v2-card-sub{color:#94a3b8}
.dark .v2-card-header{border-bottom-color:#334155}
.dark .v2-card-footer{border-top-color:#334155;background:#16202f}
.dark .v2-footstat h5{color:#fff}
.dark .v2-footstat span{color:#94a3b8}
.dark .v2-footstat+.v2-footstat{border-inline-start-color:#334155}
.dark .v2-progress{background:#334155}
.dark .v2-pgroup-text{color:#cbd5e1}
.dark .v2-pgroup-num{color:#94a3b8}
.dark .v2-pgroup-num b{color:#f1f5f9}
.dark .v2-empty{color:#64748b}
.dark .v2-row-ic{color:#93c5fd}
.dark .v2-footbtn{color:#93c5fd}
.dark .v2-delta-up{background:rgba(52,211,153,.16);color:#34d399}
.dark .v2-delta-down{background:rgba(248,113,113,.16);color:#f87171}
.dark .v2-table thead th{background:#16202f;color:#cbd5e1;border-bottom-color:#334155}
.dark .v2-table tbody tr:nth-child(even){background:#16202f}
.dark .v2-table tbody tr:hover{background:#1c2940}
.dark .v2-table tbody td{border-bottom-color:#334155;color:#e2e8f0}

/* ==========================================================================
   FIX 20261018 - white strip at right viewport edge (100% zoom)
   ========================================================================== */
html{background:#f3f6fa}
body{background:#f3f6fa!important;overflow-x:hidden}
.app-shell.safe-pb{width:100%}
.app-shell.safe-pb>.main-area{flex:1 1 auto;min-width:0}
.main-area::-webkit-scrollbar-track{background:transparent}

/* ==========================================================================
   19. P18 MOBILE PHONE-APP RESTYLE (additive; §15 rules above stay intact)
   --------------------------------------------------------------------------
   - Bottom bar becomes a floating pill (12px side margins, 20px radius, blur
     kept). Active-tab hooks (.bottom-tab-active + text-[#1e4d8c]) and the
     §15 dark-mode rule keep working — only geometry changes here.
   - FAB keeps its blue gradient; ensured above the floating bar.
   - Employee home cards (.emp-home) get the AdminLTE v2 small-box shadow
     treatment to match the management branch's v2-sbox aesthetic; the
     colored icon chips + big numbers already exist in the JSX.
   - Logical properties only (margin-inline) — EN/AR + RTL safe.
   - Contracts preserved: bar z-50 (base, index.html), toast bottom 96px,
     .safe-pb clearance untouched.
   ========================================================================== */
@media(max-width:767px){
  /* Floating pill bottom bar */
  .bottom-bar{
    margin-inline:12px;
    width:calc(100% - 24px);
    max-width:1076px; /* 1100px base - 24px margins */
    border-radius:20px;
    border:1px solid var(--nt-line);
    bottom:calc(10px + env(safe-area-inset-bottom));
    box-shadow:0 -10px 30px rgba(15,43,75,.16);
    z-index:50;
  }
  /* Roomier touch targets for every tab */
  .bottom-bar .bottom-tab{min-height:64px}
  /* FAB stays centered above the floating bar */
  .bottom-bar .fab{position:relative;z-index:2}
  /* Toast floats above the pill bar */
  .toast{bottom:96px;z-index:100}
  /* --- Mobile-fix (2026-10-19): touch targets + bottom-nav clearance --- */
  /* 2b: notification touch targets */
  .nt-markall{min-height:44px}
  .nt-notif-tab{min-height:44px}
  .nt-icon-btn{width:44px;height:44px}
  /* 2c: clear the floating pill bottom bar (~74px) on notification/other pages */
  .main-area{padding-bottom:96px}
  /* 3f: profile sub-view back links — 44px touch target */
  .nt-back-link{min-height:44px;padding-top:8px;padding-bottom:8px}
  /* 3b: home header icon buttons — 44px hit area */
  .nt-home-icobtn{width:44px;height:44px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center}
  /* 3c: narrower icon rail on info boxes (long labels clip otherwise) */
  .v2-ibox1-icon{width:56px}
  /* 3d: attendance calendar nav + legend */
  .nt-cal-nav{width:44px;height:44px}
  .nt-cal-legend{font-size:11px}
  /* 3e: request approve/reject + cancel — 44px targets */
  .nt-req-act{padding-top:.75rem;padding-bottom:.75rem;min-height:44px}
  .nt-cancel-btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  /* 3h: salary-slip year steppers */
  .nt-slip-step{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center}
  /* 3j: 9px caption floor on mobile (stat captions under numbers stay legible) */
  .text-\[9px\]{font-size:10px!important}
  /* 5a: "View all" links — 44px touch target */
  .nt-viewall{min-height:44px;display:inline-flex;align-items:center;padding-left:8px;padding-right:8px}
  /* 5c: payroll journal editor stacks vertically on mobile */
  .nt-journal-grid{grid-template-columns:1fr}
  /* Employee home: v2 small-box look (management branch already v2) */
  .emp-home .card{
    box-shadow:0 0 1px rgba(0,0,0,.125),0 1px 3px rgba(0,0,0,.2);
  }
  .emp-home .grid .rounded-xl{
    box-shadow:0 0 1px rgba(0,0,0,.125),0 1px 2px rgba(0,0,0,.12);
  }
  .emp-home .grid .rounded-xl p:first-child{
    letter-spacing:.01em;
  }
}
/* Floating pill in dark mode */
.dark .bottom-bar{border-color:#1e293b}
/* --- Mobile-fix (2026-10-19) continued --- */
/* 3g: employee row actions — 44px pill buttons with visible labels (all sizes; labels always render) */
.nt-emp-act{min-height:44px;min-width:44px;padding:6px 12px;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:11px;font-weight:700}
@media(max-width:400px){
  
  /* Owner order 2026-10-19: announcement icon must stay visible on all screen sizes */
}
@media(max-width:480px){
  /* 3i: asset usage-log sheet inputs stack to one column */
  .nt-asset-log-grid{grid-template-columns:1fr}
}