/* Koscom Cable admin. Generated from the design prototype (admin/prototype/page.html), then extended.
   Colours and type follow koscomnetworks.com: navy #0F1F64, Inter, light blue-grey cards. */
/* Layout: navy rail on the left (brand colour of koscomnetworks.com), white working area on the right.
   Every screen: title and one-line purpose, summary first, table or form second. */
:root {
  --rail: #0F1F64; --rail-deep: #0A174F; --rail-fg: #FFFFFF; --rail-muted: #C3CAE8; --rail-line: #2A3A85;
  --bg: #FFFFFF; --surface: #F4F6FB; --surface-2: #E9EDF7; --line: #DCE1EF;
  --fg: #111111; --fg-soft: #1F1F1F; --muted: #565B6E;
  --accent: #0F1F64; --on-accent: #FFFFFF; --accent-soft: #E6EAF8; --link: #1B34A3;
  --ok: #17693F; --ok-soft: #E3F3EA; --warn: #8A5200; --warn-soft: #FBEFD9;
  --bad: #A6261F; --bad-soft: #FBE6E4; --info: #1B4F9C; --info-soft: #E3EDFB;
  --sick: #6B2FA0; --sick-soft: #F0E6FA; --loa: #0A6480; --loa-soft: #DDF2F8;      /* Work list: sick day, technician on leave */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r-card: 14px; --r-ctl: 10px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --rail: #0C1851; --rail-deep: #070D2C; --rail-fg: #FFFFFF; --rail-muted: #B5BEE3; --rail-line: #26347A;
    --bg: #0A1030; --surface: #111A44; --surface-2: #18235A; --line: #2A3670;
    --fg: #F3F5FC; --fg-soft: #E3E7F5; --muted: #A8B0D0;
    --accent: #B4C0FF; --on-accent: #0A1030; --accent-soft: #1C2A6B; --link: #AEBBFF;
    --ok: #7FD6A6; --ok-soft: #113A27; --warn: #F2C078; --warn-soft: #3D2B0B;
    --bad: #FF9D96; --bad-soft: #45161A; --info: #9CC3FF; --info-soft: #12305C;
    --sick: #D3B3F5; --sick-soft: #2E1B4A; --loa: #8FD9EE; --loa-soft: #0C3442;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --rail: #0C1851; --rail-deep: #070D2C; --rail-fg: #FFFFFF; --rail-muted: #B5BEE3; --rail-line: #26347A;
  --bg: #0A1030; --surface: #111A44; --surface-2: #18235A; --line: #2A3670;
  --fg: #F3F5FC; --fg-soft: #E3E7F5; --muted: #A8B0D0;
  --accent: #B4C0FF; --on-accent: #0A1030; --accent-soft: #1C2A6B; --link: #AEBBFF;
  --ok: #7FD6A6; --ok-soft: #113A27; --warn: #F2C078; --warn-soft: #3D2B0B;
  --bad: #FF9D96; --bad-soft: #45161A; --info: #9CC3FF; --info-soft: #12305C;
  --sick: #D3B3F5; --sick-soft: #2E1B4A; --loa: #8FD9EE; --loa-soft: #0C3442;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; color: var(--fg); }
h1 { font-size: 28px; line-height: 1.15; }
h2 { font-size: 18px; line-height: 1.25; }
h3 { font-size: 15px; line-height: 1.3; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: var(--link); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 6px; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.mono { font-family: var(--mono); font-size: 12.5px; }

/* ---------- shell ---------- */
.app { display: grid; grid-template-columns: 244px minmax(0, 1fr); min-height: 100%; }
.side { background: var(--rail); color: var(--rail-fg); padding: 22px 14px 18px; display: flex; flex-direction: column; gap: 22px; }
.brand { padding: 0 8px; display: flex; flex-direction: column; gap: 2px; }
.brand b { font-size: 19px; font-weight: 700; letter-spacing: 0.2em; }
.brand span { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rail-muted); }
.navgroup { display: flex; flex-direction: column; gap: 2px; }
.navgroup > p { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rail-muted); padding: 0 10px 6px; }
.nav { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--rail-fg); text-decoration: none; font-size: 14.5px; font-weight: 500; opacity: .86; }
.nav svg { width: 18px; height: 18px; flex: none; }
.nav:hover { background: var(--rail-deep); opacity: 1; }
.nav[aria-current="page"] { background: var(--rail-fg); color: var(--rail); opacity: 1; font-weight: 600; }
.nav .count { margin-left: auto; font-size: 12px; font-weight: 600; background: var(--rail-deep); color: var(--rail-fg); border-radius: 999px; padding: 1px 8px; }
.nav[aria-current="page"] .count { background: var(--rail); color: var(--rail-fg); }
.who { margin-top: auto; border-top: 1px solid var(--rail-line); padding: 14px 8px 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.who b { font-weight: 600; font-size: 14px; }
.who span { color: var(--rail-muted); }
.who button { align-self: flex-start; margin-top: 8px; border: 1px solid var(--rail-line); background: transparent; color: var(--rail-fg); border-radius: 999px; padding: 4px 12px; font-size: 13px; cursor: pointer; }
.who button:hover { background: var(--rail-deep); }
.menu { display: flex; flex-direction: column; gap: 22px; flex: 1 1 auto; min-height: 0; }
.menu-toggle, .burger, .scrim { display: none; }

main { min-width: 0; padding-block: 26px 56px; padding-inline: clamp(16px, 3vw, 36px); display: flex; flex-direction: column; gap: 22px; }
.view { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.head { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-end; justify-content: space-between; }
.head > div:first-child { display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: 68ch; }
.head p { color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- pieces ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; border-radius: var(--r-ctl); border: 1px solid var(--line); background: var(--bg); color: var(--fg); padding: 8px 14px; font-weight: 500; font-size: 14px; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--surface); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { filter: brightness(1.12); background: var(--accent); }
.btn.danger { color: var(--bad); border-color: var(--bad); }
.btn.sm { padding: 5px 10px; font-size: 13px; }

.banner { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; border-radius: var(--r-card); padding: 12px 16px; background: var(--warn-soft); color: var(--warn); font-size: 14px; }
.banner b { font-weight: 600; }
.banner a { color: var(--warn); font-weight: 600; }

.card { background: var(--surface); border-radius: var(--r-card); padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.card.plain { background: var(--bg); border: 1px solid var(--line); }
.card > header { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; justify-content: space-between; }
.card > header p { color: var(--muted); font-size: 13px; }
.cols { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: start; }

.tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.tile { background: var(--surface); border-radius: var(--r-card); padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--fg); }
.tile b { font-size: 34px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tile span { font-size: 13px; color: var(--muted); }
.tile.lead { background: var(--rail); color: var(--rail-fg); }
.tile.lead span { color: var(--rail-muted); }
a.tile:hover { outline: 2px solid var(--line); }

.chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 2px 10px; font-size: 12.5px; font-weight: 600; white-space: nowrap; background: var(--surface-2); color: var(--fg-soft); }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip.ok { background: var(--ok-soft); color: var(--ok); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.bad { background: var(--bad-soft); color: var(--bad); }
.chip.info { background: var(--info-soft); color: var(--info); }
.chip.plain::before { display: none; }

.switch { position: relative; width: 40px; height: 24px; border-radius: 999px; border: 0; background: var(--line); cursor: pointer; flex: none; padding: 0; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--bg); transition: transform .15s; }
.switch[aria-checked="true"] { background: var(--ok); }
.switch[aria-checked="true"]::after { transform: translateX(16px); }
@media (prefers-reduced-motion: reduce) { .switch::after { transition: none; } }

.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--bg); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
th { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); background: var(--surface); }
tr:last-child td { border-bottom: 0; }
td.wrap { white-space: normal; min-width: 220px; }
/* A row that opens a page, without script: every cell is covered by a link (the cell is the frame of its cover). */
tbody tr.click td { position: relative; }
tbody tr.click .cover { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
tbody tr.click:hover td, tbody tr.click:focus-within td { background: var(--surface); }
td.tech > a:not(.cover) { color: inherit; text-decoration: none; }
/* A mark: a value or a short word on a soft colour with darker letters, like a chip but without the dot and
   in the size of the text around it (owner, 2026-10-02: "in the style of a badge"). */
.mark { display: inline-block; border-radius: 6px; padding: 0 6px; margin: 0 -6px; background: var(--surface-2); color: var(--fg-soft); font-weight: 600; white-space: nowrap; }
.mark.ok { background: var(--ok-soft); color: var(--ok); }
.mark.warn { background: var(--warn-soft); color: var(--warn); }
.mark.bad { background: var(--bad-soft); color: var(--bad); }
td.tech .mark, .tipterms .mark { margin: 0 0 0 4px; font-size: 12px; vertical-align: 1px; }
.tipterms dt .mark { margin: 0; }
td .sub { display: block; font-size: 12.5px; color: var(--muted); }
td.r, th.r { text-align: right; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fchip { border: 1px solid var(--line); background: var(--bg); color: var(--fg-soft); border-radius: 999px; padding: 5px 12px; font-size: 13px; cursor: pointer; }
.fchip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.search { flex: 1 1 200px; max-width: 320px; border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 7px 12px; background: var(--bg); }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tab { border: 0; background: none; padding: 9px 14px; cursor: pointer; color: var(--muted); font-weight: 500; border-bottom: 2px solid transparent; white-space: nowrap; }
.tab[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--accent); font-weight: 600; }

.list { display: flex; flex-direction: column; }
.list > li, .list > div { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.list > :last-child { border-bottom: 0; padding-bottom: 0; }
.list > :first-child { padding-top: 0; }
ul.list { list-style: none; margin: 0; padding: 0; }
.list .grow { flex: 1; min-width: 0; }
.list time { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; flex: none; width: 52px; }

.form { display: grid; gap: 16px 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label, .field .lab { font-weight: 600; font-size: 13.5px; }
.field input, .field select, .field textarea { border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 8px 11px; background: var(--bg); width: 100%; }
.field textarea { min-height: 110px; resize: vertical; line-height: 1.45; }
.field .hint { font-size: 12.5px; color: var(--muted); }
.field .inline { display: flex; align-items: center; gap: 8px; }
.field .inline input { width: 96px; }
.optrow { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); }
.optrow:last-child { border-bottom: 0; padding-bottom: 0; }
.optrow:first-child { padding-top: 0; }
.optrow div { min-width: 0; }
.optrow b { font-weight: 600; font-size: 14px; display: block; }
.optrow span { font-size: 13px; color: var(--muted); }
.savebar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }

/* day line */
.day { position: relative; height: 74px; margin: 6px 4px 0; }
.day .track { position: absolute; left: 0; right: 0; top: 30px; height: 8px; border-radius: 999px; background: var(--surface-2); }
.day .open { position: absolute; top: 30px; height: 8px; border-radius: 999px; background: var(--accent); opacity: .85; }
.day .mark { position: absolute; top: 20px; width: 2px; height: 28px; background: var(--muted); }
.day .mark span { position: absolute; top: 32px; left: 50%; transform: translateX(-50%); font-size: 11.5px; color: var(--muted); white-space: nowrap; text-align: center; line-height: 1.25; }
.day .mark.first span { left: 0; transform: none; text-align: left; }
.day .mark.now { background: var(--bad); }
.day .mark.now span { top: -20px; color: var(--bad); font-weight: 600; }
.day .dot { position: absolute; top: 27px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; border: 2px solid var(--surface); background: var(--ok); }
.day .dot.pending { background: var(--warn); }
.day .dot.declined { background: var(--bad); }

.meter { display: flex; flex-direction: column; gap: 6px; }
.meter .bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.meter .bar i { display: block; height: 100%; background: var(--ok); border-radius: 999px; }
.meter .row { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; }

.bubble { background: var(--bg); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; padding: 10px 14px; font-size: 14px; white-space: pre-line; max-width: 46ch; }
.logview { background: var(--surface); border-radius: var(--r-card); padding: 14px 16px; overflow-x: auto; font-family: var(--mono); font-size: 12.5px; line-height: 1.7; white-space: pre; color: var(--fg-soft); }
.logview .w { color: var(--warn); } .logview .e { color: var(--bad); } .logview .d { color: var(--muted); }

.matrix td, .matrix th { white-space: normal; }
.yes { color: var(--ok); font-weight: 600; } .no { color: var(--muted); }

/* login */
.login { position: fixed; inset: 0; z-index: 50; background: var(--rail); display: grid; place-items: center; padding: 24px 16px; overflow-y: auto; }
.login .box { width: min(400px, 100%); background: var(--bg); border-radius: 18px; padding: 28px 26px; display: flex; flex-direction: column; gap: 16px; }
.login .brand { padding: 0; color: var(--rail-fg); text-align: center; margin-bottom: 18px; }
.login .wrap { width: min(400px, 100%); }


@media (max-width: 520px) { .tiles .lead { grid-column: 1 / -1; } }
/* ---------- phone (up to 880px): the rail becomes a bar on top; the menu is hidden behind the three-line button ----------
   No script: the button is the label of the checkbox .menu-toggle, which stands before .app in base.html. */
@media (max-width: 880px) {
  .app { display: block; }
  .side { position: sticky; top: 0; z-index: 30; display: block; padding: 8px 8px 8px 16px; }
  .bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
  .side .brand { gap: 1px; padding: 0; min-width: 0; }
  .side .brand img { width: 112px; }       /* .side: the logo's own rule stands further down in this file */
  .side .brand img + span { margin: 0; font-size: 9.5px; letter-spacing: 0.1em; white-space: nowrap; }   /* under the logo: "Cable admin · sandbox" must fit a narrow phone */
  .burger { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 10px; color: var(--rail-fg); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .burger:hover { background: var(--rail-deep); }
  .burger svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .burger .x { display: none; }
  /* the checkbox itself is not seen, but it keeps the keyboard focus and the name "Menu" for a screen reader */
  .menu-toggle { display: block; position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
  .menu-toggle:focus-visible ~ .app .burger { outline: 2px solid var(--rail-fg); outline-offset: -4px; }
  .menu { display: none; position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - 62px); max-height: calc(100dvh - 62px); overflow-y: auto; overscroll-behavior: contain;
    background: var(--rail); border-top: 1px solid var(--rail-line); padding: 14px 14px 20px; gap: 18px; box-shadow: 0 18px 30px rgba(10, 16, 48, .28); }
  .menu-toggle:checked ~ .app .menu { display: flex; }
  .menu-toggle:checked ~ .app .burger .lines { display: none; }
  .menu-toggle:checked ~ .app .burger .x { display: block; }
  .menu-toggle:checked ~ .scrim { display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 29; background: rgba(10, 16, 48, .36); }   /* a press beside the menu closes it */
  .navs { display: flex; flex-direction: column; gap: 16px; }
  .nav { padding: 11px 10px; font-size: 15.5px; }
  .who { margin-top: 0; }
  html:has(.menu-toggle:checked) { overflow: hidden; }      /* the page behind an open menu does not scroll */
  h1 { font-size: 24px; }
}
@media (min-width: 881px) { .side { position: sticky; top: 0; height: 100vh; overflow-y: auto; } .navs { display: flex; flex-direction: column; gap: 22px; } }

/* ---------- additions for the real admin ---------- */
.brand img { width: 172px; max-width: 100%; height: auto; display: block; }
.brand img + span { margin-top: 6px; }
.who form { margin: 0; }
.who a { color: var(--rail-muted); font-size: 13px; }
.note { border-radius: var(--r-card); padding: 12px 16px; background: var(--info-soft); color: var(--info); font-size: 14px; }
.note a { color: var(--info); font-weight: 600; }
.alert { border-radius: var(--r-ctl); padding: 10px 14px; background: var(--bad-soft); color: var(--bad); font-size: 14px; }
.okmsg { border-radius: var(--r-ctl); padding: 10px 14px; background: var(--ok-soft); color: var(--ok); font-size: 14px; }
.empty { padding: 26px 16px; text-align: center; color: var(--muted); }
.kv { display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr); gap: 8px 14px; font-size: 14px; margin: 0; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.setrow { display: grid; grid-template-columns: minmax(130px, 42%) minmax(0, 1fr); gap: 4px 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.setrow:last-child { border-bottom: 0; padding-bottom: 0; } .setrow:first-child { padding-top: 0; }
.setrow dt { font-weight: 600; font-size: 14px; } .setrow dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.setrow dd small { display: block; color: var(--muted); font-size: 12.5px; }
dl.sets { margin: 0; }
.shotimg { display: block; max-width: 100%; max-height: 70vh; border-radius: var(--r-card); border: 1px solid var(--line); }
.secret { font-family: var(--mono); font-size: 20px; letter-spacing: 0.04em; padding: 14px 16px; border-radius: var(--r-ctl); background: var(--surface-2); user-select: all; overflow-wrap: anywhere; }
.narrow { max-width: 620px; }
.backlink { font-size: 14px; }
.login .box h2 { font-size: 20px; }
.login .box .btn { justify-content: center; }
.login .brand img { margin: 0 auto; width: 220px; }
.btnrow { display: flex; flex-wrap: wrap; gap: 8px; }
form.inline { display: inline; }
@media (max-width: 560px) { .setrow, .kv { grid-template-columns: minmax(0, 1fr); } }
a.fchip, a.tab, a.tile { text-decoration: none; }
a.tab { display: inline-block; }
.day a.dot { display: block; }
.day a.dot:hover { outline: 2px solid var(--link); }
.login .or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.login .or::before, .login .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

/* ---------- reports: a toolbar and a sheet ---------- */
.rbar { position: relative; display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.rbar .grow { flex: 1 1 0; }
.stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--bg); }
.stepbtn { display: grid; place-items: center; width: 36px; color: var(--fg); border-radius: var(--r-ctl); }
.stepbtn:hover { background: var(--surface); }
.stepbtn.off { color: var(--line); }
.stepbtn.off:hover { background: none; }
.stepbtn svg, .pop > summary svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pop { position: relative; }
.pop > summary { list-style: none; cursor: pointer; user-select: none; }
.pop > summary::-webkit-details-marker { display: none; }
.stepper .pop { border-inline: 1px solid var(--line); }
.stepper .pop > summary { display: flex; align-items: baseline; gap: 10px; padding: 7px 12px 7px 14px; font-size: 14px; white-space: nowrap; }
.stepper .pop > summary:hover, .stepper .pop[open] > summary { background: var(--surface); }
.stepper .pop > summary span { color: var(--muted); font-variant-numeric: tabular-nums; }
.stepper .pop > summary svg { align-self: center; color: var(--muted); margin-left: -4px; }
.pop[open] > summary.btn { background: var(--surface); }
.popbox { position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; display: flex; flex-direction: column; gap: 12px; padding: 16px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: 0 14px 36px rgba(10, 16, 48, .16); }
.pop.right .popbox { left: auto; right: 0; }
.poprow { display: flex; align-items: center; gap: 8px; margin: 0; }
.popbox .lab { font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.poprow .lab { width: 46px; flex: none; }
.popbox input { border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 6px 9px; background: var(--bg); font-variant-numeric: tabular-nums; }
.popbox input.short { width: 84px; }
.popbox .hint { font-size: 12.5px; color: var(--muted); max-width: 30ch; }
.popbox .hint.bad { color: var(--bad); }
.btn.quiet { border-color: transparent; color: var(--link); }

.sheet { border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.sheet th, .sheet td { padding: 7px 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg); }
.sheet tr > :last-child { border-right: 0; }
.sheet th { background: var(--surface); color: var(--fg-soft); font-size: 12.5px; letter-spacing: 0; text-transform: none; text-align: center; }
.sheet th.mon { text-align: left; }
.sheet .d { width: 38px; min-width: 38px; padding-inline: 0; text-align: center; }
.sheet td.c { text-align: center; }
.sheet td.on { background: var(--accent-soft); font-weight: 600; }
.sheet .wk { border-left: 2px solid var(--line); }
.sheet tbody tr:last-child td { border-bottom: 1px solid var(--line); }
.sheet tbody td.empty { border-bottom: 0; }
.sheet tfoot td { background: var(--surface); font-weight: 600; border-bottom: 0; }
.sheet tfoot td.muted { font-weight: 400; }
.sheet .s1, .sheet .s2 { position: sticky; z-index: 1; text-align: left; }
.sheet .s1 { left: 0; width: 84px; min-width: 84px; max-width: 84px; }
.sheet .s2 { left: 84px; }
@media (max-width: 700px) {
  .sheet .s2 { position: static; }
  .rbar .grow { display: none; }
  .pop { position: static; }
  .popbox, .pop.right .popbox { left: 0; right: 0; top: auto; margin-top: 8px; }
  .poprow { flex-wrap: wrap; }
}

/* ---------- editing the directory ---------- */
.card > header > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 0; }
.card > header:has(> div) { flex-wrap: nowrap; align-items: flex-start; }
label.optrow { cursor: pointer; align-items: center; }
.toggle { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 40px; height: 24px; margin: 0; border-radius: 999px; background: var(--line); cursor: pointer; transition: background .15s; }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--bg); transition: transform .15s; }
/* a switch inside a form field: not a text box (the rule .field input made it as wide as the field) */
.field input.toggle { width: 40px; height: 24px; padding: 0; border: 0; border-radius: 999px; background: var(--line); }
.field input.toggle:checked { background: var(--ok); }
.optrow > div { flex: 1; }
.field label.optrow span { font-weight: 400; display: block; }
.toggle:checked { background: var(--ok); }
.toggle:checked::after { transform: translateX(16px); }
@media (prefers-reduced-motion: reduce) { .toggle, .toggle::after { transition: none; } }
.more > summary { cursor: pointer; color: var(--link); font-size: 14px; font-weight: 500; list-style-position: inside; }
.more[open] > summary { margin-bottom: 14px; }
.btnrow select { border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 5px 8px; background: var(--bg); font-size: 13px; max-width: 220px; }
.btnrow { align-items: center; }
.field .inline input.num { width: 110px; }
.field input:disabled { background: var(--surface); color: var(--muted); }
.card form.btnrow { margin: 0; }
.waitlist > div { flex-wrap: wrap; align-items: center; }
.waitlist .grow { flex: 1 1 240px; }
td b a { color: inherit; text-decoration: none; }
td b a:hover { text-decoration: underline; }

/* ---------- sandbox (ADM_ENV=dev): another rail colour and one line on every page ---------- */
body.env-dev { --rail: #0B4A45; --rail-deep: #073632; --rail-line: #1F6660; --rail-muted: #B7DAD5; --accent: #0B4A45; --accent-soft: #E0F0EE; --link: #0B5F58; }
/* The line is the last thing of a page, pushed to the bottom of the window when the page is short. */
.atfoot, .sbx { margin-top: auto; }
.atfoot + .sbx { margin-top: 0; }
.sbx { position: relative; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; border-radius: var(--r-card); padding: 10px 16px; background: var(--accent-soft); color: var(--accent); font-size: 14px; }
.sbx b { font-weight: 600; }
.sbx .grow { flex: 1 1 0; }
.sbx .sbx-when { color: var(--muted); }
.sbx form { margin: 0; }
.sbx .btn:not(.primary) { background: var(--bg); }
.sbx .pop > summary.btn { display: inline-flex; }


/* ---------- "i" next to a title: a short description on demand (templates/_hint.html) ----------
   The description is a small card in the middle of the screen; a press anywhere else closes it (the
   summary's ::before covers the page). Where the browser can tie one box to another (CSS anchor positioning)
   and the window is large enough, the card opens right under its "i" instead. position: fixed keeps it from
   being cut by a scrolling table. */
.tip { display: inline-block; position: static; vertical-align: middle; margin: -2px 0 0 6px; anchor-scope: --tip; }
.tip > summary { position: relative; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid currentColor;
  color: var(--muted); font: italic 700 11.5px/1 Georgia, "Times New Roman", serif; letter-spacing: 0; text-transform: none; anchor-name: --tip; -webkit-tap-highlight-color: transparent; }
.tip > summary::after { content: ""; position: absolute; top: -12px; right: -12px; bottom: -12px; left: -12px; }      /* a bigger place for a finger */
.tip > summary:hover, .tip[open] > summary { color: var(--link); background: var(--accent-soft); }
.tip[open] > summary::before { content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 40; cursor: default; background: rgba(10, 16, 48, .3); }
.tip > .popbox { position: fixed; z-index: 41; top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%); margin: 0; gap: 10px;
  width: min(360px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto;
  font: 400 14px/1.45 var(--font); letter-spacing: 0; text-transform: none; text-align: left; white-space: normal; color: var(--fg); }
.tip > .popbox p { margin: 0; }
.tipterms { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; margin: 0; align-items: start; }
.tipterms dt { margin: 0; } .tipterms dd { margin: 0; color: var(--fg-soft); }
@supports (top: anchor(bottom)) and (anchor-scope: --tip) {
  @media (min-width: 701px) and (min-height: 600px) {
    .tip[open] > summary::before { background: transparent; }
    /* under the "i", never outside the window; above it when there is no room below */
    .tip > .popbox { transform: none; position-anchor: --tip; top: calc(anchor(bottom) + 8px); bottom: auto;
      left: clamp(16px, anchor(left), calc(100vw - 376px)); max-height: 46vh; position-try-fallbacks: flip-block; }
  }
}

/* ---------- Reports: the "i" next to the rate, the button Send to TAK ---------- */
.withtip { display: inline-flex; align-items: center; }
.pop[open] > summary.btn.primary { background: var(--accent); }
.btn:disabled { color: var(--muted); background: var(--surface); cursor: default; }
.btn:disabled:hover { background: var(--surface); }
.sendbox { width: min(320px, calc(100vw - 32px)); }
.rbar .filters { flex-wrap: nowrap; }
.rbar .filters .search { flex: 0 0 auto; width: 190px; }
.popbox.menu { gap: 2px; padding: 6px; min-width: 220px; }
.popbox.menu a { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: var(--r-ctl); color: var(--fg); text-decoration: none; font-size: 14px; }
.popbox.menu a:hover, .popbox.menu a:focus-visible { background: var(--surface); }
.popbox.menu a span { color: var(--muted); font-size: 12.5px; }
.pop > summary.btn svg { margin-right: -4px; color: var(--muted); }
.sendbox .hint { max-width: none; }
.sendlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.sendlist li { display: flex; justify-content: space-between; gap: 16px; }
.sendlist b { font-weight: 600; font-variant-numeric: tabular-nums; }
.okmsg.bad { background: var(--bad-soft); color: var(--bad); }
.okmsg.wait { background: var(--surface); color: var(--fg-soft); }
.okmsg.lines, .notes { display: flex; flex-direction: column; gap: 4px; }
.notes p { margin: 0; }
.okmsg a { color: inherit; font-weight: 600; text-decoration: underline; }

/* ---------- Settings: a set of boxes ("which files go into the e-mail") ---------- */
.checks { border: 0; margin: 0; padding: 14px 0 0; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); }
.checks legend { padding: 0; font-weight: 600; font-size: 14px; float: left; width: 100%; margin-bottom: 2px; }
.check { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; clear: both; }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); flex: none; }
.checks .hint { font-size: 12.5px; color: var(--muted); }
.setrow dt .tip { margin-top: -3px; }

.sbx .popbox { top: auto; bottom: calc(100% + 8px); }                 /* at the foot of the page a pop-up opens upwards */
@media (max-width: 700px) { .sbx .popbox, .sbx .pop.right .popbox { top: auto; bottom: 100%; margin: 0 0 8px; } }

/* ---------- the technician's card: the record on the left, this week / Telegram / badge on the right ---------- */
.pgrid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 22px; align-items: start; margin: 0; }
.pcol { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
@media (max-width: 1000px) { .pgrid { grid-template-columns: minmax(0, 1fr); } }
.boxes { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.boxes .check { clear: none; }
.field .boxes input.other { width: 140px; padding: 5px 9px; }
.field .check input { width: 18px; padding: 0; border: 0; }
.weekstrip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.wday { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 2px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); min-width: 0; }
.wday span { font-size: 11px; color: var(--muted); }
.wday b { font-size: 11.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; max-width: 100%; white-space: nowrap; }
.wday[data-code="Work"] { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.wday[data-code="Off"] { background: var(--bad-soft); border-color: transparent; color: var(--bad); }
.wday[data-code="CBC"] { background: var(--info-soft); border-color: transparent; color: var(--info); }
.wday[data-code="DNT"] { background: var(--surface-2); border-color: transparent; color: var(--muted); }
.wday[data-code="Vacation"] { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.wday[data-code="Sick"] { background: var(--sick-soft); border-color: transparent; color: var(--sick); }
/* a day code as a chip (time off on the card, the list "not the usual week") */
.chip[data-code="Work"] { background: var(--ok-soft); color: var(--ok); }
.chip[data-code="Off"] { background: var(--bad-soft); color: var(--bad); }
.chip[data-code="CBC"] { background: var(--info-soft); color: var(--info); }
.chip[data-code="DNT"] { background: var(--surface-2); color: var(--muted); }
.chip[data-code="Sick"] { background: var(--sick-soft); color: var(--sick); }
.chip[data-code="Vacation"] { background: var(--warn-soft); color: var(--warn); }
.tolist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.tolist li { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.tolist .grow { flex: 1 1 0; min-width: 0; }

/* ---------- Work list, "Who works": one day as lists, for the phone ---------- */
.rbar .sep { width: 1px; align-self: stretch; background: var(--line); margin-inline: 4px; }
.stepper .steplabel { display: flex; align-items: baseline; gap: 10px; padding: 7px 14px; border-inline: 1px solid var(--line); font-size: 14px; white-space: nowrap; }
.stepper .steplabel span { color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 880px) { .rbar .sep { display: none; } }
.daycols { align-items: start; }
.daygroup { border-radius: var(--r-ctl); padding: 10px 12px; background: var(--bg); border-left: 4px solid var(--line); }
.daygroup h3 { font-size: 13.5px; font-weight: 600; display: flex; gap: 8px; align-items: baseline; }
.daygroup h3 span { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.daygroup ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.daygroup a { font-weight: 600; font-variant-numeric: tabular-nums; }
.daygroup .dayno { display: inline-block; min-width: 2.2ch; margin-right: 4px; color: var(--muted); font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; }   /* owner, 2026-10-28 */
.daygroup[data-code="Work"] { border-left-color: var(--ok); background: var(--ok-soft); }
.daygroup[data-code="Off"] { border-left-color: var(--bad); background: var(--bad-soft); }
.daygroup[data-code="CBC"] { border-left-color: var(--info); background: var(--info-soft); }
.daygroup[data-code="project"] { border-left-color: var(--info); background: var(--surface); }   /* who works in a project (owner, 2026-10-28) */
.daygroup[data-code="DNT"] { border-left-color: var(--muted); background: var(--surface-2); }
.daygroup[data-code="Vacation"] { border-left-color: var(--warn); background: var(--warn-soft); }
.daygroup[data-code="Sick"] { border-left-color: var(--sick); background: var(--sick-soft); }
/* a press on a technician shows the day codes: a <details>, no script */
.daygroup li > details > summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 16px; }
.daygroup li > details > summary::-webkit-details-marker { display: none; }
.daygroup li > details > summary b { font-variant-numeric: tabular-nums; }
.daygroup li > details[open] > summary { font-weight: 600; }
.daycodes { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 10px; }
.daycodes button { min-height: 44px; min-width: 76px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--bg); font-size: 15px; font-weight: 600; cursor: pointer; }
.daycodes button[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.daycodes button[data-code="Work"] { color: var(--ok); } .daycodes button[data-code="Off"] { color: var(--bad); }
.daycodes button[data-code="CBC"] { color: var(--info); } .daycodes button[data-code="DNT"] { color: var(--muted); }
.daycodes button[data-code="Sick"] { color: var(--sick); } .daycodes button[data-code="Vacation"] { color: var(--warn); }
.daycodes a { align-self: center; font-size: 14px; }

/* ---------- equipment (docs/equipment.md) ---------- */
.eqlist li, .eqlog li { padding: 8px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.eqlist li:last-child, .eqlog li:last-child { border-bottom: 0; padding-bottom: 0; }
.eqlist li:first-child, .eqlog li:first-child { padding-top: 0; }
.eqlog form { margin: 0; }
.eqlist .grow, .eqlog .grow { flex: 1 1 200px; }
.chip.long { white-space: normal; border-radius: 12px; align-items: baseline; }
.eqtext { display: block; white-space: pre-line; overflow-wrap: anywhere; font-size: 13.5px; color: var(--fg-soft); margin-top: 2px; }
dd.eqtext { margin-top: 0; }
.eqkv { grid-template-columns: max-content minmax(0, 1fr); }
.eqkv dd { overflow-wrap: anywhere; }
.eqsec { background: none; padding: 0; gap: 10px; }
/* the columns must fit a laptop: less air between them, and the long numbers a little smaller */
.eqtable th, .eqtable td { padding-left: 8px; padding-right: 8px; }
.eqtable th:first-child, .eqtable td:first-child { padding-left: 14px; }
.eqtable td[data-label="MAC address"], .eqtable td[data-label="Serial number"] { font-size: 13px; }
.eqtable th a { color: inherit; text-decoration: none; }
.eqtable th a[aria-sort]::after { content: " ↑"; color: var(--muted); }
.eqtable th a[aria-sort="descending"]::after { content: " ↓"; }
.eqtable tr.gone td { color: var(--muted); }
.eqtable .rowlink { text-decoration: none; }
.eqfields { gap: 8px; }
.eqpair { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 8px; }
.eqpair.regpair { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.eqpair select { min-width: 0; width: 100%; }
.eqpair input { border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 7px 10px; background: var(--bg); width: 100%; min-width: 0; }
.eqbar { align-items: center; }
/* photos of an inspection: a row of thumbnails in the history, a gallery on the page of the inspection */
.eqshots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.eqshots img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); display: block; }
.eqgallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.eqgallery.one { grid-template-columns: minmax(0, 320px); margin-bottom: 12px; }
.eqgallery figure { margin: 0; min-width: 0; }
.eqgallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); display: block; }
.eqgallery figcaption { font-size: 13px; margin-top: 6px; overflow-wrap: anywhere; }
.eqgallery figcaption .chip { margin-top: 4px; }
.eqgallery .eqby { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.field input[type="file"] { padding: 7px; font-size: 14px; max-width: 100%; }
.eqbar .grow { flex: 1 1 0; }
/* a phone: a row of the register becomes a tile — what it is, who has it, since when */
@media (max-width: 640px) {
  .eqtable thead { display: none; }
  .eqtable, .eqtable tbody, .eqtable tr, .eqtable td { display: block; width: 100%; }
  .eqtable tr { padding: 10px 14px; border-bottom: 1px solid var(--line); }
  .eqtable tr:last-child { border-bottom: 0; }
  .eqtable td { border: 0; padding: 1px 0; }
  .eqtable td.none { display: none; }
  .eqtable td:not(:first-child)::before { content: attr(data-label) ": "; color: var(--muted); font-size: 12.5px; }
}
/* History (admin/history.py) */
.histbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.histbar .search { flex: 0 1 160px; }
.histbar .search[type=search] { flex: 1 1 160px; }
.histbar select { border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 7px 10px; background: var(--bg); max-width: 220px; }
.histtable tr.dayrow td { font-weight: 600; background: var(--surface); padding-top: 12px; }
.histtable td.wrap { max-width: 520px; overflow-wrap: anywhere; }
/* Reminder preview: a message bubble as in Telegram */
.tgpreview { margin: 18px 0 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.tgpreview .bubble { background: var(--accent-soft); border-radius: 14px 14px 14px 4px; padding: 10px 14px; max-width: 460px; line-height: 1.45; overflow-wrap: anywhere; margin-bottom: 10px; }

/* Docs (admin/guide.py): a guide is a long text with tables, diagrams and screenshots, read in the admin's frame. */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.guide-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.guide-item { color: inherit; text-decoration: none; }
.guide-item:hover, .guide-item:focus-visible { border-color: var(--accent); }
.guide-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: start; }
.guide-toc { position: sticky; top: 20px; gap: 10px; font-size: 14px; max-height: calc(100vh - 40px); overflow-y: auto; }
.guide-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.guide-toc a { display: block; padding: 5px 8px; border-radius: 8px; color: var(--fg-soft); text-decoration: none; line-height: 1.3; }
.guide-toc a:hover { background: var(--surface); color: var(--fg); }
.guide { display: block; padding: 8px 32px 32px; font-size: 15px; line-height: 1.6; max-width: 900px; }
.guide h2 { font-size: 22px; margin: 40px 0 12px; padding-top: 24px; border-top: 1px solid var(--line); scroll-margin-top: 16px; }
.guide h2:first-child { border-top: 0; margin-top: 16px; padding-top: 0; }
.guide h3 { font-size: 17px; margin: 24px 0 8px; }
.guide p { margin: 10px 0; }
.guide ul, .guide ol { margin: 8px 0 12px; padding-left: 24px; }
.guide li { margin: 4px 0; }
.guide ul.cases { list-style: none; padding: 12px 16px; background: var(--surface); border-radius: var(--r-ctl); }
.guide li.case { position: relative; padding-left: 28px; margin: 6px 0; }
.guide li.case::before { content: ""; position: absolute; left: 0; top: 4px; width: 15px; height: 15px; border: 1.5px solid var(--muted); border-radius: 4px; background: var(--bg); }
.guide table { margin: 14px 0; border: 1px solid var(--line); border-radius: var(--r-ctl); border-collapse: separate; border-spacing: 0; overflow: hidden; display: block; overflow-x: auto; }
.guide th, .guide td { white-space: normal; vertical-align: top; min-width: 110px; }
.guide code { font-family: var(--mono); font-size: 0.9em; background: var(--surface-2); border-radius: 5px; padding: 1px 5px; }
.guide pre { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 14px 16px; overflow-x: auto; font-size: 13px; line-height: 1.5; }
.guide pre code { background: none; padding: 0; }
.guide-fig { margin: 18px 0; display: flex; flex-direction: column; gap: 8px; }
.guide-fig figcaption { font-size: 13px; color: var(--muted); }
.guide-shot img { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-ctl); }
.guide-shot a { align-self: flex-start; max-width: 100%; }
.guide-dia { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-card); padding: 12px; }
.diagram { width: 100%; height: auto; display: block; font-family: var(--font); }
.diagram .f-ink { fill: var(--fg); } .diagram .f-quiet { fill: var(--muted); } .diagram .f-axis { fill: var(--muted); }
.diagram .f-accent { fill: var(--info); } .diagram .f-bad { fill: var(--bad); }
.diagram .s-axis { stroke: var(--muted); } .diagram .s-accent { stroke: var(--info); } .diagram .s-bad { stroke: var(--bad); }
.diagram rect.s-axis { stroke: var(--line); fill: var(--surface); }
.diagram polygon.s-axis { fill: var(--bg); }
@media (max-width: 1000px) {
  .guide-layout { grid-template-columns: minmax(0, 1fr); }
  .guide-toc { position: static; max-height: none; }
  .guide { padding: 4px 18px 24px; }
}

/* Settings → AI models: the two parts of the form, and "Saved" next to a key */
.formhead { font-size: 15px; font-weight: 600; margin: 4px 0 10px; }
.form + .formhead { margin-top: 22px; }
.field > label .chip { margin-left: 8px; vertical-align: 1px; }
.setrow dd .chip { margin-right: 6px; }

/* A refusal next to the field it is about (equipment forms) */
.ferr { display: block; margin-top: 4px; padding: 6px 10px; border-radius: var(--r-ctl); background: var(--bad-soft); color: var(--bad); font-size: 13px; }
.eqpair + .ferr, .inline + .ferr { width: 100%; }
.eqterms .form { margin-top: 8px; }

/* The shift badge (Work list, card) and the button that copies the technician's number, name and BP ID */
.shift5 { display: inline-block; padding: 0 6px; border-radius: 999px; background: #f59e0b; color: #fff; font-size: 11px; font-weight: 700;
  line-height: 17px; letter-spacing: 0.02em; vertical-align: 1px; }
h1 .copybtn { vertical-align: 4px; margin-left: 6px; }
.copybtn.done { color: var(--ok); }

/* The search of the top bar (admin/search.py, static/search.js) */
.gsearch { position: relative; display: flex; align-items: center; gap: 8px; width: min(520px, 100%); margin: -8px 0 -6px auto;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg); padding: 0 14px; }
.gsearch:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.gsearch > svg { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; }
.gsearch input[type=search] { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--fg); font: inherit; font-size: 14px; padding: 9px 0; outline: none; }
.gsuggest { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; right: 0; background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14); padding: 6px; max-height: 70vh; overflow: auto; }
.gsuggest[hidden] { display: none; }
.gs-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: var(--r-ctl); color: var(--fg); text-decoration: none; }
.gs-item.on { background: var(--accent-soft); }
.gs-kind { flex: none; min-width: 84px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); padding-top: 2px; }
.gs-kind.k-tech { color: var(--accent); }
.gs-text { display: flex; flex-direction: column; min-width: 0; }
.gs-text b { font-weight: 600; font-size: 14px; }
.gs-text small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-all { display: block; padding: 8px 10px; font-size: 13px; border-top: 1px solid var(--line); margin-top: 4px; }
.gs-none { padding: 10px; color: var(--muted); font-size: 13.5px; }
@media (max-width: 760px) { .gsearch { width: 100%; margin: 0; } .gs-kind { min-width: 0; display: none; } }

/* The pictures of a reminder (owner, 2026-10-21) */
.rempics { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.rempics figure { margin: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.rempics img { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); display: block; }
.picadd { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.picadd input[type=file] { max-width: 100%; }
.bubblepics { display: grid; gap: 3px; max-width: 320px; margin-bottom: 4px; grid-template-columns: repeat(var(--n, 1), 1fr); }
.bubblepics.n2 { --n: 2; } .bubblepics.n3 { --n: 3; }
.bubblepics img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; }

/* Settings → Assets lists (owner, 2026-10-21) */
.eqlistrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; width: 100%; }
.eqlistrow input[name=value] { flex: 1 1 160px; min-width: 0; border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 6px 10px; background: var(--bg); }
.eqlistrow.add { margin-top: 10px; }
.eqmake { margin: 6px 0; }
.eqsides .form { margin-top: 8px; }
/* Assets lists (owner, 2026-10-21): the first cell — the name (a meter: MAC over S/N) and the button Copy beside it */
.eqname { display: flex; align-items: flex-start; gap: 8px; }
.eqname .grow { min-width: 0; }
.eqids { display: flex; flex-direction: column; font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 13px; font-weight: 600; }
.eqids .muted { font-family: var(--font, inherit); font-weight: 500; }
.copyicon { display: inline-flex; vertical-align: -3px; margin-left: 6px; padding: 2px; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 6px; }
.copyicon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.copyicon:hover { color: var(--fg); background: var(--surface); }
.copyicon.done { color: var(--ok); }
/* Koscom's and the technicians' own tables of one type line up: the same columns at the same widths */
@media (min-width: 641px) {
  .eqsec .eqtable { table-layout: fixed; width: 100%; }
  .eqsec .eqtable th:first-child, .eqsec .eqtable td:first-child { width: 30%; }
}
.eqname .meterline { display: flex; align-items: flex-start; }
/* the list of technicians (owner, 2026-10-21): the number over the name, one link to the card; the cell Bot */
.techtable .techcell { white-space: nowrap; }
.techdelete { margin: 0 0 16px; align-items: center; }
.techtable .rowno { width: 1%; padding-right: 4px; color: var(--muted); text-align: right; white-space: nowrap; }
.techtable .techline { display: flex; align-items: center; gap: 6px; }
.techtable .techlink { color: inherit; text-decoration: none; line-height: 1.35; }
.techtable .techlink:hover .tname, .techtable .techlink:hover .tid { text-decoration: underline; }
.techtable .tid { font-weight: 700; }
.techtable .tname { font-weight: 500; }
.techtable .techcell > .techlink { display: inline-block; }
/* Copy on the line of the number, about two letters after it (owner, 2026-10-24), with a large hit area */
.techtable .copyicon { margin: -6px 0 -6px 1.2ch; padding: 6px; vertical-align: middle; }
.techtable .copyicon svg { width: 18px; height: 18px; }
.techtable .techchips { display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: middle; flex-wrap: wrap; }
.techtable .botchip { text-decoration: none; }
.botlog .dayrow { font-weight: 600; font-size: 13px; color: var(--muted); padding-top: 10px; border-bottom: 0; }
.botlog li .num { flex: none; width: 70px; font-size: 13px; }
.badtext { color: var(--bad, #b42318); }
/* photos in a window over the page (owner, 2026-10-21; static/photos.js): one under the other, scroll for the rest */
.photobox { width: min(960px, 96vw); max-height: 94vh; padding: 0; border: 0; border-radius: 14px; background: var(--bg); color: var(--fg); overflow: hidden; }
.photobox::backdrop { background: rgba(0, 0, 0, .72); }
.photobox-list { max-height: 94vh; overflow-y: auto; padding: 18px 18px 8px; box-sizing: border-box; }
.photobox figure { margin: 0 0 18px; text-align: center; }
.photobox img { max-width: 100%; max-height: 82vh; border-radius: 10px; display: block; margin: 0 auto; }
.photobox figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; }
.photobox-open { font-size: 12.5px; }
.photobox-x { position: absolute; top: 8px; right: 10px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(0,0,0,.55); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.techtable .tglink { color: inherit; }
.techtable .tgcell .chip { margin-left: 4px; }
/* the technician's card, Assets (owner, 2026-10-21): a row starts with what it is — a vehicle, a meter, a thing */
.asseticon { flex: none; display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; color: var(--muted); }
.asseticon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* Docs: the language switch (admin/templates/_doclang.html) */
.doc-langs { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.doc-langs .chip::before { display: none; }
a.chip { text-decoration: none; }
a.chip:hover { color: var(--fg); }
.guide a[target="_blank"]::after { content: " ↗"; font-size: .8em; }
/* Creative reminders (admin/creative.py): the post as Telegram shows it, the check of an upload */
.crtable td { vertical-align: top; }
.crtable tr.off td { opacity: .55; }
.crthumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; display: block; }
.crgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 16px; }
.crcard.bad { border-color: var(--bad); }
.crerr li { color: var(--bad); }
.crfu { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; }
.tgpost { background: var(--accent-soft); border-radius: 14px 14px 14px 4px; overflow: hidden; max-width: 420px; margin-bottom: 10px; }
.tgpost img { display: block; width: 100%; height: auto; }
.tgnopic { aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); font-size: 13px; }
.tgcap { padding: 10px 14px; white-space: pre-line; line-height: 1.45; overflow-wrap: anywhere; font-size: 14px; }
form.inline { display: inline; }
.plainlist { margin: 6px 0; padding-left: 1.2em; }
.small.bad { color: var(--bad); }
.crcard > header { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.crcard > header > div { display: flex; flex-direction: row; align-items: center; gap: 6px; flex-wrap: wrap; }
.crwhere { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
/* Creative reminders: the window "New campaign" (opens on #import, no script) and the campaign as a chat */
.crmodal { display: none; position: fixed; inset: 0; z-index: 60; align-items: center; justify-content: center; padding: 16px; }
.crmodal:target { display: flex; }
.crmodal-bg { position: absolute; inset: 0; background: rgba(10, 15, 40, .5); }
.crmodal-box { position: relative; width: 100%; max-width: 600px; max-height: calc(100vh - 32px); overflow: auto; margin: 0; }
.crmodal-box > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.crdefault { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tgchat { background: #dbe6ef; border-radius: var(--r-card); padding: 16px; display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.tgday { text-align: center; margin: 10px 0 4px; }
.tgday span { background: rgba(0, 0, 0, .28); color: #fff; font-size: 12.5px; font-weight: 600; padding: 3px 12px; border-radius: 999px; }
.tgmsg { background: #fff; color: #111; border-radius: 14px 14px 14px 4px; max-width: 440px; overflow: hidden; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.tgmsg.bad { outline: 2px solid var(--bad); }
.tgmsg.off { opacity: .55; }
.tgmsg img { display: block; width: 100%; height: auto; }
.tgmsg .tgcap { padding: 8px 12px 0; white-space: pre-line; line-height: 1.45; overflow-wrap: anywhere; font-size: 14.5px; }
.tgmsg .tgtime { text-align: right; font-size: 11.5px; color: #8a94a3; padding: 2px 10px 6px; }
.tgmsg .tgnopic { aspect-ratio: 4 / 3; display: grid; place-items: center; text-align: center; background: #eef1f5; color: #7a8494; font-size: 13px; }
.tgquote { margin: 8px 12px 0; padding: 2px 8px; border-left: 3px solid #3a8ee6; color: #3a8ee6; font-size: 12.5px; }
.tgmsg .crerr { margin: 4px 12px 8px; font-size: 13px; }
.tgedit { border-top: 1px solid #e4e8ee; padding: 6px 12px 10px; font-size: 14px; background: #fafbfc; }
.tgedit summary { cursor: pointer; color: var(--accent, #1f3a93); font-weight: 600; padding: 4px 0; }
.tgedit .form { margin: 8px 0; }
.tgedit .check { display: flex; margin: 4px 0; }
.tgadd { display: flex; gap: 8px; flex-wrap: wrap; }
@media (prefers-color-scheme: dark) { .tgchat { background: #1d2733; } }
.crdays { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.crday { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; color: inherit; text-decoration: none; background: var(--bg); }
.crday:hover { border-color: var(--accent, #1f3a93); }
.crday img, .crday-nopic { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.crday-nopic { display: grid; place-items: center; background: var(--surface-2); color: var(--muted); font-size: 13px; }
.crday-body { padding: 8px 10px 10px; display: grid; gap: 3px; }
.crday-time { color: var(--muted); font-variant-numeric: tabular-nums; }
.daygroup .projchip { margin-left: 0; padding: 0 8px; font-size: 11.5px; vertical-align: 1px; }   /* his projects that day (owner, 2026-10-28) */
/* ---------- routes of a day (worklist_routes.html, owner 2026-10-28) ---------- */
form.takup { display: inline-flex; gap: 6px; align-items: center; }
form.takup label.btn { position: relative; cursor: pointer; }
form.takup.js label.btn input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
form.takup:not(.js) label.btn input[type=file] { margin-left: 8px; max-width: 190px; font-size: 12px; }
form.takup.busy label.btn { opacity: .6; }
.vendortext { margin: 0; white-space: pre-wrap; font: 13.5px/1.5 ui-monospace, Menlo, monospace; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 10px 12px; }
.routelist { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.routelist > li { border-bottom: 1px solid var(--line); background: var(--bg); }
.routelist > li:last-child { border-bottom: 0; }
.routelist > li.warn { background: color-mix(in srgb, var(--warn-soft) 55%, var(--bg)); }
.routelist > li.bad { background: color-mix(in srgb, var(--bad-soft) 55%, var(--bg)); }
.routelist > li.changed { box-shadow: inset 3px 0 0 var(--info); }
.routelist summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(120px, .8fr) minmax(0, 1.2fr); gap: 6px 14px; align-items: center; padding: 10px 16px; min-height: 52px; }
.routelist summary::-webkit-details-marker { display: none; }
.routelist .rwho b { font-variant-numeric: tabular-nums; }
.routelist .rwho .sub { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.routelist .rt { display: flex; flex-direction: column; gap: 2px; }
.routelist .route b { font-size: 18px; font-variant-numeric: tabular-nums; }
.routelist .route small { color: var(--muted); }
.routelist .route.none { color: var(--warn); font-weight: 600; }
.routelist .flags { display: flex; flex-wrap: wrap; gap: 4px; }
.routepick { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; padding: 4px 16px 14px; align-items: stretch; }
.routepick button { display: flex; flex-direction: column; gap: 1px; text-align: left; border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 6px 8px; background: var(--bg); cursor: pointer; color: var(--fg); }
.routepick button b { font-size: 15px; }
.routepick button small { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.routepick button.usual { border-color: var(--ok); }
.routepick button[aria-pressed="true"] { background: var(--accent-soft, var(--surface-2)); border-color: var(--accent, var(--fg)); }
.routepick button.back { border-style: dashed; }
.routepick a { align-self: center; font-weight: 600; }
.routechip { display: inline-block; border-radius: 6px; padding: 0 6px; font-size: 12.5px; font-weight: 700; background: var(--surface-2); color: var(--fg); text-decoration: none; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
  .routelist summary { grid-template-columns: minmax(0, 1fr) auto; }
  .routelist .flags { grid-column: 1 / -1; }
  .routepick { padding-inline: 12px; }
}

/* Reports → T-shirts (owner, 2026-10-29) and the block T-shirts of the card */
.shirtgrid { display: grid; grid-template-columns: minmax(240px, 1fr) 2fr; gap: 16px; align-items: start; }
@media (max-width: 860px) { .shirtgrid { grid-template-columns: 1fr; } }
.shirtpeople .tolist { max-height: 70vh; overflow: auto; padding: 0 16px 12px; }
.shirtpeople li[aria-current="true"] { background: var(--accent-soft); border-radius: 8px; padding: 4px 6px; }
.shirttable td, .shirttable th { white-space: nowrap; }
.shirttable details summary { cursor: pointer; }
ul.plainlist { list-style: none; margin: 6px 0 0; padding: 0; }
ul.plainlist li { padding: 2px 0; }
ul.plainlist.cols { columns: 2 220px; padding: 0 16px 12px; }