/* GPUaaS CRM — application styles
 * Design system: Scandi Pine (see design.md)
 * Birch-white surfaces, oat warm canvas, one forest-pine accent.
 * Typography: Manrope (single family, tracked-out labels, tabular numerics).
 * One green (#4C7A55) is reserved for primary CTA interactions only.
 */

:root {
  /* Core palette ---------------------------------------------------- */
  --bg:        #F0EADD;   /* oat — page foundation */
  --surface:   #FBF5E8;   /* birch — cards, panels */
  --surface-2: #F5EFE2;   /* hover / inset */
  --surface-3: #EFE9DC;   /* active / pressed */
  --line:      #E0D9C8;   /* hairline */
  --line-2:    #D2C9B5;   /* slightly stronger hairline */

  --fg:        #1B1B1A;   /* charcoal — primary text */
  --fg-2:      #3D3C39;   /* mid text — bumped from #4A4946 for AAA contrast */
  --fg-3:      #5F5A4D;   /* secondary / labels — darkened from #8A8578 so
                             body/muted text clears WCAG AA (~5.2:1 on oat). */
  --fg-4:      #8A8578;   /* placeholder — the old taupe lives on here so
                             empty inputs still read as quietly suggestive. */

  --accent:    #4C7A55;   /* forest pine */
  --accent-h:  #5C8C66;   /* hover */
  --accent-d:  #3C6244;   /* pressed */
  --on-accent: #FBF5E8;   /* birch on accent */

  /* Functional / status — subdued earth tones, so pine remains the
     visually dominant accent. */
  --green: #4C7A55;       /* pine (success === accent) */
  --amber: #B8862B;       /* oak */
  --red:   #A8443A;       /* brick */
  --blue:  #5A7388;       /* slate */
  --violet:#7A6B8C;       /* heather */

  /* Legacy aliases — templates still use these names, so map them. */
  --ink:    var(--fg);
  --ink-2:  var(--fg-2);
  --muted:  var(--fg-3);
  --rule:   var(--line);
  --rule-2: var(--line-2);
  --paper:  var(--surface);
  --soft:   var(--surface-2);
  --soft-2: var(--surface-3);
  --bone:   var(--bg);
  --red-d:  #8C382F;
  --focus:  var(--accent);

  /* Typography ----------------------------------------------------- */
  --sans:    "Manrope", -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", Arial, sans-serif;
  --sans-c:  var(--sans);
  --serif:   var(--sans);
  --display: var(--sans);
  /* Code blocks still want a true monospaced face. */
  --mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Geometry ------------------------------------------------------- */
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 10px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: 0;
}

a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
  transition: color 120ms ease, border-color 120ms ease;
}
a:hover { color: var(--accent); border-bottom-color: var(--accent); }

h1, h2, h3, h4 {
  margin: 0 0 .25em 0;
  font-family: var(--sans);
  color: var(--fg);
  font-weight: 500;
  letter-spacing: -0.025em;
}
h1 { font-size: 34px; line-height: 1.1; letter-spacing: -0.03em; font-weight: 500; }
h2 { font-size: 22px; line-height: 1.2; font-weight: 500; }
h3 {
  font-size: 11px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-3);
  font-family: var(--sans);
}
h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--fg-3);
  font-weight: 500;
  font-family: var(--sans);
}

.mono { font-family: var(--sans); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.sans { font-family: var(--sans); }
.muted { color: var(--fg-3); }
.small { font-size: 12.5px; }
.tiny  { font-size: 11px; letter-spacing: .04em; }

::selection { background: var(--accent); color: var(--on-accent); }

/* ---------- Top bar ---------- */
.topbar {
  background: rgba(251, 245, 232, 0.78);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.topbar-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 14px 24px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; border-bottom: 0; }
.brand:hover { color: var(--fg); }
.brand-mark {
  width: 14px; height: 14px;
  background: var(--accent);
  display: inline-block;
  border-radius: 2px;
}
.brand-text {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.nav { display: flex; gap: 4px; }
/* Mobile hamburger toggle (hidden on desktop via default + checkbox is purely a state holder). */
.nav-toggle-cb { display: none; }
.nav-toggle { display: none; }
.nav a {
  border-bottom: 0;
  font-family: var(--sans);
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-3);
  padding: 6px 10px;
  border-radius: var(--r-sm);
  border-top: 0;
  transition: color 120ms ease, background 120ms ease;
}
.nav a:hover { color: var(--fg); background: var(--surface-2); }
.nav a.active { color: var(--fg); background: var(--surface-2); }

.topbar-right { display: inline-flex; align-items: center; gap: 12px; }
.bell {
  position: relative; border-bottom: 0;
  font-size: 16px; color: var(--fg-3);
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
}
.bell:hover { color: var(--fg); background: var(--surface-2); }
.bell-count {
  position: absolute; top: -2px; right: -2px;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--sans); font-size: 10px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  border-radius: 999px; padding: 1px 5px; min-width: 16px; text-align: center;
  line-height: 1.3;
}
.user-menu { position: relative; }
.user-menu summary {
  list-style: none; cursor: pointer;
  font-family: var(--sans); font-size: 13px;
  color: var(--fg);
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
}
.user-menu summary:hover { border-color: var(--line-2); }
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu-pop {
  position: absolute; right: 0; top: 110%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 14px;
  min-width: 220px;
  box-shadow: 0 8px 30px rgba(27, 27, 26, .08);
}
.link-button {
  background: none; border: 0; padding: 0;
  color: var(--accent); font-family: var(--sans); cursor: pointer;
}
.link-button:hover { color: var(--accent-h); }
.user-menu-link {
  display: block; margin: 8px 0 0;
  color: var(--fg);
  text-decoration: none; font-family: var(--sans);
  border-bottom: 0;
}
.user-menu-link:hover { color: var(--accent); }
.user-menu-pop form { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }

/* Inline nav dropdown (Admin menu): looks like a nav item, opens a pop. */
.admin-menu { position: relative; display: inline-block; }
.admin-menu > summary {
  list-style: none;
  cursor: pointer;
  /* Mirror the .nav a styling so it sits naturally inline. */
  color: var(--fg-2);
  font-family: var(--sans);
  font-size: 14px;
  padding: 6px 2px;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.admin-menu > summary::-webkit-details-marker { display: none; }
.admin-menu > summary:hover { color: var(--fg); }
.admin-menu.active > summary,
.admin-menu[open] > summary { color: var(--fg); font-weight: 500; }
.admin-menu .caret { font-size: 10px; line-height: 1; opacity: .7; }
.admin-menu[open] .caret { transform: translateY(1px); }

.admin-menu-pop {
  position: absolute;
  left: 0;
  top: 110%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 8px;
  min-width: 200px;
  box-shadow: 0 8px 30px rgba(27, 27, 26, .08);
  z-index: 50;
}
.admin-menu-link {
  display: block;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 14px;
  text-decoration: none;
}
.admin-menu-link:hover { background: var(--surface-2); color: var(--fg); }
.admin-menu-link.active { background: var(--surface-3); font-weight: 500; }

/* ---------- Row-level menus (table cells) ---------- */
/* Used by the user list to keep per-row actions compact: one chip per editable
   field (e.g. role) and one ⋯ trigger for the overflow actions menu. */
.row-menu { position: relative; display: inline-block; }
.row-menu > summary { list-style: none; cursor: pointer; }
.row-menu > summary::-webkit-details-marker { display: none; }

/* table.data uses overflow:hidden to clip row backgrounds at its rounded
   corners. That same clip eats any absolutely-positioned popover inside the
   table (the .row-menu-pop dropdowns). When a dropdown is open we relax the
   clip so the popover can extend past the table edge; we also drop the
   surrounding card's clip the same way, in case some skin adds one. */
table.data:has(.row-menu[open]) { overflow: visible; }
.card:has(.row-menu[open]) { overflow: visible; }
/* Lift the open row above the rest so the popover never sits behind the
   next row's hover background. */
table.data tr:has(.row-menu[open]) { position: relative; z-index: 60; }

/* Role chip: looks like a quiet tag, opens a dropdown of the other roles. */
.role-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--fg);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 10px;
  line-height: 1.6;
  white-space: nowrap;
}
.role-chip:hover { background: var(--surface-3); }
.row-menu[open] > .role-chip { background: var(--surface-3); }
.role-chip-static { background: transparent; border-color: transparent; cursor: default; padding-left: 0; }
.role-chip .caret { font-size: 10px; opacity: .7; }

/* ⋯ overflow trigger: minimal, button-shaped, sits right-aligned in cells. */
.row-menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  font-size: 18px;
  color: var(--fg-2);
  background: transparent;
}
.row-menu-trigger:hover { background: var(--surface-2); color: var(--fg); }
.row-menu[open] > .row-menu-trigger { background: var(--surface-3); color: var(--fg); }

/* Popover: same chrome as .admin-menu-pop but anchored per-side. */
.row-menu-pop {
  position: absolute;
  top: calc(100% + 4px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 6px;
  min-width: 180px;
  box-shadow: 0 8px 30px rgba(27, 27, 26, .10);
  z-index: 50;
}
.row-menu-pop-left  { left: 0; }
.row-menu-pop-right { right: 0; }

.row-menu-form { display: block; margin: 0; }
.row-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-family: var(--sans);
  font-size: 14px;
  color: var(--fg);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.row-menu-item:hover { background: var(--surface-2); }
.row-menu-item-danger { color: var(--red); }
.row-menu-item-danger:hover { background: rgba(168, 68, 58, .08); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 18px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--fg);
  font-family: var(--sans);
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--r-md);
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  text-decoration: none;
}
.btn:hover { background: var(--surface-2); border-color: var(--fg-3); }
.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
  font-weight: 600;
  padding: 12px 20px;
}
.btn-primary:hover { background: var(--accent-h); border-color: var(--accent-h); }
.btn-primary:active { background: var(--accent-d); border-color: var(--accent-d); }
.btn-quiet {
  background: transparent;
  border-color: var(--line);
  color: var(--fg-2);
}
.btn-quiet:hover { background: var(--surface-2); color: var(--fg); border-color: var(--line-2); }
.btn-sm { padding: 6px 12px; font-size: 12.5px; border-radius: var(--r-sm); }
.btn-link {
  background: none; border: 0;
  color: var(--fg-2);
  text-decoration: none;
  cursor: pointer; padding: 0;
  font-family: var(--sans);
  font-size: 13px;
}
.btn-link:hover { color: var(--accent); text-decoration: none; }

/* ---------- Forms ---------- */
label {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 10.5px;
  color: var(--fg-3);
  display: block;
  margin: 0 0 8px 0;
  font-weight: 500;
}
input[type="text"], input[type="email"], input[type="url"], input[type="password"],
input[type="number"], input[type="date"], select, textarea {
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 10px 12px;
  border-radius: var(--r-md);
  width: 100%;
  transition: border-color 120ms ease, background 120ms ease;
}
input::placeholder, textarea::placeholder { color: var(--fg-4); }
input:focus, select:focus, textarea:focus {
  outline: 0;
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(76, 122, 85, 0.12);
}
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--accent);
}
textarea { font-family: var(--sans); line-height: 1.6; }
input[type="number"] { font-family: var(--sans); font-variant-numeric: tabular-nums; }
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%238A8578' d='M2 4l4 4 4-4z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

.field { margin-bottom: 16px; }

/* Unit-switch row: a label-shaped header with a tiny "⇄ Other" link on the
   right. Inherits the exact same metrics as a normal <label> so the input
   directly below sits at the SAME baseline as sibling fields in the grid,
   regardless of which row this lives in. nowrap on both halves prevents
   wrapping at narrow column widths. */
.unit-toggle-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px 0;          /* matches `label { margin: 0 0 8px 0 }` */
  font-family: var(--sans);
  font-size: 10.5px;          /* matches label */
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  line-height: 1.4;           /* gives the row the same height as a 1-line label */
  color: var(--fg-3);
  min-width: 0;               /* lets the label ellipsis kick in if forced */
}
.unit-toggle-row > label {
  display: inline;            /* override default `display:block` for flex use */
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  min-width: 0;
}
.unit-toggle-link {
  font: inherit;              /* match label typography exactly */
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: var(--red, #a8443a);
  white-space: nowrap;        /* never wrap the switch action */
  flex: 0 0 auto;             /* don't shrink — label ellipses first */
}
.unit-toggle-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.unit-toggle-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.help { color: var(--fg-3); font-size: 12px; margin-top: 6px; }
.error { color: var(--red); font-size: 12.5px; margin-top: 6px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
.form-grid .span-2 { grid-column: span 2; }

/* ---------- Main + cards ---------- */
.main { max-width: 1240px; margin: 0 auto; padding: 40px 24px 96px; }
.flashbar { max-width: 1240px; margin: 16px auto 0; padding: 0 24px; }
.flash {
  padding: 11px 16px;
  border: 1px solid var(--line);
  background: var(--surface);
  margin-bottom: 8px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--fg);
  border-radius: var(--r-md);
}
.flash-success { border-color: rgba(76, 122, 85, .35);  color: var(--accent); background: rgba(76, 122, 85, .08); }
.flash-error   { border-color: rgba(168, 68, 58, .35);  color: var(--red);   background: rgba(168, 68, 58, .07); }
.flash-warning { border-color: rgba(184, 134, 43, .35); color: var(--amber); background: rgba(184, 134, 43, .07); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 24px;
  border-radius: var(--r-lg);
}
.card-tight { padding: 14px 16px; border-radius: var(--r-md); }
.card + .card { margin-top: 16px; }

.page-header { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 0 0 28px 0; }
.page-header .meta { color: var(--fg-3); font-family: var(--sans); font-size: 13px; }

/* ---------- Tables ---------- */
table.data {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
}
table.data th, table.data td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 13px;
}
table.data th {
  font-family: var(--sans);
  text-transform: uppercase;
  font-size: 10.5px;
  color: var(--fg-3);
  letter-spacing: 0.18em;
  font-weight: 500;
  border-bottom-color: var(--line-2);
  background: transparent;
}
table.data td.mono { white-space: nowrap; }
table.data td.num, table.data th.num {
  text-align: right;
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
}
table.data tbody tr { transition: background 100ms ease; }
table.data tbody tr:hover { background: var(--surface-2); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data a { border-bottom: 0; color: var(--fg); }
table.data a:hover { color: var(--accent); }
/* Sortable column headers: clickable anchors that look like header text */
/* until hover. Active column shows a muted arrow indicator. */
table.data th a.sort-link { color: inherit; cursor: pointer; user-select: none; }
table.data th a.sort-link:hover { color: var(--accent); }
table.data th .sort-arrow { color: var(--muted); margin-left: 2px; font-size: 11px; }

/* ---------- KPI / metric cards ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; }
.kpi-grid.kpi-grid-5 { grid-template-columns: repeat(5, 1fr); }
.kpi-grid.kpi-grid-6 { grid-template-columns: repeat(6, 1fr); }
.kpi {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 20px 22px;
  border-radius: var(--r-lg);
}
.kpi .label {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--fg-3);
  font-size: 10.5px;
  font-weight: 500;
}
.kpi .value {
  font-family: var(--sans);
  font-size: 28px;
  line-height: 1.05;
  margin-top: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  letter-spacing: -0.025em;
  font-weight: 500;
}
.kpi .sub { color: var(--fg-3); font-family: var(--sans); font-size: 12.5px; margin-top: 8px; }
.kpi.kpi-accent .value { color: var(--accent); }

/* ---------- Status pills ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 10.5px;
  font-weight: 500;
  padding: 3px 10px 3px 9px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
}
.pill::before { content: ""; width: 6px; height: 6px; background: currentColor; border-radius: 999px; }
.s-draft       { color: var(--fg-3); }
.s-qualified   { color: var(--blue); }
.s-proposal    { color: var(--violet); }
.s-poc         { color: var(--amber); }
.s-won         { color: var(--accent); }
.s-paid        { color: var(--accent); background: rgba(76, 122, 85, .10); }
.s-lost        { color: var(--red); }
.s-forecast    { color: var(--amber); background: rgba(184, 134, 43, .08); border-style: dashed; }
.s-projected   { color: var(--violet); background: rgba(124, 92, 168, .08); border-style: dashed; }
.s-pipeline    { color: var(--blue); background: rgba(90, 115, 136, .10); border-style: dashed; }

/* ---------- Rules ---------- */
.rule {
  display: block;
  height: 1px;
  background: var(--line);
  margin: 20px 0;
}
.footer { max-width: 1240px; margin: 24px auto 40px; padding: 0 24px; }

/* ---------- Login / auth ---------- */
.auth-wrap {
  min-height: 100vh;
  display: grid; place-items: center;
  background:
    radial-gradient(ellipse at top, rgba(76, 122, 85, 0.10), transparent 60%),
    var(--bg);
}
.auth-card {
  width: 100%; max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 36px 36px 28px;
  border-radius: var(--r-lg);
  box-shadow: 0 8px 30px rgba(27, 27, 26, .05);
}
.auth-card h1 { font-size: 24px; letter-spacing: -0.025em; font-weight: 500; }
.auth-mark {
  width: 28px; height: 4px;
  background: var(--accent);
  margin-bottom: 22px;
  border-radius: 2px;
}

/* ---------- Calc panel (deal create + detail) ---------- */
.calc-shell { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: start; }
.calc-form .form-grid { gap: 14px 20px; }
.calc-totals { position: sticky; top: 88px; }
.calc-totals .kpi-grid { grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.calc-totals .kpi .value { font-size: 22px; }
.calc-totals .kpi-tall .value { font-size: 30px; }
.calc-svg { width: 100%; height: 260px; display: block; }
.combobox { position: relative; }
.combobox-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  max-height: 240px; overflow: auto;
  z-index: 5; display: none;
  box-shadow: 0 8px 24px rgba(27, 27, 26, .08);
}
.combobox-results.open { display: block; }
.combobox-results .item {
  padding: 9px 12px; cursor: pointer;
  font-family: var(--sans); font-size: 13px;
  border-bottom: 1px solid var(--line);
  color: var(--fg);
}
.combobox-results .item:last-child { border-bottom: 0; }
.combobox-results .item:hover, .combobox-results .item.active { background: var(--surface-2); }
.combobox-results .item.create { color: var(--accent); font-weight: 600; }
.combobox-results .empty { padding: 10px 12px; color: var(--fg-3); font-family: var(--sans); font-size: 13px; }

/* ---------- Detail page layout ---------- */
.detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: start; }
.side-card .row {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--sans); font-size: 13px;
}
.side-card .row:last-child { border-bottom: 0; }
.side-card .row .k {
  color: var(--fg-3);
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 10.5px;
}

.tabbar {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--line);
  margin: 32px 0 20px;
}
.tabbar a {
  font-family: var(--sans);
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-3);
  border-bottom: 2px solid transparent;
  padding: 10px 14px;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.tabbar a:hover { color: var(--fg); background: var(--surface-2); }
.tabbar a.active { color: var(--fg); border-bottom-color: var(--accent); }

.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.timeline li:last-child { border-bottom: 0; }
.timeline .who { font-family: var(--sans); font-size: 12px; color: var(--fg-3); letter-spacing: 0.12em; text-transform: uppercase; }
.timeline .body {
  font-family: var(--sans); font-size: 14px;
  margin-top: 8px; white-space: pre-wrap;
  color: var(--fg);
}

.attachments-list { list-style: none; padding: 0; margin: 0; }
.attachments-list li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--sans); font-size: 13px;
}
.attachments-list li:last-child { border-bottom: 0; }

/* ---------- Chart ---------- */
.chart-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 18px 20px;
  border-radius: var(--r-lg);
}
.chart-wrap .legend {
  display: flex; gap: 18px;
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 10.5px;
  color: var(--fg-3);
  margin-bottom: 10px;
}
.chart-wrap .legend .sw {
  width: 10px; height: 10px;
  display: inline-block; vertical-align: -1px;
  margin-right: 6px;
  border-radius: 2px;
}

/* ---------- Empty state ---------- */
.empty-state { padding: 32px 8px 22px; max-width: 720px; }
.empty-state .empty-title {
  font-family: var(--sans);
  font-size: 20px; line-height: 1.3;
  color: var(--fg);
  margin-bottom: 12px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.empty-state .empty-body { color: var(--fg-2); font-size: 14px; line-height: 1.7; margin: 0 0 20px; }
.empty-state .empty-body em { font-style: normal; color: var(--fg); }
.empty-state .empty-body strong { color: var(--fg); font-weight: 600; }
.empty-state .empty-subtitle {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 10.5px;
  color: var(--fg-3);
  margin-bottom: 12px;
}
.empty-state .empty-upcoming { border-top: 1px solid var(--line); padding-top: 18px; }
.empty-state .empty-upcoming ul { list-style: none; margin: 0; padding: 0; }
.empty-state .empty-upcoming li {
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  color: var(--fg);
}
.empty-state .empty-upcoming li:last-child { border-bottom: 0; }
.empty-state .empty-upcoming li a { color: var(--fg); border-bottom: 1px solid var(--line-2); }
.empty-state .empty-upcoming li a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- Modal ---------- */
.modal {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 8vh 16px; overflow-y: auto;
}
.modal[hidden] { display: none; }
.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(27, 27, 26, 0.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.modal-dialog {
  position: relative;
  width: 100%; max-width: 640px;
  padding: 28px 30px 24px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px rgba(27, 27, 26, .18);
}
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.modal-header h3 { margin: 0; font-family: var(--sans); font-weight: 500; color: var(--fg); text-transform: none; letter-spacing: -0.015em; font-size: 19px; }
.modal-dialog .field { margin: 0; }
.modal-dialog .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.modal-dialog .span-2 { grid-column: span 2; }
body.modal-open { overflow: hidden; }
@media (max-width: 640px) {
  .modal-dialog .form-grid { grid-template-columns: 1fr; }
  .modal-dialog .span-2 { grid-column: span 1; }
}

/* ---------- Inventory board ---------- */
.inventory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}
.inventory-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 22px 22px 18px;
  text-decoration: none;
  color: var(--fg);
  transition: border-color 140ms ease, transform 140ms ease, background 140ms ease;
  position: relative;
  border-radius: var(--r-lg);
}
.inventory-card:hover {
  border-color: var(--line-2);
  background: var(--surface-2);
  transform: translateY(-1px);
}
.inventory-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}
.inventory-card-gpu {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--fg);
}
.inventory-card-supplier {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--fg-3);
  margin-top: 4px;
}
.inventory-card-figure {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}
.inventory-card-count {
  font-family: var(--sans);
  font-size: 34px;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  letter-spacing: -0.025em;
}
.inventory-card-unit {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 10.5px;
  color: var(--fg-3);
  font-weight: 500;
}
.inventory-card-nodes {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--fg-3);
  margin-left: auto;
}
.inventory-card-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 18px;
  margin: 0 0 12px;
}
.inventory-card-specs > div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.inventory-card-specs dt {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 10px;
  color: var(--fg-3);
  font-weight: 500;
  margin: 0;
}
.inventory-card-specs dd {
  margin: 0;
  font-family: var(--sans);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.inventory-card-specs .ib-yes { color: var(--accent); font-weight: 600; }
.inventory-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 4px;
}

/* responsive */
@media (max-width: 1200px) {
  .kpi-grid.kpi-grid-5 { grid-template-columns: repeat(3, 1fr); }
  .kpi-grid.kpi-grid-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .calc-shell, .detail-grid { grid-template-columns: 1fr; }
  .kpi-grid,
  .kpi-grid.kpi-grid-5,
  .kpi-grid.kpi-grid-6 { grid-template-columns: repeat(2, 1fr); }
  .form-grid { grid-template-columns: 1fr; }
  .inventory-grid { grid-template-columns: 1fr; }

  /* Hamburger replaces the inline nav. Topbar becomes a flex row so
     brand + hamburger + right-side actions stay on one line, and the
     nav drops down as a full-width panel when toggled. */
  .topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    position: relative;
  }
  .brand { margin-right: auto; }
  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 36px; height: 36px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    cursor: pointer;
    box-sizing: border-box;
    flex: 0 0 auto;
    order: 2;  /* sit between brand (order:0 default) and topbar-right */
  }
  .topbar-right { order: 3; }
  .nav-toggle-bar {
    display: block;
    height: 2px;
    background: var(--fg);
    border-radius: 1px;
    transition: transform 160ms ease, opacity 160ms ease;
  }
  .nav-toggle-cb:checked ~ .nav-toggle .nav-toggle-bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .nav-toggle-cb:checked ~ .nav-toggle .nav-toggle-bar:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle-cb:checked ~ .nav-toggle .nav-toggle-bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
  /* Nav panel: hidden by default, drops below the topbar when open. */
  .nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    padding: 8px 12px 14px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 8px 30px rgba(27, 27, 26, 0.08);
    z-index: 49;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
  }
  .nav-toggle-cb:checked ~ .nav { display: flex; }
  .nav a {
    padding: 12px 12px;
    font-size: 15px;
    border-radius: var(--r-sm);
  }
  /* Admin submenu: render inline inside the panel instead of a floating pop. */
  .nav .admin-menu { display: block; width: 100%; }
  .nav .admin-menu > summary { padding: 12px 12px; font-size: 15px; }
  .nav .admin-menu-pop {
    position: static;
    box-shadow: none;
    border: 0;
    padding: 4px 0 4px 16px;
    min-width: 0;
  }
  .nav .admin-menu-link { padding: 10px 12px; font-size: 14px; }
  /* Right side: trim chrome so brand + hamburger + essentials fit. */
  .topbar-right { gap: 6px; }
  .topbar-right .btn-primary {
    padding: 6px 10px;
    font-size: 12px;
  }
  /* User menu pop: don't let it slip off-screen to the right. */
  .user-menu-pop {
    right: 0;
    min-width: 200px;
    max-width: calc(100vw - 32px);
  }
}
/* Very narrow phones: hide the brand text and the "+ New deal" label
   so the topbar stays single-row even with the hamburger + user menu. */
@media (max-width: 480px) {
  .brand-text { display: none; }
  .topbar-right .btn-primary {
    font-size: 0;  /* hide the text but keep the button as an icon */
    padding: 6px 8px;
    line-height: 1;
  }
  .topbar-right .btn-primary::before {
    content: "+";
    font-size: 16px;
    font-weight: 600;
  }
  .topbar-inner { padding: 10px 12px; }
  .user-menu summary { padding: 6px 8px; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* Phone breakpoint: stack KPI cards 1-up, allow page-header to wrap,
   let dense data tables scroll horizontally instead of crushing columns. */
@media (max-width: 640px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .page-header > div { width: 100%; }
  .kpi-grid,
  .kpi-grid.kpi-grid-5,
  .kpi-grid.kpi-grid-6 { grid-template-columns: 1fr; gap: 12px; }
  .kpi { padding: 16px 18px; }
  .tabbar {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .tabbar a { white-space: nowrap; }
  table.data,
  .data-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .chart-wrap { padding: 14px 12px; }
  .tier-legend { gap: 10px 16px; padding: 10px 12px; font-size: 12px; }
}

/* ─── Paste-spec quick-fill ─── */
.paste-spec textarea {
  width: 100%;
  border: 1px dashed var(--line-2);
  background: var(--surface-2);
  padding: 10px 12px;
  resize: vertical;
  min-height: 70px;
  color: var(--fg);
  font-family: var(--mono);
  font-size: 13px;
  border-radius: var(--r-md);
}
.paste-spec textarea:focus {
  border-color: var(--accent);
  background: var(--surface);
  outline: none;
}

/* ─── Storage total readout ─── */
.storage-total {
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  font-size: 13.5px;
  letter-spacing: 0;
  color: var(--fg);
  border-radius: var(--r-sm);
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
}

/* ─── Country combobox + region chip + quick-picks ─── */
.combobox-country .combobox-results .item .flag {
  margin-right: 6px;
  font-size: 15px;
  vertical-align: -1px;
}
.country-quickpicks {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.country-quickpicks .quickpick {
  font: 12px/1 var(--sans);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 7px 11px;
  cursor: pointer;
  border-radius: var(--r-sm);
  color: var(--fg-2);
  transition: background 100ms ease, border-color 100ms ease, color 100ms ease;
}
.country-quickpicks .quickpick:hover {
  background: var(--surface-2);
  border-color: var(--line-2);
  color: var(--fg);
}
.country-quickpicks .quickpick .flag { margin-right: 4px; vertical-align: -1px; }

.region-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  font-family: var(--sans);
  font-size: 13.5px;
  min-height: 38px;
  color: var(--fg);
  border-radius: var(--r-sm);
}
.region-chip .flag { font-size: 18px; }
.region-chip .region-name { font-weight: 600; color: var(--fg); }
.region-chip .muted { font-size: 12px; color: var(--fg-3); }

/* ─── Inventory card location row ─── */
.inventory-card-loc {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 10px;
  padding: 6px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--fg-2);
}
.inventory-card-loc .flag { font-size: 16px; }

/* ── Public widget toggle ─────────────────────────── */
.public-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
  color: var(--fg-2);
}
.public-toggle input[type="checkbox"] {
  margin-top: 3px;
  width: auto;
}
.pill-public {
  background: rgba(76, 122, 85, .10);
  color: var(--accent);
  border-color: rgba(76, 122, 85, .35);
}

/* Inquiry status pills */
.pill.s-new       { background: rgba(184, 134, 43, .10); color: var(--amber); border-color: rgba(184, 134, 43, .35); }
.pill.s-contacted { background: rgba(90, 115, 136, .10); color: var(--blue);  border-color: rgba(90, 115, 136, .35); }
.pill.s-qualified { background: rgba(76, 122, 85, .10);  color: var(--accent); border-color: rgba(76, 122, 85, .35); }
.pill.s-closed    { background: var(--surface-2); color: var(--fg-3); border-color: var(--line-2); }
.pill.s-spam      { background: rgba(168, 68, 58, .10);  color: var(--red);   border-color: rgba(168, 68, 58, .35); }

/* ---------- Docs ---------- */
.docs-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
@media (max-width: 800px) {
  .docs-shell { grid-template-columns: 1fr; }
}
.docs-nav {
  position: sticky;
  top: 88px;
  padding: 16px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.docs-nav-label {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 14px;
  padding: 0 8px;
  font-weight: 500;
}
.docs-nav ul { list-style: none; margin: 0; padding: 0; }
.docs-nav li { margin: 2px 0; }
.docs-nav a {
  display: block;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  color: var(--fg-2);
  text-decoration: none;
  font-size: 13.5px;
  border-bottom: 0;
  transition: background 100ms ease, color 100ms ease;
}
.docs-nav a:hover { background: var(--surface-2); color: var(--fg); }
.docs-nav a.active {
  background: var(--surface-2);
  color: var(--fg);
  font-weight: 600;
}

.prose {
  max-width: 760px;
  line-height: 1.75;
  font-size: 15px;
  color: var(--fg);
}
.prose h1 {
  font-size: 32px; margin: 0 0 16px; line-height: 1.15;
  letter-spacing: -0.03em;
  font-weight: 500;
  font-family: var(--sans);
  color: var(--fg);
  text-transform: none;
}
.prose h2 {
  font-size: 20px; margin: 40px 0 12px; line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: 500;
  font-family: var(--sans);
  color: var(--fg);
  text-transform: none;
}
.prose h3 {
  font-size: 15px; margin: 30px 0 10px;
  letter-spacing: -0.01em;
  font-weight: 600;
  font-family: var(--sans);
  color: var(--fg);
  text-transform: none;
}
.prose p, .prose ul, .prose ol, .prose table { margin: 0 0 18px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin: 5px 0; }
.prose a { color: var(--accent); border-bottom: 1px solid transparent; }
.prose a:hover { border-bottom-color: var(--accent); }
.prose code {
  font-family: var(--mono);
  font-size: 12.5px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: 1px 6px;
  border-radius: var(--r-sm);
  color: var(--fg);
}
.prose pre {
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--fg);
  padding: 16px 18px;
  border-radius: var(--r-md);
  overflow-x: auto;
  font-size: 12.5px;
  line-height: 1.65;
  margin: 0 0 20px;
}
.prose pre code { background: transparent; padding: 0; border: 0; color: inherit; }
.prose table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.prose th, .prose td {
  border: 1px solid var(--line);
  padding: 9px 13px;
  text-align: left;
  vertical-align: top;
}
.prose th { background: var(--surface-2); font-weight: 500; color: var(--fg-2); font-family: var(--sans); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.18em; }
.prose hr { border: none; border-top: 1px solid var(--line); margin: 36px 0; }
.prose blockquote {
  border-left: 3px solid var(--accent);
  margin: 0 0 20px;
  padding: 6px 18px;
  color: var(--fg-2);
}

/* Contact list (company detail sidebar) */
.contact-list { color: var(--fg); }
.contact-list li { border-top-color: var(--line) !important; }
.contact-list li:first-child { border-top: 0 !important; }

/* ---------- Commission module ---------- */

.subnav {
  display: flex;
  gap: 18px;
  margin-top: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.subnav a {
  color: var(--fg-2);
  text-decoration: none;
  padding: 4px 2px;
  border-bottom: 2px solid transparent;
}
.subnav a:hover { color: var(--fg); }
.subnav a.active {
  color: var(--fg);
  border-bottom-color: var(--accent);
  font-weight: 500;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 8px 0;
}
.data-table th,
.data-table td {
  border-bottom: 1px solid var(--line);
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
}
.data-table thead th {
  background: var(--surface-2);
  font-weight: 500;
  color: var(--fg-2);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.data-table tfoot td { font-weight: 500; background: var(--surface-2); }
.data-table .num,
.data-table td.num,
.data-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table tr:hover td { background: var(--surface-2); }

.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 8px 0 20px;
}

/* ---------- Commission overview KPI strip ----------
   5 confidence-tiered tiles, no wrap on a normal admin viewport. Each tile
   carries a top-edge accent stripe that maps 1:1 to the status pill colours
   used in the per-user table and detail tables, so the eye can connect the
   summary number to the rows below without reading any prose. The first
   two tiles (Pending / Paid) carry no stripe — they're the only "real money"
   tiers and earn their visual weight from sheer plainness. */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 4px 0 22px;
}
.kpi-strip .kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 18px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.kpi-strip .kpi::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: transparent;
}
.kpi-strip .kpi-tier-forecast::before  { background: var(--amber);  background-image: repeating-linear-gradient(90deg, var(--amber) 0 6px, transparent 6px 10px); }
.kpi-strip .kpi-tier-projected::before { background: var(--violet); background-image: repeating-linear-gradient(90deg, var(--violet) 0 6px, transparent 6px 10px); }
.kpi-strip .kpi-tier-pipeline::before  { background: var(--blue);   background-image: repeating-linear-gradient(90deg, var(--blue)  0 6px, transparent 6px 10px); }
.kpi-strip .kpi-label {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--fg-3);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
}
.kpi-strip .kpi-value {
  font-family: var(--sans);
  font-size: 24px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  letter-spacing: -0.02em;
  font-weight: 500;
  word-break: break-word;
}
.kpi-strip .kpi-hint {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--fg-3);
  line-height: 1.3;
}

/* Compact legend strip below the KPI row — replaces the dense prose
   explanation. Three coloured chips, one phrase each, scannable in
   a single glance. */
.tier-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 22px;
  padding: 12px 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin: 0 0 22px;
  font-size: 12.5px;
  color: var(--fg-2);
}
.tier-legend .tier-item { display: inline-flex; align-items: center; gap: 8px; }
.tier-legend .tier-dot {
  width: 10px; height: 10px;
  border-radius: 2px;
  background-image: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px);
  flex: 0 0 auto;
}
.tier-legend .tier-forecast  { color: var(--amber); }
.tier-legend .tier-projected { color: var(--violet); }
.tier-legend .tier-pipeline  { color: var(--blue); }
.tier-legend .tier-label {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--fg);
}
.tier-legend .tier-desc { color: var(--fg-2); }

/* On narrow viewports the strip collapses to 3+2 then 2+2+1, never
   1-per-row which would obscure the comparison the strip is built for. */
@media (max-width: 1100px) {
  .kpi-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .kpi-strip { grid-template-columns: 1fr; gap: 10px; }
  .kpi-strip .kpi { padding: 14px 16px 12px; }
  .kpi-strip .kpi-value { font-size: 22px; }
}

/* ---------- Month picker (pay-run filter) ----------
   A single pill: ‹ prev | "May 2026" (click to open native picker) | next ›
   The native <input type="month"> is invisibly stretched over the display
   span so the click target stays large and the browser's picker still opens.
   An optional "Today" chip jumps back to the current month. */
.month-picker {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  background: var(--panel, #fff);
  border: 1px solid var(--line, #E3E3DE);
  border-radius: 999px;
  padding: 4px;
  font-family: var(--sans);
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
  margin: 0 0 18px;
}
.month-picker-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  color: var(--ink, #2A2A28);
  text-decoration: none;
  font-size: 18px;
  line-height: 1;
  transition: background 120ms ease, color 120ms ease;
}
.month-picker-nav:hover {
  background: var(--ink, #2A2A28);
  color: #fff;
}
.month-picker-field {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 168px;
  height: 32px;
  margin: 0;
}
.month-picker-display {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--bg, #F6F4EE);
  color: var(--ink, #2A2A28);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  justify-content: center;
  pointer-events: none;
}
.month-picker-display::before {
  content: "";
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 2v3M17 2v3M3 9h18M5 5h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 2v3M17 2v3M3 9h18M5 5h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
  opacity: 0.75;
  flex-shrink: 0;
}
.month-picker-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  padding: 0;
  z-index: 1;
}
.month-picker-input::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}
.month-picker-field:hover .month-picker-display,
.month-picker-input:focus + .month-picker-display {
  background: var(--ink, #2A2A28);
  color: #fff;
}
.month-picker-field:focus-within {
  outline: 2px solid rgba(42,42,40,0.25);
  outline-offset: 2px;
  border-radius: 999px;
}
.month-picker-today {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  margin-left: 4px;
  border-radius: 999px;
  background: transparent;
  color: var(--muted, #6B6B66);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px dashed var(--line, #E3E3DE);
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.month-picker-today:hover {
  background: var(--ink, #2A2A28);
  color: #fff;
  border-color: var(--ink, #2A2A28);
}

.form-errors {
  background: #FFEEEC;
  border: 1px solid #D77;
  color: #8A2020;
  padding: 10px 14px;
  border-radius: 6px;
  margin: 10px 0;
  font-size: 13px;
}
.form-errors ul { margin: 4px 0 0 18px; padding: 0; }

.messages { list-style: none; padding: 0; margin: 0 0 16px; }
.messages .msg {
  padding: 10px 14px;
  border-radius: 6px;
  margin-bottom: 8px;
  font-size: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.messages .msg-success { background: #E8F1E8; border-color: #B4D1B7; color: #2C5C36; }
.messages .msg-error   { background: #FFEEEC; border-color: #E5B0AC; color: #8A2020; }
.messages .msg-warning { background: #FFF5E0; border-color: #E6CF9C; color: #6E4A14; }

.action-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

/* ---------- Impersonation banner ---------- */
/* Loud, unmistakeable red bar so an admin never forgets they are signed
   in as someone else. Sits ABOVE the topbar so it is the first thing
   visible on every page. */
.impersonation-banner {
  background: #B91C1C;
  color: #FFF;
  padding: 10px 20px;
  text-align: center;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-size: 14px;
  letter-spacing: 0.01em;
}
.impersonation-banner strong { color: #FFF; }
.impersonation-banner-form { margin: 0; display: inline; }
.impersonation-stop-btn {
  background: #FFF;
  color: #B91C1C;
  border: 1px solid #FFF;
  font-weight: 600;
  cursor: pointer;
}
.impersonation-stop-btn:hover {
  background: #F3F4F6;
  color: #7F1D1D;
}