/* ═══════════════════════════════════════════════════════
   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{
  --navy:#93B5E8; --navy2:#7BA3DB;
  --blue:#5B9CF6; --blue2:#6BA6FF;
  --b-lt:rgba(91,156,246,.12); --b-md:rgba(91,156,246,.18);
  --white:#1A1D23; --page:#111318; --off:#22252B; --sidebar-bg:#16181E;
  --t1:#E4E7EC; --t2:#C8CCD4; --t3:#8B92A0; --t4:#5A6070;
  --bd:#2E323A; --bd2:#3A3F49;
  --green:#34D399; --g-lt:rgba(52,211,153,.12); --g-md:rgba(52,211,153,.18);
  --amber:#FBBF24; --a-lt:rgba(251,191,36,.12);
  --red:#F87171; --r-lt:rgba(248,113,113,.12);
  --sh:0 1px 3px rgba(255,255,255,.06),0 1px 2px rgba(255,255,255,.04);
  --sh2:0 4px 16px rgba(255,255,255,.06);
  --sh3:0 12px 40px rgba(255,255,255,.08);
}
html.dark ::-webkit-scrollbar-thumb{background:#3A3F49;}
html.dark .sb-lmark{background:var(--blue);}
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(91,156,246,.04);}
html.dark .btn-primary{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 1px 6px rgba(91,156,246,.2);}
html.dark .btn-primary:hover{background:#4A8AE8;border-color:#4A8AE8;}
html.dark .si.on{background:rgba(26,86,219,.15);border-color:rgba(26,86,219,.2);color:var(--blue);}
html.dark .toast{background:#2E323A;color:var(--t1);}
html.dark .dm-sun{display:none;}
html.dark .dm-moon{display:block;}
.dm-moon{display:none;}
html.dark .btn-outline{background:var(--white);border-color:var(--bd);color:var(--t2);}
html.dark .btn-outline:hover{border-color:var(--bd2);background:var(--off);}
html.dark .btn-danger:hover{background:var(--r-lt);border-color:rgba(248,113,113,.25);}
html.dark .btn-success:hover{background:var(--g-lt);border-color:rgba(52,211,153,.25);}
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);}
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);}
html.dark input:focus,html.dark select:focus,html.dark textarea:focus{border-color:var(--blue);background-color:var(--white);}
html.dark .sb-portal-badge{background:var(--b-lt);border-color:rgba(91,156,246,.15);color:var(--blue);}

/* ═══════════════════════════════════════════════════════
   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:var(--b-lt);border:1px solid rgba(26,86,219,.12);
  border-radius:5px;padding:3px 8px;
  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{
  padding:8px 8px 4px;
  font-size:10px;font-weight:700;color:var(--t4);
  letter-spacing:.1em;text-transform:uppercase;
  transition:opacity .2s;white-space:nowrap;overflow:hidden;
}
.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;}
.si-badge{
  margin-left:auto;font-size:10px;font-weight:700;
  padding:1px 6px;border-radius:99px;
  background:var(--red);color:#fff;
}
.si-badge.amber{background:var(--amber);}
.si-badge.blue{background:var(--blue);}

/* ── 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{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);}
.tag-blue{background:var(--b-lt);color:var(--blue);}
.tag-green{background:var(--g-lt);color:var(--green);}
.tag-amber{background:var(--a-lt);color:var(--amber);}
.tag-red{background:var(--r-lt);color:var(--red);}
.tag-grey{background:var(--off);color:var(--t3);border:1px solid var(--bd);}
.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:visible;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;}

/* ── Toast ── */
.toast{position:fixed;bottom:20px;right:20px;background:var(--navy);color:#fff;border-radius:10px;padding:11px 16px;font-size:13px;z-index:999;transform:translateY(8px);opacity:0;transition:all .22s;display:flex;align-items:center;gap:8px;box-shadow:var(--sh3);max-width:300px;pointer-events:none;}
.toast.on{transform:translateY(0);opacity:1;pointer-events:auto;}
.toast-dot{width:6px;height:6px;border-radius:50%;background:#34D399;flex-shrink:0;}

/* ── 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;}

/* ── 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-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 8px;border-radius:5px;background:var(--b-lt);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-expand .icon-shrink{display:none;}
.chart-expand .icon-expand{display:inline;}

/* ── 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;}