/* SergaiNet Billing. Look taken from sergainet.co.id: navy ink, blue actions, green from the logo, pill shapes. */
:root {
  --ink: #011146; --navy: #011146; --blue: #2563eb; --blue-d: #1e40af; --link: #2563eb; --link-hover: #1e40af;
  --ink2: #4f5665; --label: #6b7280; --muted-icon: #9aa3b5; --ground: #f4f6fb; --surface: #ffffff; --surface-2: #f9fafc; --mark: #f7faff;
  --line: #e3e8f2; --line2: #eef1f7; --field-line: #c3cbdb; --btn-line: #c9d6f3; --quiet-line: #d5dcea; --focus: #9db4ea;
  --tint: #e4edff; --tint-ink: #002fa7; --lime: #8fe65c; --green: #009951; --pill-grey-ink: #3d4556;
  --ok-bg: #e2f5ea; --ok-ink: #0b6b3d; --warn-bg: #fff1e0; --warn-ink: #8a3c06; --warn-text: #5c2a04; --warn-line: #f0c9a4; --bad-bg: #fde8e4; --bad-ink: #a12b1c;
  --navy-soft: #c7d4f5; --navy-line: #2a3a73; --navy-track: #1f2f6b; --on-navy-line: #5b6aa0;
  color-scheme: light;
}
/* Dark theme: chosen with the switch in the menu (data-theme), or taken from the device when nothing was chosen. */
:root[data-theme="dark"] {
  --ink: #e9edfb; --navy: #1b2c70; --blue: #2563eb; --blue-d: #3b76f6; --link: #8fb0ff; --link-hover: #b9ccff;
  --ink2: #a7b1cc; --label: #8f9ab8; --muted-icon: #7c88a8; --ground: #0b1020; --surface: #131a31; --surface-2: #182040; --mark: #1a2547;
  --line: #26304f; --line2: #1f2844; --field-line: #3a4670; --btn-line: #3a4a80; --quiet-line: #344064; --focus: #6f8fe6;
  --tint: #1c2c5e; --tint-ink: #b8caff; --lime: #8fe65c; --green: #1fbf75; --pill-grey-ink: #c3cbe0;
  --ok-bg: #123524; --ok-ink: #7fe0a8; --warn-bg: #3b2a12; --warn-ink: #ffc98a; --warn-text: #ffd9ae; --warn-line: #7a5324; --bad-bg: #40191a; --bad-ink: #ff9d92;
  --navy-soft: #c7d4f5; --navy-line: #33469a; --navy-track: #111c4d; --on-navy-line: #6f7fc0;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --ink: #e9edfb; --navy: #1b2c70; --blue: #2563eb; --blue-d: #3b76f6; --link: #8fb0ff; --link-hover: #b9ccff;
  --ink2: #a7b1cc; --label: #8f9ab8; --muted-icon: #7c88a8; --ground: #0b1020; --surface: #131a31; --surface-2: #182040; --mark: #1a2547;
  --line: #26304f; --line2: #1f2844; --field-line: #3a4670; --btn-line: #3a4a80; --quiet-line: #344064; --focus: #6f8fe6;
  --tint: #1c2c5e; --tint-ink: #b8caff; --lime: #8fe65c; --green: #1fbf75; --pill-grey-ink: #c3cbe0;
  --ok-bg: #123524; --ok-ink: #7fe0a8; --warn-bg: #3b2a12; --warn-ink: #ffc98a; --warn-text: #ffd9ae; --warn-line: #7a5324; --bad-bg: #40191a; --bad-ink: #ff9d92;
  --navy-soft: #c7d4f5; --navy-line: #33469a; --navy-track: #111c4d; --on-navy-line: #6f7fc0;
  color-scheme: dark;
  }
}
/* Paper is always light. */
@media print {
  :root, :root[data-theme="dark"], :root:not([data-theme="light"]) {
  --ink: #011146; --navy: #011146; --blue: #2563eb; --blue-d: #1e40af; --link: #2563eb; --link-hover: #1e40af;
  --ink2: #4f5665; --label: #6b7280; --muted-icon: #9aa3b5; --ground: #f4f6fb; --surface: #ffffff; --surface-2: #f9fafc; --mark: #f7faff;
  --line: #e3e8f2; --line2: #eef1f7; --field-line: #c3cbdb; --btn-line: #c9d6f3; --quiet-line: #d5dcea; --focus: #9db4ea;
  --tint: #e4edff; --tint-ink: #002fa7; --lime: #8fe65c; --green: #009951; --pill-grey-ink: #3d4556;
  --ok-bg: #e2f5ea; --ok-ink: #0b6b3d; --warn-bg: #fff1e0; --warn-ink: #8a3c06; --warn-text: #5c2a04; --warn-line: #f0c9a4; --bad-bg: #fde8e4; --bad-ink: #a12b1c;
  --navy-soft: #c7d4f5; --navy-line: #2a3a73; --navy-track: #1f2f6b; --on-navy-line: #5b6aa0;
  color-scheme: light;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); font-family: Inter, system-ui, sans-serif; color: var(--ink); font-size: 14px; line-height: 1.45; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
h2 { margin: 0; font-size: 17px; font-weight: 700; }
p { margin: 0; }
form { margin: 0; }
svg { flex: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.muted { color: var(--ink2); } .small { font-size: 13px; } .num { font-variant-numeric: tabular-nums; }
.right { text-align: right; } .strong { font-weight: 600; } .bad { color: var(--bad-ink); font-weight: 600; } .good { color: var(--ok-ink); font-weight: 600; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.grow { flex: 1 1 auto; }

/* ---- shell -------------------------------------------------------------------------- */
.shell { display: flex; flex-wrap: wrap; min-height: 100vh; }
.side { flex: 1 1 248px; background: var(--surface); border-right: 1px solid var(--line); padding: 24px 16px; display: flex; flex-direction: column; gap: 28px; }
.side .brand { display: flex; align-items: center; padding: 4px 8px; }
.side .brand img { height: 30px; width: auto; }
.side .group { display: flex; flex-direction: column; gap: 4px; }
.side .label { padding: 0 12px 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--label); }
.side .item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 12px; color: var(--ink2); font-weight: 500; }
.side .item:hover { background: var(--ground); color: var(--ink); }
.side .item[aria-current="page"] { background: var(--tint); color: var(--tint-ink); font-weight: 600; }
.side .status { margin-top: auto; border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.main { flex: 999 1 560px; min-width: 0; padding: 28px 32px 40px; display: flex; flex-direction: column; gap: 20px; }
.head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.head .title { flex: 1 1 240px; display: flex; flex-direction: column; gap: 2px; }
.crumbs { color: var(--ink2); } .crumbs a { font-weight: 600; }
.who { display: flex; align-items: center; gap: 10px; }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; }
.avatar.big { width: 60px; height: 60px; border-radius: 18px; background: var(--tint); color: var(--tint-ink); font-size: 22px; font-weight: 700; }

/* ---- building blocks ------------------------------------------------------------------ */
.row { display: flex; flex-wrap: wrap; gap: 16px; } .row.top { align-items: flex-start; } .row.mid { align-items: center; } .row.tight { gap: 10px; }
.col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.f1 { flex: 1 1 300px; min-width: 0; } .f2 { flex: 2 1 520px; min-width: 0; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.card.flush { padding: 0; gap: 0; overflow: hidden; }
.card.navy { background: var(--navy); color: #fff; border-color: var(--ink); }
.card.navy .muted { color: var(--navy-soft); }
.card.soft { background: var(--ground); border: 0; border-radius: 14px; padding: 16px 18px; }
.between { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.kpi { flex: 1 1 170px; gap: 10px; padding: 20px; }
.kpi .v { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpi .k { font-weight: 500; display: flex; align-items: center; gap: 8px; color: var(--ink2); }
.card.navy .k { color: var(--navy-soft); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; }
.dot.warn { background: #c2570c; } .dot.info { background: var(--blue); } .dot.plain { background: var(--navy); } .dot.good { background: var(--green); } .dot.lime { background: var(--lime); } .dot.off { background: var(--muted-icon); }
.dot.big { width: 10px; height: 10px; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px; border-radius: 999px; font-weight: 600; font-size: 13px; white-space: nowrap; }
.pill.active { background: var(--ok-bg); color: var(--ok-ink); } .pill.isolate { background: var(--warn-bg); color: var(--warn-ink); }
.pill.disabled, .pill.unpaid { background: var(--line2); color: var(--pill-grey-ink); } .pill.paid { background: var(--tint); color: var(--tint-ink); }
.pill.overdue, .pill.expired { background: var(--bad-bg); color: var(--bad-ink); }
.bar { height: 10px; border-radius: 999px; background: var(--tint); overflow: hidden; }
.bar > i { display: block; height: 100%; min-width: 6px; border-radius: 999px; background: var(--blue); }
.card.navy .bar { background: var(--navy-track); } .card.navy .bar > i { background: var(--lime); }
.bar.thin { height: 8px; }
.flash { padding: 12px 16px; border-radius: 14px; background: var(--ok-bg); color: var(--ok-ink); font-weight: 600; }
.flash.err { background: var(--bad-bg); color: var(--bad-ink); }
.flash.note { background: var(--warn-bg); color: var(--warn-text); font-weight: 500; }
.flash ul { margin: 0; padding-left: 18px; }
.secret { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 16px; letter-spacing: 0.04em; user-select: all; }

/* ---- buttons, chips, forms ------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--btn-line); background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--focus); color: var(--ink); }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; padding: 0 20px; }
.btn.primary:hover { background: var(--blue-d); border-color: var(--blue-d); color: #fff; }
.btn.warn { border-color: var(--warn-line); color: var(--warn-ink); }
.btn.quiet { border-color: var(--quiet-line); }
.btn.block { display: flex; width: 100%; min-height: 48px; }
.btn.on-navy { border-color: var(--on-navy-line); background: transparent; color: #fff; }
.btn.text { border-color: transparent; background: transparent; padding: 0 6px; color: var(--link); }
.card.navy .btn.text { color: #fff; }
.btn[disabled] { background: var(--ground); color: var(--label); border-color: var(--quiet-line); cursor: default; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; font-variant-numeric: tabular-nums; }
.chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--quiet-line); background: var(--surface); color: var(--ink); font: inherit; font-weight: 500; cursor: pointer; }
.chip:hover { border-color: var(--focus); color: var(--ink); }
.chip.on, .chip.on:hover { border-color: var(--ink); background: var(--navy); color: #fff; font-weight: 600; }
.chip.tall { min-height: 44px; padding: 0 20px; }
.chips input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.chips input[type="radio"]:checked + .chip { border-color: var(--ink); background: var(--navy); color: #fff; font-weight: 600; }
.chips input[type="radio"]:focus-visible + .chip { outline: 3px solid var(--focus); outline-offset: 2px; }
.field { display: flex; flex-direction: column; gap: 6px; font-weight: 600; min-width: 0; }
.row > .field { flex: 1 1 220px; }
.field .opt { font-weight: 400; color: var(--ink2); }
.field .err, .err-text { color: var(--bad-ink); font-weight: 500; font-size: 13px; }
.input, select.input, textarea.input { min-height: 44px; width: 100%; padding: 0 14px; border-radius: 10px; border: 1px solid var(--field-line); background: var(--surface); font: inherit; font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; }
textarea.input { padding: 10px 14px; min-height: 88px; resize: vertical; }
.input.tall { min-height: 48px; border-radius: 12px; padding: 0 16px; }
.input[aria-invalid="true"] { border-color: var(--bad-ink); }
.check { display: flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 400; }
.check input { width: 20px; height: 20px; margin: 0; accent-color: var(--blue); flex: none; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
.search { flex: 1 1 260px; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; background: var(--ground); border: 1px solid var(--line); border-radius: 999px; color: var(--label); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; color: var(--ink); min-height: 40px; }
.head .search { flex: 0 1 300px; background: var(--surface); }
.filters { padding: 18px 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); }
.filters label.pick { display: flex; align-items: center; gap: 8px; color: var(--ink2); }
.filters select { min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--quiet-line); background: var(--surface); font: inherit; color: var(--ink); }
.foot { padding: 14px 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); color: var(--ink2); }
.foot .pager { display: flex; align-items: center; gap: 8px; }
.foot .btn { min-height: 40px; padding: 0 16px; }

/* ---- tables and lists ------------------------------------------------------------------ */
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th { padding: 12px; font-weight: 600; text-align: left; color: var(--ink2); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 14px 12px; border-bottom: 1px solid var(--line2); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
th.right, td.right { text-align: right; }
.card.flush th { background: var(--surface-2); }
.card.flush th:first-child, .card.flush td:first-child { padding-left: 22px; }
.card.flush th:last-child, .card.flush td:last-child { padding-right: 22px; }
.card:not(.flush) th:first-child, .card:not(.flush) td:first-child { padding-left: 0; }
.card:not(.flush) th:last-child, .card:not(.flush) td:last-child { padding-right: 0; }
tr.mark td { background: var(--mark); }
tr.total td { font-weight: 700; border-top: 1px solid var(--line); }
td .sub { color: var(--ink2); font-size: 13px; }
td .acts { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.empty { padding: 36px 22px; text-align: center; color: var(--ink2); }
.kv { margin: 0; display: flex; flex-direction: column; gap: 12px; font-variant-numeric: tabular-nums; }
.kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.kv dt { color: var(--ink2); } .kv dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.kv dd.unset { font-weight: 400; color: var(--ink2); }
.card.navy .kv dt { color: var(--navy-soft); }
.kv .sum { padding-top: 12px; border-top: 1px solid var(--line); } .card.navy .kv .sum { border-color: var(--navy-line); }
.kv .sum dd { font-size: 22px; font-weight: 700; }
.facts { margin: 0; display: flex; flex-wrap: wrap; gap: 16px 32px; font-variant-numeric: tabular-nums; }
.facts > div { flex: 1 1 150px; } .facts dt { color: var(--ink2); font-size: 13px; } .facts dd { margin: 4px 0 0; font-weight: 600; }
.card.navy .facts dt { color: var(--navy-soft); } .card.navy .facts dd { font-size: 18px; }
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.timeline li { display: flex; gap: 12px; } .timeline .dot { width: 10px; height: 10px; margin-top: 5px; }
.chart { display: flex; align-items: flex-end; gap: 6px; height: 190px; padding-top: 8px; border-bottom: 1px solid var(--line); }
.chart > div { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.chart span { font-size: 11px; color: var(--ink2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chart i { display: block; width: 100%; max-width: 44px; min-height: 2px; background: var(--blue); border-radius: 8px 8px 0 0; }
.chart .now span { color: var(--ink); font-weight: 600; } .chart .now i { background: var(--ink); }
.axis { display: flex; gap: 6px; color: var(--ink2); font-size: 12px; font-variant-numeric: tabular-nums; }
.axis span { flex: 1; min-width: 0; text-align: center; }

/* ---- sign-in pages ------------------------------------------------------------------- */
.split { display: flex; flex-wrap: wrap; min-height: 100vh; background: var(--surface); font-size: 15px; line-height: 1.5; }
.split main { flex: 1 1 420px; min-width: 0; padding: 40px 32px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.split .box { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 28px; }
.split .box > img { align-self: flex-start; }
.split h1 { font-size: 30px; letter-spacing: -0.02em; }
.split aside { flex: 1 1 420px; min-width: 0; background: var(--navy); color: #fff; padding: 56px 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.split aside img { height: 36px; width: auto; align-self: flex-start; }
.split .tagline { font-size: 44px; font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; }
.split aside ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 32px; color: var(--navy-soft); }
.split aside li { display: flex; align-items: center; gap: 10px; }
.stack { display: flex; flex-direction: column; gap: 18px; }

/* ---- ClientArea (phone first) --------------------------------------------------------- */
.phone { max-width: 430px; min-height: 100vh; min-height: 100dvh; margin: 0 auto; padding: 20px 16px; display: flex; flex-direction: column; gap: 14px; }
.phone .card { border-radius: 20px; padding: 20px; gap: 14px; }
.phone h1 { font-size: 22px; } .phone h2 { font-size: 15px; }
.phone .top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.phone .top img { height: 30px; width: auto; }
.round { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--quiet-line); background: var(--surface); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.amount { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.trio { margin: 0; display: flex; gap: 12px; font-variant-numeric: tabular-nums; }
.trio > div { flex: 1; min-width: 0; } .trio dt { color: var(--ink2); font-size: 13px; } .trio dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.alert { background: var(--warn-bg); border-radius: 20px; padding: 18px 20px; display: flex; gap: 14px; align-items: flex-start; color: var(--warn-text); }
.alert h2 { color: var(--warn-ink); font-size: 16px; }
.phone .last { margin-top: auto; }
.phone-login { max-width: 430px; min-height: 100vh; min-height: 100dvh; margin: 0 auto; background: var(--surface); display: flex; flex-direction: column; font-size: 15px; }
.phone-login .upper { flex: 1; padding: 28px 24px 24px; display: flex; flex-direction: column; gap: 28px; }
.phone-login .lower { background: var(--navy); color: #fff; border-radius: 28px 28px 0 0; padding: 28px 24px 32px; display: flex; flex-direction: column; gap: 14px; }
.rule { width: 28px; height: 3px; border-radius: 3px; background: var(--lime); }

/* ---- receipt ------------------------------------------------------------------------- */
.paper { max-width: 560px; margin: 32px auto; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 32px; display: flex; flex-direction: column; gap: 22px; }
@media print { body { background: var(--surface); } .paper { border: 0; margin: 0; padding: 0; } .noprint { display: none !important; } }

/* ---- side menu: categories that open and close ---------------------------------------------- */
.side details > summary { list-style: none; cursor: pointer; user-select: none; }
.side details > summary::-webkit-details-marker { display: none; }
.side .menu { display: flex; flex-direction: column; }
.side .menu-toggle { display: none; }
.side .groups { display: flex; flex-direction: column; gap: 2px; }
.side .group { display: flex; flex-direction: column; gap: 2px; }
.side .group > summary .chev { transition: transform 0.15s; color: var(--muted-icon); }
.side .group[open] > summary .chev { transform: rotate(180deg); }
.side .group[open] > summary { color: var(--ink); font-weight: 600; }
.side .sub { display: flex; align-items: center; min-height: 40px; padding: 0 12px 0 44px; border-radius: 10px; color: var(--ink2); font-weight: 500; }
.side .sub:hover { background: var(--ground); color: var(--ink); }
.side .sub[aria-current="page"] { background: var(--tint); color: var(--tint-ink); font-weight: 600; }
.pre { margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--navy); color: #e6ecff; font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; }

/* ---- narrow screens: the side menu folds into one "Menu" bar along the top ----------------------- */
@media (max-width: 860px) {
  .shell { align-content: flex-start; }
  .side { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .side .brand { flex: 1; }
  .side .status { display: none; }
  .side .menu { flex: 1 1 100%; order: 3; }
  .side .menu-toggle { display: flex; border: 1px solid var(--line); }
  .side .menu:not([open]) { flex: 0 0 auto; order: 2; }
  .main { flex-basis: 100%; padding: 16px 16px 32px; }
  .split aside { padding: 40px 24px; } .split .tagline { font-size: 32px; }
}

/* ---- maps ---------------------------------------------------------------------------- */
.map { height: min(72vh, 760px); min-height: 420px; width: 100%; background: var(--ground); z-index: 0; }
.map.pick { height: 280px; min-height: 0; border-radius: 12px; border: 1px solid var(--field-line); }
.leaflet-container { font: inherit; }
.leaflet-popup-content { font-size: 13px; line-height: 1.5; color: var(--ink); }
.leaflet-popup-content a { font-weight: 600; }
/* Leaflet's own stylesheet comes after this one: the extra .map makes these win */
.map .leaflet-popup-content-wrapper, .map .leaflet-popup-tip { background: var(--surface); color: var(--ink); }
.map.leaflet-container a.leaflet-popup-close-button { color: var(--ink2); }
/* the card of one customer on the map */
.dot.bad { background: #dc2626; }
button.map-kind { border: 0; cursor: pointer; font: inherit; font-weight: 600; font-size: 13px; }
button.map-kind[aria-pressed="false"] { opacity: .45; text-decoration: line-through; }
button.map-kind:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.mp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-right: 14px; font-size: 15px; }
.mp dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 10px 0 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.mp dt { color: var(--ink2); white-space: nowrap; }
.mp dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.mp .sub { color: var(--ink2); font-size: 12px; font-weight: 400; }
.mp .pill { padding: 1px 8px; font-size: 12px; }
.mp-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.map .mp-acts a, .map .mp-acts button { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--quiet-line); background: var(--surface-2); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; }
.map .mp-acts a.go { background: var(--blue); border-color: var(--blue); color: #fff; }
.map .mp-acts a:hover, .map .mp-acts button:hover { border-color: var(--focus); }

[hidden] { display: none !important; }

/* ---- lists: filters, tick boxes, the bar for actions on several rows ----------------------- */
.only-narrow { display: none; }
.picks { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.filters label.pick { flex-direction: row; white-space: nowrap; font-size: 14px; }
th.tick, td.tick { width: 44px; padding-right: 0; }
td.right, th.right { white-space: nowrap; }
.tick input, .bulkbar input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--blue); cursor: pointer; vertical-align: middle; }
tr.picked td { background: var(--mark); }
.bulkbar { position: sticky; bottom: 12px; z-index: 5; margin: 14px 16px; padding: 12px 16px; border-radius: 16px; background: var(--navy); color: #fff; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; box-shadow: 0 12px 32px rgba(1, 17, 70, 0.28); }
.bulk-count { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-variant-numeric: tabular-nums; }
.bulk-count .check { min-height: 0; gap: 8px; color: var(--navy-soft); font-size: 14px; }
.bulk-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.bulkbar .btn { min-height: 40px; padding: 0 14px; background: transparent; border-color: var(--on-navy-line); color: #fff; }
.bulkbar .btn:hover { border-color: #fff; }
.bulkbar .btn.primary { background: var(--blue); border-color: var(--blue); }
.sticky { position: sticky; top: 16px; align-self: flex-start; }
.side-search { display: flex; align-items: center; gap: 8px; min-height: 40px; margin: 0 0 8px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--ground); color: var(--label); }
.side-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; color: var(--ink); min-height: 38px; }
.side-search:focus-within { border-color: var(--focus); }
.tpl-text summary { cursor: pointer; color: var(--ink2); font-size: 13px; margin-top: 4px; list-style: none; }
.tpl-text summary::-webkit-details-marker { display: none; }
.tpl-text summary::after { content: "  Show all"; color: var(--link); font-weight: 600; white-space: nowrap; }
.tpl-text[open] summary::after { content: "  Hide"; }
.tpl-text .preview { margin-top: 8px; max-height: 320px; overflow: auto; }

/* The menu stays in view while a long page scrolls; it scrolls by itself when it is taller than the window. */
@media (min-width: 861px) {
  .side { position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto; scrollbar-width: thin; }
}

/* On a phone a table marked "fold" becomes a list of cards: each cell on its own line, with its column name. */
@media (max-width: 640px) {
  .only-narrow { display: flex; }
  table.fold { min-width: 0 !important; display: block; }
  table.fold thead { display: none; }
  table.fold tbody { display: block; }
  table.fold tr { display: block; position: relative; padding: 12px 16px; border-bottom: 1px solid var(--line2); }
  table.fold td { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 3px 0; border: 0; text-align: right; max-width: none !important; }
  table.fold td::before { content: attr(data-label); flex: none; color: var(--ink2); font-size: 13px; text-align: left; }
  table.fold td, table.fold td:first-child, table.fold td:last-child { padding-left: 0; padding-right: 0; }
  .facts { gap: 14px 20px; } .facts > div { flex: 1 1 120px; }
  aside.sticky, .card.sticky { position: static; max-height: none !important; }
  table.fold td.lead { display: block; text-align: left; padding-bottom: 6px; font-size: 16px; }
  table.fold td.lead::before { content: none; }
  table.fold td.tick { position: absolute; top: 12px; right: 16px; width: auto; padding: 0; }
  table.fold td.tick::before { content: none; }
  table.fold td.tick + td.lead { padding-right: 40px; }
  table.fold td .sub { text-align: inherit; }
  .bulkbar { margin: 12px 8px; }
  .bulk-acts { margin-left: 0; }
  .filters { padding: 14px 16px; }
}

/* ---- template variables ------------------------------------------------------------------ */
.var { font: inherit; font-size: 13px; line-height: 1.2; padding: 6px 9px; border-radius: 8px; border: 1px solid var(--quiet-line); background: var(--surface-2); color: var(--ink); cursor: pointer; white-space: nowrap; }
.var:hover { border-color: var(--focus); background: var(--tint); color: var(--tint-ink); }
.var:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.vars { display: flex; flex-direction: column; gap: 10px; }
.vars-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vars-group > .muted { flex: 0 0 100%; }
.preview { white-space: pre-wrap; overflow-wrap: anywhere; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font-size: 14px; }
.preview code, .var-row code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.tpl-pick { display: flex; flex-direction: column; gap: 8px; }
.tpl-pick .preview { max-height: 260px; overflow: auto; }
.tpl-acts { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; font-size: 14px; }
.tpl-acts a { display: inline-flex; align-items: center; min-height: 32px; font-weight: 600; }
.tpl-acts a.bad { color: var(--bad-ink); }
details.help summary { cursor: pointer; font-weight: 600; color: var(--link); font-size: 14px; padding: 4px 0; }
details.help p { margin: 8px 0 0; }
.var-group { padding: 10px 22px 6px; background: var(--surface-2); color: var(--ink2); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--line2); }
.var-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 22px; border-bottom: 1px solid var(--line2); }
.var-row > div { min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.var-row .sub { color: var(--ink2); font-size: 13px; }
td.group { padding: 10px 12px 6px; background: var(--surface-2); color: var(--ink2); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }

/* ---- theme helpers --------------------------------------------------------------------- */
.only-dark { display: none !important; }
:root[data-theme="dark"] .only-light { display: none !important; }
:root[data-theme="dark"] .only-dark { display: revert !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .only-light { display: none !important; }
  :root:not([data-theme="light"]) .only-dark { display: revert !important; }
}
@media print { .only-dark { display: none !important; } .only-light { display: revert !important; } }

/* the strip across the top of the staging copy */
.sandbox { position: sticky; top: 0; z-index: 2000; padding: 6px 14px; background: #b45309; color: #fff; font-size: 13px; font-weight: 600; text-align: center; }