/* Manrope (SIL Open Font License), served by the site itself instead of Google Fonts: one variable font file per
   character set covers every weight (400 to 800). Latin first; latin-ext only loads when a page needs its characters. */
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("/static/vendor/fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("/static/vendor/fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
[hidden] { display: none !important; }
/* Mobile Locker house style (mobilelocker.eu): yellow #FDB813, near black #0E0D17, light grey #F5F5F5, Manrope.
   The chart series palette below is the validated categorical palette, kept as is.
   One stylesheet for every page. Later sections refine earlier ones (header, chat button, accents), so search for a
   class before changing it. Theme: light by default, dark through prefers-color-scheme or html[data-theme]. */
:root {
  color-scheme: light;
  --brand: #fdb813;
  --brand-ink: #0e0d17;
  --bg: #f5f5f5;
  --surface: #ffffff;
  --surface-2: #f2f2f2;
  --border: #e7e7e7;
  /* the edge of buttons and fields: at least 3:1 against the background (WCAG 1.4.11) */
  --control-border: #8a8993;
  --grid: #ededed;
  --text: #0e0d17;
  --text-2: #4b4a55;
  --text-3: #66656f;
  --brand-soft: #fff4d6;
  --brand-line: #e0a200;
  --headline-bg: #0e0d17;
  --headline-ink: #ffffff;
  --focus: #0e0d17;
  --accent: var(--brand);
  --accent-ink: var(--brand-ink);
  --good: #0f7b3f;
  --good-bg: #e3f3e8;
  --bad: #b3261e;
  --bad-bg: #fbe7e5;
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #008300;
  --series-7: #4a3aa7;
  --series-8: #e34948;
  --brand-series-1: #0e0d17;
  --brand-series-2: #e0a200;
  --ly-series: #c9c8d1;
  --radius: 6px;
  --shadow: 0 1px 2px rgba(14, 13, 23, 0.05);
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --bg: #0e0d17;
    --surface: #17161f;
    --surface-2: #201f29;
    --border: #2c2b36;
    --control-border: #72717c;
    --grid: #25242e;
    --text: #ffffff;
    --text-2: #c4c3cc;
    --text-3: #908f99;
    --brand-soft: #2a2411;
    --brand-line: #fdb813;
    --headline-bg: #2a2411;
    --headline-ink: #ffffff;
    --focus: #fdb813;
    --good: #5cc98a;
    --good-bg: #16301f;
    --bad: #f08a82;
    --bad-bg: #3a1a17;
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
    --series-6: #008300;
    --series-7: #9085e9;
    --series-8: #e66767;
    --brand-series-1: #fdb813;
    --brand-series-2: #c4c3cc;
    --ly-series: #55545f;
    --shadow: none;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e0d17;
  --surface: #17161f;
  --surface-2: #201f29;
  --border: #2c2b36;
  --control-border: #72717c;
  --grid: #25242e;
  --text: #ffffff;
  --text-2: #c4c3cc;
  --text-3: #908f99;
  --brand-soft: #2a2411;
  --brand-line: #fdb813;
  --headline-bg: #2a2411;
  --headline-ink: #ffffff;
  --focus: #fdb813;
  --good: #5cc98a;
  --good-bg: #16301f;
  --bad: #f08a82;
  --bad-bg: #3a1a17;
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --series-6: #008300;
  --series-7: #9085e9;
  --series-8: #e66767;
  --brand-series-1: #fdb813;
  --brand-series-2: #c4c3cc;
  --ly-series: #55545f;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* Header, like the site header of mobilelocker.eu: white, logo left, yellow for the active page */
.topbar {
  display: flex; align-items: center; background: var(--surface); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 5;
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.logo-img { width: auto; display: block; }
.logo-dark { display: none; }
.brand-sub { color: var(--text-3); font-size: 12.5px; }
.controls { display: flex; align-items: center; gap: 8px; }
.controls label { color: var(--text-2); font-size: 13px; }
.field, .btn {
  height: 34px; padding: 0 12px; border: 1px solid var(--control-border); border-radius: var(--radius);
  background: var(--surface); color: var(--text);
}
.btn { font-weight: 600; }
.btn:hover { border-color: var(--text-2); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn.primary:hover { filter: brightness(0.96); border-color: var(--brand); }
.btn:disabled { opacity: 0.55; cursor: default; }

/* Layout */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 20px; padding: 20px 24px; align-items: start; }
@media (max-width: 1180px) { .layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .layout, .topbar { padding-left: 16px; padding-right: 16px; }
  .topbar { position: static; }
}

/* KPI tiles */
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
@media (max-width: 900px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow); min-width: 0;
}
.tile .label { color: var(--text-2); font-size: 12.5px; }
.tile .value { font-size: clamp(18px, 1.7vw, 24px); white-space: nowrap; font-weight: 650; letter-spacing: -0.01em; margin-top: 2px; font-variant-numeric: tabular-nums; }
.tile .sub { color: var(--text-3); font-size: 12.5px; margin-top: 2px; }
.status { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 4px; margin-top: 6px; }
.status.good { color: var(--good); background: var(--good-bg); }
.status.bad { color: var(--bad); background: var(--bad-bg); }

/* Chart cards */
.charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .charts { grid-template-columns: minmax(0, 1fr); } }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px 16px; box-shadow: var(--shadow); min-width: 0;
}
.card.wide { grid-column: 1 / -1; }
.card-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.card-head h2 { font-size: 14px; margin: 0; }
.card-head .hint { color: var(--text-3); font-size: 12.5px; }
.card-head .toggle { margin-left: auto; height: 26px; font-size: 12px; padding: 0 8px; }
.chart-box { position: relative; height: 260px; }
.card.wide .chart-box { height: 300px; }
.table-box { max-height: 300px; overflow: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
table.data th, table.data td { padding: 5px 8px; border-bottom: 1px solid var(--grid); text-align: right; white-space: nowrap; }
table.data th:first-child, table.data td:first-child { text-align: left; }
table.data th { color: var(--text-2); font-weight: 600; position: sticky; top: 0; background: var(--surface); }

.notes { color: var(--text-3); font-size: 12px; margin-top: 14px; }
.notes ul { margin: 4px 0 0; padding-left: 18px; }
.loading { color: var(--text-3); padding: 40px 0; text-align: center; }
.error-box { color: var(--bad); background: var(--bad-bg); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; }

/* Chat */
.chat {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); display: flex; flex-direction: column;
  position: sticky; top: 76px; height: calc(100vh - 96px); min-height: 480px;
}
@media (max-width: 1180px) { .chat { position: static; height: 640px; } }
.chat-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 3px solid var(--brand); }
.chat-head h2 { font-size: 14px; margin: 0; margin-right: auto; }
.chat-head .btn { height: 28px; font-size: 12.5px; }
.messages { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 100%; overflow-wrap: anywhere; }
.msg.user { align-self: flex-end; background: var(--brand-soft); padding: 8px 12px; border-radius: 10px; max-width: 88%; white-space: pre-wrap; }
.msg.bot .md > :first-child { margin-top: 0; }
.msg.bot .md > :last-child { margin-bottom: 0; }
.msg.bot .md table { border-collapse: collapse; font-size: 12.5px; margin: 8px 0; display: block; overflow-x: auto; font-variant-numeric: tabular-nums; }
.msg.bot .md th, .msg.bot .md td { border-bottom: 1px solid var(--grid); padding: 4px 8px; text-align: left; }
.msg.bot .md code { background: var(--surface-2); padding: 1px 4px; border-radius: 4px; font-size: 12.5px; }
.msg.bot .md h1, .msg.bot .md h2, .msg.bot .md h3 { font-size: 14px; margin: 12px 0 4px; }
.tools { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.tool-chip { font-size: 11.5px; color: var(--text-2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; }
.tool-chip.running::after { content: " …"; }
.msg .chart-card { border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin-top: 8px; }
.msg .chart-card h3 { font-size: 13px; margin: 0 0 6px; font-weight: 600; }
.msg .chart-card .chart-box { height: 220px; }
.msg.error { color: var(--bad); font-size: 13px; }
.typing { color: var(--text-3); font-size: 13px; }
.suggestions { display: flex; flex-direction: column; gap: 6px; }
.suggestions p { color: var(--text-2); margin: 0 0 4px; }
.suggestion {
  text-align: left; background: var(--surface); border: 1px solid var(--control-border); border-radius: 8px;
  padding: 8px 10px; color: var(--text); font-size: 13px;
}
.composer { border-top: 1px solid var(--border); padding: 10px; display: flex; gap: 8px; align-items: flex-end; }
.composer textarea {
  flex: 1; resize: none; min-height: 40px; max-height: 160px; padding: 9px 10px;
  border: 1px solid var(--control-border); border-radius: 8px; background: var(--surface);
}
/* focus on a field: a dark ring (light theme; yellow in the dark theme) with a yellow halo, at least 3:1 */
.composer textarea:focus, .field:focus {
  outline: 2px solid var(--focus); outline-offset: 0;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 55%, transparent);
}
.composer .btn { height: 40px; }

/* Login */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-card {
  width: 100%; max-width: 360px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow);
}
.login-card h1 { font-size: 17px; margin: 0 0 4px; }
.login-card p { color: var(--text-2); margin: 0 0 16px; }
.login-card input { width: 100%; height: 38px; margin-bottom: 12px; }
.login-card .btn { width: 100%; height: 38px; }

/* Navigation */
.nav { display: flex; }
.nav a {
  color: var(--text-2); text-decoration: none; padding: 8px 4px; margin: 0 6px; font-weight: 600;
  border-bottom: 3px solid transparent;
}
.nav a:hover { color: var(--text); border-bottom-color: var(--border); }
.nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--brand); }
.topbar .controls { margin-left: auto; }

/* Filter bar, side filters and the report tables (table.pl): first made for the Rolling P&L, now on every report page */
.filterbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 10px 24px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.filterbar label { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 13px; }
.filterbar .spacer { flex: 1; }
.check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.btn.small { height: 28px; font-size: 12.5px; }
.rolling-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; padding: 16px 24px; align-items: start; }
@media (max-width: 900px) { .rolling-layout { grid-template-columns: minmax(0, 1fr); padding: 12px 16px; } .filterbar { padding: 10px 16px; } }
.side-filters {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px 12px 12px; position: sticky; top: 76px; max-height: calc(100vh - 150px); overflow: auto;
}
@media (max-width: 900px) { .side-filters { position: static; max-height: none; } }
.side-filters details { border-bottom: 1px solid var(--grid); padding: 6px 0; }
.side-filters summary { cursor: pointer; font-weight: 600; font-size: 13px; padding: 4px 0; }
.side-filters .opts { display: flex; flex-direction: column; gap: 4px; padding: 6px 0 4px 2px; font-size: 13px; }
.side-filters .btn { margin-top: 10px; width: 100%; }
.table-card { padding: 0; overflow: hidden; }
.table-scroll { overflow: auto; max-height: calc(100vh - 170px); }
.table-scroll.busy { opacity: 0.55; pointer-events: none; }
table.pl { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12.5px; font-variant-numeric: tabular-nums; }
table.pl th, table.pl td { padding: 5px 10px; border-bottom: 1px solid var(--grid); white-space: nowrap; }
table.pl thead th {
  position: sticky; top: 0; z-index: 2; background: var(--surface-2); color: var(--text);
  font-weight: 600; text-align: right; border-bottom: 1px solid var(--border);
}
table.pl .sticky { position: sticky; left: 0; background: var(--surface); z-index: 1; text-align: left; min-width: 260px; }
table.pl thead th.sticky { z-index: 3; background: var(--surface-2); }
table.pl td.num { text-align: right; }
table.pl td.sum { background: var(--surface-2); }
table.pl td.neg { color: var(--text); }
table.pl tr.k-group td { font-weight: 600; }
table.pl tr.k-top td { background: var(--brand-soft); }
table.pl tr.k-top td.sum { background: color-mix(in srgb, var(--brand) 22%, var(--surface)); }
table.pl tr.k-top td.sticky { box-shadow: inset 3px 0 0 var(--brand); }
table.pl tr.k-headline td { font-weight: 800; background: var(--headline-bg); color: var(--headline-ink); }
table.pl tr.k-headline td.sum { background: color-mix(in srgb, var(--headline-bg) 88%, var(--brand)); }
table.pl tr.k-headline td.good, table.pl tr.k-headline td.bad { color: var(--headline-ink); }
table.pl tr.k-headline .tw { color: var(--headline-ink); }
table.pl tr.k-pct td { font-style: italic; color: var(--text-2); }
table.pl tr.k-account td { color: var(--text-2); font-size: 12px; }
table.pl tr:hover td { filter: brightness(0.97); }
.tw { background: none; border: 0; color: var(--text-3); width: 18px; padding: 0; margin-right: 2px; font-size: 11px; }
.tw-space { display: inline-block; width: 20px; }

/* Rolling vs Budget */
table.pl.rvb th.grp { text-align: center; border-left: 1px solid var(--border); }
table.pl.rvb th.first, table.pl.rvb td.first { border-left: 1px solid var(--border); }
table.pl.rvb thead tr:nth-child(2) th { top: 29px; }
table.pl td.bud { color: var(--text-2); }
table.pl td.good { color: var(--good); }
table.pl td.bad { color: var(--bad); }
.na { color: var(--text-3); }
.side-note { color: var(--text-3); font-size: 12px; margin: 10px 0 0; }

/* Budget */
.budget-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; padding: 16px 24px; align-items: start; }
@media (max-width: 1100px) { .budget-layout { grid-template-columns: minmax(0, 1fr); padding: 12px 16px; } }
.budget-side { display: flex; flex-direction: column; gap: 16px; }
.side-title { font-size: 14px; margin: 0 0 10px; }
.stack { display: flex; flex-direction: column; gap: 4px; color: var(--text-2); font-size: 13px; margin-bottom: 10px; }
.stack .field { width: 100%; height: auto; padding: 6px 8px; }
.ok-box { color: var(--good); background: var(--good-bg); border-radius: 8px; padding: 10px 12px; margin-top: 10px; font-size: 13px; }
#uploadMsg.error-box { margin-top: 10px; font-size: 13px; }
table.data .sub { color: var(--text-3); font-size: 11px; }
table.pl tr.k-driver td { color: var(--text-2); font-size: 12px; }
.tag { display: inline-block; font-size: 11px; color: var(--text-3); border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; margin-left: 6px; }

/* Mobile Locker accents */
.tile { border-top: 3px solid var(--brand); }
.card-head h2, .side-title, .chat-head h2 { font-weight: 800; letter-spacing: -0.005em; }
.suggestion:hover { border-color: var(--brand-line); background: var(--brand-soft); }
.tool-chip { border-color: var(--brand-line); }
.filterbar input[type="checkbox"], .side-filters input[type="checkbox"] { accent-color: var(--brand); }
.login-wrap { background: var(--brand-ink); }
.login-card { border-top: 4px solid var(--brand); }
.login-card .brand { margin-bottom: 18px; }

/* Official logo: dark lettering on the light theme, white lettering (TR-6) on the dark theme. */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .logo-light { display: none; }
  :root:where(:not([data-theme="light"])) .logo-dark { display: block; }
}
:root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark { display: block; }
.login-card .logo-img { height: 56px; }

/* Prognose: the forecast columns */
table.pl th.fc, table.pl td.fc { background: color-mix(in srgb, var(--brand) 6%, var(--surface)); }
table.pl tr.k-top td.fc { background: color-mix(in srgb, var(--brand) 16%, var(--surface)); }

/* Vaste kosten */
table.pl.fixed tr.f-section td { font-weight: 800; }
/* the actual figure is the headline of each line; budget, % of revenue and LTM sit below it */
table.pl.fixed tr.f-head td { font-weight: 700; background: var(--brand-soft); }
table.pl.fixed tr.f-head td.sum { background: color-mix(in srgb, var(--brand) 20%, var(--surface)); }
table.pl.fixed tr.f-head td.good { color: var(--good); }
table.pl.fixed tr.f-head td.bad { color: var(--bad); }
table.pl.fixed tr.f-budget td { color: var(--text-2); }
.fixed-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 8px; font-size: 12.5px; color: var(--text-2); }
.fixed-legend .lg::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.fixed-legend .lg.good::before { background: var(--good); }
.fixed-legend .lg.bad::before { background: var(--bad); }
table.pl.fixed tr.f-pct td, table.pl.fixed tr.f-ltm td { color: var(--text-2); }
table.pl.fixed tr.f-pct td { font-style: italic; }

/* Cashflow */
table.pl.cf tr.c-cash td { font-weight: 700; }
table.pl.cf tr.c-fx td, table.pl.cf tr.c-check td { color: var(--text-2); font-style: italic; }

/* Dashboard RvB: this year against last year and the budget */
.section-title { font-size: 15px; font-weight: 700; margin: 24px 0 12px; }
.kpis.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .kpis.three { grid-template-columns: minmax(0, 1fr); } }

/* Chat on the report pages: a button bottom right that opens the chat as a side panel */
.chat-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 40; display: inline-flex; align-items: center;
  border: 0; cursor: pointer; background: var(--brand); color: var(--brand-ink); font: inherit; font-weight: 700;
  box-shadow: 0 4px 16px rgba(14, 13, 23, 0.22);
}
.chat-fab:hover { filter: brightness(0.96); }
.chat-fab:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 2px; }
.chat-fab[hidden] { display: none; }
.chat.chat-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; width: min(440px, 100vw); height: auto; max-height: none;
  border-radius: 0; border-top: 0; border-right: 0; border-bottom: 0; box-shadow: -8px 0 24px rgba(14, 13, 23, 0.18);
}
.chat.chat-drawer[hidden] { display: none; }
@media (min-width: 1400px) { body.chat-open { padding-right: 440px; } }
@media (max-width: 600px) { .chat-fab { right: 16px; bottom: 16px; } }

/* Rapportering RvB: texts on the left, PDF preview on the right */
.report-layout { display: grid; grid-template-columns: minmax(340px, 440px) minmax(0, 1fr); gap: 16px; padding: 16px 24px; align-items: start; }
@media (max-width: 1000px) { .report-layout { grid-template-columns: minmax(0, 1fr); padding: 12px 16px; } }
.report-form { display: flex; flex-direction: column; gap: 12px; }
.report-form .hint { margin: 0; }
.report-form .fld { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--text); }
.report-form .fld small { font-weight: 400; color: var(--text-3); }
.report-form textarea.field, .report-form input.field { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; font-weight: 400; }
.report-form textarea.field { min-height: 72px; resize: vertical; padding: 8px 10px; line-height: 1.45; height: auto; }
.hl-head { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.hl-head h2, .preview-head h2 { font-size: 14px; font-weight: 800; margin: 0; }
.hl-card { border: 1px solid var(--border); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 6px; background: var(--surface); }
.hl-card .row { display: flex; gap: 8px; }
.hl-card .row input { flex: 1; }
.report-preview { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 1000px) { .report-preview { position: static; } }
.preview-head { display: flex; align-items: baseline; gap: 10px; }
.preview-box { position: relative; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); height: calc(100vh - 170px); min-height: 420px; overflow: hidden; }
.preview-box iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.preview-box iframe[hidden] { display: none; }
.preview-box .loading { position: absolute; inset: 0; display: grid; place-items: center; }
.preview-box.busy iframe { opacity: 0.5; }
.filterbar .hint, .report-form .hint, .preview-head .hint { color: var(--text-3); font-size: 12.5px; }
.sync-info { color: var(--text-3); font-size: 12.5px; white-space: nowrap; }
.sync-info.bad { color: var(--bad); }
table.pl tr.k-detail td { font-size: 12px; }

/* Budgetbuilder */
.builder-tools { border-top: 0; padding-top: 0; }
.builder-tools .hint { flex: 1 1 360px; }
.builder-main { padding: 12px 24px 24px; }
@media (max-width: 900px) { .builder-main { padding: 12px 16px; } }
.pct-in { width: 64px; }
table.builder { font-variant-numeric: tabular-nums; }
table.builder td.inp { padding: 1px 2px; }
table.builder input.cell { width: 78px; box-sizing: border-box; height: 26px; padding: 2px 6px; text-align: right; font: inherit; font-size: 12.5px;
  border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--text); }
table.builder input.cell:hover { border-color: var(--control-border); }
table.builder input.cell:focus { border-color: var(--focus); outline: 1px solid var(--focus); outline-offset: -2px; background: var(--surface); }
table.builder input.cell:disabled { color: var(--text-2); }
table.builder input.tool { width: 70px; background: var(--surface-2); border-color: var(--control-border); }
table.builder input.lbl-in { width: 100%; min-width: 160px; text-align: left; background: var(--surface-2); border-color: var(--control-border); }
table.builder tr.b-detail td, table.builder tr.b-rest td { background: color-mix(in srgb, var(--brand) 4%, var(--surface)); }
table.builder tr.b-detail td.sticky, table.builder tr.b-rest td.sticky { font-size: 12.5px; color: var(--text-2); }
table.builder th.bt, table.builder td.bt { background: var(--surface-2); }
table.builder .mini { height: 24px; padding: 0 8px; font-size: 12px; }
table.builder td.bt, table.builder th.bt { padding: 1px 3px; }

/* Rolling P&L: click a figure for its journal items */
table.pl td.drill { cursor: pointer; }
table.pl td.drill:hover { text-decoration: underline; text-decoration-color: var(--brand-line); text-underline-offset: 3px; }
.drill-dialog { width: min(1200px, 96vw); max-height: 88vh; padding: 0; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text); box-shadow: 0 12px 40px rgba(14, 13, 23, 0.3); }
.drill-dialog[open] { display: flex; flex-direction: column; }
.drill-dialog::backdrop { background: rgba(14, 13, 23, 0.45); }
.drill-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 3px solid var(--brand); }
.drill-head > div { flex: 1; min-width: 0; }
.drill-head h2 { margin: 0; font-size: 15px; font-weight: 800; }
.drill-head .hint { color: var(--text-3); font-size: 12.5px; }
.drill-head input { width: 220px; }
.drill-body { overflow: auto; padding: 8px 16px; flex: 1; }
.drill-foot { margin: 0; padding: 8px 16px; border-top: 1px solid var(--border); color: var(--text-3); font-size: 12px; }
.drill-table { width: 100%; font-size: 12.5px; }
.drill-table td { vertical-align: top; }
.drill-table tr[data-url] { cursor: pointer; }
.drill-table tr[data-url]:hover td { background: var(--brand-soft); }
table.data.drill-table td.num, table.data.drill-table th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.drill-table .sub { color: var(--text-3); font-size: 11.5px; }
.drill-acc { margin: 6px 0 10px; font-size: 12.5px; }
.drill-acc table { width: auto; min-width: 420px; }
@media (max-width: 700px) { .drill-head { flex-wrap: wrap; } .drill-head input { width: 100%; } }
table.data.drill-table th, table.data.drill-table td { text-align: left; white-space: normal; padding: 5px 8px; }
table.data.drill-table td:nth-child(1), table.data.drill-table td:nth-child(2) a { white-space: nowrap; }
table.data.drill-table td:nth-child(2) { max-width: 220px; }
.drill-table td:nth-child(4) { min-width: 180px; }
.drill-table td:nth-child(5) { min-width: 160px; }
.drill-table .tag { white-space: nowrap; }
.drill-table tr.opening td { background: var(--surface-2); font-weight: 600; }

/* Extra */
.side-filters .opt-search { width: 100%; box-sizing: border-box; margin: 4px 0 6px; height: 28px; font-size: 12.5px; }
.side-filters .opts.long { max-height: 260px; overflow: auto; }
table.pl.xb tr.xb-title td { background: var(--brand-soft); font-weight: 800; }
table.pl.xb tr.xb-title td.sticky { box-shadow: inset 3px 0 0 var(--brand); }
table.pl.xb td.pct { color: var(--text-2); }
table.pl.xb tr.xb-total td { font-weight: 700; background: var(--surface-2); }
table.pl.xb th.grp { text-align: center; border-left: 1px solid var(--border); }
table.pl.xb td.first, table.pl.xb th.first { border-left: 1px solid var(--border); }
.xtiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.xtiles .tile .status { margin-left: 6px; }
.xcharts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.xcharts .card.wide { grid-column: 1 / -1; }
@media (max-width: 1000px) { .xcharts { grid-template-columns: minmax(0, 1fr); } }
.xcharts .chart-box { height: 280px; }
.xtable { margin-bottom: 16px; }

/* Header and navigation: one row, pages grouped in menus */
.topbar { flex-wrap: nowrap; gap: 14px; padding: 8px 24px; }
.logo-img { height: 34px; }
.brand-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-width: 1500px) { .topbar .brand-sub { display: none; } }
.nav { flex-wrap: nowrap; align-items: center; gap: 2px; }
.nav a, .nav .nav-top { white-space: nowrap; }
.nav-group { position: relative; }
.nav .nav-top {
  background: none; border: 0; border-bottom: 3px solid transparent; color: var(--text-2); font: inherit; font-weight: 600;
  padding: 8px 4px; margin: 0 6px; cursor: pointer;
}
.nav .nav-top span { font-size: 10px; }
.nav .nav-top:hover { color: var(--text); border-bottom-color: var(--border); }
.nav .nav-top.current { color: var(--text); border-bottom-color: var(--brand); }
.nav-menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; min-width: 200px; display: none; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(14, 13, 23, 0.18); padding: 6px;
}
.nav-menu.open { display: flex; }
.nav-menu a { margin: 0; padding: 8px 10px; border-bottom: 0; border-radius: 6px; }
.nav-menu a:hover { background: var(--surface-2); }
.nav-menu a[aria-current="page"] { background: var(--brand-soft); border-bottom: 0; }
.controls { flex-wrap: nowrap; }
.controls form { display: flex; margin: 0; } /* the sign out button only, without a taller line around it */
.icon-btn { width: 34px; padding: 0; font-size: 16px; }
.menu-btn { display: none; }
.m-filter-toggle { display: none; }
/* The header never needs more room than the screen (nav.js measures it): first the time of the data goes (nav-tight),
   then one Menu button opens every page, grouped, as on a phone (nav-compact) */
html.nav-tight .topbar .controls .sync-info { display: none; }
html.nav-compact .menu-btn { display: inline-flex; align-items: center; }
html.nav-compact .topbar { flex-wrap: wrap; gap: 8px; }
html.nav-compact .topbar .nav { display: none; order: 10; width: 100%; flex-direction: column; align-items: stretch; }
/* the open panel stays within the screen and scrolls on its own */
html.nav-compact body.nav-open .topbar .nav {
  display: flex; max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior: contain;
}
html.nav-compact .nav-group { display: flex; flex-direction: column; }
html.nav-compact .nav .nav-top { text-align: left; color: var(--text-3); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; padding: 10px 4px 2px; pointer-events: none; }
html.nav-compact .nav .nav-top span { display: none; }
html.nav-compact .nav-menu { position: static; display: flex; box-shadow: none; border: 0; padding: 0 0 4px; min-width: 0; }
html.nav-compact .nav a { padding: 8px 4px; }
/* the chat button would cover the open panel */
body.nav-open .chat-fab { display: none; }
@media (max-width: 860px) {
  .topbar { padding: 8px 16px; }
  .topbar .controls .btn { padding: 0 10px; }
  .m-filter-toggle { display: block; padding: 8px 16px; background: var(--surface); border-bottom: 1px solid var(--border); }
  .m-filter-toggle .btn { width: 100%; }
  /* folded: the filters go, what is marked m-keep stays (nav.js marks the bars) */
  body.filters-folded .filterbar.m-fold, body.filters-folded .side-filters { display: none; }
  body.filters-folded .filterbar.m-fold-part > :not(.m-keep) { display: none; }
  /* tables: a narrower label column, so the figures fit on the screen */
  table.pl td.sticky, table.pl th.sticky { white-space: normal; width: 44vw; min-width: 44vw; max-width: 44vw; line-height: 1.25; }
  table.pl td.lbl { padding-left: 6px !important; }
  table.pl td.lbl input.lbl-in { min-width: 0; }
}

/* Chat button: small and round, it no longer covers the last columns of a table */
.chat-fab { width: 48px; height: 48px; padding: 0; justify-content: center; border-radius: 50%; font-size: 0; gap: 0; }
.chat-fab span { font-size: 20px; }
.chat-fab::after {
  content: attr(aria-label); position: absolute; right: 56px; white-space: nowrap; font-size: 13px; font-weight: 600;
  background: var(--brand-ink); color: #fff; padding: 6px 10px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity 0.15s;
}
.chat-fab:hover::after, .chat-fab:focus-visible::after { opacity: 1; }

/* Info icon with the definition of a figure */
/* a 24px button around a 16px circle; the definition opens below it on click or tap */
.info-wrap { position: relative; display: inline-block; vertical-align: middle; }
.info { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: -4px 0 -4px 0;
  padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text-3); font-size: 10px; font-weight: 700; cursor: pointer; vertical-align: middle; }
.info::before { content: ""; position: absolute; inset: 4px; border: 1px solid var(--control-border); border-radius: 50%; }
.info:hover, .info:focus-visible, .info[aria-expanded="true"] { color: var(--text); }
.info:hover::before, .info:focus-visible::before, .info[aria-expanded="true"]::before { border-color: var(--text-3); }
.tip { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; width: max-content; max-width: min(300px, 86vw); white-space: normal;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px;
  font-size: 12.5px; font-weight: 500; line-height: 1.45; box-shadow: 0 8px 24px rgba(14, 13, 23, 0.18); text-align: left; }
.layout.no-chat { grid-template-columns: minmax(0, 1fr); }

/* Data check */
.dc-tile { color: inherit; text-decoration: none; display: block; }
.dc-tile:hover { border-color: var(--brand-line); }
.status.dc-mid { color: var(--text-2); background: var(--brand-soft); }
.dc-card { margin-bottom: 16px; }
.dc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 12px 16px 6px; }
.dc-head h2 { margin: 0; font-size: 15px; font-weight: 800; }
.dc-head .hint { color: var(--text-3); font-size: 12.5px; }
.dc-head .hint-link { font-size: 12.5px; font-weight: 600; color: var(--text); text-decoration-color: var(--brand-line); text-underline-offset: 3px; }
.dc-ok { margin: 0; padding: 4px 16px 14px; color: var(--good); font-weight: 600; font-size: 13px; }
table.pl.dc td.dc-hit.dc-hoog { background: var(--bad-bg); color: var(--bad); font-weight: 650; }
table.pl.dc td.dc-hit.dc-middel { background: var(--brand-soft); font-weight: 650; }
table.pl.dc td.dc-hit:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
table.pl.dc th.dc-open { color: var(--text-3); font-style: italic; }
table.pl.dc tr.dc-total td { border-top: 1px solid var(--border); }
#checks.busy { opacity: 0.55; }

/* Chat: the Snel antwoord switch */
.chat-fast { font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.composer + .chat-fast, .chat-fast + .composer { margin: 0; }

/* Variance under a figure (Vaste kosten): only on touch screens, where there is no hover */
.var-sub { display: none; }
@media (hover: none) {
  .var-sub { display: block; font-size: 10.5px; font-weight: 500; color: inherit; opacity: 0.85; }
}

/* Printing (Ctrl+P): the full tables in landscape, without header, filters and chat */
.print-head { display: none; }
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  :root { color-scheme: light; }
  body { background: #fff !important; color: #111 !important; font-size: 10px; }
  .topbar, .filterbar, .side-filters, .m-filter-toggle, .chat-fab, .chat-drawer, aside.chat, .btn, .drill-dialog,
  .suggestions, #error[hidden] { display: none !important; }
  .print-head { display: block; font-size: 11px; margin: 0 0 6px; }
  .print-head strong { font-size: 13px; }
  .rolling-layout, .layout { display: block !important; }
  .table-scroll, .table-box, .drill-body { max-height: none !important; overflow: visible !important; }
  table.pl .sticky, table.pl thead th, table.data th { position: static !important; }
  table.pl, table.data { font-size: 9px; }
  tr, .card, .tile { break-inside: avoid; }
  .card, .tile { box-shadow: none !important; }
  canvas { max-width: 100% !important; }
}

/* A reload dims the tiles and cards (dashboard, Prognose, Data check); a data check problem in the drill down */
main.busy .kpis, main.busy .card { opacity: 0.6; transition: opacity 0.15s; }
.drill-issue { font-size: 11.5px; font-weight: 650; color: var(--bad); }

/* Printing always on white paper with dark text, also when the dark theme is on */
@media print {
  :root, :root[data-theme="dark"], :root:where(:not([data-theme="light"])) {
    --bg: #ffffff; --surface: #ffffff; --surface-2: #f2f2f2; --border: #d9d9d9; --grid: #e5e5e5;
    --text: #0e0d17; --text-2: #4b4a55; --text-3: #6b6a74; --brand-soft: #fff4d6; --brand-line: #e0a200;
    --headline-bg: #0e0d17; --headline-ink: #ffffff; --good: #0f7b3f; --good-bg: #e3f3e8; --bad: #b3261e; --bad-bg: #fbe7e5;
  }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Rights: what the person may not use is hidden (the server refuses it as well) */
html.no-export #export, html.no-export #drillExport, html.no-export [data-xl], html.no-export .needs-export { display: none !important; }
html.no-drill td.drill { pointer-events: none; cursor: default; text-decoration: none; }
html.no-sync #refresh { display: none; }

/* Tables and forms of Instellingen, Mapping and Normalisaties */
.users-table { width: 100%; border-collapse: collapse; }
.users-table th, .users-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.users-table .perms { color: var(--text-3); font-size: 12.5px; }
.perm-group { margin: 0 0 10px; }
.perm-group strong { display: block; font-size: 12.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.perm-group label { display: block; padding: 2px 0; }
.users-form { display: grid; gap: 12px; max-width: 760px; }
.users-form .row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.users-note { color: var(--text-3); font-size: 12.5px; }

/* Rights (continued) */
html.no-export #download { display: none !important; }
html.no-budget-upload .needs-budget-edit, html.no-budget-builder #builderLink { display: none !important; }
html.no-texts-edit #save, html.no-texts-edit #reset, html.no-texts-edit #addHighlight { display: none !important; }
html.no-drill #allLines { display: none !important; }

/* Mapping */
.seg { display: inline-flex; gap: 0; }
.seg .btn { border-radius: 0; }
.seg .btn:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.seg .btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.seg .btn[aria-selected="true"] { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.mapping-table td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mapping-table tr.map-open td { background: color-mix(in srgb, var(--brand) 7%, transparent); }
.mapping-table .map-status { white-space: nowrap; font-size: 12.5px; }
.mapping-table .map-open { font-weight: 650; }
.mapping-table td .btn.small { margin: 0 4px 4px 0; }
.mapping-table select.field { max-width: 420px; }
.link-btn { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; }
.link-btn:hover { text-decoration-color: var(--brand); }
.mapping-page #search { min-width: 220px; }

/* Page head: the title of the page with its period and entities, above the table */
.page-head { margin: 0 0 12px; min-width: 0; }
.page-head.pad { padding: 16px 24px 0; margin: 0; }
.page-head h1 { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; margin: 0; line-height: 1.3; }
.page-period { margin: 2px 0 0; color: var(--text-2); font-size: 13px; overflow-wrap: anywhere; }
.page-period:empty { display: none; }
body.has-page-head .topbar .brand-sub { display: none; }
@media (max-width: 900px) { .page-head.pad { padding: 12px 16px 0; } .page-head h1 { font-size: 16px; } }
.report-desc { margin: -6px 0 12px; color: var(--text-2); font-size: 13px; }

/* Skip link: hidden until it gets the keyboard focus */
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--brand); color: var(--brand-ink); font-weight: 700;
  padding: 8px 12px; border-radius: var(--radius); text-decoration: none; }
.skip-link:focus { top: 8px; }

/* Loading: the seconds that passed */
.loading .ld-sec, .busy-pill .ld-sec { color: var(--text-3); font-variant-numeric: tabular-nums; margin-left: 4px; }
/* A reload: the figures dim and a small line over them counts the seconds (it takes no room, see showBusy) */
.busy-note { position: relative; height: 0; z-index: 4; }
.busy-pill {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  padding: 4px 12px; border-radius: 999px; background: var(--surface); color: var(--text-2); border: 1px solid var(--control-border);
  box-shadow: 0 4px 12px rgba(14, 13, 23, 0.14); font-size: 12.5px; font-weight: 600; animation: busy-in 0.2s ease 0.4s both;
}
@keyframes busy-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .busy-pill { animation-duration: 0.01s; } }
#content.busy, main.busy .xtiles { opacity: 0.55; transition: opacity 0.15s; }
#content.busy { pointer-events: none; }
/* a chart that could not be drawn (Chart.js did not load) */
.chart-na { margin: 0; padding: 40px 0; text-align: center; color: var(--text-3); font-size: 13px; }

/* A table wider than the screen scrolls on its own, the page never scrolls sideways */
.x-scroll { overflow-x: auto; max-width: 100%; }
.users-page { padding: 16px 24px; min-width: 0; }
@media (max-width: 640px) { .users-page { padding: 12px 16px; } .users-table th, .users-table td { padding: 6px 8px; } }

/* Dashboard: the Tabel button shows whether the table is on */
.card-head .toggle[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand-line); }

/* Report: on a small screen (no PDF in a frame) a button opens the PDF */
.preview-box .preview-link { position: absolute; inset: 0; margin: auto; width: max-content; height: 38px; display: inline-flex; align-items: center; text-decoration: none; }
.preview-box .preview-link[hidden] { display: none; }
@media (max-width: 860px) { .preview-box { height: 140px; min-height: 0; } }

/* Menu panel (compact header): language, theme, sign out and the time of the data */
.nav-tools { display: none; }
html.nav-compact .nav-tools { display: flex; flex-direction: column; gap: 8px; padding: 10px 4px 6px; border-top: 1px solid var(--border); margin-top: 6px; }
html.nav-compact .nav-tools .sync-info { display: block; white-space: normal; }
html.nav-compact .nav-tools-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
html.nav-compact .nav-tools-row form { margin: 0; }
html.nav-compact .topbar .controls .lang-select, html.nav-compact .topbar .controls #theme, html.nav-compact .topbar .controls .logout-form,
html.nav-compact .topbar .controls .sync-info { display: none; }

/* Totals in view: the total columns stay on the right while the months scroll (common.js sets the offsets) */
table.pl .stick-r { position: sticky; z-index: 1; }
table.pl thead th.stick-r { z-index: 3; }
table.pl .stick-r-edge { box-shadow: inset 1px 0 0 var(--border), -6px 0 8px -6px rgba(14, 13, 23, 0.28); }
table.pl thead th.sum { background: var(--surface-2); }
table.pl thead th.stick-r-part, table.pl.rvb thead th.grp.stick-r-part { text-align: left; }
table.pl.forecast thead th.sum { white-space: normal; min-width: 88px; max-width: 120px; vertical-align: bottom; }
.totals-toggle { display: none; }
@media (max-width: 860px) {
  .totals-toggle { display: inline-flex; margin: 0 0 8px; font-size: 13px; color: var(--text-2); }
  .totals-toggle input { accent-color: var(--brand); }
  /* only the line names and the totals */
  .totals-only table.pl th:not(.sticky):not(.sum), .totals-only table.pl td:not(.sticky):not(.sum) { display: none; }
  /* a narrower label column and tighter cells, so the totals fit next to it */
  .totals-only table.pl { font-size: 12px; }
  .totals-only table.pl th, .totals-only table.pl td { padding: 5px 5px; }
  .totals-only table.pl td.sticky, .totals-only table.pl th.sticky { width: 32vw; min-width: 32vw; max-width: 32vw; overflow-wrap: anywhere; }
  .totals-only table.pl thead th.sum { white-space: normal; }
}

/* Vaste kosten: the legend and the switches for the sub lines */
.fixed-legend > span:not(.lg) { font-weight: 600; }
.row-switches { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: var(--text-2); font-size: 13px; }
.row-switches input { accent-color: var(--brand); }

/* Dashboard: a table view with its totals and export */
table.data tr.t-total td { font-weight: 700; border-top: 1px solid var(--border); background: var(--surface-2); }
table.data th.t-total, table.data td.t-total { font-weight: 700; }
.table-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; position: sticky; left: 0; }
.table-tools .btn { height: 26px; font-size: 12px; padding: 0 8px; }
/* Chat: the fold button of the dashboard column */
.chat-head .chat-fold { height: 28px; width: 28px; padding: 0; }

/* Extra: a chart card with its table instead (Tabel), the line under the top 10, clickable ages */
.xcharts .table-box { max-height: 300px; overflow: auto; }
.ic-note { margin: -8px 0 16px; color: var(--text-2); font-size: 12.5px; }
.xcharts .ic-note { margin: 6px 0 0; }
table.pl.xb td.drill:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.date-note { color: var(--text-2); font-size: 12.5px; margin: -6px 0 12px; }

/* Header: the number of findings on the Check button; Sync and Check in the Menu panel on a phone */
.nav-tools .m-only { display: none; }
@media (max-width: 860px) {
  .topbar .controls #refresh { display: none; }
  html.nav-compact .nav-tools .m-only { display: inline-flex; align-items: center; text-decoration: none; }
  /* the Check link is a button here, not a menu link */
  html.nav-compact .nav .nav-tools a.btn { padding: 0 12px; margin: 0; border: 1px solid var(--control-border); color: var(--text); }
  /* Rapportering: the PDF first, then the texts */
  .report-preview { order: -1; }
  /* a long choice (the report of Extra) stays within the screen */
  .filterbar label { max-width: 100%; min-width: 0; }
  .filterbar label > select.field { min-width: 0; max-width: 100%; flex: 1 1 auto; }
}
html.no-sync .sync-clone { display: none !important; }

/* Beheer > Instellingen */
.settings-card { margin: 16px 0; scroll-margin-top: 80px; }
.settings-card:focus { outline: none; }
.settings-form { display: grid; gap: 10px; max-width: 760px; }
.settings-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.settings-form legend { font-weight: 700; padding: 0; margin-bottom: 4px; }
.settings-form .row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.settings-form input[type="radio"] { accent-color: var(--brand); }

/* Switch (Normalisaties): a checkbox drawn as a slider, off by default */
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--text-2); white-space: nowrap; }
.switch input { appearance: none; -webkit-appearance: none; flex: none; width: 34px; height: 20px; margin: 0; border-radius: 999px;
  background: var(--border); position: relative; cursor: pointer; transition: background .15s; }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .15s; }
.switch input:checked { background: var(--brand); }
.switch input:checked::after { transform: translateX(14px); }
.switch input:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.switch:has(input:checked) { color: var(--text); font-weight: 600; }

/* Normalisaties */
.norm-levels { display: flex; flex-wrap: wrap; gap: 6px; }
.norm-pick { border: 1px solid var(--border); border-radius: 8px; padding: 10px; display: grid; gap: 8px; }
.norm-results { max-height: 300px; overflow: auto; border-top: 1px solid var(--border); }
.norm-results table { width: 100%; }
.norm-chosen { display: flex; flex-wrap: wrap; gap: 6px; }
.norm-chosen .tag button { border: 0; background: none; cursor: pointer; padding: 0 0 0 4px; color: inherit; font: inherit; }
.norm-off td { opacity: .55; }
.norm-form .row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; }
.norm-form { display: grid; gap: 14px; }

/* the k€ switch in the header when it is on */
.controls .btn[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand-line); }