/* Forge AI Auto-Allocation — TRACK-styled dashboard.
   Purple/violet brand, left-sidebar shell, light/dark themes. Dependency-free,
   no external fonts (system stack approximates Plus Jakarta Sans), CSP-safe
   (no inline styles). The HTML [hidden] attribute must always win. */
[hidden] { display: none !important; }
* { box-sizing: border-box; }

:root {
  --p1: #5b3eb8; --p2: #6d4be0; --p3: #8b5cf6; --p4: #a78bfa;
  --accent: #6d4be0; --p-soft: #ede7fa;
  --ok: #16a34a; --warn: #ea580c; --crit: #dc2626; --info: #0891b2;
  --bg: #f4f2fb; --panel: #ffffff; --text: #1f2440; --muted: #6b7280;
  --line: #e6e1f5; --line2: #cdbdf2; --ring: rgba(124,58,237,.18);
  --shadow-lg: 0 14px 34px -18px rgba(80,40,140,.45);
  /* --card / --chip-bg are theme-aware surfaces used by stat cards, sticky table
     headers, the top search box and chips. They MUST be declared in both themes:
     when they were only referenced as var(--card, #fff) those surfaces stayed
     white in dark mode while the text went light, making them unreadable. */
  --card: #ffffff; --chip-bg: #efeafc;
}
:root[data-theme="dark"] {
  --accent: #a78bfa; --p-soft: #2a2350;
  --bg: #0f1020; --panel: #17182b; --text: #e8e6f5; --muted: #9aa0b5;
  --line: #262844; --line2: #4a3f7d; --ring: rgba(167,139,250,.22);
  --shadow-lg: 0 14px 34px -18px rgba(0,0,0,.6);
  --card: #1c1d33; --chip-bg: #2a2350;
}

body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  font-size: 14.5px; line-height: 1.5;
}
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.01em; }
.muted { color: var(--muted); font-size: 12.5px; }
.num { text-align: right; }
.emblem {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 11px; color: #fff; font-weight: 800;
  background: linear-gradient(135deg, var(--p2), var(--p3)); flex: 0 0 auto;
}

/* ---- Buttons ---- */
.btn {
  border: 0; border-radius: 9px; padding: 8px 14px; cursor: pointer;
  font-size: 13px; font-weight: 700; font-family: inherit;
  transition: filter .15s ease, transform .12s ease;
}
.btn.primary { background: linear-gradient(135deg, var(--p2), var(--p3)); color: #fff; }
.btn.ghost { background: transparent; color: var(--text); border: 1.5px solid var(--line2); }
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px); }
/* Keyboard focus indicator. Inputs already had a focus ring but buttons, sidebar
   items and the theme/remove icon buttons had none, so tabbing through the app
   left no visible focus (WCAG 2.4.7). :focus-visible keeps mouse clicks clean. */
.btn:focus-visible, .iconbtn:focus-visible, button.rm:focus-visible,
.sb-item:focus-visible, .stat-card:focus-visible, .hero-tile.clickable:focus-visible,
.pw-wrap .eye:focus-visible, .chip .rm:focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--ring); border-radius: 9px;
}
.iconbtn {
  background: transparent; border: 1.5px solid var(--line2); color: var(--text);
  border-radius: 9px; width: 38px; height: 34px; cursor: pointer; font-size: 15px;
}
button.rm {
  background: transparent; color: var(--crit); border: 1.5px solid var(--line2);
  border-radius: 7px; padding: 4px 10px; font-size: 12px; cursor: pointer; font-weight: 700;
}

/* ---- Sign in ---- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card {
  background: var(--panel); border: 1.5px solid var(--line2); border-radius: 18px;
  padding: 26px 28px; width: 100%; max-width: 400px; box-shadow: var(--shadow-lg);
}
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.brand-name { font-weight: 800; font-size: 16px; }
.brand-sub { color: var(--muted); font-size: 12px; }
.login-card h2 { font-size: 18px; margin-bottom: 14px; }
.fld { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--muted);
  margin-bottom: 12px; align-items: stretch; text-align: left; }
/* Controls fill their labelled field. Without this they sized to their content,
   so a text input ended up narrower than its own label and the field looked
   ragged next to a wide <select> in the same row. */
.fld > input, .fld > select, .fld > textarea { width: 100%; box-sizing: border-box; }
.chk { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 12px; }
input, select {
  background: var(--bg); color: var(--text); border: 1.5px solid var(--line2);
  border-radius: 8px; padding: 8px 10px; font-family: inherit; font-size: 13.5px;
}
input:focus, select:focus { outline: none; box-shadow: 0 0 0 3px var(--ring); border-color: var(--p3); }
.msg { color: var(--muted); font-size: 13px; min-height: 16px; }

/* show/hide password eye */
.pw-wrap { position: relative; display: flex; align-items: center; margin-bottom: 12px; }
.pw-wrap input { flex: 1 1 auto; padding-right: 4.4rem; width: 100%; }
.pw-wrap .eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  padding: 4px 10px; font-size: 12px; cursor: pointer; border: 1.5px solid var(--line2);
  border-radius: 6px; background: var(--p-soft); color: var(--accent); font-weight: 700;
}

/* ---- App shell ---- */
.shell { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; }
.sidebar {
  background: var(--panel); border-right: 1.5px solid var(--line); padding: 18px 14px;
  display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh;
}
.sb-brand { display: flex; align-items: center; gap: 11px; padding: 4px 6px 14px; }
.sb-brand .txt .brand-name { font-size: 15px; }
.sb-section { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; padding: 14px 10px 6px; }
.sb-item {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  background: transparent; border: 0; color: var(--text); font-family: inherit;
  font-size: 13.5px; font-weight: 600; padding: 10px 12px; border-radius: 10px; cursor: pointer;
  transition: background .15s ease, transform .12s ease;
}
.sb-item .ic { font-size: 16px; }
.sb-item:hover { background: var(--p-soft); transform: translateX(2px); }
.sb-item.on { background: linear-gradient(135deg, var(--p2), var(--p3)); color: #fff; }
.sb-foot { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 8px 4px;
  border-top: 1.5px solid var(--line); }
.sb-foot .av { display: inline-flex; align-items: center; justify-content: center; width: 34px;
  height: 34px; border-radius: 50%; background: var(--p-soft); color: var(--accent); font-weight: 800; }
.sb-foot .nm { font-weight: 700; font-size: 13px; }
.sb-foot .ro { color: var(--muted); font-size: 11.5px; }

.content { min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center;
  justify-content: space-between; padding: 14px 28px; background: var(--bg);
  border-bottom: 1.5px solid var(--line);
}
.page-title { font-size: 18px; font-weight: 800; }
.crumbs { color: var(--muted); font-size: 12px; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.status { color: var(--muted); padding: 10px 28px 0; }
.foot { color: var(--muted); font-size: 11.5px; padding: 18px 28px 28px; }

.tab { padding: 20px 28px; animation: fadeUp .26s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* ---- Panels with per-tab accent stripe ---- */
.panel {
  position: relative; background: var(--panel); border: 1.5px solid var(--line2);
  border-radius: 16px; padding: 18px 20px 18px 24px; margin-bottom: 20px; overflow: hidden;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.panel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: linear-gradient(180deg, var(--p2), var(--p3)); }
.panel:hover { box-shadow: 0 0 0 3px var(--ring), var(--shadow-lg); }
.panel h2 { font-size: 16px; margin-bottom: 12px; }
.panel h3 { font-size: 14px; margin-bottom: 12px; }
.panel.phase2 { border-style: dashed; }
#tab-sum .panel::before { background: linear-gradient(180deg, #0891b2, #22d3ee); }
#tab-prod .panel::before { background: linear-gradient(180deg, #2563eb, #60a5fa); }
#tab-aud .panel::before { background: linear-gradient(180deg, #ea580c, #f59e0b); }
#tab-cfg .panel::before { background: linear-gradient(180deg, #16a34a, #34d399); }

/* ---- Hero stat cards ---- */
.hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin-bottom: 20px; }
.hero-stat {
  background: var(--panel); border: 1.5px solid var(--line2); border-radius: 16px; padding: 16px 18px;
  transition: transform .18s ease, box-shadow .16s ease, border-color .16s ease;
}
.hero-stat:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--p4); }
.hero-stat .k { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.hero-stat .v { font-size: 30px; font-weight: 800; margin-top: 6px; }
.hero-stat.ok .v { color: var(--ok); }
.hero-stat.warn .v { color: var(--warn); }
.hero-stat.crit .v { color: var(--crit); }

/* ---- Tables + key/value ---- */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 600; }
table { width: 100%; border-collapse: collapse; margin-top: 8px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
th { color: var(--muted); font-weight: 700; font-size: 12.5px; }
th.num, td.num { text-align: right; }
ul { padding-left: 18px; margin: 8px 0 0; }
li { margin: 5px 0; }

/* ---- Forms in config ---- */
form { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin: 0 0 10px; }
.btnrow { display: flex; gap: 10px; margin: 4px 0 10px; align-items: end; }

/* ---- Summary per-user total footer row ---- */
tfoot .total-row td { font-weight: 800; border-top: 2px solid var(--line2, #d9d2f2);
  background: var(--chip-bg, #f6f3fd); }

/* ---- Reassign tab: bulk search + audit trail ---- */
.panel.accent { border-left: 4px solid #7a5bd6; }
.fld.block { display: block; }
.fld.block textarea { width: 100%; box-sizing: border-box; margin-top: 5px; resize: vertical;
  min-height: 62px; background: var(--bg); color: var(--text);
  border: 1.5px solid var(--line2); border-radius: 10px; padding: 10px 12px;
  font: inherit; }
.rs-controls { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end;
  justify-content: space-between; }
.rs-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.rs-filters .fld { margin-bottom: 0; }
.rs-actions { display: flex; align-items: center; gap: 14px; }
.rs-actions .chk { margin-bottom: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Date-range bar + subscribe row (Summary / Productivity) ---- */
.daterow { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.daterow .quick { margin: 0; flex-wrap: wrap; }
.daterow .quick .btn { padding: 6px 10px; }
.panel-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.panel-head h2 { margin: 0; }
.subrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin: 0; }
#sub-list { margin: 6px 0 12px; }

/* ---- Digest send-times picker ---- */
.digest-times { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 8px 0; }
.digest-times .chk { display: inline-flex; align-items: center; gap: 6px; }
.digest-times input[type="time"] { padding: 4px 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px;
  border-radius: 999px; background: var(--chip-bg, #efeafc); font-size: 13px; }
.chip .rm { border: 0; background: transparent; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }

/* ---- Allocation: Tickets / Alerts / Status / Activity ---- */
.tablewrap { overflow-x: auto; }
.tablewrap.scroll { max-height: 420px; overflow: auto; border: 1px solid var(--line, #eee); border-radius: 10px; }
.tablewrap.scroll thead th { position: sticky; top: 0; z-index: 1; background: var(--card, #fff); }
.mini { font-size: 12px; margin: 0 0 8px; }
.hero-tile.clickable { cursor: pointer; border: 0; background: transparent; color: inherit;
  font: inherit; padding: 6px 10px; border-radius: 10px; transition: background .15s; }
.hero-tile.clickable:hover { background: rgba(255,255,255,.18); }
.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.pill.ok { background: #e3f6ea; color: #197a3d; }
.pill.warn { background: #fdeede; color: #9a5b00; }
.alerts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.alerts .alert { color: #b42318; font-weight: 600; background: #fdeceb; border-left: 3px solid #e5534b;
  padding: 6px 10px; border-radius: 6px; }
.activity { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.activity .act-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 6px 0;
  border-bottom: 1px solid var(--line, #eee); }
.act-who { font-weight: 700; }
.act-tag { font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px;
  background: var(--chip-bg, #efeafc); color: var(--p3, #6a3fd6); }
.act-txt { flex: 1; }
.act-when { color: var(--muted, #888); font-size: 12.5px; }

/* ---- Persistent hero band + top search ---- */
.top-search { display: flex; gap: 8px; align-items: center; flex: 1; max-width: 460px; margin: 0 16px; }
.top-search input { flex: 1; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line, #e5e2ef);
  background: var(--card, #fff); color: inherit; }
.hero-band { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between;
  padding: 20px 24px; border-radius: 16px; margin: 4px 0 16px;
  background: linear-gradient(100deg, #34c471 0%, #2bb8a3 45%, #3a86e0 100%); color: #fff;
  transition: background .25s ease; }
/* Per-tab banner identity. Each tab owns a gradient so the active context is
   obvious at a glance; the tile markup and text colour are shared, so only the
   background changes. Hues are kept dark enough for white text to stay above
   4.5:1 contrast. */
.hero-band[data-tab="reassign"] { background: linear-gradient(100deg, #7b5cd6 0%, #6a4bc4 45%, #4d3aa8 100%); }
.hero-band[data-tab="sum"]      { background: linear-gradient(100deg, #1e88a8 0%, #2a6fb0 45%, #35509e 100%); }
.hero-band[data-tab="prod"]     { background: linear-gradient(100deg, #d1663a 0%, #c4512f 45%, #a33c46 100%); }
.hero-band[data-tab="aud"]      { background: linear-gradient(100deg, #4a5568 0%, #3d4657 45%, #2f3745 100%); }
.hero-band[data-tab="cfg"]      { background: linear-gradient(100deg, #2f6f5e 0%, #2b5f5c 45%, #2a4d5e 100%); }
.hero-welcome .hero-hi { font-size: 20px; font-weight: 800; }
.hero-welcome .hero-sub { font-size: 13px; opacity: .9; margin-top: 2px; }
/* Tiles sit hard right and use the full width the banner already reserves, so
   the empty middle band is no longer wasted. margin-left:auto pushes the group
   to the trailing edge; flex-wrap keeps it safe when the tile count grows. */
.hero-stats { display: flex; flex-wrap: wrap; gap: 26px; margin-left: auto;
  justify-content: flex-end; }
/* Below this the welcome text and tiles stack, so forcing right alignment would
   look broken -- fall back to the natural left edge. */
@media (max-width: 900px) {
  .hero-stats { margin-left: 0; justify-content: flex-start; }
}
.hero-tile { text-align: center; min-width: 84px; }
.hero-tile .hv { font-size: 26px; font-weight: 800; line-height: 1; }
.hero-tile .hk { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; opacity: .92; margin-top: 4px; }
/* Icon chip above the number. These moved up from the duplicate white stat-card
   row that used to sit under the banner; a translucent white chip keeps them
   legible against the banner gradient without needing per-tile colours. */
.hero-tile .hi { display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin: 0 auto 6px; border-radius: 8px;
  background: rgba(255, 255, 255, .22); font-size: 14px; line-height: 1; }
.hero-tile.crit .hv { color: #ffe0dd; }
.hero-tile.warn .hv { color: #fff3d6; }
/* Hero-tile trend sparkline (SVG, CSP-safe presentation attrs) */
.hero-tile .spark { display: block; width: 88px; height: 22px; margin: 6px auto 0; overflow: visible; }
.spark .spark-line { stroke: rgba(255,255,255,.9); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.spark .spark-dot { fill: #fff; }
.hero-tile.crit .spark .spark-line { stroke: #ffd7d2; } .hero-tile.crit .spark .spark-dot { fill: #ffd7d2; }
.hero-tile.warn .spark .spark-line { stroke: #ffe9c2; } .hero-tile.warn .spark .spark-dot { fill: #ffe9c2; }
.hero-tile.ok   .spark .spark-line { stroke: #d6ffe6; } .hero-tile.ok   .spark .spark-dot { fill: #d6ffe6; }

/* ---- Allocation stat cards (white, number + label + icon + sparkline) ---- */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px; margin: 4px 0 16px; }
.stat-card { text-align: left; cursor: pointer; font: inherit; color: inherit;
  background: var(--card, #fff); border: 1px solid var(--line, #ece9f5);
  border-radius: 16px; padding: 16px 18px 12px; box-shadow: 0 1px 2px rgba(16,12,40,.05);
  transition: box-shadow .15s, transform .1s, border-color .15s; display: flex; flex-direction: column; gap: 10px; }
.stat-card:hover { box-shadow: 0 6px 18px rgba(16,12,40,.10); transform: translateY(-1px);
  border-color: #d9d2f2; }
.stat-card .sc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.stat-card .sc-num { font-size: 30px; font-weight: 800; line-height: 1; }
.stat-card .sc-label { font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted, #8b86a3); margin-top: 6px; font-weight: 700; }
.stat-card .sc-icon { flex: none; width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
  background: #eef0fb; }
.stat-card.c-open  .sc-icon { background: #eef0fb; }
.stat-card.c-alloc .sc-icon { background: #e3f6ea; }
.stat-card.c-await .sc-icon { background: #fdeff0; }
.stat-card.c-pend  .sc-icon { background: #fdf3e0; }
.stat-card .sc-spark { width: 100%; height: 30px; display: block; }
.stat-card .sc-spark .spark-line { stroke: #7a5bd6; stroke-width: 2; }
.stat-card .sc-spark .spark-dot { fill: #7a5bd6; }
.stat-card.c-alloc .sc-spark .spark-line { stroke: #2a9d5c; } .stat-card.c-alloc .sc-spark .spark-dot { fill: #2a9d5c; }
.stat-card.c-await .sc-spark .spark-line { stroke: #e5534b; } .stat-card.c-await .sc-spark .spark-dot { fill: #e5534b; }
.stat-card.c-pend  .sc-spark .spark-line { stroke: #d18a1b; } .stat-card.c-pend  .sc-spark .spark-dot { fill: #d18a1b; }
.stat-card .sc-spark-ph { height: 30px; font-size: 10.5px; color: var(--muted, #a8a3bd);
  display: flex; align-items: flex-end; }

/* ---- Global 5-row scroll: show ~5 rows then scroll top→bottom ---- */
/* Lists: cap height to ~5 rows and scroll vertically. */
.scroll5 { max-height: 200px; overflow-y: auto; }
/* Tables: cap the wrapper to ~5 rows + sticky header, scroll the rest. */
.tablewrap.scroll5 { max-height: 220px; overflow: auto; border: 1px solid var(--line, #eee); border-radius: 10px; }
.tablewrap.scroll5 thead th { position: sticky; top: 0; z-index: 1; background: var(--card, #fff); }

/* ---- Donut charts (CSP-safe inline SVG) ---- */
.donut-wrap { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.donut-svg { width: 140px; height: 140px; flex: none; }
.donut-track { stroke: var(--line, #eceaf3); }
.donut-center { fill: currentColor; font-size: 8px; font-weight: 800; }
.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; min-width: 130px; }
.legend li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.legend .sw { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.legend .lg-lab { flex: 1; }
.legend .lg-val { font-weight: 700; }

/* ---- Charts (CSP-safe horizontal bars; widths set via JS) ---- */
.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.chart-grid .panel { margin-bottom: 0; }
.bars { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.bar-row { display: grid; grid-template-columns: 120px 1fr 42px; align-items: center; gap: 10px; }
.bar-label { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { background: var(--p-soft); border-radius: 8px; height: 16px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--p2), var(--p3)); min-width: 2px; }
.bar-val { text-align: right; font-weight: 700; font-size: 12.5px; }
/* Config uses an explicit 12-column grid rather than auto-fit. auto-fit chose its
   own column count from the available width, so the last row was left ragged and
   a short panel (Exclusions) dangled alone beside a tall one — that was the source
   of the large gaps. Fixed 6/6 pairs keep every row balanced; `align-items: start`
   stops a short panel being stretched into empty space to match a tall neighbour. */
/* `stretch` (not `start`) so the two panels in a row are always the SAME height
   and the grid reads as an even set of boxes. That only looks right because the
   tall content inside each panel scrolls (see the scroll caps below) -- without
   those caps, stretching would leave a big void in the shorter panel. */
.cfg-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px;
  align-items: stretch; }
.cfg-grid > .panel { grid-column: span 6; margin-bottom: 0; min-width: 0; }
.cfg-grid > .panel.wide { grid-column: 1 / -1; }
@media (max-width: 1080px) { .cfg-grid > .panel { grid-column: 1 / -1; } }

/* ---- Admin (Config) density ----
   The admin panels are short forms, not data views, so they get tighter padding
   and a two-column field grid. Previously each field sat on its own full-width
   row, which made every box far taller than its content needed and pushed the
   panels apart. `align-items: start` above also stops a short panel from being
   stretched to match a tall neighbour. */
#tab-cfg .panel { padding: 14px 16px 14px 20px; }
#tab-cfg .panel h3 { margin-bottom: 8px; font-size: 13.5px; letter-spacing: .01em; }
#tab-cfg .fld { margin-bottom: 0; }
#tab-cfg .chk { margin-bottom: 0; }
#tab-cfg .msg { margin: 8px 0 0; }
#tab-cfg .btnrow { margin-top: 10px; }
#tab-cfg form { display: flex; flex-direction: column; gap: 10px; }
#tab-cfg .panel ul { margin-top: 10px; }
/* Scroll caps keep every admin panel a similar height so the grid stays even.
   The Users table is the tallest element here, so it gets the tightest cap and
   scrolls top-to-bottom; the two short lists get the same treatment. */
#tab-cfg .tablewrap.scroll5 { max-height: 168px; }
#tab-cfg #rg-list, #tab-cfg #exclusions-list { max-height: 168px; overflow-y: auto; }
/* The bulk panel is full width and holds the preview, so it can breathe more. */
#tab-cfg .panel.wide .tablewrap.scroll5 { max-height: 220px; }
/* Fixed two-up field rows. auto-fit picked 3 columns in a half-width panel, which
   left the 4th field (Users → Allocation) stranded alone on its own row; a fixed
   2-up grid renders 4 fields as a tidy 2x2 block and 2 fields as one row. */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px; align-items: end; }
.form-grid.one { grid-template-columns: 1fr; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
/* A form's action button should hug its fields, not stretch across the panel. */
#tab-cfg form > .btn { align-self: start; }
/* Section hint under a heading: explains the panel without a whole paragraph. */
.panel-hint { color: var(--muted); font-size: 11.5px; margin: -4px 0 8px; }

/* ---- Manager mapping: file picker beside the paste box ---- */
.mgr-io { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 12px; align-items: start; margin-bottom: 4px; }
.mgr-io .fld { margin-bottom: 0; }
.mgr-io textarea { font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12.5px; }
@media (max-width: 780px) { .mgr-io { grid-template-columns: 1fr; } }
#tab-cfg .mgr-current-h { margin-top: 14px; }
/* Rejected preview rows read as a warning without relying on colour alone --
   the Status column always spells out the reason in text too. */
tr.row-bad td { background: rgba(220, 38, 38, .07); }
tr.row-bad td:last-child { color: var(--crit); font-weight: 700; }

/* ---- Footer meta line (last refreshed / last allocated) ---- */
.foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.foot-sep { opacity: .5; }

@media (max-width: 820px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; }
  .sb-foot { width: 100%; }
}

/* Respect the OS "reduce motion" setting: drop the tab fade-in and every hover
   translate/lift. Colour and shadow feedback is kept so nothing loses affordance. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
      transition-duration: .001ms !important; }
  .tab { animation: none; }
  .sb-item:hover, .hero-stat:hover, .stat-card:hover, .panel:hover,
  .btn:active { transform: none; }
}