/* Opportunity Pipeline — light UI, system sans, quiet chrome. */
:root {
  --page: #f9f9f7;
  --surface: #fcfcfb;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --muted: #898781;
  --grid: #e1e0d9;
  --baseline: #c3c2b7;
  --border: rgba(11, 11, 11, 0.10);
  --accent: #2a78d6;
  --accent-strong: #256abf;
  --accent-deep: #184f95;
  --navy: #101d33;
  --navy-2: #16233a;
  --seq-h: #1c5cab;
  --seq-m: #3987e5;
  --seq-l: #86b6ef;
  --seq-none: #d9d8d2;
  --good: #0ca30c;
  --good-text: #056805;
  --warning: #fab219;
  --serious: #ec835a;
  --critical: #d03b3b;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(11, 11, 11, 0.04);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--page);
  color: var(--ink);
}
a { color: var(--accent-strong); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 21px; font-weight: 650; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: 14px; font-weight: 650; margin: 0; }

/* ---------------------------------------------------------------- shell */
.shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 236px; flex: 0 0 236px;
  background: var(--navy);
  color: #b8c2d4;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.brand { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 16px 14px 12px; }
.brand-plate {
  background: #fff; border-radius: 9px; padding: 10px 12px;
  display: grid; place-items: center;
}
.brand-plate img { width: 100%; max-width: 172px; height: auto; display: block; }
.brand-app-name {
  font-size: 12.5px; font-weight: 650; color: #fff; text-align: center;
  letter-spacing: 0.03em;
}
.topbar-plate {
  background: #fff; border-radius: 7px; padding: 5px 9px;
  display: inline-flex; align-items: center;
}
.topbar-plate img { height: 17px; width: auto; display: block; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--accent); color: #fff;
  display: grid; place-items: center; flex: 0 0 auto;
}
.brand-mark.big { width: 44px; height: 44px; border-radius: 12px; margin: 0 auto 10px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-co { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #8494ad; font-weight: 600; }
.brand-app { font-size: 13.5px; font-weight: 650; color: #fff; }
.nav { display: flex; flex-direction: column; padding: 4px 10px 12px; gap: 1px; flex: 1; }
.nav a {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; border-radius: 7px;
  color: #b8c2d4; font-size: 13px; font-weight: 500;
}
.nav a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; text-decoration: none; }
.nav a.active { background: rgba(57, 135, 229, 0.22); color: #fff; }
.nav a.sub { padding: 5px 10px 5px 35px; font-size: 12.5px; }
.nav svg { flex: 0 0 auto; opacity: 0.75; }
.nav-label {
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: #6d7a93; padding: 14px 10px 4px; font-weight: 650;
}
.sidebar-foot { border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 12px 14px; }
.user-chip { display: flex; gap: 9px; align-items: center; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: #2b3b57; color: #fff; font-weight: 650; font-size: 13px;
  display: grid; place-items: center;
}
.user-meta { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.user-name { color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: 11px; color: #8494ad; text-transform: capitalize; }
.foot-actions { display: flex; gap: 12px; margin-top: 9px; align-items: center; }
.foot-actions a, .foot-actions .linklike {
  font-size: 12px; color: #8494ad; background: none; border: 0; padding: 0;
  cursor: pointer; font-family: inherit;
}
.foot-actions a:hover, .foot-actions .linklike:hover { color: #fff; text-decoration: none; }

/* neon sign-out */
.foot-actions .signout {
  color: #ff4040; font-weight: 650;
  text-shadow: 0 0 6px rgba(255, 64, 64, 0.85), 0 0 16px rgba(255, 40, 40, 0.5);
  animation: neon-pulse 2.6s ease-in-out infinite alternate;
}
.foot-actions .signout:hover {
  color: #ff6a6a;
  text-shadow: 0 0 8px rgba(255, 96, 96, 1), 0 0 22px rgba(255, 40, 40, 0.85),
               0 0 34px rgba(255, 40, 40, 0.5);
}
@keyframes neon-pulse {
  from { text-shadow: 0 0 5px rgba(255, 64, 64, 0.7), 0 0 12px rgba(255, 40, 40, 0.35); }
  to   { text-shadow: 0 0 8px rgba(255, 64, 64, 1), 0 0 20px rgba(255, 40, 40, 0.65); }
}

/* faint green glow — Export to Excel */
.btn.glow-green {
  border-color: #A6D9BB;
  box-shadow: 0 0 7px rgba(74, 190, 125, 0.38), 0 0 16px rgba(74, 190, 125, 0.2);
}
.btn.glow-green:hover {
  background: #f2faf5;
  box-shadow: 0 0 10px rgba(74, 190, 125, 0.55), 0 0 22px rgba(74, 190, 125, 0.32);
}
.nav a.glow-green {
  color: #8FE6B0;
  text-shadow: 0 0 6px rgba(110, 230, 160, 0.45), 0 0 14px rgba(80, 200, 130, 0.25);
}
.nav a.glow-green:hover { color: #C0F4D5; }
.nav a.glow-green svg { opacity: 0.95; }

/* neon blue primary buttons (Add opportunity) */
.btn-primary.glow-blue {
  animation: neon-pulse-blue 2.6s ease-in-out infinite alternate;
}
.btn-primary.glow-blue:hover {
  box-shadow: 0 0 12px rgba(57, 135, 229, 0.95), 0 0 30px rgba(42, 120, 214, 0.65);
  animation: none;
}
@keyframes neon-pulse-blue {
  from { box-shadow: 0 0 6px rgba(42, 120, 214, 0.5), 0 0 14px rgba(42, 120, 214, 0.28); }
  to   { box-shadow: 0 0 10px rgba(42, 120, 214, 0.95), 0 0 26px rgba(42, 120, 214, 0.55); }
}
@media (prefers-reduced-motion: reduce) {
  .foot-actions .signout, .btn-primary.glow-blue { animation: none; }
}

.content { flex: 1; padding: 24px 30px 48px; min-width: 0; }

/* ------------------------------------------------------------ page head */
.page-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
}
.page-sub { margin: 3px 0 0; color: var(--ink-2); font-size: 13px; }
.head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pill {
  background: var(--surface); border: 1px solid var(--border);
  padding: 5px 11px; border-radius: 999px; font-size: 12.5px; color: var(--ink-2);
}
.pill.strong { color: var(--ink); font-weight: 650; }

/* ------------------------------------------------------------------ cards */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;
  margin-bottom: 16px;
}
.card.narrow { max-width: 520px; }
.card-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 12px; flex-wrap: wrap;
}
.card-hint { font-size: 12px; color: var(--muted); }
.card-title { font-size: 13px; font-weight: 650; margin: 0 0 12px; }
.center-card { text-align: center; margin-top: 60px; }
.err-code { font-size: 44px; }

/* ------------------------------------------------------------- stat tiles */
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; }
.stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 2px;
}
.stat-label { font-size: 12px; color: var(--ink-2); }
.stat-value { font-size: 26px; font-weight: 650; letter-spacing: -0.01em; }
.stat.hero .stat-value { font-size: 34px; }
.stat-sub { font-size: 12px; color: var(--muted); }
.stat.small { padding: 10px 12px; }
.stat.small .stat-value { font-size: 20px; }

.strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.strip-item {
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 9px 12px; display: flex; flex-direction: column; gap: 1px;
}
.strip-label { font-size: 11px; color: var(--muted); }
.strip-value { font-size: 15px; font-weight: 650; }
.strip-n { font-size: 11px; color: var(--muted); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }

/* ----------------------------------------------------------------- bars */
.barlist { display: flex; flex-direction: column; gap: 7px; }
.barrow {
  display: grid; grid-template-columns: 128px minmax(0, 1fr) 74px 34px;
  gap: 10px; align-items: center;
  color: inherit; padding: 2px 4px; border-radius: 6px;
}
a.barrow:hover { background: #f3f2ee; text-decoration: none; }
.barrow-label { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track {
  display: flex; gap: 2px; height: 15px; align-items: stretch;
  border-left: 1px solid var(--baseline); padding-left: 0;
}
.bar-fill { background: var(--accent); border-radius: 0 4px 4px 0; min-width: 0; }
.bar-track.stacked .bar-fill { border-radius: 0 2px 2px 0; }
.seg-h { background: var(--seq-h); }
.seg-m { background: var(--seq-m); }
.seg-l { background: var(--seq-l); }
.seg-none { background: var(--seq-none); }
.seg-opp { background: var(--seq-m); }
.seg-est { background: #e0a82e; }
.barrow-value { font-size: 12.5px; font-weight: 650; text-align: right; white-space: nowrap; }
.barrow-n { font-size: 11.5px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }

.legend { display: flex; gap: 12px; flex-wrap: wrap; }
.key { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-2); }
.sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.sw-h { background: var(--seq-h); } .sw-m { background: var(--seq-m); }
.sw-l { background: var(--seq-l); } .sw-none { background: var(--seq-none); }
.sw-opp { background: var(--seq-m); } .sw-est { background: #e0a82e; }

/* mini column chart */
.cols { display: flex; gap: 16px; align-items: flex-end; padding: 6px 2px 0; }
.col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.col-value { font-size: 11px; color: var(--ink-2); white-space: nowrap; }
.col-bar { width: 24px; background: var(--accent); border-radius: 4px 4px 0 0; min-height: 2px; }
.col-label { font-size: 11px; color: var(--muted); border-top: 1px solid var(--baseline); padding: 3px 6px 0; }

.due-grid { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: start; }
.due-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.due-chip {
  display: inline-block; min-width: 34px; text-align: center;
  background: #eef3fb; color: var(--accent-deep);
  font-size: 11px; font-weight: 650; border-radius: 999px; padding: 2px 7px;
  margin-right: 7px;
}
.due-chip.due-soon { background: #fdeee7; color: #b4552f; }

/* ---------------------------------------------------------------- tables */
.table-card { padding: 0; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.table th {
  text-align: left; font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted); font-weight: 650; padding: 10px 12px;
  border-bottom: 1px solid var(--grid); background: var(--surface);
  white-space: nowrap;
}
.table th a { color: inherit; }
.table th.sorted a { color: var(--ink); }
.sort-arrow { margin-left: 3px; }
.table td { padding: 8px 10px; border-bottom: 1px solid #efeeea; vertical-align: top; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr[data-href] { cursor: pointer; }
.table tbody tr[data-href]:hover { background: #f4f6f9; }
.table tfoot td { border-top: 1px solid var(--grid); border-bottom: 0; padding: 10px 12px; background: #faf9f6; }
.cell-name { min-width: 220px; }
.muted-sub { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.notes-cell { color: var(--ink-2); font-size: 12.5px; max-width: 260px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12px; }
.nowrap { white-space: nowrap; }
.strong { font-weight: 650; }
.muted { color: var(--muted); }
.empty { color: var(--muted); text-align: center; padding: 26px 12px !important; }
.mini-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 14px; }
.mini-table th {
  text-align: left; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--grid);
}
.mini-table th.num { text-align: right; }
.mini-table td { padding: 6px 8px; border-bottom: 1px solid #efeeea; }
.mini-table tr:last-child td { border-bottom: 0; }
.mini-table tfoot td { border-top: 1px solid var(--grid); border-bottom: 0; padding-top: 8px; }
.card-foot { margin: 12px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
.table-lite { width: 100%; border-collapse: collapse; font-size: 13px; }
.table-lite td { padding: 8px 8px; border-bottom: 1px solid #efeeea; vertical-align: top; }
.table-lite tr:last-child td { border-bottom: 0; }

/* ----------------------------------------------------------------- chips */
.chip {
  display: inline-block; padding: 2.5px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.chip-opportunity { background: #e7f0fc; color: #1c5cab; }
.chip-estimate { background: #fdf3dc; color: #8a6100; }
.chip-nobid { background: #fdeee7; color: #b4552f; }
.chip-lead { background: #e7f0fc; color: #1c5cab; }
.chip-presentation { background: #ece9fa; color: #4a3aa7; }
.chip-bidding { background: #e2f6ee; color: #0c7a54; }
.chip-submitted { background: #dcebfb; color: #184f95; }
.chip-notsubmitted { background: #fdeee7; color: #b4552f; }
.chip-clarifications { background: #fdf3dc; color: #8a6100; }
.chip-win { background: #e5f6e5; color: #056805; }
.chip-loss { background: #fbe7e7; color: #a32020; }
.chip-renewal { background: #fbeaf1; color: #a83a63; }
.chip-none { background: #efeeea; color: #52514e; }
/* October 2026 stages (Curtis Ball) */
.chip-qualified { background: #ece9fa; color: #4a3aa7; }
.chip-shortlisted { background: #e2f6ee; color: #0c7a54; }
.chip-verbal { background: #dbf1e3; color: #0b6b3a; }

.prob {
  display: inline-grid; place-items: center;
  width: 24px; height: 20px; border-radius: 5px;
  font-size: 11.5px; font-weight: 700;
}
.prob-H { background: var(--seq-h); color: #fff; }
.prob-M { background: var(--seq-m); color: #fff; }
.prob-L { background: var(--seq-l); color: #0b2d55; }

.role {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 650; text-transform: capitalize;
}
.role-admin { background: #16233a; color: #fff; }
.role-editor { background: #dcebfb; color: #184f95; }
.role-viewer { background: #efeeea; color: #52514e; }

.action { font-size: 12px; font-weight: 600; }
.action-create, .action-user_created { color: var(--good-text); }
.action-update, .action-user_role_changed { color: var(--accent-deep); }
.action-archive, .action-login_failed, .action-user_deactivated { color: #b4552f; }
.action-login, .action-logout { color: var(--ink-2); }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--baseline);
  color: var(--ink); border-radius: 7px; padding: 7px 13px;
  font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
  line-height: 1.2;
}
.btn:hover { background: #f3f2ee; text-decoration: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: #f0efeb; }
.btn.danger { color: var(--critical); border-color: #e6b8b8; }
.btn.tiny { padding: 4px 9px; font-size: 12px; }
.btn-block { width: 100%; justify-content: center; }
.inline { display: inline; }
.actions form { display: inline; }

/* ----------------------------------------------------------------- forms */
label { display: block; font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
label .hint { font-weight: 400; color: var(--muted); }
.req { color: var(--critical); font-weight: 700; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  display: block; width: 100%; margin-top: 5px;
  padding: 8px 10px; font-size: 13.5px; font-family: inherit; color: var(--ink);
  background: #fff; border: 1px solid var(--grid); border-radius: 7px;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(42, 120, 214, 0.16);
}
input:disabled, select:disabled, textarea:disabled {
  background: #f4f3f0; color: var(--ink-2); cursor: not-allowed;
}
label.bare { font-weight: 400; }
label.check {
  display: flex; gap: 9px; align-items: flex-start; font-weight: 500;
  font-size: 13px; color: var(--ink); line-height: 1.4;
}
label.check input { margin-top: 2px; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 16px; }
.fgrid.three { grid-template-columns: 1fr 1fr 1fr; }
.span2 { grid-column: span 2; }
.form-stack { display: flex; flex-direction: column; gap: 13px; }
.form-actions { display: flex; gap: 9px; align-items: center; }
.form-actions.sticky {
  position: sticky; bottom: 0; background: var(--page);
  padding: 12px 0; margin-top: -4px; border-top: 1px solid var(--grid);
}
.form-layout { display: grid; grid-template-columns: 1fr 330px; gap: 18px; align-items: start; }
.form-side { position: sticky; top: 20px; }

/* password show/hide */
.pw-wrap { position: relative; display: block; margin-top: 5px; }
.pw-wrap input:not([type="checkbox"]):not([type="radio"]) { margin-top: 0; padding-right: 42px; }
.pw-toggle {
  position: absolute; top: 50%; right: 5px; transform: translateY(-50%);
  background: none; border: 0; padding: 7px; color: var(--muted);
  cursor: pointer; border-radius: 6px; display: grid; place-items: center;
}
.pw-toggle:hover { color: var(--ink); background: #f0efeb; }
.pw-toggle svg[hidden] { display: none; }

/* toolbar */
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 12px 14px; }
.toolbar select, .toolbar input { width: auto; margin-top: 0; font-size: 12.5px; padding: 7px 9px; }
.toolbar .search { flex: 1 1 210px; min-width: 180px; }

/* ------------------------------------------------- multi-select filters */
/* Without JavaScript every list stays open and Apply does the work; the
   .ms-ready class (added by app.js) collapses them into dropdowns. */
.ms { position: relative; }
.ms-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-family: inherit; color: var(--ink);
  background: #fff; border: 1px solid var(--grid); border-radius: 8px;
  padding: 7px 10px; cursor: pointer; max-width: 220px;
}
.ms-btn:hover { border-color: var(--baseline); }
.ms-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-caret { color: var(--muted); font-size: 10px; }
.ms.has-picks > .ms-btn {
  border-color: var(--accent); color: var(--accent-deep);
  background: #f2f7fd; font-weight: 600;
}
.ms.open > .ms-btn { border-color: var(--accent); }
.ms-panel {
  border: 1px solid var(--grid); border-radius: 8px; background: #fff;
  padding: 8px; min-width: 190px;
}
.ms-panel-head {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); font-weight: 650; padding: 2px 4px 7px;
}
.ms-list { display: flex; flex-direction: column; gap: 1px; max-height: 260px; overflow-y: auto; }
.ms-opt {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: 12.5px; color: var(--ink); padding: 5px 6px;
  border-radius: 6px; cursor: pointer; white-space: nowrap;
}
.ms-opt:hover { background: #f3f2ee; }
.ms-opt input { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); }
.ms-opt span { overflow: hidden; text-overflow: ellipsis; }
.ms .ms-none { font-size: 11px; color: var(--accent-strong); text-transform: none; letter-spacing: 0; }

.ms-ready .ms-btn { display: inline-flex; }
.ms-ready .ms-panel {
  position: absolute; z-index: 40; top: calc(100% + 5px); left: 0;
  display: none; box-shadow: 0 10px 26px rgba(11, 11, 11, 0.14);
}
.ms-ready .ms.open .ms-panel { display: block; }

/* active filter summary under the toolbar */
.active-filters {
  display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
  margin: -4px 2px 12px; font-size: 12px; color: var(--ink-2);
}
.af-label {
  font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted); font-weight: 650;
}
.af-chip {
  background: #f2f7fd; border: 1px solid #cfe0f5; color: var(--accent-deep);
  border-radius: 999px; padding: 3px 10px; font-weight: 600;
}
.af-clear { font-size: 12px; }

/* meta list */
.meta { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.meta > div { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.meta dt { color: var(--muted); }
.meta dd { margin: 0; text-align: right; }
.meta + form { margin-top: 14px; }

.history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.history li { display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; }
.h-when { font-size: 11px; color: var(--muted); }
.h-who { font-size: 11px; color: var(--muted); }
.h-what { color: var(--ink-2); }
.h-what strong { color: var(--ink); }
.notes { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 13px; display: flex; flex-direction: column; gap: 6px; }

/* --------------------------------------------------------------- flashes */
.flashes { margin-bottom: 14px; display: flex; flex-direction: column; gap: 8px; }
.flash {
  background: #e9f2ea; border: 1px solid #bfdcc1; color: #1d4d20;
  border-radius: 8px; padding: 9px 13px; font-size: 13px;
}
.flash-error { background: #fbe7e7; border-color: #eebbbb; color: #a32020; }

/* Users page: Active / Deactivated */
.tab-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.tab-note { margin: 0 0 12px; }

/* reveal temp password */
.reveal { border-color: var(--warning); background: #fdf8ec; }
.reveal-pass {
  font-size: 24px; font-weight: 700; letter-spacing: 0.02em;
  background: #fff; border: 1px dashed var(--warning); border-radius: 8px;
  padding: 13px 16px; margin: 8px 0; display: inline-block;
}
.inactive-row td { opacity: 0.55; }

/* ---------------------------------------------------------------- login */
.login-body {
  background: linear-gradient(160deg, #0e1a2e 0%, #16233a 60%, #1b2c49 100%);
  min-height: 100vh; display: grid; place-items: center; padding: 20px;
}
.login-wrap { width: 100%; max-width: 384px; }
.login-card {
  background: #fff; border-radius: 14px; padding: 30px 30px 22px;
  box-shadow: 0 18px 50px rgba(4, 10, 20, 0.5);
}
.login-brand { text-align: center; margin-bottom: 18px; }
.login-logo { width: 232px; max-width: 82%; height: auto; margin: 4px auto 12px; display: block; }
.login-brand h1 { font-size: 19px; }
.login-sub { color: var(--muted); font-size: 12.5px; margin: 3px 0 0; }
.login-form { display: flex; flex-direction: column; gap: 13px; }
.login-note { text-align: center; font-size: 12px; color: var(--muted); margin: 16px 0 0; }

/* --------------------------------------------------------------- tooltip */
.tip {
  position: fixed; z-index: 60; pointer-events: none;
  background: var(--navy-2); color: #fff;
  font-size: 12px; line-height: 1.35; padding: 6px 10px; border-radius: 7px;
  max-width: 300px; box-shadow: 0 6px 20px rgba(4, 10, 20, 0.35);
}

.pager { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 4px; }
.change-cell { font-size: 12.5px; color: var(--ink-2); max-width: 340px; }

/* ------------------------------------------------------------ help & quick */
.help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; max-width: 1100px; }
.help-p { margin: 0 0 10px; color: var(--ink-2); font-size: 13px; }
.help-p:last-child { margin-bottom: 0; }
.help-cell { color: var(--ink-2); font-size: 12.5px; }
.help-list { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 13px; display: flex; flex-direction: column; gap: 8px; }
.help-list strong, .help-p strong { color: var(--ink); }
.quick-defaults {
  background: #f3f5f9; border: 1px solid var(--border); border-radius: 8px;
  padding: 9px 12px; font-size: 12.5px; color: var(--ink-2); line-height: 1.7;
}
.attention-card { border-left: 3px solid var(--warning); }
.mini-table tr[data-href] { cursor: pointer; }
.mini-table tr[data-href]:hover { background: #f4f6f9; }

/* ----------------------------------------------------- mobile topbar/drawer */
.topbar {
  display: none;
  position: sticky; top: 0; z-index: 40;
  background: var(--navy); color: #fff;
  align-items: center; gap: 10px; padding: 10px 12px;
}
.topbar .topbar-brand { display: flex; flex-direction: row; align-items: center; gap: 9px; }
.topbar .brand-app { font-size: 13.5px; font-weight: 650; color: #fff; }
.nav-toggle {
  background: none; border: 0; color: #d7deea; cursor: pointer;
  padding: 8px; margin: -4px 0; border-radius: 8px; display: grid; place-items: center;
}
.nav-toggle:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.backdrop {
  position: fixed; inset: 0; z-index: 45;
  background: rgba(6, 12, 22, 0.55);
}

@media (max-width: 1150px) {
  .kpi-row { grid-template-columns: 1fr 1fr; }
  .strip { grid-template-columns: repeat(2, 1fr); }
  /* minmax(0, ...) so a wide table scrolls inside its card instead of
     widening the whole page (October 2026) */
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .due-grid { grid-template-columns: minmax(0, 1fr); }
  .form-layout { grid-template-columns: minmax(0, 1fr); }
  .form-side { position: static; }
  .help-grid { grid-template-columns: 1fr; }
}

/* Phones & small tablets: sidebar becomes a slide-in drawer. */
@media (max-width: 900px) {
  .topbar { display: flex; }
  .shell { display: block; }
  .sidebar {
    position: fixed; z-index: 50; top: 0; left: 0; height: 100%;
    width: min(290px, 86vw);
    transform: translateX(-102%);
    transition: transform 0.18s ease-out;
    box-shadow: none;
  }
  body.nav-open .sidebar { transform: translateX(0); box-shadow: 0 0 42px rgba(4, 10, 20, 0.5); }
  .content { padding: 16px 14px 40px; }

  /* touch-sized controls */
  .nav a { padding: 11px 12px; font-size: 14px; }
  .nav a.sub { padding: 9px 12px 9px 37px; font-size: 13.5px; }
  .btn { padding: 10px 15px; }
  .btn.tiny { padding: 7px 11px; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { padding: 10px 11px; font-size: 15px; }
  .toolbar select, .toolbar input { padding: 9px 10px; font-size: 14px; }
  .ms-btn { padding: 9px 11px; font-size: 14px; flex: 1 1 auto; max-width: none; }
  .ms { flex: 1 1 140px; }
  .ms-opt { padding: 8px 6px; font-size: 14px; }
  .ms-opt input { width: 17px; height: 17px; }
  .ms-ready .ms-panel { min-width: 210px; max-width: 82vw; }

  /* stack the stat rows */
  .kpi-row { grid-template-columns: 1fr 1fr; gap: 9px; }
  .stat-value { font-size: 22px; }
  .stat.hero .stat-value { font-size: 26px; }
  .strip { grid-template-columns: 1fr 1fr; gap: 8px; }
  .page-head { margin-bottom: 14px; }
  .content h1 { font-size: 19px; }
  .card { padding: 13px 14px; }
  .barrow { grid-template-columns: 92px minmax(0, 1fr) 66px 28px; gap: 7px; }
  .cols { gap: 9px; }
  .col-bar { width: 18px; }
}

/* ----------------------------------------------------------- departments */
.switcher-bar {
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
  padding: 10px 12px;
}
.switcher { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.switch-label {
  font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted); font-weight: 650; margin-right: 2px;
}
.switch-btn {
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); white-space: nowrap;
}
.switch-btn:hover { background: #f3f2ee; text-decoration: none; }
.switch-btn.on {
  background: var(--accent-deep); border-color: var(--accent-deep);
  color: #fff;
}
.switch-btn.on:hover { background: var(--accent-deep); }

.note-card { border-left: 3px solid var(--seq-none); }
.note-list { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-2); }
.note-list li { margin-bottom: 6px; line-height: 1.5; }
.note-list li:last-child { margin-bottom: 0; }

.card-head.standalone { margin: 4px 2px 10px; }
.dept-bars .barrow { grid-template-columns: 168px minmax(0, 1fr) 74px 34px; }
.dept-table .cell-name { min-width: 170px; }
.dept-table td .muted-sub { font-size: 11px; }

@media (max-width: 900px) {
  .switcher-bar { gap: 10px; }
  .switch-btn { padding: 8px 13px; font-size: 13px; }
  .dept-bars .barrow { grid-template-columns: 108px minmax(0, 1fr) 66px 28px; }
}

/* ==========================================================================
   Cor One, version 4 (August 18 2026)
   Brand sheet: Cormorant blue #298DBB, Cormorant grey #808383,
   surface dark #16202A. Sampled from the Cormorant logo file.
   ========================================================================== */
:root {
  --accent: #298DBB;
  --accent-strong: #237CA4;
  --accent-deep: #1B6081;
  --navy: #16202A;
  --navy-2: #1E2C38;
  --seq-h: #1B6081;
  --seq-m: #298DBB;
  --seq-l: #93C8DE;
  --brand-grey: #808383;
}

/* ---- brand lockup ---- */
.brand { flex-direction: row; align-items: center; gap: 10px; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 0;
  background: none; display: block; flex: 0 0 auto;
}
.brand-mark.lg { width: 34px; height: 34px; }
.brand-lockup { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.brand-app-name { font-size: 16px; font-weight: 650; color: #fff; text-align: left;
                  letter-spacing: -0.01em; }
.brand-company { font-size: 10.5px; letter-spacing: 0.06em; color: #8FA0B0;
                 text-transform: uppercase; font-weight: 600;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-one { color: #93C8DE; }
/* The Cor One divider: a stroke leaning 14 degrees, the lean of the bolt. */
.brand-slash {
  display: inline-block; width: 2px; height: 0.86em;
  background: #808383; border-radius: 1px;
  transform: rotate(14deg); transform-origin: 50% 50%;
  margin: 0 0.36em; vertical-align: -0.08em;
}
.login-card h1 .brand-slash { width: 2.5px; height: 0.82em; margin: 0 0.4em; }
.topbar-brand { display: flex; align-items: center; gap: 8px; }
.topbar .brand-app { font-size: 15px; }
.login-card h1 .brand-one, .brand-one { font-weight: 650; }

/* ---- new chips ---- */
.chip-submitted { background: #e4f1f8; color: #1d6c90; }
.chip-open { background: #edf3f6; color: #16202a; }

/* ---- stage colours on charts ---- */
.seg-sub { background: var(--seq-h); }
.sw-sub { background: var(--seq-h); }
.seg-opp, .sw-opp { background: var(--seq-m); }
.seg-est, .sw-est { background: #e0a82e; }

/* ---- five across ---- */
.kpi-row.five { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1200px) { .kpi-row.five { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px)  { .kpi-row.five { grid-template-columns: 1fr 1fr; } }
a.stat.linky { color: inherit; }
a.stat.linky:hover { border-color: var(--accent); text-decoration: none;
                     box-shadow: 0 2px 8px rgba(41, 141, 187, 0.14); }

/* ---- alert bar ---- */
.alertbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  background: #fff8e9; border: 1px solid #f0dcae; border-radius: var(--radius);
  padding: 9px 13px; margin-bottom: 16px; font-size: 13px;
}
.alertbar-label { font-weight: 650; color: #7a5a05; }
.alertbar-item { color: #52514e; }
.alertbar-item strong { color: #0b0b0b; }

/* ---- conversion ---- */
.ratebar {
  display: inline-block; width: 62px; height: 7px; border-radius: 4px;
  background: #e6e5df; vertical-align: middle; margin-right: 7px; overflow: hidden;
}
.ratebar-fill { display: block; height: 100%; background: var(--seq-m); }

/* ---- required-field key ---- */
.req-later {
  color: var(--accent-deep); font-weight: 700; font-size: 11px;
  border: 1px solid currentColor; border-radius: 4px; padding: 0 3px;
  vertical-align: 1px;
}
.req-key {
  font-size: 12px; color: var(--ink-2); margin: 0 0 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px 12px;
}
label.field-bad > input, label.field-bad > select, label.field-bad > textarea {
  border-color: var(--critical); background: #fff7f7;
}
label.field-bad { color: var(--critical); }

/* ---- callout ---- */
.callout {
  border: 1px solid #f0dcae; background: #fff8e9; border-radius: var(--radius);
  padding: 12px 14px; margin-top: 12px; font-size: 13px;
}
.callout p { margin: 0 0 8px; }
label.inline { display: flex; align-items: center; gap: 8px; font-weight: 500; }
label.inline input { width: auto; }

/* ---- small inline forms in tables ---- */
.inline-form { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
.inline-form input { padding: 4px 7px; font-size: 12.5px; }
.btn.small { padding: 4px 9px; font-size: 12.5px; }
.sub-title { font-size: 13px; font-weight: 650; margin: 18px 0 6px; color: var(--ink); }
.brand-company { white-space: normal; line-height: 1.25; font-size: 9.5px;
                 letter-spacing: 0.05em; }

/* The company line under the wordmark reads as the tagline it is, so it is
   set in sentence case rather than shouted in capitals. */
.brand-company { text-transform: none; font-size: 10.5px; letter-spacing: 0;
                 color: #93A3B2; font-weight: 500; }

/* ==========================================================================
   Quick search, one bar on every page
   ========================================================================== */
:root { --topbar-h: 0px; }

.searchbar {
  position: sticky; top: var(--topbar-h); z-index: 35;
  display: flex; align-items: center; gap: 8px;
  background: var(--surface);
  /* A standing Cormorant-blue glow, so the search bar reads as the one live
     control on the page rather than another bordered card. */
  border: 1px solid rgba(41, 141, 187, 0.38);
  border-radius: var(--radius);
  box-shadow: 0 0 0 3px rgba(41, 141, 187, 0.08),
              0 0 14px rgba(41, 141, 187, 0.16),
              var(--shadow);
  padding: 6px 10px; margin: -4px 0 18px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.searchbar:hover {
  border-color: rgba(41, 141, 187, 0.55);
  box-shadow: 0 0 0 3px rgba(41, 141, 187, 0.11),
              0 0 18px rgba(41, 141, 187, 0.22),
              var(--shadow);
}
.searchbar-icon { color: var(--muted); flex: 0 0 auto; }
.searchbar input[type="search"] {
  flex: 1; border: 0; background: none; padding: 5px 0; font-size: 14px;
  min-width: 0; outline: none;
}
.searchbar input[type="search"]::placeholder { color: var(--muted); }
/* The bar itself carries the glow, so the field inside it must not draw a
   second ring from the global input:focus style. */
.searchbar input[type="search"]:focus { border: 0; box-shadow: none; }
.searchbar:focus-within {
  border-color: #298DBB;
  box-shadow: 0 0 0 3px rgba(41, 141, 187, 0.18),
              0 0 22px rgba(41, 141, 187, 0.30),
              var(--shadow);
}
.searchbar-key {
  font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--muted); border: 1px solid var(--grid); border-radius: 5px;
  padding: 4px 6px; background: var(--page); flex: 0 0 auto;
}
.searchbar:focus-within .searchbar-key { visibility: hidden; }
/* The submit button is the no-JavaScript path. With scripts running the
   dropdown does the work, so it steps out of the way visually. */
.searchbar-go {
  border: 0; background: none; color: var(--accent-strong);
  font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 4px 6px;
  border-radius: 6px; flex: 0 0 auto;
}
.searchbar-go:hover { background: rgba(41, 141, 187, 0.10); }

.searchbar-panel {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 12px 32px rgba(11, 11, 11, 0.14);
  max-height: min(66vh, 560px); overflow-y: auto; padding: 6px;
}
.qs-how, .qs-group {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); padding: 9px 10px 4px;
}
.qs-how { text-transform: none; letter-spacing: 0; font-weight: 500;
          font-size: 12px; color: var(--ink-2); }
.qs-empty { padding: 14px 12px; font-size: 13px; color: var(--ink-2); }
.qs-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 10px; border-radius: 7px; color: var(--ink); font-size: 13px;
}
.qs-row:hover, .qs-row.active { background: #eef4f8; text-decoration: none; }
.qs-row.active { outline: 2px solid var(--accent); outline-offset: -2px; }
.qs-main { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.qs-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis;
            white-space: nowrap; }
.qs-sub { font-size: 11.5px; color: var(--muted); overflow: hidden;
          text-overflow: ellipsis; white-space: nowrap; }
.qs-side { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.qs-meta { font-size: 11.5px; color: var(--ink-2); white-space: nowrap; }
.qs-more, .qs-all { color: var(--accent-strong); font-weight: 600; font-size: 12.5px; }
.qs-all { border-top: 1px solid var(--grid); border-radius: 0 0 7px 7px; margin-top: 4px; }

/* Full results page */
.resultlist { list-style: none; margin: 0; padding: 0; }
.resultlist li { border-bottom: 1px solid #efeeea; }
.resultlist li:last-child { border-bottom: 0; }
.resultlist a {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 14px; color: var(--ink);
}
.resultlist a:hover { background: #f4f6f9; text-decoration: none; }
.result-main { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.result-title { font-weight: 600; }
.result-sub { font-size: 12px; color: var(--muted); }
.result-side { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.result-meta { font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.result-why { font-size: 11px; color: var(--muted); white-space: nowrap; }

@media (max-width: 900px) {
  :root { --topbar-h: 44px; }
  .searchbar { margin: 0 0 14px; padding: 5px 9px; }
  .searchbar-key { display: none; }
  .result-side, .qs-side { display: none; }
}
/* A heading inside a table card needs its own padding, because the card
   itself has none so the table can run edge to edge. */
.table-card > .card-head { padding: 14px 16px 2px; }

/* ==========================================================================
   Sidebar artwork: high voltage plant at the foot of the navigation.
   Decoration only. It takes whatever vertical space is left over, crops from
   the top as the window shrinks, and disappears entirely when there is none.
   ========================================================================== */
.nav { flex: 0 0 auto; }
.sidebar-art {
  flex: 1 1 auto; min-height: 0; overflow: hidden; pointer-events: none;
  display: flex; align-items: flex-end;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 26%);
}
/* The drawing keeps its own proportions and sits on the bottom edge. A
   short sidebar simply clips the sky off the top; a tall one leaves sky
   above it. Nothing is ever stretched. */
.sidebar-art svg { display: block; width: 100%; height: auto; flex: 0 0 auto; }

/* Shared geometry rules. Colour comes from the style class below. */
.sidebar-art .art-line { stroke-width: 0.7; stroke-linecap: round; }
.sidebar-art .art-leg { stroke-width: 1.3; stroke-linejoin: round; }
.sidebar-art .art-arm { stroke-width: 1.6; stroke-linecap: round; }
.sidebar-art .art-thin { stroke-width: 0.55; }
.sidebar-art .art-mullion path { stroke-width: 0.5; fill: none; }
.sidebar-art .art-glow { display: none; }

/* ---- skyline: tone on tone silhouette, the quiet one ---- */
.sidebar-art.skyline { color: #298DBB; }
.sidebar-art.skyline .art-struct { fill: #27394A; stroke: #27394A; }
.sidebar-art.skyline .art-line { stroke: #2B4050; fill: none; }
.sidebar-art.skyline .art-insulator { fill: #3B586A; stroke: #3B586A; }
.sidebar-art.skyline .art-glass { fill: #22333E; stroke: #2E4553; stroke-width: 0.7; }
.sidebar-art.skyline .art-mullion path { stroke: #16202A; }
.sidebar-art.skyline .art-ground-grad { color: #33566B; }

/* ---- lineart: thin technical drawing, no fills ---- */
.sidebar-art.lineart { color: #298DBB; }
.sidebar-art.lineart .art-struct { fill: none; stroke: #33556B; stroke-width: 0.8; }
.sidebar-art.lineart .art-line { stroke: #33556B; fill: none; }
.sidebar-art.lineart .art-insulator { fill: none; stroke: #4A7C99; stroke-width: 0.7; }
.sidebar-art.lineart .art-glass { fill: none; stroke: #33556B; stroke-width: 0.8; }
.sidebar-art.lineart .art-mullion path { stroke: #2C4859; }
.sidebar-art.lineart .art-ground-grad { color: #33556B; }
.sidebar-art.lineart .art-leg { stroke-width: 1.1; }
.sidebar-art.lineart .art-arm { stroke-width: 1.3; }

/* ---- glow: silhouette with a brand-blue horizon behind it ---- */
.sidebar-art.glow { color: #298DBB; }
.sidebar-art.glow .art-glow-grad { color: #298DBB; }
.sidebar-art.glow .art-glow { display: block; }
.sidebar-art.glow .art-struct { fill: #16232E; stroke: #16232E; }
.sidebar-art.glow .art-line { stroke: #34586E; fill: none; }
.sidebar-art.glow .art-insulator { fill: #5FA6C6; stroke: #5FA6C6; }
.sidebar-art.glow .art-glass { fill: #29617E; stroke: #4E9DC0; stroke-width: 0.7; }
.sidebar-art.glow .art-mullion path { stroke: #16202A; }
.sidebar-art.glow .art-ground-grad { color: #4E9DC0; }

/* ==========================================================================
   Day / Dark theme (September 2026)
   The light look above is the Day theme. Dark is switched on by
   <html data-theme="dark">, set by static/theme.js before the page paints:
   the person's saved choice if they made one, otherwise their system
   setting. The sidebar is dark in both themes and is left alone.
   ========================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0e151c;
  --surface: #16202a;
  --ink: #e7ecf0;
  --ink-2: #b4bfc9;
  --muted: #8593a1;
  --grid: #2a3744;
  --baseline: #3b4a58;
  --border: rgba(255, 255, 255, 0.09);
  --accent-strong: #52acd6;
  --accent-deep: #86c6e3;
  --seq-none: #35434f;
  --good-text: #6fd27a;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
:root[data-theme="dark"] .sidebar { border-right: 1px solid rgba(255, 255, 255, 0.06); }

/* hover and quiet fills */
:root[data-theme="dark"] a.barrow:hover,
:root[data-theme="dark"] .btn:hover,
:root[data-theme="dark"] .btn.ghost:hover,
:root[data-theme="dark"] .ms-opt:hover,
:root[data-theme="dark"] .switch-btn:hover,
:root[data-theme="dark"] .pw-toggle:hover { background: rgba(255, 255, 255, 0.06); }
:root[data-theme="dark"] .table tbody tr[data-href]:hover,
:root[data-theme="dark"] .mini-table tr[data-href]:hover,
:root[data-theme="dark"] .resultlist a:hover,
:root[data-theme="dark"] .qs-row:hover,
:root[data-theme="dark"] .qs-row.active { background: rgba(41, 141, 187, 0.14); }

/* tables */
:root[data-theme="dark"] .table td,
:root[data-theme="dark"] .mini-table td,
:root[data-theme="dark"] .table-lite td,
:root[data-theme="dark"] .resultlist li { border-bottom-color: var(--grid); }
:root[data-theme="dark"] .table tfoot td { background: #1a2530; }

/* form fields */
:root[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] .ms-btn,
:root[data-theme="dark"] .ms-panel { background: #0f1820; border-color: var(--grid); color: var(--ink); }
:root[data-theme="dark"] input:disabled,
:root[data-theme="dark"] select:disabled,
:root[data-theme="dark"] textarea:disabled { background: #1b252f; color: var(--muted); }
:root[data-theme="dark"] .searchbar input[type="search"] { background: none; }
:root[data-theme="dark"] .ms.has-picks > .ms-btn,
:root[data-theme="dark"] .af-chip { background: rgba(41, 141, 187, 0.16); border-color: rgba(41, 141, 187, 0.45); }
:root[data-theme="dark"] label.field-bad > input,
:root[data-theme="dark"] label.field-bad > select,
:root[data-theme="dark"] label.field-bad > textarea { background: rgba(208, 59, 59, 0.12); }

/* buttons */
:root[data-theme="dark"] .btn.glow-green:hover { background: rgba(74, 190, 125, 0.10); }
:root[data-theme="dark"] .btn.danger { border-color: rgba(208, 59, 59, 0.55); color: #f07a7a; }
:root[data-theme="dark"] .switch-btn.on,
:root[data-theme="dark"] .switch-btn.on:hover { background: #1B6081; border-color: #1B6081; color: #fff; }

/* chips: same hue, dark tint */
:root[data-theme="dark"] .chip-opportunity,
:root[data-theme="dark"] .chip-lead { background: rgba(57, 135, 229, 0.18); color: #9cc6f5; }
:root[data-theme="dark"] .chip-estimate,
:root[data-theme="dark"] .chip-clarifications { background: rgba(224, 168, 46, 0.18); color: #f0c66a; }
:root[data-theme="dark"] .chip-nobid,
:root[data-theme="dark"] .chip-notsubmitted { background: rgba(236, 131, 90, 0.18); color: #f3a585; }
:root[data-theme="dark"] .chip-presentation { background: rgba(120, 100, 220, 0.20); color: #b9adf2; }
:root[data-theme="dark"] .chip-bidding { background: rgba(12, 160, 110, 0.18); color: #6fd6ae; }
:root[data-theme="dark"] .chip-submitted { background: rgba(41, 141, 187, 0.20); color: #86c6e3; }
:root[data-theme="dark"] .chip-win { background: rgba(12, 163, 12, 0.18); color: #7bd97b; }
:root[data-theme="dark"] .chip-loss { background: rgba(208, 59, 59, 0.20); color: #f08c8c; }
:root[data-theme="dark"] .chip-renewal { background: rgba(200, 80, 130, 0.20); color: #eea0c0; }
:root[data-theme="dark"] .chip-none { background: rgba(255, 255, 255, 0.08); color: var(--ink-2); }
:root[data-theme="dark"] .chip-qualified { background: rgba(120, 100, 220, 0.20); color: #b9adf2; }
:root[data-theme="dark"] .chip-shortlisted { background: rgba(12, 160, 110, 0.18); color: #6fd6ae; }
:root[data-theme="dark"] .chip-verbal { background: rgba(30, 170, 90, 0.20); color: #86e0aa; }
:root[data-theme="dark"] .chip-open { background: rgba(255, 255, 255, 0.10); color: var(--ink); }
:root[data-theme="dark"] .due-chip { background: rgba(41, 141, 187, 0.18); color: #86c6e3; }
:root[data-theme="dark"] .due-chip.due-soon { background: rgba(236, 131, 90, 0.18); color: #f3a585; }
:root[data-theme="dark"] .role-admin { background: #298DBB; color: #fff; }
:root[data-theme="dark"] .role-editor { background: rgba(41, 141, 187, 0.20); color: #86c6e3; }
:root[data-theme="dark"] .role-viewer { background: rgba(255, 255, 255, 0.08); color: var(--ink-2); }
:root[data-theme="dark"] .action-archive,
:root[data-theme="dark"] .action-login_failed,
:root[data-theme="dark"] .action-user_deactivated { color: #f3a585; }

/* notices */
:root[data-theme="dark"] .flash { background: rgba(12, 163, 12, 0.12); border-color: rgba(12, 163, 12, 0.35); color: #9be39b; }
:root[data-theme="dark"] .flash-error { background: rgba(208, 59, 59, 0.14); border-color: rgba(208, 59, 59, 0.45); color: #f4a3a3; }
:root[data-theme="dark"] .alertbar,
:root[data-theme="dark"] .callout,
:root[data-theme="dark"] .reveal { background: rgba(250, 178, 25, 0.08); border-color: rgba(250, 178, 25, 0.35); }
:root[data-theme="dark"] .alertbar-label { color: #f5c75a; }
:root[data-theme="dark"] .alertbar-item { color: var(--ink-2); }
:root[data-theme="dark"] .alertbar-item strong { color: var(--ink); }
:root[data-theme="dark"] .reveal-pass { background: #0f1820; }
:root[data-theme="dark"] .quick-defaults { background: #1a2530; }
:root[data-theme="dark"] .ratebar { background: #2a3744; }
:root[data-theme="dark"] .prob-L { color: #0b2d55; }

/* overlays */
:root[data-theme="dark"] .searchbar-panel,
:root[data-theme="dark"] .ms-ready .ms-panel { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); }

/* ---- theme button in the sidebar brand corner ---- */
.brand { position: relative; }
.theme-toggle {
  margin-left: auto; flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.10);
  color: #c9d3dc; cursor: pointer; padding: 0;
}
.theme-toggle:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.theme-toggle:focus-visible { outline: 2px solid #298DBB; outline-offset: 2px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
.topbar .theme-toggle { margin-left: auto; }

/* ==========================================================================
   "Viewing as" role preview, administrators only
   ========================================================================== */
.viewas {
  position: fixed; right: 18px; bottom: 18px; z-index: 70;
  display: flex; align-items: center; gap: 9px;
  background: rgba(22, 32, 42, 0.94); color: #d7dee6;
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px;
  padding: 7px 8px 7px 12px; font-size: 12.5px; font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.viewas.previewing {
  background: #5c3d00; color: #ffe2a3; border-color: #e0a82e;
  box-shadow: 0 0 0 3px rgba(224, 168, 46, 0.22), 0 8px 24px rgba(0, 0, 0, 0.35);
}
.viewas form { display: flex; align-items: center; gap: 7px; margin: 0; }
.viewas svg { flex: 0 0 auto; opacity: 0.9; }
.viewas select {
  width: auto; margin: 0; padding: 5px 8px; font-size: 12.5px; font-weight: 600;
  background: rgba(0, 0, 0, 0.25); color: inherit;
  border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 7px;
}
:root[data-theme="dark"] .viewas select { background: rgba(0, 0, 0, 0.25); color: inherit; }
.viewas.previewing select { border-color: rgba(224, 168, 46, 0.7); }
.viewas-btn {
  font: inherit; font-size: 12px; cursor: pointer;
  border-radius: 7px; padding: 5px 11px; border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.10); color: inherit;
}
.viewas-btn.exit { background: #e0a82e; color: #2a1c00; }
.viewas-btn.exit:hover { background: #f0bb45; }
.js .viewas-apply { display: none; }
.viewas-note {
  display: block; font-size: 11px; font-weight: 500; opacity: 0.85; margin-top: 1px;
}
@media (max-width: 900px) {
  .viewas { left: 12px; right: 12px; bottom: 12px; justify-content: space-between; }
}
@media print { .viewas, .theme-toggle { display: none; } }
.viewas-label { color: inherit; font-weight: 600; font-size: 12.5px; margin: 0; }
.user-role { text-transform: none; }
/* keep the last rows of a page clear of the preview bar */
body.has-viewas .content { padding-bottom: 84px; }

/* External role (investors, lenders): summary only */
.role-external { background: #fdf3dc; color: #8a6100; }
:root[data-theme="dark"] .role-external { background: rgba(224, 168, 46, 0.18); color: #f0c66a; }

/* Pipeline summary: definitions and data coverage, for the lender view */
.grid-2.defs { margin-top: 16px; }
.def-list { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; }
.def-list dt { font-weight: 600; margin-top: 10px; }
.def-list dt:first-child { margin-top: 0; }
.def-list dd { margin: 2px 0 0; color: var(--muted); }
.card-hint.block { display: block; margin-top: 14px; line-height: 1.5; }

/* A label that is hidden stays hidden, despite label { display: block }. */
label[hidden] { display: none; }

/* ==========================================================================
   Print (September 2026). Execs take the Dashboard, Conversion and Pipeline
   summary into meetings; the chrome goes, the numbers stay, the page carries
   its own as-of line. Charts keep their colour, tables keep their rules.
   ========================================================================== */
@media print {
  @page { margin: 14mm 12mm; }
  html, body { background: #fff !important; color: #000; }
  .sidebar, .topbar, .backdrop, .searchbar, .viewas, .theme-toggle,
  .head-actions, .nav-toggle, .flashes, .tip, .switcher-bar { display: none !important; }
  .shell { display: block; min-height: 0; }
  .content { padding: 0; }
  body.has-viewas .content { padding-bottom: 0; }
  .card, .stat, .strip-item, .table-card {
    box-shadow: none; border: 1px solid #bbb; break-inside: avoid; page-break-inside: avoid;
  }
  .kpi-row, .kpi-row.five { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .strip { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .grid-2 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-value { font-size: 20px; }
  .stat.hero .stat-value { font-size: 24px; }
  .page-head { margin-bottom: 10px; }
  .page-head::after {
    content: "Printed " attr(data-printed) " · Cor One, Cormorant. Internal pipeline estimates, not audited.";
    display: block; width: 100%; font-size: 10px; color: #555; margin-top: 4px;
  }
  a { color: inherit; text-decoration: none; }
  a[href]::after { content: none; }
  .bar-fill, .ratebar-fill, .seg-opp, .seg-est, .seg-sub, .seg-h, .seg-m, .seg-l, .seg-none, .sw,
  .prob, .chip { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .table th, .mini-table th { color: #333; }
  .table td, .mini-table td { border-bottom-color: #ddd; }
  .table tfoot td { background: #f2f2f2; }
  tr { break-inside: avoid; page-break-inside: avoid; }
  thead { display: table-header-group; }
  .card-foot { color: #444; }
  .def-list dd { color: #333; }
}

/* Division scope checkboxes on the user form */
.fieldset { border: 1px solid var(--grid); border-radius: 8px; padding: 10px 12px 8px; margin: 0; }
.fieldset legend { font-size: 12.5px; font-weight: 600; color: var(--ink-2); padding: 0 4px; }
.fieldset legend .hint { font-weight: 400; color: var(--muted); }
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-top: 6px; }
.check-grid label.check { font-weight: 500; }

/* Inline edit on the Pipeline table */
.inline-hint { margin: -6px 2px 10px; }
td.inl { cursor: text; position: relative; }
td.inl[data-inline="stage"] { cursor: pointer; }
td.inl:hover { background: rgba(41, 141, 187, 0.07); box-shadow: inset 0 0 0 1px rgba(41, 141, 187, 0.35); border-radius: 4px; }
td.inl.editing { background: rgba(41, 141, 187, 0.07); }
td.inl.saving { opacity: 0.6; }
.inline-ctl { display: block; width: 100%; min-width: 150px; margin: 0; padding: 5px 7px; font-size: 12.5px; font-family: inherit; }
textarea.inline-ctl { min-width: 240px; resize: vertical; }
.inline-toast {
  position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 12px); z-index: 80;
  background: var(--navy-2); color: #fff; font-size: 13px; padding: 9px 14px; border-radius: 9px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); opacity: 0; transition: opacity 180ms, transform 180ms;
  max-width: min(560px, 92vw);
}
.inline-toast.show { opacity: 1; transform: translate(-50%, 0); }
.inline-toast.bad { background: #7a2323; }
body.has-viewas .inline-toast { bottom: 74px; }
@media print { .inline-hint, .inline-toast { display: none !important; } td.inl:hover { box-shadow: none; background: none; } }

/* ------------------------------------------------ Jonas actuals (Sept 29 2026) */
.jonas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.jonas-grid > .card { margin-bottom: 0; }
.kpi-row.two { grid-template-columns: 1fr 1fr; margin-bottom: 8px; }
.top-gap { margin-top: 12px; }
.small-gap { margin: 0 0 6px; font-size: 12px; }
.warn-text { color: #8a6100; }
.var-bad { color: var(--critical); }
.var-good { color: var(--good-text); }
.muted-sub.var-bad { color: var(--critical); }
.muted-sub.var-good { color: var(--good-text); }
.map-table select { min-width: 220px; max-width: 100%; }
.map-table tr.unmapped td:first-child strong { color: var(--muted); font-weight: 600; }
.link-cell { min-width: 220px; }
.link-input { width: 170px; padding: 4px 7px !important; font-size: 12.5px; }
.suggest {
  display: inline-block; margin: 3px 4px 0 0; padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--border); background: #eef4fc; color: #1c5cab;
  font: 600 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; cursor: pointer;
}
.suggest:hover { background: #dcebfb; }
.job-links { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 12px; }
.job-links li { display: flex; align-items: center; gap: 6px; }
.job-links .linklike { font-size: 12px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--muted); }
.job-links .linklike:hover { color: var(--critical); text-decoration: underline; }
.empty-inline { color: var(--muted); font-size: 12.5px; margin: 0; }
.danger-zone { margin-top: 12px; }
.actuals-table td.muted { font-style: italic; }
@media (max-width: 900px) {
  .jonas-grid { grid-template-columns: 1fr; }
  .link-input { width: 140px; }
  .map-table select { min-width: 0; }
}
@media (max-width: 600px) {
  .map-table th:nth-child(3), .map-table td:nth-child(3) { display: none; }
}
:root[data-theme="dark"] .suggest { background: rgba(82, 172, 214, 0.14); color: #86c6e3; }
:root[data-theme="dark"] .suggest:hover { background: rgba(82, 172, 214, 0.24); }
:root[data-theme="dark"] .warn-text { color: #f0c46a; }
:root[data-theme="dark"] .var-bad,
:root[data-theme="dark"] .muted-sub.var-bad { color: #f07a7a; }

/* Phones (October 6 2026): form fields stack in one column. Two and three
   columns at phone width pushed the opportunity form past the right edge. */
@media (max-width: 600px) {
  .fgrid, .fgrid.three { grid-template-columns: minmax(0, 1fr); }
  .span2 { grid-column: auto; }
}

/* ---- stage evidence and interdivisional records (October 2026) ---- */
.ev-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12.5px;
  font-weight: 600; color: var(--ink-2); margin: 18px 0 8px; }
.ev-head:first-of-type { margin-top: 6px; }
.ev-next { margin: 0 0 4px; padding: 8px 12px; border-radius: var(--radius); font-size: 13px;
  background: #fff8e9; border: 1px solid #f0dcae; }
.ev-next.ev-ready { background: #eef8ee; border-color: #c9e8c9; }
.ev-open { font-weight: 600; font-size: 12px; margin-left: 6px; }
.ev-locked { margin: 0; }
.pursuit-note { margin: 0 0 14px; }
.pursuit-note p { margin: 0; }
.share-input { width: 120px; text-align: right; padding: 4px 7px; font-size: 12.5px; }
.stack-form { display: grid; gap: 10px; }
.stack-form label { display: grid; gap: 4px; font-size: 12.5px; }
.pct-cell { font-variant-numeric: tabular-nums; }
.type-tag { display: inline-block; font-size: 10.5px; font-weight: 650; letter-spacing: .02em;
  text-transform: uppercase; color: var(--muted); border: 1px solid var(--border);
  border-radius: 4px; padding: 0 4px; margin-left: 4px; vertical-align: 1px; }
:root[data-theme="dark"] .ev-next { background: rgba(224, 168, 46, 0.10); border-color: rgba(224, 168, 46, 0.30); }
:root[data-theme="dark"] .ev-next.ev-ready { background: rgba(12, 163, 12, 0.10); border-color: rgba(12, 163, 12, 0.30); }

/* six stage tiles under the KPIs (October 2026) */
.strip.six { grid-template-columns: repeat(6, 1fr); }
a.strip-item { color: inherit; }
a.strip-item:hover { border-color: var(--accent); }
@media (max-width: 1150px) { .strip.six { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px)  { .strip.six { grid-template-columns: 1fr 1fr; } }
@media print { .strip.six { grid-template-columns: repeat(6, 1fr); } }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.help-stages td { vertical-align: top; }
@media (max-width: 780px) { .help-stages { min-width: 640px; } }

/* Sign in with Microsoft (October 2026) */
.btn-microsoft { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }

/* ---- Import a division sheet (October 26 2026) ---- */
.import-table th.tick, .import-table td.tick { width: 44px; text-align: center; }
.import-table td.tick input { width: 16px; height: 16px; cursor: pointer; }
.import-table tr.group-row td { background: var(--page); border-top: 1px solid var(--grid);
  padding-top: 9px; padding-bottom: 7px; font-size: 13px; }
.import-table tr.group-row .mono { margin-right: 6px; }
.import-table tr.group-row .chip { margin-left: 6px; }
.import-table td.cell-old { color: var(--ink-2); width: 38%; }
.import-table td.cell-new { font-weight: 600; width: 38%; }
.value-table select { max-width: 360px; }
.import-table tr.row-off td:not(.tick) { color: var(--muted); }
.card-hint .linklike { background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--accent-strong); }
.card-hint .linklike:hover { text-decoration: underline; }
details.card > summary { cursor: pointer; list-style: revert; }
@media (max-width: 780px) {
  .import-table { min-width: 640px; }
  #sec-updates, #sec-new { overflow-x: auto; }
}
:root[data-theme="dark"] .card-hint .linklike { color: #86c6e3; }

/* ---- Sign-out after inactivity: the two minute warning (October 26 2026) ---- */
.session-warn { position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  z-index: 1000; width: min(560px, calc(100% - 32px)); display: flex; align-items: center;
  gap: 14px; padding: 14px 16px; background: var(--surface); color: var(--ink);
  border: 1px solid #f0dcae; border-left: 4px solid var(--warning); border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(11, 11, 11, 0.18); }
.session-warn[hidden] { display: none; }
.session-warn p { margin: 0; flex: 1; font-size: 13.5px; line-height: 1.45; }
.session-warn strong { font-variant-numeric: tabular-nums; }
.session-warn .btn { flex: none; white-space: nowrap; }
@media (max-width: 600px) {
  .session-warn { flex-direction: column; align-items: stretch; text-align: left; }
}
@media print { .session-warn { display: none !important; } }
:root[data-theme="dark"] .session-warn { border-color: rgba(224, 168, 46, 0.35);
  border-left-color: var(--warning); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }