/* ═══════════════════════════════════════════════════════
   AnyRFQ Admin — Theme
   Central stylesheet for all admin portal components.
   Tokens, dark mode, layout shell, sidebar, topbar,
   shared components, and page-specific styles.
   ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   TOKENS — Foundry Blue
═══════════════════════════════════════════════════════ */
:root{
  --navy:#1E4D8C; --navy2:#2B5BA8;
  --blue:#1A56DB; --blue2:#2563EB;
  --b-lt:#EEF2FF; --b-md:#DBEAFE;
  --white:#FFFFFF; --page:#FFFFFF; --off:#F8F8F8; --sidebar-bg:#FFFFFF;
  --t1:#1E4D8C; --t2:#1F2937; --t3:#1F2937; --t4:#374151; --t4-placeholder:#9CA3AF;
  --bd:#D1D5DB; --bd2:#B0B5BD;
  --green:#059669; --g-lt:#D1FAE5; --g-md:#A7F3D0;
  --amber:#D97706; --a-lt:#FEF3C7;
  --red:#DC2626; --r-lt:#FEE2E2;
  --sh:0 1px 3px rgba(30,77,140,.06),0 1px 2px rgba(30,77,140,.04);
  --sh2:0 4px 16px rgba(30,77,140,.10);
  --sh3:0 12px 40px rgba(30,77,140,.15);
  --sidebar-w:252px;
  --sidebar-cw:62px;
}

/* ═══════════════════════════════════════════════════════
   DARK MODE
═══════════════════════════════════════════════════════ */
html.dark{
  color-scheme:dark;
  --navy:#B4CBEA; --navy2:#98B6DF;
  --blue:#6BA0F5; --blue2:#7AACFA;
  --b-lt:rgba(107,160,245,.10); --b-md:rgba(107,160,245,.16);
  --white:#161B22; --page:#0D1117; --off:#1F2530; --sidebar-bg:#0A0D13;
  /* Text tones — headings, body and secondary all render pure white per
     product decision; only t4 (labels/meta) keeps a muted grey so caption
     rows stay visually subordinate to body copy. */
  --t1:#FFFFFF; --t2:#FFFFFF; --t3:#FFFFFF; --t4:#B0B7C3; --t4-placeholder:#8B92A0;
  --bd:#252B36; --bd2:#374151;
  --green:#3FB981; --g-lt:rgba(63,185,129,.12); --g-md:rgba(63,185,129,.18);
  --amber:#E8A93A; --a-lt:rgba(232,169,58,.12);
  --red:#EF4444; --r-lt:rgba(239,68,68,.14);
  --sh:0 1px 2px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.25);
  --sh2:0 4px 14px rgba(0,0,0,.35);
  --sh3:0 12px 36px rgba(0,0,0,.45);
}
html.dark ::-webkit-scrollbar-thumb{background:#2A303A;}
/* Keep the ANYRFQ logo on brand in dark mode — palette --blue / --navy are
   paler accents that would wash out the mark. Tile stays brand blue; the
   "ANY" part goes near-white (navy #1E4D8C would blend into #0A0D13) and
   "RFQ" keeps the brand blue for the two-tone identity. */
html.dark .sb-lmark{background:#1A56DB;}
html.dark .sb-ltext{color:#FFFFFF;}
html.dark .sb-ltext span{color:#3B82F6;}
/* Sidebar text — force pure white across group labels, nav items (idle,
   hover AND active), and the user name/role footer. The active nav item
   keeps its blue background tint from .si.on but the text goes white. */
html.dark .sb-group-label,
html.dark .sb-group-label:hover,
html.dark .si,
html.dark .si:hover,
html.dark .si.on,
html.dark .sb-uname,
html.dark .sb-urole{color:#FFFFFF;}
html.dark .sb-av,html.dark .tb-av{background:linear-gradient(135deg,var(--blue),#3B6FD4);}
html.dark .notif-dot{border-color:var(--white);}
html.dark thead th{background:var(--off);}
html.dark tbody tr:hover{background:rgba(107,160,245,.14);}
/* Buttons in dark mode — matches portal: solid vibrant fills for primary
   actions, flat outline with blue-on-hover for secondary. */
html.dark .btn{background:transparent;border-color:var(--bd2);color:var(--t2);box-shadow:none;}
html.dark .btn:hover{border-color:var(--blue);color:var(--blue);background:transparent;box-shadow:none;}
/* Primary buttons keep the saturated brand blue in dark mode — the palette
   --blue is a paler accent for text/borders and would wash out here. */
html.dark .btn-primary{background:#1A56DB;border-color:#1A56DB;color:#fff;box-shadow:0 1px 8px rgba(26,86,219,.45);}
html.dark .btn-primary:hover{background:#2563EB;border-color:#2563EB;color:#fff;}
html.dark .btn-outline{background:transparent;border-color:var(--bd2);color:var(--t2);}
html.dark .btn-outline:hover{border-color:var(--blue);color:var(--blue);background:transparent;}
html.dark .btn-success{background:var(--green);border-color:var(--green);color:#0D1117;box-shadow:0 1px 8px rgba(63,185,129,.28);}
html.dark .btn-success:hover{background:#5FCB99;border-color:#5FCB99;color:#0D1117;}
html.dark .btn-danger{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 1px 8px rgba(239,68,68,.28);}
html.dark .btn-danger:hover{background:#F08585;border-color:#F08585;color:#fff;}
html.dark .si.on{background:rgba(107,160,245,.14);border-color:rgba(107,160,245,.22);color:var(--blue);}
html.dark .dm-sun{display:none;}
html.dark .dm-moon{display:block;}
.dm-moon{display:none;}
html.dark .fsel{background:var(--white);border-color:var(--bd);color:var(--t2);}
html.dark .fsearch{background:var(--white);border-color:var(--bd);}
html.dark .tb-search{background:var(--white);border-color:var(--bd);}
html.dark .card{background:var(--white);border-color:var(--bd);}
html.dark .stat-card{background:var(--white);border-color:var(--bd);}
/* Stat-card SVGs on the admin dashboard set `stroke="#…"` inline
   (brand blue / green / amber / red per card). Those hex strings
   read fine against the light-mode tinted icon tile but drop below
   the surface in dark mode. Repaint every stroked SVG inside a
   `.stat-card` to pure white so the icons become white line-art.
   `!important` beats the SVG attribute-level stroke. `.sc-icon`'s
   own background tint is left alone so each card's colour code
   still comes through the tile. */
html.dark .stat-card svg,
html.dark .stat-card svg *{
    stroke:#FFFFFF !important;
    color:#FFFFFF !important;
}
html.dark .stat-card svg *[fill]:not([fill="none"]){
    fill:#FFFFFF !important;
}
html.dark .tbl-wrap{background:var(--white);border-color:var(--bd);}
html.dark input,html.dark select,html.dark textarea{background-color:var(--white);border-color:var(--bd);color:var(--t1);}
/* Focus ring in dark mode is white, not brand blue — matches portal + user
   rule that keeps blue reserved for the logo mark. */
html.dark input:focus,html.dark select:focus,html.dark textarea:focus{border-color:#FFFFFF !important;background-color:var(--white);outline:none;box-shadow:0 0 0 3px rgba(255,255,255,.12);}
html.dark .tb-search:focus-within{border-color:#FFFFFF;box-shadow:0 0 0 3px rgba(255,255,255,.10);}
html.dark .sb-portal-badge{background:var(--b-lt);border-color:rgba(107,160,245,.15);color:#FFFFFF;}

/* Blue text → white in dark mode (except the ANYRFQ logo mark span). Covers
   inline color:var(--blue) / #1A56DB / #2563EB literals plus the common
   in-app spots that used var(--blue) for text (tag pills, group badges,
   role-selection, sidebar section labels, etc). */
html.dark [style*="color:#1A56DB" i],
html.dark [style*="color: #1A56DB" i],
html.dark [style*="color:#2563EB" i],
html.dark [style*="color: #2563EB" i],
html.dark [style*="color:var(--blue)"],
html.dark [style*="color: var(--blue)"]{ color:#FFFFFF !important; }
html.dark .group-badge,
html.dark .role-item.on,
html.dark .role-item.on .ri-n{ color:#FFFFFF; }

/* Pill / tag treatment in dark mode — outline style. All coloured tint
   pills (status tags, group badges, sidebar plan pill, etc.) become
   transparent bg + white 1px border + white text so they read as chips
   against the dark card. */
html.dark .tag,
html.dark .tag-blue, html.dark .tag-green, html.dark .tag-amber,
html.dark .tag-red, html.dark .tag-grey,
html.dark .group-badge,
html.dark .sb-portal-badge,
html.dark .role-item.on{
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid #FFFFFF !important;
    color: #FFFFFF !important;
}

/* Light-mode pill outline treatment — .group-badge / .sb-portal-badge
   / .role-item.on flip from filled tint to transparent + colored
   border. .tag* already uses outline via the base rules above. */
:where(html:not(.dark)) .group-badge,
:where(html:not(.dark)) .sb-portal-badge{
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid var(--blue) !important;
    color: var(--blue) !important;
}
:where(html:not(.dark)) .role-item.on{
    background-color: transparent !important;
    background-image: none !important;
    border-color: var(--blue) !important;
    color: var(--blue) !important;
}
/* Row action dropdown items — hover was picking var(--navy) which in dark
   is a pale blue that read as low-contrast against var(--off). Keep the
   hover bg but force white text so the row action label stays readable. */
html.dark .dropdown-item:hover,
html.dark .tb-menu-item:hover{ color:#FFFFFF; }
/* Links keep white on hover in dark mode instead of flipping to brand blue,
   per user rule ([[feedback-dark-mode-blue-text]]). */
html.dark a:hover,
html.dark .link:hover{ color:#FFFFFF; }
html.dark .sb-ltext span,
html.dark .sb-ltext span[style]{ color:#3B82F6 !important; }

/* Catch legacy inline `#fff` backgrounds (many views use inline styles for
   cards, form panels and table wrappers). In dark mode these would otherwise
   render as bright white slabs against the near-black page. */
html.dark [style*="background:#fff"],
html.dark [style*="background: #fff"],
html.dark [style*="background:#FFFFFF"],
html.dark [style*="background: #FFFFFF"],
html.dark [style*="background:#ffffff"],
html.dark [style*="background: #ffffff"],
html.dark [style*="background-color:#fff"],
html.dark [style*="background-color: #fff"],
html.dark [style*="background-color:#FFFFFF"],
html.dark [style*="background-color: #FFFFFF"],
html.dark [style*="background-color:#ffffff"],
html.dark [style*="background-color: #ffffff"]{
  background-color:var(--white) !important;
}
/* Row-hover overrides — some tables set hover bg via inline var(--b-lt) which
   is already fine, but a few use `#F0F5FF` / `#F8FAFF` literals. */
html.dark [style*="background:#F0F5FF"],
html.dark [style*="background: #F0F5FF"],
html.dark [style*="background:#F8FAFF"],
html.dark [style*="background: #F8FAFF"],
html.dark [style*="background:#EEF2FF"],
html.dark [style*="background: #EEF2FF"]{
  background-color:var(--off) !important;
}
/* Elevated card in dark — soft top-highlight for depth */
html.dark .card,
html.dark .stat-card,
html.dark .tbl-wrap,
html.dark [style*="background:#fff"],
html.dark [style*="background-color:#fff"]{
  border-color:var(--bd);
  box-shadow:0 1px 0 rgba(255,255,255,.02) inset, 0 1px 2px rgba(0,0,0,.35);
}
html.dark tbody tr:hover{background:rgba(107,160,245,.14);}
html.dark thead th{background:var(--off);}
/* Placeholders slightly muted */
html.dark ::placeholder{color:var(--t4-placeholder);opacity:1;}
/* Date input calendar/clock picker icon — the browser draws it black by
   default, which vanishes on the dark input. Invert to white and give it
   an obvious opacity + subtle hover boost. */
html.dark input[type="date"]::-webkit-calendar-picker-indicator,
html.dark input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html.dark input[type="time"]::-webkit-calendar-picker-indicator,
html.dark input[type="month"]::-webkit-calendar-picker-indicator,
html.dark input[type="week"]::-webkit-calendar-picker-indicator{
  filter:invert(1) opacity(.85);
  cursor:pointer;
}
html.dark input[type="date"]::-webkit-calendar-picker-indicator:hover,
html.dark input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
html.dark input[type="time"]::-webkit-calendar-picker-indicator:hover,
html.dark input[type="month"]::-webkit-calendar-picker-indicator:hover,
html.dark input[type="week"]::-webkit-calendar-picker-indicator:hover{
  filter:invert(1) opacity(1);
}

/* ═══════════════════════════════════════════════════════
   BASE RESET
═══════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{font-family:'Figtree',sans-serif;background:var(--page);color:var(--t2);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;}
button,input,select,textarea{font-family:'Figtree',sans-serif;}
button{cursor:pointer;}
a{text-decoration:none;color:inherit;}
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-thumb{background:var(--bd2);border-radius:99px;}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ═══════════════════════════════════════════════════════
   ADMIN SHELL
═══════════════════════════════════════════════════════ */
.admin-shell{display:flex;height:100vh;overflow:hidden;}

/* ── SIDEBAR ─────────────────────────────────────────── */
.sidebar{
  width:var(--sidebar-w);flex-shrink:0;
  background:var(--sidebar-bg);
  border-right:1px solid var(--bd);
  display:flex;flex-direction:column;
  height:100vh;overflow-y:auto;
  transition:width .25s ease;
}
.sb-header{padding:18px 16px 12px;display:flex;align-items:center;justify-content:space-between;}
.sb-logo{display:flex;align-items:center;gap:9px;}
.sb-lmark{width:34px;height:34px;background:var(--blue);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sb-lmark svg{width:17px;height:17px;fill:#fff;}
.sb-ltext{font-size:18px;font-weight:800;color:var(--navy);letter-spacing:-.3px;transition:opacity .2s,width .2s;overflow:hidden;white-space:nowrap;}
.sb-ltext span{color:var(--blue);}
.sb-portal-badge{
  display:inline-flex;align-items:center;gap:4px;
  background:transparent;border:1px solid var(--blue);
  border-radius:99px;padding:3px 10px;
  font-size:10px;font-weight:700;color:var(--blue);
  letter-spacing:.06em;text-transform:uppercase;
}
.sb-toggle{
  width:26px;height:26px;border-radius:6px;
  border:1px solid var(--bd);background:var(--sidebar-bg);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .15s;flex-shrink:0;
}
.sb-toggle:hover{border-color:var(--blue);background:var(--b-lt);}
.sb-toggle svg{width:14px;height:14px;stroke:var(--t3);transition:transform .25s;}
.sb-toggle:hover svg{stroke:var(--blue);}

.sb-nav{padding:8px 10px;flex:1;}
.sb-group{margin-bottom:4px;}
.sb-group-label{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  width:100%;background:transparent;border:0;text-align:left;cursor:pointer;
  padding:8px 8px 4px;
  font-size:10px;font-weight:700;color:var(--t4);
  letter-spacing:.1em;text-transform:uppercase;
  transition:opacity .2s, color .15s;white-space:nowrap;overflow:hidden;
  font-family:'Figtree',sans-serif;
}
.sb-group-label:hover{color:var(--navy);}
.sb-group-label .sb-chev{
  width:12px;height:12px;stroke:currentColor;stroke-width:2.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .2s;flex-shrink:0;
}
.sb-group-label.is-closed .sb-chev{transform:rotate(-90deg);}
.sb-group-items{overflow:hidden;}
/* When the sidebar itself is collapsed to icon-only, always show group items —
   there's no label to click and we don't want to hide the icons. */
.sidebar.collapsed .sb-group-items{display:block !important;}
[x-cloak]{display:none !important;}
.si{
  display:flex;align-items:center;gap:9px;
  padding:8px 10px;border-radius:8px;
  font-size:13px;font-weight:500;color:var(--t3);
  transition:all .15s;position:relative;margin-bottom:1px;
  white-space:nowrap;overflow:hidden;
}
.si:hover{background:var(--off);color:var(--navy);}
.si.on{background:var(--b-lt);color:var(--blue);font-weight:600;border:1px solid rgba(26,86,219,.15);border-radius:10px;}
.si.on::before{display:none;}
.si svg{width:15px;height:15px;stroke:currentColor;flex-shrink:0;}
/* Sidebar count badges — outline (line) circles: transparent bg,
   colored border. Text matches the border colour so it reads on the
   light sidebar; dark-mode override flips it to white. */
.si-badge{
  margin-left:auto;font-size:10px;font-weight:700;
  padding:1px 6px;border-radius:99px;
  background:transparent;color:var(--red);
  border:1px solid var(--red);
}
.si-badge.amber{background:transparent;color:var(--amber);border-color:var(--amber);}
.si-badge.blue{background:transparent;color:var(--blue);border-color:var(--blue);}
html.dark .si-badge,
html.dark .si-badge.amber,
html.dark .si-badge.blue{color:#fff;}

/* ── SIDEBAR COLLAPSED ──────────────────────────────── */
.si-text{transition:opacity .2s;white-space:nowrap;}
.sidebar.collapsed{width:var(--sidebar-cw);}
.sidebar.collapsed .sb-ltext{opacity:0;width:0;}
.sidebar.collapsed .sb-header{padding:18px 14px 12px;justify-content:center;}
.sidebar.collapsed .sb-logo{gap:0;}
.sidebar.collapsed .sb-toggle{display:none;}
.sidebar.collapsed .sb-group-label{opacity:0;height:0;padding:0;margin:0;overflow:hidden;}
.sidebar.collapsed .sb-nav{padding:8px 6px;}
.sidebar.collapsed .si{justify-content:center;padding:8px;gap:0;}
.sidebar.collapsed .si-text,
.sidebar.collapsed .si .si-badge{display:none;}
.sidebar.collapsed .si svg{width:18px;height:18px;}
.sidebar.collapsed .si{position:relative;}
.sidebar.collapsed .si:hover::after{
  content:attr(data-tip);position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);
  background:var(--navy);color:#fff;font-size:11px;font-weight:600;
  padding:4px 10px;border-radius:6px;white-space:nowrap;z-index:100;
  pointer-events:none;box-shadow:var(--sh2);
}
.sidebar.collapsed .si.on::before{left:-6px;}
.sidebar.collapsed .sb-footer{padding:14px 10px;}
.sidebar.collapsed .sb-user .sb-info,
.sidebar.collapsed .sb-user .sb-signout{display:none;}
.sidebar.collapsed .sb-user{justify-content:center;}

.sb-footer{padding:14px 16px;border-top:1px solid var(--bd);}
.sb-user{display:flex;align-items:center;gap:9px;}
.sb-av{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--navy));
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#fff;flex-shrink:0;
}
.sb-info{flex:1;min-width:0;}
.sb-uname{font-size:12px;font-weight:700;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sb-urole{font-size:10px;color:var(--t4);}
.sb-signout{
  width:26px;height:26px;border-radius:6px;
  border:1px solid var(--bd);background:transparent;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;flex-shrink:0;
}
.sb-signout:hover{background:var(--r-lt);border-color:var(--red);}
.sb-signout svg{width:13px;height:13px;stroke:var(--t3);}
.sb-signout:hover svg{stroke:var(--red);}

/* ── MAIN ─────────────────────────────────────────────── */
.main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden;}

/* ═══════════════════════════════════════════════════════
   TOPBAR
═══════════════════════════════════════════════════════ */
.topbar{
  height:58px;flex-shrink:0;
  background:var(--white);border-bottom:1px solid var(--bd);
  display:flex;align-items:center;padding:0 24px;gap:12px;
}
.tb-expand{
  width:32px;height:32px;border-radius:8px;
  border:1.5px solid var(--bd);background:var(--white);
  display:none;align-items:center;justify-content:center;
  cursor:pointer;transition:all .15s;flex-shrink:0;
}
.tb-expand:hover{border-color:var(--blue);background:var(--b-lt);}
.tb-expand svg{width:16px;height:16px;stroke:var(--t3);}
.tb-expand:hover svg{stroke:var(--blue);}
.sidebar.collapsed ~ .main .tb-expand{display:flex;}
.tb-breadcrumb{display:flex;align-items:center;gap:6px;}
.tb-root{font-size:12px;color:var(--t4);}
.tb-sep{font-size:12px;color:var(--bd2);}
.tb-title{font-size:15px;font-weight:700;color:var(--navy);}
.tb-actions{margin-left:auto;display:flex;align-items:center;gap:8px;}
.tb-search{
  display:flex;align-items:center;gap:7px;
  background:var(--white);border:1.5px solid var(--bd);
  border-radius:8px;padding:0 12px;height:34px;
  transition:all .2s;
}
.tb-search:focus-within{border-color:var(--blue);background:var(--white);}
.tb-search svg{width:13px;height:13px;stroke:var(--t4);flex-shrink:0;}
.tb-search input{border:none;background:transparent;font-size:13px;color:var(--t1);outline:none;width:180px;}
.tb-search input::placeholder{color:var(--t4-placeholder);}
.tb-btn{
  height:34px;border-radius:8px;
  border:1.5px solid var(--bd);background:var(--white);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .15s;position:relative;
  padding:0 10px;gap:6px;font-size:12px;font-weight:600;color:var(--t2);
}
.tb-btn:hover{border-color:var(--blue);color:var(--blue);}
.tb-btn svg{width:15px;height:15px;stroke:currentColor;}
.notif-dot{
  position:absolute;top:5px;right:5px;
  width:7px;height:7px;border-radius:50%;
  background:var(--red);border:1.5px solid var(--white);
}

/* CONTENT */
.content{flex:1;overflow-y:auto;padding:24px;background:var(--page);}
.content .view{animation:fadeIn .2s ease both;}

/* ═══════════════════════════════════════════════════════
   SHARED COMPONENTS
═══════════════════════════════════════════════════════ */
.ph{margin-bottom:20px;}
.ph h1{font-size:21px;font-weight:800;color:var(--navy);letter-spacing:-.4px;margin-bottom:2px;}
.ph p{font-size:13px;color:var(--t3);}

.card{background:var(--white);border-radius:14px;border:1px solid var(--bd);box-shadow:var(--sh);}
.card-p{padding:20px;}

/* ── Stat Cards ── */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px;}
.stat-card{
  background:var(--white);border:1px solid var(--bd);
  border-radius:14px;padding:18px;box-shadow:var(--sh);
  transition:box-shadow .2s;
}
.stat-card:hover{box-shadow:var(--sh3);}
.sc-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;}
.sc-icon svg{width:17px;height:17px;}
.sc-val{font-size:26px;font-weight:800;color:var(--navy);letter-spacing:-.5px;line-height:1;margin-bottom:3px;}
.sc-lbl{font-size:12px;color:var(--t4);}
.sc-delta{font-size:11px;font-weight:600;margin-top:5px;}
.up{color:var(--green);} .dn{color:var(--red);} .neu{color:var(--amber);}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:10px;font-size:13px;font-weight:500;border:1.5px solid var(--bd);background:var(--white);color:var(--t2);cursor:pointer;transition:all .15s;white-space:nowrap;}
.btn:hover{border-color:var(--bd2);background:var(--off);box-shadow:0 1px 4px rgba(0,0,0,.04);}
.btn svg{width:15px;height:15px;stroke:currentColor;flex-shrink:0;}
.btn-primary{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 1px 6px rgba(26,86,219,.18);}
.btn-primary:hover{background:var(--navy);border-color:var(--navy);}
.btn-outline{background:var(--white);border-color:var(--bd);color:var(--t2);}
.btn-outline:hover{border-color:var(--bd2);background:var(--off);}
.btn-danger{background:var(--white);color:var(--red);border-color:var(--bd);}
.btn-danger:hover{background:var(--r-lt);border-color:rgba(220,38,38,.25);}
.btn-success{background:var(--white);color:var(--green);border-color:var(--bd);}
.btn-success:hover{background:var(--g-lt);border-color:rgba(5,150,105,.25);}
.btn-sm{padding:7px 14px;font-size:12px;}

/* ── Tags ── */
/* Tag / pill baseline — outline (line) style in both light and dark:
   transparent bg + 1px colored border + colored text. */
.tag{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:4px 12px;border-radius:99px;white-space:nowrap;border:1px solid var(--bd);background:transparent;color:var(--t2);}
.tag-blue{background:transparent;border-color:var(--blue);color:var(--blue);}
.tag-green{background:transparent;border-color:var(--green);color:var(--green);}
.tag-amber{background:transparent;border-color:var(--amber);color:var(--amber);}
.tag-red{background:transparent;border-color:var(--red);color:var(--red);}
.tag-grey{background:transparent;border-color:var(--bd);color:var(--t3);}
.dot{width:5px;height:5px;border-radius:50%;display:inline-block;}
.dot-g{background:var(--green);}
.dot-a{background:var(--amber);}
.dot-r{background:var(--red);}
.dot-b{background:var(--blue);}

/* ── Tables ── */
.tbl-wrap{overflow-x:auto;border-radius:14px;box-shadow:var(--sh);border:1px solid var(--bd);background:var(--white);}
table{width:100%;border-collapse:collapse;}
thead th{
  text-align:left;padding:10px 14px;
  font-size:11px;font-weight:700;color:var(--t2);
  text-transform:uppercase;letter-spacing:.06em;
  border-bottom:1px solid var(--bd);background:var(--off);
  white-space:nowrap;
}
thead th:first-child{border-radius:14px 0 0 0;}
thead th:last-child{border-radius:0 14px 0 0;}
tbody td{padding:12px 14px;border-bottom:1px solid var(--bd);font-size:13px;color:var(--t2);vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:rgba(26,86,219,.015);}
.td-main{font-weight:600;color:var(--navy);}
.td-sub{font-size:11px;color:var(--t2);margin-top:1px;}

/* ── Filters ── */
.filter-bar{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap;}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%239CA3AF' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:1.25em 1.25em;padding-right:36px;cursor:pointer;}
.fsel{background-color:var(--white);border:1.5px solid var(--bd);border-radius:10px;padding:9px 32px 9px 14px;font-size:13px;color:var(--t2);outline:none;transition:border-color .15s;}
.fsel:focus{border-color:var(--blue);}
.fsearch{display:flex;align-items:center;gap:7px;background:var(--white);border:1.5px solid var(--bd);border-radius:10px;padding:0 18px;height:40px;transition:all .2s;}
.fsearch:focus-within{border-color:var(--blue);}
.fsearch svg{width:13px;height:13px;stroke:var(--t4);}
.fsearch input{border:none;background:transparent;font-size:13px;color:var(--t1);outline:none;width:180px;}

/* ── Topbar User Dropdown ── */
.tb-user{position:relative;}
.tb-user-trigger{
  display:flex;align-items:center;gap:8px;
  padding:4px 8px 4px 4px;border-radius:10px;
  border:1.5px solid var(--bd);background:var(--white);
  cursor:pointer;transition:all .15s;
}
.tb-user-trigger:hover{border-color:var(--blue);background:var(--off);}
.tb-av{
  width:32px;height:32px;border-radius:8px;
  background:linear-gradient(135deg,var(--blue),var(--navy));
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#fff;flex-shrink:0;
}
.tb-user-info{display:flex;flex-direction:column;text-align:left;line-height:1.2;}
.tb-user-name{font-size:12px;font-weight:700;color:var(--navy);}
.tb-user-role{font-size:10px;color:var(--t4);}
.tb-chevron{width:14px;height:14px;color:var(--t4);transition:transform .2s;flex-shrink:0;}
.tb-user.open .tb-chevron{transform:rotate(180deg);}
.tb-user-menu{
  display:none;position:absolute;right:0;top:calc(100% + 6px);
  background:var(--white);border:1px solid var(--bd);border-radius:10px;
  box-shadow:var(--sh2);min-width:180px;z-index:200;
  padding:4px;overflow:hidden;
}
.tb-user.open .tb-user-menu{display:block;}
.tb-menu-item{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:6px;
  font-size:12px;font-weight:500;color:var(--t2);
  cursor:pointer;transition:all .12s;
  border:none;background:none;width:100%;text-align:left;
  font-family:'Figtree',sans-serif;
}
.tb-menu-item:hover{background:var(--off);color:var(--navy);}
.tb-menu-item svg{width:14px;height:14px;stroke:currentColor;flex-shrink:0;}
.tb-menu-item.danger{color:var(--red);}
.tb-menu-item.danger:hover{background:var(--r-lt);}
.tb-menu-sep{height:1px;background:var(--bd);margin:3px 6px;}

/* ── Notifications dropdown ── */
.tb-notif{position:relative;}
.tb-notif-trigger{white-space:nowrap;}
.tb-notif-dot{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:17px;padding:0 5px;
  border-radius:99px;background:var(--red);color:#fff;
  font-size:10px;font-weight:800;line-height:1;text-align:center;flex-shrink:0;
}
.tb-notif-menu{
  display:none;position:absolute;right:0;top:calc(100% + 6px);
  background:var(--white);border:1px solid var(--bd);border-radius:12px;
  box-shadow:var(--sh2);width:320px;max-width:calc(100vw - 24px);z-index:200;
  overflow:hidden;
}
.tb-notif.open .tb-notif-menu{display:block;}
.tb-notif-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;border-bottom:1px solid var(--bd);
  background:var(--off);
}
.tb-notif-title{font-size:12px;font-weight:700;color:var(--navy);letter-spacing:.02em;}
.tb-notif-count{
  font-size:10px;font-weight:800;color:#fff;
  background:var(--red);border-radius:99px;padding:2px 8px;
}
.tb-notif-body{max-height:340px;overflow-y:auto;}
.tb-notif-item{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 14px;border-bottom:1px solid var(--bd);
  transition:background .12s;text-decoration:none;color:inherit;
}
.tb-notif-item:last-child{border-bottom:none;}
.tb-notif-item:hover{background:var(--off);}
.tb-notif-av{
  width:32px;height:32px;border-radius:8px;flex-shrink:0;
  background:linear-gradient(135deg,var(--blue),var(--navy));
  color:#fff;font-size:11px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}
.tb-notif-content{min-width:0;flex:1;}
.tb-notif-name{font-size:12.5px;font-weight:700;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tb-notif-meta{font-size:11px;color:var(--t4);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tb-notif-time{font-size:10.5px;color:var(--t4);margin-top:3px;}
.tb-notif-unread-dot{width:8px;height:8px;border-radius:99px;background:var(--red);flex-shrink:0;margin-top:8px;}
.tb-notif-item.is-read{background:var(--white);}
.tb-notif-item.is-read .tb-notif-name{color:var(--t2);font-weight:600;}
.tb-notif-item.is-read .tb-notif-av{opacity:.55;}
.tb-notif-empty{padding:22px 14px;font-size:12px;color:var(--t4);text-align:center;}
.tb-notif-viewall{
  display:block;padding:10px 14px;
  font-size:12px;font-weight:700;color:var(--blue);
  text-decoration:none;text-align:center;
  border-top:1px solid var(--bd);background:var(--white);
  transition:background .12s;
}
.tb-notif-viewall:hover{background:var(--b-lt);}

/* ── Sortable Headers ── */
.th-sort{cursor:pointer;user-select:none;white-space:nowrap;}
.th-sort:hover{color:var(--blue);}
.th-sort .sort-icon{display:inline-flex;flex-direction:column;gap:1px;margin-left:4px;vertical-align:middle;position:relative;top:-1px;}
.th-sort .sort-icon svg{width:10px;height:10px;stroke:var(--bd);stroke-width:2.5;fill:none;}
.th-sort.asc .sort-icon .arr-up,
.th-sort.desc .sort-icon .arr-down{stroke:var(--blue);}

/* ═══════════════════════════════════════════════════════
   SWEETALERT2 THEME
═══════════════════════════════════════════════════════ */
.swal-themed{font-family:'Figtree',sans-serif!important;border-radius:16px!important;padding:24px 22px 18px!important;border:1px solid var(--bd)!important;box-shadow:0 25px 50px -12px rgba(0,0,0,.2)!important;}
.swal-themed-title{font-size:17px!important;font-weight:800!important;color:var(--navy)!important;padding:0 0 4px!important;}
.swal-themed-html{font-size:14px!important;color:var(--t2)!important;line-height:1.6!important;}
.swal-actions{gap:8px!important;margin-top:18px!important;}
.swal-btn-danger{background:var(--red)!important;color:#fff!important;font-family:'Figtree',sans-serif!important;font-size:13px!important;font-weight:600!important;padding:8px 18px!important;border-radius:8px!important;border:none!important;cursor:pointer!important;transition:background .15s!important;}
.swal-btn-danger:hover{background:#B91C1C!important;}
.swal-btn-primary{background:var(--blue)!important;color:#fff!important;font-family:'Figtree',sans-serif!important;font-size:13px!important;font-weight:600!important;padding:8px 18px!important;border-radius:8px!important;border:none!important;cursor:pointer!important;transition:background .15s!important;}
.swal-btn-primary:hover{background:var(--navy)!important;}
.swal-btn-cancel{background:#fff!important;color:var(--t2)!important;font-family:'Figtree',sans-serif!important;font-size:13px!important;font-weight:600!important;padding:8px 18px!important;border-radius:8px!important;border:1.5px solid var(--bd2)!important;cursor:pointer!important;transition:all .15s!important;}
.swal-btn-cancel:hover{border-color:var(--blue)!important;color:var(--blue)!important;}
.swal2-icon{transform:scale(0.85)!important;margin:0 auto 8px!important;}

/* ═══════════════════════════════════════════════════════
   LOGIN PAGE
═══════════════════════════════════════════════════════ */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

.login-screen{
  height:100vh;
  background:#FAFAFA;
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.login-screen::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle,#D1D5DB 1px,transparent 1px);
  background-size:28px 28px;opacity:.3;pointer-events:none;
}
.login-screen::after{
  content:'';position:absolute;right:-120px;top:-120px;
  width:480px;height:480px;border-radius:50%;
  background:radial-gradient(circle,rgba(26,86,219,.08) 0%,transparent 70%);
  pointer-events:none;
}
.login-wrap{
  position:relative;z-index:1;width:100%;max-width:420px;padding:20px;
  animation:fadeUp .45s ease both;
}
.login-card{
  background:var(--white);border-radius:20px;
  padding:40px;
  box-shadow:var(--sh3);
  border:1px solid rgba(230,235,255,.9);
}
.login-logo{display:flex;align-items:center;gap:9px;margin-bottom:6px;}
.login-lmark{width:38px;height:38px;background:var(--blue);border-radius:10px;display:flex;align-items:center;justify-content:center;}
.login-lmark svg{width:19px;height:19px;fill:#fff;}
.login-ltext{font-size:21px;font-weight:800;color:var(--navy);letter-spacing:-.3px;}
.login-ltext span{color:var(--blue);}
.login-card h2{font-size:22px;font-weight:800;color:var(--navy);letter-spacing:-.4px;margin-bottom:4px;}
.login-card .sub{font-size:13px;color:var(--t3);margin-bottom:24px;line-height:1.6;}
.lf{margin-bottom:14px;}
.lf label{display:block;font-size:12px;font-weight:600;color:var(--t2);margin-bottom:5px;}
.lf input{
  width:100%;background:var(--white);border:1.5px solid var(--bd);
  border-radius:9px;padding:10px 14px;font-size:14px;color:var(--t1);
  outline:none;transition:all .2s;
}
.lf input:focus{border-color:var(--blue);background:var(--white);box-shadow:0 0 0 3px rgba(26,86,219,.08);}
.lf input.err{border-color:var(--red);background:var(--r-lt);}
.btn-login{
  width:100%;background:var(--blue);color:#fff;border:none;
  border-radius:9px;padding:12px;font-size:14px;font-weight:700;
  transition:all .2s;box-shadow:0 2px 12px rgba(26,86,219,.25);
  margin-top:4px;
}
.btn-login:hover{background:var(--navy);transform:translateY(-1px);box-shadow:0 4px 18px rgba(26,86,219,.3);}
.login-footer{text-align:center;margin-top:16px;font-size:12px;color:var(--t4);}
.error-box{
  background:var(--r-lt);border:1px solid rgba(220,38,38,.15);
  border-radius:9px;padding:10px 14px;margin-bottom:16px;
  font-size:13px;color:var(--red);
}

/* ═══════════════════════════════════════════════════════
   PAGE COMPONENTS
═══════════════════════════════════════════════════════ */

/* ── Avatars ── */
.co-av{
  width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:#fff;flex-shrink:0;
  min-width:36px;
}
.co-av-lg{
  width:48px;height:48px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;color:#fff;flex-shrink:0;
}
.role-av{
  width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;flex-shrink:0;min-width:36px;
  background:var(--b-lt);
}

/* ── Pagination ── */
.pagination-wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-top:1px solid var(--bd);}
.pagination-info{font-size:12px;color:var(--t4);}
.pagination-links{display:flex;gap:4px;}
.pagination-links a,
.pagination-links span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:32px;height:32px;padding:0 8px;
  border-radius:6px;font-size:12px;font-weight:600;
  border:1px solid var(--bd);color:var(--t2);
  transition:all .15s;
}
.pagination-links a:hover{border-color:var(--blue);color:var(--blue);background:var(--b-lt);}
.pagination-links span.current{background:var(--blue);color:#fff;border-color:var(--blue);}
.pagination-links span.dots{border:none;color:var(--t4);}

/* ── Dropdown Actions ── */
.dropdown{position:static;}
.dropdown-trigger{
  width:30px;height:30px;border-radius:6px;
  border:1px solid var(--bd);background:var(--white);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .15s;position:relative;
}
.dropdown-trigger:hover{border-color:var(--blue);background:var(--b-lt);}
.dropdown-trigger svg{width:14px;height:14px;stroke:var(--t3);}
.dropdown-trigger:hover svg{stroke:var(--blue);}
.dropdown-menu{
  display:none;position:fixed;
  background:var(--white);border:1px solid var(--bd);border-radius:10px;
  box-shadow:var(--sh2);min-width:150px;z-index:200;
  padding:4px;overflow:hidden;
}
.dropdown.open .dropdown-menu{display:block;}
.dropdown-item{
  display:flex;align-items:center;gap:8px;
  padding:7px 10px;border-radius:6px;
  font-size:12px;font-weight:500;color:var(--t2);
  cursor:pointer;transition:all .12s;border:none;background:none;width:100%;text-align:left;
  font-family:'Figtree',sans-serif;
}
.dropdown-item:hover{background:var(--off);color:var(--navy);}
.dropdown-item svg{width:13px;height:13px;stroke:currentColor;flex-shrink:0;}
.dropdown-item.danger{color:var(--red);}
.dropdown-item.danger:hover{background:var(--r-lt);}
.dropdown-sep{height:1px;background:var(--bd);margin:3px 6px;}

/* ── Modal ── */
.overlay{position:fixed;inset:0;background:rgba(15,30,60,.45);z-index:300;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .2s;}
.overlay.on{opacity:1;pointer-events:all;}
.modal{background:var(--white);border-radius:16px;width:100%;max-width:440px;box-shadow:var(--sh3);animation:fadeIn .2s ease;}
.modal.modal-lg{max-width:480px;}
.modal-head{padding:20px 22px 12px;}
.modal-head h3{font-size:16px;font-weight:800;color:var(--navy);margin-bottom:2px;}
.modal-head p{font-size:13px;color:var(--t3);}
.modal-body{padding:8px 22px 16px;}
.modal-foot{padding:14px 22px;border-top:1px solid var(--bd);display:flex;gap:8px;justify-content:flex-end;background:var(--off);border-radius:0 0 16px 16px;}

/* ── Detail Views ── */
.detail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px;}
.dg-cell{background:var(--off);border-radius:8px;padding:12px 14px;}
.dg-cell label{font-size:10px;color:var(--t2);display:block;margin-bottom:3px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;}
.dg-cell span{font-size:13px;font-weight:600;color:var(--navy);}
.dg-cell.span-2{grid-column:span 2;}
.dg-cell.span-4{grid-column:span 4;}
.detail-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px;}
.detail-title{display:flex;align-items:center;gap:12px;}
.back-link{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:500;color:var(--t3);margin-bottom:16px;transition:color .15s;}
.back-link:hover{color:var(--blue);}
.back-link svg{width:14px;height:14px;stroke:currentColor;}

/* ── Forms ── */
.form-card{background:var(--white);border:1px solid var(--bd);border-radius:14px;padding:24px;box-shadow:var(--sh);margin-bottom:16px;}
.form-card h3{font-size:14px;font-weight:700;color:var(--navy);margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--bd);}
.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.form-actions{display:flex;gap:8px;justify-content:flex-end;padding-top:16px;border-top:1px solid var(--bd);grid-column:span 3;}
.sf{margin-bottom:0;}
.sf.span-1{grid-column:span 1;}
.sf.span-2{grid-column:span 2;}
.sf.span-3{grid-column:span 3;}
.sf label{display:block;font-size:12px;font-weight:600;color:var(--t2);margin-bottom:5px;}
.sf input,.sf select,.sf textarea{width:100%;background-color:var(--white);border:1.5px solid var(--bd);border-radius:8px;padding:9px 12px;font-size:13px;color:var(--t1);outline:none;font-family:'Figtree',sans-serif;transition:all .2s;box-sizing:border-box;}
.sf input:focus,.sf select:focus,.sf textarea:focus{border-color:var(--blue);background-color:var(--white);box-shadow:0 0 0 3px rgba(26,86,219,.07);}
.sf textarea{resize:none;}
.sf input:disabled{background:var(--off);color:var(--t3);cursor:not-allowed;}
.sf .err-input{border-color:var(--red);background:var(--r-lt);}
.sf .err-msg{font-size:11px;color:var(--red);margin-top:3px;}
.sf .hint{font-size:11px;color:var(--t4);margin-top:3px;}

/* ── Phone Integrated Field ── */
.phone-integrated{display:flex;align-items:center;background:var(--white);border:1.5px solid var(--bd);border-radius:8px;overflow:hidden;transition:all .2s;}
.phone-integrated:focus-within{border-color:var(--blue);background:var(--white);box-shadow:0 0 0 3px rgba(26,86,219,.07);}
.phone-integrated .ph-divider{width:1px;height:22px;background:var(--bd);flex-shrink:0;}
.phone-integrated select{width:80px;background:transparent;border:none;border-radius:0;padding:9px 4px 9px 10px;box-shadow:none;}
.phone-integrated select:focus{border:none;box-shadow:none;}
.phone-integrated input{width:auto;background:transparent;border:none;border-radius:0;padding:9px 12px;box-shadow:none;}
.phone-integrated input:focus{border:none;box-shadow:none;}

/* ── Badges ── */
.system-badge{font-size:9px;font-weight:700;padding:1px 5px;border-radius:3px;background:var(--a-lt);color:var(--amber);text-transform:uppercase;letter-spacing:.04em;}
.group-badge{font-size:11px;font-weight:600;padding:3px 10px;border-radius:99px;background:transparent;border:1px solid var(--blue);color:var(--blue);white-space:nowrap;}

/* ── Role Permissions Page ── */
.rp-layout{display:grid;grid-template-columns:280px 1fr;gap:14px;align-items:start;}
.rp-layout > .card:first-child{position:sticky;top:82px;}
.role-item{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:10px;cursor:pointer;transition:all .15s;border:1.5px solid transparent;margin-bottom:2px;text-decoration:none;}
.role-item:hover{background:var(--off);}
.role-item.on{background:var(--b-lt);border-color:var(--blue);color:var(--blue);}
.role-item.on .ri-n{color:var(--blue);}
.role-item.on .ri-m{color:var(--blue);opacity:.7;}
.role-item.on .ri-cnt{background:var(--b-lt);color:var(--blue);font-weight:700;}
.ri-ico{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;background:var(--off);}
.role-item.on .ri-ico{background:var(--white);}
.ri-n{font-size:13px;font-weight:600;color:var(--navy);}
.ri-m{font-size:11px;color:var(--t4);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ri-cnt{margin-left:auto;font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px;background:var(--b-lt);color:var(--blue);flex-shrink:0;}
.role-item.on .ri-cnt{background:var(--white);}
.pg-title{font-size:11px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;margin-top:16px;display:flex;align-items:center;gap:8px;}
.pg-title:first-child{margin-top:0;}
.pg-title::after{content:'';flex:1;height:1px;background:var(--bd);}
.perm-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--bd);margin-bottom:0;}
.perm-item input[type=checkbox]{display:none;}
.switch{position:relative;width:38px;height:22px;flex-shrink:0;cursor:pointer;}
.switch::before{content:'';position:absolute;inset:0;background:var(--bd);border-radius:11px;transition:background .2s;}
.switch::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.15);}
.perm-item input:checked + .switch::before{background:var(--blue);}
.perm-item input:checked + .switch::after{transform:translateX(16px);}
.perm-name{font-size:13px;font-weight:600;color:var(--navy);}
.perm-desc{font-size:11px;color:var(--t3);margin-top:1px;line-height:1.5;}
.role-detail-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.role-detail-head h3{font-size:14px;font-weight:700;color:var(--navy);}
.role-detail-head p{font-size:12px;color:var(--t3);margin-top:2px;}

/* ── Verification Cards ── */
.vcard{background:var(--white);border:1px solid var(--bd);border-radius:14px;padding:20px;box-shadow:var(--sh);margin-bottom:12px;}
.vcard-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px;}
.vcard-info{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px;}
.vi-cell{background:var(--off);border-radius:8px;padding:10px 12px;}
.vi-cell label{font-size:10px;color:var(--t2);display:block;margin-bottom:2px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;}
.vi-cell span{font-size:12px;font-weight:600;color:var(--navy);}
.vcard-actions{display:flex;gap:8px;padding-top:14px;border-top:1px solid var(--bd);}

/* ── Contact Requests ── */
.msg-preview{font-size:12px;color:var(--t3);max-width:280px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.new-dot{width:8px;height:8px;border-radius:50%;background:var(--blue);display:inline-block;flex-shrink:0;}
.cr-grid{display:grid;grid-template-columns:1fr 340px;gap:14px;}
.cr-field{margin-bottom:16px;}
.cr-label{font-size:10px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;}
.cr-value{font-size:14px;color:var(--navy);font-weight:500;}
.cr-msg{background:var(--off);border:1px solid var(--bd);border-radius:10px;padding:16px 18px;font-size:14px;color:var(--t2);line-height:1.7;white-space:pre-line;}
.cr-reply{background:var(--g-lt);border:1px solid rgba(5,150,105,.15);border-radius:10px;padding:16px 18px;margin-top:16px;}
.cr-reply-label{font-size:10px;font-weight:700;color:var(--green);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;display:flex;align-items:center;gap:6px;}
.cr-reply-msg{font-size:14px;color:var(--t2);line-height:1.7;white-space:pre-line;}
.cr-reply-meta{font-size:11px;color:var(--t4);margin-top:8px;}

/* ── Empty State ── */
.empty-state{text-align:center;padding:60px 20px;color:var(--t4);}
.empty-state svg{margin:0 auto 12px;display:block;}
.empty-state p{font-size:14px;}

/* ── Profile Page ── */
.profile-header{display:flex;align-items:center;gap:14px;margin-bottom:24px;}
.profile-av{
  width:56px;height:56px;border-radius:14px;
  background:linear-gradient(135deg,var(--blue),var(--navy));
  display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:700;color:#fff;flex-shrink:0;
}
.profile-tabs{display:flex;gap:4px;margin-bottom:20px;}
.profile-tab{
  padding:8px 16px;border-radius:8px;font-size:13px;font-weight:600;
  color:var(--t3);transition:all .15s;border:1.5px solid transparent;
}
.profile-tab:hover{color:var(--navy);background:var(--off);}
.profile-tab.active{background:var(--b-lt);color:var(--blue);border-color:rgba(26,86,219,.12);}

/* ── Permission Matrix ── */
.pm-scroll{overflow:auto;max-height:calc(100vh - 180px);}
.pm-table{width:100%;border-collapse:collapse;min-width:600px;}
.pm-table thead th{padding:12px 14px;font-size:11px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.06em;border-bottom:2px solid var(--bd);background:var(--off);white-space:nowrap;text-align:center;position:sticky;top:0;z-index:3;}
.pm-perm-col{text-align:left!important;min-width:240px;position:sticky;left:0;z-index:4;background:var(--off)!important;}
.pm-role-col{min-width:110px;}
.pm-role-head{display:flex;flex-direction:column;align-items:center;gap:4px;}
.pm-role-name{font-size:11px;font-weight:700;color:var(--navy);}
.pm-role-count{font-size:10px;font-weight:700;padding:1px 6px;border-radius:4px;background:var(--b-lt);color:var(--blue);}
.pm-group-row td{padding:10px 14px;background:var(--off);border-bottom:1px solid var(--bd);border-top:1px solid var(--bd);}
.pm-group-name{font-size:11px;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:.08em;}
.pm-group-count{font-size:10px;font-weight:600;color:var(--t4);margin-left:6px;}
.pm-perm-row td{padding:10px 14px;border-bottom:1px solid var(--bd);}
.pm-perm-cell{position:sticky;left:0;z-index:1;background:var(--white);}
.pm-perm-name{font-size:13px;font-weight:600;color:var(--navy);}
.pm-perm-desc{font-size:11px;color:var(--t4);margin-top:1px;}
.pm-switch-cell{text-align:center;vertical-align:middle;}
.pm-perm-row:hover td{background:rgba(26,86,219,.015);}
.pm-perm-row:hover .pm-perm-cell{background:rgba(26,86,219,.015);}

/* ── Toggle Switch (sw) ── */
.sw{position:relative;display:inline-block;width:38px;height:22px;cursor:pointer;vertical-align:middle;}
.sw input{display:none;}
.sw-sl{position:absolute;inset:0;background:var(--bd);border-radius:11px;transition:background .2s;}
.sw-sl::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.15);}
.sw input:checked + .sw-sl{background:var(--blue);}
.sw input:checked + .sw-sl::after{transform:translateX(16px);}
.sw input:disabled + .sw-sl{opacity:.5;cursor:not-allowed;}

/* ── Chart Expand Button ── */
.chart-card{position:relative;display:flex;flex-direction:column;}
.chart-expand{
  width:28px;height:28px;min-width:28px;
  border:1.5px solid var(--bd);border-radius:8px;background:var(--white);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  color:var(--t4);transition:all .15s;z-index:10;
}
.chart-expand:hover{border-color:var(--blue);color:var(--blue);background:var(--b-lt);}
.chart-expand svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* ── Chart Fullscreen Modal ── */
.chart-fs-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:10000;
}
.chart-fs-overlay.on{display:block;}
.chart-fs-modal{
  display:none;position:fixed;top:24px;left:24px;right:24px;bottom:24px;z-index:10001;
  background:var(--white);border-radius:16px;border:1px solid var(--bd);
  box-shadow:0 24px 48px rgba(0,0,0,.15);padding:20px;
  flex-direction:column;
}
.chart-fs-modal.on{display:flex;}
.chart-fs-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-shrink:0;}
.chart-fs-title{font-size:17px;font-weight:700;color:var(--navy);}
.chart-fs-body{flex:1;min-height:0;position:relative;}
.chart-fs-body canvas{width:100%!important;height:100%!important;}
.chart-fs-body.has-legend{display:flex;align-items:center;gap:40px;}
.chart-fs-body.has-legend canvas{flex:1;min-width:0;max-width:70%;}
.chart-fs-body.has-legend .chart-fs-legend{flex-shrink:0;display:flex;flex-direction:column;gap:12px;}

/* ── Sitewide "line pill" convention ─────────────────────────────────
   Any status pill that pairs a tinted color background with matching
   colored text (e.g. `bg-b-lt text-blue`, `bg-green/10 text-green`,
   `bg-[#D1FAE5] text-[#059669]`) renders as: transparent bg + 1px
   colored border + colored text. Selectors require BOTH classes so
   we don't flatten decorative surfaces that only carry the bg color.
   Applies in both light and dark themes. */
[class~="bg-blue/10"][class~="text-blue"],
[class~="bg-green/10"][class~="text-green"],
[class~="bg-amber/10"][class~="text-amber"],
[class~="bg-red/10"][class~="text-red"],
[class~="bg-navy/10"][class~="text-navy"] {
    background-color: transparent !important;
    border-width: 1px !important;
    border-style: solid !important;
}
[class~="bg-blue/10"][class~="text-blue"]   { border-color: var(--blue) !important; }
[class~="bg-green/10"][class~="text-green"] { border-color: var(--green) !important; }
[class~="bg-amber/10"][class~="text-amber"] { border-color: var(--amber) !important; }
[class~="bg-red/10"][class~="text-red"]     { border-color: var(--red) !important; }
[class~="bg-navy/10"][class~="text-navy"]   { border-color: var(--navy) !important; }
[class~="bg-b-lt"][class~="text-blue"],
[class~="bg-g-lt"][class~="text-green"],
[class~="bg-a-lt"][class~="text-amber"],
[class~="bg-r-lt"][class~="text-red"] {
    background-color: transparent !important;
    border-width: 1px !important;
    border-style: solid !important;
}
[class~="bg-b-lt"][class~="text-blue"]  { border-color: var(--blue) !important; }
[class~="bg-g-lt"][class~="text-green"] { border-color: var(--green) !important; }
[class~="bg-a-lt"][class~="text-amber"] { border-color: var(--amber) !important; }
[class~="bg-r-lt"][class~="text-red"]   { border-color: var(--red) !important; }
[class~="bg-[#D1FAE5]"][class~="text-[#059669]"],
[class~="bg-[#D1FAE5]"][class~="text-[#065F46]"] { background-color: transparent !important; border: 1px solid var(--green) !important; }
[class~="bg-[#FEE2E2]"][class~="text-[#DC2626]"],
[class~="bg-[#FEE2E2]"][class~="text-[#B91C1C]"] { background-color: transparent !important; border: 1px solid var(--red) !important; }
[class~="bg-[#FEF3C7]"][class~="text-[#D97706]"] { background-color: transparent !important; border: 1px solid var(--amber) !important; }
[class~="bg-[#DBEAFE]"][class~="text-[#1A56DB]"],
[class~="bg-[#EEF2FF]"][class~="text-[#1A56DB]"] { background-color: transparent !important; border: 1px solid var(--blue) !important; }
[class~="bg-green-100"][class~="text-green-800"],
[class~="bg-green-100"][class~="text-green-700"],
[class~="bg-emerald-100"][class~="text-emerald-800"] { background-color: transparent !important; border: 1px solid var(--green) !important; }
[class~="bg-red-100"][class~="text-red-800"],
[class~="bg-red-100"][class~="text-red-700"] { background-color: transparent !important; border: 1px solid var(--red) !important; }
[class~="bg-amber-100"][class~="text-amber-800"],
[class~="bg-yellow-100"][class~="text-yellow-800"],
[class~="bg-orange-100"][class~="text-orange-800"] { background-color: transparent !important; border: 1px solid var(--amber) !important; }
[class~="bg-blue-100"][class~="text-blue-800"],
[class~="bg-blue-100"][class~="text-blue-700"],
[class~="bg-indigo-100"][class~="text-indigo-800"] { background-color: transparent !important; border: 1px solid var(--blue) !important; }
[class~="bg-purple-100"][class~="text-purple-800"],
[class~="bg-violet-100"][class~="text-violet-800"] { background-color: transparent !important; border: 1px solid var(--purple, #7C3AED) !important; }
[class~="bg-gray-100"][class~="text-gray-700"],
[class~="bg-gray-100"][class~="text-gray-800"] { background-color: transparent !important; border: 1px solid var(--bd2) !important; }

/* ── Modals as right-side panels (sitewide) ─────────────────────────────
   Convert the admin's centered `.modal` cards into right-anchored slide
   panels. SweetAlert2 uses its own `.swal2-container` root, unaffected. */
.overlay {
    align-items: stretch !important;
    justify-content: flex-end !important;
    padding: 0 !important;
}
.overlay .modal, .overlay .modal.modal-lg {
    width: min(560px, 100%) !important;
    max-width: min(560px, 100%) !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    box-shadow: -12px 0 40px rgba(15, 30, 60, .28) !important;
    overflow-y: auto !important;
    animation: none !important;
    display: flex !important;
    flex-direction: column !important;
}
.overlay .modal-foot {
    border-radius: 0 !important;
    margin-top: auto !important;
}

/* Also catch inline-styled admin overlays (settings authority/currency/
   country modals, subscriptions plan modal, companies TRN/license
   panels — style="position:fixed;inset:0" pattern). SweetAlert2's
   `.swal2-container` doesn't use these style tokens so it's naturally
   excluded, and we also filter it defensively. */
div[style*="position:fixed"][style*="inset:0"]:not(.swal2-container) {
    align-items: stretch !important;
    justify-content: flex-end !important;
    padding: 0 !important;
}
div[style*="position:fixed"][style*="inset:0"]:not(.swal2-container) > div:first-of-type {
    width: min(560px, 100%) !important;
    max-width: min(560px, 100%) !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    box-shadow: -12px 0 40px rgba(15, 30, 60, .28) !important;
    overflow-y: auto !important;
    margin: 0 !important;
}