:root {
  --ink: #1b1d22;
  --muted: #6b7280;
  --line: #e4e6ea;
  --surface: #ffffff;
  --page: #f5f6f8;
  --signal: #2f5fe0;
  --signal-ink: #1c3da8;
  --danger: #b3421a;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: var(--sans); color: var(--ink);
  background: var(--page); font-size: 15px; line-height: 1.5;
}
a { color: var(--signal-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
  display: flex; align-items: center; gap: 24px;
  padding: 0 24px; height: 52px; background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.topbar nav { display: flex; gap: 18px; }
.topbar nav a { color: var(--ink); }
.brand { font-family: var(--mono); font-weight: 600; color: var(--ink); letter-spacing: -0.5px; }
.brand .dot { color: var(--signal); }
.brand.big { font-size: 20px; }
.logout { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.who { color: var(--muted); font-size: 13px; }

.wrap { max-width: 980px; margin: 0 auto; padding: 28px 24px 64px; }
h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.3px; margin: 0 0 16px; }
h2 { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.hint { color: var(--muted); font-size: 13px; margin: 0 0 14px; }
.empty { color: var(--muted); }
.back { font-size: 13px; color: var(--muted); }
.code-line, .code { font-family: var(--mono); font-size: 12px; color: var(--signal-ink); }

.cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.cards a {
  display: flex; flex-direction: column; gap: 6px; padding: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px; color: var(--ink);
}
.cards a:hover { border-color: var(--signal); text-decoration: none; }
.cards strong { font-weight: 600; }
.cards .desc { color: var(--muted); font-size: 13px; }

.branchbar { margin: 8px 0 20px; }
label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 12px; }
input, select, textarea {
  display: block; width: 100%; margin-top: 4px; padding: 9px 10px;
  border: 1px solid var(--line); border-radius: 6px; font-family: var(--sans); font-size: 14px; color: var(--ink);
  background: var(--surface);
}
textarea { font-family: var(--mono); font-size: 13px; resize: vertical; }
select { max-width: 360px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--signal); outline-offset: -1px; border-color: var(--signal); }

button.primary {
  background: var(--signal); color: #fff; border: 0; border-radius: 6px;
  padding: 9px 16px; font-size: 14px; font-weight: 500; cursor: pointer;
}
button.primary:hover { background: var(--signal-ink); }
.linkbtn { background: none; border: 0; color: var(--signal-ink); padding: 0; font-size: 13px; cursor: pointer; }
.linkbtn:hover { text-decoration: underline; }
.linkbtn.danger { color: var(--danger); }

.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
table.data { border-collapse: collapse; width: 100%; background: var(--surface); font-size: 13px; }
table.data th, table.data td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data th { font-weight: 600; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; }
table.data tr:last-child td { border-bottom: 0; }
table.data .mono { font-family: var(--mono); font-size: 12px; }
.rowcount { color: var(--muted); font-size: 12px; margin-top: 8px; }
.sub { display: block; color: var(--muted); font-size: 12px; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 20px; margin-bottom: 18px; }
.panel table.data { border: 1px solid var(--line); border-radius: 6px; margin-top: 8px; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin-bottom: 8px; }
.grid .full { grid-column: 1 / -1; }
.check { display: flex; align-items: center; gap: 8px; }
.check input { width: auto; margin: 0; }
.check.inline { display: inline-flex; margin: 0 12px 6px 0; font-size: 13px; color: var(--ink); }
.rolepick { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; }
.rolepick label { margin: 0; }

.alert { background: #fdece6; border: 1px solid #f3c3b0; color: #8a3414; padding: 10px 12px; border-radius: 6px; margin-bottom: 16px; font-size: 14px; }
.alert.ok { background: #e9f3ec; border-color: #bcdcc6; color: #1f6b3a; }

.centered { display: flex; min-height: 100vh; align-items: center; justify-content: center; background: var(--page); }
.card.login { width: 320px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 28px; }
.card.login .brand { display: block; margin-bottom: 20px; text-align: center; }
.card.login button { width: 100%; margin-top: 4px; }

@media (max-width: 560px) {
  .grid { grid-template-columns: 1fr; }
  .topbar { gap: 14px; padding: 0 14px; }
  .who { display: none; }
}

/* inline region editor in the branches table */
.rinline { display: flex; gap: 6px; align-items: center; margin: 0; }
.rinline input { width: 150px; margin: 0; padding: 4px 6px; font-size: 12px; }
tr.rowoff td { opacity: 0.5; }

/* ---- report view ---- */
.report-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 4px 0 6px; }
.report-head h1 { margin: 0 0 2px; }
.branchbar { margin: 0; }
.bsel { margin: 0; }
.bsel select { min-width: 260px; }

.ctx { display: flex; align-items: center; gap: 10px; margin: 10px 0 16px; }
.ctx-region { font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); background: var(--page); border: 1px solid var(--line); padding: 3px 9px; border-radius: 999px; }
.ctx-branch { font-weight: 600; font-size: 16px; }

.toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.toolbar .spacer { flex: 1; }
.rfilter { width: 240px; margin: 0; padding: 8px 10px; }
.btn-ghost { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 8px 13px; font-size: 13px; cursor: pointer; color: var(--ink); }
.btn-ghost:hover { border-color: var(--signal); color: var(--signal-ink); }

.card-table { max-height: 64vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
table.report { font-size: 13px; }
table.report thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; white-space: nowrap; box-shadow: inset 0 -1px 0 var(--line); border-bottom: 0; }
table.report th.sortable { cursor: pointer; user-select: none; }
table.report th.sortable:hover { color: var(--signal-ink); }
table.report th.sort-asc::after { content: ' \2191'; color: var(--signal); }
table.report th.sort-desc::after { content: ' \2193'; color: var(--signal); }
table.report th.num, table.report td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.report tbody tr:nth-child(even) { background: #fafafb; }
table.report tbody tr:hover { background: #eef3ff; }

.placeholder { border: 1px dashed var(--line); border-radius: 10px; padding: 40px; text-align: center; color: var(--muted); background: var(--surface); }

/* ---- report edit form ---- */
.editform textarea { min-height: 360px; }
.actions { display: flex; gap: 12px; align-items: center; margin-top: 8px; }
a.btn-ghost { text-decoration: none; display: inline-block; }
a.btn-ghost:hover { text-decoration: none; }

/* ---- user scope / role report pickers ---- */
.muted { color: var(--muted); font-size: 13px; }
.bgrp { margin: 8px 0 12px; }
.bgrp-h { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); margin: 6px 0 4px; border-bottom: 1px solid var(--line); padding-bottom: 3px; }

/* ---- report selector ---- */
.selector { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); margin: 6px 0 16px; }
.sel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.sel-title { font-weight: 600; font-size: 14px; }
.sel-actions { display: flex; gap: 8px; align-items: center; }
.sel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; padding: 14px 16px; max-height: 46vh; overflow: auto; }
.sel-region { border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.region-all { margin: 0 0 6px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.sel-branches { display: flex; flex-direction: column; gap: 2px; }
.sel-branches .check.inline { margin: 0; }

.totalrow td { border-top: 2px solid var(--ink); background: var(--page); }
table.report tfoot { position: sticky; bottom: 0; }

.access-cell { font-size: 12px; line-height: 1.5; }
.badge.sa { display: inline-block; background: #fdece6; color: #8a3414; border: 1px solid #f3c3b0; border-radius: 999px; padding: 1px 9px; font-size: 11px; }

/* ===== report selector: multiselect dropdowns ===== */
.selector { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); margin: 6px 0 18px; padding: 14px 16px; }
.sel-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ms { position: relative; }
.ms-toggle { display: inline-flex; align-items: center; gap: 8px; min-width: 180px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--page); font: inherit; font-size: 14px; cursor: pointer; color: var(--ink); }
.ms-toggle:hover { border-color: var(--accent); }
.ms-label { font-weight: 600; }
.ms-count { color: var(--accent); font-weight: 600; }
.ms-caret { margin-left: auto; color: var(--muted); font-size: 11px; }
.ms-panel { display: none; position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 240px; max-height: 320px; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(15,23,42,0.14); padding: 8px; }
.ms-panel-wide { min-width: 360px; }
.ms.open .ms-panel { display: block; }
.ms-panel .check { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; font-size: 13px; white-space: nowrap; }
.ms-panel .check:hover { background: var(--page); }
.ms-grp + .ms-grp { margin-top: 6px; }
.ms-grp-h { font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); padding: 6px 6px 3px; border-bottom: 1px solid var(--line); margin-bottom: 2px; position: sticky; top: -8px; background: var(--surface); }
.sel-actions { display: flex; justify-content: center; gap: 10px; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }

/* ===== themed report table (bordered) ===== */
.tablewrap { border: 1px solid var(--line); border-radius: 12px; overflow: auto; background: var(--surface); }
table.report.bordered { border-collapse: collapse; width: auto; font-variant-numeric: tabular-nums; font-size: 13.5px; }
table.report.bordered th, table.report.bordered td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; }
table.report.bordered thead th { background: var(--page); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); position: sticky; top: 0; z-index: 2; }
table.report.bordered td.num, table.report.bordered th.num { text-align: right; font-feature-settings: "tnum" 1; }
table.report.bordered tbody tr:nth-child(even) td { background: rgba(15,23,42,0.018); }
table.report.bordered td.rcell { color: var(--muted); font-size: 12px; }
table.report.bordered tr.subtotal td { background: #eef3ff; font-weight: 600; border-top: 2px solid var(--accent); color: var(--ink); }
table.report.bordered tfoot tr.grandtotal td { background: var(--ink); color: #fff; font-weight: 700; border-color: var(--ink); font-size: 14px; }
table.report.bordered tfoot { position: sticky; bottom: 0; }

/* === alignment fix: sticky + collapsed borders detached header from body === */
table.report.bordered thead th { position: static; top: auto; box-shadow: none; }
table.report.bordered tfoot,
table.report.bordered tfoot tr.grandtotal td { position: static; bottom: auto; }
table.report.bordered { table-layout: auto; }

.ms-all { border-bottom: 1px solid var(--line); margin-bottom: 4px; padding-bottom: 6px !important; position: sticky; top: -8px; background: var(--surface); }

/* === bulletproof: force proper table layout, immune to any class collision === */
table.report.bordered { display: table !important; }
table.report.bordered thead { display: table-header-group !important; }
table.report.bordered tbody { display: table-row-group !important; }
table.report.bordered tfoot { display: table-footer-group !important; }
table.report.bordered tr { display: table-row !important; }
table.report.bordered th, table.report.bordered td { display: table-cell !important; }

.fy-pick { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--page); font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.fy-pick select { border: none; background: transparent; font: inherit; font-size: 14px; font-weight: 700; color: var(--ink); text-transform: none; letter-spacing: normal; padding: 0; margin: 0; cursor: pointer; }
.fy-pick select:focus { outline: none; }
.sole-branch { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--page); font-size: 14px; }

/* ===== KPI target table ===== */
table.report.bordered.kpi thead .kpi-top th { text-align: center; }
table.report.bordered.kpi thead .grp-o { background: #e8f0ff; }
table.report.bordered.kpi thead .grp-v { background: #e9f7ef; }
table.report.bordered.kpi thead .grp-f { background: #fdf3e7; }
table.report.bordered.kpi td.pctcell.good { color: #137333; font-weight: 600; }
table.report.bordered.kpi td.pctcell.low { color: #b3261e; font-weight: 600; }
table.report.bordered.kpi tr.subtotal td.good, table.report.bordered.kpi tr.subtotal td.low { font-weight: 700; }

/* ===== targets upload ===== */
.tgt-drop { border: 1px dashed var(--line); border-radius: 10px; padding: 18px; background: var(--page); }
.tgt-area { width: 100%; min-height: 160px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; margin-top: 10px; }
.tgt-result { margin-top: 12px; }
.tgt-errs { color: #b3261e; font-size: 13px; max-height: 160px; overflow: auto; }

/* ===== collapsible region groups ===== */
table.report.bordered.collapsible .rgroup:not(.open) .brow { display: none !important; }
.collapsible .rghead { cursor: pointer; }
.collapsible .rghead td { background: var(--page); font-weight: 600; border-top: 1.5px solid var(--line); }
.collapsible .rghead:hover .rgname { background: #eef2fb; }
.collapsible .rghead .chev { display: inline-block; margin-right: 6px; color: var(--muted); transition: transform .15s; font-size: 13px; vertical-align: -1px; }
.collapsible .rgroup.open .rghead .chev { transform: rotate(90deg); }
.collapsible .rgname { font-weight: 600; text-align: left; }
.collapsible .rgname .cnt { color: var(--muted); font-weight: 400; font-size: 11px; margin-left: 5px; }
.collapsible .bname { padding-left: 26px; }
.collapsible .idcol { text-align: left; }
.collapsible tfoot .idcol { background: var(--ink); color: #fff; }
.xall { font-size: 12px; }

/* ===== KPI pastel metric groups ===== */
table.report.bordered.kpi thead .kpi-top th { text-align: center; }
table.report.bordered.kpi thead .grp-o { background: #dde9ff; }
table.report.bordered.kpi thead .grp-v { background: #d7f0e2; }
table.report.bordered.kpi thead .grp-f { background: #fbe8cb; }
table.report.bordered.kpi thead .o { background: #e9f1ff; }
table.report.bordered.kpi thead .v { background: #e6f7ee; }
table.report.bordered.kpi thead .f { background: #fdf2df; }
table.report.bordered.kpi td.o { background: #f2f7ff !important; }
table.report.bordered.kpi td.v { background: #f0faf4 !important; }
table.report.bordered.kpi td.f { background: #fef8ee !important; }
table.report.bordered.kpi .pcol { border-right: 2px solid var(--line); }
table.report.bordered.kpi td.good { color: #137333; font-weight: 600; }
table.report.bordered.kpi td.low { color: #b3261e; }
table.report.bordered.kpi tfoot .grandtotal td { background: var(--ink) !important; color: #fff; }

/* ===== Lawrence & Mayo wordmark (overrides the old mono brand) ===== */
.brand { font-family: var(--sans); font-weight: 700; letter-spacing: -0.2px; color: var(--ink); }
.brand .brand-sub { font-weight: 500; color: var(--muted); }
.brand.big { font-size: 20px; }
.login-foot { margin: 16px 0 0; text-align: center; font-size: 13px; }

/* ===== user search ===== */
.searchbar { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; }
.searchbar input { max-width: 340px; margin: 0; padding: 8px 11px; }

/* ===== region colour chips (item 8) ===== */
.rchip { display: inline-block; padding: 1px 9px; border-radius: 999px; border: 1px solid var(--line); font-size: 11px; line-height: 1.8; margin: 1px 3px 1px 0; white-space: nowrap; vertical-align: middle; }
.regioncell { vertical-align: top; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rchip-check { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--c-bd, var(--line)); background: var(--c-bg, var(--page)); color: var(--c-ink, var(--ink));
  font-size: 13px; cursor: pointer; margin: 0; }
.rchip-check input { width: auto; margin: 0; }

/* region group headers in pickers get their region tint inline; keep base spacing */
.bgrp-h { border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; }

/* ===== role picker cards (assign roles to a user) ===== */
.role-pick { display: flex; gap: 11px; align-items: flex-start; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 8px; cursor: pointer; }
.role-pick:hover { border-color: var(--signal); }
.role-pick input { width: auto; margin: 3px 0 0; }
.role-pick-body { display: block; }
.role-pick-name { font-weight: 600; display: block; }
.role-pick-meta { font-size: 12px; color: var(--muted); display: block; margin-top: 3px; }
.role-pick-meta .rchip { line-height: 1.6; }

/* ===== per-branch role generator ===== */
.badge.auto { display: inline-block; background: #eef2fb; color: #3a4a78; border: 1px solid #cdd8f0; border-radius: 999px; padding: 0 8px; font-size: 10px; line-height: 1.7; text-transform: uppercase; letter-spacing: 0.4px; vertical-align: middle; }
.subpanel { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 16px; }
.subpanel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.subpanel-head h3 { margin: 0; font-size: 15px; }
.subpanel-head form { margin: 0; }
.pb-tools { display: flex; align-items: center; gap: 12px; margin: 6px 0 10px; flex-wrap: wrap; }
.pb-tools input { max-width: 260px; margin: 0; padding: 7px 10px; }
.pb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px 18px; max-height: 360px; overflow: auto; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--page); }
.pb-grid .bgrp { margin: 0; }
.pb-grid .pb-item { display: flex; margin: 2px 0; }

/* ===== data-source badges ===== */
.badge.src { display: inline-block; border-radius: 999px; padding: 0 9px; font-size: 10px; line-height: 1.7; text-transform: uppercase; letter-spacing: 0.4px; border: 1px solid; }
.badge.src.pg { background: #e9f3ec; color: #1f6b3a; border-color: #bcdcc6; }
.badge.src.mssql { background: #fde7f3; color: #8a2b5e; border-color: #f0c3da; }

/* ===== combined Winback + Calls view ===== */
.combo-card strong { display: block; }
table.report.bordered th.wcol, table.report.bordered td.wcol { background: rgba(47,95,224,0.045); }
table.report.bordered th.ccol, table.report.bordered td.ccol { background: rgba(138,43,94,0.05); }
table.report.bordered thead th.wcol { background: #eef3ff; }
table.report.bordered thead th.ccol { background: #fdeef6; }

/* ===== frozen panes: sticky header (vertical scroll) + sticky first column
        (horizontal scroll), in a capped-height scroll panel. All reports. ===== */
.tablewrap { max-height: 72vh; }
/* separate borders so sticky cells don't lose their lines on scroll */
table.report.bordered { border-collapse: separate; border-spacing: 0; }
table.report.bordered th, table.report.bordered td { border: 0; box-shadow: inset -1px -1px 0 var(--line); }
/* sticky column header row(s) */
table.report.bordered thead th { position: sticky; top: 0; z-index: 3; background: var(--page); box-shadow: inset -1px -1px 0 var(--line); }
/* KPI has a two-row header: top group row, then the Target/Actual/% row below it */
table.report.bordered.kpi thead tr.kpi-top th { top: 0; }
table.report.bordered.kpi thead tr.kpi-sub th { top: var(--kpi-h1, 34px); }
/* sticky first column (Region / branch) */
table.report.bordered thead th.idcol { position: sticky; left: 0; z-index: 5; }
table.report.bordered .rgname { position: sticky; left: 0; z-index: 2; }
table.report.bordered .bname { position: sticky; left: 0; z-index: 2; background: var(--surface); }
table.report.bordered tfoot .idcol { position: sticky; left: 0; z-index: 2; }
/* keep the dark grand-total + region tints opaque under the frozen column */
table.report.bordered.collapsible tfoot .idcol { background: var(--ink); color: #fff; }

/* ===== invite / set-password link ===== */
.invite-box { display: flex; gap: 8px; align-items: stretch; }
.invite-box input { flex: 1; margin: 0; font-family: var(--mono, monospace); font-size: 12px; background: var(--page); }
.invite-box button { white-space: nowrap; }

/* ===== frozen first column: solid divider so data doesn't bleed through ===== */
table.report.bordered thead th.idcol,
table.report.bordered .rgname,
table.report.bordered .bname,
table.report.bordered tfoot .idcol {
  box-shadow: inset -2px 0 0 var(--line), inset 0 -1px 0 var(--line);
}
/* branch cell keeps its region tint opaque; ensure no transparency under scroll */
table.report.bordered .bname { background-clip: padding-box; }

/* ===== report headers: centred, wrap long labels to two lines ===== */
/* ===== report headers: centred, wrap long labels to two lines ===== */
table.report.bordered thead th { text-align: center; white-space: normal; overflow-wrap: normal; word-break: normal; vertical-align: middle; line-height: 1.15; font-size: 11px; }
table.report.bordered thead th.idcol { text-align: left; font-size: 12px; }
table.report.bordered thead th.num { text-align: center; }
/* centre numeric data cells too, and keep "71.77 L" from breaking across lines */
table.report.bordered td.num { text-align: center; white-space: nowrap; }
table.report.bordered tfoot td.num, table.report.bordered tbody td.num { white-space: nowrap; }

/* ===== report table: compact — columns only as wide as content needs ===== */
table.report.bordered { width: auto; }
table.report.bordered th, table.report.bordered td { padding: 8px 12px; }

/* ============================================================
   VIBRANT THEME (v18) — fresh violet/pink/teal palette.
   Appended last so palette + accents win; freeze-panes, region
   tints, KPI/Winback header tints are preserved / re-asserted.
   ============================================================ */
:root {
  --signal: #6d28d9;
  --signal-ink: #5b21b6;
  --page: #f4f2fb;
}
body { background: linear-gradient(180deg, #f6f4fc 0%, #eef4fb 100%); }

/* Topbar → vibrant gradient brand bar */
.topbar {
  background: linear-gradient(90deg, #6d28d9 0%, #8b5cf6 48%, #0ea5e9 100%);
  border-bottom: 0;
  box-shadow: 0 2px 12px rgba(76, 29, 149, .28);
}
.topbar nav a, .topbar .who, .brand { color: #fff !important; }
.topbar nav a:hover { opacity: .85; text-decoration: none; }
.brand .dot { color: #fde047; }
.who { opacity: .9; }

/* Primary buttons → gradient with lift */
button.primary {
  background: linear-gradient(90deg, #7c3aed, #6d28d9);
  box-shadow: 0 2px 8px rgba(109, 40, 217, .3);
}
button.primary:hover { background: linear-gradient(90deg, #6d28d9, #5b21b6); }

/* Dashboard cards → colorful accent bar, hover lift */
.cards a {
  position: relative; border-radius: 12px; overflow: hidden;
  border: 1px solid #ece9f6; padding-left: 20px;
  box-shadow: 0 1px 3px rgba(24, 16, 54, .06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.cards a::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: #7c3aed;
}
.cards a:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(76, 29, 149, .16);
  border-color: #d9d2f2; text-decoration: none;
}
.cards li:nth-child(12n+1)  a::before { background: #6d28d9; } /* violet */
.cards li:nth-child(12n+2)  a::before { background: #ec4899; } /* pink */
.cards li:nth-child(12n+3)  a::before { background: #0ea5e9; } /* sky */
.cards li:nth-child(12n+4)  a::before { background: #10b981; } /* emerald */
.cards li:nth-child(12n+5)  a::before { background: #f59e0b; } /* amber */
.cards li:nth-child(12n+6)  a::before { background: #e11d48; } /* rose */
.cards li:nth-child(12n+7)  a::before { background: #4338ca; } /* indigo */
.cards li:nth-child(12n+8)  a::before { background: #0d9488; } /* teal */
.cards li:nth-child(12n+9)  a::before { background: #ea580c; } /* orange */
.cards li:nth-child(12n+10) a::before { background: #c026d3; } /* fuchsia */
.cards li:nth-child(12n+11) a::before { background: #65a30d; } /* lime */
.cards li:nth-child(12n+12) a::before { background: #06b6d4; } /* cyan */
.cards strong { color: #2b1a54; }
.combo-card { background: linear-gradient(135deg, #faf5ff, #eff6ff) !important; }
.combo-card::before { background: linear-gradient(180deg, #ec4899, #6d28d9) !important; }

/* Selector + table shells → soft shadow, warmer border */
.selector { box-shadow: 0 2px 10px rgba(24, 16, 54, .05); border-color: #e7e2f5; }
.card-table, .tablewrap { border-color: #e2ddf1; box-shadow: 0 2px 12px rgba(24, 16, 54, .06); }

/* Report header → violet gradient (keeps sticky + divider from earlier rules) */
table.report.bordered thead th {
  background: linear-gradient(180deg, #f3eefe, #ece5fb);
  color: #4c2c92;
}
table.report.bordered thead th.idcol { background: linear-gradient(180deg, #efe9fd, #e6ddfa); }

/* Region group header row → vibrant tint (inline region tint on .rgname still wins) */
.collapsible .rghead td { background: #f3eefe; border-top: 2px solid #d9ccf5; font-weight: 700; }
.collapsible .rghead:hover .rgname { filter: brightness(0.97); }

/* Grand total + subtotal → colored emphasis */
table.report.bordered tfoot .grandtotal td { background: linear-gradient(180deg, #efe9fd, #e7dffb); color: #3b2378; font-weight: 800; border-top: 2px solid #c9b8f0; }
table.report.bordered tr.subtotal td { background: #f7f4fe; }
table.report.bordered tbody tr.brow:hover td { background: #faf8ff; }

/* Re-assert KPI group + Winback header tints so they keep their identity */
table.report.bordered.kpi thead .grp-o, table.report.bordered.kpi thead .o { background: #e0ecff !important; }
table.report.bordered.kpi thead .grp-v, table.report.bordered.kpi thead .v { background: #d8f5e6 !important; }
table.report.bordered.kpi thead .grp-f, table.report.bordered.kpi thead .f { background: #ffedd0 !important; }
table.report.bordered thead th.wcol { background: #e6efff !important; }
table.report.bordered thead th.ccol { background: #ffe6f3 !important; }

/* ===== header contrast + brand/nav clarity fix ===== */
/* "Report" suffix was invisible (dark-muted text on the purple gradient) */
.brand .brand-sub { color: rgba(255, 255, 255, .68) !important; font-style: italic; }

/* Give the nav a distinct, tab-like look so it doesn't read as more brand text */
.topbar { gap: 8px; }
.topbar .brand { padding-right: 20px; margin-right: 4px; border-right: 1px solid rgba(255,255,255,.28); }
.topbar nav { gap: 4px; }
.topbar nav a {
  padding: 6px 14px; border-radius: 999px; font-weight: 600; font-size: 14px;
  transition: background .15s ease;
}
.topbar nav a:hover { background: rgba(255,255,255,.16); text-decoration: none; }
.topbar nav a.active { background: rgba(255,255,255,.24); }

/* ===== dashboard folder tile (grouped reports, e.g. "Promotions") ===== */
.folder-card {
  position: relative; display: block; border-radius: 12px; overflow: hidden;
  border: 1px solid #ece9f6; padding: 18px 20px 18px 20px;
  box-shadow: 0 1px 3px rgba(24, 16, 54, .06); background: var(--surface, #fff);
}
.folder-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: #f59e0b; }
.folder-card strong { display: block; color: #2b1a54; font-size: 15px; }
.folder-icon { font-size: 14px; }
.folder-card .desc { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.folder-items { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.folder-items li a {
  display: block; padding: 7px 10px; border-radius: 8px; background: #faf8ff;
  color: var(--ink); font-size: 13.5px; text-decoration: none; border: 1px solid #f0ecfb;
  transition: background .15s ease;
}
.folder-items li a:hover { background: #f3eefe; text-decoration: none; }

/* ===== generic grouped column headers (e.g. EOSS-style multi-row headers) ===== */
table.report.bordered.grouped-head thead tr.grp-row th { top: var(--row-top, 0); text-align: center; }
table.report.bordered.grouped-head thead th.grp { background: #f3eefe; color: #4c2c92; font-weight: 800; border-bottom: 1px solid #d9ccf5; }
table.report.bordered.grouped-head thead th.idcol { text-align: left; }
/* Leaf sub-column headers (0-4K, 4-10K, EOSS@15%, etc.) were breaking onto
   two lines at the hyphen, since a "-" is a valid line-break point even with
   word-break: normal. Keep these on one line; the wider .grp group-name
   headers above them can still wrap if needed. */
table.report.bordered.grouped-head thead th:not(.grp):not(.idcol) { white-space: nowrap; }

/* ===== informational notice (distinct from the red error .alert) ===== */
.alert.notice { background: #fff7e6; border-color: #f3d896; color: #7a5900; }

/* ===== admin console tab bar (replaces one long scroll with panel switching) ===== */
.admin-tabs {
  position: sticky; top: 0; z-index: 20; display: flex; gap: 4px;
  background: var(--page, #f4f2fb); padding: 10px 0 14px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.admin-tab {
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface, #fff); color: var(--muted); font-weight: 600; font-size: 14px;
  cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.admin-tab:hover { border-color: var(--signal); color: var(--ink); }
.admin-tab.active { background: var(--signal); border-color: var(--signal); color: #fff; }
.panel[data-hidden="1"] { display: none; }


/* ===== custom dd/mm/yyyy date picker (native inputs don't obey a forced format) ===== */
.dpick-wrap { position: relative; }
.dpick-text { width: 118px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; background: var(--surface, #fff); cursor: pointer; }
.dpick-text:focus { outline: 2px solid var(--signal); outline-offset: 1px; }
.dpick-cal { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; background: var(--surface, #fff); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(24,16,54,.14); padding: 10px; width: 240px; }
.dpick-cal.open { display: block; }
.dpick-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dpick-hd button { border: none; background: none; cursor: pointer; font-size: 15px; color: var(--muted); padding: 2px 8px; border-radius: 4px; }
.dpick-hd button:hover { background: var(--page, #f4f2fb); color: var(--ink); }
.dpick-hd .dpick-title { font-weight: 600; font-size: 13px; color: var(--ink); }
.dpick-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dpick-dow { font-size: 10px; color: var(--muted); text-align: center; padding: 2px 0; font-weight: 600; }
.dpick-day { font-size: 12px; text-align: center; padding: 6px 0; border-radius: 5px; cursor: pointer; color: var(--ink); }
.dpick-day:hover { background: var(--page, #f4f2fb); }
.dpick-day.muted { color: var(--muted); opacity: .45; }
.dpick-day.today { border: 1px solid var(--signal); }
.dpick-day.selected { background: var(--signal); color: #fff; font-weight: 600; }

/* ===== "last updated" / "as of" timestamp lines — bold, not muted like a plain hint ===== */
.freshness { display: inline-block; font-weight: 700; color: var(--ink); background: var(--lavender, #EDE9FE); border: 1px solid #d9d2f2; border-radius: 6px; padding: 4px 10px; font-size: 13px; margin: 0 0 12px; }
.freshness + .freshness { margin-top: -6px; }

/* ===== table card should hug its actual table width, not always span full
   page width — fixes visible empty space to the right for small reports.
   Still allows a genuinely wide table (many columns) to use full width and
   scroll horizontally, since max-width caps it at the available space. ===== */
.tablewrap { display: inline-block; max-width: 100%; }

/* ===== filter card should hug its actual filter-row width too — same fix
   as .tablewrap above, applied to the report selector/filter form. Still
   wraps onto multiple lines and caps at 100% on narrow screens. ===== */
.selector { display: inline-block; max-width: 100%; }

/* ===== Promotion / View dropdowns styled to match the Regions / Branches /
   Months toggle buttons (lavender pill), rather than the plainer FY box ===== */
.view-pick { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--page); font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.view-pick select { border: none; background: transparent; font: inherit; font-size: 14px; font-weight: 700; color: var(--ink); text-transform: none; letter-spacing: normal; padding: 0; margin: 0; cursor: pointer; }
.view-pick select:focus { outline: none; }

/* ===== inline role-name rename form (Roles table) ===== */
.rename-form { display: inline-flex; align-items: center; gap: 6px; }
.rename-input { font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); width: 180px; }
.rename-input:focus { outline: 2px solid var(--signal); outline-offset: 1px; }

/* ===== FY / Promotion / View now reuse the exact Regions/Branches/Months
   pill look (.ms-toggle). They show just the label + caret, like the
   others — no value preview — and a real <select> is overlaid invisibly
   on top so the whole pill is clickable and still fully functional. ===== */
.pick-toggle { position: relative; min-width: 0; width: auto; }
.pick-overlay { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: none; margin: 0; padding: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }