/* ============================================================
   EWUA Ops Dashboard — styles
   Self-contained (no dependency on the Airstream site css).
   ============================================================ */
:root {
  --ink: #16202b;
  --ink-soft: #5a6774;
  --paper: #eef2f6;
  --card: #ffffff;
  --line: #d5dde5;
  --blue: #17405e;
  --blue-2: #245d82;
  --sky: #4a9fd4;
  --green: #2f9e6b;
  --amber: #d98a1f;
  --red: #c8402f;
  --ok-bg: #e7f5ee;
  --warn-bg: #fdf3e2;
  --crit-bg: #fbe9e6;
  --shadow: 0 8px 24px rgba(22, 32, 43, 0.10);
  --radius: 12px;
  --head: 'Oswald', 'Arial Narrow', sans-serif;
  --body: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--body); color: var(--ink); background: var(--paper); line-height: 1.55; -webkit-font-smoothing: antialiased; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
h2 { font-family: var(--head); font-weight: 600; font-size: 1.05rem; letter-spacing: .3px; margin: 0 0 14px; display: flex; align-items: center; gap: 10px; }

/* Header */
.ops-header { background: var(--blue); color: #fff; box-shadow: var(--shadow); position: sticky; top: 0; z-index: 20; transition: transform .25s ease; }
.ops-header.hd-hide { transform: translateY(-100%); }   /* slides up while scrolling down */
.head-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; flex-wrap: nowrap; gap: 14px; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }   /* min-width:0 lets the title truncate instead of wrapping */
.brand > div { min-width: 0; }
.brand-drop { width: 22px; height: 22px; background: linear-gradient(135deg, var(--sky), var(--blue-2)); border-radius: 0 50% 50% 50%; transform: rotate(45deg); box-shadow: inset 1px -1px 3px rgba(255,255,255,.4); flex: none; }
.brand-title { font-family: var(--head); font-weight: 700; font-size: 1.15rem; letter-spacing: .4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-sub { font-size: .74rem; opacity: .8; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.head-meta { display: flex; align-items: center; gap: 14px; flex: none; }   /* keep the meta intact; the brand truncates */
.updated { font-size: .8rem; opacity: .85; }
.btn { font-family: var(--body); font-weight: 500; font-size: .85rem; color: var(--blue); background: #fff; border: none; padding: 8px 14px; border-radius: 8px; cursor: pointer; transition: transform .08s, box-shadow .12s; }
.btn:hover { box-shadow: 0 4px 12px rgba(0,0,0,.2); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

main { padding: 22px 0 40px; }

/* Alert banner */
.alert-banner { border-radius: var(--radius); padding: 14px 18px; margin: 20px 0; font-size: .92rem; }
.alert-banner.crit { background: var(--crit-bg); border: 1px solid #e6b3ab; }
.alert-banner.warn { background: var(--warn-bg); border: 1px solid #e8cd97; }
.alert-banner h3 { margin: 0 0 8px; font-family: var(--head); font-size: .95rem; letter-spacing: .3px; }
.alert-banner ul { margin: 0; padding-left: 18px; }
.alert-banner li { margin: 3px 0; }
.alert-banner .sev { font-weight: 600; }
.alert-banner .sev.crit { color: var(--red); }
.alert-banner .sev.warn { color: var(--amber); }

/* KPI cards */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 22px; }
.kpi { background: var(--card); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); border-left: 4px solid var(--sky); }
.kpi.good { border-left-color: var(--green); }
.kpi.warn { border-left-color: var(--amber); }
.kpi.crit { border-left-color: var(--red); }
.kpi .label { font-size: .72rem; text-transform: uppercase; letter-spacing: .6px; color: var(--ink-soft); }
.kpi .value { font-family: var(--head); font-weight: 600; font-size: 1.7rem; line-height: 1.1; margin: 4px 0 2px; }
.kpi .value .u { font-family: var(--body); font-weight: 400; font-size: .85rem; color: var(--ink-soft); }
.kpi .delta { font-size: .78rem; }
.kpi .delta.up { color: var(--green); }
.kpi .delta.down { color: var(--red); }

/* Panels */
.panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.panel { background: var(--card); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); margin-bottom: 18px; }
.panel-note { font-size: .78rem; color: var(--ink-soft); margin: 10px 0 0; }
/* Bounds the Chart.js canvas so responsive + maintainAspectRatio:false can't grow unbounded. */
.chart-box { position: relative; height: 260px; }
.chart-box > canvas { position: absolute; inset: 0; }

/* Water-quality trend charts + range toggle */
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.panel-head h2 { margin: 0; }
.range-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.range-toggle button { border: none; border-left: 1px solid var(--line); background: #fff; color: var(--ink-soft); padding: 6px 13px; font-family: var(--body); font-size: .8rem; font-weight: 500; cursor: pointer; }
.range-toggle button:first-child { border-left: none; }
.range-toggle button:hover { background: var(--paper); }
.range-toggle button.active { background: var(--blue); color: #fff; }
.trend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 16px; }
.trend-title { font-size: .82rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 4px; }
.trend .chart-box { height: 220px; }

/* Live pump mode badges */
.pump-modes { margin-bottom: 18px; }
.modes-label { font-size: .78rem; color: var(--ink-soft); font-weight: 600; margin-bottom: 8px; }
.modes-row { display: flex; gap: 16px; flex-wrap: wrap; }
.mode-card { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; background: #fbfcfd; }
.mode-station { font-size: .8rem; font-weight: 600; margin-bottom: 7px; }
.mode-badge { display: inline-block; font-size: .74rem; font-weight: 600; padding: 3px 10px; border-radius: 20px; margin: 0 6px 4px 0; background: #eef2f6; color: var(--ink-soft); }
.mode-badge.auto, .mode-badge.running { background: var(--ok-bg); color: var(--green); }
.mode-badge.hand { background: var(--warn-bg); color: var(--amber); }
.mode-badge.off, .mode-badge.idle { background: #eceff2; color: var(--ink-soft); }
.mode-badge.alarm { background: var(--crit-bg); color: var(--red); }

/* Pump runtime panel */
.pump-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pump-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: #fbfcfd; }
.pump-title { font-family: var(--head); font-weight: 600; font-size: 1rem; margin-bottom: 10px; }
.pump-stats { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 10px; }
.pump-name { font-size: .78rem; color: var(--ink-soft); margin-bottom: 2px; }
.pump-hrs { font-family: var(--head); font-weight: 600; font-size: 1.5rem; line-height: 1.05; }
.pump-hrs .unit { font-family: var(--body); font-weight: 400; font-size: .78rem; color: var(--ink-soft); }
.pump-sub { font-size: .74rem; color: var(--ink-soft); }
.pump-card .chart-box { height: 190px; }
.tag { font-size: .6rem; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; padding: 1px 6px; border-radius: 20px; vertical-align: middle; }
.tag.lead { background: var(--ok-bg); color: var(--green); }

/* Click-to-expand tank level trend */
.tank-detail { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.tank-detail .chart-box { height: 240px; margin-top: 6px; }
.detail-actions { display: flex; align-items: center; gap: 10px; }
.detail-close { background: none; border: none; font-size: 1.4rem; line-height: 1; color: var(--ink-soft); cursor: pointer; padding: 0 4px; }
.detail-close:hover { color: var(--ink); }
.src-tag { font-family: var(--body); font-size: .62rem; text-transform: uppercase; letter-spacing: .5px; background: var(--sky); color: #fff; padding: 2px 7px; border-radius: 20px; font-weight: 600; }
.src-tag.src-badger { background: var(--green); }
.src-tag.src-rain { background: var(--sky); }

/* Multi-page nav */
/* One connected tab bar (segmented control), not separate buttons. */
.page-nav { display: flex; flex-wrap: wrap; margin: 14px auto 20px; background: var(--card); border-top: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); }
.navtab { font-family: var(--head); font-weight: 600; font-size: .9rem; letter-spacing: .3px; text-decoration: none; color: var(--ink-soft); padding: 11px 18px; background: var(--card); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .12s, color .12s; }
.navtab:hover:not(.active) { color: var(--ink); background: #eef2f6; }
.navtab.active { background: var(--blue); color: #fff; }

/* AI assistant "Ask" bar — the prominent front door to the dashboard */
.ask-panel { margin: 10px 0 26px; }
.ask-head { font-family: var(--head); font-weight: 600; font-size: 1.18rem; letter-spacing: .2px; color: var(--ink); margin: 0 0 10px 2px; display: flex; align-items: center; gap: 9px; }
.ask-head .ask-spark { color: var(--blue); font-size: 1.25rem; line-height: 1; }
.ask-bar { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1.5px solid var(--sky); border-radius: 14px; padding: 8px 10px 8px 20px; box-shadow: 0 6px 22px rgba(36, 93, 130, .13); transition: border-color .12s, box-shadow .12s; }
.ask-bar:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(74, 159, 212, .22), 0 6px 22px rgba(36, 93, 130, .16); }
.ask-bar input { flex: 1; min-width: 0; width: 100%; border: 0; background: transparent; font-family: var(--head); font-weight: 400; font-size: 1.18rem; color: var(--ink); padding: 13px 4px; outline: none; }
.ask-bar input::placeholder { color: #aab4bf; opacity: 1; }
.ask-go { white-space: nowrap; font-family: var(--head); font-weight: 600; font-size: 1.02rem; letter-spacing: .3px; padding: 12px 26px; border: 0; border-radius: 10px; background: var(--blue); color: #fff; cursor: pointer; transition: background .12s, transform .06s; }
.ask-go:hover { background: #1a4a68; }
.ask-go:active { transform: translateY(1px); }
.ask-answer { margin-top: 14px; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: 10px; padding: 16px 18px; box-shadow: var(--shadow); }
.ask-answer.loading { color: var(--ink-soft); font-style: italic; }
.ask-text { white-space: pre-wrap; line-height: 1.55; font-size: 1.02rem; color: var(--ink); }
.ask-src { margin-top: 12px; font-size: .78rem; color: var(--ink-soft); letter-spacing: .02em; }
.ask-text a { color: var(--blue); font-weight: 600; text-decoration: underline; word-break: break-word; }
.ask-text strong { font-weight: 600; color: var(--ink); }
.ask-text code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; background: #eef2f6; border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; word-break: break-word; }
.ask-more { display: inline-block; margin-top: 14px; font-family: var(--head); font-weight: 600; font-size: .82rem; letter-spacing: .2px; color: var(--blue); text-decoration: none; }
.ask-more:hover { text-decoration: underline; }

/* Example-question chips under the Ask bar — tap one to run it. */
.ask-eg { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 2px 0; }
.ask-eg:empty { display: none; }
.ask-eg-lead { font-size: .7rem; text-transform: uppercase; letter-spacing: 1.4px; font-weight: 600; color: var(--ink-soft); margin-right: 2px; }
.ask-eg-chip { font-family: var(--body); font-size: .86rem; font-weight: 500; color: var(--blue-2); background: rgba(36, 93, 130, .07); border: 1px solid rgba(36, 93, 130, .22); border-radius: 999px; padding: 6px 13px; line-height: 1.25; cursor: pointer; transition: background .12s, border-color .12s, transform .06s; }
.ask-eg-chip:hover { background: rgba(36, 93, 130, .13); border-color: rgba(36, 93, 130, .42); }
.ask-eg-chip:active { transform: translateY(1px); }
.leak-table td.ev-when { text-align: right; color: var(--ink-soft); white-space: nowrap; }
.leak-table tr.denied td { color: #c8402f; }
.ask-full { max-width: 860px; margin-left: auto; margin-right: auto; }
/* Search page sits inside a white .panel module; flatten nested cards so they don't double-shadow */
.ask-page .ask-answer, .ask-page .ask-data-block { box-shadow: none; }
.ask-page .ask-head { margin-left: 0; }
/* The hidden attribute must win over class display rules (.convo-head/.ask-bar use flex) */
[hidden] { display: none !important; }
.ask-full .ask-answer { padding: 20px 22px; }
.ask-full .ask-text { font-size: 1.05rem; }
/* Search-page conversation thread */
.convo-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 2px 18px; padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.convo-title { font-family: var(--head); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: 1.6px; color: var(--ink-soft); }
.convo-reset { font-family: var(--body); font-weight: 500; font-size: .82rem; color: var(--blue); background: transparent; border: 1px solid var(--line); border-radius: 8px; padding: 6px 13px; cursor: pointer; transition: background .12s, border-color .12s; }
.convo-reset:hover { background: #eef2f6; border-color: var(--sky); }

/* Access page: "Calls to a Number" lookup */
.gis-search select { border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; height: 40px; font-family: var(--body); font-size: .9rem; background: #fff; color: var(--ink); cursor: pointer; }
.call-thread { background: var(--card); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; box-shadow: var(--shadow); }
.call-thread > summary { cursor: pointer; padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; list-style: none; }
.call-thread > summary::-webkit-details-marker { display: none; }
.call-thread > summary::before { content: '▸'; color: var(--ink-soft); font-size: .8rem; margin-right: 2px; }
.call-thread[open] > summary::before { content: '▾'; }
.ct-name { font-weight: 600; color: var(--ink); }
.ct-num { color: var(--ink-soft); font-size: .9rem; font-variant-numeric: tabular-nums; }
.ct-meta { margin-left: auto; color: var(--ink-soft); font-size: .82rem; }
.call-thread .leak-scroll { padding: 0 12px 12px; }
.oc-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.oc-perpage { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--ink-soft); }
.oc-perpage select { border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; font-family: var(--body); font-size: .85rem; background: #fff; color: var(--ink); cursor: pointer; }
.oc-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
.oc-pager:empty { display: none; }
.oc-pageinfo { font-size: .82rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.oc-pager .btn[disabled] { opacity: .45; cursor: default; }
/* MailChimp panel */
.mc-audience { font-size: .9rem; color: var(--ink-soft); }
.mc-members { font-family: var(--head); font-weight: 600; font-size: 1.15rem; color: var(--ink); }
.mc-camp-link { color: var(--blue-2); text-decoration: none; border-bottom: 1px solid transparent; }
.mc-camp-link:hover { border-bottom-color: currentColor; }
/* GM private tab */
.gm-intro { font-size: .88rem; color: var(--ink-soft); margin: 4px 2px 18px; }
.kpi-sub { font-size: .74rem; color: var(--ink-soft); margin-top: 5px; }
.kpi-chg { font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.navtab.gm-tab { color: var(--blue-2); }
.ask-thread { display: flex; flex-direction: column; gap: 26px; }
.ask-thread:empty { display: none; }
.ask-turn { display: flex; flex-direction: column; }
.ask-q { display: flex; align-items: baseline; gap: 10px; font-family: var(--head); font-weight: 600; font-size: 1.08rem; color: var(--ink); margin: 0 2px 10px; }
.ask-q-label { flex: none; font-family: var(--body); font-weight: 600; font-size: .64rem; text-transform: uppercase; letter-spacing: 1.2px; color: #fff; background: var(--blue-2); border-radius: 5px; padding: 3px 7px; }
.ask-follow { margin-top: 26px; border-color: var(--line); }
.ask-follow:focus-within { border-color: var(--blue); }
.ask-follow input { font-size: 1.05rem; }
/* Reference data (raw tool results) below the Search-page answer */
.ask-data { margin-top: 6px; }
.ask-data-head { margin: 24px 0 12px; font-family: var(--head); font-weight: 600; font-size: 1.05rem; color: var(--ink); }
.ask-data-block { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; box-shadow: var(--shadow); }
.ask-data-tool { font-family: var(--head); font-weight: 600; font-size: .78rem; letter-spacing: .4px; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; }
.ask-kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 16px; margin: 0; align-items: baseline; }
.ask-kv dt { font-weight: 600; color: var(--ink-soft); font-size: .82rem; white-space: nowrap; }
.ask-kv dd { margin: 0; font-size: .9rem; color: var(--ink); min-width: 0; }
.ask-data-block .leak-table { margin-top: 2px; }
.ask-data-block .empty { color: var(--ink-soft); font-style: italic; }

/* Header "Ask Ted" bar (desktop) + its answer dropdown */
.head-ask { flex: 1 1 auto; max-width: 560px; margin: 0 20px; display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.30); border-radius: 10px; padding: 4px 5px 4px 13px; transition: background .12s, border-color .12s; }
.head-ask:focus-within { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.6); }
.head-ask .ask-spark { color: #d4e6f4; font-size: 1rem; line-height: 1; flex: none; }
#headAskInput { flex: 1; min-width: 0; border: 0; background: transparent; color: #fff; font-family: var(--head); font-weight: 400; font-size: .95rem; padding: 7px 2px; outline: none; }
#headAskInput::placeholder { color: rgba(255,255,255,.72); }
.head-ask-go { flex: none; white-space: nowrap; border: 0; border-radius: 7px; background: #fff; color: var(--blue); font-family: var(--head); font-weight: 600; font-size: .85rem; letter-spacing: .2px; padding: 8px 15px; cursor: pointer; transition: background .12s; }
.head-ask-go:hover { background: #eaf2f8; }
.head-ask-answer { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 8px; width: min(680px, calc(100vw - 32px)); max-height: 62vh; overflow: auto; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 36px rgba(26,31,38,.24); padding: 16px 18px; z-index: 40; }
.head-ask-answer.loading { color: var(--ink-soft); font-style: italic; }
.head-ask-answer .ask-text { white-space: pre-wrap; line-height: 1.55; font-size: 1rem; color: var(--ink); }
.head-ask-answer .ask-src { margin-top: 12px; font-size: .78rem; color: var(--ink-soft); }
/* Desktop shows the header bar and hides the home-page panel; mobile is the reverse. */
#askPanel { display: none; }
@media (max-width: 860px) {
  /* On mobile, Ask Ted lives only on the Search tab — hide the header box and the
     home-page fallback panel so it isn't repeated on every page. */
  .head-ask, .head-ask-answer { display: none !important; }
}

/* Alerts feed (Mission alarm callouts) */
.alerts-feed { margin-top: 10px; }
.alert-day { font-family: var(--head); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-soft); margin: 18px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.alert-day:first-child { margin-top: 4px; }
.alert-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-left: 4px solid var(--line); border-radius: 8px; background: #fbfcfd; margin-bottom: 6px; }
.alert-row.crit { border-left-color: var(--red); background: var(--crit-bg); }
.alert-row.warn { border-left-color: var(--amber); background: var(--warn-bg); }
.alert-row.cleared { border-left-color: var(--green); opacity: .7; }
.alert-time { font-variant-numeric: tabular-nums; font-size: .82rem; color: var(--ink-soft); min-width: 84px; }
.night-dot { font-size: .85em; }   /* overnight 11pm–6am marker */
.alert-sev { font-size: .64rem; font-weight: 700; letter-spacing: .4px; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
.alert-sev.crit { background: var(--red); color: #fff; }
.alert-sev.warn { background: var(--amber); color: #fff; }
.alert-sev.cleared { background: var(--green); color: #fff; }
.alert-msg { font-size: .9rem; }
.plants-tag { display: inline-block; margin-left: 8px; font-family: var(--body); font-size: .72rem; font-weight: 600; color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); border: 1px solid color-mix(in srgb, var(--green) 35%, transparent); padding: 1px 8px; border-radius: 20px; white-space: nowrap; vertical-align: middle; }

/* Dispatch (notification) rows */
.alert-row.dispatch { background: #fff; border-left-style: dashed; }
.alert-row.dispatch.ok { border-left-color: var(--green); }
.alert-row.dispatch.warn { border-left-color: var(--amber); }
.alert-row.dispatch.info { border-left-color: var(--sky); }
.alert-row.night { background: #e9ebef; }   /* overnight 11pm–6am — keeps severity border color */
.alert-sev.disp { background: transparent; border: 1px solid var(--line); color: var(--ink-soft); text-transform: uppercase; }
.alert-sev.disp.ok { border-color: var(--green); color: var(--green); }
.alert-sev.disp.warn { border-color: var(--amber); color: var(--amber); }
.alert-sev.disp.info { border-color: var(--sky); color: var(--sky); }
.disp-re { color: var(--ink-soft); font-size: .82rem; }

/* Alerts pagination */
.alerts-pagesize { font-size: .82rem; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 6px; }
.alerts-pagesize select { font-family: var(--body); font-size: .82rem; padding: 4px 8px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink); }
.panel-head-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.panel-head-actions .btn { border: 1px solid var(--line); color: var(--blue); box-shadow: none; }
.panel-head-actions .btn:hover { background: #f4f7fb; border-color: var(--blue); box-shadow: none; transform: none; }
.panel-head-actions .btn:disabled { opacity: .6; cursor: default; }

/* Operators schedule */
.src-tag.src-cal { background: #2f7d4f; }
.sched-today-card { background: linear-gradient(180deg, #eef6ff, #f7fbff); border: 1px solid color-mix(in srgb, var(--blue) 22%, transparent); border-radius: 12px; padding: 14px 16px; margin-bottom: 6px; }
.sched-today-date { font-family: var(--head); font-weight: 700; font-size: 1.15rem; color: var(--blue); margin-bottom: 10px; }
.sched-wk-title { font-family: var(--head); font-weight: 600; font-size: .95rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .5px; margin: 20px 0 10px; }
.sched-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.sched-day { border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: #fff; min-width: 0; }
.sched-day.today { border-color: var(--blue); box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 18%, transparent); background: #f7fbff; }
.sched-day-head { font-family: var(--head); font-weight: 600; font-size: .9rem; color: var(--ink); margin-bottom: 8px; display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.sched-date { color: var(--ink-soft); font-weight: 400; font-size: .82rem; }
.sched-today-tag { margin-left: auto; font-family: var(--body); font-size: .58rem; font-weight: 700; letter-spacing: .5px; background: var(--blue); color: #fff; padding: 1px 6px; border-radius: 20px; }
.sched-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.today-list { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.sched-item { display: flex; align-items: center; gap: 6px; font-size: .84rem; }
.today-list .sched-item { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 3px 4px 3px 10px; }
.sched-name { font-weight: 600; color: var(--ink); }
.sched-role { font-family: var(--body); font-size: .72rem; font-weight: 600; padding: 1px 8px; border-radius: 20px; white-space: nowrap; }
.sched-empty { color: var(--line); font-size: .84rem; }
.sched-role.r-off { background: #eceef1; color: #6b7480; }
.sched-role.r-plant { background: color-mix(in srgb, var(--green) 15%, transparent); color: #2f7d4f; }
.sched-role.r-open { background: color-mix(in srgb, var(--sky) 16%, transparent); color: #2a6f9e; }
.sched-role.r-round { background: color-mix(in srgb, var(--amber) 20%, transparent); color: #a9701a; }
.sched-role.r-rosario { background: #efe7fb; color: #6b4bb0; }
.sched-role.r-train { background: #e3f4f4; color: #2b8a8a; }
.sched-role.r-other { background: #eef1f4; color: var(--ink-soft); }
.alerts-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 8px 0 10px; flex-wrap: wrap; }
.pager-btn { font-family: var(--body); font-weight: 600; font-size: .82rem; padding: 6px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--blue-2); cursor: pointer; }
.pager-btn:hover:not(:disabled) { border-color: var(--sky); }
.pager-btn:disabled { color: var(--line); cursor: default; }
.pager-info { font-size: .82rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* Tanks */
.tank-list { display: flex; flex-direction: column; gap: 14px; }
.tank { }
.tank-head { display: flex; justify-content: space-between; font-size: .88rem; margin-bottom: 5px; }
.tank-head .lv { color: var(--ink-soft); }
.bar { height: 20px; background: var(--paper); border-radius: 6px; overflow: hidden; border: 1px solid var(--line); }
.bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--sky), var(--blue-2)); }
.bar.low > span { background: linear-gradient(90deg, #e8a54f, var(--amber)); }
.bar.crit > span { background: linear-gradient(90deg, #e06a58, var(--red)); }
.bar.muted > span { background: linear-gradient(90deg, var(--alu-2, #b9c2cc), var(--alu-3, #8b97a4)); opacity: .8; }

/* Vertical tank gauges (side by side, base-aligned, with alert bands) */
.tank-gauges { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; padding-top: 6px; }
.gauge { display: flex; flex-direction: column; align-items: center; width: 96px; cursor: pointer; border-radius: 10px; padding: 4px 2px; transition: background .12s; }
.gauge:hover { background: var(--paper); }
.gauge:hover .gauge-tube { border-color: var(--blue-2); }
.gauge-tube { position: relative; width: 62px; height: 200px; background: linear-gradient(180deg, #f7f9fb, var(--paper)); border: 2px solid var(--alu-3); border-radius: 9px 9px 13px 13px; overflow: hidden; box-shadow: inset 0 2px 6px rgba(26,31,38,.10); } /* tube at top -> all tubes base-align */
.zone { position: absolute; left: 0; width: 100%; }
.zone.low { bottom: 0; background: rgba(224,117,45,.20); }
.zone.high { top: 0; background: rgba(200,64,47,.22); }
.gauge-fill { position: absolute; left: 0; bottom: 0; width: 100%; background: linear-gradient(180deg, rgba(74,159,212,.72), rgba(36,93,130,.82)); transition: height .5s ease; }
.gauge-fill::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,.5); }
.gauge-fill.alarm { background: linear-gradient(180deg, rgba(224,106,88,.82), rgba(200,64,47,.9)); }
.gauge-fill.muted { background: linear-gradient(180deg, var(--alu-2), var(--alu-3)); opacity: .7; }
/* Mission alarm-state fill colors */
.gauge-fill.st-normal  { background: linear-gradient(180deg, rgba(47,158,107,.8), rgba(31,120,80,.9)); }
.gauge-fill.st-caution { background: linear-gradient(180deg, rgba(232,165,79,.85), rgba(217,138,31,.92)); }
.gauge-fill.st-alarm   { background: linear-gradient(180deg, rgba(224,106,88,.88), rgba(200,64,47,.94)); }
.gauge.status-alarm .gauge-name { color: var(--red); }
.gauge.status-caution .gauge-name { color: var(--amber); }
/* Tank status legend dots */
.lg { font-weight: 600; }
.lg::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.lg.n::before { background: var(--green); }
.lg.c::before { background: var(--amber); }
.lg.a::before { background: var(--red); }
.thresh { position: absolute; left: -2px; right: -2px; height: 0; border-top: 2px dashed; }
.thresh.low { border-color: #c85f1e; }
.thresh.high { border-color: var(--red); }
.gauge-pct { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font-family: var(--head); font-weight: 700; font-size: 1.1rem; color: var(--ink); text-shadow: 0 1px 3px rgba(255,255,255,.85); }
.gauge-pct.ft { font-size: 1rem; }
.gauge-pct small { display: block; font-size: .58rem; font-weight: 400; letter-spacing: .5px; }
.gauge-cap { font-size: .82rem; color: var(--ink-soft); margin-top: 8px; font-variant-numeric: tabular-nums; }
.gauge-name { font-size: .82rem; font-weight: 600; text-align: center; line-height: 1.2; margin-top: 3px; }

/* Mini tiles (wells + water quality) */
.mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.tile { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: #fbfcfd; border-left: 4px solid var(--sky); }
.tile.clickable { cursor: pointer; transition: box-shadow .15s, transform .15s; }
.tile.clickable:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.tile.good { border-left-color: var(--green); }
.tile.warn { border-left-color: var(--amber); }
.tile.crit { border-left-color: var(--red); background: var(--crit-bg); }
.tile-label { font-size: .78rem; color: var(--ink-soft); margin-bottom: 4px; }
.tile-value { font-family: var(--head); font-weight: 600; font-size: 1.35rem; line-height: 1.1; }
.tile-value .unit { font-family: var(--body); font-weight: 400; font-size: .8rem; color: var(--ink-soft); }
.tile-sub { font-size: .72rem; color: var(--ink-soft); margin-top: 3px; }

/* Water metering — continuous-flow (leak) list */
.leak-list { margin-top: 16px; }
.leak-head { font-size: .8rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
.loss-total { font-size: 1.02rem; font-weight: 600; color: var(--ink); margin: 4px 0 12px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.loss-total strong { font-family: var(--head); font-size: 1.25rem; color: var(--blue); }
.loss-total .unit { font-size: .8rem; font-weight: 400; color: var(--ink-soft); }
.loss-chg { font-family: var(--body); font-size: .78rem; font-weight: 600; padding: 2px 9px; border-radius: 20px; white-space: nowrap; }
.loss-chg.down { background: color-mix(in srgb, var(--green) 15%, transparent); color: #2f7d4f; }
.loss-chg.up { background: var(--crit-bg); color: var(--red); }
.loss-chg.flat { background: #eceef1; color: var(--ink-soft); }

/* Zendesk tickets */
.src-tag.src-zd { background: #17494e; }
.ticket-summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.tk-total { font-family: var(--head); font-weight: 700; font-size: 1.1rem; color: var(--ink); }
.tk-chip { font-size: .74rem; font-weight: 600; padding: 2px 9px; border-radius: 20px; }
.ticket-table { width: 100%; font-size: .84rem; border-collapse: collapse; }
.ticket-table th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-soft); font-weight: 600; padding: 6px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ticket-table td { padding: 7px 10px; border-bottom: 1px solid #eef1f4; vertical-align: top; }
.ticket-table a { color: var(--blue); text-decoration: none; font-weight: 500; }
.ticket-table a:hover { text-decoration: underline; }
.tk-subj { max-width: 360px; }
.tk-upd { color: var(--ink-soft); white-space: nowrap; }
.tk-badge { display: inline-block; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; padding: 2px 8px; border-radius: 20px; }
.tk-badge.st-open, .tk-chip.st-open { background: var(--crit-bg); color: var(--red); }
.tk-badge.st-pending, .tk-chip.st-pending { background: #efe7fb; color: #6b4bb0; }
.tk-badge.st-new, .tk-chip.st-new { background: color-mix(in srgb, var(--sky) 16%, transparent); color: #2a6f9e; }
.tk-badge.st-hold, .tk-chip.st-hold { background: #eceef1; color: var(--ink-soft); }
.ticket-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 8px; }
.tk-chart .chart-box { height: 240px; }
@media (max-width: 760px) { .ticket-charts { grid-template-columns: 1fr; } }
.ticket-window { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.tk-wincard { flex: 1 1 130px; background: #f7fbff; border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; }
.tk-winlabel { font-size: .7rem; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-soft); font-weight: 600; }
.tk-winval { font-family: var(--head); font-weight: 700; font-size: 1.7rem; color: var(--blue); margin: 2px 0; line-height: 1.1; }
.tk-winsub { font-size: .72rem; color: var(--ink-soft); }
.tk-bracket .chart-box { height: 220px; }

/* System water usage (7d vs prev 7d) */
.usage-7d { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.usage-arrowbox { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.usage-arrow { font-size: 3.1rem; line-height: 1; }
.usage-arrowbox.up .usage-arrow { color: var(--red); }
.usage-arrowbox.down .usage-arrow { color: #2f7d4f; }
.usage-arrowbox.flat .usage-arrow { color: var(--ink-soft); }
.usage-chg { font-family: var(--body); font-size: .8rem; font-weight: 600; padding: 2px 10px; border-radius: 20px; white-space: nowrap; }
.usage-chg.up { background: var(--crit-bg); color: var(--red); }
.usage-chg.down { background: color-mix(in srgb, var(--green) 15%, transparent); color: #2f7d4f; }
.usage-chg.flat { background: #eceef1; color: var(--ink-soft); }
.usage-figs { display: flex; flex-direction: column; gap: 14px; }
.usage-row { display: flex; align-items: baseline; gap: 16px; }
.usage-lbl { color: var(--ink-soft); min-width: 128px; font-size: .95rem; }
.usage-val { font-family: var(--head); font-weight: 700; font-size: 1.9rem; color: var(--blue); }
.usage-val .unit { font-family: var(--body); font-size: .8rem; font-weight: 400; color: var(--ink-soft); }
.leak-scroll { overflow-x: auto; }
.leak-table { width: 100%; font-size: .82rem; }
.leak-none { font-size: .85rem; color: var(--green); font-weight: 600; margin-top: 8px; }
.leak-more { font-size: .78rem; color: var(--ink-soft); margin-top: 8px; }
.topusers-table td.rank { color: var(--ink-soft); font-weight: 600; width: 1%; white-space: nowrap; }
.topusers-table td.num { font-variant-numeric: tabular-nums; }
.topusers-table .usage-chg { display: inline-block; min-width: 62px; text-align: center; }
.fh-break { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.fh-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: .82rem; }
.fh-lbl { min-width: 74px; color: var(--ink-soft); font-weight: 600; }
.fh-chip { background: #f1f3f5; border-radius: 12px; padding: 2px 10px; font-size: .8rem; }
.heatmap-wrap { overflow-x: auto; }
.heatmap { display: flex; flex-direction: column; gap: 3px; min-width: 560px; }
.hm-row { display: flex; gap: 3px; align-items: center; }
.hm-day { width: 34px; flex: none; font-size: .72rem; color: var(--ink-soft); font-weight: 600; }
.hm-cell { flex: 1; height: 17px; border-radius: 2px; }
.hm-h { flex: 1; font-size: .6rem; color: var(--ink-soft); }
.hm-head .hm-cell { height: auto; }
.live-summary { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.live-pill { font-size: .78rem; font-weight: 700; padding: 3px 11px; border-radius: 20px; }
.live-pill.available { background: #e9f5ee; color: #2f7d4f; }
.live-pill.dnd { background: #fdf0e3; color: #b7791f; }
.live-pill.offline { background: #eef2f4; color: var(--ink-soft); }
.live-pill.oncall { background: #fdecea; color: #c0392b; }
.live-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.live-agent { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: .85rem; transition: opacity .4s ease; }
.live-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: #c3ccd2; transition: background .4s ease; }
.live-agent.available .live-dot { background: #2f8f57; }
.live-agent.dnd .live-dot { background: #b7791f; }
.live-agent.oncall .live-dot { background: #c0392b; }
.live-agent.offline { color: var(--ink-soft); opacity: .55; }
.live-status { margin-left: auto; font-size: .72rem; color: var(--ink-soft); }

/* Facilities — RemoteLock door locks */
.fac-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.fac-card { border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; border-left: 4px solid #c3ccd2; }
/* Cameras (UniFi Protect snapshot tiles) */
.cam-empty { padding: 22px; color: var(--ink-soft); background: #f7f9fb; border: 1px dashed var(--line); border-radius: 12px; text-align: center; }
.cam-site { margin-top: 6px; }
.cam-site + .cam-site { margin-top: 22px; }
.cam-site-h { font-family: var(--head); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: 1px; color: var(--blue-2); margin: 0 0 10px; }
.cam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.cam-tile { margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #0d1b24; }
.cam-img { position: relative; aspect-ratio: 16 / 9; background: #0d1b24; }
.cam-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam-nosig { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; color: #9fb2bd; font-size: .85rem; letter-spacing: .5px; }
.cam-tile.cam-nosignal .cam-img img { visibility: hidden; }
.cam-tile.cam-nosignal .cam-nosig { display: flex; }
.cam-tile figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 8px 12px; background: #fff; }
.cam-name { font-size: .85rem; font-weight: 600; color: var(--ink); }
.cam-age { font-size: .72rem; color: var(--ink-soft); white-space: nowrap; }
.cam-tile.cam-stale { border-color: var(--amber); }
.cam-tile.cam-stale .cam-age { color: var(--amber); }
@media (max-width: 640px) { .cam-grid { grid-template-columns: 1fr; } }
/* Analytics */
.an-chart { height: 280px; margin-top: 6px; }
.an-date { font: inherit; font-size: .85rem; padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #fff; }
.an-num { text-align: right; font-variant-numeric: tabular-nums; }
.an-dim { color: var(--ink-soft); }
/* Website traffic (GA4) */
.ga-split { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 14px; }
.ga-h3 { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); margin: 0 0 8px; }
.ga-bar { display: grid; grid-template-columns: 120px 1fr 38px; align-items: center; gap: 10px; margin: 6px 0; font-size: .85rem; }
.ga-bar-l { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ga-bar-track { height: 9px; background: var(--line); border-radius: 5px; overflow: hidden; }
.ga-bar-fill { display: block; height: 100%; background: #245d82; border-radius: 5px; }
.ga-bar-v { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
@media (max-width: 640px) { .ga-split { grid-template-columns: 1fr; gap: 16px; } .ga-bar { grid-template-columns: 96px 1fr 34px; } }
.fac-card.locked { border-left-color: #2f8f57; }
.fac-card.unlocked { border-left-color: #b7791f; }
.fac-card.unknown { border-left-color: #9aa7b0; }
.fac-card.off { border-left-color: #c0392b; opacity: .7; }
.fac-top { display: flex; align-items: center; gap: 8px; }
.fac-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: #c3ccd2; }
.fac-card.locked .fac-dot { background: #2f8f57; }
.fac-card.unlocked .fac-dot { background: #b7791f; }
.fac-card.off .fac-dot { background: #c0392b; }
.fac-name { font-weight: 600; font-size: .92rem; }
.fac-loc { font-size: .74rem; color: var(--ink-soft); margin: 2px 0 0 18px; }
.fac-state { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 1.15rem; margin: 8px 0 6px; letter-spacing: .3px; }
.fac-card.locked .fac-state { color: #2f8f57; }
.fac-card.unlocked .fac-state { color: #b7791f; }
.fac-card.off .fac-state { color: #c0392b; }
.fac-meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: .72rem; color: var(--ink-soft); }
.fac-meta > span { background: #f1f4f6; border-radius: 20px; padding: 2px 9px; }
.fac-bat.low { background: var(--crit-bg); color: var(--red); font-weight: 600; }
.fac-card.clickable { cursor: pointer; transition: box-shadow .15s ease, transform .15s ease; }
.fac-card.clickable:hover { box-shadow: 0 3px 12px rgba(20,50,80,.12); transform: translateY(-1px); }
.fac-card.clickable:focus-visible { outline: 2px solid var(--accent, #2f6f9f); outline-offset: 2px; }
.fac-cta { margin-top: 9px; font-size: .72rem; font-weight: 600; color: var(--accent, #2f6f9f); }
.fac-detail { margin-top: 16px; border: 1px solid var(--line); border-radius: 12px; padding: 4px 16px 14px; background: #fbfcfd; }
.fac-detail-head { display: flex; align-items: center; justify-content: space-between; }
.fac-detail-head h3 { font-family: 'Oswald', sans-serif; font-size: 1.05rem; font-weight: 600; margin: 12px 0; }
.fac-close { background: none; border: none; font-size: 1rem; cursor: pointer; color: var(--ink-soft); padding: 4px 8px; border-radius: 6px; }
.fac-close:hover { background: #eef2f4; }
.fac-sub { font-size: .74rem; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-soft); font-weight: 700; margin: 14px 0 6px; }
.fac-sub:first-child { margin-top: 2px; }
.fac-events { list-style: none; margin: 0 0 4px; padding: 0; }
.fac-events li { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-bottom: 1px solid var(--line); font-size: .88rem; }
.fac-ev-who { font-weight: 600; }
.fac-ev-when { margin-left: auto; font-size: .76rem; color: var(--ink-soft); }
.fac-ev-tag { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; background: var(--crit-bg); color: var(--red); padding: 1px 7px; border-radius: 20px; }
.fac-events li.denied .fac-ev-who { color: var(--red); }
.mgr-login { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.mgr-login input { padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; min-width: 220px; }
.mgr-err { color: var(--red); font-size: .82rem; font-weight: 600; }

/* Signed-in user chip in the header */
.help-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none; border-radius: 50%; border: 1px solid rgba(255,255,255,.42); color: #fff; text-decoration: none; font-family: var(--head); font-weight: 700; font-size: 1rem; line-height: 1; transition: background .12s, border-color .12s; }
.help-icon:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.72); }
.user-chip { display: inline-flex; align-items: center; gap: 8px; }
.uc-name { font-weight: 600; font-size: .85rem; }
.uc-role { font-size: .68rem; text-transform: uppercase; letter-spacing: .4px; background: #eef2f6; color: var(--ink-soft); padding: 2px 8px; border-radius: 20px; }
.uc-out { padding: 5px 12px; }
.btn.primary { background: var(--accent, #2f6f9f); color: #fff; border-color: transparent; }

/* Login page */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card { width: 100%; max-width: 360px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 28px 26px; box-shadow: 0 8px 30px rgba(20,50,80,.08); }
.login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.login-card h1 { font-family: 'Oswald', sans-serif; font-size: 1.3rem; font-weight: 600; margin: 0 0 14px; }
.login-card form { display: flex; flex-direction: column; gap: 10px; }
.login-card input { padding: 11px 13px; border: 1px solid var(--line); border-radius: 9px; font: inherit; }
.login-card .btn { padding: 11px; font-size: .95rem; }
.login-err { color: var(--red); font-size: .85rem; font-weight: 600; min-height: 1em; }

/* Users admin */
.user-add { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.user-add input, .user-add select { padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.user-add input { min-width: 180px; }
.user-msg { font-size: .82rem; font-weight: 600; }
.user-msg.ok { color: var(--green); }
.user-msg.err { color: var(--red); }
.u-actions { white-space: nowrap; }
.u-role, .u-active { padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; font: inherit; font-size: .85rem; }
#usersTable .btn { padding: 5px 10px; font-size: .8rem; }

/* Map (ArcGIS embed / SDK) */
.map-panel { padding: 0; overflow: hidden; }
.gis-frame { width: 100%; height: calc(100vh - 190px); min-height: 460px; border: 0; display: block; }
#gisMap { width: 100%; height: calc(100vh - 210px); min-height: 500px; }

/* Map search */
.gis-search { display: flex; gap: 10px; margin: 10px 0 4px; }
.gis-search input { flex: 1; padding: 10px 13px; border: 1px solid var(--line); border-radius: 9px; font: inherit; }
.gis-answer { margin: 12px 0 6px; font-size: 1.12rem; font-weight: 600; color: var(--ink); line-height: 1.4; }
.gis-total { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 1.5rem; color: var(--blue); vertical-align: -2px; }
.gis-more { font-size: .7rem; font-weight: 400; color: var(--ink-soft); text-transform: none; letter-spacing: 0; }
.gis-group { margin-top: 12px; }
.gis-group .fac-sub { margin-bottom: 4px; }
.gis-n { background: #eef2f6; color: var(--ink-soft); font-size: .72rem; padding: 1px 7px; border-radius: 20px; margin-left: 4px; }
.gis-item { padding: 8px 0; border-bottom: 1px solid var(--line); }
.gis-label { font-weight: 600; font-size: .92rem; }
.gis-loc { margin-left: 8px; font-size: .74rem; font-weight: 600; color: var(--accent, #2f6f9f); background: none; border: none; cursor: pointer; padding: 0; }
.gis-loc:hover { text-decoration: underline; }
.gis-attrs { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 3px; }
.gis-a { font-size: .78rem; color: var(--ink-soft); }
.gis-a em { font-style: normal; color: var(--ink); opacity: .6; margin-right: 3px; }

/* Tables */
table { width: 100%; border-collapse: collapse; font-size: .86rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
th { font-weight: 600; color: var(--ink-soft); font-size: .74rem; text-transform: uppercase; letter-spacing: .4px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.pill { display: inline-block; font-size: .74rem; font-weight: 600; padding: 2px 9px; border-radius: 20px; }
.pill.run { background: var(--ok-bg); color: var(--green); }
.pill.off { background: #eef2f6; color: var(--ink-soft); }
.pill.crit { background: var(--crit-bg); color: var(--red); }
.pill.warn { background: var(--warn-bg); color: var(--amber); }
.empty { color: var(--ink-soft); font-size: .85rem; padding: 6px 0; }

/* Footer */
.ops-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: .76rem; color: var(--ink-soft); padding-top: 14px; padding-bottom: 30px; border-top: 1px solid var(--line); margin-top: 10px; }

@media (max-width: 780px) {
  .panel-grid { grid-template-columns: 1fr; }
  .trend-grid { grid-template-columns: 1fr; }
  .pump-grid { grid-template-columns: 1fr; }
  /* Declutter the header on small screens: drop secondary bits, keep identity + Sign out. */
  .brand { min-width: 0; }
  .brand-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1rem; }
  .brand-sub { display: none; }
  .head-meta { gap: 8px; }
  .head-meta .updated { display: none; }
  .user-chip { gap: 6px; }
}
/* Water-demand forecast (GM) */
.fc-chart { height: 300px; margin-top: 14px; }
#forecastPanel .kpi-grid { margin: 14px 0 0; }
.fc-rev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 10px !important; }
.fc-rev-grid:empty { display: none; }
.fc-rev { border-left: 3px solid var(--blue-2); }
.fc-rev .value { color: var(--blue-2); }
#fcRevNote { margin-top: 8px; }
.fc-perday { margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--line); font-family: var(--head); font-weight: 600; font-size: .82em; color: var(--blue-2); white-space: nowrap; }
.fc-perday .u { font-family: var(--body); font-weight: 400; font-size: .8em; color: var(--ink-soft); }
.fc-today { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .6px;
  color: var(--blue-2); background: rgba(36,93,130,.09); border-radius: 20px; padding: 2px 7px; margin-left: 6px; white-space: nowrap; }

/* Forecast explainer — scannable labelled rows + stat strip */
.fc-explain { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.fc-explain h3 { font-family: var(--head); font-weight: 600; font-size: .74rem; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--blue-2); margin: 0 0 12px; }
.fc-explain h3:not(:first-child) { margin-top: 26px; }
.fc-explain p { font-size: .88rem; line-height: 1.62; color: var(--ink-soft); margin: 0 0 9px; max-width: 76ch; }
/* Full-width formula "methods box" below the definition grid — each equation on its
   own labelled row so the notation reads cleanly instead of as a run-on paragraph. */
.aq-math { max-width: none; margin: 20px 0 0; padding-top: 15px; border-top: 1px solid var(--line); }
.aq-math-h { font-size: .7rem; text-transform: uppercase; letter-spacing: .8px; font-weight: 600; color: var(--ink); margin-bottom: 12px; }
.aq-math-rows { display: grid; grid-template-columns: max-content 1fr; gap: 10px 16px; align-items: baseline; margin: 0; }
.aq-math-rows dt { font-size: .66rem; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; color: var(--ink-soft); padding-top: 3px; }
.aq-math-rows dd { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--ink-soft); }
.aq-math-rows code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .84rem; background: #f2f6f8; padding: 2px 8px; border-radius: 6px; color: var(--ink); white-space: nowrap; }
.aq-math-rows .n { color: var(--ink-soft); }
@media (max-width: 640px) {
  .aq-math-rows { grid-template-columns: 1fr; gap: 3px 0; }
  .aq-math-rows dt { padding-top: 8px; }
  .aq-math-rows dd { margin-bottom: 4px; }
  .aq-math-rows code { white-space: normal; }
}
/* Two titled blocks side by side — fills the panel, keeps lines readable, and each
   half gets its own heading instead of prose flowing unpredictably between columns. */
.fc-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 44px; }
.fc-two section > p { max-width: none; }
.fc-two h4 { font-size: .74rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 600;
  color: var(--ink); margin: 0 0 7px; }
.fc-explain p b, .fc-defs dd b { color: var(--ink); font-weight: 600; }
.fc-defs { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 9px 20px; margin: 0; }
.fc-defs dd { max-width: 68ch; }
.fc-defs dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .8px; font-weight: 600;
  color: var(--ink); padding-top: 2px; }
.fc-defs dd { margin: 0; font-size: .88rem; line-height: 1.58; color: var(--ink-soft); }
.fc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; margin: 0 0 16px; }
.fc-stat { background: #f7f9fb; border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; }
.fc-stat .n { font-family: var(--head); font-weight: 600; font-size: 1.2rem; line-height: 1.15; color: var(--ink); }
.fc-stat .n .u { font-family: var(--body); font-weight: 400; font-size: .7rem; color: var(--ink-soft); }
.fc-stat .l { font-size: .66rem; text-transform: uppercase; letter-spacing: .6px; color: var(--ink-soft); margin-top: 4px; line-height: 1.3; }
/* Wide screens: two label/description pairs per row so the block fills the panel. */
@media (min-width: 1040px) {
  .fc-defs { grid-template-columns: 132px minmax(0, 1fr) 132px minmax(0, 1fr); column-gap: 28px; }
}
@media (max-width: 900px) { .fc-two { grid-template-columns: 1fr; gap: 4px; } .fc-two section + section { margin-top: 14px; } }
@media (max-width: 640px) {
  .fc-defs { grid-template-columns: 1fr; gap: 2px 0; }
  .fc-defs dd { margin-bottom: 12px; max-width: none; }
  /* Two tiles per row on phones so every tile grid stays compact. */
  .mini-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .mini-grid .tile { padding: 10px 12px; }
  .mini-grid .tile-value { font-size: 1.2rem; }
  .kpi-grid, .sched-grid, .live-grid, .fac-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .fc-rev-grid { grid-template-columns: 1fr 1fr; }
  .modes-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi .value { font-size: 1.35rem; }
}