:root {
  --bg: #f5f6f8; --panel: #fff; --border: #d9dde3; --text: #1b2733;
  --muted: #66707c; --accent: #146eb4; --bad: #c0392b; --good: #1e8449;
  --warn-bg: #fdf3d7; --warn-text: #8a6d1a;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 "Segoe UI", system-ui, sans-serif; background: var(--bg); color: var(--text); }
.hidden { display: none !important; }

#topbar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: #232f3e; color: #fff; padding: 8px 16px; }
.brand { font-size: 19px; font-weight: 700; }
.brand span { font-weight: 400; opacity: .85; }
#topbar .brand .tagline { font-size: 10px; font-weight: 400; color: var(--muted); letter-spacing: .04em; line-height: 1; margin-bottom: 2px; }
.badge.live { background: var(--good); color: #fff; border-radius: 3px; font-size: 12px; padding: 1px 7px; margin-left: 6px; font-weight: 700; letter-spacing: .5px; }
.chip.neutral { background: #e6e8eb; color: var(--muted); }
.result-panel { background: var(--panel); border: 2px solid var(--accent); border-radius: 6px; padding: 10px 14px; margin-bottom: 10px; }
.result-panel h3 { margin: 0 0 6px; }
.badge.shadow { background: #ff9900; color: #232f3e; border-radius: 3px; font-size: 12px;
  font-weight: 700; padding: 1px 6px; vertical-align: middle; margin-left: 6px; }
.account-header { display: flex; gap: 18px; flex-wrap: wrap; }
.account-header .kpi { text-align: center; }
.account-header .kpi .v { font-size: 18px; font-weight: 600; }
.account-header .kpi .l { font-size: 11.5px; text-transform: uppercase; opacity: .75; }
.top-controls { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.top-controls select, .top-controls input, .top-controls button { font-size: 14px; padding: 4px 7px; }
.cmp { font-size: 14px; }
.chip { border-radius: 10px; padding: 2px 10px; font-size: 13px; font-weight: 600; }
.chip.warn { background: var(--warn-bg); color: var(--warn-text); }
.chip.ok { background: #d9efe0; color: var(--good); }
.chip.bad { background: #f6d7d2; color: var(--bad); }

#tabs { display: flex; gap: 2px; background: #fff; border-bottom: 1px solid var(--border); padding: 0 12px; }
#tabs button { border: 0; background: none; padding: 10px 16px; font-size: 15px; cursor: pointer;
  border-bottom: 3px solid transparent; color: var(--muted); }
#tabs button.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
#tabs .area-label { align-self: center; padding: 0 6px 0 14px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
#tabs .area-label:first-child { padding-left: 2px; }
#tabs .area-label.system { margin-left: auto; }
/* red action button (Archive…): beats .subtabs button / .toolbar button, which paint white */
button.danger, .subtabs button.danger, .toolbar button.danger { background: var(--bad); color: #fff; border: 1px solid var(--bad); font-weight: 600; }
button.danger:hover, .subtabs button.danger:hover, .toolbar button.danger:hover { background: #a93226; color: #fff; }
/* green go button (the drawer box's final Create, Bo 2026-09-09) */
button.go, .toolbar button.go { background: var(--good); color: #fff; border: 1px solid var(--good); font-weight: 600; }
button.go:hover, .toolbar button.go:hover { background: #166b3a; color: #fff; }

main { padding: 12px 16px; }
.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.toolbar select, .toolbar input, .toolbar button { font-size: 14px; padding: 5px 8px;
  border: 1px solid var(--border); border-radius: 4px; background: #fff; }
.toolbar button { cursor: pointer; }
.toolbar button:hover { background: #eef3f8; }
.toolbar .grow { flex: 1; }
.toolbar .count { color: var(--muted); font-size: 14px; }

.filter-row { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.filter-panel { background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
  padding: 8px 10px; margin-bottom: 8px; }
.filter-panel .frm { display: flex; gap: 6px; align-items: center; margin-bottom: 5px; }
.filter-panel select, .filter-panel input { font-size: 14px; padding: 4px 6px; }
.filter-panel .hint { color: var(--muted); font-size: 13px; }

.tablewrap { background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
  overflow: auto; max-height: calc(100vh - 210px); }
table.grid { border-collapse: collapse; width: 100%; white-space: nowrap; }
table.grid th { position: sticky; top: 0; background: #eef1f5; border-bottom: 2px solid var(--border);
  padding: 7px 9px; text-align: right; font-size: 13.5px; z-index: 2; }
table.grid[id^="grid-"] th { cursor: pointer; user-select: none; }   /* only the shared table sorts on a header click */
table.grid th.txt, table.grid td.txt { text-align: left; }
table.grid th .arrow { color: var(--accent); }
table.grid td { border-bottom: 1px solid #edf0f3; padding: 5px 9px; text-align: right;
  font-variant-numeric: tabular-nums; font-size: 14px; }
table.grid tr:hover td { background: #f2f7fc; }
table.grid tr.clickable { cursor: pointer; }
/* a page that has to fit one screen (Changes, Bo 2026-09-17): one line per row, tighter than the data tables */
table.grid.compact th { padding: 4px 7px; font-size: 12.5px; }
table.grid.compact td { padding: 2px 7px; font-size: 13px; line-height: 1.45; }
table.grid.compact td small { font-size: 11.5px; }
table.grid.compact .chip { padding: 0 5px; font-size: 11.5px; }
.notice.tight { padding: 5px 10px; margin: 6px 0; font-size: 13px; }
h2.section.tight { margin: 8px 0 4px; font-size: 15px; }
td .delta { font-size: 12px; display: block; }
td .clip { display: inline-block; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.delta.up { color: var(--good); } .delta.down { color: var(--bad); }
td.neg { color: var(--bad); font-weight: 600; }
td.pos { color: var(--good); }
.state-ENABLED { color: var(--good); font-weight: 600; }
.state-PAUSED { color: #b7791f; }
.state-ARCHIVED { color: var(--muted); }
.mono { font-family: Consolas, monospace; font-size: 14px; }

/* ---- Password gate ---- */
.authgate { position: fixed; inset: 0; background: var(--bg); z-index: 1000; display: flex; align-items: center; justify-content: center; }
.authbox { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 28px 32px; width: 380px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 8px 30px rgba(0,0,0,.08); }
.authbox .brand { font-size: 20px; font-weight: 700; }
.authbox .brand span { font-weight: 400; color: var(--muted); }
.authbox .tagline { color: var(--muted); font-size: 13px; margin-top: -6px; }
.authbox h2 { margin: 4px 0 0; font-size: 18px; }
.authbox .hint { color: var(--muted); font-size: 13px; margin: 0; white-space: normal; }
.authbox input { font-size: 16px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 4px; }
.authbox button { font-size: 15px; padding: 9px; border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: 4px; cursor: pointer; }
.authbox button:disabled { opacity: .5; cursor: default; }
.authbox .err { min-height: 18px; }

/* ---- Assistant tab ---- */
.chat-layout { display: grid; grid-template-columns: 260px 1fr; gap: 12px; height: calc(100vh - 150px); }
.chat-side { background: var(--panel); border: 1px solid var(--border); border-radius: 6px; overflow: auto; padding: 8px; }
.chat-side .conv { padding: 7px 8px; border-radius: 4px; cursor: pointer; font-size: 14px; border-bottom: 1px solid #edf0f3; }
.chat-side .conv:hover { background: #eef3f8; }
.chat-side .conv.active { background: #e3eef8; font-weight: 600; }
.chat-side .conv small { display: block; color: var(--muted); font-weight: 400; }
.chat-main { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; min-height: 0; }
.chat-log { flex: 1; overflow: auto; padding: 12px 16px; }
.msg { margin-bottom: 14px; max-width: 980px; }
.msg .who { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.msg.user .body { background: #e3eef8; border-radius: 8px; padding: 8px 12px; white-space: pre-wrap; }
.msg.assistant .body { background: #f7f8fa; border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; }
.msg .body p { margin: 0 0 8px; }
.msg .body ul, .msg .body ol { margin: 4px 0 8px 22px; }
.msg .body table { border-collapse: collapse; margin: 6px 0 10px; font-size: 14px; }
.msg .body th, .msg .body td { border: 1px solid var(--border); padding: 3px 8px; text-align: left; }
.msg .body th { background: #eef3f8; }
.msg .body code { font-family: Consolas, monospace; background: #eef0f3; padding: 0 3px; border-radius: 3px; }
.msg .body pre { background: #eef0f3; padding: 8px; border-radius: 4px; overflow: auto; }
.msg details { font-size: 13px; color: var(--muted); margin-top: 4px; }
.msg details pre { white-space: pre-wrap; font-size: 12px; max-height: 240px; overflow: auto; }
.chat-input { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); align-items: flex-end; }
.chat-input textarea { flex: 1; font: 15px/1.4 "Segoe UI", system-ui, sans-serif; padding: 8px; border: 1px solid var(--border); border-radius: 4px; resize: vertical; min-height: 58px; }
.chat-input button { padding: 8px 16px; font-size: 15px; }
.quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px 0; }
.quick button { font-size: 13px; padding: 3px 9px; border: 1px solid var(--border); border-radius: 12px; background: #fff; cursor: pointer; }
.quick button:hover { background: #eef3f8; }
.thinking { color: var(--muted); font-style: italic; }
.provisional-cell { background: var(--warn-bg) !important; }

.drawer { position: fixed; top: 0; right: 0; width: min(1400px, 94vw); height: 100vh;
  background: #fff; border-left: 1px solid var(--border); box-shadow: -4px 0 18px rgba(0,0,0,.18);
  z-index: 40; display: flex; flex-direction: column; }
.drawer-head { display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px; border-bottom: 1px solid var(--border); }
.drawer-head h2 { margin: 0; font-size: 15px; }
.drawer-head button { border: 0; background: none; font-size: 16px; cursor: pointer; }
#drawerBody { overflow: auto; padding: 12px 16px; }
#overlay { position: fixed; inset: 0; background: rgba(0,0,0,.25); z-index: 30; }

/* The campaign drawer's tables (Bo 2026-09-12: "annoying that i have to scroll left and right to
   get things done"). The row's name is pinned to the left edge and its buttons to the right, so
   whichever number you scroll to, you can still see which row it is and still act on it. */
#drawerTable table.grid th:first-child, #drawerTable table.grid td:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--panel); border-right: 1px solid var(--border);
  max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
#drawerTable.has-actions table.grid th:last-child, #drawerTable.has-actions table.grid td:last-child {
  position: sticky; right: 0; z-index: 1; background: var(--panel); border-left: 1px solid var(--border); }
#drawerTable table.grid thead th:first-child,
#drawerTable.has-actions table.grid thead th:last-child { z-index: 3; background: #eef1f5; }
#drawerTable table.grid tr:hover td:first-child,
#drawerTable.has-actions table.grid tr:hover td:last-child { background: #f2f7fc; }
table.grid .tact { padding: 2px 8px; font-size: 12.5px; cursor: pointer; }

.hist-chart { display: block; width: 100%; height: 260px; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; margin-bottom: 10px; }
.hist-chart text { font-size: 12px; fill: var(--muted); }
.subtabs { display: flex; gap: 4px; margin: 8px 0; }
.drawer-meta { color: var(--muted); font-size: 13px; margin: -2px 0 8px; }
body.undated #accountHeader, body.undated #rangePreset, body.undated #customRange,
body.undated .top-controls label.cmp, body.undated #provisionalChip { display: none; }
.subtabs button { border: 1px solid var(--border); background: #fff; border-radius: 4px;
  padding: 5px 12px; cursor: pointer; font-size: 14px; }
.subtabs button.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.cards { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
  padding: 10px 14px; min-width: 130px; }
.card .v { font-size: 20px; font-weight: 700; }
.card .l { font-size: 13px; color: var(--muted); }
.card .sub { font-size: 13px; color: var(--muted); }

.pull-list { display: flex; flex-direction: column; gap: 10px; }
.pull { background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 10px 14px; }
.pull h3 { margin: 0 0 6px; font-size: 15px; }
.pull table { font-size: 14px; border-collapse: collapse; }
.pull td, .pull th { padding: 2px 10px 2px 0; text-align: left; }
.err { color: var(--bad); }
.warn-text { color: var(--warn-text); }
.ok { color: var(--good); }

.colchooser { position: absolute; background: #fff; border: 1px solid var(--border);
  border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.15); padding: 10px 14px;
  z-index: 50; max-height: 60vh; overflow: auto; columns: 2; }
.colchooser label { display: block; font-size: 14px; margin: 3px 0; break-inside: avoid; }

h2.section { font-size: 16px; margin: 18px 0 8px; }
.settings-block { background: var(--panel); border: 1px solid var(--border);
  border-radius: 6px; padding: 14px 18px; margin-bottom: 16px; max-width: 1100px; }
.settings-block h3 { margin: 0 0 10px; font-size: 15px; }
details.run-details { max-width: 1100px; margin-top: 8px; }
details.run-details > summary { cursor: pointer; color: var(--muted); font-size: 13px; margin-bottom: 10px; }
.settings-block table { border-collapse: collapse; font-size: 14px; }
.settings-block td, .settings-block th { padding: 4px 14px 4px 0; text-align: left; }
.settings-block input, .settings-block select, .settings-block button { font-size: 14px; padding: 4px 7px; }
.notice { background: #eaf3fb; border: 1px solid #bcd8ee; border-radius: 6px;
  padding: 10px 14px; font-size: 14px; margin-bottom: 12px; max-width: 1100px; }