/* ============================= TOKENS =============================
   From www.berkeleyuae.com CSS variables:
   Primary: Blue #2F3192 · Green #00683A · Yellow #FBB041 · Red #BD1E2D · Grey #6E6E70
   Secondary: Aqua #5682C3 · Turq #2BBAB0 · Sand #7B726A
   Neutrals: #EFEFEF paper · #232325 ink · Dark navy #232346 / #1B1B3A
   Type: Inter — ESG-aligned dense scale
   ==================================================================== */
:root{
  --ink:#232325; --ink-soft:#3A3A3E; --ink-faint:#6B6B6E;
  --paper:#EFEFEF; --surface:#FFFFFF; --surface-2:#E6E6E6;
  --border:#DEDEDE; --border-soft:#E6E6E6;
  --accent:#2F3192; --accent-dark:#1B1B3A; --accent-soft:#E4E5F4; --accent-ink:#232346;
  --harbor:#232346; --harbor-dark:#1B1B3A; --harbor-ink:#EFEFEF; --harbor-soft:#2E2E55;
  --success:#00683A; --success-soft:#DCEFE6; --success-ink:#004D2B;
  --warning:#C47A12; --warning-soft:#FDF0DB; --warning-ink:#8A5710;
  --critical:#BD1E2D; --critical-soft:#FAE6E7; --critical-ink:#8C1520;
  --info:#5682C3; --info-soft:#E8EFF8;
  --female:#2BBAB0; --female-soft:#E1F5F2; --female-ink:#1A857E;
  --logo-blue:#2F3192; --logo-green:#00683A; --logo-yellow:#FBB041; --logo-red:#BD1E2D;
  --shadow: 0 1px 2px rgba(35,35,70,.08), 0 6px 20px rgba(35,35,70,.08);
  --radius: 8px;

  /* Type scale — same pixel sizes as berkclean-app (Flutter Material usage):
     11 / 12 / 13 / 14 / 16 / 18 / 20 / 24. Values copied only; apps are not linked. */
  --font-ui:"Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-body:var(--font-ui);
  --font-display:var(--font-ui);
  --font-mono:var(--font-ui);
  --font:var(--font-ui);

  --fs-3xs:0.625rem;   /* 10px — tiny tags */
  --fs-2xs:0.6875rem; /* 11px — KPI labels, micro captions */
  --fs-xs:0.75rem;     /* 12px — meta, badges, secondary captions */
  --fs-sm:0.8125rem;   /* 13px — secondary body, compact controls */
  --fs-base:0.875rem;  /* 14px — body, tables, inputs (Material bodyMedium) */
  --fs-md:1rem;        /* 16px — section / card titles (titleMedium) */
  --fs-lg:1.125rem;    /* 18px — emphasis titles */
  --fs-xl:1.25rem;     /* 20px — strong titles */
  --fs-xxl:1.5rem;     /* 24px — page titles / KPIs (headlineSmall) */

  /* legacy aliases */
  --text-meta:var(--fs-xs);
  --text-ui:var(--fs-base);
  --text-body:var(--fs-base);
  --text-base:var(--fs-base);
  --text-heading:var(--fs-md);
  --text-title:var(--fs-xl);
  --text-page:var(--fs-xxl);
  --text-xs:var(--fs-2xs);
  --text-sm:var(--fs-sm);
  --text-md:var(--fs-base);
  --text-lg:var(--fs-md);
  --text-xl:var(--fs-xl);
  --text-2xl:var(--fs-xl);
  --text-3xl:var(--fs-xxl);
  --leading-tight:1.25;
  --leading-normal:1.5;
  --leading-relaxed:1.65;
  --tracking-label:0.06em;
}
/* App is always light — OS dark preference is ignored for a consistent HR UX. */

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{
  font-family:var(--font-ui);
  font-size:100%;
  color-scheme: light;
  -webkit-text-size-adjust:100%;
}
body{
  background:var(--paper); color:var(--ink); font-family:var(--font-ui);
  font-size:var(--fs-base); line-height:var(--leading-normal); font-weight:400;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--accent-soft); color:var(--accent-ink);}
h1,h2,h3,h4{
  font-family:inherit; text-wrap:balance; margin:0;
  letter-spacing:-.02em; font-weight:600; line-height:var(--leading-tight);
}
h1{font-size:var(--fs-xxl);}
h2,h3{font-size:var(--fs-md);}
h4{font-size:var(--fs-sm);}
a{color:inherit;}
button,input,select,textarea{
  font-family:inherit; font-size:inherit;
}
button{cursor:pointer;}
table{border-collapse:collapse; width:100%;}
/* Same family as UI — tabular figures only, no second typeface */
.num,.mono,.kpi .kpi-value,.pipe-col-head .n,.tl-content .tl-date,.bar-val{
  font-family:inherit;
  font-variant-numeric:tabular-nums;
}
.muted{color:var(--ink-faint);}
.text-meta{font-size:var(--fs-xs); line-height:var(--leading-normal);}
.meta-label{font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:var(--tracking-label); color:var(--ink-faint); font-weight:600;}
.summary-value{font-size:var(--fs-md); font-weight:600; line-height:var(--leading-tight);}
.user-name{font-size:var(--fs-sm); color:var(--ink-faint); margin-right:8px; font-weight:500;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms !important; transition-duration:.001ms !important;}}

/* ============================= SHELL ============================= */
#shell{display:grid; grid-template-columns:248px 1fr; min-height:100vh;}
#sidebar{
  background:var(--harbor); color:var(--harbor-ink); position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; overflow-y:auto;
  border-right:none;
}
.brand{padding:14px 14px 12px; display:flex; flex-direction:column; gap:8px; border-bottom:1px solid rgba(239,239,239,.12);}
.brand-logo{
  display:inline-block; align-self:flex-start;
  background:#fff; border-radius:8px; padding:8px 10px;
  line-height:0; text-decoration:none;
  box-shadow:0 1px 0 rgba(0,0,0,.12);
}
.brand-logo img{
  display:block; width:88px; max-width:100%; height:auto;
}
.brand .sub{
  font-size:var(--fs-2xs); color:rgba(239,239,239,.72); text-transform:uppercase;
  letter-spacing:.12em; font-weight:600; padding-left:2px;
}
nav.navlist{padding:8px 10px 12px; display:flex; flex-direction:column; gap:1px; flex:1;}
.navlist a{
  display:flex; align-items:center; gap:10px; padding:8px 11px; border-radius:7px;
  color:rgba(239,239,239,.82); text-decoration:none; font-size:var(--fs-base); font-weight:500;
  line-height:var(--leading-tight);
}
.navlist a svg{flex:none; opacity:.75; color:rgba(239,239,239,.7);}
.navlist a:hover{background:var(--harbor-soft); color:#fff;}
.navlist a:hover svg{opacity:1; color:#fff;}
.navlist a.active{background:var(--accent); color:#fff; font-weight:600;}
.navlist a.active svg{opacity:1; color:#fff;}
.navlist .navgroup-label{
  font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:var(--tracking-label);
  color:rgba(239,239,239,.45); padding:12px 11px 4px; font-weight:600;
}
.navlist .navgroup-label:first-child{padding-top:4px;}
.nav-branch{display:flex; flex-direction:column; gap:1px;}
.nav-parent{
  display:flex; align-items:center; gap:10px; width:100%; padding:8px 11px; border-radius:7px;
  border:none; background:transparent; color:rgba(239,239,239,.82); font:inherit; font-size:var(--fs-sm);
  font-weight:500; text-align:left; cursor:pointer; line-height:var(--leading-tight);
}
.nav-parent svg:first-child{flex:none; opacity:.75; color:rgba(239,239,239,.7);}
.nav-parent .nav-chevron{margin-left:auto; opacity:.55; transition:transform .15s ease;}
.nav-branch.open .nav-parent .nav-chevron{transform:rotate(180deg);}
.nav-parent:hover{background:var(--harbor-soft); color:#fff;}
.nav-parent.active{color:#fff; font-weight:600;}
.nav-children{display:none; flex-direction:column; gap:1px; padding:2px 0 6px 0;}
.nav-branch.open .nav-children{display:flex;}
.nav-children a{
  display:block; padding:7px 11px 7px 36px; border-radius:7px;
  color:rgba(239,239,239,.72); text-decoration:none; font-size:var(--fs-xs); font-weight:500;
}
.nav-children a:hover{background:var(--harbor-soft); color:#fff;}
.nav-children a.active{background:var(--accent); color:#fff; font-weight:600;}
.subnav{
  display:flex; flex-wrap:wrap; gap:6px; margin:0 0 16px; padding:4px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); width:fit-content; max-width:100%;
}
.subnav a{
  padding:7px 12px; border-radius:6px; text-decoration:none; font-size:var(--fs-sm); font-weight:600;
  color:var(--ink-soft);
}
.subnav a:hover{background:var(--surface-2); color:var(--ink);}
.subnav a.active{background:var(--accent); color:#fff;}
.role-access-chips{display:flex; flex-wrap:wrap; gap:6px;}
.chip-permission.chip-full, .chip-full{background:var(--success-soft);color:var(--success-ink);}
.chip-permission.chip-limited, .chip-limited{background:var(--warning-soft); color:var(--warning-ink);}
.chip-permission.chip-view, .chip-view{background:var(--info-soft); color:var(--info);}
.chip-permission.chip-none, .chip-none{background:var(--surface-2); color:var(--ink-faint);}
.sidebar-foot{
  padding:12px 14px; border-top:1px solid rgba(239,239,239,.12);
  font-size:var(--fs-xs); color:rgba(239,239,239,.5); line-height:var(--leading-relaxed);
}

#main{min-width:0; display:flex; flex-direction:column; background:var(--paper);}
#topbar{
  position:sticky; top:0; z-index:20; background:rgba(255,255,255,.94); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
  padding:14px 28px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
#topbar .page-title{font-family:inherit; font-weight:700; font-size:var(--fs-xl); margin-right:auto; line-height:var(--leading-tight); letter-spacing:-.02em; color:var(--accent-ink);}
#topbar .page-title .kicker{display:block; font-family:inherit; font-weight:600; font-size:var(--fs-2xs); color:var(--accent); text-transform:uppercase; letter-spacing:var(--tracking-label); margin-bottom:3px;}
.role-picker{display:flex; align-items:center; gap:8px; font-size:var(--fs-xs); color:var(--ink-faint); font-weight:500;}
.role-picker select{border:1px solid var(--border); background:var(--surface); color:var(--ink); border-radius:7px; padding:7px 10px; font-weight:500; font-size:var(--fs-sm);}
.btn{
  display:inline-flex; align-items:center; gap:6px; border:1px solid var(--border); background:var(--surface);
  color:var(--ink); padding:7px 13px; border-radius:7px; font-size:var(--fs-base); font-weight:600; white-space:nowrap;
  line-height:1.2;
}
.btn:hover{border-color:var(--ink-faint); background:var(--surface-2);}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff;}
.btn.primary:hover{background:var(--accent-dark); border-color:var(--accent-dark);}
.btn.ghost{background:transparent; border-color:transparent;}
.btn.ghost:hover{background:var(--surface-2);}
.btn.danger{color:var(--critical-ink); border-color:var(--critical);}
.btn.small{padding:6px 10px; font-size:var(--fs-sm);}
.btn:disabled{opacity:.4; cursor:not-allowed;}

#content{padding:22px 28px 32px; flex:1; min-width:0;}
.page-desc{color:var(--ink-faint); font-size:var(--fs-sm); line-height:var(--leading-relaxed); margin:2px 0 16px; max-width:62ch;}

/* Help / User Manual — full-bleed iframe panel */
.help-manual-shell{
  display:flex; flex-direction:column; gap:12px;
  margin: -6px -12px -16px;
  min-height: calc(100vh - 140px);
}
.help-manual-toolbar{
  display:flex; flex-direction:column; gap:10px;
  padding:0 12px;
}
.help-manual-frame{
  width:100%;
  flex:1 1 auto;
  min-height: calc(100vh - 210px);
  height: calc(100vh - 210px);
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:#fff;
  display:block;
}
@media (max-width:900px){
  .help-manual-shell{ margin:0; min-height:70vh; }
  .help-manual-toolbar{ padding:0; }
  .help-manual-frame{ min-height:65vh; height:65vh; }
}

/* ============================= CARDS / KPI ============================= */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);}
.card .card-head{padding:14px 16px; border-bottom:1px solid var(--border-soft); display:flex; align-items:center; gap:10px;}
.card .card-head h3{font-size:var(--fs-xs); font-weight:600; text-transform:uppercase; letter-spacing:var(--tracking-label); color:var(--ink-soft);}
.card .card-head .hint{font-size:var(--fs-xs); color:var(--ink-faint); margin-left:auto; font-weight:500;}
.card .card-body{padding:12px 14px; font-size:var(--fs-base);}

.kpi-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; margin-bottom:16px;}
.kpi{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:12px; box-shadow:var(--shadow);}
.kpi .kpi-label{font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:var(--tracking-label); color:var(--ink-faint); font-weight:600;}
.kpi .kpi-value{font-size:var(--fs-xxl); font-weight:700; margin-top:4px; line-height:1.1; letter-spacing:-.02em;}
.kpi .kpi-sub{font-size:var(--fs-xs); color:var(--ink-faint); margin-top:3px; font-weight:500;}
.kpi.accent{border-color:var(--accent); background:var(--accent-soft);}
.kpi.accent .kpi-value{color:var(--accent-ink);}
.kpi.warn .kpi-value{color:var(--warning-ink);}
.kpi.crit .kpi-value{color:var(--critical-ink);}
button.kpi{
  display:block; width:100%; text-align:left; font:inherit; color:inherit;
  cursor:pointer; transition:border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
button.kpi.clickable:hover, .kpi.clickable:hover{
  border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); transform:translateY(-1px);
}
button.kpi:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.bar-row.clickable{cursor:pointer; border-radius:6px; padding:2px 4px; margin:0 -4px;}
.bar-row.clickable:hover{background:var(--surface-2);}
.alert-item.clickable{cursor:pointer; border-radius:8px; padding-left:6px; padding-right:6px; margin:0 -6px;}
.alert-item.clickable:hover{background:var(--surface-2);}
.dash-drill-banner{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin:0 0 12px; padding:10px 12px; border:1px solid var(--accent);
  background:var(--accent-soft); border-radius:var(--radius); font-size:var(--fs-sm);
}
.dash-gender-link{
  background:none; border:none; padding:0; font:inherit; color:inherit; cursor:pointer; text-align:left;
}
.dash-gender-link:hover{color:var(--accent);}
button.dash-qa-item{
  width:100%; text-align:left; font:inherit; color:inherit; cursor:pointer;
  transition:border-color .12s ease, background .12s ease;
}
button.dash-qa-item:hover:not(:disabled){border-color:var(--accent); background:var(--accent-soft);}
button.dash-qa-item:disabled{opacity:.65; cursor:default;}

/* Dashboard organization */
.dash-section{margin-bottom:18px;}
.dash-section-title{
  font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:var(--tracking-label);
  color:var(--ink-faint); font-weight:600; margin:0 0 8px;
}
.kpi-grid.kpi-headline{grid-template-columns:repeat(5, minmax(0, 1fr)); gap:12px; margin-bottom:14px;}
.kpi-grid.kpi-quad{grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; margin-bottom:16px;}
.kpi-grid.kpi-secondary{grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; margin-bottom:0;}
.kpi-grid.kpi-headline .kpi,
.kpi-grid.kpi-quad .kpi{padding:14px 16px; min-height:88px; display:flex; flex-direction:column; justify-content:flex-start;}
.kpi-grid.kpi-headline .kpi .kpi-value,
.kpi-grid.kpi-quad .kpi .kpi-value{font-size:var(--fs-xxl);}
.kpi-grid.kpi-headline .kpi .kpi-label,
.kpi-grid.kpi-quad .kpi .kpi-label{
  min-height:2.4em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.reports-panel{margin-bottom:18px;}
.reports-panel .table-wrap{margin-top:0;}
@media (max-width:1100px){
  .kpi-grid.kpi-headline{grid-template-columns:repeat(3, minmax(0, 1fr));}
  .kpi-grid.kpi-quad{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (max-width:760px){
  .kpi-grid.kpi-headline{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .kpi-grid.kpi-quad{grid-template-columns:1fr 1fr;}
  .dash-panels{grid-template-columns:1fr;}
}
.dash-panels{display:grid; grid-template-columns:1.5fr 1fr; gap:16px; align-items:start;}
.dash-qa-row{display:flex; flex-direction:column; gap:10px;}
.dash-qa-item{
  padding:10px 12px; border:1px solid var(--border-soft); border-radius:8px; background:var(--surface-2);
  font-size:var(--fs-sm); line-height:1.45;
}
.dash-qa-item .qa-q{display:block; color:var(--ink-faint); font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:var(--tracking-label); font-weight:600; margin-bottom:4px;}
.dash-qa-item .qa-a{font-weight:600; color:var(--ink);}

.dash-insight-strip{margin:0 0 16px;}
.dash-panels-insights{display:grid; grid-template-columns:1fr; gap:16px; align-items:stretch;}
.dash-phase-funnel{display:flex; flex-direction:column; gap:8px; margin-bottom:12px;}
.dash-phase-funnel-row{display:grid; grid-template-columns:88px 1fr 36px; gap:8px; align-items:center;}
.dash-phase-funnel-label{font-size:var(--fs-xs); font-weight:600; color:var(--ink-soft);}
.dash-phase-funnel-bar{height:10px; background:var(--surface-2); border-radius:999px; overflow:hidden;}
.dash-phase-funnel-bar > span{display:block; height:100%; background:var(--accent); border-radius:999px;}
.dash-phase-funnel-n{font-size:var(--fs-xs); font-weight:700; text-align:right;}
.dash-stage-chips{display:flex; flex-wrap:wrap; gap:6px;}
.dash-stage-chip{
  border:1px solid var(--border); background:var(--surface); border-radius:999px;
  padding:4px 10px; font-size:var(--fs-2xs); font-weight:600; color:var(--ink-faint); cursor:pointer;
}
.dash-stage-chip:hover{border-color:var(--accent); color:var(--accent-ink); background:var(--accent-soft);}
.dash-stage-chip strong{margin-left:4px; color:var(--ink); font-variant-numeric:tabular-nums;}
.dash-rank-list{display:flex; flex-direction:column; gap:6px;}
.dash-rank-item{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:8px 10px; border:1px solid var(--border-soft); border-radius:8px;
  background:var(--surface); cursor:pointer; font:inherit; color:inherit;
}
.dash-rank-item:hover{border-color:var(--accent); background:var(--accent-soft);}
.dash-rank-i{
  width:22px; height:22px; border-radius:50%; background:var(--surface-2);
  display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-2xs); font-weight:700; color:var(--ink-faint); flex:none;
}
.dash-rank-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px;}
.dash-rank-main strong{font-size:var(--fs-sm); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
@media (max-width:900px){
  .dash-panels-insights{grid-template-columns:1fr;}
}

/* ============================= FILTER BAR ============================= */
.filterbar{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; align-items:center; padding:10px 12px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);}
.filterbar select, .filterbar input[type=text], .filterbar input[type=search]{
  border:1px solid var(--border); background:var(--surface); color:var(--ink); border-radius:7px; padding:7px 10px; font-size:var(--fs-sm); min-height:32px;
  width:auto; max-width:200px; min-width:0; flex:0 1 auto;
}
.filterbar select#flt-month,
.filterbar select#flt-year{max-width:130px; width:130px;}
.filterbar select#flt-division,
.filterbar select#flt-category,
.filterbar select#flt-nationality,
.filterbar select#flt-agency,
.filterbar select#flt-recruiter,
.filterbar select#flt-method,
.filterbar select#flt-status,
.filterbar select#flt-gender,
.filterbar select#flt-created-by{width:180px; max-width:180px;}
.filterbar .fb-label{font-size:var(--fs-2xs); color:var(--ink-faint); text-transform:uppercase; letter-spacing:var(--tracking-label); margin-right:2px; font-weight:600;}
.filterbar .clear-filters{font-size:var(--fs-xs); color:var(--accent); background:none; border:none; text-decoration:underline; padding:4px 2px; font-weight:600; margin-left:auto;}
@media (max-width:760px){
  .filterbar select, .filterbar input[type=text], .filterbar input[type=search]{
    width:100%; max-width:none;
  }
  .filterbar select#flt-month,
  .filterbar select#flt-year,
  .filterbar select#flt-division,
  .filterbar select#flt-category,
  .filterbar select#flt-nationality,
  .filterbar select#flt-agency,
  .filterbar select#flt-recruiter,
  .filterbar select#flt-method,
  .filterbar select#flt-status,
  .filterbar select#flt-gender,
  .filterbar select#flt-created-by{width:100%; max-width:none;}
  .filterbar .clear-filters{margin-left:0;}
}

/* ============================= TABLES ============================= */
.table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface);}
table.data{font-size:var(--fs-base); min-width:100%;}
table.data th{
  text-align:left; padding:8px 10px; background:var(--surface-2); color:var(--ink-faint); font-weight:600;
  font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:var(--tracking-label); border-bottom:1px solid var(--border); white-space:nowrap; position:sticky; top:0;
}
table.data td{padding:8px 10px; border-bottom:1px solid var(--border-soft); white-space:nowrap; vertical-align:middle; font-size:var(--fs-base);}
table.data tbody tr:hover{background:var(--surface-2);}
table.data tbody tr:last-child td{border-bottom:none;}
table.data td.wrap{white-space:normal;}
table.data th.num, table.data td.num{text-align:right;}
table.data.cost-lines-table td{white-space:normal;}
table.data.cost-lines-table select,
table.data.cost-lines-table input[type="date"],
table.data.cost-lines-table input[type="number"]{
  width:100%; min-width:7.5rem; height:36px; border:1px solid var(--border); border-radius:7px; padding:7px 9px;
  background:var(--surface); color:var(--ink); box-sizing:border-box; font-size:var(--fs-base);
}
table.data.cost-lines-table input[readonly]{background:var(--surface-2); color:var(--ink-faint);}
table.data.cost-lines-table td.cost-actions{white-space:nowrap; width:1%;}
tr.vpe-oversize-row td{background:#fef2f2;}
tr.vpe-oversize-row .vpe-doc-size{color:#991b1b;font-weight:700;}
table.data.requests-table{
  table-layout:fixed;
  width:100%;
  min-width:1560px;
}
table.data.requests-table th.req-actions-head,
table.data.requests-table td.req-actions{
  position:sticky;
  right:0;
  z-index:3;
  background:var(--surface);
  box-shadow:-6px 0 10px -8px rgba(0,0,0,.18);
  min-width:168px;
  width:168px;
}
table.data.requests-table thead tr.req-head th.req-actions-head{
  z-index:5;
  background:var(--surface-2, var(--surface));
}
table.data.requests-table .req-actions{
  white-space:normal;
  text-align:right;
  vertical-align:middle;
}
table.data.requests-table .req-actions-inner{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:4px;
}
table.data.requests-table .req-actions .btn{
  margin-left:0;
  width:100%;
  justify-content:center;
}
table.data.requests-table tr.row-archived td{opacity:0.72;}
table.data.requests-table tr.row-archived td.req-actions{opacity:1;}
table.data th.sortable{
  cursor:pointer;
  user-select:none;
  padding-right:18px;
  position:relative;
}
table.data th.sortable:hover{
  color:var(--ink);
}
table.data th.sortable .th-sort-ind{
  position:absolute;
  right:6px;
  bottom:10px;
  width:0; height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid var(--ink-faint);
  opacity:0.35;
}
table.data th.sortable.sorted-asc .th-sort-ind{
  border-top:none;
  border-bottom:5px solid var(--accent);
  opacity:1;
}
table.data th.sortable.sorted-desc .th-sort-ind{
  border-top:5px solid var(--accent);
  opacity:1;
}
table.data th.sortable.num{
  padding-right:18px;
}
table.data.requests-table thead tr.req-head th{
  position:sticky;
  top:0;
  z-index:2;
  white-space:normal;
  line-height:1.25;
  vertical-align:bottom;
  overflow:visible;
  text-overflow:unset;
}
table.data.requests-table th.sortable{
  cursor:pointer;
  user-select:none;
  padding-right:18px;
  position:relative;
}
table.data.requests-table th.sortable:hover{
  color:var(--ink);
}
table.data.requests-table th.sortable .th-sort-ind{
  position:absolute;
  right:6px;
  bottom:10px;
  width:0; height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid var(--ink-faint);
  opacity:0.35;
}
table.data.requests-table th.sortable.sorted-asc .th-sort-ind{
  border-top:none;
  border-bottom:5px solid var(--accent);
  opacity:1;
}
table.data.requests-table th.sortable.sorted-desc .th-sort-ind{
  border-top:5px solid var(--accent);
  opacity:1;
}
table.data.requests-table th.sortable.num{
  padding-right:18px;
}
table.data.requests-table th,
table.data.requests-table td{
  vertical-align:middle;
  overflow:hidden;
  text-overflow:ellipsis;
}
table.data.requests-table td.wrap{
  white-space:normal;
  word-break:break-word;
  overflow:visible;
  text-overflow:unset;
}
table.data.requests-table .req-div{font-weight:600; line-height:1.3;}
table.data.requests-table .req-cats{margin-top:2px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.doc-pair{border-bottom:1px solid var(--border-soft);}
.doc-pair:last-child{border-bottom:none;}
.doc-pair-title{
  padding:10px 14px 0;
  font-size:var(--fs-sm);
  font-weight:700;
  color:var(--ink);
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
}
.doc-pair .doc-row .card-body{border-top:none;}
table.data.requests-table tfoot tr.req-totals td{
  background:var(--surface-2);
  border-top:2px solid var(--border);
  font-weight:700;
  padding:10px 12px;
  font-variant-numeric:tabular-nums;
}
table.data.requests-table tfoot tr.req-totals td.num{font-size:var(--fs-sm);}
.requests-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
  flex-wrap:wrap;
}
.requests-toolbar .clear-filters{
  font-size:var(--fs-xs); color:var(--accent); background:none; border:none; text-decoration:underline; padding:4px 2px; font-weight:600; cursor:pointer;
}
.requests-filters{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px 12px;
  margin-bottom:14px;
  padding:12px 14px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
}
.requests-filters .rf-field{display:flex; flex-direction:column; gap:4px; min-width:0;}
.requests-filters .rf-field label{
  font-size:var(--fs-2xs);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:var(--tracking-label);
  color:var(--ink-faint);
}
.requests-filters .rf-field select,
.requests-filters .rf-field input[type=search]{
  width:100%;
  box-sizing:border-box;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--ink);
  border-radius:7px;
  padding:7px 10px;
  font-size:var(--fs-sm);
  min-height:34px;
}
.requests-filters .rf-pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}
@media (max-width:1100px){
  .requests-filters{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (max-width:640px){
  .requests-filters{grid-template-columns:1fr;}
}
.cand-nav-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.cand-nav-pager{
  display:flex;
  align-items:center;
  gap:8px;
}
.cand-nav-pos{
  margin-right:4px;
  white-space:nowrap;
}
.rowlink{cursor:pointer;}
td.rowlink:hover{color:var(--accent);}
tr.rowlink{cursor:pointer;}
.forecast-chevron{width:1.5rem; font-size:var(--fs-sm); color:var(--ink-faint);}
.forecast-group-row:hover .forecast-chevron{color:var(--accent);}
.forecast-detail-row > td{border-top:0 !important;}
.tbl-empty{padding:28px; text-align:center; color:var(--ink-faint); font-size:var(--fs-sm);}
.empty-state{padding:36px 20px; text-align:center; color:var(--ink-faint); font-size:var(--fs-sm);}
.empty-panel{
  padding:28px 20px; text-align:center; background:var(--surface); border:1px dashed var(--border);
  border-radius:var(--radius); margin:4px 0 12px;
}
.empty-panel .empty-title{font-size:var(--fs-base); font-weight:600; color:var(--ink-soft); margin:0 0 6px;}
.empty-panel .empty-hint{font-size:var(--fs-sm); color:var(--ink-faint); margin:0 auto 12px; max-width:36ch; line-height:var(--leading-relaxed);}
.empty-panel .empty-actions{display:flex; gap:8px; justify-content:center; flex-wrap:wrap;}
.login-wrap{max-width:420px; margin:40px auto;}
.login-brand{display:flex; justify-content:center; margin-bottom:18px;}
.login-brand img{width:140px; height:auto; display:block;}
.login-wrap .card{border-color:var(--accent); border-width:1px; box-shadow:var(--shadow);}
.login-wrap h2{font-size:var(--fs-xxl); font-weight:700; margin:0 0 6px; text-align:center; color:var(--accent-ink);}
.login-wrap .page-desc{text-align:center; margin:0 auto 18px;}
.pager{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; margin:10px 0 4px; padding:2px 2px 0;}
.pager-meta{font-size:var(--fs-xs); color:var(--ink-faint);}
.pager-controls{display:flex; flex-wrap:wrap; align-items:center; gap:4px;}
.pager-btn{font-family:inherit; font-size:var(--fs-xs); font-weight:600; min-width:30px; height:28px; padding:0 9px; border:1px solid var(--border); background:var(--surface); color:var(--ink); border-radius:6px; cursor:pointer;}
.pager-btn:hover:not(:disabled):not(.active){border-color:var(--accent); color:var(--accent);}
.pager-btn.active{background:var(--accent); border-color:var(--accent); color:#fff; cursor:default;}
.pager-btn:disabled{opacity:.4; cursor:not-allowed;}
.pager-ellipsis{font-size:var(--fs-xs); color:var(--ink-faint); padding:0 4px;}

/* ============================= BADGES ============================= */
.badge{display:inline-flex; align-items:center; gap:4px; padding:2px 7px; border-radius:4px; font-size:var(--fs-2xs); font-weight:600; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; line-height:1.3;}
.badge.success{background:var(--success-soft); color:var(--success-ink);}
.badge.warning{background:var(--warning-soft); color:var(--warning-ink);}
.badge.critical{background:var(--critical-soft); color:var(--critical-ink);}
.badge.info{background:var(--info-soft); color:var(--info);}
.badge.neutral{background:var(--surface-2); color:var(--ink-faint); border:1px solid var(--border);}
.badge.accent{background:var(--accent-soft); color:var(--accent-ink);}
.pill-m{background:var(--info-soft); color:var(--info);}
.pill-f{background:var(--female-soft); color:var(--female-ink);}

.gender-dot{width:8px; height:8px; border-radius:50%; display:inline-block;}
.gender-dot.M{background:var(--info);}
.gender-dot.F{background:var(--female);}

/* ============================= PROGRESS ============================= */
.progress{height:7px; border-radius:99px; background:var(--border-soft); overflow:hidden;}
.progress > div{height:100%; border-radius:99px; background:var(--accent);}
.progress.success > div{background:var(--success);}
.progress.warning > div{background:var(--warning);}
.progress.critical > div{background:var(--critical);}

/* ============================= FORMS ============================= */
.form-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; align-items:start;}
.field{display:flex; flex-direction:column; gap:6px; min-width:0;}
.field-head{display:flex; flex-direction:column; justify-content:flex-start; gap:3px; min-height:2.7rem;}
.field label{font-size:var(--fs-xs); font-weight:600; color:var(--ink-soft); letter-spacing:.01em; line-height:1.25; margin:0;}
.field .field-note{font-size:var(--fs-xs); color:var(--ink-faint); line-height:var(--leading-normal);}
.field input, .field select, .field textarea{
  border:1px solid var(--border); background:var(--surface); color:var(--ink); border-radius:7px; padding:7px 9px; font-size:var(--fs-base); width:100%;
  line-height:var(--leading-normal); box-sizing:border-box;
}
.field input:not([type="checkbox"]):not([type="radio"]), .field select{height:36px; min-height:36px;}
.field input:disabled, .field select:disabled, .field textarea:disabled{background:var(--surface-2); color:var(--ink-faint);}
.field textarea{resize:vertical; min-height:72px; height:auto;}
.field.locked input, .field.locked select{background:var(--surface-2); color:var(--ink-faint);}
.field-tag{
  display:inline-block; max-width:100%; font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:var(--tracking-label);
  padding:2px 6px; border-radius:4px; font-weight:600; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  height:1.2rem; box-sizing:border-box;
}
.field-tag-spacer{display:block; height:1.2rem;}
.field-tag.sys{background:var(--info-soft); color:var(--info);}
.field-tag.ro{background:var(--surface-2); color:var(--ink-faint); border:1px solid var(--border);}
.field-tag.agency{background:var(--accent-soft); color:var(--accent-ink);}
.field-tag.hr{background:var(--warning-soft); color:var(--warning-ink);}

/* Onboarding Medical / Tawjeeh / Biometrics modal rows */
.med-bundle-row{
  display:grid;
  grid-template-columns:minmax(160px,220px) minmax(160px,1fr) auto;
  gap:16px 20px;
  align-items:end;
}
.med-bundle-date,
.med-bundle-check{min-width:0;}
.med-bundle-check-control{
  display:flex;
  align-items:center;
  gap:8px;
  height:36px;
  min-height:36px;
  font-size:var(--fs-sm);
  color:var(--ink);
  font-weight:500;
}
.med-bundle-check-control input[type="checkbox"]{
  width:16px;
  height:16px;
  margin:0;
  flex:0 0 auto;
  accent-color:var(--accent);
}
.med-bundle-action{
  display:flex;
  align-items:center;
  height:36px;
  padding-bottom:0;
}
@media (max-width:640px){
  .med-bundle-row{
    grid-template-columns:1fr;
    align-items:stretch;
  }
  .med-bundle-action{height:auto;}
}

/* ============================= MODAL ============================= */
#modal-root{position:fixed; inset:0; z-index:100; display:none;}
#modal-root.open{display:block;}
.modal-backdrop{position:absolute; inset:0; background:rgba(15,20,26,.5); backdrop-filter:blur(1px);}
.modal{
  position:relative; max-width:720px; width:calc(100% - 40px); margin:6vh auto 0; background:var(--surface);
  border-radius:12px; border:1px solid var(--border); box-shadow:0 20px 60px rgba(0,0,0,.25); max-height:88vh; display:flex; flex-direction:column;
}
.modal .modal-head{padding:16px 20px; border-bottom:1px solid var(--border-soft); display:flex; align-items:center; gap:10px; order:0; flex-shrink:0;}
.modal .modal-head h3{font-size:var(--fs-md); font-weight:600;}
.modal .modal-close{margin-left:auto; background:none; border:none; color:var(--ink-faint); font-size:var(--fs-xl); padding:2px 6px; line-height:1;}
.modal .modal-body{padding:18px 20px; overflow-y:auto; font-size:var(--fs-base); order:2;}
.modal .modal-foot{padding:12px 20px; border-bottom:1px solid var(--border-soft); display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; order:1; flex-shrink:0;}
.form-save-bar{display:flex; justify-content:flex-end; align-items:center; gap:8px; flex-wrap:wrap; padding:12px 18px; border-bottom:1px solid var(--border-soft); background:var(--surface);}

/* ============================= TABS ============================= */
.tabbar{display:flex; gap:2px; border-bottom:1px solid var(--border); margin-bottom:16px; overflow-x:auto;}
.tabbar button{background:none; border:none; padding:10px 14px; font-size:var(--fs-sm); font-weight:600; color:var(--ink-faint); border-bottom:2px solid transparent; white-space:nowrap;}
.tabbar button.active{color:var(--accent-ink); border-bottom-color:var(--accent);}
.tabbar button:hover{color:var(--ink);}

/* ============================= PIPELINE (Tabs + List) ============================= */
.pipe-summary{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:12px 0 14px;
  padding:10px 12px; background:var(--surface); border:1px solid var(--border); border-radius:10px;
  box-shadow:var(--shadow);
}
.pipe-summary .pipe-summary-title{font-size:var(--fs-2xs); font-weight:700; text-transform:uppercase; letter-spacing:var(--tracking-label); color:var(--ink-faint); margin-right:auto;}
.pipe-summary .chip{
  display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--border); font-size:var(--fs-xs); font-weight:600;
  font-family:inherit; color:inherit; line-height:1.2;
}
.pipe-summary .chip .val{font-variant-numeric:tabular-nums; color:var(--ink);}
.pipe-summary .chip .lbl{color:var(--ink-faint); font-weight:500;}
.pipe-summary .chip.heavy{background:var(--info-soft); border-color:var(--info-soft);}
.pipe-summary .chip.critical{background:var(--critical-soft); border-color:var(--critical-soft);}
.pipe-summary .chip.success{background:var(--success-soft); border-color:var(--success-soft);}
.pipe-summary .chip.warning{background:var(--warning-soft); border-color:var(--warning-soft);}
.pipe-summary button.chip.clickable{
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease;
}
.pipe-summary button.chip.clickable:hover:not(:disabled){
  transform: translateY(-1px);
  border-color: var(--accent);
}
.pipe-summary button.chip.clickable:disabled{
  cursor:default;
  opacity:.75;
}
.dash-card-flash{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.pipe-phase-strip{
  display:flex; flex-wrap:wrap; gap:8px; margin:0 0 10px; align-items:center;
}
.pipe-phase-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 12px; border-radius:8px; border:1px solid var(--border);
  background:var(--surface); color:var(--ink-faint); font-size:var(--fs-xs); font-weight:600;
  cursor:pointer; transition:border-color .12s, background .12s, color .12s;
}
.pipe-phase-chip:hover{border-color:var(--accent); color:var(--accent-ink);}
.pipe-phase-chip.active{
  background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink);
}
.pipe-phase-chip.rejected.active{
  background:var(--critical-soft); border-color:var(--critical); color:var(--critical-ink);
}
.pipe-phase-chip-n{
  font-variant-numeric:tabular-nums;
  background:var(--surface-2); border-radius:999px; padding:1px 7px; font-size:var(--fs-2xs); font-weight:700;
}
.pipe-phase-chip.active .pipe-phase-chip-n{background:var(--surface); color:var(--accent-ink);}
.pipe-phase-chip.rejected.active .pipe-phase-chip-n{background:var(--surface); color:var(--critical-ink);}

.pipe-stage-tabs{
  display:flex; gap:2px; border-bottom:1px solid var(--border); margin-bottom:14px;
  overflow-x:auto; scrollbar-width:thin;
}
.pipe-stage-tabs button{
  background:none; border:none; padding:10px 12px; font-size:var(--fs-sm); font-weight:600;
  color:var(--ink-faint); border-bottom:2px solid transparent; white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px;
}
.pipe-stage-tabs button:hover{color:var(--ink);}
.pipe-stage-tabs button.active{color:var(--accent-ink); border-bottom-color:var(--accent);}
.pipe-stage-tabs button.pipe-tab-rejected.active{color:var(--critical-ink); border-bottom-color:var(--critical);}
.pipe-tab-n{
  font-size:var(--fs-2xs); font-weight:700; font-variant-numeric:tabular-nums;
  background:var(--surface-2); color:var(--ink-faint); border-radius:999px; padding:1px 6px; min-width:1.25rem; text-align:center;
}
.pipe-stage-tabs button.active .pipe-tab-n{background:var(--accent-soft); color:var(--accent-ink);}
.pipe-stage-tabs button.pipe-tab-rejected.active .pipe-tab-n{background:var(--critical-soft); color:var(--critical-ink);}

.pipe-list-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin:0 0 10px;
}
.pipe-list-title{font-size:var(--fs-md); font-weight:600; letter-spacing:-.01em;}
.pipe-list-table td.pipe-row-actions{
  white-space:nowrap; text-align:right;
}
.pipe-list-table td.pipe-row-actions .btn{margin-left:4px;}
tr.travel-agency-emailed{background:rgba(22, 163, 74, 0.12);}
tr.travel-agency-emailed:hover{background:rgba(22, 163, 74, 0.18);}
tr.travel-agency-emailed td{box-shadow:inset 3px 0 0 #16a34a;}
tr.visa-docs-emailed{background:rgba(22, 163, 74, 0.12);}
tr.visa-docs-emailed:hover{background:rgba(22, 163, 74, 0.18);}
tr.visa-docs-emailed td{box-shadow:inset 3px 0 0 #16a34a;}
.pipe-card-dwell{
  display:inline-flex; align-items:center; padding:1px 6px; border-radius:999px;
  font-size:var(--fs-3xs); font-weight:700; line-height:1.4;
  background:var(--surface-2); color:var(--ink-faint);
}
.pipe-card-dwell.success{background:var(--success-soft); color:var(--success-ink);}
.pipe-card-dwell.warning{background:var(--warning-soft); color:var(--warning-ink);}
.pipe-card-dwell.critical{background:var(--critical-soft); color:var(--critical-ink);}

@media (max-width:760px){
  .pipe-stage-tabs button{padding:8px 10px; font-size:var(--fs-xs);}
  .pipe-list-table td.pipe-row-actions .btn{margin:2px 0 2px 4px;}
}

/* ============================= TIMELINE ============================= */
.timeline{display:flex; flex-direction:column;}
.tl-item{display:grid; grid-template-columns:20px 1fr; gap:12px;}
.tl-rail{display:flex; flex-direction:column; align-items:center;}
.tl-dot{width:11px; height:11px; border-radius:50%; background:var(--accent); margin-top:3px; flex:none;}
.tl-dot.pending{background:var(--border);}
.tl-dot.skipped{background:var(--ink-faint); box-shadow:inset 0 0 0 2px var(--surface, #fff);}
.tl-line{width:2px; flex:1; background:var(--border); margin:2px 0;}
.tl-content{padding-bottom:18px;}
.tl-content .tl-label{font-weight:600; font-size:var(--fs-sm);}
.tl-content .tl-date{font-size:var(--fs-xs); color:var(--ink-faint);}
.tl-content .tl-gap{font-size:var(--fs-2xs); color:var(--accent-ink); background:var(--accent-soft); display:inline-block; padding:2px 6px; border-radius:4px; margin-top:4px; font-weight:600;}
table.data.process-duration-table td{vertical-align:top;}
table.data.process-duration-table tr.pd-recruitment td:first-child{border-left:3px solid #ca8a04;}
table.data.process-duration-table tr.pd-mohre td:first-child{border-left:3px solid #c2410c;}
table.data.process-duration-table tr.pd-gdrfa td:first-child{border-left:3px solid #7c3aed;}
table.data.process-duration-table tr.pd-total td{background:var(--surface-2); font-weight:600;}
table.data.process-duration-table tr.pd-overall td{background:#e0f2fe; font-weight:700;}
.kpi-unit{font-size:var(--fs-sm); font-weight:600; margin-left:2px; opacity:.7;}

/* ============================= MISC ============================= */
.section-title{font-size:var(--fs-xs); color:var(--accent); font-weight:700; margin:22px 0 10px; letter-spacing:var(--tracking-label); text-transform:uppercase;}
.section-title:first-child{margin-top:0;}
.section-title.section-title-md{font-size:var(--fs-md); text-transform:none; letter-spacing:-.01em; color:var(--ink); font-weight:600;}
.two-col{display:grid; grid-template-columns:1.4fr 1fr; gap:16px;}
.stack{display:flex; flex-direction:column; gap:16px;}
.doc-category .doc-category-body{display:flex; flex-direction:column; gap:10px; padding:12px 14px 14px;}
.doc-category .doc-row + .doc-row{border-top:1px solid var(--border-soft);}
.doc-category .doc-row .card-body{padding:12px 16px;}
.doc-category-head{align-items:flex-end;}
.doc-category-head h3{margin:0 0 6px;}
.doc-progress{height:4px; width:140px; max-width:40vw; background:var(--surface-2); border-radius:999px; overflow:hidden;}
.doc-progress > span{display:block; height:100%; background:var(--accent); border-radius:999px;}
.doc-pair{display:flex; flex-direction:column; gap:8px;}
.doc-pair-title{font-size:var(--fs-xs); font-weight:600; color:var(--ink-soft); padding:0 2px;}
.doc-pair-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.doc-pair-grid-3{grid-template-columns:1fr 1fr 1fr;}
@media (max-width:960px){ .doc-pair-grid-3{grid-template-columns:1fr 1fr;} }
@media (max-width:720px){ .doc-pair-grid, .doc-pair-grid-3{grid-template-columns:1fr;} }
.doc-slot{border:1px solid var(--border-soft); border-radius:var(--radius); background:var(--surface); padding:10px 12px; transition:border-color .15s, background .15s, box-shadow .15s;}
.doc-slot.is-dragover{border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent);}
.doc-slot-head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px;}
.doc-slot-title{font-weight:600; font-size:var(--fs-sm); display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.doc-slot-body{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.doc-slot-meta{flex:1; min-width:140px;}
.doc-slot-filename{font-weight:600; font-size:var(--fs-sm); word-break:break-word;}
.doc-slot-actions{display:flex; gap:6px; align-items:center; flex-wrap:wrap;}
.doc-drop-hint{margin-top:6px; font-size:var(--fs-2xs);}
.doc-thumb{width:56px; height:56px; object-fit:cover; border-radius:6px; border:1px solid var(--border); flex:none; display:block;}
.doc-thumb-file,.doc-thumb-loading{display:flex; align-items:center; justify-content:center; background:var(--surface-2); color:var(--ink-faint); font-weight:700; font-size:var(--fs-2xs); letter-spacing:.04em;}
.doc-thumb-wrap{position:relative; padding:0; border:none; background:none; cursor:pointer; flex:none; border-radius:6px; line-height:0;}
.doc-thumb-wrap:hover .doc-thumb,.doc-thumb-wrap:focus-visible .doc-thumb{outline:2px solid var(--accent); outline-offset:1px;}
.doc-thumb-wrap:hover .doc-thumb-magnify,.doc-thumb-wrap:focus-visible .doc-thumb-magnify{opacity:1;}
.doc-thumb-magnify{position:absolute; right:3px; bottom:3px; width:22px; height:22px; border-radius:999px; background:rgba(15,20,26,.72); color:#fff; display:flex; align-items:center; justify-content:center; opacity:.92; pointer-events:none;}
.doc-magnify-icon{display:block;}
.btn .doc-magnify-icon{display:inline-block; vertical-align:-2px; margin-right:4px;}
.modal.modal-peek{max-width:min(960px, calc(100% - 32px));}
.modal.modal-peek .doc-peek-body{padding:12px; min-height:280px; display:flex; align-items:center; justify-content:center; background:var(--surface-2);}
.doc-peek-img{max-width:100%; max-height:72vh; object-fit:contain; border-radius:6px; background:#fff;}
.doc-peek-frame{width:100%; height:72vh; border:1px solid var(--border); border-radius:6px; background:#fff;}
.doc-peek-loading{padding:40px 16px; text-align:center;}
.doc-dropzone{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:88px; padding:16px 12px; border:1.5px dashed var(--border); border-radius:var(--radius); background:var(--surface-2); text-align:center; transition:border-color .15s, background .15s, color .15s;}
.doc-slot.is-dragover .doc-dropzone,
.doc-dropzone.is-dragover{border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink);}
.doc-dropzone-ro{min-height:56px; border-style:solid; opacity:.85;}
.doc-dropzone-icon{font-size:1.25rem; font-weight:700; color:var(--accent); line-height:1;}
.doc-dropzone-title{font-size:var(--fs-sm); font-weight:600; color:var(--ink);}
.doc-dropzone-sub{font-size:var(--fs-2xs); color:var(--ink-faint);}
.doc-dropzone-modal{cursor:pointer; min-height:72px;}

/* Interview calendar */
.cal-toolbar{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px;}
.cal-month-label{font-weight:700; font-size:var(--fs-base); min-width:140px; text-align:center;}
.cal-legend{display:flex; flex-wrap:wrap; gap:12px; margin-left:auto; font-size:var(--fs-xs); color:var(--ink-soft);}
.cal-legend span{display:inline-flex; align-items:center; gap:6px;}
.cal-dot{width:8px; height:8px; border-radius:2px; display:inline-block;}
.cal-dot.scheduled{background:var(--warning);}
.cal-dot.completed{background:var(--success);}
.cal-dot.request{background:var(--accent);}
.cal-grid{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-bottom:14px;}
.cal-head{background:var(--surface-2); padding:8px 6px; font-size:var(--fs-2xs); font-weight:600; text-transform:uppercase; letter-spacing:var(--tracking-label); color:var(--ink-faint); text-align:center;}
.cal-cell{background:var(--surface); min-height:92px; padding:6px; vertical-align:top;}
.cal-cell.cal-empty{background:var(--surface-2); opacity:.55;}
.cal-cell.cal-today{outline:1px solid var(--accent); outline-offset:-1px;}
.cal-daynum{font-size:var(--fs-xs); font-weight:600; color:var(--ink-soft); margin-bottom:4px;}
.cal-events{display:flex; flex-direction:column; gap:3px;}
.cal-chip{display:block; width:100%; text-align:left; border:none; border-radius:3px; padding:2px 5px; font-size:var(--fs-2xs); font-weight:600; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink);}
.cal-chip.cal-scheduled{background:var(--warning-soft); color:var(--warning-ink);}
.cal-chip.cal-completed{background:var(--success-soft); color:var(--success-ink);}
.cal-chip.cal-request{background:var(--accent-soft); color:var(--accent-ink);}
.cal-more{font-size:var(--fs-2xs); color:var(--ink-faint); padding:0 2px;}
.cal-day-detail{margin-top:4px;}
@media (max-width:900px){
  .cal-cell{min-height:72px;}
}
.hstack{display:flex; gap:16px; flex-wrap:wrap;}
.toast-host{position:fixed; bottom:18px; right:18px; z-index:200; display:flex; flex-direction:column; gap:8px;}
.toast{background:var(--ink); color:#fff; padding:10px 16px; border-radius:8px; font-size:var(--fs-sm); box-shadow:var(--shadow); animation:toastin .18s ease; font-weight:500;}
@keyframes toastin{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}
.legend{display:flex; gap:14px; flex-wrap:wrap; font-size:var(--fs-xs); color:var(--ink-faint); align-items:center; font-weight:500;}
.legend .sw{width:9px; height:9px; border-radius:2px; display:inline-block; margin-right:5px;}
.bar-chart{display:flex; flex-direction:column; gap:9px;}
.bar-row{display:grid; grid-template-columns:150px 1fr 56px; gap:10px; align-items:center; font-size:var(--fs-xs);}
.bar-row .lbl{color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:500;}
.bar-track{height:14px; background:var(--surface-2); border:1px solid var(--border-soft); border-radius:5px; overflow:hidden; display:flex;}
.bar-fill{height:100%;}
.bar-val{text-align:right; font-size:var(--fs-xs);}
.alert-item{display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--border-soft); align-items:flex-start; font-size:var(--fs-sm);}
.alert-item:last-child{border-bottom:none;}
.alert-dot{width:8px; height:8px; border-radius:50%; margin-top:6px; flex:none;}
.searchbox{position:relative; flex:1; min-width:220px;}
.searchbox input,
.filterbar .searchbox input[type=search],
.filterbar .searchbox input[type=text]{
  width:100%; padding:8px 12px 8px 34px; border:1px solid var(--border); border-radius:7px; background:var(--surface); color:var(--ink); font-size:var(--fs-sm);
}
.searchbox svg{position:absolute; left:11px; top:50%; transform:translateY(-50%); opacity:.5; pointer-events:none;}
.airport-combo{position:relative;}
.airport-combo-input{
  width:100%; padding:8px 12px; border:1px solid var(--border); border-radius:7px;
  background:var(--surface); color:var(--ink); font-size:var(--fs-sm);
}
.airport-combo-list{
  position:absolute; z-index:40; left:0; right:0; top:calc(100% + 4px);
  max-height:220px; overflow:auto; background:var(--surface);
  border:1px solid var(--border); border-radius:8px;
  box-shadow:0 10px 28px rgba(15,23,42,.12);
}
.airport-combo-option{
  display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline;
  width:100%; text-align:left; padding:8px 12px; border:0; border-bottom:1px solid var(--border-soft);
  background:transparent; color:var(--ink); cursor:pointer; font-size:var(--fs-sm);
}
.airport-combo-option:last-child{border-bottom:none;}
.airport-combo-option:hover,.airport-combo-option:focus{background:var(--surface-2);}
.airport-combo-option strong{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; min-width:2.6em;}
.airport-combo-empty{padding:10px 12px; color:var(--ink-faint); font-size:var(--fs-sm);}
.link-btn{background:none;border:none;color:var(--accent);font-weight:600;font-size:var(--fs-sm);padding:0;text-decoration:underline;cursor:pointer;}
.chip-permission{display:inline-block;padding:2px 8px;border-radius:4px;font-size:var(--fs-2xs);font-weight:600;}
.chip-full{background:var(--success-soft);color:var(--success-ink);}
.chip-view{background:var(--info-soft);color:var(--info);}
.chip-limited{background:var(--warning-soft);color:var(--warning-ink);}
.chip-none{background:var(--surface-2);color:var(--ink-faint);border:1px solid var(--border);}
.perm-select{
  font-family:inherit; font-size:var(--fs-2xs); font-weight:600; border:1px solid var(--border);
  border-radius:4px; padding:4px 8px; background:var(--surface); color:var(--ink); min-width:110px; cursor:pointer;
}
.perm-select.chip-full{background:var(--success-soft); color:var(--success-ink); border-color:transparent;}
.perm-select.chip-view{background:var(--info-soft); color:var(--info); border-color:transparent;}
.perm-select.chip-limited{background:var(--warning-soft); color:var(--warning-ink); border-color:transparent;}
.perm-select.chip-none{background:var(--surface-2); color:var(--ink-faint);}
.perm-select:disabled{opacity:.75; cursor:not-allowed;}
@media (max-width:900px){
  #shell{grid-template-columns:1fr;}
  #sidebar{
    position:fixed; left:0; top:0; bottom:0; width:min(280px,86vw); z-index:120;
    transform:translateX(-105%); transition:transform .2s ease;
    box-shadow:none;
  }
  body.nav-open #sidebar{transform:translateX(0); box-shadow:8px 0 24px rgba(0,0,0,.25);}
  .nav-backdrop{
    position:fixed; inset:0; background:rgba(15,23,32,.45); z-index:110; border:none; padding:0; margin:0;
  }
  body.nav-open .nav-backdrop{display:block;}
  .nav-toggle{
    display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
    position:fixed; top:12px; left:12px; z-index:130;
    width:42px; height:42px; border-radius:8px; border:1px solid var(--border);
    background:var(--surface); cursor:pointer; padding:10px;
  }
  .nav-toggle span{display:block; height:2px; background:var(--ink); border-radius:1px;}
  #main{padding-top:8px;}
  #topbar{padding-left:56px; flex-wrap:wrap; gap:8px;}
  .table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch;}
  .data th, .data td{padding:10px 12px; font-size:var(--fs-sm);}
  .btn, .btn.small{min-height:40px; padding:8px 14px;}
  body.role-agency-user .card-body.form-grid{gap:10px;}
  .two-col{grid-template-columns:1fr;}
}
@media (min-width:901px){
  .nav-toggle, .nav-backdrop{display:none !important;}
}