/* ============================================================================
   EM PORTAL — DESIGN SYSTEM  ·  app.css  (production)
   ----------------------------------------------------------------------------
   Fonts ............ Inter · Plus Jakarta Sans · JetBrains Mono  (Google Fonts)
   Icons ............ Font Awesome 6 (auto-swapped into sidebar/topbar via CSS)
   Theming .......... --accent / --on-accent injected inline per user by the app
   Dark mode ........ body.dark  (tokens re-declared for correct color-mixing)
   Zero HTML changes — drop-in replacement.
============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css');

/* ============================================================
   1 · DESIGN TOKENS
============================================================ */
:root{
  /* identity (overridden inline per-user by the app) */
  --accent:#6d5efc;
  --on-accent:#ffffff;

  /* fonts */
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-display:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'Cascadia Code',Consolas,monospace;

  /* surfaces */
  --bg:#f4f6fb;   --bg-2:#edf0f8;
  --card:#ffffff; --card-2:#f8fafd;
  --text:#0f1729; --text-2:#3c465e; --muted:#667089;
  --border:#e6eaf2; --border-2:#d7deec;

  /* sidebar (always dark) */
  --side-1:#0d1327; --side-2:#1b2342;
  --side-text:#a9b3d0; --side-text-dim:#5d688a;

  /* semantic */
  --success:#16a34a; --warn:#d97706; --danger:#e5484d;
  --info:#0284c7;    --purple:#8b5cf6;

  /* accent derivations */
  --accent-600:color-mix(in srgb,var(--accent) 84%,#0b0f1e);
  --accent-soft:color-mix(in srgb,var(--accent) 8%,var(--card));
  --accent-soft-2:color-mix(in srgb,var(--accent) 15%,var(--card));
  --accent-border:color-mix(in srgb,var(--accent) 30%,var(--border));
  --accent-ring:color-mix(in srgb,var(--accent) 20%,transparent);
  --accent-glow:color-mix(in srgb,var(--accent) 35%,transparent);

  /* elevation */
  --shadow-xs:0 1px 2px rgba(16,24,40,.05);
  --shadow-sm:0 2px 8px rgba(16,24,40,.07);
  --shadow-md:0 6px 18px rgba(16,24,40,.09);
  --shadow-lg:0 14px 36px rgba(16,24,40,.13);
  --shadow-xl:0 26px 64px rgba(16,24,40,.18);

  /* radii */
  --r-sm:9px; --r-md:12px; --r-lg:16px; --r-xl:20px;

  /* motion */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  color-scheme:light;
}

.purple{color: var(--accent);}
.orange{color: var(--warn);}
.green{color: #16a34a;}
.red{color: #e5484d;}
.blue{color: #0284c7;}
.cyan{color: aqua;}
.yellow{color: yellow;}
.light_green{color:#34d399}

body.dark{
  --bg:#0a0e1a;   --bg-2:#101627;
  --card:#141b2d; --card-2:#182036;
  --text:#e9edf7; --text-2:#c5cddf; --muted:#8b96b3;
  --border:#232c46; --border-2:#2e3a5c;

  --side-1:#070b16; --side-2:#0f1731;

  --success:#34d399; --warn:#fbbf24; --danger:#ff6b6b;
  --info:#38bdf8;    --purple:#a78bfa;

  /* derived accent tokens re-declared so they mix against DARK surfaces */
  --accent-600:color-mix(in srgb,var(--accent) 78%,#000);
  --accent-soft:color-mix(in srgb,var(--accent) 12%,var(--card));
  --accent-soft-2:color-mix(in srgb,var(--accent) 20%,var(--card));
  --accent-border:color-mix(in srgb,var(--accent) 38%,var(--border));
  --accent-ring:color-mix(in srgb,var(--accent) 26%,transparent);
  --accent-glow:color-mix(in srgb,var(--accent) 40%,transparent);

  --shadow-xs:0 1px 2px rgba(0,0,0,.35);
  --shadow-sm:0 2px 10px rgba(0,0,0,.4);
  --shadow-md:0 8px 22px rgba(0,0,0,.45);
  --shadow-lg:0 16px 40px rgba(0,0,0,.5);
  --shadow-xl:0 28px 70px rgba(0,0,0,.6);

  color-scheme:dark;
}

/* ============================================================
   2 · BASE
============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  font-size:14.5px;line-height:1.55;
  color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
/* ambient accent mesh (light + dark) */
body.app::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1100px 480px at 88% -12%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 62%),
    radial-gradient(900px 420px at -8% 108%,color-mix(in srgb,var(--purple) 6%,transparent),transparent 60%);
}
body.dark.app::before{opacity:.55}

h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.02em;color:var(--text)}
a{color:var(--accent);text-decoration:none;transition:color .15s}
a:hover{color:var(--accent-600)}
code,.code{font-family:var(--font-mono);font-size:12px;color:var(--text-2);
  background:var(--bg-2);border:1px solid var(--border);border-radius:6px;padding:2px 7px}
::selection{background:color-mix(in srgb,var(--accent) 24%,transparent)}
button{font-family:inherit}
input,select,textarea{font-family:inherit}
input[type=checkbox],input[type=radio]{accent-color:var(--accent)}
img,svg{max-width:100%}

/* focus rings */
a:focus-visible,button:focus-visible,.chip:focus-visible,.nav-link:focus-visible{
  outline:2px solid color-mix(in srgb,var(--accent) 70%,transparent);outline-offset:2px;border-radius:8px}

/* scrollbars */
*{scrollbar-width:thin;scrollbar-color:var(--border-2) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:99px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background-color:color-mix(in srgb,var(--accent) 55%,var(--border-2))}

.hand{cursor: pointer;}

/* ============================================================
   3 · FONT AWESOME ICON SWAP  (sidebar + topbar, pure CSS)
   Emoji are hidden and FA glyphs injected per route.
   Added a new nav link? Give it a content rule here —
   or delete this section to fall back to emojis.
============================================================ */
.nav-ico{font-size:0;width:20px;flex:none;display:inline-flex;justify-content:center}
.nav-ico::before{font-family:'Font Awesome 6 Free';font-weight:900;font-size:15px;line-height:1.3;-webkit-font-smoothing:antialiased}
.nav-link[href$="dashboard"]      .nav-ico::before{content:"\f625"} /* gauge-high   */
.nav-link[href$="/admin"]         .nav-ico::before{content:"\f3ed"} /* shield-halved*/
.nav-link[href$="tasks"]          .nav-ico::before{content:"\f0ae"} /* list-check   */
.nav-link[href$="tasks/all"]      .nav-ico::before{content:"\f46d"} /* clipboard    */
.nav-link[href$="teams"]          .nav-ico::before{content:"\f0c0"} /* users        */
.nav-link[href$="reports"]        .nav-ico::before{content:"\f15c"} /* file-lines   */
.nav-link[href$="/projects"]      .nav-ico::before{content:"\f07b"} /* folder       */
.nav-link[href$="complaints"]     .nav-ico::before{content:"\f0a1"} /* bullhorn     */
.nav-link[href$="servers"]        .nav-ico::before{content:"\f233"} /* server       */
.nav-link[href$="recruitment"]       .nav-ico::before{content:"\f503"} /* user-group   */
.nav-link[href$="recruitment/jds"]   .nav-ico::before{content:"\f15c"} /* file-lines   */
.nav-link[href$="admin/users"]       .nav-ico::before{content:"\f505"} /* user-gear    */
.nav-link[href$="admin/roles"]    .nav-ico::before{content:"\f502"} /* user-lock    */
.nav-link[href$="admin/settings"] .nav-ico::before{content:"\f013"} /* gear         */
.nav-link[href$="admin/emails"]   .nav-ico::before{content:"\f0e0"} /* envelope     */
  .nav-link[href$="announcements"] .nav-ico::before{content:"\f0a1"} /* bullhorn     */
  .nav-link[href$="/hr"]           .nav-ico::before{content:"\f0c0"} /* users        */
  .nav-link[href$="hr/leaves"]     .nav-ico::before{content:"\f274"} /* calendar-alt */
  .nav-link[href$="hr/payroll"]    .nav-ico::before{content:"\f53d"} /* money-bill-wave */
  .nav-link[href$="hr/overtimes"]  .nav-ico::before{content:"\f017"} /* clock        */
  .nav-link[href$="hr/deductions"] .nav-ico::before{content:"\f53e"} /* minus-circle */
  .nav-link[href$="hr/expenses"]   .nav-ico::before{content:"\f036"} /* receipt      */
  .nav-link[href$="hr/documents"]  .nav-ico::before{content:"\f15c"} /* file-lines   */
  .nav-link[href$="hr/salaries"]   .nav-ico::before{content:"\f155"} /* money-bill   */
  .nav-link[href$="hr/performance"] .nav-ico::before{content:"\f005"} /* star (KPI)   */

  /* Procurement */
  .nav-link[href$="/procurement"]         .nav-ico::before{content:"\f217"} /* cart-shopping */
  .nav-link[href$="procurement/vendors"]  .nav-ico::before{content:"\f488"} /* building-columns */
  .nav-link[href$="procurement/purchase-requests"] .nav-ico::before{content:"\f0f6"} /* file-lines */
  .nav-link[href$="procurement/quotations"]      .nav-ico::before{content:"\f53d"} /* money-bill-wave */
  .nav-link[href$="procurement/purchase-orders"] .nav-ico::before{content:"\f0f1"} /* file-invoice */
  .nav-link[href$="procurement/goods-receipts"]  .nav-ico::before{content:"\f433"} /* clipboard-check */
  .nav-link[href$="procurement/approvals"]       .nav-ico::before{content:"\f058"} /* check-circle */

  /* Inventory */
.nav-link[href$="/inventory"]         .nav-ico::before{content:"\f488"} /* warehouse */
  .nav-link[href$="inventory/items"]    .nav-ico::before{content:"\f48e"} /* boxes-stacked */
  .nav-link[href$="inventory/warehouses"] .nav-ico::before{content:"\f489"} /* warehouse-alt */
  .nav-link[href$="inventory/movements"] .nav-ico::before{content:"\f0ec"} /* exchange-alt */
  .nav-link[href$="inventory/adjustments"] .nav-ico::before{content:"\f0e4"} /* edit */

  /* Inventory sub-items */
  .nav-link[href$="inventory/movement/receipt"] .nav-ico::before{content:"\f0d7"} /* arrow-down (receive) */
  .nav-link[href$="inventory/requests"]    .nav-ico::before{content:"\f0ae"} /* list-check */
  .nav-link[href$="inventory/report"]      .nav-ico::before{content:"\f201"} /* chart-line */
  .nav-link[href$="inventory/exceptions"]  .nav-ico::before{content:"\f071"} /* exclamation-triangle */
  .nav-link[href$="inventory/locations"]   .nav-ico::before{content:"\f3c5"} /* map-marked-alt */
  .nav-link[href$="inventory/movements"]   .nav-ico::before{content:"\f0ec"} /* exchange-alt */

  /* CRM */
  .nav-link[href$="/crm"]              .nav-ico::before{content:"\f201"} /* chart-line   */
  .nav-link[href$="crm/accounts"]      .nav-ico::before{content:"\f1ad"} /* building     */
  .nav-link[href$="crm/contacts"]      .nav-ico::before{content:"\f0c0"} /* users        */
  .nav-link[href$="crm/leads"]         .nav-ico::before{content:"\f140"} /* bullseye     */
  .nav-link[href$="crm/deals/kanban"]  .nav-ico::before{content:"\f0db"} /* columns      */
  .nav-link[href$="crm/deals"]         .nav-ico::before{content:"\f0b1"} /* briefcase    */
  .nav-link[href$="crm/activities"]    .nav-ico::before{content:"\f073"} /* calendar-days*/
  .nav-link.active .nav-ico::before{font-size:16px}

#burger{font-size:0}
#burger::before{font-family:'Font Awesome 6 Free';font-weight:900;content:"\f0c9";font-size:16px}
#bellBtn{font-size:0}
#bellBtn::before{font-family:'Font Awesome 6 Free';font-weight:900;content:"\f0f3";font-size:15px}
button[data-pop-toggle="#themePop"]{font-size:0}
button[data-pop-toggle="#themePop"]::before{font-family:'Font Awesome 6 Free';font-weight:900;content:"\f53f";font-size:15px}

/* helper utilities for hand-placed FA icons anywhere in views */
i[class^="fa-"],i[class*=" fa-"]{font-style:normal}
.btn i,.icon-btn i{font-size:.95em}

/* ============================================================
   4 · LAYOUT · SIDEBAR
============================================================ */
.app{min-height:100vh}
.sidebar{
  position:fixed;inset:0 auto 0 0;width:256px;z-index:50;
  display:flex;flex-direction:column;
  background:
    radial-gradient(620px 320px at -120px -60px,color-mix(in srgb,var(--accent) 22%,transparent),transparent 62%),
    linear-gradient(180deg,var(--side-1),var(--side-2));
  color:var(--side-text);
  transition:transform .3s var(--ease-out);
}
.main{margin-left:256px;min-height:100vh;display:flex;flex-direction:column}
.content{flex:1;width:100%;max-width:1300px;margin:0 auto;padding:26px 32px 44px}
.scrim{position:fixed;inset:0;z-index:40;background:rgba(8,12,26,.55);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .25s}
.scrim.show{opacity:1;pointer-events:auto}

/* brand */
.brand{display:flex;gap:13px;align-items:center;padding:22px 20px 16px}
.brand-logo{
  width:42px;height:42px;border-radius:13px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--bg),var(--bg-2));
  color:var(--on-accent);font-weight:800;font-size:15px;letter-spacing:.5px;
  box-shadow:0 8px 22px var(--accent-glow);
  transition:transform .3s var(--ease-spring);
}
.brand:hover .brand-logo{transform:rotate(-6deg) scale(1.06)}
.brand-logo.big{width:100px;height:56px;font-size:20px;border-radius:17px}
.brand-name{font-family:var(--font-display);font-weight:750;font-size:16.5px;color:#fff;letter-spacing:-.02em}
.brand-sub{font-size:10.5px;color:var(--side-text-dim);letter-spacing:.5px;margin-top:1px}

/* theme-aware logo images */
.brand-logo img{display:block;max-width:100%;height:auto}
.brand-logo-light{display:block !important}
.brand-logo-dark{display:none !important}
body.dark .brand-logo-light{display:none !important}
body.dark .brand-logo-dark{display:block !important}

/* nav */
.nav{flex:1;overflow-y:auto;padding:4px 14px 10px;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav-label{display:flex;align-items:center;gap:9px;margin:18px 10px 7px;
  font-size:10.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--side-text-dim)}
.nav-label::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.14),transparent)}
.nav-link{
  display:flex;align-items:center;gap:11px;margin-bottom:2px;
  padding:9px 12px;border-radius:10px;
  color:var(--side-text);font-weight:550;font-size:13.5px;
  transition:background .18s,color .18s,transform .18s,box-shadow .18s;
}
.nav-link:hover{background:rgba(255,255,255,.07);color:#fff;transform:translateX(3px)}
.nav-link:active{transform:translateX(3px) scale(.98)}
.nav-link.active{
  background:linear-gradient(135deg,var(--accent),var(--accent-600));
  color:var(--on-accent);
  box-shadow:0 6px 18px var(--accent-glow);
}
.nav-text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-badge{margin-left:auto;background:var(--danger);color:#fff;font-size:10.5px;font-weight:700;
  border-radius:99px;padding:1px 8px;box-shadow:0 0 0 2px color-mix(in srgb,var(--danger) 25%,transparent)}
.sidebar-foot{padding:16px 20px;font-size:10.5px;letter-spacing:.8px;color:var(--side-text-dim);
  border-top:1px solid rgba(255,255,255,.07);line-height:1.7}
.sidebar-foot span{opacity:.7}

/* ============================================================
   5 · TOPBAR
============================================================ */
.topbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:14px;padding:13px 32px;
  background:color-mix(in srgb,var(--bg) 78%,transparent);
  backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5);
  border-bottom:1px solid var(--border);
}
.topbar-title{flex:1;display:flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-weight:700;font-size:15.5px;letter-spacing:-.02em}
.topbar-title::before{content:'';width:4px;height:17px;border-radius:3px;flex:none;
  background:linear-gradient(180deg,var(--accent),var(--accent-600))}
.topbar-actions{display:flex;align-items:center;gap:9px}

.icon-btn{
  position:relative;width:38px;height:38px;border-radius:11px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--card);border:1px solid var(--border);color:var(--text-2);
  font-size:15px;cursor:pointer;box-shadow:var(--shadow-xs);
  transition:border-color .15s,color .15s,transform .15s,box-shadow .15s;
}
.icon-btn:hover{border-color:var(--accent-border);color:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.icon-btn:active{transform:translateY(0) scale(.95)}
.burger{display:none}

.dot-badge{
  position:absolute;top:-6px;right:-7px;z-index:1;
  min-width:18px;height:18px;padding:1px 5px;
  display:flex;align-items:center;justify-content:center;
  background:var(--danger);color:#fff;border-radius:99px;
  font-size:10.5px;font-weight:700;line-height:1;
  box-shadow:0 0 0 2px var(--card);
}
.dot-badge::after{content:'';position:absolute;inset:0;border-radius:inherit;
  box-shadow:0 0 0 2px var(--danger);opacity:0;
  animation:ping 2.2s cubic-bezier(0,0,.2,1) infinite}

.avatar{
  width:34px;height:34px;border-radius:12px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-600));
  color:var(--on-accent);font-weight:700;font-size:12px;
  box-shadow:0 3px 10px var(--accent-glow);
}
.avatar.big{width:52px;height:52px;font-size:17px;border-radius:16px}
.avatar-btn{background:none;border:none;cursor:pointer;padding:0;border-radius:14px;
  transition:transform .2s var(--ease-spring)}
.avatar-btn:hover{transform:scale(1.07) rotate(3deg)}

/* ============================================================
   6 · POPOVERS (theme · notifications · user menu)
============================================================ */
.pop{
  position:absolute;top:58px;right:32px;width:302px;z-index:60;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-xl);padding:18px;display:none;
  transform-origin:top right;
}
.pop.open{display:block;animation:popIn .24s var(--ease-spring)}
.pop a{
  display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:10px;
  color:var(--text-2);font-weight:600;font-size:13.5px;
  transition:background .15s,color .15s,transform .15s;
}
.pop a:hover{background:var(--accent-soft);color:var(--accent);transform:translateX(2px)}
.pop-title{margin:16px 0 9px;font-size:10.5px;font-weight:800;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--muted)}
.pop > .pop-title:first-child{margin-top:0}
.pop-user{display:flex;gap:11px;align-items:center;padding-bottom:13px;margin-bottom:9px;border-bottom:1px solid var(--border)}
.pop-user b{font-size:13.5px;display:block}
.pop-user .muted{font-size:11.5px}
.pop-hint{margin-top:12px;font-size:11.5px;color:var(--muted)}
.pop-empty{padding:18px 4px;color:var(--muted);font-size:13px}

.notif-item{display:flex;flex-direction:column;gap:3px;padding:10px 11px;border-radius:10px;
  color:var(--text-2);font-size:13px;transition:background .15s}
.notif-item:hover{background:var(--bg-2)}
.notif-item b{font-size:13px;font-weight:650;color:var(--text)}
.notif-item span{font-size:11px;color:var(--muted)}
.notif-item.unread{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent);margin-bottom:5px}
.notif-item.unread:hover{background:var(--accent-soft-2)}
/* ERP-style notification popover */
.notif-pop{width:380px;padding:16px;max-height:calc(100vh - 96px);overflow:hidden}
/* The bell's panel is anchored to the bell itself, and the topbar is sticky - so the
   list stays right under the bell however far the page is scrolled, while keeping its
   own internal scroll for long lists. */
.notif-anchor{position:relative}
.notif-anchor > .notif-pop{top:calc(100% + 10px);right:0}

/* ---- compact ERP rows inside the bell panel --------------------------------
   Scoped to .notif-pop on purpose: the full /notifications page keeps its roomier
   .notif-item / .notif-icon layout, only the popover gets this denser treatment. */
.notif-pop .notif-item{
  display:flex;flex-direction:row;align-items:flex-start;gap:10px;
  padding:10px 11px;border-radius:12px;border:1px solid transparent;
  transition:background .16s,border-color .16s,box-shadow .16s;
}
.notif-pop .notif-item + .notif-item{margin-top:4px}
.notif-pop .notif-item:hover{background:var(--bg-2);border-color:var(--border)}
.notif-pop .notif-item.read{background:var(--card);border-color:var(--border)}
.notif-pop .notif-item.read:hover{background:var(--bg-2)}
.notif-pop .notif-item.unread{background:var(--accent-soft);border-color:var(--accent-border);
  box-shadow:inset 3px 0 0 var(--accent)}
.notif-pop .notif-item.unread:hover{background:var(--accent-soft-2)}

.notif-pop .notif-ico{
  flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  font-size:12.5px;line-height:1;background:var(--bg-2);color:var(--muted);
}
.notif-pop .notif-ico.unread{background:var(--accent-soft-2);color:var(--accent)}
.notif-pop .notif-ico.read{background:color-mix(in srgb,var(--success) 12%,transparent);color:var(--success)}
/* JS marks a row read by swapping .unread -> .read on the row only, so key the
   tile off the row state too (beats .notif-ico.unread above by one class). */
.notif-pop .notif-item.read .notif-ico{background:color-mix(in srgb,var(--success) 12%,transparent);color:var(--success)}

.notif-pop .notif-main{flex:1;min-width:0}
.notif-pop .notif-top{display:flex;align-items:baseline;gap:8px}
.notif-pop .notif-title{
  /* the /notifications page styles .notif-title as a flex row — reset it so the
     badge + title flow inline and the full text wraps normally (no clamping) */
  display:block;
  font-size:12.6px;font-weight:650;line-height:1.35;color:var(--text);
  min-width:0;overflow-wrap:anywhere;
}
.notif-pop .notif-time{
  flex:none;margin-left:auto;font-size:10.5px;font-weight:600;color:var(--muted);white-space:nowrap;
}
.notif-pop .notif-body-text{
  margin-top:2px;font-size:11.8px;line-height:1.45;color:var(--muted);
  overflow-wrap:anywhere;
  /* reset the page's 2-line -webkit-box clamp: show the whole message */
  display:block;-webkit-line-clamp:none;overflow:visible;
}
.notif-pop .notif-cat{
  margin-right:6px;padding:1px 7px;font-size:9px;
  color:var(--cat,var(--muted));
  background:color-mix(in srgb,var(--cat,var(--muted)) 13%,transparent);
}
.notif-pop .notif-cat i{font-size:9px}

/* action row: two proper buttons pushed to opposite ends of the row */
.notif-pop .notif-actions{display:flex;align-items:center;gap:8px;margin-top:8px}
.notif-pop .notif-actions > :last-child{margin-left:auto}
.notif-pop .notif-btn,
.notif-pop .notif-read-btn,
.notif-pop .notif-read-done{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  width:auto;height:27px;padding:0 11px;border-radius:8px;
  font-size:11.5px;font-weight:700;letter-spacing:.1px;line-height:1;
  border:1px solid var(--border);background:var(--card);color:var(--text-2);
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background .16s,color .16s,border-color .16s,transform .16s,box-shadow .16s;
}
.notif-pop .notif-btn i,
.notif-pop .notif-read-btn i{font-size:10.5px}
.notif-pop .notif-open{color:var(--accent);border-color:var(--accent-border);background:var(--accent-soft)}
.notif-pop .notif-open:hover{
  background:var(--accent);border-color:transparent;color:var(--on-accent);
  transform:translateY(-1px);box-shadow:0 4px 12px var(--accent-glow);
}
.notif-pop .notif-read-btn::after{content:'Mark read'}
.notif-pop .notif-read-btn:hover{
  border-color:var(--accent-border);background:var(--accent-soft);color:var(--accent);transform:translateY(-1px);
}
.notif-pop .notif-read-btn:focus-visible{outline:none;box-shadow:0 0 0 4px var(--accent-ring)}
.notif-pop .notif-read-done{
  border-style:dashed;border-color:var(--border-2);background:transparent;color:var(--muted);cursor:default;
}
.notif-pop .notif-read-done::after{content:'Read'}
/* after the click handler swaps the button to .is-read it must read "Read",
   not "Mark read" */
.notif-pop .notif-read-btn.is-read{
  border-style:dashed;border-color:var(--border-2);background:transparent;color:var(--muted);cursor:default;
}
.notif-pop .notif-read-btn.is-read::after{content:'Read'}
.notif-pop .notif-read-btn.is-read:hover{
  border-color:var(--border-2);background:transparent;color:var(--muted);transform:none;box-shadow:none;
}
/* The list scrolls once it grows, so the header and "View all" stay in view.
   max-height also shrinks on short screens instead of running off the page. */
.notif-list{
  display:flex;flex-direction:column;gap:2px;
  max-height:min(430px,calc(100vh - 210px));
  overflow-y:auto;overscroll-behavior:contain;
  margin:-4px;padding:4px;                      /* keep hover backgrounds / focus rings visible */
  scrollbar-width:thin;scrollbar-color:var(--border-2) transparent;
}
.notif-list::-webkit-scrollbar{width:8px}
.notif-list::-webkit-scrollbar-track{background:transparent}
.notif-list::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:99px}
.notif-list::-webkit-scrollbar-thumb:hover{background:var(--accent-border)}

/* Notification categories: one colour token per category, shared by the badge and the filter sidebar */
.cat-task,
.cat-chat,
.cat-document,
.cat-server,
.cat-team{--cat:var(--info)}
.cat-project,
.cat-recruitment{--cat:var(--purple)}
.cat-complaint,
.cat-overtime{--cat:var(--warn)}
.cat-report,
.cat-leave,
.cat-expense,
.cat-payroll,
.cat-salary{--cat:var(--success)}
.cat-deduction{--cat:var(--danger)}
.cat-announcement{--cat:var(--accent)}
.cat-admin,
.cat-profile,
.cat-general{--cat:var(--muted)}

/* category badge shown on a notification row */
.notif-cat{
  display:inline-flex;align-items:center;gap:5px;margin-right:7px;vertical-align:middle;
  padding:2px 8px;border-radius:99px;
  font-size:9.5px;font-weight:750;letter-spacing:.45px;text-transform:uppercase;
  background:color-mix(in srgb,var(--cat,var(--muted)) 13%,transparent);color:var(--cat,var(--muted));
  white-space:nowrap;
}
.notif-cat i{font-size:9.5px}

/* mark-as-read control at the far right of a notification row (popover + notifications page) */
.notif-read-btn,
.notif-read-done{
  flex:none;align-self:center;
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;padding:0;border-radius:50%;
  font-size:12px;line-height:1;
}
.notif-read-btn{
  border:1px solid var(--border);background:var(--card);color:var(--muted);cursor:pointer;
  transition:background .15s,color .15s,border-color .15s,transform .15s;
}
.notif-read-btn:hover{border-color:var(--accent-border);background:var(--accent-soft);color:var(--accent);transform:translateY(-1px)}
.notif-read-btn:focus-visible{outline:none;box-shadow:0 0 0 4px var(--accent-ring)}
.notif-item.unread .notif-read-btn,
.notif-row.unread .notif-read-btn{border-color:var(--accent-border);color:var(--accent)}
.notif-read-btn.is-read,
.notif-read-done{
  border:1px solid transparent;cursor:default;
  background:color-mix(in srgb,var(--success) 13%,transparent);color:var(--success);
}

/* notifications page: category filter on the left, list on the right */
.notif-layout{display:grid;grid-template-columns:238px minmax(0,1fr);gap:22px;align-items:start}
.notif-side{position:sticky;top:86px}
.notif-cats{display:flex;flex-direction:column;gap:2px}
.notif-cat-link{
  display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;
  color:var(--text-2);font-size:13px;font-weight:600;text-decoration:none;
  transition:background .15s,color .15s;
}
.notif-cat-link i{flex:none;width:16px;text-align:center;font-size:13px;color:var(--cat,var(--muted))}
.notif-cat-link > span:first-of-type{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notif-cat-link .notif-cat-count{
  flex:none;padding:1px 8px;border-radius:99px;
  background:var(--bg-2);color:var(--muted);font-size:11.5px;font-weight:700;
}
.notif-cat-link:hover{background:var(--bg-2);color:var(--text)}
.notif-cat-link.active{background:var(--accent-soft);color:var(--accent)}
.notif-cat-link.active i{color:var(--accent)}
.notif-cat-link.active .notif-cat-count{background:var(--accent);color:var(--on-accent)}
@media (max-width:900px){
  .notif-layout{grid-template-columns:1fr}
  .notif-side{position:static}
}
.notif-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.notif-header-left{display:flex;align-items:center;gap:10px}
.notif-header-icon{font-size:20px;color:var(--accent)}
.notif-header-title{font-size:15px;font-weight:700;color:var(--text);margin:0;letter-spacing:-.01em}
.notif-header-right{margin-right:4px}
.notif-item{display:flex;align-items:stretch;gap:12px;padding:12px 14px;border-radius:12px;
  color:var(--text-2);font-size:13.5px;transition:background .15s,box-shadow .15s,border-color .15s}
.notif-item:hover{background:var(--bg-2);box-shadow:var(--shadow-xs)}
.notif-item.read{border:1px solid var(--border);background:var(--bg-2)}
.notif-item.unread{border-left:3px solid var(--accent);background:var(--accent-soft)}
.notif-icon{flex:none;width:36px;height:30px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--bg-2);color:var(--muted)}
.notif-icon.unread{background:var(--accent-soft);color:var(--accent)}
.notif-icon.read{background:rgba(22,163,74,.1);color:#16a34a}
.notif-icon i{font-size:15px}
.notif-content{flex:1;min-width:0}
.notif-title{font-size:14px;font-weight:650;color:var(--text);margin-bottom:3px;line-height:1.3}
.notif-body-text{font-size:12.5px;color:var(--muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.notif-meta{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);margin-top:6px}
.notif-meta .muted{font-size:11px;color:var(--muted)}
.notif-link{color:var(--accent);font-size:12px;font-weight:600;text-decoration:none;white-space:nowrap}
.notif-link:hover{text-decoration:underline}
.notif-mark-read{margin-top:6px;color:var(--accent);font-size:12px;font-weight:600;text-decoration:none;display:inline-block}
.notif-mark-read:hover{text-decoration:underline}
.btn-primary{background:var(--accent);color:#fff;border:none;padding:6px 12px;border-radius:8px;font-size:12.5px;font-weight:650;cursor:pointer;transition:background .15s,transform .15s}
.btn-primary:hover{background:var(--accent-600); color:var(--side-text) !important; transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--text-2);border:none;padding:6px 10px;border-radius:8px;font-size:12.5px;font-weight:650;cursor:pointer}
.btn-ghost:hover{background:var(--bg-2);color:var(--accent)}
/* notification page */
.notification-list{padding:0;display:flex;flex-direction:column;gap:18px}
.notif-group{margin-bottom:6px}
.notif-group-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.notif-group-head h4{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin:0}
.notif-count{background:var(--accent);color:#fff;font-size:11px;font-weight:700;border-radius:99px;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;padding:0 7px}
.notif-row{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:var(--card);transition:background .15s,border-color .15s,box-shadow .15s}
.notif-row:hover{border-color:var(--accent-border);box-shadow:var(--shadow-xs)}
.notif-row.unread{border-left:4px solid var(--accent)}
.notif-row.read{border-left:4px solid var(--border)}
.notif-icon-read{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--bg-2);color:var(--muted)}
.notif-icon-read i{font-size:16px}
.notif-icon-read.read{background:rgba(22,163,74,.1);color:#16a34a}
.notif-body{flex:1;min-width:0}
.notif-title{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:650;color:var(--text);margin-bottom:4px}
.notif-row.unread .notif-title{color:var(--text)}
.notif-body-text{font-size:13px;color:var(--muted);line-height:1.4;white-space:pre-line}
.notif-meta{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);margin-top:6px}
.notif-link{color:var(--accent);font-size:12.5px;font-weight:650;text-decoration:none}
.notif-link:hover{text-decoration:underline}
.notif-actions{display:flex;align-items:center;gap:8px}
.muted{color:var(--muted)}
/* ERP-style filter pills */
.filter-buttons{display:flex;gap:8px}
.filter-btn{padding:6px 14px;border-radius:99px;border:1px solid var(--border);background:var(--card);color:var(--text-2);font-size:12.5px;font-weight:650;cursor:pointer;text-decoration:none;transition:all .15s}
.filter-btn:hover{border-color:var(--accent-border);color:var(--accent)}
.filter-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}
/* mark all read in page header */
#markAllRead{padding:8px 16px;font-size:13.5px}
/* empty states */
.empty{padding:32px 16px;text-align:center;color:var(--muted);font-size:13.5px}

/* theme popover */
.swatches{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:13px}
.swatches.big{gap:12px;margin:16px 0 12px}
.swatch{
  width:30px;height:30px;border:none;border-radius:50%;cursor:pointer;position:relative;
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.16);
  transition:transform .22s var(--ease-spring),box-shadow .18s;
}
.swatches.big .swatch{width:38px;height:38px}
.swatch:hover{transform:scale(1.18)}
.swatch.active{
  transform:scale(1.1);
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.16),0 0 0 2px var(--card),0 0 0 4px var(--accent);
}
.custom-colour{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:550;
  color:var(--muted);cursor:pointer;margin-bottom:4px}
.custom-colour input{width:42px;height:33px;border-radius:10px;border:1px solid var(--border);
  background:var(--card);cursor:pointer;padding:3px;transition:border-color .15s}
.custom-colour input:hover{border-color:var(--accent)}
.custom-colour input::-webkit-color-swatch-wrapper{padding:0}
.custom-colour input::-webkit-color-swatch{border:none;border-radius:7px}

/* segmented mode toggle (iOS-style) */
.mode-toggle{display:flex;gap:4px;padding:4px;border-radius:12px;
  background:var(--bg-2);border:1px solid var(--border)}
.mode-toggle button{
  flex:1;padding:8px 10px;border:none;border-radius:9px;background:transparent;
  color:var(--muted);font-weight:650;font-size:12.5px;cursor:pointer;
  transition:background .18s,color .18s,box-shadow .18s;
}
.mode-toggle button:hover{color:var(--text)}
.mode-toggle button.on{background:var(--card);color:var(--accent);box-shadow:var(--shadow-sm)}

/* ============================================================
   7 · PAGE STRUCTURE · CARDS · STATS · LISTS
============================================================ */
/* staggered page-load reveal */
.content > *{animation:riseIn .42s var(--ease-out) both}
.content > *:nth-child(2){animation-delay:.05s}
.content > *:nth-child(3){animation-delay:.09s}
.content > *:nth-child(4){animation-delay:.13s}
.content > *:nth-child(5){animation-delay:.17s}
.content > *:nth-child(6){animation-delay:.21s}
.content > *:nth-child(7){animation-delay:.25s}
.content > *:nth-child(8){animation-delay:.29s}

.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:24px}
.page-head h1{font-size:25px;font-weight:800;letter-spacing:-.035em;line-height:1.15}
.page-head .sub{margin-top:4px;color:var(--muted);font-size:14px}

.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-xs);padding:22px;margin-bottom:22px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:16px}
.card-head h3{font-size:15px;font-weight:750;display:flex;align-items:center;gap:9px}
.card-head h3::before{content:'';width:3.5px;height:15px;border-radius:3px;flex:none;
  background:linear-gradient(180deg,var(--accent),var(--accent-600))}
.grid-2{display:grid;grid-template-columns:1.55fr 1fr;gap:22px;align-items:start}

/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:24px}
.stat-card{
  position:relative;overflow:hidden;
  display:flex;gap:14px;align-items:center;padding:18px;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-xs);
  transition:transform .22s var(--ease-out),box-shadow .22s,border-color .22s;
}
.stat-card::before{content:'';position:absolute;top:0;left:16px;right:16px;height:2px;
  border-radius:0 0 4px 4px;opacity:0;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);transition:opacity .25s}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--accent-border)}
.stat-card:hover::before{opacity:1}
.stat-ico{width:46px;height:46px;flex:none;border-radius:14px;font-size:21px;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft)}
.stat-card.danger .stat-ico{background:color-mix(in srgb,var(--danger) 11%,var(--card))}
.stat-card.warn   .stat-ico{background:color-mix(in srgb,var(--warn) 12%,var(--card))}
.stat-card.success .stat-ico{background:color-mix(in srgb,var(--success) 11%,var(--card))}
.stat-card.danger{border-color:color-mix(in srgb,var(--danger) 40%,var(--border))}
.stat-card.warn{border-color:color-mix(in srgb,var(--warn) 40%,var(--border))}
.stat-card.success{border-color:color-mix(in srgb,var(--success) 40%,var(--border))}
.stat-value{
  font-family:var(--font-display);font-size:25px;font-weight:800;line-height:1.05;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg,var(--text),var(--text-2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.stat-card.danger .stat-value{background:linear-gradient(135deg,var(--danger),color-mix(in srgb,var(--danger) 55%,var(--text)));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat-card.success .stat-value{background:linear-gradient(135deg,var(--success),color-mix(in srgb,var(--success) 55%,var(--text)));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat-label{font-size:11px;font-weight:650;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-top:2px}

/* rows / lists */
.list-item{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:11px 12px;border-radius:11px;color:var(--text);
  transition:background .16s,box-shadow .16s,padding-left .16s;
}
.list-item:hover{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent);padding-left:16px}
.list-item .right{display:flex;gap:10px;align-items:center;font-size:13px}
.list-item b{font-weight:650}
.empty{padding:30px 20px;text-align:center;color:var(--muted);font-size:13.5px;letter-spacing:.2px}
.prose{font-size:14.5px;line-height:1.7;color:var(--text-2)}
.prose p{margin-bottom:10px}
.prose p:last-child{margin-bottom:0}
.prose strong{font-weight:650;color:var(--text)}
.meta-list div{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:11px 2px;border-bottom:1px dashed var(--border);font-size:13.5px}
.meta-list div:last-child{border-bottom:none}
.meta-list span{color:var(--muted)}
.meta-list b{font-weight:650;text-align:right}
.divider{height:1px;background:var(--border);margin:20px 0}
.resolution-box{margin-top:16px;padding:14px 16px;font-size:13.5px;line-height:1.65;
  background:color-mix(in srgb,var(--success) 7%,var(--card));
  border:1px solid color-mix(in srgb,var(--success) 30%,var(--border));
  border-left:3px solid var(--success);border-radius:10px}
.cell-user{display:flex;align-items:center;gap:12px}
.cell-user b{font-weight:650}

/* ============================================================
   8 · BUTTONS
============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 18px;border-radius:11px;border:1px solid var(--border);
  background:var(--card);color:var(--text);cursor:pointer;
  font-size:13.5px;font-weight:650;line-height:1;white-space:nowrap;
  transition:transform .15s var(--ease-out),box-shadow .18s,background .18s,
             border-color .18s,color .18s,filter .18s;
}
.btn:active{transform:translateY(1px) scale(.98)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;filter:none}

.btn-primary{
  position:relative;overflow:hidden;border-color:transparent;
  background:linear-gradient(135deg,var(--accent),var(--accent-600));
  color:var(--on-accent);
  box-shadow:0 2px 6px var(--accent-glow),var(--shadow-xs);
}
.btn-primary::after{content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.25) 50%,transparent 60%);
  transform:translateX(-130%);transition:transform .65s var(--ease-out)}
.btn-primary:hover{transform:translateY(-1px);filter:brightness(1.05);
  box-shadow:0 6px 18px var(--accent-glow),var(--shadow-sm)}
.btn-primary:hover::after{transform:translateX(130%)}
.btn-primary:active{transform:translateY(0) scale(.98)}

.btn-ghost:hover{border-color:var(--accent-border);color:var(--accent);background:var(--accent-soft)}

.btn-danger{border-color:transparent;color:#fff;
  background:linear-gradient(135deg,var(--danger),color-mix(in srgb,var(--danger) 78%,#000));
  box-shadow:0 2px 6px color-mix(in srgb,var(--danger) 32%,transparent)}
.btn-danger:hover{transform:translateY(-1px);filter:brightness(1.05)}

.btn-sm{padding:7px 13px;font-size:12.5px;border-radius:9px;gap:6px}
.btn-block{width:100%}

/* ============================================================
   9 · BADGES & CHIPS
============================================================ */
.badge{
  position:relative;display:inline-flex;align-items:center;
  padding:3px 10px 3px 20px;border-radius:99px;
  font-size:11.5px;font-weight:700;line-height:1.45;letter-spacing:.2px;white-space:nowrap;
}
.badge::before{content:'';position:absolute;left:8px;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:currentColor;
  box-shadow:0 0 0 3px color-mix(in srgb,currentColor 18%,transparent)}
.b-gray  {background:color-mix(in srgb,var(--muted) 14%,transparent);color:var(--muted)}
.b-blue  {background:color-mix(in srgb,var(--info) 13%,transparent);color:var(--info)}
.b-green {background:color-mix(in srgb,var(--success) 13%,transparent);color:var(--success)}
.b-amber {background:color-mix(in srgb,var(--warn) 15%,transparent);color:var(--warn)}
.b-red   {background:color-mix(in srgb,var(--danger) 13%,transparent);color:var(--danger)}
.b-purple{background:color-mix(in srgb,var(--purple) 13%,transparent);color:var(--purple)}
.b-violet{background:var(--accent-soft-2);color:var(--accent)}

.chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chip{
  padding:6px 14px;border-radius:99px;border:1px solid var(--border);
  background:var(--card);color:var(--muted);
  font-size:12.5px;font-weight:600;cursor:pointer;
  transition:transform .18s var(--ease-spring),background .18s,color .18s,
             border-color .18s,box-shadow .18s;
}
.chip:hover{transform:translateY(-1px);border-color:var(--accent-border);color:var(--accent)}
.chip.active{
  background:linear-gradient(135deg,var(--accent),var(--accent-600));
  color:var(--on-accent);border-color:transparent;
  box-shadow:0 4px 14px var(--accent-glow);
}
.stage-chips{margin-bottom:18px}

/* ============================================================
   10 · TABLES
============================================================ */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:10px}
.table{width:100%;border-collapse:collapse}
.table th{
  text-align:left;padding:10px 14px;white-space:nowrap;
  font-size:10.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--border-2);
}
.table td{padding:13px 14px;border-bottom:1px solid var(--border);font-size:13.5px;vertical-align:middle}
.table tbody tr{transition:background .15s}
.table tbody tr:hover{background:var(--accent-soft)}
.table tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.table tbody tr:last-child td{border-bottom:none}
.table td b{font-weight:650}
tr[onclick]{cursor:pointer}

/* RBAC matrix */
.matrix td.center{text-align:center}
.matrix .module-row td{
  background:linear-gradient(90deg,var(--accent-soft-2),transparent);
  font-weight:800;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--accent);
}
.matrix input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;
  width:20px;height:20px;border-radius:7px;border:1.5px solid var(--border-2);
  background:var(--card);cursor:pointer;vertical-align:middle;
  transition:background .15s,border-color .15s,box-shadow .15s,transform .1s;
}
.matrix input[type="checkbox"]:hover{border-color:var(--accent)}
.matrix input[type="checkbox"]:active{transform:scale(.88)}
.matrix input[type="checkbox"]:checked{
  border-color:transparent;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"),
    linear-gradient(135deg,var(--accent),var(--accent-600));
  background-size:12px 12px,100% 100%;
  background-position:center;background-repeat:no-repeat;
  box-shadow:0 2px 8px var(--accent-glow);
}

/* ============================================================
   11 · FORMS
============================================================ */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.form-grid .field{margin-bottom:0}
.span-2{grid-column:span 2}
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;font-weight:650;color:var(--muted);
  margin-bottom:6px;letter-spacing:.1px}

.input-wrapper{
  position:relative;display:flex;align-items:center;
}
.input-wrapper .input-icon{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  color:var(--muted);font-size:15px;pointer-events:none;
  transition:color .15s;
}
.input-wrapper .input-toggle{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border:none;background:transparent;
  color:var(--muted);cursor:pointer;border-radius:8px;
  transition:color .15s,background .15s;
}
.input-wrapper .input-toggle:hover{color:var(--accent);background:var(--accent-soft)}
.input-wrapper .input-toggle .icon-eye-slash{display:none}
.input-wrapper .input-toggle[aria-expanded="true"] .icon-eye{display:none}
.input-wrapper .input-toggle[aria-expanded="true"] .icon-eye-slash{display:inline-block}

.input{
  width:100%;padding:10px 48px 10px 44px;border-radius:11px;
  border:1px solid var(--border);background:var(--bg-2);color:var(--text);
  font-size:14px;line-height:1.45;
  transition:border-color .16s,box-shadow .16s,background .16s;
}
.input:hover{border-color:var(--border-2)}
.input:focus{outline:none;border-color:var(--accent);background:var(--card);
  box-shadow:0 0 0 4px var(--accent-ring)}
.input:disabled{opacity:.55;cursor:not-allowed}
.input::placeholder{color:var(--muted)}
textarea.input{resize:vertical;line-height:1.6}
.input.code{font-family:var(--font-mono);font-size:13px}
.input-sm{max-width:240px;padding:7px 11px;font-size:13px;border-radius:9px}

/* custom select arrow */
select.input{
  appearance:none;-webkit-appearance:none;padding-right:36px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%238b96ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;
}
select.input option{background:var(--card);color:var(--text)}

/* file input → dropzone feel */
.input[type=file]{padding:8px;cursor:pointer;border-style:dashed;background:var(--card)}
.input[type=file]::file-selector-button{
  font:inherit;font-weight:650;font-size:12.5px;
  color:var(--accent);background:var(--accent-soft-2);
  border:none;border-radius:8px;padding:7px 13px;margin-right:12px;cursor:pointer;
  transition:background .15s,color .15s;
}
.input[type=file]::file-selector-button:hover{background:var(--accent);color:var(--on-accent)}

.form-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:10px}

/* ============================================================
   Searchable Select
============================================================ */
.search-select{position:relative;width:100%}
/* While the menu is open, keep this control above its sibling fields. */
.search-select.open{z-index:100}
.search-select-trigger{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;padding:10px 13px;border-radius:11px;
  border:1px solid var(--border);background:var(--bg-2);color:var(--text);
  font-size:14px;line-height:1.45;cursor:pointer;
  transition:border-color .16s,box-shadow .16s,background .16s;
}
.search-select-trigger:hover{border-color:var(--border-2)}
.search-select-trigger:focus,.search-select.open .search-select-trigger{
  outline:none;border-color:var(--accent);background:var(--card);
  box-shadow:0 0 0 4px var(--accent-ring)}
.search-select-trigger .search-select-label{display:flex;align-items:center;gap:7px;min-width:0;overflow:hidden;white-space:nowrap}
.search-select-trigger .search-select-label.blank{color:var(--muted)}
.search-select-trigger i{font-size:12px;color:var(--muted);transition:transform .2s}
.search-select.open .search-select-trigger i{transform:rotate(180deg)}
.search-select-dropdown{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:100;
  background:var(--card);border:1px solid var(--border);border-radius:11px;
  box-shadow:var(--shadow-lg);overflow:hidden;display:none;
}
.search-select.open .search-select-dropdown{display:block;animation:popIn .2s var(--ease-spring)}
/* The host panel (card / filter bar / bulk bar) becomes its own stacking context
   when it carries a page-load transform. Lift it above the sibling panels that
   follow it (e.g. the results table card) while one of its menus is open, so the
   option list is never covered. z-index stays below the sticky topbar (30),
   sidebar (50) and popovers (60). */
.content > *:has(.search-select.open),
.card:has(.search-select.open){position:relative;z-index:10}
.search-select-search{
  width:100%;padding:10px 13px;border:none;border-bottom:1px solid var(--border);
  background:var(--bg-2);color:var(--text);font-size:13.5px;outline:none;
}
.search-select-options{max-height:260px;overflow-y:auto;padding:6px}
.search-select-option{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;border-radius:8px;
  background:none;border:none;color:var(--text);font-size:13.5px;
  text-align:left;cursor:pointer;transition:background .12s
}
.search-select-option:hover{background:var(--accent-soft);color:var(--accent)}
.search-select-option[data-selected]{background:var(--accent-soft);color:var(--accent)}
.search-select-empty{padding:14px;text-align:center;color:var(--muted);font-size:13px}
.search-select[data-required] .search-select-trigger:focus,
.search-select[data-required]:has(.search-select-trigger:focus) .search-select-trigger{border-color:var(--accent)}

/* designation tags (search-select + member checklist) */
.ss-tag,.ci-tag{
  display:inline-flex;align-items:center;min-width:0;max-width:100%;
  padding:2.5px 8px;border-radius:99px;
  font-size:10px;font-weight:750;letter-spacing:.4px;text-transform:uppercase;
  background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ss-name{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis}
/* in an option row the name takes the free space so the badges sit on the right */
.search-select-option .ss-name{flex:1}
/* muted trailing chip — on-hand quantity, department, … */
.ss-meta{
  flex:none;font-size:10.5px;font-weight:600;color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.search-select-option:hover .ss-tag,
.search-select-option[data-selected] .ss-tag{background:color-mix(in srgb,var(--accent) 22%,transparent)}
.search-select-option:hover .ss-meta,
.search-select-option[data-selected] .ss-meta{color:inherit}

/* ============================================================
   12 · COMMENTS & TIMELINE
============================================================ */
.comment{display:flex;gap:12px;padding:14px 0;border-bottom:1px dashed var(--border)}
.comment:last-of-type{border-bottom:none}
.comment > div{
  flex:1;min-width:0;padding:10px 14px;
  background:var(--card-2);border:1px solid var(--border);
  border-radius:4px 14px 14px 14px;   /* chat-bubble tail corner */
}
.comment-meta{font-size:12px;color:var(--muted);margin-bottom:4px}
.comment-meta b{color:var(--text);font-weight:650}

/* threaded comment replies */
.comment-thread{margin-bottom:14px}
.comment-body{flex:1;min-width:0;padding:10px 14px;
  background:var(--card-2);border:1px solid var(--border);
  border-radius:4px 14px 14px 14px;
}
.comment-reply-btn{margin-top:8px;background:none;border:none;padding:0;
  color:var(--accent);font-size:12px;font-weight:650;cursor:pointer;
}
.comment-reply-btn:hover{text-decoration:underline}
.comment-reply-form{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.comment-reply-form .input{width:100%;font-size:13px;padding:8px 10px}
.comment-reply-form .reply-actions{display:flex;gap:8px;align-items:center}
.comment-replies{margin-top:12px;padding-left:16px;border-left:2px solid var(--border)}
.comment-replies .comment{padding:8px 0;border-bottom:none}
.comment-replies .comment:last-child{padding-bottom:0}
.comment-replies .comment-body{background:var(--card);border-color:var(--border-2)}
.comment-reply-form[hidden]{display:none}
/* @mention inline chips + autocomplete */
.mention{color:var(--accent);font-weight:650;background:var(--accent-soft);
  padding:1px 6px;border-radius:6px;white-space:nowrap}
.mention-dropdown{position:absolute;z-index:200;background:var(--card);
  border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);
  min-width:250px;max-width:330px;overflow:hidden;padding:6px;
  max-height:260px;overflow-y:auto}
.mention-dropdown[hidden]{display:none}
.mention-option{display:flex;align-items:center;gap:10px;width:100%;
  padding:7px 9px;border:none;background:none;border-radius:8px;
  cursor:pointer;text-align:left;font-size:13.5px;color:var(--text);
  font-family:inherit;transition:background .12s}
.mention-option:hover,.mention-option.active{background:var(--accent-soft);color:var(--accent)}
.mention-option .avatar{width:28px;height:28px;font-size:10.5px;border-radius:9px;flex:none}
.mention-option b{font-weight:650;display:block}
.mention-option small{display:block;color:var(--muted);font-size:11px}
.mention-empty{padding:10px 12px;color:var(--muted);font-size:12.5px}

/* comment attachments (thumbnails + file chips) */
.attachments{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.attach-thumbs{display:flex;flex-wrap:wrap;gap:8px}
.attach-thumb{
  display:block;width:104px;height:104px;border-radius:12px;overflow:hidden;
  border:1px solid var(--border);background:var(--bg-2);
  transition:transform .18s var(--ease-spring),border-color .18s;
}
.attach-thumb:hover{transform:translateY(-2px);border-color:var(--accent-border)}
.attach-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.attach-files{display:flex;flex-direction:column;gap:6px}
.attach-file{
  display:flex;align-items:center;gap:9px;max-width:100%;padding:7px 10px;
  border:1px solid var(--border);border-radius:10px;background:var(--card);
  font-size:12.5px;color:var(--text);text-decoration:none;
  transition:border-color .15s,background .15s;
}
.attach-file:hover{border-color:var(--accent-border);background:var(--accent-soft)}
.attach-file i:first-child{font-size:16px;flex:none}
.attach-name{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attach-size{flex:none;color:var(--muted);font-size:11.5px}
.attach-dl{margin-left:auto;flex:none;color:var(--muted)}
.attach-file:hover .attach-dl{color:var(--accent)}

/* comment attachment picker */
.attach-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.attach-pick{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  padding:6px 12px;border-radius:99px;border:1px dashed var(--border-2);
  background:var(--bg-2);color:var(--muted);font-size:12.5px;font-weight:650;
  transition:border-color .15s,color .15s,background .15s;
}
.attach-pick:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.attach-hint{font-size:8px;color:var(--muted)}
.attach-picked{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.attach-picked[hidden]{display:none}
.attach-chip{
  display:inline-flex;align-items:center;gap:7px;max-width:100%;
  padding:4px 6px 4px 11px;border-radius:99px;
  background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:650;
}
.attach-chip-name{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attach-chip-size{color:var(--muted);font-weight:600;font-size:11px;white-space:nowrap}
.attach-chip-x{
  display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:17px;padding:0;border:none;border-radius:50%;cursor:pointer;
  background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--accent);
  font-size:12px;line-height:1;
}
.attach-chip-x:hover{background:var(--accent);color:var(--on-accent)}
.attach-chip.too-big{background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--danger)}
.attach-chip.too-big .attach-chip-size{color:var(--danger)}
.attach-chip.too-big .attach-chip-x{background:color-mix(in srgb,var(--danger) 22%,transparent);color:var(--danger)}
.timeline{margin-top:18px}
.tl-item{
  position:relative;padding:14px 16px;margin-bottom:12px;
  background:var(--accent-soft);border-radius:0 12px 12px 0;
  transition:background .18s,transform .18s;
}
.tl-item::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--accent),var(--accent-600))}
.tl-item:hover{background:var(--accent-soft-2);transform:translateX(3px)}
.tl-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.tl-head b{font-weight:650;font-size:13.5px}
.stars{color:#f4b740;letter-spacing:2px;font-size:13px}
.note-form{padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--border)}

/* ============================================================
   13 · SERVERS
============================================================ */
.server-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px;margin-bottom:22px}
.server-card{
  transition:transform .22s var(--ease-out),box-shadow .22s,border-color .22s;
}
.server-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.server-card.is-down{
  border-color:color-mix(in srgb,var(--danger) 50%,var(--border));
  background:color-mix(in srgb,var(--danger) 4%,var(--card));
}
.server-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.server-top b{font-weight:650}
.server-host{
  display:inline-block;margin:8px 0;padding:3px 9px;border-radius:7px;
  font-family:var(--font-mono);font-size:12.5px;color:var(--text-2);
  background:var(--bg-2);border:1px solid var(--border);
}
.server-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.server-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;
  flex-wrap:wrap;margin-top:14px;font-size:12px}

.dot{width:11px;height:11px;border-radius:50%;display:inline-block;flex:none}
.dot.up{background:var(--success);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--success) 22%,transparent)}
.dot.down{background:var(--danger);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--danger) 25%,transparent);
  animation:dotPulse 1.6s ease-in-out infinite}
.dot.unknown{background:var(--muted)}

/* ============================================================
   14 · RECRUITMENT
============================================================ */
.cand-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(295px,1fr));gap:16px}
.cand-card{transition:transform .22s var(--ease-out),box-shadow .22s,border-color .22s}
.cand-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--accent-border)}
.cand-top{display:flex;gap:13px;margin-bottom:13px}
.cand-top b{font-size:15px;display:block}
.cand-top .muted{font-size:12.5px;margin-bottom:4px}
.cand-top .badge{margin:0 5px 0 0}
.cand-meta{display:flex;gap:13px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-bottom:15px}
.cand-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.preview-frame{width:100%;height:540px;border:1px solid var(--border);border-radius:14px;
  margin-top:18px;background:#fff;box-shadow:var(--shadow-sm)}

/* ============================================================
   15 · AUTH / LOGIN
============================================================ */
.auth-body{
  position:relative;overflow:hidden;min-height:100vh;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:linear-gradient(140deg,var(--accent) 0%,#1a1f3d 55%,#0b0f1e 100%);
}
/* floating ambient orbs */
.auth-body::before,.auth-body::after{
  content:'';position:absolute;border-radius:50%;pointer-events:none;
  filter:blur(70px);opacity:.5;
}
.auth-body::before{width:430px;height:430px;top:-130px;left:-110px;background:var(--accent);
  animation:drift 14s ease-in-out infinite alternate}
.auth-body::after{width:380px;height:380px;bottom:-150px;right:-90px;background:var(--purple);
  animation:drift 18s ease-in-out infinite alternate-reverse}

.auth-card{
  position:relative;z-index:1;overflow:hidden;
  width:100%;max-width:430px;padding:42px 40px;
  background:var(--card);border-radius:22px;
  box-shadow:0 40px 100px -20px rgba(8,12,30,.55);
  animation:riseIn .55s var(--ease-spring) both;
}
/* animated brand strip along the top edge */
.auth-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--accent),var(--purple),var(--accent));
  background-size:200% 100%;animation:shimmer 6s linear infinite}
.login-brand{display:flex;justify-content:center;margin-bottom:18px}
.auth-card h1{font-size:22px;font-weight:800;text-align:center;margin-bottom:6px;letter-spacing:-.03em}
.login-sub{text-align:center;color:var(--muted);font-size:13.5px;margin-bottom:26px}
.login-foot{margin-top:22px;padding-top:16px;text-align:center;color:var(--muted);
  font-size:11.5px;border-top:1px solid var(--border)}

/* ============================================================
   16 · TOASTS
============================================================ */
.toasts{position:fixed;bottom:24px;right:24px;z-index:120;
  display:flex;flex-direction:column;gap:10px}
.toast{
  position:relative;overflow:hidden;max-width:380px;
  padding:14px 18px 14px 22px;border-radius:13px;
  background:var(--card);border:1px solid var(--border);
  box-shadow:var(--shadow-lg);color:var(--text);
  font-weight:600;font-size:13.5px;line-height:1.45;
  animation:toastIn .45s var(--ease-spring);
  transition:opacity .3s,transform .3s;
}
.toast::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--accent),var(--accent-600))}
.toast-success::before{background:linear-gradient(180deg,var(--success),color-mix(in srgb,var(--success) 60%,#000))}
.toast-error::before{background:linear-gradient(180deg,var(--danger),color-mix(in srgb,var(--danger) 60%,#000))}
.toast-info::before{background:linear-gradient(180deg,var(--accent),var(--accent-600))}
.toast-warning::before{background:linear-gradient(180deg,var(--warn),color-mix(in srgb,var(--warn) 60%,#000))}

/* ============================================================
   Custom dialogs (replaces native alert / confirm)
============================================================ */
.dialog-overlay{
  position:fixed;inset:0;z-index:1200;
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(8,12,24,.55);backdrop-filter:blur(4px);
  animation:fadeIn .16s ease;
}
.dialog-overlay[hidden]{display:none!important}
.dialog{
  width:100%;max-width:415px;padding:26px 24px 22px;text-align:center;
  background:var(--card);border:1px solid var(--border);border-radius:18px;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
  animation:popIn .22s var(--ease-spring);
}
.dialog-icon{
  width:52px;height:52px;margin:0 auto;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:800;line-height:1;
  background:color-mix(in srgb,var(--danger) 13%,transparent);color:var(--danger);
}
.dialog.info .dialog-icon{background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent)}
.dialog-title{font-size:16.5px;font-weight:780;margin:12px 0 6px;color:var(--text)}
.dialog-body{font-size:13.8px;line-height:1.6;color:var(--text-2);margin:0 0 20px}
.dialog-body[hidden]{display:none}
.dialog-input{width:100%;padding:10px 14px;text-align:left;margin:0 0 18px}
.dialog-input[hidden]{display:none!important}
.dialog-actions{display:flex;gap:10px;justify-content:center}
.dialog-actions .btn{min-width:125px;justify-content:center}
body.dialog-open{overflow:hidden}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ============================================================
   17 · UTILITIES
============================================================ */
.hidden{display:none!important}
.muted{color:var(--muted)}
.text-danger{color:var(--danger);font-weight:600}
.font-600{font-weight:600}

/* ============================================================
   Pagination
============================================================ */
.pagination{display:flex;justify-content:center;align-items:center;margin:16px 0}
.pagination-links{display:flex;align-items:center;gap:4px}
.pagination-link{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;height:36px;padding:0 10px;border-radius:8px;
  border:1px solid var(--border);background:var(--card);color:var(--text);
  font-size:13.5px;font-weight:550;text-decoration:none;
  transition:border-color .15s,background .15s,color .15s,box-shadow .15s;
}
.pagination-link:hover:not(.disabled){border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.pagination-link.active{border-color:transparent;background:var(--accent);color:var(--on-accent);box-shadow:0 2px 6px var(--accent-glow)}
.pagination-link.disabled{opacity:.4;pointer-events:none;cursor:not-allowed}
.pagination-ellipsis{color:var(--muted);padding:0 4px}

.pagination-per-page{display:flex;align-items:center;gap:8px}
.pagination-per-page label{font-size:12.5px;font-weight:650;color:var(--muted);white-space:nowrap}
.pagination-per-page .input-sm{width:auto;min-width:80px}

/* table header with pagination controls */
.table-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.table-pagination .pagination-per-page{margin:0}

/* ============================================================
   Projects
============================================================ */
.progress{
  height:7px;border-radius:99px;overflow:hidden;margin-bottom:5px;
  background:color-mix(in srgb,var(--accent) 10%,var(--border));
}
.progress-fill{
  height:100%;border-radius:99px;transition:width .4s ease;
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 55%,var(--purple)));
}

.detail-list{display:flex;flex-direction:column;margin:0}
.detail-list dt{font-size:11px;font-weight:750;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-top:13px}
.detail-list dt:first-child{margin-top:0}
.detail-list dd{margin:4px 0 0;font-size:14px;font-weight:550;line-height:1.6}

.member-list{display:flex;flex-direction:column;gap:2px;margin-bottom:12px}
.member-row{display:flex;align-items:center;gap:10px;padding:7px 6px;border-radius:10px}
.member-row:hover{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.member-row form{margin:0}
.member-info{display:flex;flex-direction:column;flex:1;min-width:0}
.member-info b{font-size:13.5px}
.member-info span{font-size:12px}
.member-add{display:flex;gap:8px;align-items:center}
.member-add .input-sm{min-width:0;width:auto}

.member-checks{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:6px;
  max-height:225px;overflow:auto;padding:2px;
}
.field .check-item,
.member-checks .check-item{
  display:flex;align-items:center;gap:9px;width:100%;padding:6px 10px;margin:0;cursor:pointer;
  font-size:13px;font-weight:inherit;letter-spacing:normal;color:var(--text);
  border:1px solid var(--border);border-radius:9px;background:var(--card);
  transition:border-color .15s,background .15s,box-shadow .15s;
}
.field .check-item:hover,
.member-checks .check-item:hover{border-color:var(--accent);box-shadow:0 2px 8px var(--accent-glow)}
.field .check-item:has(input:checked),
.member-checks .check-item:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.field .check-item input,
.member-checks .check-item input{width:auto;margin:0}
.ci-body{display:flex;flex-direction:column;align-items:flex-start;gap:3px;flex:1;min-width:0}
.ci-name{font-size:13px;font-weight:600;color:var(--text)}
.ci-tag{flex:none}
.ci-hint{font-size:11.5px;line-height:1.35;color:var(--muted);white-space:normal}

/* multi-select checklist -> removable chips (task assignees, project members) */
.pick-chips{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  min-height:42px;padding:8px 10px;margin-bottom:8px;
  border:1px dashed var(--border-2);border-radius:11px;background:var(--bg-2);
}
.pick-chips .pick-empty{font-size:12.5px;color:var(--muted)}
.pick-chip{
  display:inline-flex;align-items:center;gap:6px;max-width:100%;
  padding:4px 6px 4px 11px;border-radius:99px;
  background:var(--accent-soft);color:var(--accent);
  font-size:12px;font-weight:650;
}
.pick-chip-x{
  display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:17px;padding:0;border:none;border-radius:50%;cursor:pointer;
  background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--accent);
  font-size:12px;line-height:1;
}
.pick-chip-x:hover{background:var(--accent);color:var(--on-accent)}
.pick-search{width:100%;max-width:none;margin-bottom:8px}
.member-add-block{display:flex;flex-direction:column;gap:8px}
.member-add-block .member-checks{max-height:200px}

/* ---------- Report request: grouped recipient picker + brief cards ---------- */
.pick-panel{
  display:flex;flex-direction:column;gap:9px;
  padding:12px;border:1px solid var(--border);border-radius:14px;background:var(--card-2);
}
.pick-panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pick-panel-title{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:750;color:var(--text-2)}
.pick-panel-title i{color:var(--accent)}
.pick-panel-count{font-size:11px;font-weight:700;color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-border);padding:2px 9px;border-radius:99px;white-space:nowrap}
.pick-panel .pick-chips{margin-bottom:0;background:var(--card);border-style:solid}
.pick-panel .pick-search{margin-bottom:0}
.pick-panel .member-checks{max-height:212px}

/* "Global" switch inside a pick panel — assign to every active employee */
.global-check{
  display:flex;align-items:center;gap:9px;cursor:pointer;
  padding:9px 12px;border:1px dashed var(--accent-border);border-radius:11px;
  background:var(--accent-soft);transition:.15s;
}
.global-check:hover{border-style:solid}
.global-check:has(input:checked){border-style:solid;background:var(--accent-soft-2);box-shadow:0 2px 10px var(--accent-glow)}
.global-check input{width:auto;margin:0;flex:none}
.gc-body{display:flex;flex-direction:column;gap:1px;min-width:0}
.gc-name{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:750;color:var(--text)}
.gc-name i{color:var(--accent)}
.gc-tag{font-size:11.5px;color:var(--muted)}
.pick-panel.is-global .member-checks,
.pick-panel.is-global .pick-search{opacity:.4}
.pick-panel.is-global .pick-search{cursor:not-allowed}

/* Inline rename form on a library card */
.doc-rename{
  display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap;
  margin:0 0 12px;padding:11px 12px;
  border:1px dashed var(--accent-border);border-radius:12px;background:var(--accent-soft);
}
.doc-rename .field{margin:0}
.doc-rename .field label{font-size:11px;font-weight:750;letter-spacing:.4px;text-transform:uppercase;color:var(--muted)}
.doc-rename .input{background:var(--card)}
.doc-rename[hidden]{display:none}   /* author display beats the UA [hidden] rule */

.rpt-sent{margin-top:16px;padding-top:14px;border-top:1px dashed var(--border)}
.rpt-sent-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.rpt-sent-title{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:750;color:var(--text-2)}
.rpt-sent-title i{color:var(--success)}
.rpt-sent-count{font-size:11px;font-weight:700;color:var(--muted);background:var(--card-2);border:1px solid var(--border);padding:1px 8px;border-radius:99px}
.rpt-badges{display:flex;flex-wrap:wrap;gap:8px}
.rpt-badge{position:relative}
.rpt-badge-main{
  display:inline-flex;align-items:center;gap:8px;padding:5px 11px 5px 6px;
  border:1px solid var(--border);border-radius:99px;background:var(--card);cursor:pointer;
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.rpt-badge-main:hover{border-color:var(--accent-border);box-shadow:0 6px 16px var(--accent-glow);transform:translateY(-1px)}
.rpt-badge-txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;min-width:0}
.rpt-badge-txt b{font-size:12.5px;font-weight:700;color:var(--text)}
.rpt-badge-txt em{font-style:normal;font-size:9.5px;font-weight:750;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.rpt-dot{width:8px;height:8px;border-radius:50%;flex:none}
.rpt-dot.pending{background:var(--warn);box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 20%,transparent)}
.rpt-dot.done{background:var(--success);box-shadow:0 0 0 3px color-mix(in srgb,var(--success) 20%,transparent)}

/* the animated brief card */
.rpt-pop{
  position:absolute;left:0;top:calc(100% + 8px);z-index:60;width:300px;max-width:calc(100vw - 40px);
  padding:14px;background:var(--card);border:1px solid var(--border);border-radius:14px;
  box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-6px) scale(.97);transform-origin:top left;
  transition:opacity .18s var(--ease-out),transform .18s var(--ease-spring),visibility .18s;
}
.pop-badge.open .rpt-pop{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.rpt-badge .rpt-pop{left:auto;right:0;transform-origin:top right}
.rpt-pop-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:9px}
.rpt-pop-ico{display:grid;place-items:center;width:32px;height:32px;flex:0 0 32px;border-radius:10px;background:var(--accent-soft);color:var(--accent);font-size:13px}
.rpt-pop-title{display:flex;flex-direction:column;gap:3px;min-width:0}
.rpt-pop-title b{font-size:13px;font-weight:750;color:var(--text);line-height:1.3}
.rpt-pop-title span{font-size:11.5px;color:var(--muted)}
.rpt-pop-brief{margin:0 0 10px;font-size:12px;line-height:1.5;color:var(--text-2)}
.rpt-pop-meta{display:flex;flex-direction:column;gap:4px;margin-bottom:10px;font-size:11.5px;color:var(--muted)}
.rpt-pop-meta i{width:14px;color:var(--accent)}
.rpt-pop-actions{display:flex;flex-wrap:wrap;gap:8px}
.rpt-pop-link{
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:9px;text-decoration:none;
  font-size:12px;font-weight:700;color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-border);
  transition:background .15s,color .15s;
}
.rpt-pop-link:hover{background:var(--accent);color:var(--on-accent)}
.rpt-pop-link.ghost{background:transparent;border-color:var(--border);color:var(--text-2)}
.rpt-pop-link.ghost:hover{background:var(--card-2);color:var(--text)}

/* a selection chip can carry a brief card too */
.pick-chip.pop-badge{position:relative}
.pick-chip-label{cursor:default}
.pick-chip.pop-badge .rpt-pop{width:288px}

/* keep an open brief card above the panels that follow its card */
.card:has(.pop-badge.open),
.content > *:has(.pop-badge.open){position:relative;z-index:10}

.avatar.xs{width:20px;height:20px;font-size:9px;border-radius:7px}
.assignee-stack{display:flex;flex-wrap:wrap;gap:7px;font-weight:600}
.assignee-pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600}

/* async pagination loading state */
.pagination-loading{opacity:.6;pointer-events:none}
.pagination-loading .table-wrap{position:relative}
.pagination-loading .table-wrap::after{
  content:'';position:absolute;inset:0;background:rgba(255,255,255,.7);
  display:flex;align-items:center;justify-content:center;z-index:10
}
.pagination-loading .table-wrap::before{
  content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:24px;height:24px;border:3px solid var(--border);
  border-top-color:var(--accent);border-radius:50%;
  animation:spin 1s linear infinite;z-index:11
}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* ============================================================
   17b · DASHBOARD MODULES (main · admin · hr)
============================================================ */
.db-hero{
  position:relative;overflow:hidden;border-radius:20px;padding:26px 30px;margin-bottom:24px;
  background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 92%,#0b0f1e),color-mix(in srgb,var(--accent) 58%,var(--side-1)));
  box-shadow:0 12px 34px var(--accent-glow),var(--shadow-sm);
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.db-hero::before,.db-hero::after{content:'';position:absolute;border-radius:50%;pointer-events:none}
.db-hero::before{width:260px;height:260px;top:-120px;right:-60px;
  background:radial-gradient(circle,rgba(255,255,255,.22),transparent 70%)}
.db-hero::after{width:200px;height:200px;bottom:-110px;left:34%;opacity:.5;
  background:radial-gradient(circle,rgba(255,255,255,.14),transparent 70%)}
.db-hero-left{position:relative;z-index:1;display:flex;align-items:center;gap:16px;min-width:0}
.db-hero-ico{
  width:56px;height:56px;flex:none;border-radius:16px;display:flex;align-items:center;justify-content:center;
  font-size:24px;color:rgba(255,255,255,.95);
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
.db-hero h1{color:#fff;font-size:24px;font-weight:800;letter-spacing:-.035em;line-height:1.15}
.db-hero .sub{color:rgba(255,255,255,.82);font-size:13.5px;margin-top:4px}
.db-live{
  margin-top:10px;display:inline-flex;align-items:center;gap:7px;
  font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#fff;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);border-radius:99px;padding:4px 10px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.db-live::before{content:'';width:7px;height:7px;border-radius:50%;background:#4ade80;
  box-shadow:0 0 0 3px rgba(74,222,128,.35);animation:dbPulse 2s ease-in-out infinite}
@keyframes dbPulse{0%,100%{opacity:1}50%{opacity:.45}}
.db-hero-actions{position:relative;z-index:1;display:flex;gap:10px;flex-wrap:wrap}
.db-hero-actions .btn{
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff;
  box-shadow:none;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.db-hero-actions .btn:hover{background:rgba(255,255,255,.24);transform:translateY(-1px);color:#fff}
.db-hero-actions .btn-primary{background:rgba(255,255,255,.95);border-color:transparent;color:var(--side-1)}
.db-hero-actions .btn-primary:hover{background:#fff;color:var(--side-1)}

.db-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px;margin-bottom:20px}
.db-kpi{
  --kpi-c:var(--accent);
  position:relative;overflow:hidden;padding:18px 18px 16px;border-radius:18px;
  background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow-xs);
  display:flex;align-items:center;gap:15px;
  transition:transform .25s var(--ease-out),box-shadow .25s,border-color .25s;
}
.db-kpi::after{content:'';position:absolute;top:-46px;right:-46px;width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle,var(--kpi-c),transparent 70%);opacity:.14;
  transition:opacity .25s,transform .45s var(--ease-spring)}
.db-kpi:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--kpi-c) 42%,var(--border))}
.db-kpi:hover::after{opacity:.3;transform:scale(1.2)}
.db-kpi-ico{
  width:50px;height:50px;flex:none;border-radius:14px;display:flex;align-items:center;justify-content:center;
  font-size:21px;color:#fff;
  background:linear-gradient(135deg,var(--kpi-c),color-mix(in srgb,var(--kpi-c) 62%,#0b0f1e));
  box-shadow:0 8px 20px color-mix(in srgb,var(--kpi-c) 34%,transparent);
  transition:transform .25s var(--ease-spring);
}
.db-kpi:hover .db-kpi-ico{transform:scale(1.08) rotate(-5deg)}
.db-kpi-info{min-width:0}
.db-kpi-value{
  font-family:var(--font-display);font-size:25px;font-weight:800;line-height:1.05;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.db-kpi.danger .db-kpi-value{background:linear-gradient(135deg,var(--danger),color-mix(in srgb,var(--danger) 55%,var(--text)));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.db-kpi.success .db-kpi-value{background:linear-gradient(135deg,var(--success),color-mix(in srgb,var(--success) 55%,var(--text)));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.db-kpi-label{font-size:11.5px;font-weight:650;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin-top:5px}
.db-kpi-delta{margin-top:2px;font-size:11.5px;font-weight:650;color:var(--kpi-c)}

.db-split,.db-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;align-items:start}
.db-card{
  background:var(--card);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-xs);
  padding:22px;position:relative;overflow:hidden;
  transition:box-shadow .25s,border-color .25s;
}
.db-card:hover{box-shadow:var(--shadow-sm);border-color:var(--border-2)}
.db-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.db-card-title{font-family:var(--font-display);font-size:15px;font-weight:750;color:var(--text);display:flex;align-items:center;gap:9px;letter-spacing:-.01em}
.db-card-title i{color:var(--accent);font-size:15px}
.db-more{
  display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:650;color:var(--accent);
  text-decoration:none;transition:gap .2s;
}
.db-more:hover{color:var(--accent-600);gap:9px}

.db-list{display:flex;flex-direction:column}
.db-list-item{
  position:relative;display:flex;align-items:center;gap:12px;
  padding:12px;border-radius:12px;color:var(--text);text-decoration:none;
  transition:background .16s,box-shadow .16s,padding-left .16s;
}
.db-list-item + .db-list-item{border-top:1px solid var(--border)}
.db-list-item:hover{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent);padding-left:15px}
.db-list-item.unread{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
.db-list-av{
  width:38px;height:38px;flex:none;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:15px;color:var(--accent);background:var(--accent-soft-2);
}
.db-list-item.unread .db-list-av{background:var(--accent);color:var(--on-accent)}
.db-list-main{flex:1;min-width:0}
.db-list-main b{font-weight:650;font-size:13.5px;display:block;color:var(--text)}
.db-list-main span{font-size:12.5px;color:var(--muted);display:block;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.db-list-time{font-size:11.5px;color:var(--muted)}
.db-list-right{display:flex;align-items:center;gap:8px;flex:none;flex-wrap:wrap;font-size:13px}

.db-chip{
  display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;
  font-size:11.5px;font-weight:700;white-space:nowrap;
  color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);
}
.db-chip::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}

.db-feed{display:flex;flex-direction:column}
.db-feed-item{
  position:relative;display:flex;align-items:center;gap:12px;padding:13px 12px;border-radius:12px;
  color:var(--text);text-decoration:none;transition:background .16s,padding-left .16s;
}
.db-feed-item + .db-feed-item{border-top:1px solid var(--border)}
.db-feed-item:hover{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent);padding-left:15px}
.db-feed-ico{
  width:38px;height:38px;flex:none;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:16px;background:var(--bg-2);border:1px solid var(--border);
}
.db-feed-text{flex:1;min-width:0;font-size:13.5px;line-height:1.4}
.db-feed-time{flex:none;font-size:11.5px;color:var(--muted);white-space:nowrap}

.db-empty{padding:32px 10px;text-align:center;color:var(--muted);font-size:13.5px}
.db-empty i{font-size:28px;opacity:.5;display:block;margin-bottom:10px}

@media(max-width:1080px){.db-split,.db-grid{grid-template-columns:1fr}}
@media(max-width:560px){
  .db-hero{padding:22px}
  .db-kpis{grid-template-columns:1fr 1fr}
}

/* ============================================================
   18 · KEYFRAMES
============================================================ */
@keyframes riseIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:scale(.95) translateY(-6px)}to{opacity:1;transform:none}}
@keyframes toastIn{from{opacity:0;transform:translateX(44px) scale(.96)}to{opacity:1;transform:none}}
@keyframes ping{0%{transform:scale(1);opacity:.75}75%,100%{transform:scale(1.9);opacity:0}}
@keyframes dotPulse{50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--danger) 10%,transparent)}}
@keyframes drift{to{transform:translate(60px,40px) scale(1.15)}}
@keyframes shimmer{to{background-position:200% 0}}

/* ============================================================
   19 · RESPONSIVE
============================================================ */
@media(max-width:1080px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:none;box-shadow:var(--shadow-xl)}
  .main{margin-left:0}
  .burger{display:inline-flex}
  .content{padding:20px 16px 36px}
  .topbar{padding:12px 16px}
  .pop{right:16px;top:56px;width:min(302px,calc(100vw - 32px))}
  /* Phones/tablets: the sidebar is off-canvas, so hug the topbar edge instead of the bell. */
  .notif-anchor{position:static}
  .notif-anchor > .notif-pop{top:56px;right:16px}
  .grid-2{grid-template-columns:1fr}
}
@media(max-width:640px){
  .form-grid{grid-template-columns:1fr}
  .span-2{grid-column:span 1}
  .stats{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .page-head h1{font-size:21px}
  .card{padding:16px;border-radius:14px}
  .stat-value{font-size:22px}
  .stat-ico{width:40px;height:40px;font-size:19px;border-radius:12px}
  .table td{padding:10px 10px;font-size:12.8px}
  .table th{padding:8px 10px}
  .btn{padding:9px 14px}
  .topbar-title{font-size:14px}
  .toasts{left:16px;right:16px}
  .toast{max-width:none}
  .auth-card{padding:32px 24px}
  .pagination-link{min-width:32px;height:32px;font-size:12.5px;padding:0 8px}
  .table-pagination{flex-direction:column;align-items:stretch}
  .table-pagination > *{width:100%}
  .table-pagination .pagination-per-page{justify-content:flex-start}
}

/* ============================================================
   19 · ANNOUNCEMENT MODAL
============================================================ */
.announcement-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 30, 0.6);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.announcement-modal {
  background: var(--card);
  border-radius: 16px;
  box-shadow: 0 25px 80px rgba(10, 14, 30, 0.4);
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  display: flex;
  overflow: hidden;
  animation: slideUp 0.3s ease;
}
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.announcement-modal-sidebar {
  width: 280px;
  border-right: 1px solid var(--border);
  background: var(--card-2);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.ann-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.ann-sidebar-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ann-sidebar-header h3 i { color: var(--accent); }
.ann-close-btn {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.ann-close-btn:hover { background: var(--accent-soft); color: var(--accent); }

.ann-sidebar-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}
.ann-sidebar-item {
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ann-sidebar-item:hover { background: var(--accent-soft); }
.ann-sidebar-item.active {
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}
.ann-sidebar-title {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.4;
}
.ann-sidebar-date {
  font-size: 11px;
  color: var(--muted);
}
.ann-unread-badge {
  display: inline-block;
  align-self: flex-start; /* keep the pill hugging its text inside the column-flex item */
  font-size: 10px;
  font-weight: 700;
  background: var(--accent);
  color: var(--on-accent);
  padding: 2px 6px;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.announcement-modal-content {
  flex: 1;
  padding: 24px 32px;
  overflow-y: auto;
  min-width: 0;
}
.announcement-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 300px;
  color: var(--muted);
  text-align: center;
}
.announcement-placeholder i { font-size: 48px; margin-bottom: 16px; opacity: 0.5; }
.announcement-placeholder p { font-size: 15px; margin: 0; }

/* `hidden` must beat the `display` declared above, otherwise the empty-state
   placeholder stays visible and pushes the announcement body underneath it. */
.announcement-placeholder[hidden],
.announcement-detail[hidden] { display: none; }

.announcement-detail h2 {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.ann-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.ann-meta .muted { font-size: 13px; }
.ann-body {
  line-height: 1.7;
  color: var(--text-2);
  font-size: 15px;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.ann-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

@media (max-width: 768px) {
  .announcement-modal { flex-direction: column; }
  .announcement-modal-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border); max-height: 200px; }
  .ann-sidebar-list { flex-direction: row; gap: 8px; }
  .ann-sidebar-item { flex: 1; min-width: 200px; }
  .announcement-modal-content { padding: 20px; }
}

.announcement-modal-overlay[hidden] { display: none !important; }

/* ============================================================
   20 · PRINT & ACCESSIBILITY
============================================================ */
@media print{
  .sidebar,.topbar,.pop,.toasts,.scrim,.burger{display:none!important}
  body.app::before{display:none}
  .main{margin:0}
  .content{padding:0;max-width:none}
  .card{box-shadow:none;border:1px solid #ccc;break-inside:avoid}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  html{scroll-behavior:auto}
}

/* ============================================================
   21 · ACCESS CONTROL (roles & per-user permissions)
============================================================ */
.ac-tabs{display:inline-flex;gap:4px;padding:4px;background:var(--card);border:1px solid var(--border);border-radius:13px;box-shadow:var(--shadow-xs)}
.ac-tab{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:9px;font-size:13px;font-weight:650;color:var(--muted);transition:.18s var(--ease-out)}
.ac-tab:hover{color:var(--accent);background:var(--accent-soft)}
.ac-tab.active{background:linear-gradient(135deg,var(--accent),var(--accent-600));color:var(--on-accent);box-shadow:0 4px 14px var(--accent-glow)}

.ac-shell{display:grid;grid-template-columns:300px minmax(0,1fr);gap:22px;align-items:start}

.ac-rail{padding:12px;position:sticky;top:14px;max-height:calc(100vh - 96px);display:flex;flex-direction:column}
.ac-rail-head{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);padding:4px 8px 10px}
.ac-rail-count{background:var(--accent-soft-2);color:var(--accent);border-radius:99px;padding:1px 8px;font-size:10.5px}
.ac-rail-list{overflow-y:auto;display:flex;flex-direction:column;gap:3px;margin:0 -4px;padding:0 4px}

.ac-search{position:relative;margin:0 4px 10px}
.ac-search i{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:12px}
.ac-search input{width:100%;padding:8px 11px 8px 32px;border-radius:9px;border:1px solid var(--border);background:var(--bg-2);color:var(--text);font-size:13px;transition:.15s var(--ease-out)}
.ac-search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-ring);background:var(--card)}

.ac-item{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:11px;color:var(--text);transition:background .15s,box-shadow .15s;position:relative}
.ac-item:hover{background:var(--accent-soft)}
.ac-item.active{background:var(--accent-soft-2);box-shadow:inset 0 0 0 1px var(--accent-border)}
.ac-item-ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent);flex:none;font-size:14px}
.ac-item.active .ac-item-ic{background:linear-gradient(135deg,var(--accent),var(--accent-600));color:var(--on-accent)}
.ac-item-tx{display:flex;flex-direction:column;min-width:0;flex:1}
.ac-item-tx b{font-size:13px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-item-tx small{color:var(--muted);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-item-go{color:var(--muted);font-size:11px;opacity:.55}
.ac-pill{background:linear-gradient(135deg,var(--accent),var(--accent-600));color:var(--on-accent);font-size:10.5px;font-weight:750;border-radius:99px;padding:1px 8px}
.ac-empty{padding:14px;text-align:center;color:var(--muted);font-size:12.5px}
.avatar-sm{border-radius:50%}

.ac-panel{padding:20px}
.ac-panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.ac-panel-head h3{font-size:16px;font-weight:750;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ac-panel-tools{display:flex;gap:8px;flex-wrap:wrap}
.ac-code{font-family:var(--font-mono);font-size:11px;color:var(--muted);background:var(--bg-2);border:1px solid var(--border);border-radius:6px;padding:2px 7px}
.ac-userhead{display:flex;align-items:center;gap:13px}
.ac-userhead h3{margin-bottom:1px}

.ac-note{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:9px 13px;border-radius:10px;background:var(--accent-soft);border:1px solid var(--accent-border);color:var(--text-2);font-size:12.5px;margin-bottom:18px}
.c-allow{color:var(--success)}
.c-deny{color:var(--danger)}

.ac-module{margin-bottom:18px}
.ac-module-head{display:flex;align-items:center;gap:9px;margin-bottom:9px;padding-bottom:7px;border-bottom:1px dashed var(--border)}
.ac-module-name{font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--accent)}
.ac-module-count{font-size:10.5px;font-weight:700;color:var(--muted);background:var(--bg-2);border-radius:99px;padding:1px 8px}
.ac-module-actions{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.ac-module-link{margin-left:auto;background:none;border:none;color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;padding:3px 8px;border-radius:7px;transition:.15s var(--ease-out)}
.ac-module-actions .ac-module-link{margin-left:0}
.ac-module-link:hover{color:var(--accent);background:var(--accent-soft)}
.ac-module-link.c-allow:hover{color:var(--success);background:color-mix(in srgb,var(--success) 12%,transparent)}
.ac-module-link.c-deny:hover{color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,transparent)}

.ac-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:8px}
.ac-perm{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--border);border-radius:11px;background:var(--card);transition:border-color .15s,background .15s}
.ac-perm:hover{border-color:var(--accent-border)}
.ac-perm.on{background:var(--accent-soft);border-color:var(--accent-border)}
.ac-perm-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.ac-perm-tx b{font-weight:600;font-size:13px;line-height:1.25}
.ac-perm-tx code{font-size:10.5px;padding:1px 6px;align-self:flex-start}
.ac-perm--user .ac-perm-tx{flex:1}

.ac-switch{position:relative;display:inline-flex;align-items:center;flex:none;cursor:pointer}
.ac-switch input{position:absolute;inset:0;opacity:0;margin:0;width:100%;height:100%;cursor:pointer}
.ac-track{width:42px;height:24px;border-radius:99px;background:var(--border-2);position:relative;transition:background .18s;flex:none}
.ac-track::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:var(--shadow-xs);transition:transform .22s var(--ease-spring)}
.ac-switch input:checked + .ac-track{background:linear-gradient(135deg,var(--accent),var(--accent-600));box-shadow:0 2px 8px var(--accent-glow)}
.ac-switch input:checked + .ac-track::after{transform:translateX(18px)}
.ac-switch input:focus-visible + .ac-track{box-shadow:0 0 0 4px var(--accent-ring)}

.ac-tri{display:inline-flex;border:1px solid var(--border);border-radius:9px;overflow:hidden;background:var(--bg-2);flex:none}
.ac-tri-opt{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:28px;cursor:pointer;color:var(--muted);font-size:12px;transition:.15s var(--ease-out)}
.ac-tri-opt + .ac-tri-opt{border-left:1px solid var(--border)}
.ac-tri-opt input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.ac-tri-opt span{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;padding:0 8px}
.ac-tri-opt:hover{background:var(--accent-soft);color:var(--accent)}
.ac-tri-opt input:checked + span{background:var(--accent);color:var(--on-accent)}
.ac-tri-opt.ac-allow input:checked + span{background:var(--success);color:#fff}
.ac-tri-opt.ac-deny input:checked + span{background:var(--danger);color:#fff}
.ac-tri-opt input:focus-visible + span{box-shadow:inset 0 0 0 2px var(--accent-ring)}

.ac-src{font-size:10px;font-weight:750;letter-spacing:.4px;text-transform:uppercase;padding:2px 7px;border-radius:99px;white-space:nowrap;flex:none}
.src-on{background:color-mix(in srgb,var(--success) 14%,transparent);color:var(--success)}
.src-off{background:color-mix(in srgb,var(--muted) 16%,transparent);color:var(--muted)}
.src-custom{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent)}

.ac-savebar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px;padding-top:16px;border-top:1px solid var(--border)}
.ac-savebar .muted{font-size:12.5px;display:inline-flex;align-items:center;gap:6px}

@media(max-width:920px){
  .ac-shell{grid-template-columns:1fr;gap:16px}
  .ac-rail{position:static;max-height:none}
  .ac-rail-list{max-height:300px}
}
@media(max-width:520px){
  .ac-grid{grid-template-columns:1fr}
  .ac-panel{padding:15px}
  .ac-panel-head{margin-bottom:12px}
}

/* ============================================================
   Share dialog + read-only share page
============================================================ */
.share-overlay{
  position:fixed;inset:0;z-index:1200;display:flex;align-items:flex-start;justify-content:center;
  padding:7vh 18px 24px;background:rgba(8,12,26,.5);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:fadeIn .16s ease;
}
.share-overlay[hidden]{display:none}
.share-modal{
  width:100%;max-width:560px;max-height:86vh;overflow:auto;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);
  box-shadow:var(--shadow-xl);animation:riseIn .24s var(--ease-spring) both;
}
.share-modal-head{display:flex;align-items:center;gap:13px;padding:18px 20px;border-bottom:1px solid var(--border)}
.share-modal-ico{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border-radius:13px;font-size:16px;color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-border)}
.share-modal-title{flex:1;min-width:0}
.share-modal-title h3{font-size:16px;font-weight:800;font-family:var(--font-display);margin:0;line-height:1.25}
.share-modal-title p{font-size:12.5px;margin:2px 0 0}
.share-x{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border:none;border-radius:10px;background:var(--card-2);color:var(--muted);font-size:18px;line-height:1;cursor:pointer;transition:background .15s,color .15s}
.share-x:hover{background:var(--card);color:var(--danger)}
.share-modal-body{padding:18px 20px}
.share-modal-body .field:last-child{margin-bottom:0}
.share-modal-foot{display:flex;align-items:center;gap:10px;padding:15px 20px;border-top:1px solid var(--border);background:var(--card-2);border-radius:0 0 var(--r-xl) var(--r-xl)}
.share-hint{flex:1;font-size:11.5px;color:var(--muted);display:inline-flex;align-items:center;gap:6px;min-width:0}
.share-hint i{color:var(--accent)}
.share-loading{padding:14px;text-align:center;color:var(--muted);font-size:12.5px}

/* read-only share page */
.share-open-card{padding:22px}
.share-note{display:flex;gap:10px;padding:12px 14px;margin-bottom:14px;border-radius:12px;background:var(--accent-soft);border:1px solid var(--accent-border);color:var(--text-2);font-size:13px;line-height:1.5}
.share-note i{color:var(--accent);margin-top:3px}
.share-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}

@media(max-width:560px){
  .share-overlay{padding:0}
  .share-modal{max-width:100%;height:100%;max-height:100vh;border-radius:0}
  .share-modal-foot{border-radius:0}
  .share-hint{display:none}
}

/* ============================================================
   HR employee file checklist
============================================================ */
.ef-list{display:flex;flex-direction:column;gap:8px}
.ef-item{
  position:relative;padding:10px 44px 10px 12px;
  border:1px solid var(--border);border-radius:11px;background:var(--card);
  transition:border-color .15s,background .15s;
}
.ef-item:hover{border-color:var(--border-2)}
.ef-item.is-done{background:color-mix(in srgb,var(--success) 5%,var(--card));border-color:color-mix(in srgb,var(--success) 30%,var(--border))}
.ef-main{min-width:0}
.ef-label{display:block;font-size:13px;font-weight:650;color:var(--text);line-height:1.4}
.ef-label i{color:var(--warn);font-size:11px;margin-left:2px}
.ef-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:5px;font-size:11.5px;color:var(--muted)}
.ef-meta i{color:var(--accent);margin-right:3px}
.ef-notes{margin-top:6px;font-size:12.5px;color:var(--text-2);line-height:1.5}
.ef-edit{position:absolute;top:9px;right:10px}
.ef-edit summary{
  list-style:none;cursor:pointer;display:grid;place-items:center;width:30px;height:30px;
  border-radius:9px;border:1px solid var(--border);background:var(--card-2);color:var(--muted);font-size:12px;
  transition:border-color .15s,color .15s;
}
.ef-edit summary::-webkit-details-marker{display:none}
.ef-edit summary:hover{border-color:var(--accent-border);color:var(--accent)}
.ef-edit[open]{position:static}
.ef-edit[open] summary{position:absolute;top:9px;right:10px}
.ef-form{
  margin-top:10px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--card-2);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;align-items:end;
}
.ef-form .field{margin-bottom:0}
.ef-form .field:last-of-type{grid-column:1/-1}
.ef-form button{justify-self:start}

/* ============================================================
   Employee performance KPI — star ratings (Team, Users, profile, HR dashboard)
   The score itself is computed by app/Models/EmployeeScore.php.
============================================================ */
.stars-row{
  display:inline-flex;align-items:center;gap:1px;line-height:1;vertical-align:middle;
  color:var(--warn, #f59e0b);
}
.stars-row i{font-size:1em;line-height:1}
.stars-row .fa-regular{opacity:.3}
.stars-wrap{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.stars-score{
  font-size:11.5px;font-weight:700;color:var(--text-2);font-variant-numeric:tabular-nums;
}
/* Manual HR adjustment marker (HR → Performance / employee profile). */
.stars-manual{font-size:10px;color:var(--warn, #f59e0b);opacity:.85}