/* ============================================================
   Sutra HRMS — Design tokens & shared shell
   Clean corporate. Warm-cool neutrals. Deep teal + amber.
   ============================================================ */

:root {
  /* Color — brand */
  --brand-900: oklch(0.28 0.06 195);
  --brand-800: oklch(0.35 0.07 195);
  --brand-700: oklch(0.42 0.08 195);   /* primary */
  --brand-600: oklch(0.52 0.09 195);
  --brand-500: oklch(0.62 0.09 195);
  --brand-100: oklch(0.94 0.02 195);
  --brand-50:  oklch(0.97 0.012 195);

  /* Accent — amber */
  --accent-700: oklch(0.62 0.14 70);
  --accent-600: oklch(0.72 0.13 70);
  --accent-500: oklch(0.80 0.12 70);
  --accent-100: oklch(0.95 0.04 70);

  /* Neutrals — warm-cool */
  --ink-900: oklch(0.20 0.01 240);
  --ink-800: oklch(0.28 0.01 240);
  --ink-700: oklch(0.38 0.01 240);
  --ink-600: oklch(0.48 0.008 240);
  --ink-500: oklch(0.58 0.006 240);
  --ink-400: oklch(0.70 0.005 240);
  --ink-300: oklch(0.82 0.004 240);
  --ink-200: oklch(0.90 0.004 240);
  --ink-150: oklch(0.94 0.003 240);
  --ink-100: oklch(0.965 0.003 240);
  --ink-50:  oklch(0.985 0.003 240);
  --bg:      oklch(0.985 0.003 240);
  --panel:   #ffffff;

  /* Semantic */
  --ok-700: oklch(0.48 0.12 155);
  --ok-500: oklch(0.65 0.13 155);
  --ok-100: oklch(0.94 0.04 155);

  --warn-700: oklch(0.58 0.13 75);
  --warn-500: oklch(0.75 0.14 75);
  --warn-100: oklch(0.95 0.05 75);

  --err-700: oklch(0.52 0.17 25);
  --err-500: oklch(0.65 0.18 25);
  --err-100: oklch(0.95 0.04 25);

  --info-700: oklch(0.48 0.13 250);
  --info-500: oklch(0.62 0.14 250);
  --info-100: oklch(0.95 0.03 250);

  /* Type */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-display: 'Inter', sans-serif;

  /* Spacing / radii / shadow */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 14px;

  --sh-sm: 0 1px 2px rgba(20,25,35,0.04);
  --sh-md: 0 4px 12px rgba(20,25,35,0.06), 0 1px 2px rgba(20,25,35,0.04);
  --sh-lg: 0 12px 32px rgba(20,25,35,0.10), 0 2px 6px rgba(20,25,35,0.04);

  --sidebar-w: 232px;
  --topbar-h: 56px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-800);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv02','cv03','cv04','cv11';
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ============================================================
   Shell layout
   ============================================================ */
.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  min-height: 100vh;
}
.sidebar {
  grid-row: 1 / -1;
  background: var(--panel);
  border-right: 1px solid var(--ink-200);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.topbar {
  grid-column: 2;
  background: var(--panel);
  border-bottom: 1px solid var(--ink-200);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 20;
}
.main {
  grid-column: 2;
  padding: 24px 32px 64px;
  min-width: 0;
}

/* ---- Sidebar ---- */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--ink-150);
  height: var(--topbar-h);
}
.brand-mark {
  width: 26px; height: 26px;
  border-radius: 6px;
  background: linear-gradient(140deg, var(--brand-700), var(--brand-900));
  display: grid; place-items: center;
  color: white; font-weight: 700;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.02em;
}
.brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}
.brand-name em { color: var(--ink-500); font-style: normal; font-weight: 400; font-size: 12px; margin-left: 2px; }

.nav {
  flex: 1;
  overflow-y: auto;
  padding: 12px 8px 24px;
}
.nav-section {
  padding: 12px 10px 4px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-500);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--r-md);
  color: var(--ink-700);
  font-size: 13px;
  font-weight: 500;
  margin: 1px 0;
  cursor: pointer;
  transition: background 120ms;
  position: relative;
}
.nav-item:hover { background: var(--ink-100); color: var(--ink-900); }
.nav-item.active {
  background: var(--brand-50);
  color: var(--brand-800);
  font-weight: 600;
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: -8px; top: 6px; bottom: 6px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--brand-700);
}
.nav-item svg { flex-shrink: 0; opacity: 0.8; }
.nav-item.active svg { opacity: 1; }
.nav-item .badge {
  margin-left: auto;
  background: var(--ink-200);
  color: var(--ink-700);
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 10px;
  font-variant-numeric: tabular-nums;
}
.nav-item.active .badge { background: var(--brand-100); color: var(--brand-800); }

/* A feature that exists but has no screen yet, or is still to be built. Present
   in the nav on purpose: a client walking the product should be able to tell
   "planned and coming" from "never existed", and an absent entry says neither.
   Muted rather than alarming — this is information, not a fault. */
.nav-item.nav-soon { cursor: default; opacity: .78; flex-wrap: wrap; row-gap: 2px; }

/* A nav child: a tab of the page above it, not a destination of its own. No
   icon — the indent is what says "inside" — and a lighter weight so the parent
   reads first. */
.nav-item.nav-sub {
  padding-left: 38px;
  font-size: 12.5px;
  color: var(--ink-500);
}
.nav-item.nav-sub.active { color: var(--brand-800); }
.nav-item.nav-soon:hover { background: transparent; }
/* The tag drops to its own line rather than squeezing the label into two. The
   wording is kept in full ("Coming to the UI") instead of shortened to jargon:
   a buyer reads this once, at a glance, and "UI soon" does not say that the
   thing behind it already works. */
.nav-item.nav-soon > span:first-of-type { flex: 1 1 auto; min-width: 0; }
.nav-soon-tag {
  flex: 0 0 auto;
  margin-left: 26px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 1px 6px;
  border-radius: 9px;
  white-space: nowrap;
  background: var(--ink-200);
  color: var(--ink-600);
}
/* Built, tested, reachable over the API today — a stronger claim than "planned",
   so it gets the brand colour rather than the grey. */
.nav-soon-tag.is-api { background: var(--brand-100); color: var(--brand-800); }

/* Tabbed panels. This lived only in Leave.html's own <style>, so the two pages
   added after it rendered all their panels stacked on top of each other — the
   markup pattern was shared but the behaviour that makes it work was not. */
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.sidebar-user {
  padding: 12px;
  border-top: 1px solid var(--ink-150);
  display: flex;
  align-items: center;
  gap: 10px;
}
.avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--brand-100);
  color: var(--brand-800);
  display: grid; place-items: center;
  font-weight: 600;
  font-size: 12px;
  flex-shrink: 0;
  overflow: hidden;
}
.avatar.lg { width: 56px; height: 56px; font-size: 18px; }
.avatar.sm { width: 24px; height: 24px; font-size: 10px; }
.sidebar-user .who { min-width: 0; }
.sidebar-user .who .name { font-weight: 600; font-size: 13px; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user .who .role { font-size: 11.5px; color: var(--ink-500); }

/* ---- Topbar ---- */
.crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-600);
}
.crumbs strong { color: var(--ink-900); font-weight: 600; }
.crumbs span.sep { color: var(--ink-300); }

.top-search {
  flex: 1;
  max-width: 480px;
  position: relative;
}
.top-search input {
  width: 100%;
  height: 34px;
  padding: 0 10px 0 34px;
  border-radius: var(--r-md);
  border: 1px solid var(--ink-200);
  background: var(--ink-50);
  color: var(--ink-800);
  font: inherit;
  font-size: 13px;
  transition: border-color 120ms, background 120ms;
}
.top-search input:focus { outline: none; border-color: var(--brand-500); background: var(--panel); }
.top-search .icon { position: absolute; left: 10px; top: 9px; color: var(--ink-500); }
.top-search kbd {
  position: absolute; right: 8px; top: 7px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 2px 5px;
  background: var(--panel);
  border: 1px solid var(--ink-200);
  border-radius: 4px;
  color: var(--ink-500);
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.icon-btn {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-600);
  position: relative;
}
.icon-btn:hover { background: var(--ink-100); color: var(--ink-900); }
.icon-btn .dot {
  position: absolute; top: 7px; right: 8px;
  width: 7px; height: 7px;
  background: var(--err-500);
  border-radius: 50%;
  border: 2px solid var(--panel);
}

.role-switcher {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--ink-100);
  border-radius: var(--r-md);
  padding: 3px;
  margin-left: 8px;
}
.role-switcher button {
  border: 0;
  background: transparent;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--ink-600);
  font-weight: 500;
}
.role-switcher button.active {
  background: var(--panel);
  color: var(--ink-900);
  font-weight: 600;
  box-shadow: var(--sh-sm);
}

/* ============================================================
   Page header
   ============================================================ */
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.page-head h1 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink-900);
  margin: 0;
  letter-spacing: -0.015em;
}
.page-head .sub {
  color: var(--ink-500);
  font-size: 13px;
  margin-top: 4px;
}
.page-actions { display: flex; gap: 8px; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--ink-200);
  background: var(--panel);
  color: var(--ink-800);
  font-size: 13px;
  font-weight: 500;
  transition: all 120ms;
}
.btn:hover { background: var(--ink-100); border-color: var(--ink-300); }
.btn.primary {
  background: var(--brand-700);
  color: white;
  border-color: var(--brand-700);
}
.btn.primary:hover { background: var(--brand-800); border-color: var(--brand-800); }
.btn.accent {
  background: var(--accent-600);
  border-color: var(--accent-700);
  color: var(--ink-900);
}
.btn.accent:hover { background: var(--accent-700); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--ink-100); }
.btn.danger { color: var(--err-700); }
.btn.sm { height: 28px; padding: 0 10px; font-size: 12px; }

/* ============================================================
   Cards & panels
   ============================================================ */
.card {
  background: var(--panel);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-lg);
  padding: 20px;
}
.card.tight { padding: 16px; }
.card.pad-lg { padding: 24px; }
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.card-head h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-900);
  margin: 0;
}
.card-head .meta { font-size: 12px; color: var(--ink-500); }

/* KPI card */
.kpi {
  padding: 18px;
  background: var(--panel);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-lg);
}
.kpi .label {
  font-size: 12px;
  color: var(--ink-500);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.kpi .value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: -0.02em;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.kpi .delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
}
.kpi .delta.up { color: var(--ok-700); background: var(--ok-100); }
.kpi .delta.down { color: var(--err-700); background: var(--err-100); }
.kpi .delta.flat { color: var(--ink-600); background: var(--ink-100); }

/* ============================================================
   Table
   ============================================================ */
.table-wrap { overflow-x: auto; }
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
table.data thead th {
  text-align: left;
  font-weight: 600;
  font-size: 11.5px;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 12px;
  background: var(--ink-50);
  border-bottom: 1px solid var(--ink-200);
  position: sticky;
  top: 0;
  white-space: nowrap;
}
table.data tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--ink-150);
  color: var(--ink-800);
  vertical-align: middle;
}
table.data tbody tr:hover { background: var(--ink-50); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td.num { font-variant-numeric: tabular-nums; text-align: right; }
table.data .cell-person { display: flex; align-items: center; gap: 10px; }
table.data .cell-person .who { min-width: 0; }
table.data .cell-person .who .name { font-weight: 500; color: var(--ink-900); }
table.data .cell-person .who .email { font-size: 11.5px; color: var(--ink-500); }

/* ============================================================
   Chips / pills / status
   ============================================================ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 500;
  background: var(--ink-100);
  color: var(--ink-700);
  white-space: nowrap;
}
.chip .swatch {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.chip.ok { background: var(--ok-100); color: var(--ok-700); }
.chip.warn { background: var(--warn-100); color: var(--warn-700); }
.chip.err { background: var(--err-100); color: var(--err-700); }
.chip.info { background: var(--info-100); color: var(--info-700); }
.chip.brand { background: var(--brand-100); color: var(--brand-800); }
.chip.accent { background: var(--accent-100); color: var(--accent-700); }

/* ============================================================
   Form
   ============================================================ */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-700);
}
.field input, .field select, .field textarea {
  height: 36px;
  padding: 0 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--ink-200);
  background: var(--panel);
  color: var(--ink-900);
  font: inherit;
  font-size: 13px;
}
.field textarea { height: auto; padding: 8px 10px; min-height: 80px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px oklch(0.62 0.09 195 / 0.15);
}

/* ============================================================
   Grid helpers
   ============================================================ */
.grid { display: grid; gap: 16px; }
.g-cols-2 { grid-template-columns: repeat(2, 1fr); }
.g-cols-3 { grid-template-columns: repeat(3, 1fr); }
.g-cols-4 { grid-template-columns: repeat(4, 1fr); }
.g-cols-6 { grid-template-columns: repeat(6, 1fr); }
.g-2fr-1fr { grid-template-columns: 2fr 1fr; }
.g-3fr-1fr { grid-template-columns: 3fr 1fr; }

/* The grid helpers held their column counts at every width, so a laptop at a
   half-width window — or a projector at 1024 — pushed the page sideways rather
   than reflowing: measured, Payroll overflowed by 538px and Dashboard by 381.
   Collapsing here fixes every page at once, since they all use these helpers
   rather than rolling their own columns. */
@media (max-width: 1180px) {
  .g-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g-2fr-1fr, .g-3fr-1fr { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .g-cols-2, .g-cols-3, .g-cols-4, .g-cols-6 { grid-template-columns: minmax(0, 1fr); }
}
/* A grid item is min-width:auto by default, so a wide table inside one refuses
   to shrink below its content and blows the column out from the inside. This is
   the fix for that, not decoration. */
.grid > * { min-width: 0; }
.main { min-width: 0; }
/* Newer pages wrap wide tables in .table-wrap themselves. The older ones do
   not, and a bare table is what still pushed Payroll 538px sideways after the
   grids were fixed. Below 900px the layout is already one column, so letting
   the table scroll inside itself is strictly better than the whole page
   scrolling; above it, nothing changes. */
@media (max-width: 900px) {
  :not(.table-wrap) > table.data {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  /* Measured, not guessed: the largest single offender on Payroll was its row
     of header buttons refusing to wrap (941px inside a 403px column), and the
     same shape appears on Employees and Documents. These rows are already
     flex; they were simply never allowed to break. */
  .page-head, .page-actions, .filters, .toolbar { flex-wrap: wrap; }

  /* The same shape again, found by measuring the eight screens that still
     overflowed (HRMS-127): a tab strip, and the generic .row helper used for
     toolbars all over the product. Both are flex and neither could break. */
  .tabs, .row { flex-wrap: wrap; }

  /* A filter bar declared as fixed columns (`1fr auto auto auto auto auto`)
     cannot narrow past the sum of its autos. !important because these live in
     each page's own <style>, which loads after this file — the alternative is
     the same override repeated in every page that grows a filter bar. */
  .filters { grid-template-columns: 1fr !important; }

  /* A kanban board scrolls sideways as a BOARD. Letting it push the page
     instead moves the sidebar and the header off screen to show a column. */
  .board, #board { overflow-x: auto; }
}

.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; }
.mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mb-4 { margin-bottom: 4px; } .mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }
.text-mono { font-family: var(--font-mono); }
.text-num { font-variant-numeric: tabular-nums; }
.text-muted { color: var(--ink-500); }
.text-sm { font-size: 12px; }
.text-xs { font-size: 11.5px; }
.text-lg { font-size: 16px; }

/* Tabs */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--ink-200);
  margin-bottom: 20px;
}
.tabs button {
  border: 0;
  background: transparent;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-600);
  position: relative;
  margin-bottom: -1px;
}
.tabs button:hover { color: var(--ink-900); }
.tabs button.active {
  color: var(--brand-800);
  border-bottom: 2px solid var(--brand-700);
  font-weight: 600;
}

/* Progress */
.progress {
  height: 6px;
  background: var(--ink-150);
  border-radius: 10px;
  overflow: hidden;
}
.progress > span {
  display: block;
  height: 100%;
  background: var(--brand-700);
  border-radius: 10px;
}
.progress.accent > span { background: var(--accent-600); }
.progress.ok > span { background: var(--ok-500); }
.progress.warn > span { background: var(--warn-500); }

/* Divider */
hr.div { border: 0; border-top: 1px solid var(--ink-200); margin: 16px 0; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-300); }

/* Toolbar */
.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--panel);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-lg);
  margin-bottom: 16px;
}
.toolbar .field-inline {
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-md);
  background: var(--ink-50);
  font-size: 13px;
  color: var(--ink-800);
  min-width: 140px;
}

/* Avatar colors — deterministic-ish */
.avatar[data-c="1"] { background: oklch(0.90 0.05 195); color: oklch(0.35 0.10 195); }
.avatar[data-c="2"] { background: oklch(0.92 0.05 70);  color: oklch(0.45 0.13 70); }
.avatar[data-c="3"] { background: oklch(0.92 0.05 155); color: oklch(0.40 0.12 155); }
.avatar[data-c="4"] { background: oklch(0.92 0.05 300); color: oklch(0.42 0.14 300); }
.avatar[data-c="5"] { background: oklch(0.92 0.05 25);  color: oklch(0.45 0.15 25); }
.avatar[data-c="6"] { background: oklch(0.92 0.05 250); color: oklch(0.42 0.14 250); }
.avatar[data-c="7"] { background: oklch(0.92 0.05 100); color: oklch(0.42 0.13 100); }
.avatar[data-c="8"] { background: oklch(0.92 0.05 340); color: oklch(0.45 0.14 340); }

/* Utility */
.spacer { flex: 1; }
.hide { display: none !important; }

/* ---- Role-adaptive visibility -------------------------------------------
   ONE matrix, here, because every page that wrote its own wrote a different
   half of it: Payroll hid admin content from an employee but not from a
   manager, so a manager saw run creation and funding.

   This is a VIEW PREVIEW, never a permission boundary. The server gates every
   request against the real session, so hiding a control here changes what is
   offered, not what is allowed.

   Only the negative direction is stated. An earlier positive rule
   (`.employee-only { display: block }`) overrode `.grid` and flattened the
   employee dashboard's tile grid into a single column — showing an element
   must leave its own display mode alone. */
body[data-role="manager"] .admin-only,
body[data-role="employee"] .admin-only,
body[data-role="employee"] .manager-only { display: none !important; }
body:not([data-role="employee"]) .employee-only { display: none !important; }