/* ===========================================================================
   HR Portal — "Dashboard" design system (light default + dark mode)
   Warm, monochrome-icon, blue-primary cloud-platform aesthetic.
   Palette: #DDDDDD · #222831 · #30475E (PRIMARY blue) · #F05454 (danger only).
   Theme via html[data-theme="light"|"dark"]; default light. 8pt rhythm.
   Components reference ONLY tokens so both themes work. IBM Plex Sans. WCAG AA.
   =========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ----------------------------------------------------- LIGHT (default) */
:root,:root[data-theme="light"]{
  --bg:#f5f4f1;            /* warm off-white page */
  --bg-2:#ecebe6;          /* input wells */
  --card:#ffffff;          /* panels & cards */
  --surface:#ffffff;
  --surface-2:#f1efea;     /* raised chips / hover / message bubbles */
  --panel:#e7edf3;         /* accent tint (table head, etc.) */
  --line:rgba(34,40,49,.12);
  --border:rgba(34,40,49,.12);
  --line-strong:rgba(34,40,49,.20);

  --ink:#222831;           /* primary text */
  --muted:#5b6675;         /* secondary text */
  --faint:#8a93a0;         /* meta / placeholders */
  --num:#161b22;           /* stat numbers */

  --brand:#30475E;         /* THE BLUE — primary */
  --brand-dark:#22384d;    /* hover/press */
  --brand-soft:rgba(48,71,94,.10);
  --on-brand:#ffffff;      /* text on the blue button */
  --link:#2f5a85;
  --nav-active-ink:#22384d;
  --ring:0 0 0 3px rgba(48,71,94,.22);

  --ok:#1f9d57;     --okbg:rgba(31,157,87,.12);  --ok-ink:#147a42;
  --warn:#b7791f;   --warnbg:rgba(183,121,31,.14); --warn-ink:#8a5a12;
  --danger:#d84444; --dangerbg:rgba(216,68,68,.10); --danger-ink:#b42318;
  --info:#2f6fb0;   --infobg:rgba(47,111,176,.10); --info-ink:#235688;
  --mutebg:rgba(34,40,49,.06);

  --sidebar-bg:#ffffff;
  --sidebar-border:var(--line);
  --topbar-bg:rgba(255,255,255,.82);
  --th-bg:var(--panel);
  --avatar-bg:var(--brand);
  --shadow:0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.08);
  --shadow-sm:0 1px 2px rgba(16,24,40,.07);
  --auth-grad-1:#eef1f4; --auth-grad-2:#dfe6ee;
  --scrollthumb:rgba(34,40,49,.18);

  --radius:12px; --radius-sm:8px; --radius-pill:999px;
  --sidebar-w:248px;
  color-scheme:light;
}

/* ----------------------------------------------------- DARK */
:root[data-theme="dark"]{
  --bg:#222831; --bg-2:#1b2026; --card:#272e39; --surface:#272e39; --surface-2:#2e3744;
  --panel:#30475E;
  --line:rgba(221,221,221,.10); --border:rgba(221,221,221,.10); --line-strong:rgba(221,221,221,.18);
  --ink:#DDDDDD; --muted:#a8b1bd; --faint:#7c8693; --num:#ffffff;

  --brand:#5b8bc4;          /* brighter blue for legibility on dark */
  --brand-dark:#74a0d2;     /* hover (lighter) */
  --brand-soft:rgba(91,139,196,.16);
  --on-brand:#10151c;       /* dark ink on the light-blue button */
  --link:#9ccbff;
  --nav-active-ink:#cfe2f7;
  --ring:0 0 0 3px rgba(91,139,196,.35);

  --ok:#46c66a;   --okbg:rgba(70,198,106,.15);  --ok-ink:#7fe2a0;
  --warn:#e3b341; --warnbg:rgba(227,179,65,.15); --warn-ink:#f0cf7a;
  --danger:#F05454; --dangerbg:rgba(240,84,84,.16); --danger-ink:#ff9b9b;
  --info:#5aa6ff; --infobg:rgba(90,166,255,.15); --info-ink:#9ccbff;
  --mutebg:rgba(221,221,221,.08);

  --sidebar-bg:linear-gradient(180deg,#222a35,#1b2026);
  --sidebar-border:var(--line);
  --topbar-bg:rgba(34,40,49,.85);
  --th-bg:rgba(48,71,94,.40);
  --avatar-bg:#30475E;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.28);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --auth-grad-1:#1b2026; --auth-grad-2:#30475E;
  --scrollthumb:rgba(221,221,221,.14);
  color-scheme:dark;
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--brand);text-decoration:underline}
code,kbd,pre{font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace}
::selection{background:var(--brand-soft)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}

/* SVG icons (Lucide) — monochrome, inherit color */
.ic{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.ic svg,.icon-btn svg{width:18px;height:18px;stroke-width:2}
/* Inline Lucide icons inside text buttons, headings, tags and list rows */
.btn svg{width:16px;height:16px}
h1 svg,h2 svg,h3 svg{width:17px;height:17px;vertical-align:-3px;opacity:.85}
.tag svg{width:12px;height:12px;vertical-align:-2px}
li svg,.empty svg{width:15px;height:15px;vertical-align:-3px}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:9px;
  background:transparent;border:1px solid transparent;color:var(--muted);cursor:pointer;position:relative}
.icon-btn:hover{background:var(--mutebg);color:var(--ink)}

/* ---------------------------------------------------------------- shell */
.app{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-w);flex-shrink:0;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  background:var(--sidebar-bg);border-right:1px solid var(--sidebar-border)}
.brand{height:60px;padding:0 18px;font-weight:600;color:var(--ink);font-size:15px;letter-spacing:.2px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);flex-shrink:0}
.logo{background:var(--brand);color:var(--on-brand);width:30px;height:30px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.sidebar nav{padding:8px 10px;display:flex;flex-direction:column;gap:1px;flex:1;overflow-y:auto}
.sidebar nav::-webkit-scrollbar{width:8px}
.sidebar nav::-webkit-scrollbar-thumb{background:var(--scrollthumb);border-radius:8px}
.nav-section{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);padding:16px 12px 6px;font-weight:600}
.nav-link{display:flex;align-items:center;gap:11px;padding:9px 12px;min-height:40px;border-radius:9px;color:var(--muted);font-weight:500;font-size:13.5px;transition:background .12s,color .12s}
.nav-link:hover{background:var(--mutebg);color:var(--ink);text-decoration:none}
.nav-link.active{background:var(--brand-soft);color:var(--nav-active-ink)}
.nav-link.active .ic{color:var(--brand)}
.nav-link .ic{color:var(--faint)}
.nav-link:hover .ic{color:var(--muted)}
.sidebar-foot{padding:12px 14px;border-top:1px solid var(--line)}
.role-pill{font-size:11.5px;background:var(--panel);color:var(--ink);padding:5px 10px;border-radius:var(--radius-pill);text-align:center;font-weight:500}

.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{height:60px;background:var(--topbar-bg);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 22px;position:sticky;top:0;z-index:20}
.crumb{font-weight:600;font-size:15px;color:var(--ink)}
.topbar-right{display:flex;align-items:center;gap:10px}
.bell .dot{position:absolute;top:0;right:0;background:var(--danger);color:#fff;font-size:10px;font-weight:700;border-radius:var(--radius-pill);padding:1px 5px;line-height:1.4}
.user-menu{display:flex;gap:14px;align-items:center;font-size:13.5px;margin-left:6px}
.user-menu .logout{color:var(--faint)}
.content{padding:28px;max-width:1240px;width:100%;margin:0 auto}

/* ---------------------------------------------------------------- type */
h1{font-size:24px;font-weight:600;margin:0 0 4px;letter-spacing:-.2px}
h2{font-size:17px;font-weight:600;margin:0 0 14px}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:24px;gap:16px;flex-wrap:wrap}
.page-head .sub,.sub{color:var(--muted);font-size:13.5px}

/* ---------------------------------------------------------------- cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-bottom:18px}
.card h2{margin-top:0}
.grid{display:grid;gap:18px;margin-bottom:18px}
.grid>*{margin-bottom:0}   /* gap owns spacing inside a grid — cancel children's own margins so rows align and don't double up */
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.grid.cols-3,.grid.cols-4{grid-template-columns:repeat(2,1fr)}}
/* Mobile chrome is hidden on desktop; revealed in the mobile media query below */
.nav-burger,.drawer-close,.nav-scrim,.bottomnav{display:none}

@media(max-width:860px){
  .grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}
  .content{padding:18px 16px calc(80px + env(safe-area-inset-bottom))}

  /* Sidebar becomes an off-canvas drawer */
  .sidebar{position:fixed;top:0;left:0;height:100%;width:min(86vw,300px);transform:translateX(-100%);
    transition:transform .22s ease;z-index:60;box-shadow:0 16px 48px rgba(0,0,0,.4)}
  body.nav-open .sidebar{transform:none}
  .drawer-close{display:inline-flex;margin-left:auto}
  .nav-scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;
    transition:opacity .2s;z-index:55}
  body.nav-open .nav-scrim{opacity:1;pointer-events:auto}
  body.nav-open{overflow:hidden}

  /* Top app bar: hamburger + title */
  .nav-burger{display:inline-flex}
  .topbar{padding:0 12px;gap:6px;height:56px}
  .crumb{font-size:16px}
  .user-menu .logout{display:none}            /* sign out lives in the drawer */

  /* Bottom tab bar (safe-area aware) */
  .bottomnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--topbar-bg);
    backdrop-filter:saturate(140%) blur(12px);border-top:1px solid var(--line);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));justify-content:space-around}
  .bottomnav .tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;min-height:48px;
    justify-content:center;padding:4px 2px;background:none;border:0;cursor:pointer;text-decoration:none;
    color:var(--faint);font-family:inherit;font-size:10.5px;font-weight:600}
  .bottomnav .tab svg{width:22px;height:22px}
  .bottomnav .tab.active{color:var(--brand)}

  /* Wide tables collapse into stacked cards — no side-scroll, no cutoffs.
     Each row is a card: first cell is the prominent identifier; the rest become
     "Label  value" lines with values/badges/actions right-aligned. */
  .tbl{display:block;border:0;box-shadow:none;background:none;white-space:normal;overflow:visible}
  .tbl thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tbl tbody{display:block}
  .tbl tr{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
    box-shadow:var(--shadow-sm);padding:12px 14px;margin-bottom:10px}
  .tbl tbody tr:hover td{background:none}
  .tbl td{display:flex;justify-content:space-between;align-items:center;gap:14px;text-align:right;
    border:0;padding:5px 0;min-height:0}
  .tbl td::before{content:attr(data-label);color:var(--muted);font-size:12px;font-weight:600;
    text-align:left;white-space:nowrap;flex:0 0 auto}
  .tbl td:not([data-label])::before{display:none}
  /* identifier (first cell): prominent, full width, no label, divider under it */
  .tbl td:first-child{text-align:left;font-weight:600;font-size:15px;gap:10px;
    padding:0 0 9px;margin-bottom:5px;border-bottom:1px solid var(--line);justify-content:flex-start}
  .tbl td:first-child::before{display:none}
  /* empty-state / spanning rows render plainly */
  .tbl td[colspan]{display:block;text-align:center}
  .tbl td[colspan]::before{display:none}
  .actions{justify-content:flex-end}
  .page-head{gap:10px}
}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-sm)}
.stat .num{font-size:28px;font-weight:600;letter-spacing:-.5px;color:var(--num)}
.stat .lbl{color:var(--muted);font-size:12.5px;margin-top:3px}
.stat.alert{border-color:var(--danger)}
.stat.alert .num{color:var(--danger)}

/* ---------------------------------------------------------------- tables */
table{width:100%;border-collapse:collapse;background:transparent}
table.tbl{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.tbl th,.tbl td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl th{background:var(--th-bg);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr{transition:background .1s}
.tbl tbody tr:hover td{background:var(--mutebg)}

/* ---------------------------------------------------------------- badges */
.badge{display:inline-block;padding:3px 9px;border-radius:var(--radius-pill);font-size:11.5px;font-weight:600;border:1px solid transparent;line-height:1.5}
.badge.ok{background:var(--okbg);color:var(--ok-ink);border-color:var(--okbg)}
.badge.warn{background:var(--warnbg);color:var(--warn-ink);border-color:var(--warnbg)}
.badge.danger{background:var(--dangerbg);color:var(--danger-ink);border-color:var(--dangerbg)}
.badge.info{background:var(--infobg);color:var(--info-ink);border-color:var(--infobg)}
.badge.muted{background:var(--mutebg);color:var(--muted);border-color:var(--line)}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;background:var(--brand);color:var(--on-brand);border:1px solid transparent;padding:9px 16px;border-radius:var(--radius-sm);font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .12s,box-shadow .12s,transform .04s;white-space:nowrap}
.btn:hover{background:var(--brand-dark);text-decoration:none;color:var(--on-brand)}
.btn:active{transform:translateY(1px)}
.btn.sm{min-height:32px;padding:5px 11px;font-size:12.5px}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn.ghost:hover{background:var(--mutebg);color:var(--ink)}
/* Solid red = primary destructive (Delete) */
.btn.danger{background:var(--danger);color:#fff;border-color:var(--danger)}
.btn.danger:hover{background:var(--danger);filter:brightness(.92);color:#fff}
/* Red outline = secondary destructive / cancel / inline row-remove */
.btn.ghost.danger{background:transparent;color:var(--danger);border-color:var(--danger)}
.btn.ghost.danger:hover{background:var(--dangerbg);color:var(--danger);filter:none}
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn-row{display:inline-flex;gap:8px;flex-wrap:wrap;align-items:center}

/* --- Compact icon action buttons (dense table rows) --------------------- */
.actions{display:inline-flex;align-items:center;gap:6px;justify-content:flex-end}
.actions form{margin:0!important}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;
  border:1px solid var(--line-strong);background:var(--card);color:var(--muted);cursor:pointer;padding:0;line-height:0}
.iconbtn:hover{background:var(--mutebg);color:var(--ink);text-decoration:none}
.iconbtn svg{width:16px;height:16px}
.iconbtn.ok:hover{color:var(--brand);border-color:var(--brand)}
.iconbtn.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,transparent)}
.iconbtn.danger:hover{background:var(--dangerbg);color:var(--danger);border-color:var(--danger)}
.iconbtn.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
.iconbtn.warn:hover{background:var(--warnbg);color:var(--warn);border-color:var(--warn)}

/* --- Table action cells: consistent spacing + alignment ----------------- */
.tbl td form{display:inline-flex;vertical-align:middle;margin:0}
.tbl td .btn{vertical-align:middle}
/* gap between adjacent action controls (buttons or inline forms) in a cell */
.tbl td .btn + .btn,.tbl td .btn + form,.tbl td form + form,.tbl td form + .btn{margin-left:6px}
.tbl td .btn-row{justify-content:flex-end;gap:6px;row-gap:6px}
.tbl th.right,.tbl td.right{white-space:nowrap}
/* square-ish icon action buttons (✕) read evenly */
.btn.sm.icon{padding:5px 9px;min-width:32px}

/* ---------------------------------------------------------------- forms */
label{display:block;font-weight:500;margin:0 0 6px;font-size:13px;color:var(--ink)}
input,select,textarea{width:100%;padding:9px 11px;min-height:40px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);font-size:14px;font-family:inherit;background:var(--bg-2);color:var(--ink);transition:border-color .12s,box-shadow .12s}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a93a0' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 11px center;padding-right:34px}
textarea{min-height:92px;resize:vertical}
.field{margin-bottom:16px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:700px){.form-row{grid-template-columns:1fr}}
.help{color:var(--faint);font-size:12.5px;margin-top:5px}
input[type=checkbox],input[type=radio]{width:auto;min-height:auto;accent-color:var(--brand)}
input[type=file]{padding:7px 11px}

/* ---------------------------------------------------------------- flashes */
.flash{padding:11px 15px;border-radius:var(--radius-sm);margin-bottom:14px;font-weight:500;border:1px solid;font-size:13.5px}
.flash-success{background:var(--okbg);color:var(--ok-ink);border-color:var(--okbg)}
.flash-error{background:var(--dangerbg);color:var(--danger-ink);border-color:var(--dangerbg)}
.flash-info{background:var(--infobg);color:var(--info-ink);border-color:var(--infobg)}

/* ---------------------------------------------------------------- misc */
.muted{color:var(--muted)}
.right{text-align:right}.center{text-align:center}
.empty{padding:44px 24px;text-align:center;color:var(--muted);font-size:13.5px}
.tag{font-size:11.5px;background:var(--mutebg);color:var(--muted);padding:2px 8px;border-radius:6px;border:1px solid var(--line)}
.divider{height:1px;background:var(--line);margin:18px 0;border:0}
.kv{display:grid;grid-template-columns:160px 1fr;gap:9px 16px}
.kv dt{color:var(--muted)}.kv dd{margin:0;color:var(--ink)}
ul.clean{list-style:none;padding:0;margin:0}
.mini{font-size:12.5px;color:var(--muted)}

/* Auth screens */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:radial-gradient(1200px 600px at 50% -10%,var(--auth-grad-2),transparent),linear-gradient(160deg,var(--auth-grad-1),var(--bg))}
.auth-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:34px;width:392px;box-shadow:var(--shadow)}
.auth-card .logo{width:46px;height:46px;border-radius:12px;font-size:18px;margin-bottom:16px}
.auth-card h1{font-size:21px}

/* Conversation / messaging */
.msg-thread{display:flex;flex-direction:column;gap:12px;margin:16px 0}
.msg{padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);max-width:80%}
.msg.mine{align-self:flex-end;background:var(--brand-soft);border-color:var(--brand)}
.msg .meta{font-size:12px;color:var(--muted);margin-bottom:4px}

/* Progress + tabs + timeline + avatar */
.progress{background:var(--mutebg);border-radius:var(--radius-pill);height:8px;overflow:hidden}
.progress>i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-dark))}
.tabbar{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto}
.tabbar a{padding:10px 14px;color:var(--muted);font-weight:600;border-bottom:2px solid transparent;white-space:nowrap;cursor:pointer;font-size:13.5px}
.tabbar a:hover{color:var(--ink);text-decoration:none}
.tabbar a.active{color:var(--brand);border-bottom-color:var(--brand)}
.tab-pane{animation:fade .15s ease}
@keyframes fade{from{opacity:.4}to{opacity:1}}
.prof-head{display:flex;gap:18px;align-items:center}
.avatar{width:64px;height:64px;border-radius:50%;background:var(--avatar-bg);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:600;flex-shrink:0;object-fit:cover;border:1px solid var(--line)}
.timeline{list-style:none;padding:0;margin:0;border-left:2px solid var(--line);margin-left:8px}
.timeline li{position:relative;padding:0 0 18px 22px}
.timeline li:before{content:"";position:absolute;left:-7px;top:3px;width:12px;height:12px;border-radius:50%;background:var(--brand);border:2px solid var(--card)}
.timeline .when{font-size:12px;color:var(--muted)}
.inline-form{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.inline-form .field{margin-bottom:0}
.section-actions{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
details.add summary{cursor:pointer;color:var(--brand);font-weight:600;list-style:none}
details.add summary::-webkit-details-marker{display:none}
details.add[open] summary{margin-bottom:12px}

/* Segmented control (view switcher) */
.seg{display:inline-flex;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:3px;gap:2px}
.seg-btn{padding:6px 14px;border-radius:6px;font-size:13px;font-weight:600;color:var(--muted)}
.seg-btn:hover{color:var(--ink);text-decoration:none}
.seg-btn.active{background:var(--card);color:var(--brand);box-shadow:var(--shadow-sm)}

/* Org chart — shared chip */
.org-card{display:inline-flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 12px;box-shadow:var(--shadow-sm);min-width:200px;position:relative}
.org-card:hover{text-decoration:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.org-av{width:34px;height:34px;border-radius:50%;background:var(--avatar-bg);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex-shrink:0;object-fit:cover}
.org-metac{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.org-name{font-weight:600;color:var(--ink);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.org-title{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.org-rep{margin-left:auto;background:var(--brand-soft);color:var(--brand);font-size:11px;font-weight:700;border-radius:var(--radius-pill);padding:1px 8px;align-self:flex-start}

/* Tree view — centered cards with connector lines */
.org-tree{display:inline-block;min-width:100%;padding:8px 4px 4px;text-align:center}
.org-tree ul{display:flex;justify-content:center;gap:18px;padding-top:22px;position:relative;list-style:none;margin:0}
.org-tree>ul{padding-top:0}
.org-tree li{position:relative;padding-top:22px;display:flex;flex-direction:column;align-items:center;list-style:none}
.org-tree>ul>li{padding-top:0}
/* vertical connector up from each node */
.org-tree li::before{content:"";position:absolute;top:0;left:50%;width:1px;height:22px;background:var(--line-strong)}
.org-tree>ul>li::before{display:none}
/* horizontal connector across siblings */
.org-tree ul ul::before{content:"";position:absolute;top:0;left:10%;right:10%;height:1px;background:var(--line-strong)}
.org-tree li .org-card{margin-bottom:0}

/* Vertical view — collapsible indented list */
.org-vert,.org-vert ul{list-style:none;margin:0;padding:0}
.org-vert ul{margin-left:20px;border-left:1px solid var(--line);padding-left:14px}
.org-vert li{margin:6px 0}
.org-vert details>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px}
.org-vert details>summary::-webkit-details-marker{display:none}
.org-vert details>summary::before{content:"▸";color:var(--faint);font-size:11px;transition:transform .12s}
.org-vert details[open]>summary::before{transform:rotate(90deg)}
.org-vert .org-card{min-width:0}

/* By-department view */
.org-dept{display:flex;flex-direction:column;gap:8px}
.org-dept .org-card{width:100%}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}