/* Heroes Monitoring — Less Worry brand system
   Source: Less Worry Brand Guidelines (Loba Creative). Colours: Light Teal #229C91 (+ #58ADA5, #66C7C5),
   Gold Tips #E8B723 (+ #E59D26, #E07128), Charcoal Grey #414042 (+ #58595B, #F1F2F2).
   Corporate type: Century Gothic Bold (used when installed, Jost as the web stand-in); the playful
   Bustanist lettering appears only through the real logo and super graphic artwork.
   Mood from the guide: calm teal, cheerful gold, relaxed and friendly. The super graphic is the one
   loud element (login and the foot of the sidebar); the working screens stay quiet and compact. */

@font-face { font-family: 'Jost'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/jost/jost-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/jost/jost-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/jost/jost-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/jost/jost-latin-700-normal.woff2') format('woff2'); }

:root {
  /* brand */
  --teal: #229c91;
  --teal-2: #58ada5;
  --teal-3: #66c7c5;
  --gold: #e8b723;
  --gold-2: #e59d26;
  --orange: #e07128;
  --charcoal: #414042;
  --charcoal-2: #58595b;
  --mist: #f1f2f2;

  /* derived for legibility (teal text and buttons need a deeper shade to pass WCAG AA on white) */
  --teal-ink: #17756c;
  --teal-deep: #11625a;
  --teal-wash: #e2f3f1;
  --gold-ink: #6f5300;
  --gold-wash: #fcf1cf;
  --orange-ink: #9c420d;
  --orange-wash: #fbe5d8;

  --bg: var(--mist);
  --surface: #ffffff;
  --sunk: #f6f7f7;
  --ink: var(--charcoal);
  --ink-2: var(--charcoal-2);
  --muted: #6d6e71;
  --line: #e3e4e5;
  --line-strong: #cfd1d2;
  --focus: var(--teal);

  --ok: var(--teal);        --ok-ink: var(--teal-ink);     --ok-wash: var(--teal-wash);
  --warn: var(--gold);      --warn-ink: var(--gold-ink);   --warn-wash: var(--gold-wash);
  --crit: var(--orange);    --crit-ink: var(--orange-ink); --crit-wash: var(--orange-wash);
  --none: #ececed;          --none-ink: var(--charcoal-2);

  --display: 'Century Gothic', 'Jost', 'Avenir Next', sans-serif;
  --text: 'Jost', 'Century Gothic', 'Avenir Next', 'Segoe UI', sans-serif;
  --radius: 14px;
  --radius-s: 9px;
  --shadow: 0 1px 2px rgba(65, 64, 66, .05);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 15px/1.55 var(--text);
  font-variant-numeric: tabular-nums lining-nums;
}
a { color: var(--teal-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--teal-deep); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--display); color: var(--ink); letter-spacing: 0; }
h2.mod { font-size: 28px; line-height: 1.15; font-weight: 700; margin: 0 0 6px; }
h3 { font-size: 18px; line-height: 1.3; font-weight: 700; margin: 28px 0 10px; }
p { margin: 0 0 10px; }
.small, .muted { font-size: 13px; color: var(--muted); }
code { font-size: 13px; background: var(--sunk); padding: 1px 5px; border-radius: 5px; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- shell */
.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.rail {
  background: var(--surface); border-right: 1px solid var(--line); position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; padding: 20px 14px 0; overflow-y: auto;
}
.rail .tools { display: flex; align-items: flex-start; justify-content: space-between; padding: 0 0 4px 8px; }
.brand { display: inline-flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ink); }
.brand img { display: block; width: 118px; height: auto; }
.brand .by { font: 700 13px/1 var(--display); color: var(--teal-ink); margin: 4px 0 0 4px; }
.rail nav { display: flex; flex-direction: column; gap: 2px; padding-bottom: 12px; }
.rail .group { font-size: 12.5px; font-weight: 500; color: var(--muted); padding: 16px 10px 5px; }
.rail nav a {
  display: block; padding: 7px 11px; border-radius: var(--radius-s); color: var(--ink);
  text-decoration: none; font-size: 14.5px; font-weight: 500;
}
.rail nav a:hover { background: var(--sunk); color: var(--ink); }
.rail nav a.on { background: var(--teal-wash); color: var(--teal-ink); font-weight: 600; }
.rail .me { margin-top: auto; border-top: 1px solid var(--line); padding: 12px 8px 12px; font-size: 13.5px; }
.rail .me a { color: var(--ink); text-decoration: none; font-weight: 600; }
.rail .me .role { color: var(--muted); font-size: 12.5px; margin: 2px 0 6px; }
.rail .me button { background: none; border: 0; color: var(--teal-ink); padding: 0; font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
/* super graphic at the foot of the sidebar, like the stationery edge */
.rail .strip { flex: 0 0 64px; margin: 0 -14px; background: url('/static/brand/pattern.png') 0 0 / 260px auto repeat-x; opacity: .9; }

.topbar { display: none; }
.bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-s); color: var(--charcoal-2); }
.bell:hover { background: var(--sunk); color: var(--ink); }
.bell svg { width: 20px; height: 20px; }
.bell .count { position: absolute; top: 2px; right: 1px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--orange); color: #fff; font: 600 11px/17px var(--text); text-align: center; }

main { padding: 30px 40px 64px; max-width: 1280px; width: 100%; min-width: 0; }
main.wide { max-width: 1560px; }

/* ---------------------------------------------------------------- page head */
.pagehead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.pagehead p.lead { max-width: 72ch; color: var(--ink-2); font-size: 15px; margin: 0; }
.pagehead .actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- surfaces */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px; box-shadow: var(--shadow); }
.card > h3:first-child { margin-top: 0; }
.grid { display: grid; gap: 16px; }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Cards side by side keep their own height (a short list does not leave an empty box). */
.grid.g2, .grid.g3 { align-items: start; }
a.card { display: block; color: inherit; text-decoration: none; }
a.card:hover { border-color: var(--teal-2); }
a.card h3 { color: var(--teal-ink); }

/* Stat strip: tiles keep their own width instead of stretching across wide screens; dividers are
   drawn per tile (right and bottom edge, clipped by the container) so they stay right when tiles wrap. */
.grid:has(> .stat) {
  display: flex; flex-wrap: wrap; gap: 0; width: fit-content; max-width: 100%;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 22px; box-shadow: var(--shadow);
}
.stat { flex: 1 1 190px; max-width: 320px; padding: 15px 22px 17px; min-width: 0; margin: 0 -1px -1px 0; box-shadow: inset -1px 0 0 var(--line), inset 0 -1px 0 var(--line); }
.stat .lab { font-size: 13.5px; color: var(--ink-2); font-weight: 500; }
.stat .val { font: 700 30px/1.15 var(--display); margin: 6px 0 4px; color: var(--ink); }
.stat.t-green .val { color: var(--teal-ink); }
.stat.t-red .val { color: var(--orange-ink); }
.stat.t-amber .val { color: var(--gold-ink); }
.stat .note { font-size: 13px; color: var(--muted); }
.stat .val .gd { display: inline-block; font-size: 21px; margin-right: 12px; }
.stat .val .gd:last-child { margin-right: 0; }

/* ---------------------------------------------------------------- status labels */
.badge {
  --tag-bg: var(--none); --tag-ink: var(--none-ink); --tag-dot: #a3a4a6;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font: 600 12.5px/1.2 var(--text); color: var(--tag-ink); background: var(--tag-bg);
  padding: 4px 10px 4px 8px; border-radius: 999px;
}
.badge::before { content: ''; flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--tag-dot); }
.bd-green { --tag-bg: var(--ok-wash); --tag-ink: var(--ok-ink); --tag-dot: var(--ok); }
.bd-amber { --tag-bg: var(--warn-wash); --tag-ink: var(--warn-ink); --tag-dot: var(--gold-2); }
.bd-red { --tag-bg: var(--crit-wash); --tag-ink: var(--crit-ink); --tag-dot: var(--orange); }
.bd-grey { --tag-bg: var(--none); --tag-ink: var(--none-ink); --tag-dot: #a3a4a6; }
/* Neutral info labels: outlined, no dot. */
.bd-blue { --tag-bg: var(--surface); --tag-ink: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-strong); padding: 3px 10px; }
.bd-blue::before { display: none; }
td .badge + .small, td .badge + div { margin-top: 4px; }

/* ---------------------------------------------------------------- tables */
/* Wide tables share the content width. Tables of up to three columns (a name and one or two numbers) are as
   wide as their content, so the numbers sit next to their names; app.js puts such a table, its search bar and
   pager in one .tableblock of that width. Inside a card the card is the frame (no second border).
   Headers may wrap instead of forcing wide columns; numbers use tabular figures and stay on one line. */
.tablewrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); width: 100%; max-width: 100%; box-shadow: var(--shadow); margin-bottom: 4px; }
.tablewrap.narrow, .tableblock.narrow { width: fit-content; min-width: min(100%, 420px); max-width: 100%; }
.tableblock { max-width: 100%; }
.tableblock.narrow > .tablewrap { width: 100%; min-width: 0; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
th { font: 600 13px/1.3 var(--text); color: var(--ink-2); background: var(--sunk); border-bottom-color: var(--line-strong); white-space: normal; vertical-align: bottom; min-width: 7ch; }
th a { color: inherit; text-decoration: none; }
th a:hover { color: var(--teal-ink); }
td.num, th.num { text-align: right; }
td.num { white-space: nowrap; font-variant-numeric: tabular-nums; }
td.nowrap, th.nowrap { white-space: nowrap; }
td:first-child { white-space: nowrap; }
td:first-child .rowmeta { white-space: normal; }
td { min-width: 0; }
td:not(.num) { max-width: 46ch; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even of :not([hidden])) td { background: #fbfcfc; }
tbody tr:hover td { background: #f3f7f6; }
.tablewrap tr[hidden] { display: none !important; }
/* Sortable headers (app.js) */
th .sorthead { all: unset; cursor: pointer; display: inline-block; color: inherit; font: inherit; text-align: inherit; }
/* The ↕ hint shows on hover/focus only; the arrow of the sorted column always shows. Number columns carry it
   on the left so their label stays flush with the numbers. */
th .sorthead::after, th.num .sorthead::before { content: '↕'; font-size: 11px; color: var(--muted); margin-left: 5px; opacity: 0; }
th .sorthead:hover::after, th .sorthead:focus-visible::after, th.num .sorthead:hover::before, th.num .sorthead:focus-visible::before { opacity: .8; }
th:is([aria-sort="ascending"], [aria-sort="descending"]) .sorthead::after, th.num:is([aria-sort="ascending"], [aria-sort="descending"]) .sorthead::before { opacity: 1; }
th.num .sorthead::after { content: none; }
th.num .sorthead::before { margin: 0 5px 0 0; }
th[aria-sort="ascending"] .sorthead::after, th.num[aria-sort="ascending"] .sorthead::before { content: '▲'; color: var(--teal); font-size: 9px; }
th[aria-sort="descending"] .sorthead::after, th.num[aria-sort="descending"] .sorthead::before { content: '▼'; color: var(--teal); font-size: 9px; }
th.num[aria-sort] .sorthead::after { content: none; }
th .sorthead:hover { color: var(--teal-ink); }
th .sorthead.icon { margin-left: 4px; vertical-align: bottom; }
th .sorthead:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.tablebar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0 0 8px; }
.tablebar input[type="search"] { width: 240px; max-width: 100%; min-height: 34px; padding: 5px 10px; font-size: 13.5px; }
.tablebar .sortsel { display: none; min-height: 34px; font-size: 13.5px; }
.tablebar .count { margin-left: auto; font-size: 13px; color: var(--muted); }
td .small { margin-top: 2px; }
/* A total row stays under the rows: sorting, searching and paging only move tbody rows. */
tfoot td { background: var(--sunk); border-top: 1px solid var(--line-strong); border-bottom: 0; }
/* Long text in a table cell: two lines, the whole text in the tooltip (and still found by search). */
/* A long nota number (INV/118/1788409997333/1) may break after its slashes instead of widening the first column. */
td .nota { white-space: normal; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-width: 20ch; }
.tablewrap.dense th, .tablewrap.dense td { padding-left: 10px; padding-right: 10px; }
/* Server-paged lists (pagedTable): the search and sort forms sit in the table bar like the client ones. */
.tablebar form { display: contents; }
.tablebar [data-live-part="search-keep"] { display: none; }
.pager form.inline { display: inline-flex; }
.rangebar .resetlink { align-self: center; }
[data-live-list][aria-busy="true"] [data-live-part="table"] { opacity: .55; transition: opacity .15s .1s; }
.card .tablewrap, .card .tableblock { width: 100%; min-width: 0; }
.card .tablewrap { border: 0; border-radius: 0; background: none; box-shadow: none; }
.card table th { background: transparent; }
.card th:first-child, .card td:first-child { padding-left: 0; }
.card th:last-child, .card td:last-child { padding-right: 0; }
.card tbody tr:nth-child(even of :not([hidden])) td { background: none; }

/* ---------------------------------------------------------------- forms */
input, select, textarea {
  font: 400 14.5px/1.3 var(--text); color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius-s); padding: 7px 11px; min-height: 38px;
}
input[type="checkbox"], input[type="radio"] { min-height: 0; accent-color: var(--teal); width: 16px; height: 16px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--teal-3); outline-offset: 0; border-color: var(--teal); }
input[disabled], select[disabled], textarea[disabled] { background: var(--sunk); color: var(--ink-2); }
select { max-width: 100%; }
textarea { width: 100%; min-height: 84px; resize: vertical; }
label { color: var(--ink-2); }
form.stack { display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
form.stack > .btn { align-self: flex-start; }
form.stack label, label.stackfield { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; font-weight: 500; }
form.inline { display: inline; }
.controls { display: flex; gap: 10px 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 18px; }
.controls label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 500; }
.check { display: flex !important; flex-direction: row !important; gap: 8px; align-items: center; font-size: 14px !important; font-weight: 400 !important; color: var(--ink) !important; padding: 3px 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 18px;
  font: 600 14px/1 var(--text); color: #fff; background: var(--teal-ink); border: 1px solid var(--teal-ink);
  border-radius: 999px; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; }
.btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn.ghost:hover { background: var(--sunk); border-color: var(--charcoal-2); color: var(--ink); }
.btn.danger { background: var(--orange-ink); border-color: var(--orange-ink); }
.btn.danger:hover { background: #7f360b; border-color: #7f360b; }
.btn.small-btn { min-height: 32px; padding: 0 13px; font-size: 13px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* date range toolbar and tabs */
.rangebar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin-bottom: 22px; }
.segmented { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); max-width: 100%; overflow-x: auto; }
.segmented a { padding: 0 14px; min-height: 32px; display: inline-flex; align-items: center; font-size: 13.5px; font-weight: 500; color: var(--ink-2); text-decoration: none; border-radius: 999px; white-space: nowrap; }
.segmented a:hover { background: var(--sunk); color: var(--ink); }
.segmented a.on { background: var(--teal-ink); color: #fff; }
.segmented { scrollbar-width: none; }
.segmented::-webkit-scrollbar { display: none; }
.segmented.tabs { margin-bottom: 14px; }
.rangebar .dates { display: flex; align-items: flex-end; gap: 6px; }
.rangebar .dates label { font-size: 13px; font-weight: 500; display: flex; flex-direction: column; gap: 4px; }
.rangebar .dates .to { padding-bottom: 9px; color: var(--muted); }

details.filterbox { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 16px; margin-bottom: 16px; }
details.filterbox summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--teal-ink); }
details.filterbox form { margin: 12px 0 2px; }

/* ---------------------------------------------------------------- messages */
.flash { padding: 11px 16px; border-radius: var(--radius-s); margin-bottom: 16px; font-size: 14.5px; border: 1px solid; background: var(--surface); max-width: 110ch; }
.flash-ok { border-color: #b9e0db; background: var(--ok-wash); }
.flash-err { border-color: #f1c1a4; background: var(--crit-wash); }
.flash-info { border-color: var(--line-strong); background: var(--surface); }
.disclaimer { background: var(--warn-wash); border: 1px solid #f0dc97; color: var(--ink); border-radius: var(--radius-s); padding: 11px 16px; font-size: 14px; margin-bottom: 18px; max-width: 110ch; }
.disclaimer ul { margin: 6px 0 0; padding-left: 18px; }
.disclaimer li { margin: 2px 0; }
.empty { padding: 26px 20px; text-align: center; color: var(--ink-2); background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius); max-width: 760px; }

.alert { display: grid; grid-template-columns: 4px 1fr; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 12px 16px 12px 0; margin-bottom: 8px; overflow: hidden; max-width: 900px; }
.alert .ic { width: 4px; background: var(--line-strong); font-size: 0; }
.alert.crit .ic { background: var(--orange); }
.alert.warn .ic { background: var(--gold); }
.alert.info .ic { background: var(--teal); }
.alert h4 { margin: 0; font: 600 15px/1.35 var(--text); }
.alert p { margin: 2px 0 0; font-size: 13.5px; color: var(--ink-2); }

/* ---------------------------------------------------------------- misc components */
.permgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; margin: 14px 0; }
.permgrid fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px 12px; margin: 0; background: var(--surface); }
.permgrid legend { font: 700 15px var(--display); padding: 0 4px; color: var(--ink); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 7px 18px; font-size: 14.5px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.timeline { list-style: none; padding: 0; margin: 0 0 12px; }
.timeline li { border-left: 2px solid var(--line); padding: 0 0 14px 14px; position: relative; font-size: 14px; }
.timeline li::before { content: ''; position: absolute; left: -5px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--surface); border: 2px solid var(--teal); }
.pager { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0 22px; font-size: 13.5px; }
.pager .count { color: var(--muted); margin-right: 6px; }
.pager a, .pager button, .pager span.on, .pager span.off, .pager span.gap { min-width: 32px; height: 32px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-s); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; text-decoration: none; cursor: pointer; }
.pager a:hover, .pager button:hover { border-color: var(--teal-2); color: var(--teal-ink); }
.pager span.on, .pager a.on { background: var(--teal); border-color: var(--teal); color: #fff; cursor: default; }
.pager span.off, .pager span.gap { color: var(--line-strong); cursor: default; border-color: transparent; background: none; }
.pager select { min-height: 32px; font-size: 13px; margin-left: 6px; }
details { margin: 0; }
summary { cursor: pointer; }
canvas { max-width: 100%; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: var(--ink-2); margin: 0 0 10px; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px 12px 12px; margin: 0; min-width: 0; }
legend { padding: 0 4px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 14px; margin-bottom: 10px; }
form.stack .checks label { flex-direction: row; align-items: center; gap: 7px; font-weight: 400; color: var(--ink); }
.capfields { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 20px; }
.capfield { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.capfield input[type="number"] { width: 100%; min-width: 0; }

/* performance */
.rankno { font: 700 19px/1 var(--display); color: var(--ink-2); min-width: 1.6em; display: inline-block; }
.bar { height: 6px; background: var(--sunk); border-radius: 3px; overflow: hidden; min-width: 80px; }
.bar > span { display: block; height: 100%; background: var(--teal); border-radius: 3px; }
.grade { font: 700 20px/1 var(--display); display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 10px; }
.grade.g-A { background: var(--teal); color: #fff; }
.grade.g-B { background: var(--teal-wash); color: var(--teal-ink); box-shadow: inset 0 0 0 1px #b9e0db; }
.grade.g-C { background: var(--gold); color: var(--charcoal); }
.grade.g-D { background: var(--orange); color: #fff; }
.nograde { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; color: var(--muted); font: 600 18px/1 var(--display); }
.who { min-width: 170px; }
.perf th { white-space: normal; vertical-align: bottom; }
.perf th .w { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }
.scorecell { display: grid; grid-template-columns: 2.2em minmax(80px, 1fr); align-items: center; gap: 8px; }
.scorecell strong { font: 700 17px/1 var(--display); }
.scorecell.off strong { color: var(--muted); font-weight: 500; }
.scorecell.off .bar > span { background: var(--line-strong); }
.person { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; width: fit-content; max-width: 100%; padding-right: 32px; }
.person .grade { width: 58px; height: 58px; font-size: 32px; border-radius: 16px; }
.person .big { font: 700 32px/1.05 var(--display); }

/* home: "Hari ini" */
.fresh { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.fresh span { font-size: 12.5px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; }
.fresh span.stale { color: var(--gold-ink); background: var(--gold-wash); border-color: #f0dc97; }
.actions-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 4px 0 22px; }
.card.action { display: flex; flex-direction: column; gap: 14px; margin: 0; border-top: 3px solid var(--line-strong); }
.card.action .grow { flex: 1; }
.card.action .num { font: 700 30px/1.15 var(--display); margin-bottom: 4px; }
.card.action .what { font-size: 14.5px; font-weight: 500; line-height: 1.3; margin-bottom: 4px; }
.card.action .btn { align-self: stretch; }
.card.action.t-red { border-top-color: var(--orange); }
.card.action.t-red .num { color: var(--orange-ink); }
.card.action.t-amber { border-top-color: var(--gold); }
.card.action.t-amber .num { color: var(--gold-ink); }
.card.action.t-green { border-top-color: var(--teal); }
.card.action.t-green .num { color: var(--teal-ink); font-size: 24px; }
.card.action.t-none .num { color: var(--muted); }
.alert-list { list-style: none; padding: 0; margin: 0; }
.alert-list .alert { grid-template-columns: 4px 1fr auto; align-items: center; }
.alert-list .alert > a { padding-left: 8px; white-space: nowrap; }
details.howto { margin-top: 10px; max-width: 110ch; }
details.howto summary { font-size: 13.5px; color: var(--teal-ink); font-weight: 500; }

/* ---------------------------------------------------------------- sign-in (the loud screen) */
body.plain { background: var(--surface); }
.login-screen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 480px); min-height: 100vh; }
.login-art { background: var(--mist) url('/static/brand/pattern.png') 0 0 / 520px auto repeat; }
.login-panel { display: flex; flex-direction: column; justify-content: center; padding: 48px 56px; }
.login-panel .logo { width: 176px; height: auto; margin: 0 0 26px -4px; }
.login-panel h1 { font-size: 26px; line-height: 1.2; margin: 0 0 4px; }
.login-panel .lead { color: var(--ink-2); margin: 0 0 26px; }
.login-panel form.stack { max-width: none; }
.login-panel .btn { width: 100%; min-height: 44px; font-size: 15px; }
.plain-main { max-width: 640px; margin: 12vh auto 0; padding: 0 16px; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .rail { position: fixed; inset: 0 auto 0 0; width: 264px; z-index: 40; transform: translateX(-100%); transition: transform .18s ease-out; box-shadow: 0 0 0 1px var(--line); }
  body.nav-open .rail { transform: none; }
  body.nav-open::after { content: ''; position: fixed; inset: 0; background: rgba(65, 64, 66, .4); z-index: 30; }
  .topbar { display: flex; position: sticky; top: 0; z-index: 20; align-items: center; gap: 8px; padding: 8px 12px; background: var(--surface); border-bottom: 1px solid var(--line); }
  .topbar .brand img { width: 80px; }
  .topbar .spacer { flex: 1; }
  .menu-btn { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; background: none; border: 0; color: var(--ink); border-radius: var(--radius-s); cursor: pointer; }
  .menu-btn svg { width: 22px; height: 22px; }
  main, main.wide { padding: 18px 16px 56px; }
  h2.mod { font-size: 24px; }
  .g3, .g2 { grid-template-columns: minmax(0, 1fr); }
  /* Wide tables scroll sideways; keep the row label in view. */
  .tablewrap { width: auto; min-width: 0; }
  .tablewrap th:first-child, .tablewrap td:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; box-shadow: 1px 0 0 var(--line); }
  .tablewrap th:first-child { background: var(--sunk); }
  .card .tablewrap th:first-child { background: var(--surface); }
  .rangebar { flex-direction: column; align-items: stretch; }
  .rangebar .dates input { width: 100%; }
  .rangebar .dates label { flex: 1; }
  .login-screen { grid-template-columns: 1fr; grid-template-rows: 150px auto; }
  .login-art { background-size: 360px auto; }
  .login-panel { padding: 28px 22px 40px; justify-content: flex-start; }
  .login-panel .logo { width: 140px; }
}
@media (max-width: 560px) {
  .grid:has(> .stat) { width: 100%; }
  .stat { flex-basis: 150px; }
  .stat { padding: 12px 14px; }
  .stat .val { font-size: 25px; }
  .stat .val:has(> .gd) { display: grid; grid-template-columns: repeat(2, max-content); column-gap: 16px; }
  .stat .val .gd { margin-right: 0; }
  .segmented { width: 100%; }
  .segmented a { flex: 1 0 auto; justify-content: center; }
}
/* Phones: table rows become cards (first column = title, other cells show their column label). */
@media (max-width: 560px) {
  .tablebar .sortsel { display: block; }
  .tablebar input[type="search"] { width: 100%; }
  .tablewrap.cards tbody tr:nth-child(even of :not([hidden])) td { background: none; }
  .tablewrap.cards { border: 0; background: none; box-shadow: none; overflow: visible; }
  .tablewrap.cards.narrow, .tableblock.narrow:has(> .tablewrap.cards) { width: 100%; min-width: 0; }
  .tablewrap.cards table, .tablewrap.cards tbody, .tablewrap.cards tr, .tablewrap.cards td { display: block; width: 100%; }
  .tablewrap.cards thead { display: none; }
  .tablewrap.cards tr { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); margin-bottom: 10px; padding: 10px 14px; box-shadow: var(--shadow); }
  .tablewrap.cards tbody tr:hover td { background: none; }
  .tablewrap.cards td { border: 0; padding: 4px 0; display: grid; grid-template-columns: minmax(90px, 38%) minmax(0, 1fr); gap: 10px; text-align: left; max-width: none; white-space: normal; }
  .tablewrap.cards td::before { content: attr(data-label); color: var(--muted); font-size: 12.5px; }
  .tablewrap.cards td:first-child { position: static; box-shadow: none; display: block; font-weight: 600; padding-bottom: 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
  .tablewrap.cards td:first-child::before { display: none; }
  .tablewrap.cards td[data-label=""]::before { display: none; }
  .tablewrap.cards td[data-label=""] { display: block; }
  .tablewrap.cards td:empty { display: none; }
}
@media (prefers-reduced-motion: reduce) { .rail { transition: none; } }

/* ---------------------------------------------------------------- produktivitas */
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px 16px; align-items: end; }
.form-grid > label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 500; }
.form-grid > label:has(> input[type="checkbox"]) { flex-direction: row; align-items: center; gap: 8px; }
.form-grid > p, .form-grid > fieldset { grid-column: 1 / -1; margin: 0; }
.form-grid fieldset label { display: inline-flex; flex-direction: column; gap: 4px; margin: 0 14px 8px 0; font-size: 13px; }
.linklike { background: none; border: 0; padding: 0; color: var(--teal-ink); text-decoration: underline; cursor: pointer; font: inherit; font-size: 13px; }
[data-stopwatch][aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--ink); }

/* Bulk actions above a row table, and the inline result message of forms that do not reload. */
.bulkbar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; padding: 10px 14px; margin-bottom: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.bulkbar label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 500; }
.bulkbar label.check { flex-direction: row; align-items: center; gap: 8px; }
.bulkbar .sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 4px; }
.bulkbar [data-pending-count] { margin-left: auto; align-self: center; }
.bulkbar [data-picked-count] { align-self: center; }
.formmsg:empty { display: none; }
.bulkbar .formmsg { flex-basis: 100%; margin: 0; max-width: none; }
.formmsg { padding: 9px 14px; border-radius: var(--radius-s); margin-bottom: 10px; font-size: 14px; border: 1px solid var(--line); background: var(--surface); max-width: 110ch; }
.formmsg.ok { border-color: var(--teal-2); background: var(--teal-wash); }
.formmsg.err { border-color: #f0b8a0; background: #fdf0ea; }
td select, td input:not([type="checkbox"]) { min-height: 32px; font-size: 13.5px; max-width: 100%; }

/* Floating result for row actions and restored positions. */
.toast { position: fixed; right: 20px; bottom: 20px; z-index: 50; max-width: min(460px, calc(100vw - 32px)); padding: 11px 16px; border-radius: var(--radius-s);
  background: var(--surface); border: 1px solid var(--line-strong); box-shadow: 0 6px 24px rgba(65, 64, 66, .18); font-size: 14px; display: none; gap: 12px; align-items: center; }
.toast.show { display: flex; }
.toast.ok { border-color: var(--teal-2); }
.toast.err { border-color: #f0b8a0; }
.formmsg .linklike, .toast .linklike { margin-left: 12px; font-weight: 600; }
tr[aria-busy="true"] td { opacity: .5; }
tr.edited td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
tr.flash-row td { animation: rowflash 1.6s ease-out; }
@keyframes rowflash { from { background: var(--teal-wash); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { tr.flash-row td { animation: none; } }
tr[data-key] { scroll-margin-top: 110px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 560px) { .bulkbar { position: static; } }
td .rowfields { display: grid; gap: 5px; min-width: 190px; }
td .rowfields input, td .rowfields select { width: 100%; }

/* ---------------------------------------------------------------- settings forms (one form, one save) */
/* The whole page is one form; this bar sticks to the bottom and saves everything at once. */
.savebar { position: sticky; bottom: 0; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 18px 0 0;
  padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 -4px 18px rgba(65, 64, 66, .08); }
.savebar .savebar-count { font-size: 14px; color: var(--ink-2); }
.savebar.dirty { border-color: var(--gold); }
.savebar.dirty .savebar-count { color: var(--gold-ink); font-weight: 600; }
.savebar .savebar-actions { margin-left: auto; display: flex; gap: 8px; }
input.changed, select.changed, textarea.changed { border-color: var(--gold); background: var(--gold-wash); }
label.check:has(input.changed) { color: var(--gold-ink) !important; }
tr.removing td { text-decoration: line-through; color: var(--muted); }
tr.removing td input, tr.removing td select { text-decoration: none; opacity: .6; }
/* Number with its unit, aligned in tables. */
.numfield { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.numfield input { text-align: right; }
.numfield .unit { font-size: 12.5px; color: var(--muted); }
/* A row that belongs to the row above (an outlet override of a default). */
tr.sub td:first-child { padding-left: 34px; }
tr.sub td:first-child > .cv { display: flex; align-items: center; gap: 6px; }
tr.sub td:first-child > .cv::before { content: '↳'; color: var(--muted); }
tr.adder td { background: var(--sunk); }
.rowmeta { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
h3.section { margin: 26px 0 8px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
h3.section .small { font-weight: 400; }
@media (max-width: 560px) { .savebar .savebar-actions { margin-left: 0; width: 100%; } .savebar .savebar-actions .btn { flex: 1; } }
/* Target-style grids: the "add an exception" row stays a quiet line until an outlet is chosen. */
tr.adder td { background: transparent; padding-top: 4px; padding-bottom: 8px; }
tr.adder select { min-height: 30px; font-size: 13px; color: var(--teal-ink); border-style: dashed; background: transparent; }
tr.adder:has(select option[value=""]:checked) td:not(:first-child) .cv > * { visibility: hidden; }
tr.adder:has(select option[value=""]:checked) td:first-child > .cv::before { content: ''; }
.dir { display: inline-block; margin-left: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; }
td input[type="date"] { min-width: 15ch; }
.form-grid > .savebar, .card > .savebar { grid-column: 1 / -1; }
.card > .savebar, .card.stack > .savebar { margin-left: -8px; margin-right: -8px; }
.numfield input { min-width: 7ch; padding-right: 6px; }
tr.total td { font-weight: 600; background: var(--sunk); }
tr.unscored td { color: var(--muted); }
th .rowmeta { font-weight: 400; }
th .rowmeta { white-space: nowrap; }
.tgt { display: inline-flex; flex-direction: column; gap: 4px; }
.numfield input::placeholder { color: #b9bbbd; font-style: italic; }

/* Password box with a show/hide button (app.js). */
.pwfield { position: relative; display: block; }
.pwfield input { width: 100%; padding-right: 46px; }
.pwtoggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; min-height: 0; padding: 0;
  border: 0; border-radius: 8px; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.pwtoggle:hover { color: var(--ink); background: var(--sunk); }
.pwtoggle:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }

/* ---------- Insight visuals (views/charts.js) ---------- */
.chart { margin: 14px 0 18px; padding: 14px 16px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); max-width: 760px; }
.chart-title { font-family: var(--display); font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.chart-note, .chart-empty { font-size: 12.5px; color: var(--muted); margin: 6px 0 0; }
.chart-scroll { overflow-x: auto; }
.chart-svg { display: block; width: 100%; min-width: 420px; height: auto; font-family: var(--text); }
.chart-svg .grid { stroke: var(--line); stroke-width: 1; }
.chart-svg .ax { font-size: 11px; fill: var(--muted); }
.chart-svg .ax.end { fill: var(--ink); font-weight: 600; }
.chart-svg .target, .spark .target { stroke: var(--charcoal); stroke-width: 1.2; stroke-dasharray: 4 3; fill: none; }
.chart-svg .series path { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.chart-svg .series .dot { stroke: var(--surface); stroke-width: 1.2; }
.chart-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; padding: 0; font-size: 12.5px; color: var(--ink-2); }
.chart-legend .key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -2px; }
.chart-legend .key.dash { height: 0; border-top: 2px dashed var(--charcoal); border-radius: 0; vertical-align: 3px; }

/* one palette for fills (bars, keys, dots) and strokes (lines) */
.tone-ok, .tone-teal { --tone: var(--teal); }
.tone-teal2 { --tone: var(--teal-3); }
.tone-warn, .tone-gold { --tone: var(--gold); }
.tone-crit, .tone-orange { --tone: var(--orange); }
.tone-none, .tone-mist { --tone: #cfd1d2; }
.tone-charcoal { --tone: var(--charcoal-2); }
.chart-svg rect[class^="tone-"], .chart-legend .key[class*="tone-"], .hb-fill, .bl-fill, .db-dot, .sb-part { background: var(--tone); fill: var(--tone); }
.chart-svg .series[class*="tone-"] path { stroke: var(--tone); }
.chart-svg .series[class*="tone-"] .dot { fill: var(--tone); }
.spark { display: inline-block; vertical-align: middle; overflow: visible; }
.spark path { fill: none; stroke: var(--tone); stroke-width: 1.8; }
.spark circle { fill: var(--tone); }

.hbars { display: grid; gap: 6px; }
.hbar { display: grid; grid-template-columns: minmax(90px, 32%) 1fr auto; align-items: center; gap: 10px; font-size: 13.5px; }
/* Long labels wrap to a second line instead of being cut (the full label is also in the hover box). */
.hb-label { overflow-wrap: anywhere; line-height: 1.25; }
.hb-track { position: relative; height: 12px; background: var(--sunk); border-radius: 6px; }
.hb-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; }
.hb-target { position: absolute; top: -3px; bottom: -3px; border-left: 2px dashed var(--charcoal); }
.hb-value { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; min-width: 58px; }
.hb-note { display: block; font-size: 11.5px; color: var(--muted); }
@media (max-width: 560px) { .hbar { grid-template-columns: 1fr auto; } .hb-track { grid-column: 1 / -1; grid-row: 2; } }

.bullet { position: relative; display: inline-block; width: 84px; height: 8px; background: var(--sunk); border-radius: 4px; vertical-align: middle; margin-top: 4px; }
.bl-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.bl-tick { position: absolute; top: -3px; bottom: -3px; border-left: 2px solid var(--charcoal); }
.bl-tick.crit { border-left: 2px dotted var(--orange-ink); }

.dumbbell { position: relative; display: inline-block; width: 120px; height: 14px; vertical-align: middle; }
.db-band { position: absolute; top: 3px; bottom: 3px; background: var(--teal-wash); border-radius: 4px; }
.db-line { position: absolute; top: 6px; height: 2px; background: var(--line-strong); }
.db-dot { position: absolute; top: 2px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; border: 1.5px solid var(--surface); }

.stackbar { display: flex; height: 16px; border-radius: 8px; overflow: hidden; background: var(--sunk); }
.sb-part { height: 100%; }
.sb-part + .sb-part { border-left: 1.5px solid var(--surface); }

.trend { font-size: 11px; margin-left: 4px; }
.trend.good { color: var(--teal-ink); }
.trend.bad { color: var(--orange-ink); }
.trend.flat { color: var(--muted); }

/* Pembaruan Data: why a schedule or a run failed (plain words first, per-outlet lines under "Detail teknis"). */
.syncfail > * + * { margin-top: 3px; }
.failwhy { margin-top: 6px; font-size: 13px; }
.faillines { margin: 4px 0 0; padding-left: 16px; }
.faillines li { margin: 1px 0; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- chart details (app.js chartTips) */
.charttip { position: fixed; z-index: 60; pointer-events: none; min-width: 150px; max-width: 280px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 8px 24px rgba(30, 40, 40, .14); padding: 8px 11px; font-size: 12.5px; line-height: 1.4; color: var(--ink); }
.charttip[hidden] { display: none; }
.ct-title { font-weight: 600; margin-bottom: 4px; }
.ct-row { display: flex; align-items: center; gap: 6px; }
.ct-key { flex: none; width: 9px; height: 9px; border-radius: 2px; background: var(--tone); }
.ct-name { color: var(--ink-2); }
.ct-val { margin-left: auto; padding-left: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ct-sub { color: var(--muted); font-size: 11.5px; margin: 0 0 3px 15px; }
.ct-foot { color: var(--muted); margin-top: 5px; padding-top: 4px; border-top: 1px solid var(--line); }
.ct-foot + .ct-foot { margin-top: 0; padding-top: 1px; border-top: 0; }
.chart-svg .hit { fill: transparent; }
.chart-svg .guide { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; pointer-events: none; }
.chart-svg.hovering .guide { opacity: .6; }
.chart-svg .series .dot { transform-box: fill-box; transform-origin: center; transition: transform .1s; }
.chart-svg .series .dot.on { transform: scale(1.7); }
.chart-svg.hovering rect[data-i]:not(.hit):not(.on) { opacity: .4; }
.hbars.hovering .hbar:not(.on), .stackbar.hovering .sb-part:not(.on) { opacity: .5; }
.hbar.on .hb-label { color: var(--teal-ink); font-weight: 600; }
.bullet.on, .dumbbell.on, .spark.on { filter: drop-shadow(0 0 2px rgba(34, 156, 145, .45)); }
[data-chart]:focus-visible, .bullet:focus-visible, .dumbbell:focus-visible, .spark:focus-visible, .trend:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
[data-chart]:focus:not(:focus-visible) { outline: none; }
@media (prefers-reduced-motion: reduce) { .chart-svg .series .dot { transition: none; } }