/* =========================================================
   RecruitTrack — design system
   ========================================================= */
:root{
  --bg:#f4f5fa;
  --card:#ffffff;
  --border:#e7e9f2;
  --border-soft:#eef0f7;
  --text:#161a2b;
  --muted:#6b7080;
  --muted-soft:#9296a6;

  --primary:#2947d2;
  --primary-dark:#1d34ab;
  --primary-soft:#eef1fd;
  --primary-rgb:41,71,210;
  --primary-text:#fff;
  --accent:#FAA31A;
  --accent-dark:#dc8c0d;

  --green:#16a34a;
  --green-soft:#e5f8ec;
  --red:#dc2626;
  --red-soft:#fde9e9;
  --orange:#d97706;
  --orange-soft:#fef3e0;
  --sky:#0284c7;
  --blue-soft:#e8ecfc;

  --sidebar-bg:#12193b;
  --sidebar-bg-soft:#1a2350;
  --sidebar-text:#a9aed4;

  --tag-muted-bg:#f0f1f6; --tag-muted-text:#888888;
  --tag-accent-bg:#fef0d9; --tag-accent-text:#b16a06;
  --pill-close-bg:#f0f1f6; --pill-close-text:#666666;
  --disabled-bg:#eceef3; --disabled-text:#999999;
  --error-text:#b91c1c;
  --avatar-bg:#eeeeee;
  --scrollbar-thumb:#d3d6e3; --scrollbar-thumb-hover:#b7bad0; --scrollbar-track:transparent;
  --selection-bg:#c9d4fb; --selection-text:inherit;

  --radius:14px;
  --radius-sm:9px;
  --shadow-sm:0 1px 2px rgba(16,24,55,.05);
  --shadow-md:0 4px 16px rgba(16,24,55,.06), 0 1px 3px rgba(16,24,55,.05);
  --shadow-lg:0 20px 45px rgba(12,17,40,.16);
}

/* ---- Accent color presets (light mode). "blue" is the original default
   above, so it needs no override here - only the alternate picks do. ---- */
html[data-accent="purple"]{--primary:#7c3aed; --primary-dark:#6524c9; --primary-soft:#f2ecfe; --primary-rgb:124,58,237; --bg:#f8f6fd;}
html[data-accent="green"]{--primary:#059669; --primary-dark:#047a56; --primary-soft:#e3f7ef; --primary-rgb:5,150,105; --bg:#f3faf6;}
html[data-accent="red"]{--primary:#dc2626; --primary-dark:#b91c1c; --primary-soft:#fdeaea; --primary-rgb:220,38,38; --bg:#fdf5f5;}
html[data-accent="orange"]{--primary:#ea580c; --primary-dark:#c2410c; --primary-soft:#feead9; --primary-rgb:234,88,12; --bg:#fdf7f1;}
html[data-accent="pink"]{--primary:#db2777; --primary-dark:#b91c5c; --primary-soft:#fce7f1; --primary-rgb:219,39,119; --bg:#fdf4f8;}
html[data-accent="teal"]{--primary:#0d9488; --primary-dark:#0b7a70; --primary-soft:#e1f5f3; --primary-rgb:13,148,136; --bg:#f2faf9;}
html[data-accent="yellow"]{--primary:#FFCB56; --primary-dark:#F0AF1F; --primary-soft:#FFF6DE; --primary-rgb:255,203,86; --primary-text:#241a02; --bg:#FFFBF0;}

*{box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;}
body{
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  line-height:1.45;
}
a{text-decoration:none; color:inherit;}
h1,h2,h3{letter-spacing:-.01em;}
::selection{background:var(--selection-bg); color:var(--selection-text);}

/* Scrollbars */
::-webkit-scrollbar{width:9px; height:9px;}
::-webkit-scrollbar-track{background:var(--scrollbar-track);}
::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb); border-radius:20px;}
::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover);}

/* =========================================================
   Layout
   ========================================================= */
.app{display:flex; min-height:100vh;}

.sidebar{
  width:242px; background:linear-gradient(185deg, var(--sidebar-bg), #0b0f28);
  color:var(--sidebar-text);
  flex-shrink:0; display:flex; flex-direction:column; padding:22px 14px;
  position:sticky; top:0; height:100vh;
  overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.18) transparent;
}
.sidebar::-webkit-scrollbar{width:6px;}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18); border-radius:3px;}
.sidebar::-webkit-scrollbar-track{background:transparent;}
.sidebar .brand{
  padding:2px 8px 20px; font-weight:700; font-size:15.5px; color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:14px;
  display:flex; align-items:center; gap:10px; letter-spacing:-.01em;
}
.sidebar .brand img{height:28px; width:auto;}
.sidebar .brand span{flex:1; min-width:0;}
.sidebar-toggle{
  flex-shrink:0; width:24px; height:24px; border-radius:6px; border:none; background:transparent;
  color:var(--sidebar-text); display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .15s, color .15s;
}
.sidebar-toggle:hover{background:rgba(255,255,255,.1); color:#fff;}

/* Collapsed sidebar: icon-only rail, same shape the mobile breakpoint already uses below,
   just opt-in on any screen size via the toggle button instead of forced by viewport width. */
.sidebar.collapsed{width:72px; padding:22px 10px;}
.sidebar.collapsed .brand{justify-content:center; padding-bottom:14px;}
.sidebar.collapsed .brand span, .sidebar.collapsed nav a span, .sidebar.collapsed .divider,
.sidebar.collapsed .nav-badge{display:none;}
.sidebar.collapsed .sidebar-toggle{transform:rotate(180deg);}
.sidebar.collapsed nav a{justify-content:center;}
.sidebar.collapsed .brand img{margin:0 auto;}

.sidebar nav{display:flex; flex-direction:column; gap:2px;}
.sidebar nav a{
  display:flex; align-items:center; gap:12px; padding:10px 12px; color:var(--sidebar-text);
  font-size:13.5px; font-weight:500; border-radius:10px; transition:background .15s, color .15s;
}
.icon{flex-shrink:0; vertical-align:-3px;}
/* Nav items whose scope badge ("HO + STORE") is too wide to sit inline next to
   the label without wrapping mid-word (e.g. Google Settings, Orientation) -
   stack label above badge instead, both left-aligned under the icon. */
.sidebar nav a .nav-label-wrap{display:flex; flex-direction:column; align-items:flex-start; gap:3px; min-width:0; flex:1;}
.sidebar nav a .nav-label-wrap .nav-label{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;}
.sidebar nav a .nav-label-wrap .scope-tag{margin-left:0;}
.sidebar nav a:hover{background:rgba(255,255,255,.06); color:#fff;}
.sidebar nav a.active{background:var(--primary); color:var(--primary-text); box-shadow:0 4px 14px rgba(var(--primary-rgb),.35);}
.nav-badge{
  margin-left:auto; background:#dc2626; color:#fff; font-size:11px; font-weight:700;
  line-height:1; padding:3px 7px; border-radius:999px; min-width:18px; text-align:center;
}
.sidebar .divider{margin:16px 10px 6px; font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:#565c85;}

.main{flex:1; display:flex; flex-direction:column; min-width:0;}
.topbar{
  height:64px; background:rgba(255,255,255,.85); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; padding:0 28px;
  position:sticky; top:0; z-index:10;
}
.topbar h1{font-size:18px; margin:0; font-weight:700;}
.topbar-right{display:flex; align-items:center; gap:18px;}

/* ---- Notification bell ---- */
.notif-wrap{position:relative;}
.notif-bell{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; border:1px solid var(--border); background:#fff;
  color:var(--muted); cursor:pointer; transition:background .15s, color .15s;
}
.notif-bell:hover{background:#f7f8fc; color:var(--text);}
.notif-badge{
  position:absolute; top:-4px; right:-4px; min-width:17px; height:17px; padding:0 4px;
  display:flex; align-items:center; justify-content:center; border-radius:999px;
  background:var(--red); color:#fff; font-size:10px; font-weight:700; line-height:1;
  border:2px solid #fff; transition:transform .15s ease;
}
.notif-badge.notif-badge-pulse{animation:notifPulse 1.6s ease-in-out 2;}
@keyframes notifPulse{
  0%{transform:scale(1); box-shadow:0 0 0 0 rgba(220,38,38,.55);}
  30%{transform:scale(1.25); box-shadow:0 0 0 5px rgba(220,38,38,0);}
  100%{transform:scale(1); box-shadow:0 0 0 0 rgba(220,38,38,0);}
}

/* ---- Toasts ---- */
#toastStack{position:fixed; bottom:22px; right:22px; z-index:1200; display:flex; flex-direction:column; gap:10px; align-items:flex-end;}
.toast{
  display:flex; align-items:center; gap:10px; background:#1f2937; color:#fff; font-size:13px; font-weight:500;
  padding:12px 16px; border-radius:10px; box-shadow:0 10px 24px rgba(0,0,0,.22); max-width:340px; line-height:1.4;
  animation:toastIn .22s cubic-bezier(.34,1.56,.64,1);
}
.toast.toast-success{background:#15803d;}
.toast.toast-error{background:#b91c1c;}
.toast.toast-out{animation:toastOut .18s ease forwards;}
.toast .toast-icon{flex:0 0 auto; font-size:15px; line-height:1;}
@keyframes toastIn{from{opacity:0; transform:translateY(10px) scale(.96);} to{opacity:1; transform:translateY(0) scale(1);}}
@keyframes toastOut{from{opacity:1; transform:translateY(0);} to{opacity:0; transform:translateY(6px);}}

/* ---- Confetti burst ---- */
.confetti-piece{
  position:fixed; top:0; left:0; width:7px; height:7px; pointer-events:none; z-index:1300; border-radius:1px;
  will-change:transform, opacity;
}

/* ---- Status pill morph (select[data-field] recolored by wireStatusColors) ---- */
table select[data-field]{transition:background-color .25s ease, color .25s ease;}
table select[data-field].pill-morph{animation:pillMorph .35s ease;}
@keyframes pillMorph{0%{transform:scale(1);} 40%{transform:scale(1.08);} 100%{transform:scale(1);}}

/* ---- Skeleton loader ---- */
.skel{
  position:relative; overflow:hidden; background:var(--disabled-bg, #eef0f6); border-radius:6px; color:transparent !important;
}
.skel::after{
  content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation:skelShimmer 1.1s infinite;
}
@keyframes skelShimmer{100%{transform:translateX(100%);}}
.skel-text{display:inline-block; width:70%; height:1em; vertical-align:middle;}

/* ---- Hiring pipeline funnel ---- */
.funnel-wrap{display:flex; flex-direction:column; gap:12px;}
.funnel-row{display:grid; grid-template-columns:140px 1fr 110px; align-items:center; gap:12px;}
.funnel-label{font-size:12.5px; font-weight:600; color:var(--text);}
.funnel-track{background:var(--disabled-bg, #eef0f6); border-radius:8px; height:28px; overflow:hidden;}
.funnel-fill{
  height:100%; min-width:34px; border-radius:8px; background:linear-gradient(90deg, var(--primary), #6f8bf0);
  display:flex; align-items:center; justify-content:flex-end; padding-right:8px;
  transition:width .6s cubic-bezier(.22,.9,.3,1);
}
.funnel-count{color:#fff; font-size:12px; font-weight:700;}
.funnel-drop{font-size:11.5px; color:var(--muted); text-align:right;}
@media (max-width:640px){.funnel-row{grid-template-columns:100px 1fr 80px;}}
.notif-dropdown{
  position:absolute; top:calc(100% + 10px); right:0; width:360px; max-height:440px;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:0 12px 28px rgba(20,22,40,.14); z-index:50; overflow:hidden;
  display:flex; flex-direction:column;
}
.notif-dropdown-head{
  padding:13px 16px; border-bottom:1px solid var(--border-soft); display:flex;
  align-items:baseline; justify-content:space-between; font-weight:700; font-size:13.5px;
}
.notif-dropdown-head .notif-sub{font-weight:600; font-size:10.5px; color:var(--muted-soft); text-transform:uppercase; letter-spacing:.03em;}
.notif-body{overflow-y:auto; max-height:390px;}
.notif-section-label{
  padding:9px 16px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  color:var(--muted); background:var(--surface-soft, #f7f8fc); display:flex; align-items:center; gap:7px;
  position:sticky; top:0;
}
.notif-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 16px; border-bottom:1px solid var(--border-soft); text-decoration:none; color:inherit;
  transition:background .15s;
}
.notif-item:hover{background:var(--surface-soft, #f7f8fc);}
.notif-item-main{min-width:0;}
.notif-item-name{font-weight:600; font-size:13px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:230px;}
.notif-item-meta{font-size:11px; color:var(--muted); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:230px;}
.notif-item-date{font-size:10.5px; color:var(--muted-soft); margin-top:2px;}
.notif-item-recruiter{font-size:10.5px; color:var(--muted-soft); margin-top:1px;}
.notif-item-tag{white-space:nowrap; flex-shrink:0;}
.notif-empty{padding:26px 16px; text-align:center; color:var(--muted-soft); font-size:12.5px;}
.user-chip-wrap{position:relative;}
.user-chip{display:flex; align-items:center; gap:11px; background:none; border:none; padding:2px; margin:0; font:inherit; cursor:pointer; border-radius:10px; transition:background .15s;}
.user-chip:hover{background:var(--row-hover, #f4f6ff);}
.user-chip img{width:34px; height:34px; border-radius:50%; object-fit:cover; background:var(--avatar-bg); border:2px solid var(--card); box-shadow:0 0 0 1px var(--border);}
.user-chip .role{font-size:10.5px; color:var(--muted-soft); text-transform:uppercase; letter-spacing:.04em; font-weight:600;}

/* ---- Profile menu (accent color picker) ---- */
.profile-menu{
  position:absolute; top:calc(100% + 10px); right:0; width:220px;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:0 12px 28px rgba(20,22,40,.14); z-index:50; padding:14px 16px;
}
.profile-menu-label{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); margin-bottom:10px;}
.accent-swatches{display:flex; flex-wrap:wrap; gap:10px;}
.accent-swatch{
  width:26px; height:26px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0;
  background:var(--accent-swatch-color); box-shadow:0 0 0 1px var(--border);
  transition:transform .12s, box-shadow .12s;
}
.accent-swatch:hover{transform:scale(1.1);}
.accent-swatch.active{border-color:var(--card); box-shadow:0 0 0 2px var(--accent-swatch-color);}
.accent-swatch[data-accent="blue"]{--accent-swatch-color:#2947d2;}
.accent-swatch[data-accent="purple"]{--accent-swatch-color:#7c3aed;}
.accent-swatch[data-accent="green"]{--accent-swatch-color:#059669;}
.accent-swatch[data-accent="red"]{--accent-swatch-color:#dc2626;}
.accent-swatch[data-accent="orange"]{--accent-swatch-color:#ea580c;}
.accent-swatch[data-accent="pink"]{--accent-swatch-color:#db2777;}
.accent-swatch[data-accent="teal"]{--accent-swatch-color:#0d9488;}
.accent-swatch[data-accent="yellow"]{--accent-swatch-color:#FFCB56;}

.content{padding:26px 28px 40px; overflow:visible;}

/* =========================================================
   Cards
   ========================================================= */
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:20px 22px; margin-bottom:20px; box-shadow:var(--shadow-sm);}
.card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:10px;}
.card-head h2{font-size:15.5px; margin:0; font-weight:700;}
.card-head .head-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}

/* Toolbar: search + filters + sort, sits above a table */
.table-toolbar{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-bottom:14px; padding:10px 12px; background:#f7f8fc; border:1px solid var(--border-soft); border-radius:var(--radius-sm);
}
.table-toolbar input[type="text"], .table-toolbar select, .table-toolbar input[type="date"],
.dash-filter select, .dash-filter input[type="date"]{
  padding:7px 11px; border:1px solid var(--border); border-radius:8px; font-size:12.5px; font-family:inherit;
  background:#fff; color:var(--text); transition:border-color .15s, box-shadow .15s;
}
.table-toolbar input[type="text"]:focus, .table-toolbar select:focus, .table-toolbar input[type="date"]:focus,
.dash-filter select:focus, .dash-filter input[type="date"]:focus{
  outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft);
}
.table-toolbar input[type="text"]{min-width:200px; flex:1 1 200px;}
.table-toolbar .tb-label, .dash-filter .tb-label{font-size:10.5px; color:var(--muted-soft); text-transform:uppercase; letter-spacing:.04em; font-weight:600;}
.table-toolbar .tb-count{margin-left:auto; font-size:12px; color:var(--muted); white-space:nowrap; font-weight:600;}
.table-toolbar .tb-reset, .dash-filter .tb-reset{background:var(--input-bg, #fff); border:1px solid var(--border); color:var(--muted); border-radius:8px; padding:7px 12px; font-size:12px; cursor:pointer; font-weight:600; text-decoration:none; display:inline-block; transition:background .15s;}
.table-toolbar .tb-reset:hover, .dash-filter .tb-reset:hover{background:var(--row-hover, #eef0f7); color:var(--text);}

/* Compact square Prev/Next buttons for date-step controls (sits right against
   the date input, e.g. sourcing.php's "As of" and "Date" filter steppers) */
.date-step-btn{
  background:var(--input-bg, #fff); border:1px solid var(--border); color:var(--muted); border-radius:8px;
  width:30px; height:30px; padding:0; margin:0; font-size:15px; line-height:1; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; transition:background .15s;
}
.date-step-btn:hover{background:var(--row-hover, #eef0f7); color:var(--text);}

/* Pagination bar: sits below a paginated table */
.pagination{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px; padding-top:12px; border-top:1px solid var(--border-soft);}
.pagination .tb-count{font-size:12px; color:var(--muted); font-weight:600; white-space:nowrap;}
.pagination-links{display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin-left:auto;}
.pagination-links .page-link{padding:6px 11px; border:1px solid var(--border); border-radius:8px; font-size:12.5px; color:var(--text); text-decoration:none; background:#fff; font-weight:600; transition:background .15s;}
.pagination-links .page-link:hover{background:#eef0f7;}
.pagination-links .page-link.active{background:var(--primary); color:var(--primary-text); border-color:var(--primary);}
.per-page-select{padding:6px 10px; border:1px solid var(--border); border-radius:8px; font-size:12px; font-family:inherit; background:#fff; color:var(--text);}

/* Column-density toggle */
.col-toggle{
  background:#fff; border:1px solid var(--border); color:var(--primary); border-radius:8px; padding:7px 12px;
  font-size:12px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
.col-toggle:hover{background:var(--primary-soft);}

/* Scroll container: caps table height and keeps header/first col visible while scrolling */
.table-wrap{
  max-height:min(64vh, 660px); overflow:auto; border:1px solid var(--border); border-radius:var(--radius-sm);
}
.table-wrap table{min-width:900px;}

table{width:100%; border-collapse:collapse; font-size:12.8px;}
thead th{
  background:#f7f8fc; color:var(--muted); text-transform:uppercase; font-size:10.5px; font-weight:700;
  letter-spacing:.04em; padding:11px 10px; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap;
  position:sticky; top:0; z-index:3;
}
tbody td{padding:9px 10px; border-bottom:1px solid var(--border-soft); white-space:nowrap; vertical-align:middle;}
tbody tr:hover{background:var(--row-hover, #f4f6ff);}
td[contenteditable="true"]{cursor:text; border-radius:6px;}
td[contenteditable="true"]:hover{background:var(--row-hover, #f4f6ff);}
td[contenteditable="true"]:focus{outline:2px solid var(--primary); outline-offset:-2px; background:var(--primary-soft);}
td.saved-flash{animation:flash 1s ease;}
@keyframes flash{0%{background:#cdf3d6;}100%{background:transparent;}}

/* Freeze the first column of wide tables so context isn't lost while scrolling sideways */
table.freeze-first thead th:first-child, table.freeze-first tbody td:first-child{
  position:sticky; left:0; z-index:2; background:var(--table-head, #f7f8fc); font-weight:600;
}
table.freeze-first tbody td:first-child{background:var(--card, #fff); z-index:1;}
table.freeze-first tbody tr:hover td:first-child{background:var(--row-hover, #f4f6ff);}
table.freeze-first thead th:first-child{z-index:4;}

/* Freeze an arbitrary leading set of columns (marked .freeze-col); left offsets are
   computed in JS since column widths vary - see freezeColumns() in main.js */
table.freeze-cols thead th.freeze-col, table.freeze-cols tbody td.freeze-col{
  position:sticky; z-index:2; background:var(--table-head, #f7f8fc); font-weight:600;
}
table.freeze-cols tbody td.freeze-col{background:var(--card, #fff); z-index:1;}
table.freeze-cols tbody tr:hover td.freeze-col{background:var(--row-hover, #f4f6ff);}
table.freeze-cols thead th.freeze-col{z-index:4;}

/* Simplified column view: hide secondary columns until "Show all columns" is toggled */
table.simple-view .col-secondary{display:none;}

/* Full view (all columns shown): headers get tight with everything visible,
   so shrink header padding/font-size there to keep more rows on screen and
   cut down on horizontal header bulk. Simple view keeps the roomier default. */
table[data-table]:not(.simple-view) thead th{padding:6px 7px; font-size:9.5px;}

/* Column resize handles (Excel-style) */
thead th .col-resizer{
  position:absolute; top:0; right:0; bottom:0; width:10px; cursor:col-resize; z-index:6;
}
thead th .col-resizer::after{
  content:''; position:absolute; top:0; bottom:0; right:4px; width:2px; background:transparent; transition:background .12s;
}
thead th:hover .col-resizer::after{background:var(--border);}
thead th .col-resizer:hover::after, thead th .col-resizer.resizing::after{background:var(--primary); width:2px;}
body.col-resizing{cursor:col-resize; user-select:none;}

/* Free-text cells wrap instead of overflowing when a column is narrowed */
table[data-resizable="1"] tbody td[contenteditable="true"]{white-space:normal; word-break:break-word; overflow-wrap:break-word;}
table[data-resizable="1"] thead th{overflow:hidden; text-overflow:ellipsis; padding-right:14px;}

.date-added{color:var(--muted-soft); font-size:11.5px; white-space:nowrap;}

select.cell-select, input.cell-input{
  width:100%; border:1px solid transparent; background:transparent; font-size:12.8px; font-family:inherit; padding:5px 6px; border-radius:6px;
}
select.cell-select:hover, input.cell-input:hover{border-color:var(--border);}
select.cell-select:focus, input.cell-input:focus{outline:none; border-color:var(--primary); background:var(--primary-soft); box-shadow:0 0 0 3px var(--primary-soft);}

/* Multi-opening requisitions: Openings column + per-opening sub-rows */
/* Multi-opening requisitions: Openings column + per-opening sub-rows */
.openings-cell{white-space:nowrap;}
.openings-progress{margin-top:2px;}
.openings-toggle{
  font-size:10.5px;
  color:var(--muted);
  text-decoration:none;
}
.openings-toggle:hover{
  color:var(--primary);
  text-decoration:underline;
}

/* Fix gray opening area overlapping inputs during horizontal scroll */
tr.opening-row td{
  background:#fafaff !important;
  font-size:12px;
  position:relative;
  z-index:1;
}

/* Large "Opening X of X" gray area stays behind */
tr.opening-row td.col-secondary{
  position:relative !important;
  z-index:0 !important;
}

/* Inputs and selects must stay above the opening background */
tr.opening-row input,
tr.opening-row select{
  position:relative;
  z-index:2;
  background:#fff;
}

/* Fix sticky first column overlap */
table.freeze-first tbody tr.opening-row td:first-child{
  z-index:0 !important;
  background:#fafaff !important;
}

tr.opening-row td:first-child{
  color:var(--muted);
  font-style:italic;
}

.tag{display:inline-flex; align-items:center; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700; letter-spacing:.01em;}
.tag-green{background:var(--green-soft); color:#15803d;}
.tag-red{background:var(--red-soft); color:#b91c1c;}
.tag-orange{background:var(--orange-soft); color:#b45309;}
.tag-muted{background:var(--tag-muted-bg); color:var(--tag-muted-text);}
.tag-blue{background:var(--blue-soft); color:var(--primary);}
.tag-accent{background:var(--tag-accent-bg); color:var(--tag-accent-text);}
.scope-tag{padding:1px 7px; font-size:9.5px; margin-left:5px; vertical-align:middle; white-space:nowrap;}
.recruiter-dot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:middle; flex-shrink:0;}
.sidebar .divider{display:flex; align-items:center; gap:4px; white-space:nowrap;}

.btn{
  display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:9px; border:none;
  background:var(--primary); color:var(--primary-text); font-size:13px; font-weight:600; cursor:pointer;
  box-shadow:0 1px 2px rgba(16,24,55,.08); transition:background .15s, transform .1s, box-shadow .15s;
}
.btn:hover{background:var(--primary-dark); box-shadow:0 4px 12px rgba(var(--primary-rgb),.28);}
.btn:active{transform:translateY(1px);}
.btn.btn-sm{padding:6px 11px; font-size:12px;}
.btn.btn-outline{background:#fff; border:1px solid var(--border); color:var(--text); box-shadow:none;}
.btn.btn-outline:hover{background:#f2f3f8; box-shadow:none;}
.btn.btn-danger{background:var(--red);}
.btn.btn-danger:hover{background:#b91c1c; box-shadow:0 4px 12px rgba(220,38,38,.28);}

.form-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
.form-group{display:flex; flex-direction:column; gap:6px;}
.form-group label{font-size:12.5px; font-weight:600; color:var(--muted);}
.form-group input, .form-group select, .form-group textarea{
  padding:10px 12px; border:1px solid var(--border); border-radius:9px; font-size:13.5px; font-family:inherit;
  transition:border-color .15s, box-shadow .15s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{
  outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft);
}

.modal-overlay{
  position:fixed; inset:0; background:rgba(11,14,32,.55); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; z-index:999; animation:fadeIn .15s ease;
}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.modal-box{background:#fff; border-radius:18px; padding:28px; width:420px; max-width:92vw; box-shadow:var(--shadow-lg); animation:modalPop .2s cubic-bezier(.34,1.56,.64,1);}
@keyframes modalPop{from{opacity:0; transform:scale(.94) translateY(6px);} to{opacity:1; transform:scale(1) translateY(0);}}
.modal-box h3{margin-top:0; font-size:17px;}
.modal-box .avatar-preview{
  width:92px; height:92px; border-radius:50%; object-fit:cover; background:var(--avatar-bg); display:block; margin:0 auto 14px;
  border:3px solid var(--primary-soft);
}

.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(900px 500px at 12% 10%, rgba(41,71,210,.55), transparent 60%),
    radial-gradient(700px 500px at 90% 85%, rgba(250,163,26,.30), transparent 55%),
    linear-gradient(160deg,#0d1330,#0b0f28 60%,#0a0e22);
  padding:20px;
}
.login-card{background:#fff; border-radius:20px; padding:40px 36px; width:380px; max-width:100%; box-shadow:var(--shadow-lg);}
.login-card h1{font-size:20px; margin:0 0 4px; text-align:center; font-weight:800;}
.login-card p.sub{color:var(--muted); font-size:13px; margin:0 0 24px; text-align:center;}
.login-card input, .login-card select{width:100%; padding:12px 13px; border:1px solid var(--border); border-radius:10px; margin-bottom:12px; font-size:14px; font-family:inherit; color:var(--text); background:#fff; transition:border-color .15s, box-shadow .15s;}
.login-card select{appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; cursor:pointer;}
.login-card input:focus, .login-card select:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft);}
.login-card .btn{width:100%; justify-content:center; padding:12px;}
.error-box{background:var(--red-soft); color:var(--error-text); padding:10px 13px; border-radius:9px; font-size:12.5px; margin-bottom:14px; font-weight:500;}

.pill-badge{padding:3px 9px; border-radius:7px; font-size:10.5px; font-weight:700; letter-spacing:.03em;}
.pill-open{background:var(--green-soft); color:#15803d;}
.pill-close{background:var(--pill-close-bg); color:var(--pill-close-text);}

.pos-remove-btn{display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; flex-shrink:0; border:none; border-radius:50%; background:var(--disabled-bg); color:var(--muted); font-size:10px; line-height:1; padding:0; cursor:pointer; transition:background .15s, color .15s;}
.pos-remove-btn:hover{background:var(--red); color:#fff;}

.action-btn{border:none; background:var(--primary); color:var(--primary-text); padding:6px 12px; border-radius:7px; font-size:11.5px; cursor:pointer; font-weight:600; transition:background .15s;}
.action-btn:hover{background:var(--primary-dark);}
.action-btn:disabled{background:var(--disabled-bg); color:var(--disabled-text); cursor:not-allowed; opacity:.7;}
.action-btn:disabled:hover{background:var(--disabled-bg);}
.action-btn.done{background:var(--disabled-bg); color:var(--disabled-text); cursor:default;}
.action-btn.action-btn-blacklist{background:var(--card, #fff); border:1.5px solid var(--red); color:var(--red); padding:4.5px 10px;}
.action-btn.action-btn-blacklist:hover{background:var(--red); color:#fff;}
.blacklist-btn-wrap{display:block; margin-top:6px;}
.blacklist-btn-wrap .action-btn{white-space:nowrap;}
.action-btn.blacklisted-badge{background:var(--red-soft); color:#b91c1c; cursor:default;}

.empty-state{text-align:center; padding:44px 10px; color:var(--muted-soft); font-size:13.5px;}
.dash-grid .card .empty-state{flex:1; display:flex; align-items:center; justify-content:center; padding:10px;}

.badge-count{background:var(--primary); color:var(--primary-text); font-size:11px; padding:1px 8px; border-radius:20px; margin-left:6px; font-weight:700;}

.link-box{display:flex; gap:8px; align-items:center; background:#f7f8fc; border:1px solid var(--border); padding:9px 11px; border-radius:9px; font-size:12px; word-break:break-all;}

@media(max-width:900px){
  .sidebar{width:72px; padding:18px 10px;}
  .sidebar .brand, .sidebar nav a span, .sidebar .divider{display:none;}
  .sidebar nav a{justify-content:center;}
  .form-grid{grid-template-columns:1fr;}
  .content{padding:18px 16px 32px; overflow:visible;}
}

/* =========================================================
   Dashboard
   ========================================================= */
.dash-filter{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:18px;}
.dash-filter select{padding:8px 12px; border:1px solid var(--border); border-radius:9px; background:#fff; font-size:13px; font-family:inherit;}
.dash-filter .btn{padding:8px 16px;}

.kpi-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px; align-items:stretch;}
.kpi-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;}
/* =========================================================
   Dashboard tooltips - never clip above the dashboard
   ========================================================= */
[data-tooltip]{
  position:relative;
  cursor:help;
}

[data-tooltip]::after{
  content:attr(data-tooltip);
  position:absolute;
  top:calc(100% + 10px);
  bottom:auto;
  left:50%;
  transform:translateX(-50%) translateY(-4px);
  background:#1f2937;
  color:#fff;
  font-size:12px;
  font-weight:500;
  line-height:1.55;
  white-space:pre-line;
  text-align:left;
  text-transform:none;
  letter-spacing:normal;
  padding:10px 12px;
  border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.22);
  width:max-content;
  max-width:320px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
  z-index:9999;
}

.tip-wide[data-tooltip]::after{
  max-width:380px;
}

[data-tooltip]::before{
  content:'';
  position:absolute;
  top:calc(100% + 4px);
  bottom:auto;
  left:50%;
  transform:translateX(-50%);
  border:6px solid transparent;
  border-bottom-color:#1f2937;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .15s ease;
  z-index:10000;
}

[data-tooltip]:hover{
  z-index:100;
}

[data-tooltip]:hover::after{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}

[data-tooltip]:hover::before{
  opacity:1;
  visibility:visible;
}

.kpi-card{
  position:relative;
  overflow:visible !important;
}

.kpi-card:hover{
  z-index:100;
}

/* Small screens: keep the tooltip inside the viewport. */
@media(max-width:640px){
  [data-tooltip]::after{
    position:fixed;
    top:auto;
    bottom:16px;
    left:16px;
    right:16px;
    transform:translateY(6px);
    width:auto;
    max-width:none;
    max-height:50vh;
    overflow-y:auto;
  }
  .tip-wide[data-tooltip]::after{max-width:none;}
  [data-tooltip]::before{display:none;}
  [data-tooltip]:hover::after{transform:translateY(0);}
}
.card-head{position:relative;}
.card-head h2{display:inline-flex; align-items:center; gap:6px;}
.tip-icon{display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:50%; background:var(--border); color:var(--muted); font-size:10.5px; font-weight:800; font-style:normal; line-height:1; cursor:help; flex-shrink:0;}
.tip-icon:hover{background:var(--primary); color:var(--primary-text);}
.kpi-card .kpi-label{font-size:11.5px; font-weight:700; letter-spacing:.03em; color:var(--muted); text-transform:uppercase; margin-bottom:8px;}
.kpi-card .kpi-value{font-size:26px; font-weight:800; color:var(--text); margin-top:auto;}
.kpi-card.kpi-green .kpi-value{color:#15803d;}
.kpi-card.kpi-red .kpi-value{color:var(--red);}
.kpi-card.kpi-orange .kpi-value{color:var(--orange);}
.kpi-card.kpi-sky .kpi-value{color:var(--sky);}
.kpi-card.kpi-split .kpi-split-row{display:flex; gap:14px; margin-top:auto;}
.kpi-card.kpi-split .kpi-split-item{flex:1;}
.kpi-card.kpi-split .kpi-split-value{font-size:18px; font-weight:800; color:var(--text);}
.kpi-card.kpi-split .kpi-split-value.kpi-green{color:#15803d;}
.kpi-card.kpi-split .kpi-split-value.kpi-red{color:var(--red);}
.kpi-card.kpi-split .kpi-split-value.kpi-orange{color:var(--orange);}
.kpi-card.kpi-split .kpi-split-value.kpi-blue{color:var(--primary);}
.kpi-card.kpi-primary .kpi-value{color:var(--primary);}

.dash-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:18px; align-items:stretch;}
.dash-grid .card{margin-bottom:0; display:flex; flex-direction:column;}
.dash-grid .card .chart-box{flex:1;}
@media(max-width:1100px){ .dash-grid{grid-template-columns:1fr;} .kpi-grid{grid-template-columns:repeat(2,1fr);} }

/* Sourcing module - daily quota progress bar */
.quota-bar-track{width:100%; height:10px; border-radius:6px; background:var(--border-soft); overflow:hidden; margin-top:8px;}
.quota-bar-fill{height:100%; border-radius:6px; background:var(--primary); transition:width .3s ease;}
.quota-bar-fill.quota-met{background:var(--green);}
.quota-bar-label{font-size:11.5px; color:var(--muted); margin-top:6px;}

.funnel-table{width:100%; border-collapse:collapse; font-size:13px;}
.funnel-table th, .funnel-table td{padding:8px 10px; border-bottom:1px solid var(--border-soft); text-align:left;}
.funnel-table th{color:var(--muted); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.02em;}
.funnel-table td.fv{font-weight:700; text-align:right;}

/* Individual Fill Rate report */
.fillrate-overall{margin-bottom:18px;}
.fillrate-recruiters{display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:18px; align-items:start;}
.fillrate-scroll{max-height:480px; overflow-y:auto; border:1px solid var(--border-soft); border-radius:10px;}
.fillrate-table{width:100%; border-collapse:collapse;}
.fillrate-table caption{caption-side:top; text-align:left; padding:10px 12px; font-weight:700; font-size:12.5px; background:#f4f6fb; color:var(--text); border-bottom:1px solid var(--border-soft); position:sticky; top:0; z-index:2;}
.fillrate-table th, .fillrate-table td{padding:7px 10px; font-size:12.5px;}
.fillrate-table thead th{position:sticky; top:34px; background:#fff; z-index:1; border-bottom:1px solid var(--border-soft);}
.fillrate-total-row td{font-weight:700; background:#fdf6e3; border-top:1px solid var(--border); position:sticky; bottom:0;}

.chart-box{position:relative; height:230px;}
.chart-box.tall{height:280px;}

/* =========================================================
   Store Requisitions page — scoped visual polish
   ========================================================= */
/* Toolbar: group each label+control pair so related filters read as a unit,
   with a light divider separating "who/what" filters from "where" filters. */
.store-toolbar{gap:14px 10px; padding:12px 14px;}
.store-toolbar .tb-group{display:flex; align-items:center; gap:7px;}
.store-toolbar .tb-divider{width:1px; align-self:stretch; background:var(--border); margin:0 2px;}
@media(max-width:900px){ .store-toolbar .tb-divider{display:none;} }

/* Zebra striping — this table runs 19+ columns wide, so a faint alternating
   background helps the eye track a single row across a long horizontal scroll. */
table[data-table="store_requisitions"] tbody tr:nth-child(even) td{background:#fbfbfe;}
table[data-table="store_requisitions"] tbody tr:nth-child(even) td.freeze-col{background:#fbfbfe;}
table[data-table="store_requisitions"] tbody tr:hover td,
table[data-table="store_requisitions"] tbody tr:hover td.freeze-col{background:#f4f6ff;}

/* Slightly roomier row height than the dense default — this table is read
   more than it's rapid-fire edited, so favor legibility over density. */
table[data-table="store_requisitions"] tbody td{padding:10px 10px;}

/* Status select: match the pill look used elsewhere instead of a plain
   dropdown, so OPEN/POOLING/HOLD/CANCEL/CLOSED are scannable at a glance
   (color applied inline per-row by wireStatusColors in JS). */
table[data-table="store_requisitions"] td:has(select[data-field="req_status"]) select{
  border:none; border-radius:20px; padding:4px 22px 4px 10px; font-size:11px; font-weight:700;
  letter-spacing:.01em; cursor:pointer; min-width:98px; box-sizing:border-box;
}

.recruiter-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:20px;}
@media(max-width:900px){ .recruiter-grid{grid-template-columns:1fr;} }
.recruiter-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px 18px; box-shadow:var(--shadow-sm); cursor:pointer; transition:box-shadow .15s, transform .15s;
  display:flex; flex-direction:column; gap:10px; justify-content:space-between;
}
.recruiter-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.recruiter-card .rc-top{display:flex; align-items:center; gap:12px;}
.recruiter-card img{width:44px; height:44px; border-radius:50%; object-fit:cover; border:2px solid var(--primary-soft);}
.recruiter-card .rc-name{font-weight:700; font-size:14px;}
.recruiter-card .rc-sub{font-size:11.5px; color:var(--muted);}
.recruiter-card .rc-rate{font-size:24px; font-weight:800; color:var(--primary);}
.recruiter-card .rc-chart{height:36px;}

.mini-table{width:100%; border-collapse:collapse; font-size:13px;}
.mini-table th, .mini-table td{padding:8px 10px; border-bottom:1px solid var(--border-soft); text-align:left;}
.mini-table th{color:var(--muted); font-weight:600; font-size:11px; text-transform:uppercase;}
.mini-table td.rank{width:34px; font-weight:700; color:var(--primary);}
.mini-table td.num{text-align:right; font-weight:700;}

.modal-box.modal-wide{width:560px;}
.rc-modal-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:16px 0;}
.rc-modal-stats div{background:#f7f8fc; border-radius:10px; padding:10px 12px; text-align:center;}
.rc-modal-stats .v{font-size:19px; font-weight:800; color:var(--text);}
.rc-modal-stats .l{font-size:10.5px; color:var(--muted); text-transform:uppercase; font-weight:600; margin-top:2px;}
/* Collapsible store section for admin */
details.store-section summary {
  cursor: pointer;
  list-style: none;        /* Remove default triangle */
  display: flex;
  align-items: center;
  gap: 0.5rem;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
details.store-section summary::-webkit-details-marker {
  display: none;           /* Remove default triangle in Chrome/Safari */
}
details.store-section summary:focus,
details.store-section summary:focus-visible {
  outline: none;
  box-shadow: none;
}
details.store-section summary::after {
  content: "▶";
  font-size: 0.7rem;
  margin-left: auto;
  transition: transform 0.2s;
}
details.store-section[open] summary::after {
  transform: rotate(90deg);
}
details.store-section .divider {
  width: 100%;
  margin: 0;               /* Reset margin to fit inside summary */
}
/* Ensure the divider style is preserved when inside summary */
details.store-section .divider {
  padding: 0.75rem 1rem;
  color: var(--text-muted, #6b7280);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
/* =========================================================
   THEME + WIDE TABLE FOUNDATION
   ========================================================= */
/* Wide tracker tables must grow to their content instead of compressing every
   column to the viewport. The wrapper provides the horizontal scrollbar. */
.table-wrap{overflow:auto;}
.table-wrap > table,
table[data-table]{
  width:max-content;
  min-width:100%;
  table-layout:auto;
}
table[data-resizable="1"]{table-layout:fixed; width:max-content; min-width:100%;}
table[data-resizable="1"] tbody td{max-width:none;}

/* Use the design tokens for frequently hard-coded light-mode surfaces. */
.table-toolbar{background:var(--surface-soft, #f7f8fc);}
.table-toolbar input[type="text"], .table-toolbar select, .table-toolbar input[type="date"],
.dash-filter select, .dash-filter input[type="date"],
.pagination-links .page-link, .per-page-select, .col-toggle,
.date-step-btn, .btn.btn-outline, .notif-bell{background:var(--input-bg, #fff); color:var(--text);}
thead th{background:var(--table-head, #f7f8fc); color:var(--muted);}
tbody td{color:var(--text);}
table.freeze-first tbody td:first-child,
table.freeze-cols tbody td.freeze-col{background:var(--card); color:var(--text);}
table.freeze-first tbody tr:hover td:first-child,
table.freeze-cols tbody tr:hover td.freeze-col{background:var(--row-hover, #f4f6ff);}
tr.opening-row td{background:var(--row-alt, #fafaff) !important;}
.fillrate-table caption{background:var(--surface-soft, #f4f6fb); color:var(--text);}
.fillrate-table thead th{background:var(--table-head, #fff);}
.rc-modal-stats div{background:var(--surface-soft, #f7f8fc);}
.link-box{background:var(--surface-soft, #f7f8fc);}

/* A few tracker pages intentionally used inline color:black for candidate names.
   That becomes unreadable in dark mode, so the theme owns the final text color. */
.candidate-name-trigger{color:var(--text) !important;}

html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0d1120;
  --card:#171c2d;
  --border:#30374c;
  --border-soft:#252c40;
  --text:#eef2f8;
  --muted:#aeb6c9;
  --muted-soft:#7f89a3;
  --primary:#647cf0;
  --primary-dark:#8196ff;
  --primary-soft:#232d52;
  --primary-rgb:100,124,240;
  --green-soft:#163b27;
  --red-soft:#42242a;
  --orange-soft:#432f17;
  --blue-soft:#202b50;
  --surface-soft:#1c2234;
  --input-bg:#101525;
  --table-head:#1c2234;
  --row-hover:#222a40;
  --row-alt:#191f31;
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow-md:0 4px 16px rgba(0,0,0,.28),0 1px 3px rgba(0,0,0,.24);
  --shadow-lg:0 20px 45px rgba(0,0,0,.48);

  --tag-muted-bg:#262c40; --tag-muted-text:#9aa1b8;
  --tag-accent-bg:#4a3416; --tag-accent-text:#f0b358;
  --pill-close-bg:#262c40; --pill-close-text:#9aa1b8;
  --disabled-bg:#252c40; --disabled-text:#767e93;
  --error-text:#f19999;
  --avatar-bg:#252c40;
  --scrollbar-thumb:#3b445b; --scrollbar-thumb-hover:#4a5570; --scrollbar-track:#111525;
  --selection-bg:#3c4d89; --selection-text:#fff;
}

/* ---- Accent color presets (dark mode) - lighter/more saturated so they
   stay legible against the dark surfaces above. "blue" again needs no
   override, since it matches html[data-theme="dark"]'s own default. ---- */
html[data-theme="dark"][data-accent="purple"]{--primary:#a78bfa; --primary-dark:#c4b1fd; --primary-soft:#312454; --primary-rgb:167,139,250; --bg:#120e1f;}
html[data-theme="dark"][data-accent="green"]{--primary:#34d399; --primary-dark:#5eebb8; --primary-soft:#153b2c; --primary-rgb:52,211,153; --bg:#0c1518;}
html[data-theme="dark"][data-accent="red"]{--primary:#f87171; --primary-dark:#fca5a5; --primary-soft:#452226; --primary-rgb:248,113,113; --bg:#180f13;}
html[data-theme="dark"][data-accent="orange"]{--primary:#fb923c; --primary-dark:#fdba74; --primary-soft:#4a2a12; --primary-rgb:251,146,60; --bg:#181310;}
html[data-theme="dark"][data-accent="pink"]{--primary:#f472b6; --primary-dark:#f9a8d4; --primary-soft:#4a1f37; --primary-rgb:244,114,182; --bg:#180f17;}
html[data-theme="dark"][data-accent="teal"]{--primary:#2dd4bf; --primary-dark:#5eead4; --primary-soft:#123c38; --primary-rgb:45,212,191; --bg:#0c1718;}
html[data-theme="dark"][data-accent="yellow"]{--primary:#FFCB56; --primary-dark:#FFD87A; --primary-soft:#3a2c0a; --primary-rgb:255,203,86; --primary-text:#241a02; --bg:#120e05;}

html[data-theme="dark"] body{background:var(--bg);color:var(--text);}
html[data-theme="dark"] .main{background:var(--bg);}
html[data-theme="dark"] .topbar{background:rgba(23,28,45,.94);border-bottom-color:var(--border);}
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-box,
html[data-theme="dark"] .notif-dropdown,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .profile-menu,
html[data-theme="dark"] .route-menu-list{background:var(--card);color:var(--text);border-color:var(--border);}
html[data-theme="dark"] .table-toolbar,
html[data-theme="dark"] .dash-filter,
html[data-theme="dark"] .link-box,
html[data-theme="dark"] .rc-modal-stats div{background:var(--surface-soft);color:var(--text);border-color:var(--border);}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .table-toolbar input[type="text"],
html[data-theme="dark"] .table-toolbar select,
html[data-theme="dark"] .table-toolbar input[type="date"],
html[data-theme="dark"] .dash-filter select,
html[data-theme="dark"] .dash-filter input[type="date"],
html[data-theme="dark"] .pagination-links .page-link,
html[data-theme="dark"] .per-page-select,
html[data-theme="dark"] .date-step-btn,
html[data-theme="dark"] .col-toggle,
html[data-theme="dark"] .notif-bell,
html[data-theme="dark"] .login-card input,
html[data-theme="dark"] .login-card select,
html[data-theme="dark"] .form-group input,
html[data-theme="dark"] .form-group select,
html[data-theme="dark"] .form-group textarea,
html[data-theme="dark"] select.cell-select,
html[data-theme="dark"] input.cell-input{
  background:var(--input-bg);
  color:var(--text);
  border-color:var(--border);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{color:#69748d;}
html[data-theme="dark"] table thead th{background:var(--table-head);color:#cbd3e3;border-color:var(--border);}
html[data-theme="dark"] table tbody td{color:var(--text);border-color:var(--border-soft);}
html[data-theme="dark"] table tbody tr:hover td{background:var(--row-hover);}
html[data-theme="dark"] table.freeze-first tbody td:first-child,
html[data-theme="dark"] table.freeze-cols tbody td.freeze-col{background:var(--card);}
html[data-theme="dark"] table.freeze-first tbody tr:hover td:first-child,
html[data-theme="dark"] table.freeze-cols tbody tr:hover td.freeze-col{background:var(--row-hover);}
html[data-theme="dark"] tr.opening-row td{background:var(--row-alt) !important;}
html[data-theme="dark"] table[data-table="store_requisitions"] tbody tr:nth-child(even) td{background:#151b2c;}
html[data-theme="dark"] table[data-table="store_requisitions"] tbody tr:nth-child(even) td.freeze-col{background:#151b2c;}
html[data-theme="dark"] table[data-table="store_requisitions"] tbody tr:hover td,
html[data-theme="dark"] table[data-table="store_requisitions"] tbody tr:hover td.freeze-col{background:var(--row-hover);}
html[data-theme="dark"] .fillrate-table caption,
html[data-theme="dark"] .fillrate-table thead th{background:var(--table-head);color:var(--text);}
html[data-theme="dark"] .fillrate-total-row td{background:#3a2e17;}
html[data-theme="dark"] .btn.btn-outline,
html[data-theme="dark"] .theme-toggle{background:var(--card);color:var(--text);border-color:var(--border);}
html[data-theme="dark"] .btn.btn-outline:hover,
html[data-theme="dark"] .table-toolbar .tb-reset:hover,
html[data-theme="dark"] .date-step-btn:hover,
html[data-theme="dark"] .pagination-links .page-link:hover,
html[data-theme="dark"] .col-toggle:hover,
html[data-theme="dark"] .notif-bell:hover{background:#252d43;color:var(--text);}
html[data-theme="dark"] .action-btn.action-btn-blacklist{background:transparent;}
html[data-theme="dark"] .user-chip img{border-color:var(--card);background:#252c40;}
html[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#3b445b;}
html[data-theme="dark"] ::-webkit-scrollbar-track{background:#111525;}
html[data-theme="dark"] ::selection{background:#3c4d89;color:#fff;}

.theme-toggle{
  width:38px;height:38px;border:1px solid var(--border);border-radius:50%;
  background:var(--card);color:var(--text);display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;flex:0 0 38px;transition:background .15s,border-color .15s,color .15s,transform .15s;
}
.theme-toggle:hover{background:var(--primary-soft);border-color:var(--primary);}
.theme-toggle:active{transform:scale(.95);}
.theme-icon{display:none;width:19px;height:19px;align-items:center;justify-content:center;}
.theme-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
html[data-theme="light"] .theme-icon-sun{display:flex;}
html[data-theme="dark"] .theme-icon-moon{display:flex;}

/* Standalone pages (candidate forms / login) still inherit the selected theme. */
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .candidate-form-card,
html[data-theme="dark"] .payment-card,
html[data-theme="dark"] .job-fair-card{background:var(--card);color:var(--text);border-color:var(--border);}

@media (prefers-reduced-motion:no-preference){
  body,.topbar,.card,.modal-box,input,select,textarea,.theme-toggle{transition:background-color .18s ease,color .18s ease,border-color .18s ease;}
}

/* ---- "Yellow" accent gets an actual neon glow, not just a flat fill -
   the color is bright/saturated enough to carry it, unlike the other
   accents which would just look blown-out with the same treatment. ---- */
html[data-accent="yellow"] .sidebar nav a.active{
  box-shadow:0 0 22px 2px rgba(255,203,86,.55), 0 4px 14px rgba(255,203,86,.4);
}
html[data-accent="yellow"] .btn{box-shadow:0 0 14px rgba(255,203,86,.35), 0 1px 2px rgba(16,24,55,.08);}
html[data-accent="yellow"] .btn:hover{box-shadow:0 0 22px rgba(255,203,86,.6), 0 4px 12px rgba(255,203,86,.4);}
html[data-accent="yellow"] .action-btn:hover{box-shadow:0 0 12px rgba(255,203,86,.5);}
html[data-theme="dark"][data-accent="yellow"] .sidebar nav a.active{
  box-shadow:0 0 26px 3px rgba(255,203,86,.65), 0 4px 14px rgba(255,203,86,.45);
}
html[data-theme="dark"][data-accent="yellow"] .btn{box-shadow:0 0 18px rgba(255,203,86,.5);}
html[data-theme="dark"][data-accent="yellow"] .btn:hover{box-shadow:0 0 28px rgba(255,203,86,.75);}

/* Custom accent color picker */
.accent-custom{
  position:relative; width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; border:2px solid var(--border); overflow:hidden; cursor:pointer;
  background:conic-gradient(from 0deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);
  box-shadow:0 0 0 1px var(--border); transition:transform .15s ease, box-shadow .15s ease;
}
.accent-custom:hover{transform:scale(1.1);}
.accent-custom input[type="color"]{
  position:absolute; inset:-4px; width:36px; height:36px; padding:0; border:0; opacity:0; cursor:pointer;
}
.accent-custom-icon{
  position:relative; z-index:1; width:18px; height:18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.9);
  color:#333; font-size:16px; line-height:1; pointer-events:none;
}
html[data-theme="dark"] .accent-custom-icon{background:rgba(20,24,36,.9);color:#fff;}