/* Colour themes. Navy is the default; [data-accent="green"] swaps the brand scale.
   Brand colours in this file are var(--brand-<navy hex>) so the navy theme renders as before;
   the green values keep each colour's OKLCH lightness with a green hue. Generated, so add a new
   brand colour here in both blocks rather than hardcoding it below. */
:root {
  --brand-0056c7: #0056c7;
  --brand-081d42: #081d42;
  --brand-08214e: #08214e;
  --brand-0b214b: #0b214b;
  --brand-0b2554: #0b2554;
  --brand-0d2a5c: #0d2a5c;
  --brand-0d2b60: #0d2b60;
  --brand-0f316d: #0f316d;
  --brand-102b5f: #102b5f;
  --brand-102f68: #102f68;
  --brand-12294f: #12294f;
  --brand-12346f: #12346f;
  --brand-143765: #143765;
  --brand-143771: #143771;
  --brand-16305e: #16305e;
  --brand-163060: #163060;
  --brand-173d73: #173d73;
  --brand-174174: #174174;
  --brand-17467f: #17467f;
  --brand-1b4389: #1b4389;
  --brand-1b4588: #1b4588;
  --brand-1c3a72: #1c3a72;
  --brand-1f3f7c: #1f3f7c;
  --brand-1f4fa3: #1f4fa3;
  --brand-214b93: #214b93;
  --brand-234477: #234477;
  --brand-236bd2: #236bd2;
  --brand-24579f: #24579f;
  --brand-2c67bd: #2c67bd;
  --brand-2d5aaa: #2d5aaa;
  --brand-2f72dc: #2f72dc;
  --brand-315b9f: #315b9f;
  --brand-3a5a92: #3a5a92;
  --brand-3b6fd4: #3b6fd4;
  --brand-49658f: #49658f;
  --brand-4a7fd4: #4a7fd4;
  --brand-6b9fe8: #6b9fe8;
  --brand-6da2ff: #6da2ff;
  --brand-6fa5ff: #6fa5ff;
  --brand-70a5f5: #70a5f5;
  --brand-75a7ff: #75a7ff;
  --brand-8eb8ff: #8eb8ff;
  --brand-8fb0ea: #8fb0ea;
  --brand-9dbff5: #9dbff5;
  --brand-9dc0ff: #9dc0ff;
  --brand-a9c4f2: #a9c4f2;
  --brand-b9d2ff: #b9d2ff;
  --brand-081d42-rgb: 8,29,66;
  --brand-0a1f48-rgb: 10,31,72;
  --brand-0d2b60-rgb: 13,43,96;
  --brand-0f2346-rgb: 15,35,70;
  --brand-102a5f-rgb: 16,42,95;
  --brand-102b5f-rgb: 16,43,95;
  --brand-122d5b-rgb: 18,45,91;
  --brand-132b54-rgb: 19,43,84;
  --brand-1f3f7c-rgb: 31,63,124;
  --brand-2d5aaa-rgb: 45,90,170;
  --brand-2d70b0-rgb: 45,112,176;
  --brand-2f72dc-rgb: 47,114,220;
  --brand-3769bc-rgb: 55,105,188;
  --brand-3b6fd4-rgb: 59,111,212;
  --brand-3f75ce-rgb: 63,117,206;
  --brand-4a7fd4-rgb: 74,127,212;
  --brand-518beb-rgb: 81,139,235;
  --brand-679dfa-rgb: 103,157,250;
  --brand-689fff-rgb: 104,159,255;
  --brand-69a2ff-rgb: 105,162,255;
  --brand-6da2ff-rgb: 109,162,255;
  --brand-6fa5ff-rgb: 111,165,255;
  --brand-80aef7-rgb: 128,174,247;
}
:root[data-accent="green"] {
  --brand-0056c7: #02714c;
  --brand-081d42: #012617;
  --brand-08214e: #012c1c;
  --brand-0b214b: #012c1b;
  --brand-0b2554: #02311f;
  --brand-0d2a5c: #013623;
  --brand-0d2b60: #013824;
  --brand-0f316d: #03402a;
  --brand-102b5f: #013824;
  --brand-102f68: #023d28;
  --brand-12294f: #003320;
  --brand-12346f: #02432b;
  --brand-143765: #03432c;
  --brand-143771: #03452e;
  --brand-16305e: #013c27;
  --brand-163060: #023d27;
  --brand-173d73: #014b31;
  --brand-174174: #014e33;
  --brand-17467f: #055438;
  --brand-1b4389: #025538;
  --brand-1b4588: #045639;
  --brand-1c3a72: #024930;
  --brand-1f3f7c: #004f34;
  --brand-1f4fa3: #026443;
  --brand-214b93: #075d3f;
  --brand-234477: #0a5237;
  --brand-236bd2: #0d845a;
  --brand-24579f: #046947;
  --brand-2c67bd: #0a7d55;
  --brand-2d5aaa: #056f4b;
  --brand-2f72dc: #108c60;
  --brand-315b9f: #096e4b;
  --brand-3a5a92: #25694c;
  --brand-3b6fd4: #098a5e;
  --brand-49658f: #407059;
  --brand-4a7fd4: #24966a;
  --brand-6b9fe8: #5bb18a;
  --brand-6da2ff: #4bbc8b;
  --brand-6fa5ff: #52bd8e;
  --brand-70a5f5: #5cba8f;
  --brand-75a7ff: #58bf91;
  --brand-8eb8ff: #7dcba5;
  --brand-8fb0ea: #82bfa0;
  --brand-9dbff5: #93cdaf;
  --brand-9dc0ff: #8ed1af;
  --brand-a9c4f2: #a0d0b7;
  --brand-b9d2ff: #b0dec6;
  --brand-081d42-rgb: 1,38,23;
  --brand-0a1f48-rgb: 1,42,25;
  --brand-0d2b60-rgb: 1,56,36;
  --brand-0f2346-rgb: 1,45,28;
  --brand-102a5f-rgb: 2,56,36;
  --brand-102b5f-rgb: 1,56,36;
  --brand-122d5b-rgb: 2,57,37;
  --brand-132b54-rgb: 0,54,34;
  --brand-1f3f7c-rgb: 0,79,52;
  --brand-2d5aaa-rgb: 5,111,75;
  --brand-2d70b0-rgb: 36,127,90;
  --brand-2f72dc-rgb: 16,140,96;
  --brand-3769bc-rgb: 12,127,87;
  --brand-3b6fd4-rgb: 9,138,94;
  --brand-3f75ce-rgb: 10,141,97;
  --brand-4a7fd4-rgb: 36,150,106;
  --brand-518beb-rgb: 32,166,116;
  --brand-679dfa-rgb: 68,183,134;
  --brand-689fff-rgb: 66,185,136;
  --brand-69a2ff-rgb: 73,187,138;
  --brand-6da2ff-rgb: 75,188,139;
  --brand-6fa5ff-rgb: 82,189,142;
  --brand-80aef7-rgb: 111,193,154;
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.5;
}
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bord2); border-radius: 3px; }

/* ── CSS Variables ── */
:root {
  --bg:   #0f1117;
  --surf: #1a1c20;
  --surf2: #202328;
  --surf3: #252830;
  --bord: #2e3038;
  --bord2: #3a3d46;
  --acc: var(--brand-4a7fd4);
  --acc2: var(--brand-6b9fe8);
  --acc3: var(--brand-2d5aaa);
  --text: #e8e6df;
  --text1: #f0ede6;
  --text2: #b8b5ae;
  --mut: #7a8199;
  --dan: #c25c5c;
  --suc: #5cb87a;
  --warn: #c89b3c;
  --inf: #5c8ec2;
  --g6: #3cbf88;   /* excellent  */
  --g5: #44a46e;   /* good       */
  --g4: #8a9ab5;   /* normal     */
  --g3: #c89b3c;   /* concerning */
  --g2: #d47040;   /* very concerning */
  --g1: #e05555;   /* critical   */
  --r: 6px;
  --rl: 12px;
  --rxl: 16px;
  --shadow: 0 4px 24px rgba(0,0,0,.5);
  --shadow-sm: 0 2px 12px rgba(0,0,0,.35);
}

/* ── Light / Emydex-branded theme ── */
[data-theme="light"] {
  --bg:        #f0f4f8;
  --surf:      #ffffff;
  --surf2:     #f4f6fb;
  --surf3:     #eaecf4;
  --bord:      #cfd5e8;
  --bord2:     #b0b8d0;
  --acc:       var(--brand-1f3f7c);   /* Emydex primary navy */
  --acc2:      var(--brand-2d5aaa);
  --acc3:      var(--brand-163060);
  --text:      #1a2035;
  --text1:     #0d1528;
  --text2:     #4a5570;
  --mut:       #6a7590;
  --dan:       #b83030;
  --suc:       #3bb44a;   /* Emydex green */
  --warn:      #a06800;
  --inf:       #2d70b0;
  --g6: #3cbf88; --g5: #44a46e; --g4: #6a7590;
  --g3: #c89b3c; --g2: #d47040; --g1: #e05555;
  --shadow:    0 4px 24px rgba(var(--brand-1f3f7c-rgb),.12);
  --shadow-sm: 0 2px 12px rgba(var(--brand-1f3f7c-rgb),.08);
}

/* Emydex navy sidebar in light mode */
[data-theme="light"] .sidebar {
  background: linear-gradient(180deg, var(--brand-1c3a72) 0%, var(--brand-16305e) 100%);
  border-right-color: var(--brand-12294f);
}
[data-theme="light"] .brand { border-bottom-color: rgba(255,255,255,.1); }
[data-theme="light"] .brand-eye { color: var(--brand-8fb0ea); }
[data-theme="light"] .brand-name,
[data-theme="light"] .brand-ver { color: rgba(255,255,255,.95); }
[data-theme="light"] .brand-ver { color: rgba(255,255,255,.5); font-size: 10px; }
[data-theme="light"] .nav-section { color: rgba(255,255,255,.42); border-color: transparent; }
[data-theme="light"] .nav-item { color: rgba(255,255,255,.74); border-color: transparent; }
[data-theme="light"] .nav-item:hover { background: rgba(255,255,255,.08); color: #fff; }
[data-theme="light"] .nav-item.active {
  background: rgba(255,255,255,.12);
  color: #fff;
  border-color: transparent;
  box-shadow: inset 3px 0 0 var(--brand-6da2ff);
  font-weight: 600;
}
[data-theme="light"] .nav-item.active .nav-icon { color: var(--brand-9dc0ff); }
[data-theme="light"] .nav-item .nav-icon { color: inherit; }
[data-theme="light"] .sidebar-footer { border-top-color: rgba(255,255,255,.1); }
[data-theme="light"] .user-chip { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.1); }
[data-theme="light"] .user-name { color: #fff; }
[data-theme="light"] .user-role { color: rgba(255,255,255,.55); }
[data-theme="light"] .logout-btn { border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.65); }
[data-theme="light"] .logout-btn:hover { border-color: #f08080; color: #f08080; }
[data-theme="light"] .theme-toggle { border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.65); }
[data-theme="light"] .theme-toggle:hover { border-color: var(--brand-9dc0ff); color: var(--brand-9dc0ff); }

/* Topbar */
[data-theme="light"] .topbar {
  border-bottom-color: #e3e8f2;
  background: #fff;
}
[data-theme="light"] .topbar::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, var(--brand-1f3f7c), var(--brand-3b6fd4) 60%, var(--brand-6da2ff));
}
[data-theme="light"] .topbar { position: relative; }

/* ── Theme toggle button ── */
.theme-toggle {
  display: flex; align-items: center; gap: .5rem;
  width: 100%;
  background: transparent;
  border: 1px solid var(--bord);
  border-radius: var(--r);
  padding: .38rem .7rem;
  margin-bottom: .45rem;
  font-size: 12px; font-family: inherit;
  color: var(--mut);
  cursor: pointer;
  transition: all .15s;
}
.theme-toggle:hover { border-color: var(--acc); color: var(--acc); }
.theme-toggle i { font-size: 14px; }

/* ── Layout ── */
.app {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ── Sidebar ── */
.sidebar {
  width: 280px;
  flex-shrink: 0;
  background: var(--surf);
  border-right: 1px solid var(--bord);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transition: width .2s;
}
.brand {
  padding: 1.4rem 1.2rem 1rem;
  border-bottom: 1px solid var(--bord);
}
.brand-eye {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--acc);
  font-weight: 600;
}
.brand-name {
  font-family: 'Manrope', sans-serif;
  font-size: 1.25rem;
  color: var(--text);
  line-height: 1.2;
  margin-top: .3rem;
}
.brand-ver {
  font-size: 11px;
  color: var(--mut);
  margin-top: .2rem;
}
.nav-section {
  padding: .85rem .9rem .3rem;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mut);
  font-weight: 600;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .6rem 1rem;
  margin: .12rem .5rem;
  border-radius: var(--r);
  font-size: 15px;
  color: var(--mut);
  cursor: pointer;
  transition: all .15s;
  border: 1px solid transparent;
  user-select: none;
}
.nav-item:hover { background: var(--surf2); color: var(--text); }
.nav-item.active { background: rgba(var(--brand-4a7fd4-rgb),.12); color: var(--acc); border-color: rgba(var(--brand-4a7fd4-rgb),.22); }
.nav-item .nav-icon { font-size: 15px; width: 18px; text-align: center; flex-shrink: 0; }
.sidebar-footer {
  margin-top: auto;
  padding: 1rem;
  border-top: 1px solid var(--bord);
}
.user-chip {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem .65rem;
  border-radius: var(--r);
  background: var(--surf2);
  border: 1px solid var(--bord);
  margin-bottom: .5rem;
}
.user-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--acc), var(--inf));
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.user-name { font-size: 14px; font-weight: 500; color: var(--text); }
.user-role { font-size: 12px; color: var(--mut); }
.logout-btn {
  width: 100%;
  background: transparent;
  border: 1px solid var(--bord);
  border-radius: var(--r);
  padding: .38rem;
  font-family: inherit;
  font-size: 12px;
  color: var(--mut);
  cursor: pointer;
  transition: all .15s;
}
.logout-btn:hover { border-color: var(--dan); color: var(--dan); }

/* ── Main content ── */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}
.topbar {
  background: var(--surf);
  border-bottom: 1px solid var(--bord);
  padding: .75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: .75rem;
}
.topbar-title {
  font-family: 'Manrope', sans-serif;
  font-size: 1.5rem;
  color: var(--text);
  line-height: 1;
}
.topbar-sub { font-size: 13px; color: var(--mut); margin-top: .2rem; }
.topbar-right {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}
.month-select {
  background: var(--surf2);
  border: 1px solid var(--bord);
  border-radius: var(--r);
  padding: .38rem .7rem;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  outline: none;
  transition: border-color .15s;
}
.month-select:focus { border-color: var(--acc); }

/* ── Content area ── */
.content {
  flex: 1;
  overflow-y: auto;
  padding: 1.4rem 1.5rem;
}
.page { display: none; }
.page.active { display: block; }

/* ── Badges ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  font-size: 11px;
  font-weight: 600;
  padding: .15rem .5rem;
  border-radius: 20px;
  letter-spacing: .02em;
}
.badge-gold   { background: rgba(200,169,110,.15); color: #c8a96e;     border: 1px solid rgba(200,169,110,.3); }
.badge-danger { background: rgba(194,92,92,.15);  color: var(--dan);  border: 1px solid rgba(194,92,92,.3); }
.badge-success{ background: rgba(92,184,122,.15); color: var(--suc);  border: 1px solid rgba(92,184,122,.3); }
.badge-warning{ background: rgba(200,155,60,.15); color: var(--warn); border: 1px solid rgba(200,155,60,.3); }
.badge-info   { background: rgba(92,142,194,.15); color: var(--inf);  border: 1px solid rgba(92,142,194,.3); }
.badge-muted  { background: rgba(122,129,153,.1); color: var(--mut);  border: 1px solid var(--bord); }
.badge-mand   { background: rgba(194,92,92,.12);  color: #e88;        border: 1px solid rgba(194,92,92,.3); }
.badge-team   { background: rgba(92,142,194,.12); color: var(--inf);  border: 1px solid rgba(92,142,194,.25); }
.badge-add-team    { background: rgba(92,184,122,.12); color: var(--suc);  border: 1px solid rgba(92,184,122,.3);  cursor: pointer; }
.badge-remove-team { background: rgba(194,92,92,.08);  color: var(--dan);  border: 1px solid rgba(194,92,92,.25); cursor: pointer; }
.badge-add-team:hover    { background: rgba(92,184,122,.22); }
.badge-remove-team:hover { background: rgba(194,92,92,.18); }

/* ── Cards ── */
.card {
  background: var(--surf);
  border: 1px solid var(--bord);
  border-radius: var(--rl);
  padding: 1.1rem 1.2rem;
}
.card-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--mut);
  font-weight: 600;
  margin-bottom: .75rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.card-title i { color: var(--acc); font-size: 15px; }
.card-big {
  font-family: 'Manrope', sans-serif;
  font-size: 2.4rem;
  color: var(--text);
  line-height: 1;
}
.card-sub { font-size: 13px; color: var(--mut); margin-top: .3rem; }

/* ── Grids ── */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1rem; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }

/* ── Dashboard tile row ── */
.tile-row { display: grid; grid-template-columns: 1.6fr 1fr repeat(6, 1fr); gap: .75rem; margin-bottom: 1rem; }
.tile { border-radius: 10px; padding: .8rem 1rem; display: flex; flex-direction: column; min-height: 88px; }
.tile-metric { background: var(--surf); border: 1px solid var(--bord); }
.tile-label { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--mut); display: flex; align-items: center; gap: 4px; }
.tile-label i { font-size: 12px; color: var(--acc); }
.tile-big { font-family: 'Manrope', sans-serif; font-size: 1.9rem; font-weight: 700; color: var(--text); line-height: 1.1; margin-top: .25rem; }
.tile-sub { font-size: 11px; color: var(--mut); margin-top: .15rem; }
.tile-rating { color: #fff; align-items: center; justify-content: center; text-align: center; gap: 2px; }
.tile-rating .tile-label { color: rgba(255,255,255,.8); justify-content: center; font-size: 9px; letter-spacing: .07em; }
.tile-rating .tile-big { font-size: 2.2rem; color: #fff; margin-top: 0; text-shadow: 0 1px 4px rgba(0,0,0,.25); }
.tile-rating .tile-sub { color: rgba(255,255,255,.6); font-size: 10px; margin-top: 0; }
.tile-g6 { background: linear-gradient(145deg, #4fd49a, #1e9060); box-shadow: 0 3px 10px rgba(60,191,136,.35); }
.tile-g5 { background: linear-gradient(145deg, #56b87e, #1e7040); box-shadow: 0 3px 10px rgba(68,164,110,.35); }
.tile-g4 { background: linear-gradient(145deg, #90a8c4, #506080); box-shadow: 0 3px 10px rgba(100,130,170,.35); }
.tile-g3 { background: linear-gradient(145deg, #d8aa50, #906818); box-shadow: 0 3px 10px rgba(200,155,60,.35); }
.tile-g2 { background: linear-gradient(145deg, #e08858, #b04820); box-shadow: 0 3px 10px rgba(212,112,64,.35); }
.tile-g1 { background: linear-gradient(145deg, #e86868, #b02020); box-shadow: 0 3px 10px rgba(224,85,85,.35); }

/* ── Standout scores band rows ── */
.sband-row { margin-bottom: .75rem; }
.sband-row:last-child { margin-bottom: 0; }
.sband-header { display: flex; align-items: center; gap: 6px; margin-bottom: .4rem; }
.sband-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sband-label { font-size: 11px; color: var(--mut); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.sband-rule { flex: 1; height: 1px; background: var(--bord); }
.sband-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 14px; }
.sband-chip { display: flex; align-items: center; gap: 5px; background: var(--surf2); border-radius: 20px; padding: 3px 8px 3px 4px; }
.sband-chip-name { font-size: 12px; color: var(--text); }
.sband-chip-count { font-size: 11px; font-weight: 600; color: var(--mut); }

/* ── Progress bar ── */
.progress-track { height: 3px; background: var(--bord); border-radius: 2px; margin-top: .8rem; }
.progress-fill  { height: 100%; border-radius: 2px; background: var(--acc); transition: width .4s; }

/* ── Bell curve bars ── */
.bell-wrap { display: flex; align-items: flex-start; gap: 4px; margin-top: .7rem; }
.bell-col  { display: flex; flex-direction: column; align-items: center; flex: 1; }
.bell-col-bars { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 56px; width: 100%; gap: 2px; }
.bell-bar  { width: 100%; border-radius: 3px 3px 0 0; transition: height .4s; }
.bell-lbl  { font-size: 9px; color: var(--mut); }
.bell-val  { font-size: 9px; color: var(--text); }

/* ── Stat rows (dashboard lists) ── */
.stat-row { display: flex; align-items: center; justify-content: space-between; padding: .5rem 0; border-bottom: 1px solid var(--bord); }
.stat-row:last-child { border-bottom: none; }
.stat-name { font-size: 15px; color: var(--text); }
.stat-meta { font-size: 12px; color: var(--mut); margin-top: .1rem; }
.score-pill {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Manrope', sans-serif;
  font-size: 14px; font-weight: 700;
  flex-shrink: 0;
  color: #fff;
  border: none;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.sp6 { background: linear-gradient(145deg,#4fd49a,#28a070); box-shadow: 0 2px 8px rgba(60,191,136,.55), inset 0 1px 0 rgba(255,255,255,.3); }
.sp5 { background: linear-gradient(145deg,#56b87e,#2e8a54); box-shadow: 0 2px 8px rgba(68,164,110,.55), inset 0 1px 0 rgba(255,255,255,.25); }
.sp4 { background: linear-gradient(145deg,#8fa4be,#607085); box-shadow: 0 2px 8px rgba(100,130,170,.5),  inset 0 1px 0 rgba(255,255,255,.25); }
.sp3 { background: linear-gradient(145deg,#e07878,#c04848); box-shadow: 0 2px 8px rgba(200,80,80,.5),    inset 0 1px 0 rgba(255,255,255,.3); }
.sp2 { background: linear-gradient(145deg,#cc3a3a,#a01818); box-shadow: 0 2px 8px rgba(180,40,40,.55),   inset 0 1px 0 rgba(255,255,255,.25); }
.sp1 { background: linear-gradient(145deg,#a81818,#6e0404); box-shadow: 0 2px 8px rgba(140,20,20,.6),    inset 0 1px 0 rgba(255,255,255,.2); }

/* ── Trend bars ── */
.trend-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.trend-label { font-size: 12px; color: var(--mut); width: 64px; flex-shrink: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.trend-track { flex: 1; height: 5px; background: var(--surf2); border-radius: 3px; }
.trend-fill  { height: 100%; border-radius: 3px; transition: width .4s; }
.trend-val   { font-size: 12px; color: var(--text); width: 28px; text-align: right; flex-shrink: 0; }

/* ── Action rows ── */
.action-row { display: flex; align-items: center; gap: .65rem; padding: .55rem 0; border-bottom: 1px solid var(--bord); }
.action-row:last-child { border-bottom: none; }
.action-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: .4rem; }
.action-desc { font-size: 13px; color: var(--text); }
.action-meta { font-size: 11px; color: var(--mut); margin-top: .15rem; }

/* ── Manager rate page sections ── */
.rate-section-header {
  display: flex;
  align-items: center;
  margin-bottom: .65rem;
}
.rate-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .03em;
  display: flex;
  align-items: center;
  gap: .35rem;
}
.rate-section-divider {
  height: 1px;
  background: var(--bord);
  margin: 1.25rem 0 1rem;
}

/* ── Rate page toolbar ── */
.rate-toolbar {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .85rem;
  align-items: center;
}
.search-input {
  background: var(--surf);
  border: 1px solid var(--bord);
  border-radius: var(--r);
  padding: .42rem .8rem;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  flex: 1;
  min-width: 160px;
  transition: border-color .15s;
}
.search-input:focus { border-color: var(--acc); }
.filter-btn {
  background: transparent;
  border: 1px solid var(--bord);
  border-radius: var(--r);
  padding: .38rem .75rem;
  font-family: inherit;
  font-size: 12px;
  color: var(--mut);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: .3rem;
}
.filter-btn:hover { border-color: var(--acc); color: var(--acc); }
.filter-btn.active { border-color: var(--acc); color: var(--acc); background: rgba(var(--brand-4a7fd4-rgb),.08); }
.filter-btn.active-mand { border-color: #e88; color: #e88; background: rgba(194,92,92,.08); }
.filter-btn.active-team { border-color: var(--inf); color: var(--inf); background: rgba(92,142,194,.08); }
.view-btn {
  background: transparent;
  border: 1px solid var(--bord);
  border-radius: var(--r);
  padding: .38rem .55rem;
  font-size: 14px;
  color: var(--mut);
  cursor: pointer;
  transition: all .15s;
}
.view-btn:hover { border-color: var(--acc); color: var(--acc); }
.view-btn.active { border-color: var(--acc); color: var(--acc); background: rgba(var(--brand-4a7fd4-rgb),.08); }
.rate-info { font-size: 12px; color: var(--mut); margin-bottom: .8rem; }

/* ── Employee cards (card view) ── */
.emp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: .75rem;
}
.emp-card {
  background: var(--surf);
  border: 1px solid var(--bord);
  border-radius: var(--rl);
  padding: .9rem;
  transition: border-color .15s;
  position: relative;
}
.emp-card:hover { border-color: rgba(var(--brand-4a7fd4-rgb),.35); }
.emp-card.is-rated { border-color: rgba(92,184,122,.35); }
.emp-card.is-mandatory { border-left: 2.5px solid rgba(194,92,92,.65); }
.emp-card-exit { animation: cardExit .28s ease forwards; pointer-events: none; }
@keyframes cardExit {
  0%   { opacity: 1; transform: scale(1)    translateY(0); }
  100% { opacity: 0; transform: scale(0.92) translateY(-12px); }
}
.emp-card-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .65rem; }
.emp-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surf2);
  border: 1px solid var(--bord);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  color: var(--acc);
  flex-shrink: 0;
}
.emp-name { font-size: 15px; font-weight: 500; color: var(--text); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.emp-name-link { cursor: pointer; }
.emp-name-link:hover { color: var(--acc); text-decoration: underline; }
.emp-profile-nav { display: flex; align-items: center; gap: .5rem; }
.emp-profile-nav .nav-counter { font-size: 0.85rem; color: var(--mut); min-width: 3.5rem; text-align: center; }
.wl-comment-ta { width: 100%; resize: vertical; min-height: 3rem; font-size: 13px; padding: .35rem .5rem; border: 1px solid var(--bord); border-radius: var(--radius-sm); background: var(--surf); color: var(--text1); font-family: inherit; }
.wl-comment-ta:focus { outline: none; border-color: var(--acc); }
.wl-comment-ta.input-error { border-color: var(--danger); }
.emp-meta { font-size: 13px; color: var(--mut); }
.emp-badge-row { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .55rem; min-height: 18px; }
.autosave-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--suc);
  position: absolute;
  top: .6rem; right: .6rem;
  opacity: 0;
  transition: opacity .3s;
}
.autosave-dot.show { opacity: 1; }

/* ── Score stars ── */
.score-row { display: flex; gap: 5px; margin-bottom: .4rem; flex-wrap: wrap; }
.score-btn {
  min-width: 28px; height: 25px; padding: 0 4px;
  border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--bord);
  background: var(--surf2);
  color: var(--mut);
  transition: all .12s;
  user-select: none;
  font-family: 'Manrope', sans-serif;
}
.score-btn:hover { border-color: var(--acc); color: var(--acc); }
.score-btn.selected { font-weight: 700; }
.comment-area {
  width: 100%;
  background: var(--surf2);
  border: 1px solid var(--bord);
  border-radius: var(--r);
  padding: .4rem .6rem;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  resize: none;
  min-height: 72px;
  overflow: hidden;
  outline: none;
  margin-top: .25rem;
  transition: border-color .15s;
}
.comment-area:focus { border-color: var(--acc); }
.comment-area.comment-required { border-color: var(--dan); }
.comment-area.comment-required:focus { border-color: var(--dan); }
.card-reset-btn {
  display: none; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex-shrink: 0;
  background: transparent; border: 1px solid var(--bord); border-radius: var(--r);
  color: var(--mut); font-size: 13px; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.emp-card.is-rated .card-reset-btn,
.list-row.is-rated .card-reset-btn { display: flex; }
.card-reset-btn:hover { color: var(--dan); border-color: rgba(194,92,92,.5); }
.card-reset-btn:disabled { opacity: .4; cursor: not-allowed; }
.card-save-btn {
  display: none; align-items: center; gap: 4px;
  margin-top: 6px; margin-left: auto;
  padding: 5px 12px; border-radius: 6px;
  border: 1px solid rgba(68,164,110,.4);
  background: rgba(68,164,110,.08);
  color: #3a9e64; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.emp-card.is-editing .card-save-btn,
.emp-card:focus-within .card-save-btn { display: flex; }
.card-save-btn:hover { background: rgba(68,164,110,.18); border-color: rgba(68,164,110,.6); }
.card-save-btn:disabled { opacity: .5; cursor: not-allowed; }
.add-team-btn {
  background: transparent;
  border: 1px solid var(--bord);
  border-radius: var(--r);
  padding: .18rem .48rem;
  font-family: inherit;
  font-size: 11px;
  color: var(--mut);
  cursor: pointer;
  transition: all .12s;
}
.add-team-btn:hover { border-color: var(--inf); color: var(--inf); }

/* ── List view ── */
.list-wrap {
  background: var(--surf);
  border: 1px solid var(--bord);
  border-radius: var(--rl);
  overflow: hidden;
}
.list-header {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem .9rem;
  background: var(--surf2);
  border-bottom: 1px solid var(--bord);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--mut);
  font-weight: 600;
}
.lh-av { width: 38px; flex-shrink: 0; }
.lh-name { flex: 0 0 210px; }
.lh-score { flex: 0 0 146px; }
.lh-comment { flex: 1; }
.list-row {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .5rem .9rem;
  border-bottom: 1px solid var(--bord);
  transition: background .12s;
  border-left: 2.5px solid transparent;
}
.list-row:last-child { border-bottom: none; }
.list-row:hover { background: rgba(255,255,255,.015); }
.list-row.is-mandatory { border-left-color: rgba(194,92,92,.6); }
.list-row.is-rated { border-left-color: rgba(92,184,122,.45); }
.list-av {
  width: 38px; height: 38px;
  margin-top: 4px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surf2);
  border: 1px solid var(--bord);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700;
  color: var(--acc);
  flex-shrink: 0;
}
.list-info { flex: 0 0 210px; min-width: 0; padding-top: 2px; }
.list-name { font-size: 14px; font-weight: 500; color: var(--text); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.list-meta { font-size: 11px; color: var(--mut); }
.list-scores { display: flex; gap: 5px; flex: 0 0 160px; padding-top: 3px; }
.list-score-btn {
  min-width: 22px; height: 22px; padding: 0 3px;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--bord);
  background: var(--surf2);
  color: var(--mut);
  transition: all .1s;
  user-select: none;
  font-family: 'Manrope', sans-serif;
}
.list-score-btn:hover { border-color: var(--acc); color: var(--acc); }
.list-score-btn.selected { font-weight: 700; }
.list-comment {
  flex: 1;
  background: var(--surf2);
  border: 1px solid var(--bord);
  border-radius: var(--r);
  padding: .28rem .5rem;
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  outline: none;
  min-width: 0;
  min-height: 54px;
  overflow: hidden;
  resize: none;
  transition: border-color .15s;
}
.list-comment:focus { border-color: var(--acc); }
.list-comment.comment-required { border-color: var(--dan); }
.list-status { flex: 0 0 100px; display: flex; align-items: flex-start; justify-content: flex-end; gap: .35rem; padding-top: 3px; }
.saved-flash { font-size: 10px; color: var(--suc); opacity: 0; transition: opacity .3s; white-space: nowrap; }
.saved-flash.show { opacity: 1; }

/* ── Data tables (admin pages) ── */
.table-wrap {
  background: var(--surf);
  border: 1px solid var(--bord);
  border-radius: var(--rl);
  overflow: hidden;
}
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: fixed; }
.data-table th {
  background: var(--surf2);
  padding: .65rem 1rem;
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--mut);
  font-weight: 600;
  border-bottom: 1px solid var(--bord);
}
.data-table td {
  padding: .55rem 1rem;
  border-bottom: 1px solid var(--bord);
  color: var(--text);
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: rgba(255,255,255,.018); }

/* ── Buttons ── */
.btn-primary {
  background: var(--acc);
  color: #fff;
  border: none;
  border-radius: var(--r);
  padding: .48rem 1.1rem;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, transform .1s;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.btn-primary:hover { background: var(--acc2); }
.btn-primary:active { transform: scale(.98); }
.btn-secondary {
  background: transparent;
  border: 1px solid var(--bord);
  border-radius: var(--r);
  padding: .45rem 1rem;
  font-family: inherit;
  font-size: 13px;
  color: var(--mut);
  cursor: pointer;
  transition: all .15s;
}
.btn-secondary:hover { border-color: var(--acc); color: var(--acc); }
.btn-icon {
  background: transparent;
  border: 1px solid var(--bord);
  border-radius: var(--r);
  padding: .3rem .6rem;
  font-size: 12px;
  color: var(--mut);
  cursor: pointer;
  transition: all .15s;
}
.btn-icon:hover { border-color: var(--acc); color: var(--acc); }
.btn-icon.danger:hover { border-color: var(--dan); color: var(--dan); }
.btn-icon.mand { border-color: rgba(194,92,92,.4); color: #e88; }
.btn-icon.team { border-color: rgba(92,142,194,.35); color: var(--inf); }

/* ── Forms ── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.form-field { margin-bottom: .75rem; }
.form-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .3rem;
}
.form-input, .form-select {
  width: 100%;
  background: var(--surf2);
  border: 1px solid var(--bord);
  border-radius: var(--r);
  padding: .5rem .75rem;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color .15s;
}
.form-input:focus, .form-select:focus { border-color: var(--acc); }
.form-card {
  background: var(--surf);
  border: 1px solid var(--bord);
  border-radius: var(--rl);
  padding: 1rem 1.1rem;
  margin-bottom: .85rem;
}

/* ── Lock warn ── */
.lock-warn {
  background: rgba(194,92,92,.1);
  border: 1px solid rgba(194,92,92,.3);
  border-radius: var(--r);
  padding: .55rem .9rem;
  color: var(--dan);
  font-size: 13px;
  margin-bottom: .85rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* ── Period Closed Page ── */
.period-closed-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5rem 2rem;
  text-align: center;
}
.period-closed-icon {
  font-size: 3rem;
  color: var(--dan);
  margin-bottom: 1.25rem;
}
.period-closed-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .65rem;
}
.period-closed-body {
  font-size: 14px;
  color: var(--mut);
  line-height: 1.7;
  max-width: 420px;
}

/* ── Email Preview Dialog ── */
.email-dialog-backdrop {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.email-dialog {
  background: var(--surf);
  border: 1px solid var(--bord);
  border-radius: calc(var(--r) * 2);
  box-shadow: 0 24px 64px rgba(0,0,0,.6);
  width: 100%; max-width: 640px;
  display: flex; flex-direction: column;
  max-height: calc(100vh - 3rem);
  animation: bladeIn .2s ease;
}
.email-dialog-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem .85rem;
  border-bottom: 1px solid var(--bord);
  font-size: 14px; font-weight: 600; color: var(--text);
}
.email-dialog-body {
  padding: 1rem 1.25rem;
  overflow-y: auto; flex: 1;
}
.email-dialog-body textarea {
  width: 100%; min-height: 340px;
  background: var(--bg2);
  border: 1px solid var(--bord);
  border-radius: var(--r);
  padding: .75rem;
  color: var(--text);
  font-family: monospace; font-size: 12px; line-height: 1.6;
  resize: vertical;
}
.email-dialog-body textarea:focus { outline: none; border-color: var(--acc); }
.email-dialog-footer {
  display: flex; gap: .5rem; justify-content: flex-end;
  padding: .85rem 1.25rem 1rem;
  border-top: 1px solid var(--bord);
}

/* ── Toast ── */
.toast {
  position: fixed;
  top: 1.5rem;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  backface-visibility: hidden;
  background: linear-gradient(135deg, #1e3d2a 0%, #163322 100%);
  border: 1px solid rgba(92,184,122,.5);
  border-radius: var(--r);
  padding: .65rem 1.4rem;
  color: #6ee89a;
  font-size: 13px; font-weight: 600;
  box-shadow: 0 4px 16px rgba(0,0,0,.5), 0 0 0 1px rgba(92,184,122,.15);
  z-index: 9999;
  animation: toastIn .25s ease;
  pointer-events: none;
  white-space: nowrap;
}
.toast.err {
  background: linear-gradient(135deg, #3d1e1e 0%, #331616 100%);
  border-color: rgba(194,92,92,.5);
  color: #f08080;
  box-shadow: 0 4px 16px rgba(0,0,0,.5), 0 0 0 1px rgba(194,92,92,.15);
}
@keyframes toastIn { from { opacity: 0; transform: translate3d(-50%, -8px, 0); } to { opacity: 1; transform: translate3d(-50%, 0, 0); } }

/* ── Login ── */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 55% 40%, #1a2040 0%, #0f1117 68%);
  padding: 2rem;
}
[data-theme="light"] .login-screen {
  background: #edf0f5;
}
.login-card {
  background: var(--surf);
  border: 1px solid var(--bord);
  border-radius: var(--rxl);
  padding: 2.75rem 2.25rem;
  max-width: 420px;
  width: 100%;
  box-shadow: var(--shadow);
}
[data-theme="light"] .login-card {
  border-color: transparent;
  box-shadow: 0 8px 40px rgba(0,0,0,.11);
  text-align: center;
}
.login-logo { margin-bottom: 1.75rem; }
.login-logo-wordmark {
  font-family: 'Manrope', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--acc);
  line-height: 1.2;
}
.login-logo-tag {
  font-size: 9px;
  letter-spacing: .16em;
  color: var(--mut);
  text-transform: uppercase;
  margin-top: .3rem;
}
.login-title { font-family: 'Manrope', sans-serif; font-size: 1.85rem; font-weight: 700; color: var(--text); line-height: 1.2; margin-bottom: .6rem; }
.login-sub { color: var(--mut); font-size: 14px; margin-bottom: 1.75rem; line-height: 1.6; }
.login-label { display: block; font-size: 11px; font-weight: 600; color: var(--mut); text-transform: uppercase; letter-spacing: .1em; margin-bottom: .4rem; }
.login-input {
  width: 100%;
  background: var(--surf2);
  border: 1px solid var(--bord);
  border-radius: var(--r);
  padding: .72rem 1rem;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color .15s;
  margin-bottom: 1rem;
}
.login-input:focus { border-color: var(--acc); }
.login-btn {
  width: 100%;
  background: var(--acc);
  color: #fff;
  border: none;
  border-radius: var(--r);
  padding: .88rem;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
  letter-spacing: .02em;
}
.login-btn:hover { background: var(--acc2); }
.login-error {
  background: rgba(194,92,92,.1);
  border: 1px solid var(--dan);
  border-radius: var(--r);
  padding: .6rem .9rem;
  color: var(--dan);
  font-size: 12px;
  margin-bottom: .9rem;
}
.login-persist-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  margin-top: .9rem;
  font-size: 12px;
  color: var(--mut);
}
.login-hint { font-size: 12px; color: var(--mut); margin-top: 1.2rem; line-height: 1.6; }
.login-hint strong { color: var(--acc); }
.login-footer {
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--bord);
  font-size: 12px;
  color: var(--mut);
  text-align: center;
}

/* ── Tab bar (People page and future tabbed pages) ── */
.tab-bar {
  display: flex;
  gap: 0;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--bord);
}
.tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--mut);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: .5rem .9rem .4rem;
  cursor: pointer;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
  display: flex;
  align-items: center;
  gap: .3rem;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--acc); border-bottom-color: var(--acc); }

/* ── Close month page ── */
.close-card { max-width: 520px; }
.section-title { font-family: 'Manrope', sans-serif; font-size: 1.25rem; color: var(--text); margin-bottom: .4rem; }
.section-sub { font-size: 13px; color: var(--mut); line-height: 1.6; margin-bottom: 1rem; }
.divider { height: 1px; background: var(--bord); margin: 1rem 0; }
.month-lock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .7rem 0;
  border-bottom: 1px solid var(--bord);
}
.month-lock-row:last-child { border-bottom: none; }
.close-danger-btn {
  background: rgba(194,92,92,.1);
  border: 1px solid rgba(194,92,92,.35);
  border-radius: var(--r);
  padding: .38rem .85rem;
  font-family: inherit;
  font-size: 12px;
  color: var(--dan);
  cursor: pointer;
  transition: all .15s;
}
.close-danger-btn:hover { background: rgba(194,92,92,.2); }

/* ── Setup Wizard ── */
.setup-card {
  background: var(--surf);
  border: 1px solid var(--bord);
  border-radius: var(--rxl);
  padding: 2.5rem 2.25rem;
  max-width: 560px;
  width: 100%;
  box-shadow: var(--shadow);
}
.wz-steps {
  display: flex;
  align-items: center;
  margin: 1.5rem 0 2rem;
}
.wz-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  flex-shrink: 0;
}
.wz-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  transition: all .2s;
}
.wz-step-pending .wz-dot  { background: var(--surf2); border: 1px solid var(--bord); color: var(--mut); }
.wz-step-active  .wz-dot  { background: var(--acc);   border: 1px solid var(--acc);  color: #fff; }
.wz-step-done    .wz-dot  { background: rgba(92,184,122,.15); border: 1px solid var(--suc); color: var(--suc); }
.wz-label {
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
}
.wz-step-pending .wz-label { color: var(--mut); }
.wz-step-active  .wz-label { color: var(--acc); }
.wz-step-done    .wz-label { color: var(--suc); }
.wz-connector {
  flex: 1;
  height: 1px;
  background: var(--bord);
  margin: 0 .5rem;
  margin-bottom: 1.3rem;
}
.wz-check-row {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .5rem .75rem;
  border-radius: var(--r);
  font-size: 14px;
  margin-bottom: .35rem;
  background: var(--surf2);
  border: 1px solid var(--bord);
}
.wz-check-row.ok   { border-color: rgba(92,184,122,.3);  background: rgba(92,184,122,.06); }
.wz-check-row.fail { border-color: rgba(194,92,92,.3);   background: rgba(194,92,92,.06);  }
.wz-check-row.warn { border-color: rgba(200,155,60,.3);  background: rgba(200,155,60,.06); }
.wz-check-icon { font-size: 16px; flex-shrink: 0; }
.wz-check-icon.ok   { color: var(--suc); }
.wz-check-icon.fail { color: var(--dan); }
.wz-check-icon.warn { color: var(--warn); }
.wz-check-icon.spin { color: var(--mut); animation: wz-spin .8s linear infinite; }
@keyframes wz-spin { to { transform: rotate(360deg); } }
.wz-result-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 13px;
  padding: .3rem 0;
  color: var(--mut);
}
.wz-result-row.created { color: var(--suc); }
.wz-result-row.error   { color: var(--dan); }
.wz-name-input {
  width: 100%;
  background: var(--surf2);
  border: 1px solid var(--bord);
  border-radius: var(--r);
  padding: .72rem 1rem;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color .15s;
  margin-bottom: 1.25rem;
}
.wz-name-input:focus { border-color: var(--acc); }

/* ── Blade (side panel overlay) ── */
.blade-backdrop {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(0,0,0,.35);
}
.blade {
  position: fixed; top: 0; right: 0;
  width: 440px; height: 100vh;
  background: var(--surf);
  border-left: 1px solid var(--bord);
  box-shadow: -8px 0 32px rgba(0,0,0,.55);
  z-index: 1000; overflow-y: auto; padding: 1.5rem;
  display: flex; flex-direction: column; gap: 0;
  animation: bladeIn .2s ease;
}
@keyframes bladeIn { from { transform: translateX(30px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.blade--action { width: 484px; }
.blade-header {
  display: flex; align-items: flex-start; gap: .75rem;
  margin-bottom: 1.2rem; padding-bottom: 1rem;
  border-bottom: 1px solid var(--bord);
}
.blade-avatar {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--surf2); border: 1px solid var(--bord);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; color: var(--acc); flex-shrink: 0;
  overflow: hidden;
}
.blade-avatar img { width: 100%; height: 100%; object-fit: cover; }
.blade-name { font-size: 16px; font-weight: 600; color: var(--text); }
.blade-meta { font-size: 13px; color: var(--mut); margin-top: .2rem; line-height: 1.5; }
.blade-section { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--bord); }
.blade-section:last-child { border-bottom: none; }
.blade-footer { margin-top: auto; padding-top: .85rem; }
.blade-close-btn {
  margin-left: auto; flex-shrink: 0;
  width: 28px; height: 28px; border-radius: var(--r);
  background: transparent; border: 1px solid var(--bord);
  color: var(--mut); cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.blade-close-btn:hover { border-color: var(--bord2); color: var(--text); }
.blade-score-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: .4rem 0; border-bottom: 1px solid var(--bord);
  font-size: 13px;
}
.blade-score-row:last-child { border-bottom: none; }
.history-month { font-size: 12px; font-weight: 600; color: var(--text2); margin: .75rem 0 .3rem; }

/* ── Chat button + orange dot indicator ── */
.rc-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--bord); background: var(--surf2);
  color: var(--mut); font-size: 15px; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.rc-btn:hover { border-color: var(--acc); color: var(--acc); }
.rc-btn--active { border-color: var(--warn); color: var(--warn); }
.rc-btn--active:hover { border-color: var(--warn); color: var(--warn); }
.rc-dot {
  position: absolute; top: -2px; right: -2px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--warn); border: 2px solid var(--surf);
}
.history-entry { font-size: 12px; color: var(--mut); padding: .25rem 0; border-bottom: 1px solid rgba(42,47,71,.5); }
.history-entry:last-child { border-bottom: none; }

/* ── Active Reviews ── */
.reviews-filters { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin-bottom: .75rem; }
.score-filter-btn {
  padding: .3rem .7rem; border-radius: var(--r);
  border: 1px solid var(--bord); background: var(--surf2);
  color: var(--mut); font-size: 12px; cursor: pointer;
}
.score-filter-btn.active { background: var(--acc); border-color: var(--acc); color: var(--bg); font-weight: 600; }
.emp-link { color: var(--acc); text-decoration: none; }
.emp-link:hover { text-decoration: underline; }

/* ── Clickable table row ── */
.data-table tbody tr.clickable { cursor: pointer; }
.data-table tbody tr.clickable:hover td { background: rgba(var(--brand-4a7fd4-rgb),.05); }

/* ─── API progress bar ─── */
#page-loading-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 9999;
  background: linear-gradient(90deg, transparent 0%, var(--acc) 30%, var(--acc) 70%, transparent 100%);
  background-size: 200% 100%;
  animation: pgbar 1.2s linear infinite;
  pointer-events: none;
}
@keyframes pgbar {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ─── Skeleton shimmer ─── */
.skel {
  display: inline-block;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--bord) 25%, var(--bord2) 50%, var(--bord) 75%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
}
@keyframes shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ─── Confirm dialog ─── */
.confirm-backdrop {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(0,0,0,.5);
  animation: fadeIn .15s ease;
}
.confirm-dialog {
  position: fixed; z-index: 1201;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--surf);
  border: 1px solid var(--bord);
  border-radius: calc(var(--r) * 2);
  box-shadow: 0 24px 64px rgba(0,0,0,.55);
  width: calc(100% - 3rem); max-width: 380px;
  padding: 1.75rem 1.5rem 1.25rem;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  animation: bladeIn .18s ease;
}
.confirm-dialog-icon {
  font-size: 2rem;
  color: var(--dan);
  margin-bottom: .75rem;
  line-height: 1;
}
.confirm-dialog-title {
  font-size: 15px; font-weight: 700;
  color: var(--text1); margin-bottom: .4rem;
}
.confirm-dialog-msg {
  font-size: 13px; color: var(--mut);
  line-height: 1.55; margin-bottom: 1.5rem;
}
.confirm-dialog-footer {
  display: flex; gap: .5rem; width: 100%; justify-content: flex-end;
}
.btn-confirm-ok {
  background: var(--dan);
  color: #fff;
  border: none;
  border-radius: var(--r);
  padding: .48rem 1.1rem;
  font-family: inherit;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
}
.btn-confirm-ok:hover  { opacity: .88; }
.btn-confirm-ok:active { transform: scale(.97); }
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Email preview modal ── */
.email-preview-modal {
  position: fixed; z-index: 1201;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--surf); border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,.45);
  width: min(720px, 92vw);
  max-height: 88vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: bladeIn .18s ease;
}
.email-preview-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--bord);
  background: var(--surf);
  flex-shrink: 0;
  gap: .75rem;
}
.email-preview-title {
  font-size: 1rem; font-weight: 600; color: var(--text1);
  display: flex; align-items: center; gap: .5rem;
}
.email-preview-header .blade-close-btn {
  flex-shrink: 0;
  background: var(--surf2);
  border: 1px solid var(--bord);
  color: var(--text1);
  border-radius: 6px;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 14px;
}
.email-preview-body {
  flex: 1; min-height: 0;
  overflow-y: auto;
  background: #f3f4f6;
}
.email-preview-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 1.25rem;
  border-top: 1px solid var(--bord);
  background: var(--surf);
  flex-shrink: 0;
  gap: .75rem;
}
.email-preview-footer .btn-secondary {
  color: var(--text2);
  border-color: var(--bord2);
}
.email-preview-footer .btn-secondary:hover {
  color: var(--acc);
  border-color: var(--acc);
}
.email-preview-recipient {
  font-size: 12px; color: var(--mut);
  display: flex; align-items: center; gap: .3rem;
}

/* ── AI Summary page ── */
.ai-summary-layout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.ai-summary-header-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.ai-summary-card {
  background: var(--surf);
  border: 1px solid var(--bord);
  border-radius: var(--rl);
  padding: 2.5rem 1.5rem;
}
.ai-summary-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.ai-chat-area {
  background: var(--surf);
  border: 1px solid var(--bord);
  border-radius: var(--rl);
  padding: 1.1rem 1.2rem;
  min-height: 160px;
  max-height: 520px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.ai-messages {
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.ai-msg { display: flex; }
.ai-msg--user      { justify-content: flex-end; }
.ai-msg--assistant { justify-content: flex-start; }
.ai-bubble {
  max-width: 85%;
  padding: .65rem .9rem;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text1);
}
.ai-bubble--assistant {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  background: var(--surf2);
  border: 1px solid var(--bord);
  border-bottom-left-radius: 3px;
}
.ai-bubble--user {
  background: rgba(var(--brand-4a7fd4-rgb),.13);
  border: 1px solid rgba(var(--brand-4a7fd4-rgb),.25);
  border-bottom-right-radius: 3px;
}
.ai-typing-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: .4rem .2rem;
}
.ai-typing-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--mut);
  animation: aiDotBounce 1.2s infinite ease-in-out;
}
.ai-typing-dot:nth-child(2) { animation-delay: .2s; }
.ai-typing-dot:nth-child(3) { animation-delay: .4s; }
@keyframes aiDotBounce {
  0%, 80%, 100% { transform: scale(0.7); opacity: 0.5; }
  40%           { transform: scale(1);   opacity: 1;   }
}
.ai-input-bar {
  display: flex;
  gap: .6rem;
  align-items: flex-end;
  background: var(--surf);
  border: 1px solid var(--bord);
  border-radius: var(--rl);
  padding: .65rem .75rem;
}
.ai-textarea {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text1);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: none;
  min-height: 24px;
  max-height: 120px;
  overflow-y: auto;
}
.ai-textarea::placeholder { color: var(--mut); }
.reviews-summarise-btn {
  flex-shrink: 0;
  margin-left: auto;
}

/* Markdown rendering inside assistant bubbles */
.ai-bubble--assistant h2 {
  font-size: .9rem; font-weight: 700; color: var(--text1);
  margin: .85rem 0 .3rem; padding-bottom: .25rem;
  border-bottom: 1px solid var(--bord);
}
.ai-bubble--assistant h3 {
  font-size: .85rem; font-weight: 600; color: var(--text1);
  margin: .7rem 0 .2rem;
}
.ai-bubble--assistant h2:first-child,
.ai-bubble--assistant h3:first-child { margin-top: 0; }
.ai-bubble--assistant p  { margin: 0 0 .3rem; }
.ai-bubble--assistant p:last-child { margin-bottom: 0; }
.ai-bubble--assistant ul,
.ai-bubble--assistant ol { margin: .2rem 0 .35rem 1.25rem; padding: 0; }
.ai-bubble--assistant li { margin-bottom: .2rem; line-height: 1.55; }
.ai-bubble--assistant hr {
  border: none; border-top: 1px solid var(--bord); margin: .6rem 0;
}
.ai-bubble--assistant .ai-spacer { height: .4rem; }
.ai-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px; margin: .4rem 0;
  overflow-x: auto; display: block;
}
.ai-table th, .ai-table td {
  padding: 6px 10px;
  border: 1px solid var(--bord);
  text-align: left; vertical-align: top;
  white-space: nowrap;
}
.ai-table th {
  background: var(--surf);
  font-weight: 600; color: var(--text1);
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
}
.ai-table tbody tr:hover td { background: rgba(var(--brand-4a7fd4-rgb),.06); }

/* ═════════════════════════════════════════════════════════════════════
   PayrollPrep — page-specific styles
   ═════════════════════════════════════════════════════════════════════ */
.card-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.card { background: var(--surf, #fff); border: 1px solid var(--border, #e3e6ef); border-radius: 8px; padding: 1.25rem; margin-bottom: 1rem; }
.card h3 { margin-top: 0; font-family: 'Manrope', sans-serif; font-size: 1rem; letter-spacing: .02em; }
.card.stat { display: flex; flex-direction: column; gap: .25rem; }
.stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text2, #666); }
.stat-value { font-family: 'Manrope', sans-serif; font-size: 1.6rem; font-weight: 600; color: var(--text, #111); }

.page-actions { display: flex; gap: .5rem; margin-bottom: 1rem; }

.topbar-ctl { display: inline-flex; align-items: center; gap: .4rem; margin-left: .75rem; font-size: 13px; }
.topbar-ctl span { color: var(--text2, #666); text-transform: uppercase; font-size: 11px; letter-spacing: .05em; }
.topbar-ctl select { padding: 4px 8px; border: 1px solid var(--border, #e3e6ef); border-radius: 4px; background: var(--surf, #fff); color: var(--text, #111); }

table.data {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surf, #fff);
  border: 1px solid var(--bord);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
table.data th,
table.data td {
  padding: .7rem .85rem;
  text-align: left;
  border-bottom: 1px solid var(--bord);
  font-size: 13px;
  vertical-align: middle;
}
table.data thead th {
  background: var(--surf2);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--mut);
}
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: rgba(var(--brand-4a7fd4-rgb),.055); }
table.data tbody tr.muted-row {
  background: rgba(104,116,139,.06);
  color: var(--text2);
}
table.data tbody tr.muted-row:hover {
  background: rgba(104,116,139,.1);
}
.employee-entry-link {
  appearance: none;
  border: none;
  background: transparent;
  padding: 0;
  color: var(--acc);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  text-align: left;
}
.employee-entry-link:hover { text-decoration: underline; }
.employee-entry-text { font-weight: 700; color: var(--text); }
.person-cell {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-width: 0;
  max-width: 100%;
  color: var(--text);
  text-align: left;
  vertical-align: middle;
}
.person-cell-button {
  appearance: none;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font: inherit;
}
.person-cell-button:hover .person-copy strong {
  color: var(--acc);
  text-decoration: underline;
}
.person-avatar {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  border-radius: 50%;
  border: 1px solid rgba(var(--brand-4a7fd4-rgb),.24);
  background: linear-gradient(135deg, rgba(var(--brand-2d5aaa-rgb),.95), rgba(142,204,187,.92));
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .03em;
}
.person-copy {
  min-width: 0;
  display: grid;
  gap: .08rem;
}
.person-copy strong,
.person-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.person-copy strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.2;
}
.person-copy small {
  color: var(--mut);
  font-size: 11px;
  line-height: 1.2;
}
.entry-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .4rem;
  min-width: 96px;
}
.btn-submit-row {
  padding: .28rem .65rem;
  font-size: 12px;
  border-color: rgba(var(--brand-4a7fd4-rgb),.28);
  color: var(--acc);
  background: rgba(var(--brand-4a7fd4-rgb),.08);
}
.btn-icon-square {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.btn-icon-square i { font-size: 15px; }

.chip { display: inline-block; padding: 2px 8px; font-size: 11px; border-radius: 999px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.chip-draft     { background: #fff3cd; color: #856404; }
.chip-submitted { background: #d4edda; color: #155724; }
.chip-approved  { background: #d8f3dc; color: #1b5e20; }
.chip-rejected  { background: #f8d7da; color: #842029; }
.chip-exported  { background: #d1ecf1; color: #0c5460; }
.chip-private   { background: #fde8e8; color: #9b1c1c; }

.btn-link { background: none; border: none; color: var(--brand-1f3f7c); cursor: pointer; padding: 2px 6px; font-size: 13px; }
.btn-link:hover { text-decoration: underline; }
.btn-link.danger { color: #9b1c1c; }

.editor form label { display: block; margin-bottom: .65rem; font-size: 13px; color: var(--text2, #555); }
.editor form label.inline { display: inline-flex; align-items: center; gap: .4rem; margin-right: 1rem; }
.editor form input[type=text], .editor form input[type=email], .editor form input[type=number],
.editor form input[type=date], .editor form select, .editor form textarea {
  display: block; width: 100%; padding: 6px 10px; margin-top: 2px;
  border: 1px solid var(--border, #e3e6ef); border-radius: 4px; background: var(--surf, #fff); color: var(--text, #111);
  font-family: inherit; font-size: 13px;
}
.editor form .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; }
.editor form fieldset { border: 1px solid var(--border, #e3e6ef); border-radius: 4px; padding: .5rem .75rem; margin-bottom: .75rem; }
.editor form .form-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1rem; }
.blade-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 25, .42);
  z-index: 80;
}
/* Centered modal dialog (shared by entry/period/category/employee/app-user editors) */
.entry-blade {
  position: fixed;
  inset: 0;
  margin: auto;
  z-index: 90;
  width: min(620px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  height: fit-content;
  max-height: min(90vh, 940px);
  background: var(--surf);
  border: 1px solid var(--bord);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0,0,0,.34);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: dialogIn .16s ease-out;
}
.payroll-entry-blade { width: min(660px, calc(100vw - 32px)); }
.category-blade      { width: min(940px, calc(100vw - 32px)); height: min(92vh, 980px); max-height: min(92vh, 980px); }
@keyframes dialogIn {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.blade-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--bord);
}
.blade-header h3 {
  margin: 0;
  font-family: 'Manrope', sans-serif;
  font-size: 1.05rem;
  color: var(--text);
}
.blade-subtitle {
  margin-top: .2rem;
  color: var(--mut);
  font-size: 12px;
  line-height: 1.35;
}
.blade-kicker {
  color: var(--mut);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .15rem;
}
.blade-close {
  width: 32px;
  height: 32px;
  border: 1px solid var(--bord);
  border-radius: var(--r);
  background: transparent;
  color: var(--mut);
  cursor: pointer;
}
.blade-close:hover { border-color: var(--acc); color: var(--acc); }
.blade-form {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.blade-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem 1.1rem;
}
.payroll-entry-blade .blade-body,
.employee-blade .blade-body,
.category-blade .blade-body,
.schedule-blade .blade-body,
.period-blade .blade-body,
.app-user-blade .blade-body {
  padding: 0;
  background:
    linear-gradient(180deg, rgba(var(--brand-2d5aaa-rgb),.04), transparent 150px),
    var(--surf);
}
.employee-form-section {
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--bord);
}
.employee-form-section--last {
  border-bottom: none;
}
.employee-section-title {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .8rem;
  color: var(--text2);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.employee-section-title i {
  color: var(--acc);
  font-size: 15px;
}
.employee-field {
  display: block;
  margin-bottom: .8rem;
  color: var(--text2);
}
.employee-field:last-child {
  margin-bottom: 0;
}
.employee-field > span {
  display: block;
  margin-bottom: .35rem;
  color: var(--text2);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.employee-field input,
.employee-field select,
.employee-field textarea {
  width: 100%;
  min-height: 42px;
  margin-top: 0 !important;
  padding: .62rem .75rem !important;
  border: 1px solid var(--bord) !important;
  border-radius: 8px !important;
  background: var(--surf2) !important;
  color: var(--text1) !important;
  font-family: inherit;
  font-size: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.employee-field textarea {
  resize: vertical;
  min-height: 88px;
  line-height: 1.4;
}
.employee-field input::placeholder {
  color: var(--mut);
  opacity: .72;
}
.employee-field input:focus,
.employee-field select:focus,
.employee-field textarea:focus {
  outline: none;
  border-color: var(--acc) !important;
  background: var(--surf) !important;
  box-shadow: 0 0 0 3px rgba(var(--brand-4a7fd4-rgb),.12);
}
.employee-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
.employee-field-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.audit-filter-actions {
  align-self: end;
  justify-content: flex-start;
  margin: 0;
}
.audit-detail-list {
  display: grid;
  gap: .65rem;
  margin: 0;
}
.audit-detail-list div {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: .75rem;
  align-items: start;
}
.audit-detail-list dt {
  color: var(--mut);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
.audit-detail-list dd {
  margin: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}
.audit-json {
  max-height: 420px;
  overflow: auto;
  margin: 0;
  padding: .85rem;
  border: 1px solid var(--bord);
  border-radius: 8px;
  background: var(--surf2);
  color: var(--text);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.category-market-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem;
}
.category-check {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 48px;
  padding: .55rem .7rem;
  border: 1px solid var(--bord);
  border-radius: 8px;
  background: var(--surf2);
  color: var(--text2);
  cursor: pointer;
  user-select: none;
  transition: border-color .15s, background .15s, color .15s, box-shadow .15s, transform .1s;
}
.category-check:hover {
  border-color: rgba(var(--brand-4a7fd4-rgb),.42);
  color: var(--text);
}
.category-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.category-check-code {
  width: 42px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--surf);
  border: 1px solid var(--bord);
  color: var(--mut);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  flex-shrink: 0;
}
.category-check-name {
  min-width: 0;
  color: var(--text2);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}
.category-check:has(input:checked) {
  border-color: rgba(var(--brand-4a7fd4-rgb),.42);
  background: rgba(var(--brand-4a7fd4-rgb),.1);
  color: var(--text1);
  box-shadow: inset 0 0 0 1px rgba(var(--brand-4a7fd4-rgb),.16);
}
.category-check:has(input:checked) .category-check-code {
  border-color: rgba(var(--brand-4a7fd4-rgb),.35);
  background: var(--acc);
  color: #fff;
}
.category-check:has(input:checked) .category-check-name {
  color: var(--text1);
}
.category-check:has(input:focus-visible) {
  outline: 2px solid rgba(142,204,187,.9);
  outline-offset: 2px;
}
.category-check:active {
  transform: translateY(1px);
}
.category-toggle-stack {
  display: grid;
  gap: .65rem;
}
.entry-blade .row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.blade-actions {
  margin-top: 0;
  padding: .85rem 1.1rem;
  border-top: 1px solid var(--bord);
  background: var(--surf);
}
.toggle-row {
  display: flex !important;
  align-items: center;
  gap: .55rem;
  cursor: pointer;
  color: var(--text2);
  position: relative;
}
.toggle-row input {
  /* Contained by the relatively-positioned .toggle-row so the hidden checkbox
     stays inside its own row. Without a positioned parent the box resolves
     against the fixed .entry-blade far down the form, and focusing it on click
     scroll-jumps the dialog (content shifts up, leaving a blank section). */
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.toggle-switch {
  width: 38px;
  height: 20px;
  border-radius: 999px;
  background: var(--surf3);
  border: 1px solid var(--bord2);
  position: relative;
  flex-shrink: 0;
  transition: all .15s;
}
.toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--mut);
  transition: all .15s;
}
.toggle-row input:checked + .toggle-switch {
  background: rgba(var(--brand-4a7fd4-rgb),.18);
  border-color: var(--acc);
}
.toggle-row input:checked + .toggle-switch::after {
  left: 20px;
  background: var(--acc);
}
.customer-charge {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(220px, 1.1fr);
  align-items: center;
  gap: .75rem;
  margin: .9rem 0 .2rem;
  padding: .8rem;
  border: 1px solid var(--bord);
  border-radius: var(--r);
  background: var(--surf2);
}
.editor form .customer-charge label {
  margin-bottom: 0;
}
.customer-toggle {
  min-width: 0;
}
.customer-toggle strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
}
.customer-toggle small {
  display: block;
  margin-top: .15rem;
  color: var(--mut);
  font-size: 11px;
  line-height: 1.35;
}
.customer-name-field {
  color: var(--text2);
}
.customer-name-field input {
  margin-top: .25rem;
}
.customer-name-field input:disabled {
  background: var(--surf);
}
.customer-charge:has(#entry-charged-toggle:checked) {
  border-color: rgba(var(--brand-4a7fd4-rgb),.38);
  background: rgba(var(--brand-4a7fd4-rgb),.06);
}
.blade-toggle {
  margin-top: 0;
  padding: .8rem;
  border: 1px solid var(--bord);
  border-radius: var(--r);
  background: var(--surf2);
}
.blade-toggle strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
}
.blade-toggle small {
  display: block;
  margin-top: .15rem;
  color: var(--mut);
  font-size: 11px;
  line-height: 1.35;
}
.editor form input:disabled {
  opacity: .55;
  cursor: not-allowed;
}

@media (max-width: 560px) {
  .customer-charge {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .employee-field-grid {
    grid-template-columns: 1fr;
  }
  .category-market-grid {
    grid-template-columns: 1fr;
  }
}

ul.bare { list-style: none; padding-left: 0; margin: 0; }
ul.bare li { padding: .25rem 0; border-bottom: 1px dashed var(--border, #e3e6ef); font-size: 13px; }
ul.bare li:last-child { border-bottom: none; }
.muted { color: var(--text2, #777); }
.error { color: #9b1c1c; }

/* PayrollPrep UX refresh */
body {
  background:
    linear-gradient(180deg, rgba(var(--brand-1f3f7c-rgb),.08), transparent 220px),
    var(--bg);
}
[data-theme="light"] body {
  background:
    linear-gradient(180deg, #eef5f7 0, #f5f7fb 260px),
    var(--bg);
}
.content {
  padding: 1.5rem;
}
.topbar {
  min-height: 64px;
  padding: .85rem 1.5rem;
  box-shadow: 0 1px 0 rgba(255,255,255,.04);
}
.topbar-title {
  font-size: 1.35rem;
  font-weight: 600;
}
.topbar-ctl {
  margin-left: 0;
  padding: .25rem .35rem .25rem .65rem;
  border: 1px solid var(--bord);
  border-radius: 8px;
  background: var(--surf2);
}
.topbar-ctl select {
  min-width: 116px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  outline: none;
}
.card {
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
[data-theme="light"] .card,
[data-theme="light"] table.data {
  border-color: #dbe2ef;
}
.dashboard-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid rgba(var(--brand-6da2ff-rgb),.28);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(var(--brand-1f3f7c-rgb),.97), rgba(var(--brand-122d5b-rgb),.97)),
    var(--acc);
  color: #fff;
  box-shadow: 0 10px 28px rgba(var(--brand-102b5f-rgb),.18);
  box-shadow: 0 12px 32px rgba(var(--brand-1f3f7c-rgb),.18);
}
.page-intro {
  display: flex;
  align-items: center;
  gap: .95rem;
  margin-bottom: 1rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--bord);
  border-radius: 8px;
  background: var(--surf);
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.page-intro-icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(var(--brand-2d5aaa-rgb),.1);
  border: 1px solid rgba(var(--brand-2d5aaa-rgb),.18);
  color: var(--acc);
  flex-shrink: 0;
}
.page-intro-icon i {
  font-size: 24px;
}
.page-intro h2 {
  margin: .05rem 0 .15rem;
  font-family: 'Manrope', sans-serif;
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--text1);
}
.page-intro p {
  margin: 0;
  color: var(--mut);
  font-size: 13px;
}
.mini-metric-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
  margin-bottom: 1rem;
}
.mini-metric {
  min-height: 78px;
  padding: .8rem .9rem;
  border: 1px solid var(--bord);
  border-radius: 8px;
  background: var(--surf);
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.mini-metric span {
  color: var(--mut);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mini-metric strong {
  margin-top: .2rem;
  color: var(--text1);
  font-family: 'Manrope', sans-serif;
  font-size: 1.35rem;
  line-height: 1.1;
}
.dashboard-hero h2 {
  margin: .1rem 0 .2rem;
  font-family: 'Manrope', sans-serif;
  font-size: 1.35rem;
  line-height: 1.2;
}
.dashboard-hero p {
  color: rgba(255,255,255,.72);
  font-size: 13px;
}
.hero-kicker {
  color: var(--brand-9dc0ff);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hero-progress {
  width: 104px;
  height: 104px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.22), rgba(255,255,255,.07));
  flex-shrink: 0;
}
.hero-progress strong {
  font-family: 'Manrope', sans-serif;
  font-size: 1.55rem;
  line-height: 1;
}
.hero-progress span {
  margin-top: .2rem;
  color: rgba(255,255,255,.68);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.metric-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.metric-card {
  min-height: 112px;
  flex-direction: row;
  align-items: center;
  gap: .85rem;
}
.metric-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--acc);
  background: rgba(var(--brand-2d5aaa-rgb),.1);
  border: 1px solid rgba(var(--brand-2d5aaa-rgb),.18);
  flex-shrink: 0;
}
.metric-icon i {
  font-size: 20px;
}
.metric-icon-good {
  color: var(--suc);
  background: rgba(59,180,74,.1);
  border-color: rgba(59,180,74,.2);
}
.metric-icon-warn {
  color: var(--warn);
  background: rgba(200,155,60,.12);
  border-color: rgba(200,155,60,.24);
}
.stat-label {
  color: var(--mut);
  font-weight: 800;
}
.stat-value {
  letter-spacing: 0;
}
.section-title-row,
.market-tile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.section-title-row {
  margin-bottom: .85rem;
}
.section-title-row h3,
.focus-card h3 {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
}
.section-title-row i,
.focus-card i {
  color: var(--acc);
}
.market-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
}
.market-tile {
  border: 1px solid var(--bord);
  border-radius: 8px;
  padding: .85rem;
  background: var(--surf2);
}
.export-ready-banner,
.export-warn {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
  padding: .85rem 1rem;
  border-radius: 8px;
  border: 1px solid rgba(59,180,74,.22);
  background: rgba(59,180,74,.08);
  color: var(--text);
}
.export-ready-banner i {
  color: var(--suc);
  font-size: 22px;
}
.export-ready-banner strong,
.export-ready-banner span {
  display: block;
}
.export-ready-banner span {
  color: var(--mut);
  font-size: 13px;
}
.export-message-grid {
  display: grid;
  gap: .75rem;
  margin-bottom: 1rem;
}
.export-message {
  margin-bottom: 0;
}
.export-message ul {
  margin: .45rem 0 0;
  padding-left: 1.15rem;
}
.export-warn {
  display: block;
  border-color: rgba(200,155,60,.24);
  background: rgba(200,155,60,.1);
}
.export-summary-card {
  padding: 1rem;
  margin-bottom: 1rem;
}
.export-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}
.export-status-tile {
  margin-bottom: 0;
  min-height: 68px;
}
.export-preview-table th,
.export-preview-table td {
  white-space: nowrap;
}
.market-tile-head strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.market-tile-head .person-cell {
  min-width: 0;
  max-width: calc(100% - 42px);
  flex: 1 1 auto;
}
.market-tile-head .person-avatar {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  font-family: inherit;
  font-size: 10px;
}
.market-tile-head .person-copy {
  min-width: 0;
  max-width: 100%;
}
.market-tile-head .person-copy strong {
  min-width: 0;
  max-width: 100%;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}
.market-tile-head .person-copy small {
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  color: var(--mut);
}
.market-tile-count {
  flex: 0 0 auto;
  font-family: 'Manrope', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text1);
}
.market-tile-sub {
  margin-top: .35rem;
  overflow: hidden;
  color: var(--mut);
  font-size: 12px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.market-bar {
  height: 7px;
  margin-top: .75rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(122,129,153,.18);
}
.market-bar span {
  display: block;
  height: 100%;
  min-width: 7px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-1f3f7c), var(--brand-3b6fd4) 60%, var(--brand-6da2ff));
}
.page-actions {
  align-items: center;
  flex-wrap: wrap;
}
.btn-primary,
.btn-secondary,
.btn-icon,
.logout-btn,
.theme-toggle {
  min-height: 34px;
}
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-icon:focus-visible,
.nav-item:focus-visible,
.theme-toggle:focus-visible,
.logout-btn:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgba(142,204,187,.9);
  outline-offset: 2px;
}
.table-shell {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--bord);
  border-radius: 8px;
  background: var(--surf);
  box-shadow: var(--shadow-sm);
}
.table-shell table.data,
table.data {
  box-shadow: none;
}
.table-shell table.data {
  border: 0;
  border-radius: 0;
}
table.data th,
table.data td {
  padding: .78rem .9rem;
}
table.data thead th {
  background: linear-gradient(180deg, var(--surf2), var(--surf));
  position: sticky;
  top: 0;
  z-index: 1;
}
table.data tbody tr:hover td {
  background: rgba(var(--brand-2d5aaa-rgb),.06);
}
.chip {
  border: 1px solid transparent;
}
.chip-draft {
  background: rgba(200,155,60,.14);
  color: var(--warn);
  border-color: rgba(200,155,60,.28);
}
.chip-submitted {
  background: rgba(59,180,74,.13);
  color: var(--suc);
  border-color: rgba(59,180,74,.24);
}
.chip-approved {
  background: rgba(38,166,91,.16);
  color: var(--suc);
  border-color: rgba(38,166,91,.28);
}
.chip-rejected {
  background: rgba(194,92,92,.14);
  color: var(--danger);
  border-color: rgba(194,92,92,.28);
}
.chip-exported {
  background: rgba(var(--brand-2d70b0-rgb),.13);
  color: var(--inf);
  border-color: rgba(var(--brand-2d70b0-rgb),.24);
}
.chip-active,
.chip-open,
.chip-ready {
  background: rgba(59,180,74,.13);
  color: var(--suc);
  border-color: rgba(59,180,74,.24);
}
.chip-inactive,
.chip-closed {
  background: rgba(122,129,153,.12);
  color: var(--mut);
  border-color: rgba(122,129,153,.22);
}
.chip-shared,
.chip-manager {
  background: rgba(var(--brand-2d70b0-rgb),.12);
  color: var(--inf);
  border-color: rgba(var(--brand-2d70b0-rgb),.24);
}
.chip-hr,
.chip-admin,
.chip-hr-only,
.chip-private {
  background: rgba(194,92,92,.1);
  color: var(--dan);
  border-color: rgba(194,92,92,.22);
}
.chip-needs-attention {
  background: rgba(200,155,60,.13);
  color: var(--warn);
  border-color: rgba(200,155,60,.28);
}
.entry-row-actions {
  justify-content: flex-end;
}
.editor-panel {
  margin-top: 1rem;
  border-color: rgba(var(--brand-2d5aaa-rgb),.22);
  box-shadow: 0 12px 30px rgba(var(--brand-1f3f7c-rgb),.08);
}
.editor-panel h3 {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .9rem;
  padding-bottom: .65rem;
  border-bottom: 1px solid var(--bord);
}
.editor-panel h3::before {
  content: '';
  width: 8px;
  height: 24px;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--brand-3b6fd4), var(--brand-1f3f7c));
}
.editor-panel .row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.editor-panel fieldset {
  background: var(--surf2);
}
.setup-card .bare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem;
  margin-bottom: 1rem;
}
.setup-card .bare li {
  border: 1px solid var(--bord);
  border-radius: 8px;
  padding: .7rem .8rem;
  background: var(--surf2);
}
.setup-actions {
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.setup-actions .btn-link.danger {
  margin-left: auto;
}
.empty-state {
  min-height: 260px;
  border: 1px dashed var(--bord2);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  color: var(--mut);
  background: rgba(255,255,255,.34);
}
[data-theme="dark"] .empty-state {
  background: rgba(255,255,255,.02);
}
.empty-state i {
  font-size: 2.4rem;
  color: var(--acc);
}
.empty-state strong {
  color: var(--text);
  font-size: 1rem;
}
.empty-state.compact {
  min-height: 150px;
  padding: 1rem;
}
.manager-entry-empty {
  gap: .75rem;
}
.manager-entry-empty .person-list {
  width: min(520px, 100%);
  margin: .35rem auto 0;
  text-align: left;
}
.manager-entry-empty .btn-primary {
  margin-top: .35rem;
}
.entry-rule-summary {
  border: 1px solid var(--bord);
  border-radius: 8px;
  background: var(--surf2);
  color: var(--mut);
  font-size: .88rem;
  line-height: 1.35;
  padding: .7rem .8rem;
  margin-bottom: .8rem;
}
.entry-line-list {
  display: grid;
  gap: .65rem;
  margin-bottom: .8rem;
}
.entry-line-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  gap: .55rem;
  align-items: stretch;
  border: 1px solid var(--bord);
  border-radius: 8px;
  background: var(--surf2);
  padding: .55rem;
}
.entry-line-card-main {
  min-width: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  display: grid;
  grid-template-columns: 112px minmax(90px, .6fr) minmax(0, 1.4fr);
  gap: .7rem;
  align-items: center;
  padding: .3rem .4rem;
  text-align: left;
}
.entry-line-card-main:hover,
.entry-line-card-main:focus-visible {
  outline: none;
  background: rgba(var(--brand-4a7fd4-rgb),.08);
}
.entry-line-card-main strong {
  color: var(--text);
  font-size: .94rem;
}
.entry-line-card-main small {
  color: var(--mut);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.entry-line-context-group {
  border-top: 1px solid var(--bord);
  margin-top: 1rem;
  padding-top: 1rem;
}
.entry-line-date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border: 1px solid var(--bord);
  border-radius: 6px;
  background: var(--surf);
  color: var(--text2);
  font-size: .82rem;
  font-weight: 800;
}
.entry-lines-empty {
  border: 1px dashed var(--bord2);
  border-radius: 8px;
  color: var(--mut);
  background: rgba(255,255,255,.24);
  display: grid;
  gap: .2rem;
  justify-items: center;
  padding: 1rem;
  text-align: center;
}
.entry-lines-empty i {
  color: var(--acc);
  font-size: 1.4rem;
}
.entry-lines-empty strong {
  color: var(--text);
}
/* Inline 'add/edit line' editor rendered within the entry dialog (not a slide-in). */
.entry-line-inline {
  margin-top: .6rem;
}
.entry-line-inline-form {
  border: 1px solid var(--acc, var(--bord));
  border-radius: 12px;
  background: var(--surf);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  overflow: hidden;
  animation: dialogIn .14s ease-out;
}
.entry-line-inline-form .blade-header {
  padding: .65rem .9rem;
}
.entry-line-inline-form .blade-body {
  padding: 0;
  overflow: visible;
}
.entry-line-inline-form .blade-actions {
  padding: .7rem .9rem;
}
.btn-compact {
  min-height: 36px;
  padding: .45rem .7rem;
}
.is-muted {
  opacity: .72;
}
.is-muted .category-check {
  cursor: default;
}
.category-check:has(input:disabled) {
  opacity: .68;
}
.toast-error,
.toast.err {
  background: linear-gradient(135deg, #3d1e1e 0%, #331616 100%);
  border-color: rgba(194,92,92,.5);
  color: #f08080;
}
.toast-success {
  background: linear-gradient(135deg, #1e3d2a 0%, #163322 100%);
  border-color: rgba(92,184,122,.5);
  color: #6ee89a;
}

@media (max-width: 1100px) {
  .metric-row,
  .market-grid,
  .mini-metric-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .app {
    flex-direction: column;
    overflow: auto;
  }
  .sidebar {
    width: 100%;
    max-height: none;
    overflow: visible;
  }
  .brand {
    padding: 1rem;
  }
  .nav-section {
    padding-left: 1rem;
  }
  .sidebar-footer {
    margin-top: 0;
  }
  .main {
    overflow: visible;
  }
  .topbar {
    align-items: stretch;
    flex-direction: column;
  }
  .topbar-right,
  .topbar-ctl {
    width: 100%;
  }
  .topbar-ctl select {
    flex: 1;
    min-width: 0;
  }
  .content {
    overflow: visible;
    padding: 1rem;
  }
  .dashboard-hero {
    align-items: flex-start;
  }
  .page-intro {
    align-items: flex-start;
  }
}

@media (max-width: 620px) {
  .entry-blade {
    width: calc(100vw - 16px);
    max-height: 94vh;
    border-radius: 14px;
  }
  .dashboard-hero {
    flex-direction: column;
  }
  .hero-progress {
    width: 88px;
    height: 88px;
  }
  .metric-row,
  .market-grid,
  .card-row,
  .mini-metric-row,
  .setup-card .bare,
  .editor-panel .row,
  .entry-line-card-main {
    grid-template-columns: 1fr;
  }
  .page-intro {
    flex-direction: column;
  }
  .metric-card {
    min-height: 96px;
  }
  .page-actions .btn-primary,
  .page-actions .btn-secondary {
    width: 100%;
    justify-content: center;
  }
}

/* Premium enterprise UI refresh */
:root {
  --app-bg: #f4f7fb;
  --app-bg-2: #eef3f8;
  --panel: #ffffff;
  --panel-soft: #f7f9fc;
  --line-soft: #e3e9f2;
  --navy: var(--brand-102b5f);
  --navy-2: var(--brand-0b214b);
  --lime: var(--brand-6da2ff);
  --mint: #42b883;
  --amber: #d7a232;
  --blue-soft: #eaf1fb;
  --mint-soft: #eaf8ef;
  --amber-soft: #fff6df;
  --radius-card: 14px;
  --radius-control: 9px;
  --shadow-card: 0 14px 34px rgba(var(--brand-132b54-rgb), .09);
  --shadow-soft: 0 4px 16px rgba(var(--brand-132b54-rgb), .07);
}

[data-theme="light"] {
  --bg: var(--app-bg);
  --surf: var(--panel);
  --surf2: var(--panel-soft);
  --surf3: #edf2f7;
  --bord: var(--line-soft);
  --bord2: #ced8e6;
  --acc: var(--navy);
  --acc2: var(--brand-214b93);
  --acc3: var(--navy-2);
  --text: #10203d;
  --text1: #081832;
  --text2: #596680;
  --mut: #73819a;
  --suc: #29965e;
  --warn: #a56e00;
  --inf: #2368a5;
  --shadow: var(--shadow-card);
  --shadow-sm: var(--shadow-soft);
  --r: var(--radius-control);
  --rl: var(--radius-card);
}

body,
[data-theme="light"] body {
  background:
    radial-gradient(circle at 75% 0%, rgba(var(--brand-102b5f-rgb),.08), transparent 28rem),
    linear-gradient(180deg, var(--app-bg-2), var(--app-bg) 18rem);
  letter-spacing: 0;
}

.sidebar {
  width: 296px;
  border-right: 0;
}

[data-theme="light"] .sidebar {
  background:
    radial-gradient(circle at 20% 0%, rgba(199,220,61,.16), transparent 13rem),
    linear-gradient(180deg, var(--brand-0f316d) 0%, var(--brand-08214e) 100%);
  border-right: 0;
  box-shadow: 10px 0 28px rgba(var(--brand-0a1f48-rgb), .12);
}

.brand {
  padding: 1.65rem 1.45rem 1.15rem;
  border-bottom-color: rgba(255,255,255,.11);
}

[data-theme="light"] .brand-eye {
  color: #fff;
  font-family: 'Manrope', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.02em;
  text-transform: lowercase;
}

[data-theme="light"] .brand-eye::after {
  content: '';
}

[data-theme="light"] .brand-name {
  margin-top: .8rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
}

.nav-section {
  padding: 1.05rem 1.4rem .45rem;
  font-size: 10px;
  letter-spacing: .08em;
}

.nav-item {
  position: relative;
  min-height: 48px;
  margin: .12rem .85rem;
  padding: .72rem 1rem;
  border: 0;
  border-radius: 10px;
  font-weight: 700;
}

[data-theme="light"] .nav-item {
  color: rgba(255,255,255,.78);
}

[data-theme="light"] .nav-item:hover {
  background: rgba(255,255,255,.09);
}

[data-theme="light"] .nav-item.active {
  background: rgba(255,255,255,.12);
  color: #fff;
  border-color: transparent;
  font-weight: 600;
}
[data-theme="light"] .nav-item.active .nav-icon { color: var(--brand-9dc0ff); }

.nav-item.active { position: relative; }
.nav-item.active::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 999px;
  background: var(--brand-6da2ff);
}

.nav-item .nav-icon {
  width: 22px;
  font-size: 20px;
}

.sidebar-footer {
  padding: 1rem 1.15rem 1.25rem;
  border-top-color: rgba(255,255,255,.11);
}

.user-chip {
  padding: .55rem .1rem;
  border: 0;
  background: transparent;
}

.user-avatar {
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, var(--brand-2c67bd), var(--brand-1b4389));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}

.logout-btn,
.theme-toggle {
  min-height: 46px;
  justify-content: center;
  border-radius: 10px;
}

.topbar {
  min-height: 92px;
  padding: 1.5rem 2rem 1rem;
  border-bottom: 0;
  background: transparent;
  box-shadow: none;
}

[data-theme="light"] .topbar {
  background: transparent;
  border-bottom: 0;
}

[data-theme="light"] .topbar::after {
  display: none;
}

.topbar-title {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--text1);
}

.topbar-right {
  gap: .85rem;
}

.topbar-ctl {
  min-height: 52px;
  min-width: 245px;
  gap: .55rem;
  padding: .45rem .7rem .45rem .95rem;
  border-color: #dbe4ef;
  border-radius: 10px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 4px 16px rgba(var(--brand-0f2346-rgb), .05);
}

.topbar-ctl i {
  color: var(--navy);
  font-size: 17px;
}

.topbar-ctl span {
  color: #63708b;
  font-size: 13px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}

.topbar-ctl select {
  min-width: 118px;
  font-weight: 800;
  color: var(--text1);
}

.topbar-action {
  min-height: 52px;
  padding-inline: 1.15rem;
  box-shadow: 0 10px 22px rgba(var(--brand-102b5f-rgb), .2);
}

.content {
  padding: 0 2rem 2rem;
}

.card,
.page-intro,
.mini-metric,
.table-shell {
  border: 0;
  border-radius: var(--radius-card);
  background: rgba(255,255,255,.94);
  box-shadow: var(--shadow-card);
}

.page-intro {
  padding: 1.15rem 1.25rem;
}

.page-intro-icon,
.metric-icon,
.mini-metric-icon {
  border: 0;
  border-radius: 10px;
  background: var(--blue-soft);
  color: var(--navy);
}

.mini-metric-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.35rem;
}

.mini-metric {
  min-height: 140px;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: 1.35rem;
}

.mini-metric-icon {
  width: 62px;
  height: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.mini-metric-icon-warn {
  background: var(--amber-soft);
  color: var(--amber);
}

.mini-metric-icon-good {
  background: var(--mint-soft);
  color: var(--mint);
}

.mini-metric-icon-info {
  background: #e8f4ff;
  color: var(--inf);
}

.mini-metric span {
  color: #687590;
  font-size: 12px;
  letter-spacing: .08em;
}

.mini-metric strong {
  margin-top: .25rem;
  display: block;
  font-size: 1.85rem;
  font-weight: 800;
}

.mini-metric small {
  display: block;
  margin-top: .18rem;
  color: var(--text2);
  font-size: 13px;
}

.dashboard-hero-premium {
  min-height: 220px;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 172px;
  align-items: center;
  gap: 2rem;
  margin-bottom: 1.75rem;
  padding: 2rem;
  border: 0;
  border-radius: 12px;
  background:
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.12), transparent 18rem),
    linear-gradient(135deg, var(--brand-102f68) 0%, var(--brand-0b2554) 100%);
  box-shadow: 0 22px 45px rgba(var(--brand-102b5f-rgb), .2);
}

.hero-icon {
  width: 92px;
  height: 92px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(255,255,255,.13);
  color: var(--lime);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

.hero-icon i {
  font-size: 44px;
}

.dashboard-hero-premium h2 {
  font-size: 1.85rem;
  font-weight: 800;
}

.dashboard-hero-premium p {
  margin-bottom: .95rem;
  color: rgba(255,255,255,.84);
  font-size: 1rem;
}

.hero-kicker {
  color: var(--brand-9dc0ff);
}

.hero-status-pill {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .9rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: var(--lime);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.hero-status-pill:hover {
  background: rgba(255,255,255,.12);
}

.hero-progress {
  width: 142px;
  height: 142px;
  border: 10px solid rgba(255,255,255,.2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}

.hero-progress strong {
  font-size: 2rem;
}

.hero-progress span {
  color: #fff;
  font-size: .92rem;
  text-transform: none;
  letter-spacing: 0;
}

.hero-progress small {
  max-width: 98px;
  margin-top: .25rem;
  color: rgba(255,255,255,.68);
  font-size: 10px;
  line-height: 1.15;
  text-align: center;
}

.dashboard-lower-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1.05fr) minmax(320px, 1.08fr) minmax(280px, 1fr);
  gap: 1.35rem;
  align-items: stretch;
}

.dashboard-panel {
  min-height: 360px;
  padding: 1.35rem;
}

.section-title-row {
  margin-bottom: 1.35rem;
}

.section-title-row h3 {
  color: var(--text1);
  font-size: 1.05rem;
  font-weight: 800;
}

.section-title-row i {
  color: var(--navy);
  font-size: 21px;
}

.market-bar-list {
  display: grid;
  gap: 1.25rem;
}

.market-bar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .48rem;
  color: var(--text1);
}

.market-bar-head strong {
  font-size: .92rem;
}

.market-bar-head span {
  font-size: 1.35rem;
  font-weight: 800;
}

.market-bar {
  height: 10px;
  margin-top: 0;
  background: #e9edf3;
}

.market-bar span {
  min-width: 0;
  background: linear-gradient(90deg, var(--brand-1f3f7c) 0%, var(--brand-3b6fd4) 60%, var(--brand-6da2ff) 100%);
}

.market-bar-empty span {
  display: none;
}

.manager-list {
  display: grid;
  gap: .7rem;
}

.manager-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: .7rem;
  width: 100%;
  min-height: 88px;
  padding: .85rem .9rem;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}

.manager-row:hover {
  border-color: rgba(var(--brand-102b5f-rgb),.22);
  box-shadow: var(--shadow-soft);
  transform: translateY(-1px);
}

.manager-row > strong {
  font-size: 1.45rem;
  color: var(--text1);
}

.manager-row .market-bar {
  grid-column: 1 / -1;
}

.manager-row-main {
  min-width: 0;
}

.attention-panel {
  padding-bottom: 0;
  overflow: hidden;
}

.attention-list {
  display: grid;
  gap: 1rem;
}

.attention-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 20px;
  align-items: center;
  gap: .9rem;
  width: 100%;
  min-height: 84px;
  padding: .85rem;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.attention-row-warn {
  background: #fffbf1;
  border-color: #f3dfaa;
}

.attention-row-good {
  background: #f2fbf5;
  border-color: #ccebd7;
}

.attention-icon {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--amber-soft);
  color: var(--amber);
  font-size: 27px;
}

.attention-row-good .attention-icon {
  background: var(--mint-soft);
  color: var(--mint);
}

.attention-row strong,
.attention-row small {
  display: block;
  min-width: 0;
}

.attention-row strong {
  color: var(--text1);
}

.attention-row small {
  margin-top: .16rem;
  color: var(--text2);
  font-size: 13px;
  line-height: 1.3;
}

.attention-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  width: calc(100% + 2.7rem);
  min-height: 64px;
  margin: 1rem -1.35rem 0;
  padding: 0 1.35rem;
  border: 0;
  border-top: 1px solid var(--line-soft);
  background: #f8fafc;
  color: var(--navy);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.btn-primary {
  border: 0;
  border-radius: 9px;
  background: linear-gradient(180deg, var(--brand-143771), var(--brand-0d2a5c));
  box-shadow: 0 8px 18px rgba(var(--brand-102b5f-rgb),.18);
  font-weight: 800;
}

.btn-primary:hover {
  background: linear-gradient(180deg, var(--brand-1b4588), var(--brand-12346f));
}

.btn-secondary,
.btn-icon,
.blade-close {
  border-color: var(--line-soft);
  border-radius: 9px;
  background: #fff;
}

.page-actions {
  justify-content: flex-end;
  gap: .75rem;
}

.table-shell {
  overflow: hidden;
}

table.data {
  border: 0;
}

table.data th,
table.data td {
  border-bottom-color: var(--line-soft);
  padding: .92rem 1rem;
}

table.data thead th {
  background: #f6f8fb;
  color: #66728a;
}

table.data tbody tr:hover td {
  background: #f8fbff;
}

.chip {
  padding: 4px 9px;
  font-size: 10px;
}

.empty-state {
  border: 0;
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.entry-blade {
  box-shadow: 0 24px 64px rgba(8, 24, 50, .34);
}

.blade-header,
.blade-actions {
  border-color: var(--line-soft);
}

.employee-form-section {
  border-bottom-color: var(--line-soft);
}

.employee-field input,
.employee-field select,
.employee-field textarea,
.editor form input[type=text],
.editor form input[type=email],
.editor form input[type=number],
.editor form input[type=date],
.editor form select,
.editor form textarea {
  border-color: #dbe4ef !important;
  border-radius: 9px !important;
  background: #fff !important;
}

@media (max-width: 1280px) {
  .dashboard-lower-grid {
    grid-template-columns: 1fr 1fr;
  }
  .attention-panel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1100px) {
  .topbar {
    align-items: stretch;
    flex-direction: column;
  }
  .topbar-right {
    width: 100%;
  }
  .topbar-ctl,
  .topbar-action {
    flex: 1 1 220px;
  }
  .dashboard-hero-premium {
    grid-template-columns: 76px minmax(0, 1fr);
  }
  .hero-progress {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

@media (max-width: 820px) {
  .content {
    padding: 1rem;
  }
  .topbar {
    padding: 1rem;
  }
  .dashboard-lower-grid,
  .mini-metric-row {
    grid-template-columns: 1fr;
  }
  .dashboard-hero-premium {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .hero-icon {
    width: 72px;
    height: 72px;
  }
}

/* Categories page and edit drawer refinement */
.category-page-heading {
  margin: .1rem 0 1.55rem;
}

.category-page-heading h1 {
  margin: 0;
  color: var(--text1);
  font-family: 'Manrope', sans-serif;
  font-size: 2.15rem;
  line-height: 1.05;
  font-weight: 800;
}

.category-page-heading p {
  margin-top: .55rem;
  color: var(--text2);
  font-size: .98rem;
}

.category-taxonomy-hero {
  min-height: 126px;
  margin-bottom: 1.15rem;
  box-shadow: 0 14px 34px rgba(var(--brand-132b54-rgb), .08);
}

.category-taxonomy-hero .page-intro-icon {
  width: 52px;
  height: 52px;
  font-size: 24px;
}

.category-table-card {
  margin-top: .7rem;
  padding: 1.35rem;
  overflow: hidden;
}

.category-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.15rem;
}

.category-table-header h3 {
  margin: 0;
  color: var(--text1);
  font-size: 1.18rem;
  font-weight: 800;
}

.category-table-tools {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.category-search {
  min-width: min(260px, 45vw);
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: 0 .85rem;
  border: 1px solid #dbe4ef;
  border-radius: 9px;
  background: #fff;
  color: var(--mut);
}

.category-search:focus-within {
  border-color: rgba(var(--brand-102b5f-rgb),.42);
  box-shadow: 0 0 0 3px rgba(var(--brand-102b5f-rgb),.1);
}

.category-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text1);
  font: inherit;
}

.category-data tbody tr {
  cursor: pointer;
}

.category-data tbody tr:hover td {
  background: #f7fbff;
}

.category-table-card .table-shell {
  border-radius: 0;
  box-shadow: none;
}

.category-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem .15rem 0;
  color: var(--text2);
  font-size: .9rem;
}

.page-size-select select {
  min-height: 40px;
  padding: 0 2.35rem 0 .85rem;
  border: 1px solid #dbe4ef;
  border-radius: 9px;
  background: #fff;
  color: var(--text1);
  font: inherit;
  font-weight: 700;
}

.category-blade-premium {
  width: min(940px, calc(100vw - 32px));
  height: min(92vh, 980px);
  max-height: min(92vh, 980px);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(8, 24, 50, .3);
}

.category-blade-backdrop {
  background: rgba(8, 24, 50, .22);
  backdrop-filter: blur(1px);
}

.category-blade-header {
  padding: 1.75rem 1.75rem 1.45rem;
  border-bottom: 1px solid var(--line-soft);
}

.category-blade-header .blade-kicker {
  color: var(--brand-0056c7);
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .07em;
}

.category-blade-header h3 {
  margin-top: .4rem;
  color: var(--text1);
  font-size: 1.48rem;
  font-weight: 800;
}

.category-blade-header .blade-subtitle {
  margin-top: .45rem;
  color: var(--text2);
  font-size: .9rem;
}

.category-blade-header .blade-close {
  width: 40px;
  height: 40px;
  color: var(--navy);
}

.category-blade-body {
  background: #fff !important;
}

.cat-editor-body {
  display: flex;
  align-items: stretch;
  padding: 0 !important;
  overflow: hidden;
}

.cat-step-rail {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  flex: 0 0 168px;
  width: 168px;
  padding: 1rem .65rem;
  border-right: 1px solid var(--bord);
  background: #f5f8fc;
}

.cat-step-btn {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .7rem .7rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text2);
  font-size: .86rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}

.cat-step-btn:hover { background: rgba(var(--brand-6fa5ff-rgb),.14); color: var(--text1); }

.cat-step-btn.active {
  background: #fff;
  border-color: var(--brand-6fa5ff);
  color: var(--navy);
  box-shadow: 0 6px 14px rgba(18,38,63,.08);
}

.cat-step-btn i { font-size: 1.05rem; }

.cat-step-panels {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
}

.cat-step-panel[hidden] { display: none; }

.category-form-section {
  padding: 1.45rem 1.75rem;
}

.category-form-section .employee-section-title {
  margin-bottom: 1rem;
  color: var(--brand-0056c7);
}

.required-field > span::after {
  content: ' *';
  color: #d72727;
}

.category-blade-premium .employee-field > span {
  color: #4f5e78;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.category-blade-premium .employee-field input,
.category-blade-premium .employee-field select {
  min-height: 48px;
  padding: .75rem .9rem !important;
  border-color: #d7e0eb !important;
  border-radius: 9px !important;
  font-size: .95rem !important;
}

.category-blade-premium .employee-field input:focus,
.category-blade-premium .employee-field select:focus {
  border-color: var(--brand-2f72dc) !important;
  box-shadow: 0 0 0 3px rgba(var(--brand-2f72dc-rgb),.14);
}

.premium-market-grid {
  gap: .85rem;
}

.premium-market-check {
  min-height: 60px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 24px;
  gap: .75rem;
  padding: .75rem .8rem;
  border-color: #d7e0eb;
  border-radius: 9px;
  background: #fff;
}

.premium-market-check .category-check-code {
  width: 42px;
  height: 34px;
  border: 0;
  border-radius: 7px;
  background: var(--navy);
  color: #fff;
}

.premium-market-check .category-check-name {
  color: var(--text1);
  font-size: .92rem;
}

.category-check-mark {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  border-radius: 5px;
  background: transparent;
  color: transparent;
}

.premium-market-check:has(input:checked) {
  border-color: var(--brand-6fa5ff);
  background: #f4f8ff;
  box-shadow: inset 0 0 0 1px rgba(var(--brand-2f72dc-rgb),.16);
}

.premium-market-check:has(input:checked) .category-check-mark {
  background: var(--brand-236bd2);
  color: #fff;
}

.category-helper {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-top: .9rem;
  color: var(--text2);
  font-size: .82rem;
}

.category-helper i {
  color: var(--navy);
}

.category-rules-grid {
  display: grid;
  gap: 1rem;
}

.category-rule-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .85rem;
}

.category-rule-title-row .employee-section-title {
  margin: 0;
}

.category-rule-title-help {
  color: var(--text2);
  font-size: .8rem;
  font-weight: 700;
}

.category-rule-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem;
  margin-bottom: .85rem;
  padding: .35rem;
  border: 1px solid #d7e0eb;
  border-radius: 8px;
  background: #f5f8fc;
}

.category-rule-tab {
  min-width: 0;
  min-height: 48px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .45rem;
  padding: .55rem .65rem;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  text-align: left;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}

.category-rule-tab:hover {
  background: #fff;
  color: var(--text1);
}

.category-rule-tab.active {
  border-color: var(--brand-6fa5ff);
  background: #fff;
  color: var(--text1);
  box-shadow: 0 8px 18px rgba(18, 38, 63, .08);
}

.category-rule-tab:focus-visible {
  outline: 2px solid rgba(var(--brand-2f72dc-rgb),.45);
  outline-offset: 2px;
}

.category-rule-tab-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 28px;
  border-radius: 6px;
  background: #e8eef7;
  color: var(--navy);
  font-size: .76rem;
  font-weight: 800;
}

.category-rule-tab.active .category-rule-tab-code {
  background: var(--navy);
  color: #fff;
}

.category-rule-tab-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .84rem;
  font-weight: 700;
}

.category-rule-tab i {
  color: #9aa8ba;
  font-size: 1rem;
}

.category-rule-tab i.ti-circle-check-filled {
  color: var(--brand-2f72dc);
}

.category-rules-tab-panels {
  min-height: 0;
}

.category-rule-card {
  display: grid;
  gap: .95rem;
  padding: 1rem;
  border: 1px solid #d7e0eb;
  border-radius: 9px;
  background: #fff;
}

.category-rule-card[hidden] {
  display: none;
}

.category-rule-subhead {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid #e5ebf3;
}

.category-rule-subhead i {
  margin-top: .1rem;
  color: var(--navy);
  font-size: 1.05rem;
}

.category-rule-subhead strong {
  display: block;
  color: var(--text1);
  font-size: .92rem;
}

.category-rule-subhead small {
  display: block;
  margin-top: .2rem;
  color: var(--text2);
  font-size: .8rem;
  line-height: 1.3;
}

.category-rule-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.category-rule-enabled {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: .75rem;
  align-items: center;
  width: 100%;
  color: var(--text1);
  cursor: pointer;
}

.category-rule-enabled input,
.category-rule-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.category-rule-enabled strong,
.category-rule-check strong {
  display: block;
  color: var(--text1);
  font-size: .92rem;
  line-height: 1.2;
}

.category-rule-enabled small,
.category-rule-check small {
  display: block;
  margin-top: .15rem;
  color: var(--text2);
  font-size: .78rem;
  line-height: 1.25;
}

.category-rule-enabled:has(input:not(:checked)) {
  opacity: .6;
}

.category-rule-enabled:has(input:focus-visible),
.category-rule-check:has(input:focus-visible) {
  outline: 2px solid rgba(var(--brand-2f72dc-rgb),.45);
  outline-offset: 3px;
}

.category-rule-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: .55rem;
}

.category-rule-field-mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .85rem;
}

.category-rule-field-mode small {
  margin-top: .3rem;
  color: var(--text2);
  font-size: .78rem;
}

.category-rule-check {
  min-height: 50px;
  display: flex;
  align-items: center;
  padding: .65rem .75rem;
  border: 1px solid #d7e0eb;
  border-radius: 8px;
  background: #f8fbff;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}

.category-rule-check:has(input:checked) {
  border-color: var(--brand-6fa5ff);
  background: #eef5ff;
  box-shadow: inset 3px 0 0 var(--brand-236bd2);
}

.premium-toggle-stack {
  gap: 1rem;
}

.premium-toggle-card {
  min-height: 66px;
  margin: 0;
  padding: .85rem 1rem;
  border-color: #d7e0eb;
  background: #fff;
}

.premium-toggle-card strong {
  color: var(--text1);
  font-size: .95rem;
}

.premium-toggle-card small {
  color: var(--text2);
  font-size: .82rem;
}

.category-blade-premium .toggle-switch {
  width: 42px;
  height: 22px;
  background: #d6dee9;
}

.category-blade-premium .toggle-switch::after {
  width: 16px;
  height: 16px;
  background: #8795aa;
}

.category-blade-premium .toggle-row input:checked + .toggle-switch {
  background: rgba(92, 200, 68, .22);
  border-color: #61bd3b;
}

.category-blade-premium .toggle-row input:checked + .toggle-switch::after {
  left: 21px;
  background: #5fc43d;
}

.category-blade-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  min-height: 78px;
  align-items: center;
  justify-content: space-between !important;
  padding: 1rem 1.75rem;
  border-top: 1px solid var(--line-soft);
  background: #fff;
}

.category-action-buttons {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.category-delete-link {
  color: #e11d1d;
  font-weight: 700;
}

.category-blade-actions .btn-secondary,
.category-blade-actions .btn-primary {
  min-height: 42px;
  padding-inline: 1.1rem;
}

@media (max-width: 720px) {
  .category-rule-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .category-table-header,
  .category-table-tools,
  .category-table-footer {
    align-items: stretch;
    flex-direction: column;
  }
  .category-search {
    width: 100%;
    min-width: 0;
  }
  .category-blade-premium {
    width: calc(100vw - 16px);
  }
  .premium-market-grid {
    grid-template-columns: 1fr;
  }
  .category-rule-check-grid,
  .category-blade-premium .employee-field-grid {
    grid-template-columns: 1fr;
  }
  .category-blade-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .category-action-buttons {
    justify-content: flex-end;
  }
  .cat-editor-body {
    flex-direction: column;
  }
  .cat-step-rail {
    flex-direction: row;
    width: auto;
    flex: 0 0 auto;
    border-right: none;
    border-bottom: 1px solid var(--bord);
    overflow-x: auto;
  }
}

/* Phase 1: readiness checks, entry help, period banner */
.readiness-list { display: flex; flex-direction: column; gap: .5rem; margin: .75rem 0; }
.readiness-check { display: flex; gap: .6rem; align-items: flex-start; padding: .5rem .7rem; border-radius: .5rem; border: 1px solid var(--border, rgba(127,127,127,.25)); }
.readiness-check i { font-size: 1.15rem; margin-top: .1rem; }
.readiness-check span { display: flex; flex-direction: column; }
.readiness-check small { color: var(--muted, #888); }
.readiness-check.ok i { color: #2e7d32; }
.readiness-check.bad i { color: #c62828; }
.readiness-check.bad { border-color: rgba(198,40,40,.4); }
.entry-rule-help { display: flex; gap: .4rem; align-items: center; font-size: .85rem; color: var(--muted, #888); margin-bottom: .4rem; }
.entry-rule-help.ok { color: var(--success, #2e7d32); }

/* BR-23 validation panel on the accountant pack */
.validation-panel { border: 1px solid var(--border, #e2e2e2); border-radius: 8px; padding: .75rem 1rem; margin-bottom: 1rem; }
.validation-list { list-style: none; padding: 0; margin: .5rem 0 0; display: flex; flex-direction: column; gap: .5rem; }
.validation-list li { padding: .5rem .75rem; border-radius: 6px; font-size: .88rem; border-left: 3px solid transparent; }
.validation-list.errors li { background: var(--danger-bg, #fdecea); border-left-color: var(--danger, #c62828); }
.validation-list.warnings li { background: var(--warning-bg, #fff8e1); border-left-color: var(--warning, #f9a825); }
.validation-panel details { margin-top: .5rem; }
.validation-panel summary { cursor: pointer; }
.delta-flagged td { background: var(--warning-bg, #fff8e1); }

/* ============================================================================
   Modern design-system refresh (2026-09) — appended last so it is authoritative.
   Reuses existing tokens, Inter/Manrope, and Tabler icons. Light theme is the
   primary product surface; structural rules apply to both themes.
   ========================================================================== */

/* Softer, cooler neutral palette + layered shadow tokens */
[data-theme="light"] {
  --bg:        #f2f5fb;
  --surf:      #ffffff;
  --surf2:     #f6f8fc;
  --surf3:     #eef2f9;
  --bord:      #e4e9f3;
  --bord2:     #ccd5e6;
  --text:      #18213a;
  --text2:     #45507a;
  --mut:       #737f9c;
  --shadow:    0 1px 2px rgba(var(--brand-102a5f-rgb),.05), 0 10px 30px rgba(var(--brand-102a5f-rgb),.06);
  --shadow-sm: 0 1px 2px rgba(var(--brand-102a5f-rgb),.05), 0 4px 14px rgba(var(--brand-102a5f-rgb),.05);
  --ring:      0 0 0 3px rgba(var(--brand-3b6fd4-rgb),.28);
}

/* Content rhythm — a touch more air, capped width on very wide screens */
.content { padding: 1.75rem 2rem 3rem; }
.content > * { max-width: 1640px; }

/* Topbar — slimmer, crisper title */
.topbar { padding: .95rem 2rem; }
.topbar-title {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.topbar-sub { font-size: 13px; }

/* Cards — consistent radius, hairline border, soft layered depth */
[data-theme="light"] .card {
  border-radius: 14px;
  border: 1px solid var(--bord);
  box-shadow: var(--shadow);
  padding: 1.25rem 1.4rem;
}

/* Metric tiles — tighter, crisper, less bulky */
.mini-metric-row { gap: 1rem; margin-bottom: 1.35rem; }
[data-theme="light"] .mini-metric {
  min-height: 0;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: .95rem;
  padding: 1.15rem 1.25rem;
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .18s ease, transform .18s ease;
}
[data-theme="light"] .mini-metric:hover {
  box-shadow: 0 2px 4px rgba(var(--brand-102a5f-rgb),.06), 0 14px 34px rgba(var(--brand-102a5f-rgb),.09);
  transform: translateY(-1px);
}
[data-theme="light"] .mini-metric-icon { width: 46px; height: 46px; font-size: 22px; border-radius: 12px; }
.mini-metric span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--mut);
}
.mini-metric strong {
  font-family: 'Manrope', sans-serif;
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text);
}
.mini-metric small { color: var(--mut); }

/* Section headings inside cards */
.card > .section-title-row h3,
.category-table-header h3,
.export-summary-card h3 {
  font-family: 'Manrope', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

/* Tables — scannable micro-headers, comfortable rows, quiet zebra + hover */
[data-theme="light"] table.data thead th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mut);
  background: var(--surf2);
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--bord);
}
[data-theme="light"] table.data td { padding: .82rem 1rem; border-bottom: 1px solid var(--bord); }
[data-theme="light"] table.data tbody tr:last-child td { border-bottom: 0; }
[data-theme="light"] table.data tbody tr { transition: background .12s ease; }
[data-theme="light"] table.data tbody tr:hover td { background: rgba(var(--brand-3b6fd4-rgb),.05); }
[data-theme="light"] .employee-entry-link,
[data-theme="light"] table.data td .btn-link { font-weight: 600; color: var(--acc); }

/* Buttons — solid brand primary with hover lift, ghost secondary, clear focus */
[data-theme="light"] .btn-primary {
  background: var(--brand-1f3f7c);
  border: 1px solid var(--brand-1f3f7c);
  border-radius: 9px;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(var(--brand-102a5f-rgb),.12);
  transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
}
[data-theme="light"] .btn-primary:hover {
  background: var(--brand-2d5aaa);
  border-color: var(--brand-2d5aaa);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(var(--brand-1f3f7c-rgb),.28);
}
[data-theme="light"] .btn-primary:active { transform: translateY(0); }
[data-theme="light"] .btn-secondary {
  background: #fff;
  border: 1px solid var(--bord2);
  border-radius: 9px;
  font-weight: 600;
  color: var(--text2);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
[data-theme="light"] .btn-secondary:hover {
  border-color: var(--acc);
  color: var(--acc);
  background: rgba(var(--brand-3b6fd4-rgb),.06);
}

/* Inputs / selects — refined focus */
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea,
[data-theme="light"] .category-search,
[data-theme="light"] .month-select {
  border-radius: 9px;
}
[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] .category-search:focus-within {
  border-color: var(--acc);
  box-shadow: var(--ring);
  outline: none;
}

/* Status chips — softer, consistent, subtle border */
.chip {
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 10.5px;
  padding: 3px 9px;
}
.chip-active, .chip-open, .chip-ready, .chip-approved, .chip-submitted {
  background: #e7f6ed; color: #1b7a3d; border-color: #bfe6cd;
}
.chip-draft { background: #fff4d6; color: #8a6100; border-color: #f0dca0; }
.chip-rejected, .chip-closed, .chip-inactive { background: #fdeaea; color: #a52a2a; border-color: #f2cccc; }
.chip-exported { background: #e4f0fb; color: #1b5a99; border-color: #c4ddf3; }
.chip-hr, .chip-admin, .chip-hr-only, .chip-private { background: #eee9fb; color: #5b3fb0; border-color: #d9cff2; }

/* Accessibility — visible focus for keyboard users everywhere */
a:focus-visible,
button:focus-visible,
[role="tab"]:focus-visible,
.nav-item:focus-visible {
  outline: 2px solid var(--brand-6da2ff);
  outline-offset: 2px;
  border-radius: 8px;
}
.nav-item { transition: background .15s ease, color .15s ease, box-shadow .15s ease; }

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

/* Responsive: collapse the sidebar to an icon rail on narrow widths so the
   desktop-first portal stays usable in split-screen / tablet. Labels are bare
   text nodes, so font-size:0 hides them while the icon span restores its size. */
@media (max-width: 1024px) {
  .sidebar { width: 76px; }
  .sidebar .brand-name,
  .sidebar .brand-ver,
  .sidebar .nav-section,
  .sidebar .user-chip > div,
  .sidebar .theme-toggle span,
  .sidebar .logout-btn { display: none; }
  .sidebar .brand { padding: 1rem .5rem; text-align: center; }
  .sidebar .brand-eye { font-size: 13px; letter-spacing: .05em; }
  .nav-item {
    font-size: 0;
    justify-content: center;
    margin: .18rem .4rem;
    padding: .65rem 0;
  }
  .nav-item .nav-icon { font-size: 20px; width: auto; }
  .nav-item.active::before { left: -4px; }
  .sidebar-footer { padding: .6rem .4rem; }
  .user-chip { justify-content: center; padding: .4rem; }
  .theme-toggle { justify-content: center; }
  .content { padding: 1.1rem 1rem 2rem; }
  .topbar { padding: .8rem 1rem; }
  .mini-metric-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .mini-metric-row { grid-template-columns: 1fr; }
  .topbar { flex-wrap: wrap; }
  .topbar-right { width: 100%; }
}

/* Enterprise workspace — calm density, clear hierarchy, keyboard first. */
:root {
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Manrope', 'Inter', 'Segoe UI', sans-serif;
  --ease-enterprise: cubic-bezier(.22, 1, .36, 1);
}

body { font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, .topbar-title, .brand-eye, .mini-metric strong { font-family: var(--font-display); }

.skip-link {
  position: fixed; z-index: 10000; top: .75rem; left: .75rem;
  padding: .65rem 1rem; border-radius: 8px; background: #fff; color: var(--brand-102b5f);
  font-weight: 700; box-shadow: 0 8px 30px rgba(0,0,0,.2); transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

[data-theme="light"] body {
  background:
    radial-gradient(circle at 58% -10%, rgba(var(--brand-3f75ce-rgb),.10), transparent 34rem),
    linear-gradient(180deg, #f7f9fc 0, #f1f4f9 24rem, #eef2f7 100%);
}
.brand-lockup { display: flex; align-items: center; gap: .7rem; }
.brand-mark {
  width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 9px;
  color: var(--brand-08214e); background: linear-gradient(145deg, var(--brand-b9d2ff), var(--brand-75a7ff));
  box-shadow: 0 8px 22px rgba(var(--brand-518beb-rgb),.28), inset 0 1px rgba(255,255,255,.7);
}
.brand-mark i { font-size: 21px; }
[data-theme="light"] .brand-eye { font-size: 1.12rem; letter-spacing: -.03em; }
.brand-name { margin-left: 2.65rem; margin-top: .35rem !important; color: rgba(255,255,255,.68) !important; font-size: .82rem !important; font-weight: 500 !important; }
.brand-ver { margin-left: 2.65rem; }

.sidebar { width: 264px; }
[data-theme="light"] .sidebar {
  background:
    radial-gradient(circle at 10% 0, rgba(var(--brand-689fff-rgb),.17), transparent 18rem),
    linear-gradient(180deg, var(--brand-0d2b60) 0%, var(--brand-081d42) 100%);
  box-shadow: 12px 0 40px rgba(var(--brand-081d42-rgb),.11);
}
.nav-item { min-height: 42px; margin-block: .05rem; padding-block: .58rem; font-size: 13.5px; font-weight: 600; }
.nav-item .nav-icon { font-size: 18px; }
.nav-section { padding-top: .85rem; }
[data-theme="light"] .nav-item.active { background: linear-gradient(90deg, rgba(var(--brand-679dfa-rgb),.20), rgba(255,255,255,.08)); }
.nav-item.active::before { left: -8px; top: 7px; bottom: 7px; width: 3px; box-shadow: 0 0 12px var(--brand-75a7ff); }

.topbar { min-height: 82px; padding: 1.15rem 2rem .9rem; }
.topbar-title { font-size: clamp(1.55rem, 2vw, 1.9rem); letter-spacing: -.045em; }
.topbar-sub { max-width: 66ch; }
.topbar-ctl { min-width: 218px; min-height: 48px; border-radius: 12px; }
.topbar-action { min-height: 48px; }
.content { padding: .4rem 2rem 2.5rem; }
.content > * { max-width: none; margin-inline: 0; }

.dashboard-hero-premium {
  position: relative; isolation: isolate; min-height: 142px;
  grid-template-columns: 52px minmax(0,1fr) 108px; gap: 1.25rem; padding: 1.25rem 1.5rem;
  border-radius: 14px; overflow: hidden;
  background:
    radial-gradient(circle at 88% 15%, rgba(var(--brand-80aef7-rgb),.13), transparent 16rem),
    linear-gradient(120deg, var(--brand-173d73) 0%, var(--brand-17467f) 58%, var(--brand-143765) 100%);
  box-shadow: 0 12px 28px rgba(var(--brand-0d2b60-rgb),.12);
}
.dashboard-hero-premium::before {
  content: ''; position: absolute; z-index: -1; inset: 0; opacity: .12;
  background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 40px 40px; mask-image: linear-gradient(90deg, transparent 45%, #000);
}
.dashboard-hero-premium::after {
  display: none;
}
.hero-icon { width: 52px; height: 52px; border-radius: 13px; color: #c8dbfb; background: rgba(255,255,255,.09); backdrop-filter: blur(8px); }
.hero-icon i { font-size: 25px; }
.dashboard-hero-premium h2 { font-size: clamp(1.3rem, 1.8vw, 1.65rem); letter-spacing: -.035em; }
.dashboard-hero-premium p { margin: .25rem 0 .65rem; font-size: .9rem; color: rgba(255,255,255,.72); }
.hero-kicker { font-size: 9px; letter-spacing: .14em; color: rgba(218,232,255,.72); }
.hero-status-pill { min-height: 30px; padding: .25rem .7rem; color: #d9e7ff; font-size: 11.5px; font-weight: 700; transition: background .18s, transform .18s; }
.hero-status-pill:hover { transform: translateY(-1px); }
.hero-progress {
  width: 92px; height: 92px; border: 0; position: relative;
  background: conic-gradient(var(--brand-9dbff5) var(--progress), rgba(255,255,255,.12) 0);
  box-shadow: none;
}
.hero-progress::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--brand-174174); box-shadow: inset 0 0 16px rgba(0,0,0,.09); }
.hero-progress > * { position: relative; z-index: 1; }
.hero-progress strong { font-size: 1.45rem; }
.hero-progress span { font-size: .72rem; }
.hero-progress small { margin-top: .1rem; font-size: 8.5px; }

/* Compact operational header replaces the marketing-style dashboard hero. */
.period-status-bar {
  display: grid;
  grid-template-columns: minmax(290px, 1.3fr) minmax(360px, 1fr) auto;
  align-items: center;
  gap: 1.4rem;
  min-height: 112px;
  margin-bottom: 1.25rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid rgba(207,217,232,.9);
  border-radius: 14px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 1px 2px rgba(var(--brand-0f2346-rgb),.04), 0 8px 24px rgba(var(--brand-0f2346-rgb),.055);
}
.period-status-context {
  min-width: 0;
  display: grid;
  grid-template-columns: 44px minmax(0,1fr);
  align-items: center;
  gap: .9rem;
}
.period-status-icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: #eaf1fb;
  color: var(--brand-173d73);
  font-size: 21px;
}
.period-status-kicker {
  margin-bottom: .1rem;
  color: var(--mut);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.period-status-context h2 {
  color: var(--text1);
  font-size: 1.15rem;
  line-height: 1.2;
  letter-spacing: -.025em;
}
.period-status-context small {
  display: block;
  margin-top: .3rem;
  color: var(--mut);
  font-size: 10.5px;
}
.period-progress-track {
  height: 5px;
  margin-top: .45rem;
  overflow: hidden;
  border-radius: 99px;
  background: #e8edf5;
}
.period-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-24579f), var(--brand-70a5f5));
}
.period-status-counts {
  display: flex;
  align-items: stretch;
  justify-content: center;
  margin: 0;
}
.period-status-counts > div {
  min-width: 72px;
  padding: .2rem .85rem;
  border-left: 1px solid var(--bord);
}
.period-status-counts dt {
  color: var(--mut);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.period-status-counts dd {
  margin: .1rem 0 0;
  color: var(--text1);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1;
}
.status-count-draft dd { color: #9a6900; }
.status-count-approved dd { color: #238354; }
.status-count-rejected dd { color: #b13b3b; }
.period-status-action {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding-inline: 1rem;
  white-space: nowrap;
}

.mini-metric-row { grid-template-columns: repeat(6, minmax(0,1fr)); gap: .85rem; }
[data-theme="light"] .mini-metric {
  min-height: 116px; grid-template-columns: 42px minmax(0,1fr); gap: .8rem;
  padding: 1rem; border: 1px solid rgba(214,222,235,.8); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(var(--brand-0f2346-rgb),.04), 0 7px 20px rgba(var(--brand-0f2346-rgb),.045);
}
[data-theme="light"] .mini-metric-icon { width: 42px; height: 42px; font-size: 20px; }
.mini-metric span { font-size: 9.5px; letter-spacing: .075em; }
.mini-metric strong { font-size: 1.45rem; line-height: 1.1; }
.mini-metric small { font-size: 11.5px; }
.dashboard-lower-grid { grid-template-columns: 1fr 1.12fr 1.05fr; gap: 1rem; }
.dashboard-panel { min-height: 330px; padding: 1.2rem; }
.manager-row { min-height: 74px; }
.attention-row { min-height: 72px; }
.attention-icon { width: 44px; height: 44px; font-size: 22px; }

.card, .mini-metric, .table-shell { transition: box-shadow .22s var(--ease-enterprise), transform .22s var(--ease-enterprise); }
[data-theme="light"] .card { border: 1px solid rgba(214,222,235,.82); box-shadow: 0 1px 2px rgba(var(--brand-0f2346-rgb),.04), 0 9px 28px rgba(var(--brand-0f2346-rgb),.055); }
button, select, input, textarea { font-family: inherit; }
button { touch-action: manipulation; }
button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, [role="button"]:focus-visible { outline: 3px solid rgba(var(--brand-69a2ff-rgb),.48); outline-offset: 2px; }

@media (max-width: 1380px) {
  .mini-metric-row { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 1180px) {
  .sidebar { width: 228px; }
  .dashboard-lower-grid { grid-template-columns: 1fr 1fr; }
  .attention-panel { grid-column: 1 / -1; }
  .period-status-bar { grid-template-columns: minmax(260px,1fr) auto; }
  .period-status-counts { grid-row: 2; grid-column: 1 / -1; justify-content: flex-start; }
  .period-status-counts > div:first-child { border-left: 0; padding-left: 0; }
}
@media (max-width: 1024px) {
  .sidebar { width: 76px; }
  .brand-lockup { justify-content: center; }
  .brand-mark { width: 38px; height: 38px; }
  .sidebar .brand-eye, .sidebar .brand-name, .sidebar .brand-ver { display: none; }
}
@media (max-width: 760px) {
  .dashboard-hero-premium { grid-template-columns: 1fr; padding: 1.4rem; }
  .hero-icon { display: none; }
  .hero-progress { grid-column: auto; }
  .mini-metric-row, .dashboard-lower-grid { grid-template-columns: 1fr; }
  .attention-panel { grid-column: auto; }
  .content { padding-inline: .85rem; }
  .period-status-bar { grid-template-columns: 1fr; gap: 1rem; }
  .period-status-counts { grid-row: auto; grid-column: auto; justify-content: space-between; overflow-x: auto; }
  .period-status-counts > div { min-width: 62px; padding-inline: .6rem; }
  .period-status-counts > div:first-child { border-left: 0; padding-left: 0; }
  .period-status-action { width: 100%; }
}

/* Dark theme parity for the enterprise dashboard and shared workspace shell. */
[data-theme="dark"] body {
  background:
    radial-gradient(circle at 60% -10%, rgba(var(--brand-3769bc-rgb),.14), transparent 34rem),
    linear-gradient(180deg, #0c1018 0, #101620 26rem, #0d121b 100%);
}
[data-theme="dark"] .sidebar {
  background:
    radial-gradient(circle at 10% 0, rgba(var(--brand-4a7fd4-rgb),.13), transparent 18rem),
    linear-gradient(180deg, #111827 0%, #0b111d 100%);
  border-right: 1px solid #252c39;
  box-shadow: 10px 0 32px rgba(0,0,0,.22);
}
[data-theme="dark"] .brand-mark {
  color: #dce9ff;
  background: linear-gradient(145deg, var(--brand-315b9f), var(--brand-234477));
  box-shadow: 0 8px 22px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.12);
}
[data-theme="dark"] .topbar-ctl {
  border-color: #303846;
  background: rgba(27,32,43,.92);
  box-shadow: 0 4px 16px rgba(0,0,0,.14);
}
[data-theme="dark"] .topbar-ctl i { color: var(--brand-8eb8ff); }
[data-theme="dark"] .topbar-ctl span { color: #a9b1c0; }
[data-theme="dark"] .topbar-ctl select,
[data-theme="dark"] .month-select {
  background: #1b202b;
  color: #f2f5fa;
  border-color: #303846;
}
[data-theme="dark"] .card,
[data-theme="dark"] .page-intro,
[data-theme="dark"] .mini-metric,
[data-theme="dark"] .table-shell,
[data-theme="dark"] .dashboard-panel,
[data-theme="dark"] .period-status-bar {
  border-color: #2b3341;
  background: rgba(25,30,40,.96);
  box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 12px 30px rgba(0,0,0,.16);
}
[data-theme="dark"] .period-status-icon {
  background: #202c40;
  color: var(--brand-8eb8ff);
}
[data-theme="dark"] .period-status-context h2,
[data-theme="dark"] .period-status-counts dd,
[data-theme="dark"] .section-title-row h3,
[data-theme="dark"] .market-bar-head,
[data-theme="dark"] .market-bar-head strong,
[data-theme="dark"] .manager-row > strong,
[data-theme="dark"] .attention-row strong {
  color: #f1f4f9;
}
[data-theme="dark"] .period-status-kicker,
[data-theme="dark"] .period-status-context small,
[data-theme="dark"] .period-status-counts dt,
[data-theme="dark"] .attention-row small {
  color: #98a4b8;
}
[data-theme="dark"] .period-progress-track,
[data-theme="dark"] .market-bar {
  background: #2a3240;
}
[data-theme="dark"] .period-status-counts > div { border-color: #303846; }
[data-theme="dark"] .manager-row {
  border-color: #303846;
  background: #1d232e;
  color: #dfe5ee;
}
[data-theme="dark"] .manager-row:hover {
  border-color: var(--brand-49658f);
  background: #222a37;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
[data-theme="dark"] .attention-row {
  border-color: #343b48;
  background: #1d232e;
  color: #dfe5ee;
}
[data-theme="dark"] .attention-row-warn {
  border-color: #5a4a28;
  background: #29251c;
}
[data-theme="dark"] .attention-row-good {
  border-color: #285340;
  background: #192a24;
}
[data-theme="dark"] .attention-icon { background: #3a311c; color: #e1ae46; }
[data-theme="dark"] .attention-row-good .attention-icon { background: #1d3a2e; color: #62c993; }
[data-theme="dark"] .attention-footer {
  border-color: #303846;
  background: #171c26;
  color: var(--brand-9dc0ff);
}
[data-theme="dark"] .attention-footer:hover { background: #202734; }
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-icon,
[data-theme="dark"] .blade-close {
  border-color: #343d4b;
  background: #202631;
  color: #dfe5ee;
}
[data-theme="dark"] table.data thead th { background: #1a202b; color: #a3adbd; }
[data-theme="dark"] table.data tbody tr:hover td { background: #202733; }

/* ============================================================================
   Top-bar navigation PROTOTYPE — inert unless data-layout="topnav".
   Toggle via the sidebar footer / top-bar button (persists in localStorage).
   ========================================================================== */
.topnav { display: none; }

[data-layout="topnav"] .sidebar { display: none; }
[data-layout="topnav"] .topnav {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .5rem 1.25rem;
  background: var(--surf);
  border-bottom: 1px solid var(--bord);
  box-shadow: 0 1px 2px rgba(var(--brand-102a5f-rgb),.05);
}
[data-theme="light"] [data-layout="topnav"] .topnav { position: relative; }
[data-theme="light"] [data-layout="topnav"] .topnav::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(to right, var(--brand-1f3f7c), var(--brand-3b6fd4) 60%, var(--brand-6da2ff));
}

.topnav-brand { display: flex; align-items: center; gap: .55rem; padding-right: .5rem; flex-shrink: 0; }
.topnav-brand .brand-mark {
  width: 30px; height: 30px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand-1f3f7c), var(--brand-3b6fd4)); color: #fff; font-size: 17px;
}
.topnav-brand-name { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 1rem; color: var(--text); letter-spacing: -.01em; }

.topnav-links { display: flex; align-items: center; gap: .15rem; flex: 1; min-width: 0; flex-wrap: wrap; }

/* Reset the vertical sidebar nav-item into a horizontal top-bar pill */
.topnav .nav-item {
  margin: 0; padding: .5rem .8rem; border-radius: 8px; font-size: 14px; font-weight: 500;
  white-space: nowrap; border: 0; gap: .45rem;
}
.topnav .nav-item .nav-icon { font-size: 16px; width: auto; }
.topnav .nav-item.active::before { display: none; }

[data-theme="light"] .topnav .nav-item { color: var(--text2); }
[data-theme="light"] .topnav .nav-item:hover { background: var(--surf3); color: var(--text); }
[data-theme="light"] .topnav .nav-item.active {
  background: rgba(var(--brand-3b6fd4-rgb),.1); color: var(--acc); font-weight: 600; box-shadow: none;
}
[data-theme="light"] .topnav .nav-item.active .nav-icon { color: var(--acc); }

/* Configuration dropdown */
.topnav-dropdown { position: relative; }
.topnav-dd-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .8rem; border: 0; border-radius: 8px; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 500; color: var(--text2);
  background: transparent;
}
.topnav-dd-btn:hover { background: var(--surf3); color: var(--text); }
.topnav-dd-caret { font-size: 14px; transition: transform .15s ease; }
.topnav-dropdown.open .topnav-dd-caret { transform: rotate(180deg); }
.topnav-dropdown.open .topnav-dd-btn { background: var(--surf3); color: var(--text); }
.topnav-dd-menu {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
  min-width: 210px; padding: .35rem; border-radius: 12px;
  background: var(--surf); border: 1px solid var(--bord);
  box-shadow: 0 10px 30px rgba(var(--brand-102a5f-rgb),.16);
}
.topnav-dropdown.open .topnav-dd-menu { display: block; }
.topnav-dd-menu .nav-item { width: 100%; font-weight: 500; }

/* Right-side cluster */
.topnav-right { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.topnav-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--bord); background: var(--surf); color: var(--text2); font-size: 17px;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.topnav-icon-btn:hover { border-color: var(--acc); color: var(--acc); }
.topnav-user { display: flex; flex-direction: column; line-height: 1.15; padding: 0 .35rem; }
.topnav-user-name { font-size: 13px; font-weight: 600; color: var(--text); }
.topnav-user-role { font-size: 11px; color: var(--mut); }

@media (max-width: 720px) {
  .topnav-brand-name, .topnav-user { display: none; }
}
.topnav-dd-menu { z-index: 60; }

/* Placeholder / hint text — theme-aware and legible in dark mode (was the
   browser default #757575, invisible on dark inputs). */
input::placeholder,
textarea::placeholder {
  color: var(--mut);
  opacity: .9;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #8b95ad;
  opacity: 1;
}

/* ── Dark-mode fix for editor dialogs (blades) — missed by the initial dark
   pass, so the modal stayed white with light (invisible) text. Matches the
   dark card/input palette used elsewhere. ────────────────────────────────── */
[data-theme="dark"] .entry-blade {
  background: #171c26;
  border-color: #2b3341;
}
[data-theme="dark"] .blade-body,
[data-theme="dark"] .payroll-entry-blade .blade-body,
[data-theme="dark"] .employee-blade .blade-body,
[data-theme="dark"] .category-blade .blade-body,
[data-theme="dark"] .schedule-blade .blade-body,
[data-theme="dark"] .period-blade .blade-body,
[data-theme="dark"] .app-user-blade .blade-body {
  background: transparent;
}
[data-theme="dark"] .blade-header,
[data-theme="dark"] .blade-actions,
[data-theme="dark"] .employee-form-section {
  border-color: #2b3341;
}
[data-theme="dark"] .blade-actions { background: #131822; }
[data-theme="dark"] .blade-header p,
[data-theme="dark"] .blade-sub,
[data-theme="dark"] .employee-field label,
[data-theme="dark"] .category-rule-title-help,
[data-theme="dark"] .field-hint { color: #98a4b8; }
[data-theme="dark"] .employee-section-title { color: var(--brand-8eb8ff); }

/* Inputs inside dialogs — beat the hardcoded `background:#fff !important` */
[data-theme="dark"] .employee-field input,
[data-theme="dark"] .employee-field select,
[data-theme="dark"] .employee-field textarea,
[data-theme="dark"] .editor form input[type=text],
[data-theme="dark"] .editor form input[type=email],
[data-theme="dark"] .editor form input[type=number],
[data-theme="dark"] .editor form input[type=date],
[data-theme="dark"] .editor form select,
[data-theme="dark"] .editor form textarea {
  background: #1b202b !important;
  color: #f2f5fa !important;
  border-color: #303846 !important;
}
[data-theme="dark"] .editor-panel fieldset,
[data-theme="dark"] .employee-form-section fieldset,
[data-theme="dark"] .category-rule-tabs,
[data-theme="dark"] .category-rule-tab {
  background: #12161f;
  border-color: #2b3341;
}
[data-theme="dark"] .category-rule-tab.active {
  background: #202c40;
  border-color: var(--brand-3a5a92);
  color: #dce9ff;
}
[data-theme="dark"] .category-rule-check { color: #cdd5e2; }

/* Dark-mode: capture-rule cards + control toggle rows inside the editor dialog */
[data-theme="dark"] .category-rule-check,
[data-theme="dark"] .toggle-row,
[data-theme="dark"] .blade-toggle,
[data-theme="dark"] .premium-toggle-card {
  background: #12161f !important;
  border-color: #2b3341 !important;
  color: #dbe1ec;
}
[data-theme="dark"] .category-rule-check:hover,
[data-theme="dark"] .toggle-row:hover,
[data-theme="dark"] .premium-toggle-card:hover {
  border-color: #3a4557 !important;
}
[data-theme="dark"] .category-rule-check small,
[data-theme="dark"] .toggle-row small,
[data-theme="dark"] .premium-toggle-card small,
[data-theme="dark"] .toggle-row .toggle-sub,
[data-theme="dark"] .premium-toggle-card .toggle-sub { color: #98a4b8; }

/* Dark-mode: the category dialog body + rule-card containers were still white */
[data-theme="dark"] .blade-body.category-blade-body,
[data-theme="dark"] .category-blade-body {
  background: #171c26 !important;
}
[data-theme="dark"] .category-rule-card {
  background: #12161f !important;
  border-color: #2b3341 !important;
}
[data-theme="dark"] .category-rule-card.active {
  border-color: var(--brand-3a5a92) !important;
}
[data-theme="dark"] .category-rule-subhead {
  border-bottom-color: #2b3341;
}
[data-theme="dark"] .cat-step-rail {
  background: #12161f;
  border-right-color: #2b3341;
}
[data-theme="dark"] .cat-step-btn { color: #98a4b8; }
[data-theme="dark"] .cat-step-btn:hover { background: rgba(var(--brand-6fa5ff-rgb),.1); color: #f2f5fa; }
[data-theme="dark"] .cat-step-btn.active {
  background: #1b202b;
  border-color: var(--brand-3a5a92);
  color: #cfe0ff;
}

/* Dark-mode: highlight backgrounds (delta-flagged rows, validation warning/
   error lists) were hardcoded light (#fff8e1 / #fdecea), making the dark-theme
   light text invisible. Define the tinted tokens + readable text for dark. */
[data-theme="dark"] {
  --warning-bg: rgba(214,158,46,.16);
  --danger-bg:  rgba(198,40,40,.18);
}
[data-theme="dark"] .validation-list.warnings li { color: #f0e6cf; border-left-color: #e0a83a; }
[data-theme="dark"] .validation-list.errors li   { color: #f3d7d7; border-left-color: #e26a6a; }
[data-theme="dark"] .delta-flagged td { color: #f4ecd8; }

/* Dark-mode: page-level form controls that weren't individually darkened were
   rendering light-on-light (e.g. the "per page" select on Categories). */
[data-theme="dark"] select,
[data-theme="dark"] input[type=text],
[data-theme="dark"] input[type=email],
[data-theme="dark"] input[type=number],
[data-theme="dark"] input[type=date],
[data-theme="dark"] input[type=search],
[data-theme="dark"] textarea {
  background: #1b202b;
  color: #f2f5fa;
  border-color: #303846;
}
[data-theme="dark"] .page-size-select select,
[data-theme="dark"] .category-search input {
  background: #1b202b;
  color: #f2f5fa;
  border-color: #303846;
}

/* Dark-mode: the category search is a label "pill" wrapping an icon + input.
   Darken the wrapper and keep the input transparent so it's one control, not a
   dark box nested in a white pill. */
[data-theme="dark"] .category-search {
  background: #1b202b;
  border-color: #303846;
}
[data-theme="dark"] .category-search input {
  background: transparent;
  border-color: transparent;
  color: #f2f5fa;
}

/* ============================================================================
   GLOBAL dark-mode fix — remap the premium "light" tokens (defined at :root,
   so they stayed light in dark mode) + status chips. This darkens every
   component that uses these tokens at the root, instead of one-by-one.
   ========================================================================== */
[data-theme="dark"] {
  --panel:      #191e28;
  --panel-soft: #12161f;
  --line-soft:  #2b3341;
  --blue-soft:  rgba(var(--brand-4a7fd4-rgb),.16);
  --mint-soft:  rgba(66,184,131,.16);
  --amber-soft: rgba(214,158,46,.18);
}

/* Icon tiles: keep the tinted (now dark) tile but light glyphs */
[data-theme="dark"] .mini-metric-icon,
[data-theme="dark"] .page-intro-icon,
[data-theme="dark"] .metric-icon { color: var(--brand-8eb8ff); }
[data-theme="dark"] .mini-metric-icon-good { color: #5fd39b; }
[data-theme="dark"] .mini-metric-icon-warn { background: rgba(214,158,46,.18); color: #e6b768; }
[data-theme="dark"] .mini-metric-icon-info { background: rgba(74,150,220,.16); color: #74b0ff; }

/* Status chips: tinted-dark with light coloured text (were bright pastels) */
[data-theme="dark"] .chip-draft { background: rgba(214,158,46,.16); color: #ecc178; border-color: rgba(214,158,46,.32); }
[data-theme="dark"] .chip-active,
[data-theme="dark"] .chip-open,
[data-theme="dark"] .chip-ready,
[data-theme="dark"] .chip-approved,
[data-theme="dark"] .chip-submitted,
[data-theme="dark"] .chip-none-due { background: rgba(66,184,131,.16); color: #6fd3a1; border-color: rgba(66,184,131,.3); }
[data-theme="dark"] .chip-blocked,
[data-theme="dark"] .chip-closed,
[data-theme="dark"] .chip-rejected,
[data-theme="dark"] .chip-inactive,
[data-theme="dark"] .chip-needs-attention { background: rgba(224,90,90,.16); color: #f0a0a0; border-color: rgba(224,90,90,.3); }
[data-theme="dark"] .chip-exported { background: rgba(74,127,212,.18); color: #9dc0ff; border-color: rgba(74,127,212,.32); }
[data-theme="dark"] .chip-private,
[data-theme="dark"] .chip-hr,
[data-theme="dark"] .chip-admin,
[data-theme="dark"] .chip-hr-only { background: rgba(139,111,224,.2); color: #c3b3f2; border-color: rgba(139,111,224,.34); }

/* ─── Add-from-directory picker (Employees) ─────────────────────────── */
.dir-picker { max-width: 720px; }
.dir-search { display: flex; align-items: center; gap: .5rem; padding: .55rem .75rem; margin-bottom: .85rem;
  border: 1px solid var(--bord); border-radius: 10px; background: var(--surf); color: var(--muted); }
.dir-search i { font-size: 1.05rem; }
.dir-search input { flex: 1; border: 0; outline: none; background: transparent; color: var(--text); font: inherit; }
.dir-table th, .dir-table td { vertical-align: middle; }
.dir-table td:first-child, .dir-table th:first-child { width: 2.2rem; text-align: center; }
.dir-table select { width: 100%; min-width: 120px; }
.dir-table input[type="checkbox"] { width: 1.05rem; height: 1.05rem; cursor: pointer; }
.dir-row-muted { opacity: .58; }
.dir-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .75rem; }
.btn-sm { padding: .35rem .7rem; font-size: .85rem; }

/* ── Global market context: topbar chip + post-login picker ── */
/* Slot is a pass-through so the chip participates directly in the flex bar and
   an empty slot (managers) adds no gap. Shown once per layout: in the top nav
   bar under data-layout="topnav", otherwise in the topbar. */
.market-context-slot { display: contents; }
[data-layout="topnav"] .topbar .market-context-slot { display: none; }
.topbar-controls-inline { display: inline-flex; align-items: center; gap: .6rem; }

.topbar-market-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem .7rem;
  border: 1px solid var(--bord);
  border-radius: 999px;
  background: var(--surf2);
  color: var(--text1);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.topbar-market-chip:hover { border-color: var(--acc); background: var(--surf3); }
.topbar-market-chip > .ti-world { color: var(--acc); font-size: 15px; }
.topbar-market-caret { font-size: 14px; color: var(--mut); }
.topbar-market-chip.unset { color: var(--mut); font-weight: 500; border-style: dashed; }

.topbar-period-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .8rem;
  border: 1px solid var(--bord);
  border-radius: 999px;
  background: var(--surf2);
  color: var(--text1);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.topbar-period-chip:hover { border-color: var(--acc); background: var(--surf3); }
.topbar-period-chip > .ti { color: var(--acc); font-size: 15px; }

/* ── Combined period + market context dialog ── */
#context-dialog {
  position: fixed; inset: 0; z-index: 1200;
  display: none; align-items: center; justify-content: center;
  padding: 1rem;
}
.context-dialog {
  position: relative; z-index: 1000; /* above the shared .blade-backdrop (999) */
  width: min(460px, 100%);
  background: var(--surf);
  border: 1px solid var(--bord);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  padding: 1.4rem 1.5rem 1.5rem;
}
.context-dialog-head h3 { margin: .15rem 0 .35rem; font-size: 1.25rem; color: var(--text1); }
.context-dialog-sub { margin: 0; font-size: 13px; color: var(--mut); line-height: 1.5; }
.context-dialog-warn {
  margin: .75rem 0 0; padding: .5rem .65rem;
  display: flex; align-items: center; gap: .45rem;
  font-size: 12.5px; color: var(--text1);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  border-radius: var(--radius-sm);
}
.context-dialog-warn .ti { color: var(--danger); }
.context-period-field { display: block; margin-top: 1.1rem; }
.context-period-field > span { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text2); margin-bottom: .35rem; }
.context-period-field select {
  width: 100%; padding: .55rem .65rem;
  border: 1px solid var(--bord); border-radius: 10px;
  background: var(--surf2); color: var(--text1); font: inherit; font-weight: 600; cursor: pointer;
}
.context-market-heading { margin-top: 1.1rem; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text2); }
.context-market-options { display: grid; gap: .5rem; margin-top: .5rem; }
.context-dialog-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.2rem; }

#market-picker {
  position: fixed; inset: 0; z-index: 1200;
  display: none; align-items: center; justify-content: center;
  padding: 1rem;
}
.market-picker-dialog {
  position: relative; z-index: 1000; /* above the shared .blade-backdrop (z-index 999) */
  width: min(460px, 100%);
  background: var(--surf);
  border: 1px solid var(--bord);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  padding: 1.4rem 1.5rem 1.5rem;
}
.market-picker-head h3 { margin: .15rem 0 .35rem; font-size: 1.25rem; color: var(--text1); }
.market-picker-sub { margin: 0; font-size: 13px; color: var(--mut); line-height: 1.5; }
.market-picker-warn {
  margin: .75rem 0 0; padding: .5rem .65rem;
  display: flex; align-items: center; gap: .45rem;
  font-size: 12.5px; color: var(--text1);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  border-radius: var(--radius-sm);
}
.market-picker-warn .ti { color: var(--danger); }
.market-picker-options { display: grid; gap: .5rem; margin-top: 1.1rem; }
.market-option {
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem .85rem;
  border: 1px solid var(--bord);
  border-radius: 10px;
  background: var(--surf2);
  color: var(--text1);
  cursor: pointer; text-align: left;
  transition: border-color .15s, background .15s;
}
.market-option:hover { border-color: var(--acc); background: var(--surf3); }
.market-option.active { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 10%, transparent); }
.market-option-code {
  flex: 0 0 auto; min-width: 2.6rem; text-align: center;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  padding: .2rem .35rem; border-radius: 6px;
  background: var(--surf3); color: var(--text2);
}
.market-option-name { flex: 1 1 auto; font-weight: 600; }
.market-option-cur { flex: 0 0 auto; color: var(--mut); font-weight: 600; }
.market-option-check { flex: 0 0 auto; color: var(--acc); }

.mini-metric-clickable {
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  border: 1px solid transparent;
}
.mini-metric-clickable:hover { transform: translateY(-1px); box-shadow: var(--shadow-card-hover, var(--shadow-card)); }
.mini-metric-clickable:focus-visible { outline: 2px solid rgba(var(--brand-2f72dc-rgb),.45); outline-offset: 2px; }
.mini-metric-clickable.active { border-color: var(--acc); }
[data-theme="dark"] .mini-metric-clickable.active { border-color: var(--brand-6fa5ff); }
.market-picker-actions { display: flex; justify-content: flex-end; margin-top: 1.1rem; }

/* Entries grid: give names room, keep free-text columns from hogging width */
.entries-table th { white-space: nowrap; }
table.data.entries-table td, table.data.entries-table th { padding-inline: .5rem; }
.entries-table .col-employee { min-width: 200px; }
.entries-table .col-employee .person-cell { max-width: none; }
.entries-table .col-employee .person-copy strong { overflow: visible; text-overflow: clip; }
.entries-table .col-employee .person-copy small { max-width: 170px; }
.entries-table th.col-ref { white-space: normal; min-width: 70px; }
.entries-table .col-category { min-width: 130px; }
.entries-table td.col-details { min-width: 150px; max-width: 280px; line-height: 1.35; }
.entries-table td.col-ref { min-width: 90px; max-width: 200px; overflow-wrap: anywhere; }
.entries-table td.col-comment { min-width: 180px; max-width: 360px; line-height: 1.35; }

/* ─── Entries page: compact toolbar, role tabs, taller grid ──────────── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.entries-toolbar { margin-bottom: .6rem; }
.entries-toolbar-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; }
.seg-tabs { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--bord); border-radius: 10px; background: var(--surf2); }
.seg-tab { appearance: none; border: 0; background: transparent; color: var(--mut); font: inherit; font-size: 13px; font-weight: 600; padding: .4rem .75rem; border-radius: 7px; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; }
.seg-tab:hover { color: var(--text); }
.seg-tab.active { background: var(--surf); color: var(--text); box-shadow: 0 1px 2px rgba(15,23,42,.12); }
.seg-count { min-width: 1.35rem; padding: 0 .35rem; border-radius: 999px; background: var(--surf3); color: var(--mut); font-size: 11px; font-weight: 700; line-height: 1.35rem; text-align: center; }
.seg-tab.active .seg-count, .entries-filter-toggle .seg-count { background: var(--acc); color: #fff; }
.entries-toolbar-tools { display: flex; align-items: center; gap: .5rem; }
.entries-search { position: relative; display: flex; align-items: center; }
.entries-search i { position: absolute; left: .65rem; color: var(--mut); pointer-events: none; }
.entries-search input { width: 260px; min-height: 36px; padding: .4rem .7rem .4rem 2rem; border: 1px solid var(--bord); border-radius: 8px; background: var(--surf); color: var(--text); font: inherit; font-size: 13px; }
.entries-filter-toggle { min-height: 36px; display: inline-flex; align-items: center; gap: .4rem; }
.entries-filter-toggle.active { border-color: var(--acc); color: var(--acc); }
.entries-more-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; margin-top: .6rem; padding: .7rem .8rem; border: 1px solid var(--bord); border-radius: 10px; background: var(--surf); }
.entries-more-filters label { display: grid; gap: .25rem; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mut); }
.entries-more-filters select { min-width: 190px; min-height: 34px; padding: .3rem .5rem; border: 1px solid var(--bord); border-radius: 8px; background: var(--surf); color: var(--text); font: inherit; font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 500; }
.entries-more-filters .btn-link { min-height: 34px; display: inline-flex; align-items: center; gap: .3rem; }
.entries-bulkbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 38px; margin-bottom: .45rem; font-size: 13px; }
.entries-bulkbar-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.entries-bulkbar-actions .btn-secondary { min-height: 34px; display: inline-flex; align-items: center; gap: .35rem; }
.entries-confirm-bar { display: flex; align-items: center; gap: .8rem; margin-bottom: .75rem; padding: .6rem .9rem; border: 1px solid var(--bord); border-left: 3px solid #d69e2e; border-radius: 10px; background: var(--surf); }
.entries-confirm-bar.is-confirmed { border-left-color: #2f9e68; }
.entries-confirm-bar > i { font-size: 20px; color: var(--mut); }
.entries-confirm-copy { display: grid; gap: .1rem; flex: 1; min-width: 0; font-size: 13px; }
/* Taller grid with a sticky header so HR can scan many rows in place */
.entries-table-shell { max-height: calc(100vh - 250px); min-height: 240px; overflow: auto; }
.entries-table thead th { position: sticky; top: 0; z-index: 1; }
table.data.entries-table td { padding-block: .55rem; }
.entries-table .col-status { white-space: nowrap; }
.entries-table .col-status small { display: block; margin-top: .2rem; font-size: 11px; }
@media (max-width: 900px) {
  .entries-toolbar-tools, .entries-search, .entries-search input { width: 100%; }
  .entries-table-shell { max-height: none; }
}

/* ─── Entry editor v2: summary header, setup row, numbered lines table ─ */
.payroll-entry-blade.entry-editor-v2 { width: min(1120px, calc(100vw - 32px)); max-height: min(92vh, 980px); }
.entry-editor-head { align-items: flex-start; }
.entry-editor-summary { display: grid; grid-template-columns: 1fr auto; gap: .25rem 1.5rem; flex: 1; min-width: 0; }
.entry-editor-summary .blade-kicker { grid-column: 1; display: flex; align-items: center; gap: .5rem; }
.entry-editor-summary h3 { grid-column: 1; margin: 0; font-size: 1.15rem; }
.entry-editor-cat { color: var(--mut); font-weight: 600; }
.entry-editor-meta { grid-column: 1; display: flex; flex-wrap: wrap; gap: .35rem 1rem; color: var(--mut); font-size: 12.5px; }
.entry-editor-meta i { margin-right: .2rem; }
.entry-editor-stats { grid-column: 2; grid-row: 1 / span 3; align-self: center; display: flex; gap: 1.25rem; margin-right: .75rem; }
.entry-editor-stats div { display: grid; text-align: right; }
.entry-editor-stats span { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mut); }
.entry-editor-stats strong { font-size: 1.3rem; line-height: 1.2; color: var(--text); font-variant-numeric: tabular-nums; }
.entry-editor-v2 .blade-body { padding: 1rem 1.25rem; display: grid; gap: 1rem; align-content: start; }
.entry-editor-setup { display: flex; flex-wrap: wrap; gap: .75rem; }
.entry-editor-setup > .employee-field { flex: 1 1 240px; margin: 0; }
.entry-period-fields { display: contents; }
.entry-period-fields .employee-field { flex: 0 1 160px; margin: 0; }
.entry-return-note { display: flex; gap: .7rem; padding: .7rem .9rem; border: 1px solid #f0c9a8; border-left: 3px solid #d9822b; border-radius: 10px; background: #fff7ef; color: #6b3d12; font-size: 13px; }
.entry-return-note > i { font-size: 18px; }
.entry-return-note div { display: grid; gap: .15rem; }
.entry-editor-section { display: grid; gap: .55rem; }
.entry-editor-section-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.entry-editor-section-head h4 { margin: 0; display: flex; align-items: center; gap: .4rem; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mut); }
.entry-editor-v2 .entry-rule-help { margin: 0; font-size: 12.5px; color: var(--mut); display: flex; gap: .35rem; }
.entry-lines-scroll { overflow-x: auto; border: 1px solid var(--bord); border-radius: 10px; }
.entry-lines-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.entry-lines-table th, .entry-lines-table td { padding: .35rem .4rem; border-bottom: 1px solid var(--bord); text-align: left; vertical-align: middle; }
.entry-lines-table thead th { background: var(--surf2); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mut); white-space: nowrap; }
.entry-lines-table tbody tr:last-child th, .entry-lines-table tbody tr:last-child td { border-bottom: 0; }
.entry-lines-table tfoot th, .entry-lines-table tfoot td { border-top: 1px solid var(--bord); border-bottom: 0; background: var(--surf2); }
.entry-lines-table .req { color: #c0392b; }
.entry-lines-table .line-num { width: 2.2rem; text-align: center; color: var(--mut); font-weight: 700; font-variant-numeric: tabular-nums; }
.entry-lines-table .line-value { width: 7.5rem; }
.entry-lines-table .line-value input { text-align: right; font-variant-numeric: tabular-nums; }
.entry-lines-table .line-remove { width: 2.6rem; text-align: right; }
.entry-lines-table .line-charged { white-space: nowrap; min-width: 12rem; }
.entry-lines-table .line-charged-wrap { display: flex; align-items: center; gap: .4rem; }
.entry-lines-table .line-charged input[type=checkbox] { width: 16px; height: 16px; margin-right: .4rem; vertical-align: middle; }
.entry-lines-table .line-charged input[type=text] { width: 9rem; display: inline-block; }
.editor form .entry-lines-table input[type=text],
.editor form .entry-lines-table input[type=number],
.editor form .entry-lines-table input[type=date] { width: 100%; min-width: 0; min-height: 32px; padding: .3rem .45rem; border-radius: 6px; font-size: 13px; }
.editor form .entry-lines-table input[type=date] { min-width: 8.6rem; }
.editor form .entry-lines-table .line-charged input[type=text] { flex: 1; width: auto; }
.entry-lines-table tbody tr:focus-within { background: var(--surf2); }
.entry-lines-empty-row td { padding: 1rem; color: var(--mut); text-align: center; }
.entry-editor-v2 .blade-actions { gap: .5rem; }
[data-theme="dark"] .entry-return-note { background: rgba(217,130,43,.12); border-color: rgba(217,130,43,.35); color: #f3c99a; }
@media (max-width: 720px) {
  .entry-editor-summary { grid-template-columns: 1fr; }
  .entry-editor-stats { grid-column: 1; grid-row: auto; justify-content: flex-start; }
  .entry-editor-stats div { text-align: left; }
}

.entry-editor-v2 .entry-editor-section--last { margin-top: .35rem; }
.entry-editor-v2 #entry-rule-fields { display: grid; gap: 1rem; }

/* Entry editor read-only view (HR reviewing someone else's entry, locked/exported) */
.entry-readonly-note { display: flex; gap: .7rem; padding: .65rem .9rem; border: 1px solid var(--bord); border-left: 3px solid var(--acc); border-radius: 10px; background: var(--surf2); font-size: 13px; }
.entry-readonly-note > i { font-size: 18px; color: var(--acc); }
.entry-readonly-note div { display: grid; gap: .1rem; }
.entry-editor-v2.is-readonly .entry-editor-section-head .btn-secondary,
.entry-editor-v2.is-readonly .line-remove button { display: none; }
.entry-editor-v2.is-readonly :is(input, select, textarea):disabled {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text);
  opacity: 1;
  cursor: default;
  padding-left: 0 !important;
}
.entry-editor-v2.is-readonly select:disabled { appearance: none; background-image: none !important; }
.entry-editor-v2.is-readonly input[type=date]:disabled::-webkit-calendar-picker-indicator { display: none; }
.entry-editor-v2.is-readonly textarea:disabled { resize: none; }
.entry-editor-v2.is-readonly :is(input, textarea):disabled::placeholder { color: transparent; -webkit-text-fill-color: transparent; }
.entry-editor-v2.is-readonly .entry-lines-table tbody tr:focus-within { background: transparent; }

/* Workflow chips: Submitted (awaiting line manager) → Confirmed (awaiting HR) → Approved */
.chip.chip-submitted { background: #fff4d6; color: #8a6100; border-color: #f0dca0; }
.chip.chip-confirmed { background: #e3edff; color: var(--brand-1f4fa3); border-color: #bcd0f5; }
.chip.chip-approved  { background: #dcf3e6; color: #17693d; border-color: #b4e2c8; }
.chip.chip-rejected  { background: #fde7e3; color: #9b2c1c; border-color: #f4c3b9; }
[data-theme="dark"] .chip.chip-submitted { background: rgba(214,158,46,.16); color: #ecc178; border-color: rgba(214,158,46,.32); }
[data-theme="dark"] .chip.chip-confirmed { background: rgba(var(--brand-4a7fd4-rgb),.18); color: var(--brand-a9c4f2); border-color: rgba(var(--brand-4a7fd4-rgb),.36); }
[data-theme="dark"] .chip.chip-approved  { background: rgba(47,158,104,.18); color: #8fdcb2; border-color: rgba(47,158,104,.34); }
[data-theme="dark"] .chip.chip-rejected  { background: rgba(217,83,63,.16); color: #f2a79a; border-color: rgba(217,83,63,.32); }

/* Entra profile photos layered over initials avatars */
.user-avatar, .person-avatar { position: relative; overflow: hidden; }
.avatar-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.topnav-avatar { width: 32px; height: 32px; font-size: 12px; }

/* Market chip: country flag in place of the globe icon */
.market-flag { width: 18px; height: 13.5px; border-radius: 2px; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.market-option .market-flag { width: 22px; height: 16.5px; }
.blade-title-avatar { vertical-align: middle; margin-right: .55rem; }
.audit-detail-list dd .person-cell { display: inline-flex; }

/* Dashboard: employees with entries (both manager and HR dashboards) */
.dashboard-employees-card { min-height: 0; margin: 1rem 0; }
.page-dashboard .mini-metric-row, #page-dashboard .mini-metric-row { margin-top: 1rem; }
.dashboard-employee-table th.num, .dashboard-employee-table td.num { text-align: right; white-space: nowrap; }
.dashboard-employee-row { cursor: pointer; transition: background .15s; }
.dashboard-employee-row:hover, .dashboard-employee-row:focus-visible { background: color-mix(in srgb, var(--acc) 7%, transparent); outline: none; }
.dashboard-employee-status { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; }
.dashboard-employee-status small { font-size: 12px; }
.dashboard-employee-status small.needs-action { color: var(--warn); font-weight: 600; }
.dashboard-employee-open { width: 1%; color: var(--mut); }
#page-dashboard .mini-metric-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { #page-dashboard .mini-metric-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { #page-dashboard .mini-metric-row { grid-template-columns: 1fr; } }
.dashboard-employee-cats { display: block; max-width: 22rem; }
.dashboard-employee-cats small { display: block; color: var(--mut); font-size: 12px; margin-top: .15rem; }

/* Created: edited by its owner and not yet (re)submitted */
.chip.chip-created { background: #eef1f5; color: #4a5568; border-color: #d5dbe3; }
[data-theme="dark"] .chip.chip-created { background: rgba(160,174,192,.14); color: #c3ccd8; border-color: rgba(160,174,192,.3); }

/* Entry reference (PE-<id>): quoted in conversation, so it is easy to read and copy */
.entry-ref {
  display: inline-block; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 11px; font-weight: 600; letter-spacing: .02em; line-height: 1.5;
  padding: 0 .4rem; border-radius: 5px; border: 1px solid var(--bord);
  background: var(--surf2); color: var(--text2); white-space: nowrap;
}
.entry-ref-copy { cursor: pointer; margin-left: .35rem; text-transform: none; vertical-align: middle; }
.entry-ref-copy:hover { border-color: var(--acc); color: var(--acc); }
.entry-ref-copy .ti { font-size: 12px; }
th.col-entry-id, td.col-entry-id { width: 1%; white-space: nowrap; }
.entry-submitted-by { display: flex; flex-direction: column; line-height: 1.25; }
.entry-submitted-by strong { font-weight: 600; font-size: 13px; }
.entry-submitted-by small { color: var(--mut); font-size: 12px; }
td.col-submitted-by { min-width: 110px; }
/* ── Recurring schedule editor (two columns + live summary) ─────────── */
.schedule-blade.schedule-editor-v2 { width: min(960px, calc(100vw - 32px)); max-height: min(92vh, 860px); }
.schedule-editor-v2 .blade-body { padding: 1rem 1.25rem; display: grid; gap: 1rem; align-content: start; }
.schedule-editor-v2 .sch-pick { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; align-items: start; }
.schedule-editor-v2 .sch-pick > .employee-field { margin: 0; }
.schedule-editor-v2 .sch-pick .employee-field { margin: 0; }
.schedule-editor-v2 [hidden] { display: none !important; }
.schedule-editor-v2 #sch-category-kind { margin-top: .4rem; font-size: 12.5px; }
.schedule-editor-v2 .sch-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.schedule-editor-v2 .sch-col {
  display: grid; gap: .75rem; align-content: start;
  padding: .9rem 1rem; border: 1px solid var(--line-soft, var(--bord)); border-radius: var(--radius-card, var(--rl));
  background: var(--surf);
}
.schedule-editor-v2 .sch-col .employee-section-title { margin: 0; }
.schedule-editor-v2 .sch-col .employee-field,
.schedule-editor-v2 .sch-col .employee-field-grid { margin: 0; }
.schedule-editor-v2 .sch-check { display: inline-flex; align-items: center; gap: .45rem; font-size: 13px; color: var(--text); }
.schedule-editor-v2 .sch-cap-toggle { margin: .25rem 0 0; }
.schedule-editor-v2 .sch-money { position: relative; display: block; }
.schedule-editor-v2 .sch-money-symbol {
  position: absolute; left: .75rem; top: 50%; transform: translateY(-50%);
  color: var(--mut); font-weight: 600; pointer-events: none;
}
.schedule-editor-v2 .sch-money input { padding-left: 2.4rem !important; width: 100%; font-variant-numeric: tabular-nums; }
.schedule-editor-v2 input[type=month] { width: 100%; }
.schedule-editor-v2 input[type=month]:disabled { opacity: .55; }
.schedule-editor-v2 .sch-summary {
  display: flex; gap: .65rem; align-items: flex-start;
  margin: 0 1.25rem .75rem; padding: .7rem .9rem;
  border: 1px solid var(--line-soft, var(--bord)); border-left: 4px solid var(--inf);
  border-radius: var(--radius-control, var(--r)); background: var(--blue-soft, var(--surf));
  font-size: 13px; line-height: 1.45;
}
.schedule-editor-v2 .sch-summary[hidden] { display: none; }
.schedule-editor-v2 .sch-summary > i { color: var(--inf); font-size: 1.1rem; margin-top: .1rem; }
.schedule-editor-v2 .sch-summary > div { display: grid; gap: .1rem; }
.schedule-editor-v2 .sch-summary strong { color: var(--text); font-weight: 650; }
.schedule-editor-v2 .sch-summary span { color: var(--mut); }
.schedule-editor-v2 .sch-summary.is-warn { border-left-color: var(--warn); background: var(--amber-soft, var(--surf)); }
.schedule-editor-v2 .sch-summary.is-warn > i,
.schedule-editor-v2 .sch-summary .sch-summary-warn { color: var(--warn); font-weight: 600; }
.schedule-editor-v2 .sch-actions { display: flex; align-items: center; gap: .5rem; }
.schedule-editor-v2 .sch-actions-spacer { flex: 1; }
.schedule-editor-v2 .sch-active-toggle { margin: 0; gap: .5rem; }
[data-theme="dark"] .schedule-editor-v2 .sch-col { background: rgba(255,255,255,.02); border-color: var(--bord); }
[data-theme="dark"] .schedule-editor-v2 .sch-summary { background: rgba(92,142,194,.12); border-color: var(--bord); }
[data-theme="dark"] .schedule-editor-v2 .sch-summary.is-warn { background: rgba(200,155,60,.12); }
@media (max-width: 760px) {
  .schedule-editor-v2 .sch-pick,
  .schedule-editor-v2 .sch-columns { grid-template-columns: 1fr; }
}
/* ── Sent revisions: change list since the last send (A1b) ─────────── */
.revision-change-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; }
.revision-change-group { border: 1px solid var(--line-soft, var(--bord)); border-radius: var(--radius-control, var(--r)); padding: .6rem .75rem; background: var(--surf); }
.revision-change-group strong { display: block; margin-bottom: .35rem; font-size: 13px; }
.revision-change-group ul { margin: 0; padding-left: 1rem; display: grid; gap: .2rem; font-size: 13px; }
[data-theme="dark"] .revision-change-group { background: rgba(255,255,255,.02); border-color: var(--bord); }
/* ── Entry status chips for the A1 workflow: Draft (Created) and Sent ── */
.chip.chip-created { background: #fff4d6; color: #8a6100; border-color: #f0dca0; }
.chip.chip-sent { background: #e4f0fb; color: #1b5a99; border-color: #c4ddf3; }
[data-theme="dark"] .chip.chip-created { background: rgba(214,158,46,.16); color: #ecc178; border-color: rgba(214,158,46,.32); }
[data-theme="dark"] .chip.chip-sent { background: rgba(74,127,212,.18); color: #9dc0ff; border-color: rgba(74,127,212,.32); }
/* Disabled action buttons read as unavailable (e.g. Mark as sent while the pack is blocked). */
.btn-primary:disabled,
.btn-secondary:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.chip.chip-verified { background: #e3f4ec; color: #146c43; border-color: #b7dfc9; }
[data-theme="dark"] .chip.chip-verified { background: rgba(66,184,131,.18); color: #8ee0b5; border-color: rgba(66,184,131,.34); }
/* A5/A6 entry flags: self-entered time and late / catch-up work */
.chip.chip-self { background: #eee9fb; color: #5b3fb0; border-color: #d9cff2; }
.chip.chip-late { background: #fff4d6; color: #8a6100; border-color: #f0dca0; }
[data-theme="dark"] .chip.chip-self { background: rgba(140,110,230,.18); color: #c7b6ff; border-color: rgba(140,110,230,.34); }
[data-theme="dark"] .chip.chip-late { background: rgba(214,158,46,.16); color: #ecc178; border-color: rgba(214,158,46,.32); }
/* A4: the Entries grid fits at ~1440px wide: the status note wraps under the chip
   instead of stretching the column, and the text columns start a little narrower. */
.entries-table .col-status { white-space: normal; min-width: 118px; }
.entries-table .col-status .chip { white-space: nowrap; }
.entries-table .col-status small { max-width: 150px; line-height: 1.3; }
.entries-table .col-employee { min-width: 180px; }
.entries-table td.col-details { min-width: 130px; }
.entries-table td.col-comment { min-width: 150px; }

/* Settings page: personal display preferences */
.settings-card { max-width: 760px; margin-bottom: 1rem; }
.settings-card h3 { display: flex; align-items: center; gap: .5rem; font-size: 1rem; margin-bottom: .9rem; }
.settings-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; }
.settings-option {
  display: flex; align-items: center; gap: .85rem; width: 100%;
  padding: .85rem 1rem; text-align: left; cursor: pointer;
  background: var(--surf); color: var(--text);
  border: 1px solid var(--bord); border-radius: 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.settings-option:hover { border-color: var(--bord2); }
.settings-option:focus-visible { outline: none; box-shadow: var(--ring, 0 0 0 3px rgba(var(--brand-3b6fd4-rgb), .28)); }
.settings-option.selected { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc); }
.settings-option-text { display: flex; flex-direction: column; gap: .15rem; flex: 1; min-width: 0; }
.settings-option-text small { color: var(--mut); font-size: 12px; }
.settings-option-tick { font-size: 1.25rem; color: var(--acc); visibility: hidden; }
.settings-option.selected .settings-option-tick { visibility: visible; }
[data-theme="dark"] .settings-option.selected .settings-option-tick { color: var(--brand-6da2ff); }
.settings-option-icon {
  display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 10px; background: var(--surf2); color: var(--text2); font-size: 1.3rem;
}
/* Fixed colours: each swatch previews its own theme whichever one is active. */
.settings-swatch { display: flex; width: 44px; height: 44px; flex-shrink: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--bord); }
.settings-swatch span { flex: 1; }
.settings-swatch-navy span:nth-child(1) { background: #0f316d; }
.settings-swatch-navy span:nth-child(2) { background: #3b6fd4; }
.settings-swatch-navy span:nth-child(3) { background: #9dc0ff; }
.settings-swatch-green span:nth-child(1) { background: #0b3d2e; }
.settings-swatch-green span:nth-child(2) { background: #1f9265; }
.settings-swatch-green span:nth-child(3) { background: #95dfbd; }

/* ==========================================================================
   Navigation shell (sidebar layout): light panel grouped by the payroll
   process, a period card, and a collapsible icon rail. Scoped to #sidebar so
   it outranks the earlier layered sidebar rules without !important.
   ========================================================================== */
#sidebar {
  width: 264px;
  background: var(--surf);
  border-right: 1px solid var(--bord);
  box-shadow: none;
  overflow: hidden;
  transition: width .18s ease;
}
[data-theme="light"] #sidebar { background: #fbfcfe; }
#sidebar .sb-brand { display: flex; align-items: center; gap: .65rem; padding: 1.1rem .8rem .85rem 1.1rem; }
#sidebar .brand-mark {
  color: #fff;
  background: linear-gradient(145deg, var(--brand-3b6fd4), var(--brand-1f3f7c));
  box-shadow: 0 6px 16px rgba(var(--brand-3b6fd4-rgb), .25);
}
#sidebar .sb-brand-name { flex: 1; font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; color: var(--text); white-space: nowrap; }
#sidebar .sb-collapse {
  display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0;
  border: 0; border-radius: 8px; background: transparent; color: var(--mut); cursor: pointer; font-size: 18px;
}
#sidebar .sb-collapse:hover { background: var(--surf2); color: var(--text); }

#sidebar .sb-period { padding: 0 .8rem .45rem; }
#sidebar .sb-period-card {
  display: flex; flex-direction: column; gap: .22rem; width: 100%;
  padding: .7rem .85rem; text-align: left; cursor: pointer;
  font: inherit; color: var(--text);
  background: var(--surf); border: 1px solid var(--bord); border-radius: 12px; box-shadow: var(--shadow-sm);
}
#sidebar .sb-period-card:hover { border-color: var(--bord2); }
#sidebar .sb-period-head { display: flex; align-items: center; gap: .55rem; }
#sidebar .sb-period-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(var(--brand-3b6fd4-rgb), .10); color: var(--acc); font-size: 17px; flex-shrink: 0; }
[data-theme="dark"] #sidebar .sb-period-icon { color: var(--brand-8eb8ff); }
#sidebar .sb-period-title { font-weight: 700; font-size: 14.5px; white-space: nowrap; }
#sidebar .sb-period-caret { margin-left: auto; color: var(--mut); }
#sidebar .sb-period-market { display: flex; align-items: center; gap: .4rem; margin-top: .15rem; font-size: 12.5px; font-weight: 600; color: var(--text2); }
#sidebar .sb-period-market .chip { margin-left: auto; font-size: 10px; padding: .1rem .45rem; }
#sidebar .sb-period-fact { font-size: 12px; color: var(--mut); }
#sidebar .sb-period-bar { height: 6px; margin-top: .35rem; border-radius: 999px; background: var(--surf3); overflow: hidden; }
#sidebar .sb-period-bar span { display: block; height: 100%; border-radius: inherit; background: var(--acc); }
[data-theme="dark"] #sidebar .sb-period-bar span { background: var(--brand-6da2ff); }
#sidebar .sb-period-progress { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 600; color: var(--text2); }

#sidebar .sb-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: .15rem 0 .5rem; }
#sidebar .nav-section { padding: .7rem 1.3rem .25rem; font-size: 12.5px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--text); border: 0; }
#sidebar .nav-item {
  position: relative; min-height: 34px; gap: .7rem;
  margin: .03rem .7rem; padding: .38rem .7rem;
  border: 0; border-radius: 9px; background: transparent;
  font-size: 13.5px; font-weight: 500; color: var(--text2);
}
#sidebar .nav-item:hover { background: var(--surf2); color: var(--text); }
#sidebar .nav-item.active { background: rgba(var(--brand-3b6fd4-rgb), .10); color: var(--acc); font-weight: 600; }
[data-theme="dark"] #sidebar .nav-item.active { background: rgba(var(--brand-4a7fd4-rgb), .16); color: var(--brand-9dc0ff); }
#sidebar .nav-item .nav-icon { width: 20px; font-size: 18px; color: inherit; }
#sidebar .nav-item.active .nav-icon { color: inherit; }
#sidebar .nav-item.active::before { left: -.7rem; top: 8px; bottom: 8px; width: 3px; background: var(--acc); box-shadow: none; }
#sidebar .nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sidebar .nav-badge {
  display: inline-grid; place-items: center; margin-left: auto;
  min-width: 20px; height: 20px; padding: 0 .4rem; border-radius: 999px;
  background: var(--acc); color: #fff; font-size: 11px; font-weight: 700;
}
#sidebar .nav-badge[hidden] { display: none; }

#sidebar .sidebar-footer { margin-top: 0; padding: .45rem 0 .85rem; border-top: 1px solid var(--bord); }
#sidebar .sb-user { display: flex; align-items: center; gap: .35rem; margin: .45rem .7rem 0; padding: .35rem .45rem; border-radius: 10px; }
#sidebar .user-chip { flex: 1; min-width: 0; gap: .6rem; margin: 0; padding: 0; background: transparent; border: 0; }
#sidebar .user-avatar { width: 36px; height: 36px; }
#sidebar .sb-user-text { min-width: 0; }
#sidebar .user-name { font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sidebar .user-role { font-size: 12px; color: var(--mut); }
#sidebar .sb-logout { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border: 0; border-radius: 8px; background: transparent; color: var(--mut); cursor: pointer; font-size: 18px; }
#sidebar .sb-logout:hover { background: var(--surf2); color: var(--dan); }

/* Collapsed: icon rail with tooltips (title attributes). */
[data-nav="collapsed"] #sidebar { width: 72px; }
[data-nav="collapsed"] #sidebar .sb-brand { flex-direction: column; gap: .55rem; padding: .95rem 0 .6rem; }
[data-nav="collapsed"] #sidebar .sb-brand-name,
[data-nav="collapsed"] #sidebar .nav-label,
[data-nav="collapsed"] #sidebar .sb-user-text,
[data-nav="collapsed"] #sidebar .sb-period-title,
[data-nav="collapsed"] #sidebar .sb-period-caret,
[data-nav="collapsed"] #sidebar .sb-period-market,
[data-nav="collapsed"] #sidebar .sb-period-fact,
[data-nav="collapsed"] #sidebar .sb-period-bar,
[data-nav="collapsed"] #sidebar .sb-period-progress { display: none; }
[data-nav="collapsed"] #sidebar .nav-section { height: 1px; margin: .55rem 1rem; padding: 0; font-size: 0; background: var(--bord); }
[data-nav="collapsed"] #sidebar .nav-item { justify-content: center; margin: .1rem .6rem; padding: .55rem 0; }
[data-nav="collapsed"] #sidebar .nav-item.active::before { left: -.6rem; }
[data-nav="collapsed"] #sidebar .nav-badge { position: absolute; top: 2px; right: 4px; min-width: 16px; height: 16px; padding: 0 .25rem; font-size: 9.5px; }
[data-nav="collapsed"] #sidebar .sb-period { padding: 0 .6rem .35rem; }
[data-nav="collapsed"] #sidebar .sb-period-card { align-items: center; padding: .55rem 0; }
[data-nav="collapsed"] #sidebar .sb-user { flex-direction: column; margin: .45rem .4rem 0; padding: .2rem 0; }
[data-nav="collapsed"] #sidebar .user-chip { justify-content: center; }

/* Narrow screens always use the rail; the collapse toggle has nothing to do there. */
@media (max-width: 1024px) {
  #sidebar { width: 72px; }
  #sidebar .sb-brand { flex-direction: column; gap: .55rem; padding: .95rem 0 .6rem; }
  #sidebar .sb-brand-name,
  #sidebar .nav-label,
  #sidebar .sb-user-text,
  #sidebar .sb-period-title,
  #sidebar .sb-period-caret,
  #sidebar .sb-period-market,
  #sidebar .sb-period-fact,
  #sidebar .sb-period-bar,
  #sidebar .sb-period-progress { display: none; }
  #sidebar .nav-section { height: 1px; margin: .55rem 1rem; padding: 0; font-size: 0; background: var(--bord); }
  #sidebar .nav-item { justify-content: center; margin: .1rem .6rem; padding: .55rem 0; }
  #sidebar .nav-item.active::before { left: -.6rem; }
  #sidebar .nav-badge { position: absolute; top: 2px; right: 4px; min-width: 16px; height: 16px; padding: 0 .25rem; font-size: 9.5px; }
  #sidebar .sb-period { padding: 0 .6rem .35rem; }
  #sidebar .sb-period-card { align-items: center; padding: .55rem 0; }
  #sidebar .sb-user { flex-direction: column; margin: .45rem .4rem 0; padding: .2rem 0; }
  #sidebar .user-chip { justify-content: center; }
  #sidebar .sb-collapse { display: none; }
  #sidebar .user-chip > .user-avatar { display: flex; }
}

/* The period card carries market + period in the expanded sidebar, so the
   top-bar chips only show in the top-menu layout, the rail and narrow screens. */
@media (min-width: 1025px) {
  [data-layout="sidebar"][data-nav="expanded"] .topbar .market-context-slot { display: none; }
}

/* Breadcrumb above the page title */
.topbar-crumb { display: flex; align-items: center; gap: .4rem; margin-bottom: .2rem; font-size: 12.5px; color: var(--mut); }
.topbar-crumb:empty { display: none; }
.topbar-crumb i { font-size: 14px; }
.topbar-crumb-sep { opacity: .6; }

/* ==========================================================================
   Entries grid + docked side panel
   ========================================================================== */
/* The expanded sidebar period card already shows the period, reporting month and pay date.
   !important: the banner sets display inline. */
@media (min-width: 1025px) {
  [data-layout="sidebar"][data-nav="expanded"] #page-entries .period-context-banner { display: none !important; }
}
#page-entries .entries-bulkbar { justify-content: flex-end; min-height: 0; }

.entries-workspace { display: block; }
.entries-workspace.has-panel { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1rem; align-items: start; }
.entries-main { min-width: 0; }

/* Two header rows: stick the whole thead instead of each cell. */
.entries-grid thead { position: sticky; top: 0; z-index: 2; }
.entries-grid thead th { position: static; }
.entries-workspace.has-panel .entries-grid .col-employee { min-width: 170px; }
.entries-workspace.has-panel .entries-grid .col-status { min-width: 96px; }
.entries-grid td.col-date, .entries-grid td.col-qty, .entries-grid td.col-amount { white-space: nowrap; }
.entries-grid th.col-amount, .entries-grid td.col-amount { text-align: right; }
.entries-grid td.col-amount { font-variant-numeric: tabular-nums; font-weight: 600; }
.entries-grid td.col-comment { min-width: 150px; max-width: 260px; }
.entries-grid .col-menu { width: 44px; text-align: right; }
.entries-grid tr.entry-row { cursor: pointer; }
.entries-grid tr.entry-row:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.entries-grid tr.entry-row.is-selected > td { background: rgba(var(--brand-3b6fd4-rgb), .07); }
.entries-grid tr.entry-row.is-selected > td:first-child { box-shadow: inset 3px 0 0 var(--acc); }
[data-theme="dark"] .entries-grid tr.entry-row.is-selected > td { background: rgba(var(--brand-4a7fd4-rgb), .14); }

.entry-menu-btn {
  display: inline-grid; place-items: center; width: 32px; height: 32px;
  border: 0; border-radius: 8px; background: transparent; color: var(--mut); cursor: pointer; font-size: 18px;
}
.entry-menu-btn:hover, .entry-menu-btn:focus-visible { background: var(--surf2); color: var(--text); }
.entry-row-menu {
  position: fixed; z-index: 1200; min-width: 180px; padding: .3rem;
  background: var(--surf); border: 1px solid var(--bord); border-radius: 10px; box-shadow: var(--shadow);
}
.entry-row-menu-item {
  display: flex; align-items: center; gap: .6rem; width: 100%; padding: .5rem .65rem;
  border: 0; border-radius: 7px; background: transparent; color: var(--text); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer;
}
.entry-row-menu-item i { font-size: 16px; color: var(--mut); }
.entry-row-menu-item:hover, .entry-row-menu-item:focus-visible { background: var(--surf2); outline: none; }
.entry-row-menu-item.danger, .entry-row-menu-item.danger i { color: var(--dan); }

.entries-footer {
  position: sticky; bottom: 0; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem 1rem;
  margin-top: .6rem; padding: .7rem 1rem;
  background: var(--surf); border: 1px solid var(--bord); border-radius: 12px; box-shadow: var(--shadow-sm);
  font-size: 13px;
}
.entries-footer-sep { width: 1px; height: 18px; background: var(--bord); }
.entries-footer-tallies { display: flex; flex-wrap: wrap; gap: .9rem; margin-left: auto; }
.tally { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; color: var(--text2); }
.tally i { font-size: 16px; }
.tally-ok i { color: var(--suc); }
.tally-wait i { color: var(--warn); }
.tally-bad i { color: var(--dan); }
.tally-muted i { color: var(--mut); }

.entry-panel {
  position: sticky; top: 0;
  max-height: calc(100vh - 150px); overflow-y: auto;
  background: var(--surf); border: 1px solid var(--bord); border-radius: 14px; box-shadow: var(--shadow-sm);
}
.entry-panel[hidden] { display: none; }
.entry-panel-head { display: flex; align-items: flex-start; gap: .8rem; padding: 1.1rem 1.1rem .8rem; }
.entry-panel-head .blade-close { margin-left: auto; flex-shrink: 0; }
.entry-panel-avatar.person-avatar { width: 56px; height: 56px; font-size: 18px; flex-shrink: 0; }
.entry-panel-who { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.entry-panel-who h3 { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-size: 1.1rem; line-height: 1.25; }
.entry-panel-who .muted { font-size: 12.5px; }
.entry-panel-tabs { display: flex; gap: .25rem; padding: 0 1.1rem; border-bottom: 1px solid var(--bord); }
.entry-panel-tabs button {
  padding: .6rem .7rem; margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; background: transparent;
  color: var(--text2); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.entry-panel-tabs button.active { color: var(--acc); border-bottom-color: var(--acc); }
[data-theme="dark"] .entry-panel-tabs button.active { color: var(--brand-9dc0ff); border-bottom-color: var(--brand-6da2ff); }
.entry-panel-body { padding: .2rem 1.1rem 1.1rem; }
.entry-panel-section { padding: .95rem 0; border-bottom: 1px solid var(--bord); }
.entry-panel-section:last-child { border-bottom: 0; }
.entry-panel-section h4 { font-size: .95rem; margin-bottom: .7rem; }
.entry-panel-section-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .7rem; }
.entry-panel-section-head h4 { margin: 0; }
.entry-panel-list { display: grid; gap: .6rem; margin: 0; }
.entry-panel-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: .5rem; font-size: 13px; }
.entry-panel-row dt { color: var(--mut); }
.entry-panel-row dd { display: flex; gap: .45rem; margin: 0; color: var(--text); min-width: 0; }
.entry-panel-row dd i { color: var(--mut); font-size: 16px; flex-shrink: 0; }
.entry-panel-row dd span { min-width: 0; overflow-wrap: anywhere; }
.entry-panel-subhead { margin: .8rem 0 .35rem; font-size: 12px; font-weight: 700; color: var(--text2); }
.entry-panel-lines { margin: 0; padding-left: 1.1rem; display: grid; gap: .25rem; font-size: 12.5px; color: var(--text2); }
.entry-panel-status { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: 12.5px; }
.entry-panel-note { display: flex; gap: .45rem; margin-top: .6rem; padding: .55rem .65rem; border-radius: 8px; background: var(--surf2); font-size: 12.5px; color: var(--text2); }
.entry-panel-actions { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .8rem; }
.entry-panel-actions button { display: inline-flex; align-items: center; gap: .35rem; }
.entry-panel-source { display: flex; gap: .6rem; font-size: 13px; }
.entry-panel-source > i { font-size: 18px; color: var(--mut); }
.entry-panel-source > div { display: flex; flex-direction: column; gap: .15rem; }
.entry-panel-source .muted { font-size: 12.5px; }
.entry-history { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.entry-history li { display: flex; gap: .65rem; font-size: 13px; }
.entry-history li > div { display: flex; flex-direction: column; gap: .1rem; }
.entry-history .muted { font-size: 12px; }
.entry-history-dot { display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; background: var(--surf2); color: var(--acc); font-size: 14px; }
.entry-history-note { font-size: 12.5px; color: var(--text2); font-style: italic; }
.entry-audit { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-size: 12.5px; }
.entry-audit li { display: flex; flex-direction: column; gap: .05rem; }
#entry-panel-audit > p, .entry-panel-section > p.muted { font-size: 12.5px; }
/* With the panel open the comment lives in the panel; drop the column where space is short. */
@media (max-width: 1600px) {
  .entries-workspace.has-panel .entries-grid .col-comment { display: none; }
}

/* Narrower screens: the panel floats over the grid instead of squeezing it. */
@media (max-width: 1280px) {
  .entries-workspace.has-panel { display: block; }
  .entry-panel {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 900;
    width: min(380px, 100vw); max-height: none; border-radius: 0; border-width: 0 0 0 1px; box-shadow: var(--shadow);
  }
}

/* Validation on the Entries page (HR): grid flag, panel section */
.validation-flag { display: inline-grid; place-items: center; margin-left: .3rem; vertical-align: middle; font-size: 16px; cursor: help; }
.validation-flag.is-warning { color: var(--warn); }
.validation-flag.is-error { color: var(--dan); }
.entry-panel-issues { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.entry-panel-issues li { display: flex; gap: .55rem; padding: .6rem .7rem; border-radius: 9px; font-size: 12.5px; }
.entry-panel-issues li > i { font-size: 17px; flex-shrink: 0; }
.entry-panel-issues li > div { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.entry-panel-issues li.is-warning { background: rgba(214,158,46,.10); }
.entry-panel-issues li.is-warning > i { color: var(--warn); }
.entry-panel-issues li.is-error { background: rgba(194,92,92,.10); }
.entry-panel-issues li.is-error > i { color: var(--dan); }
.entry-panel-valid { display: flex; align-items: center; gap: .5rem; font-size: 13px; font-weight: 600; color: var(--suc); }
.entry-panel-valid i { font-size: 18px; }
.entries-grid td.col-status { white-space: nowrap; }

/* B2/B3: category pay rule fields and the entry editor's pay line */
.cat-pay[hidden], .cat-pay [hidden] { display: none; }
.cat-pay-hint { margin: .1rem 0 .6rem; font-size: 12.5px; }
.entry-pay-summary {
  display: flex; align-items: center; gap: .45rem; margin-top: .6rem; padding: .55rem .75rem;
  border-radius: 9px; background: rgba(var(--brand-3b6fd4-rgb), .07); color: var(--text); font-size: 13px; font-weight: 600;
}
.entry-pay-summary[hidden] { display: none; }
.entry-pay-summary i { color: var(--acc); font-size: 16px; }
[data-theme="dark"] .entry-pay-summary i { color: var(--brand-8eb8ff); }

/* B2/B3 on HR's grid: rate or multiplier, pay hours, and previews for unsubmitted entries */
.entries-grid td.col-pay { white-space: nowrap; }
.entries-grid th.col-pay, .entries-grid td.col-pay { text-align: right; }
.entries-grid td.is-preview { color: var(--mut); font-style: italic; }
.entries-grid td.is-preview strong { font-weight: 500; }

/* D2: leavers and new starters in this payroll run */
.chip.chip-leaver { background: #fde7e3; color: #9b2c1c; border-color: #f4c3b9; }
.chip.chip-starter { background: #dcf3e6; color: #17693d; border-color: #b4e2c8; }
[data-theme="dark"] .chip.chip-leaver { background: rgba(217,83,63,.16); color: #f2a79a; border-color: rgba(217,83,63,.32); }
[data-theme="dark"] .chip.chip-starter { background: rgba(47,158,104,.18); color: #8fdcb2; border-color: rgba(47,158,104,.34); }
td > .person-cell + .chip-leaver, td > .person-cell + .chip-starter,
td > .person-cell-button + .chip-leaver, td > .person-cell-button + .chip-starter { display: inline-flex; margin: .3rem 0 0 2.6rem; white-space: nowrap; }
table.data tr.row-leaver > td:first-child { box-shadow: inset 3px 0 0 var(--dan); }
table.data tr.row-starter > td:first-child { box-shadow: inset 3px 0 0 var(--suc); }

.people-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
  margin-bottom: .8rem; padding: .6rem .9rem;
  background: var(--surf); border: 1px solid var(--bord); border-radius: 12px; font-size: 13px;
}
.people-strip > i { font-size: 18px; color: var(--mut); }
.people-strip-btn {
  padding: .25rem .65rem; border-radius: 999px; border: 1px solid; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.people-strip-leavers { background: #fde7e3; color: #9b2c1c; border-color: #f4c3b9; }
.people-strip-starters { background: #dcf3e6; color: #17693d; border-color: #b4e2c8; }
[data-theme="dark"] .people-strip-leavers { background: rgba(217,83,63,.16); color: #f2a79a; border-color: rgba(217,83,63,.32); }
[data-theme="dark"] .people-strip-starters { background: rgba(47,158,104,.18); color: #8fdcb2; border-color: rgba(47,158,104,.34); }
.people-strip-btn.active { box-shadow: 0 0 0 2px var(--acc); }
.people-strip-names { font-size: 12.5px; }
.people-strip-clear { margin-left: auto; border: 0; background: transparent; color: var(--acc); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.entry-panel-who .chip-leaver, .entry-panel-who .chip-starter { margin-top: .2rem; }

/* Employees cards have no icon: give the label the full width instead of the icon slot. */
#page-employees .mini-metric:not(:has(.mini-metric-icon)) { grid-template-columns: minmax(0, 1fr); }

/* The grid is sized to the window in JS (fitEntriesLayout), so the footer just follows it. */
#page-entries .entries-footer { position: static; }

/* ==========================================================================
   Metric cards, all pages. Earlier layers fixed the row at 6 columns (4 cards left a gap
   and squeezed labels to one word per line) and always reserved a 42px icon column, so a
   card without an icon pushed its text into it. The dashboard keeps its own 4-column rule.
   ========================================================================== */
.mini-metric-row { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
[data-theme] .mini-metric:not(:has(.mini-metric-icon)) { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.mini-metric span, .mini-metric small { overflow-wrap: anywhere; }

/* Exports status tiles: label above the number, sized to their content. */
[data-theme] .export-status-grid .mini-metric.export-status-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; min-height: 0;
}

/* Setup readiness: use the page width (560px was the old first-run wizard size). */
#page-setup .setup-card { max-width: none; }
#page-setup .setup-card .bare { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* Brand icon: payslip with a tick (inline SVG, follows the theme colour). */
.brand-mark .brand-icon { width: 21px; height: 21px; }

/* Top menu: a dropdown holding the current page reads as current. */
.topnav-dropdown.has-active .topnav-dd-btn { color: var(--acc); font-weight: 700; }
[data-theme="dark"] .topnav-dropdown.has-active .topnav-dd-btn { color: var(--brand-9dc0ff); }

/* Shorter windows (e.g. 1440x900): keep the whole menu visible without scrolling. */
@media (max-height: 960px) and (min-width: 1025px) {
  [data-nav="expanded"] #sidebar .sb-period-fact { display: none; }
  #sidebar .sb-brand { padding-top: .8rem; padding-bottom: .6rem; }
  #sidebar .nav-item { min-height: 31px; padding-block: .3rem; }
  #sidebar .nav-section { padding-top: .5rem; padding-bottom: .15rem; }
  #sidebar .sb-user { margin-top: .25rem; }
}

/* Single-row grid header. */
.entries-grid th.col-pay { white-space: nowrap; }
/* With the panel open (it shows the dates), drop the Date column where space is short. */
@media (max-width: 1600px) {
  .entries-workspace.has-panel .entries-grid .col-date { display: none; }
}

/* Resizable Entries details panel: drag the left edge (width in --entry-panel-width, set in JS).
   The panel scrolls inside .entry-panel-scroll so the handle spans its full height. */
.entries-workspace.has-panel {
  grid-template-columns: minmax(0, 1fr) max(320px, min(var(--entry-panel-width, 360px), calc(100% - 420px)));
}
.entry-panel { display: flex; flex-direction: column; overflow: hidden; }
.entry-panel-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.entry-panel-resize {
  position: absolute; top: 0; bottom: 0; left: 0; z-index: 2;
  width: 10px; cursor: col-resize; touch-action: none;
}
.entry-panel-resize::after {
  content: ''; position: absolute; top: 50%; left: 3px;
  width: 4px; height: 44px; margin-top: -22px; border-radius: 4px;
  background: var(--bord); transition: background .15s, height .15s, margin-top .15s;
}
.entry-panel-resize:hover::after, .entry-panel-resize:focus-visible::after, body.is-resizing-panel .entry-panel-resize::after {
  background: var(--acc); height: 72px; margin-top: -36px;
}
.entry-panel-resize:focus-visible { outline: none; }
body.is-resizing-panel { cursor: col-resize; user-select: none; }
body.is-resizing-panel .entries-grid { pointer-events: none; }
@media (max-width: 1280px) {
  .entry-panel { width: min(var(--entry-panel-width, 380px), calc(100vw - 24px)); }
}
/* Previous / next in the entry dialog header */
.entry-editor-nav { display: inline-flex; align-items: center; gap: .15rem; flex-shrink: 0; margin: 0 .35rem 0 .75rem; }
.entry-editor-nav-btn {
  display: inline-grid; place-items: center; width: 32px; height: 32px;
  border: 1px solid var(--bord); border-radius: 8px; background: var(--surf); color: var(--text2);
  font-size: 17px; cursor: pointer;
}
.entry-editor-nav-btn:hover:not([disabled]) { background: var(--surf2); color: var(--acc); }
.entry-editor-nav-btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
.entry-editor-nav-btn[disabled] { opacity: .4; cursor: default; }
.entry-editor-nav-count { min-width: 4.2rem; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--text2); font-variant-numeric: tabular-nums; }/* While browsing entries the dialog keeps one size (the body scrolls) and doesn't re-animate. */
.payroll-entry-blade.entry-editor-v2.has-entry-nav { height: min(88vh, 900px); max-height: min(88vh, 900px); }
.payroll-entry-blade.entry-editor-v2.has-entry-nav .blade-form { flex: 1 1 auto; min-height: 0; }
.payroll-entry-blade.entry-editor-v2.has-entry-nav .blade-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.entry-blade.is-stepping { animation: none; }/* The floating details panel (<=1280px, z-index 900) must stay under the entry dialog. */
#entry-editor .blade-backdrop { z-index: 1000; }
#entry-editor .entry-blade { z-index: 1001; }/* Text input dialog (showPrompt), replaces window.prompt. Above the entry dialog (1001). */
#prompt-dialog { position: fixed; inset: 0; z-index: 1200; }
.prompt-backdrop { position: absolute; inset: 0; background: rgba(10, 15, 25, .5); animation: fadeIn .15s ease; }
.prompt-dialog {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto;
  display: grid; gap: .9rem; padding: 1.35rem 1.4rem 1.2rem;
  background: var(--surf); border: 1px solid var(--bord); border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .34);
  animation: dialogIn .16s ease-out;
}
.prompt-dialog-head { display: flex; gap: .85rem; align-items: flex-start; }
.prompt-dialog-head h3 { margin: .15rem 0 0; font-size: 1.05rem; line-height: 1.3; }
.prompt-dialog-icon {
  display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 12px; background: rgba(var(--brand-2d5aaa-rgb), .10); color: var(--acc); font-size: 20px;
}
.prompt-dialog.is-danger .prompt-dialog-icon { background: rgba(194, 92, 92, .12); color: var(--dan); }
.prompt-dialog-msg { margin: .3rem 0 0; font-size: 13px; line-height: 1.5; color: var(--mut); }
.prompt-dialog-context {
  padding: .55rem .75rem; border-radius: 9px; background: var(--surf2);
  font-size: 13px; font-weight: 600; color: var(--text2);
}
.prompt-dialog-field { display: grid; gap: .4rem; margin: 0; }
.prompt-dialog-field > span { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text2); }
.prompt-dialog-field > span em { font-style: normal; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--mut); }
.prompt-dialog-field textarea {
  box-sizing: border-box; width: 100%; min-height: 96px; resize: vertical;
  padding: .65rem .8rem !important; border-radius: 10px !important; font: inherit; font-size: 14px; line-height: 1.5;
}
.prompt-dialog-field textarea[aria-invalid="true"] { border-color: var(--dan) !important; box-shadow: 0 0 0 3px rgba(194, 92, 92, .15) !important; }
.prompt-dialog-suggestions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: -.3rem; }
.prompt-suggestion {
  padding: .3rem .65rem; border: 1px solid var(--bord); border-radius: 999px;
  background: var(--surf); color: var(--text2); font: inherit; font-size: 12.5px; cursor: pointer;
}
.prompt-suggestion:hover, .prompt-suggestion:focus-visible { border-color: var(--acc); color: var(--acc); outline: none; }
.prompt-dialog-meta { display: flex; justify-content: space-between; gap: 1rem; margin-top: -.45rem; font-size: 12px; min-height: 1.1em; }
.prompt-dialog-error { color: var(--dan); font-weight: 600; }
.prompt-dialog-count { margin-left: auto; color: var(--mut); font-variant-numeric: tabular-nums; }
.prompt-dialog-footer { display: flex; justify-content: flex-end; gap: .5rem; padding-top: .2rem; }
[data-theme="dark"] .prompt-dialog-icon { color: var(--brand-9dc0ff); }
[data-theme="dark"] .prompt-dialog.is-danger .prompt-dialog-icon { color: var(--dan); }/* Units | Pay hours | Amount (both views): numbers right-aligned, headers on one line. */
.entries-grid th.col-qty, .entries-grid td.col-qty { text-align: right; white-space: nowrap; }
.entries-grid th.col-amount { white-space: nowrap; }/* Weekday beside each line date in the entry dialog. */
.line-date-wrap { display: flex; align-items: center; gap: .45rem; }
.line-date-wrap input { min-width: 0; }
.line-weekday { flex-shrink: 0; min-width: 2.6rem; font-size: 12.5px; font-weight: 600; color: var(--mut); }.editor form .entry-lines-table .line-date-wrap input[type=date] { flex: 0 1 auto; width: auto; }
.entry-editor-v2.is-readonly form .entry-lines-table .line-date-wrap input[type=date] { width: 6.6em; min-width: 0; padding-right: 0 !important; }
.entry-editor-v2.is-readonly .line-weekday { min-width: 0; }/* Private (HR-only) entries: a violet tint on the grid row and a banner in the panel. */
.entries-grid tr.entry-row.row-private > td { background: rgba(139, 111, 224, .07); }
.entries-grid tr.entry-row.row-private:hover > td { background: rgba(139, 111, 224, .12); }
.entries-grid tr.entry-row.row-private.is-selected > td { background: rgba(139, 111, 224, .15); }
.entries-grid tr.entry-row.row-private .col-category { color: #5b3fb0; font-weight: 600; }
[data-theme="dark"] .entries-grid tr.entry-row.row-private > td { background: rgba(139, 111, 224, .12); }
[data-theme="dark"] .entries-grid tr.entry-row.row-private.is-selected > td { background: rgba(139, 111, 224, .22); }
[data-theme="dark"] .entries-grid tr.entry-row.row-private .col-category { color: #c3b3f2; }
.chip-private .ti { font-size: 12px; vertical-align: -1px; }
.entry-panel-scroll.is-private { border-top: 3px solid #8b6fe0; }
.entry-panel-private {
  display: flex; align-items: center; gap: .5rem; padding: .55rem 1.1rem;
  background: rgba(139, 111, 224, .10); color: #5b3fb0; font-size: 12.5px;
}
.entry-panel-private .ti { font-size: 16px; }
[data-theme="dark"] .entry-panel-private { background: rgba(139, 111, 224, .18); color: #c3b3f2; }/* Entered by column */
.entries-grid td.col-entered { white-space: nowrap; font-size: 13px; color: var(--text2); }
.entries-grid th.col-entered { white-space: nowrap; }/* Inline field error (category name already used in the market). */
.field-error { display: block; min-height: 0; margin-top: .3rem; color: var(--dan); font-size: 12.5px; font-weight: 600; }
.field-error:empty { display: none; }
.editor form input[aria-invalid] { border-color: var(--dan) !important; box-shadow: 0 0 0 3px rgba(194, 92, 92, .15) !important; }/* Category editor: fields locked because entries already use the category. */
.cat-usage-note { margin-bottom: .9rem; }
.category-blade label.is-locked select:disabled { background-color: var(--surf2) !important; color: var(--mut) !important; cursor: not-allowed; }
.category-blade label.is-locked > span::after { content: ' \1F512'; font-size: 11px; }
/* The page area takes focus when a menu item opens a page (keyboard scrolling). */
.content:focus { outline: none; }
/* ── Test-site banner (staging and local dev; see applyEnvironmentBanner) ── */
.environment-banner {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .55rem 1.25rem;
  background: #f5b82e;
  color: #2b1d00;
  border-bottom: 2px solid #b87800;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  z-index: 5;
}
.environment-banner strong { font-weight: 800; letter-spacing: .04em; }
.environment-banner .ti { font-size: 16px; }
.environment-banner[hidden] { display: none; }
[data-theme="dark"] .environment-banner {
  background: #6b4a00;
  color: #ffe7a8;
  border-bottom-color: #f5b82e;
}
.login-test-note {
  margin: -.25rem 0 1rem;
  border: 2px solid #b87800;
  border-radius: 10px;
}
[data-theme="dark"] .login-test-note { border-color: #f5b82e; }

/* #2917: a payroll period set up ahead, hidden from managers until HR opens it */
.chip.chip-planned { background: #eef0f4; color: #4a5568; border-color: #d5d9e2; border-style: dashed; }
[data-theme="dark"] .chip.chip-planned { background: rgba(160,174,192,.14); color: #c3cad6; border-color: rgba(160,174,192,.35); }

/* #2918: a date-range entry line (from ... to ...), e.g. a weekend's Saturday and Sunday */
.line-date-wrap.line-date-range { flex-wrap: wrap; row-gap: .3rem; }
.line-date-range .line-date-to { font-size: 12.5px; color: var(--mut); }
.entry-lines-table .line-value input[readonly] { background: var(--surf2) !important; cursor: default; }

/* #2922: HR's notes for the accountant on the Exports page */
.accountant-notes-card textarea { width: 100%; min-height: 6rem; resize: vertical; font: inherit; line-height: 1.45; }
.accountant-notes-card textarea:disabled { background: var(--surf2) !important; cursor: default; }
.accountant-notes-actions { display: flex; justify-content: flex-end; align-items: center; margin-top: .6rem; }
.accountant-notes-actions .muted .ti { vertical-align: -2px; }
.accountant-notes-card .todo-notes-block { margin-top: 1rem; padding-top: .9rem; border-top: 1px dashed var(--border, #e3e6ef); }
.accountant-notes-card .todo-notes-block h4 { margin: 0; font-size: 14px; }

/* #2923: an earlier leaver HR still has to exclude from payroll */
.people-strip-toExclude { background: #fff4d6; color: #7a5200; border-color: #f0d38a; border-style: dashed; }
[data-theme="dark"] .people-strip-toExclude { background: rgba(245,184,46,.14); color: #f5cf74; border-color: rgba(245,184,46,.38); }
.leaver-action { color: #7a5200; font-weight: 600; }
[data-theme="dark"] .leaver-action { color: #f5cf74; }

/* #2940: New portal user, picked from the employee list */
.au-emp-list { display: flex; flex-direction: column; gap: .25rem; max-height: 22rem; overflow-y: auto; margin-bottom: .5rem; }
.au-emp-option { display: flex; align-items: center; gap: .65rem; width: 100%; padding: .5rem .6rem; text-align: left;
  border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.au-emp-option:hover:not(:disabled), .au-emp-option:focus-visible { background: var(--surf2); border-color: var(--bord); outline: none; }
.au-emp-option:disabled { cursor: default; opacity: .6; }
.au-emp-option .person-copy, .au-picked .person-copy { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.au-emp-option .person-copy small, .au-picked .person-copy small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-picked { display: flex; align-items: center; gap: .75rem; padding: .7rem .8rem; border: 1px solid var(--bord); border-radius: 10px; background: var(--surf2); }
.au-emp-empty, .au-emp-more { margin: .25rem 0 .5rem; font-size: .85rem; }