/*
 * Huisstijl van Fuse Online, gedeeld door alle pagina's van de tool.
 * Kleuren en maten komen uit FuseSuiteOnline (fuse-theme.css, _AppRail.razor.css);
 * het donkere thema zit net als daar op data-bs-theme="dark" van <html>.
 * De basisregels voor elementen staan in :where(), zodat een pagina ze met één
 * class kan overschrijven.
 */
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@500;700&family=Mulish:wght@300;400;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0..1,0&display=block");

:root {
  --brand: #148adb;
  --accent: #0f6cbd;
  --bg: #eaf6fe;
  --panel: #ffffff;
  --soft: #f4fafe;
  --line: #dde6ee;
  --line-strong: #c8d2db;
  --txt: #1a2e35;
  --muted: #5f6b73;
  --link: #0f6cbd;
  --ok: #107c10;
  --err: #d13438;
  --warn: #a86400;
  --mat: #148adb;
  --mat-txt: #0f6cbd;
  --asb: #e39b00;
  --asb-txt: #8a5a00;
  --th-bg: #f4fafe;
  --th-txt: #0f6cbd;
  --th-line: #b7dcf5;
  --row-hover: #e8f3fb;
  --code: #f5f8fa;
  --shadow: 0 2px 8px rgba(0, 60, 100, .08);
  --pop-shadow: 0 12px 32px rgba(0, 30, 60, .18);
  --topbar-h: 3.25rem;
  --rail-w: 15rem;
  --radius: .625rem;
  --font-body: "Mulish", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-head: "Ubuntu", "Mulish", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme: light;
}
:root[data-bs-theme="dark"] {
  --bg: #1d1d1d;
  --panel: #252525;
  --soft: #2c3137;
  --line: #3a4047;
  --line-strong: #4b535c;
  --txt: #e6e8eb;
  --muted: #9aa3ad;
  --link: #7cc0ee;
  --ok: #4cc26a;
  --err: #ff6b6b;
  --warn: #fbbf24;
  --mat-txt: #7cc0ee;
  --asb: #fbbf24;
  --asb-txt: #fcd34d;
  --th-bg: #202a30;
  --th-txt: #7cc0ee;
  --th-line: #1f4661;
  --row-hover: #232f37;
  --code: #1b1f23;
  --shadow: none;
  --pop-shadow: 0 12px 32px rgba(0, 0, 0, .5);
  color-scheme: dark;
}
:root.rail-dicht { --rail-w: 3.5rem; }

* { box-sizing: border-box; }
* { scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; }
html { background: var(--bg); }
body {
  margin: 0; padding-top: var(--topbar-h);
  font-family: var(--font-body); font-size: 14px; line-height: 1.45;
  color: var(--txt); background: var(--bg);
}

/* Material Symbols; de vaste breedte houdt een nog niet geladen icoon op één letter. */
.ms {
  font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal;
  font-size: 1.25rem; line-height: 1; letter-spacing: normal; text-transform: none;
  display: inline-block; width: 1em; overflow: hidden; flex: none; white-space: nowrap;
  direction: ltr; -webkit-font-smoothing: antialiased; user-select: none;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
/* Gevuld icoon, zoals .is-filled in Fuse Online. */
.ms.gevuld { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* --- Kopbalk ------------------------------------------------------------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--topbar-h);
  display: flex; align-items: center; gap: .75rem; padding: 0 .9rem 0 1.1rem;
  background: var(--brand); color: #fff;
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .14), 0 0 .125rem rgba(0, 0, 0, .12);
}
.topbar .merk { display: flex; align-items: center; color: #fff; text-decoration: none; flex: none; }
.topbar .merk img { width: 84px; height: auto; display: block; position: relative; top: -2px; }
.topbar .merk span { margin-left: .55rem; color: rgba(255, 255, 255, .85); font-size: 1.15rem; font-weight: 300; white-space: nowrap; }
.topbar .titel { display: flex; align-items: center; gap: .45rem; margin-left: 2.25rem; font-size: 1.05rem; font-weight: 600; white-space: nowrap; min-width: 0; }
.topbar .titel .ms { font-size: 1.3rem; }
.topbar .rechts { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
.topknop {
  width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: #fff; cursor: pointer;
}
.topknop:hover, .topknop[aria-expanded="true"] { background: rgba(255, 255, 255, .15); }
.topknop:focus-visible { outline: 2px solid rgba(255, 255, 255, .65); outline-offset: 1px; }

/* --- Zijbalk ------------------------------------------------------------- */
.rail {
  position: fixed; top: var(--topbar-h); left: 0; bottom: 0; z-index: 90; width: var(--rail-w);
  display: flex; flex-direction: column; gap: .25rem; padding: .5rem .4rem;
  background: var(--panel); border-right: 1px solid var(--line);
  overflow-x: hidden; overflow-y: auto; transition: width .15s ease;
}
.rail-toggle {
  align-self: flex-end; width: 2rem; height: 1.75rem; margin-bottom: .25rem; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: .375rem; background: transparent; color: var(--muted); cursor: pointer;
}
.rail-toggle:hover { background: var(--bg); color: var(--brand); }
.rail-toggle .ms { font-size: 1.1rem; transition: transform .15s; }
.rail a {
  position: relative; display: flex; align-items: center; gap: .6rem; flex: none;
  height: 2.375rem; padding: 0 .55rem; border-radius: .375rem;
  color: var(--txt); text-decoration: none; font-size: .9rem; white-space: nowrap;
}
.rail a .ms { color: var(--brand); width: 1.4rem; text-align: center; }
.rail a .rail-naam { overflow: hidden; text-overflow: ellipsis; }
.rail a:hover { background: color-mix(in srgb, var(--brand) 8%, var(--panel)); }
.rail a.actief { background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); }
.rail a.actief:hover { background: color-mix(in srgb, var(--brand) 20%, transparent); }
.rail a.actief::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 1.25rem; border-radius: 2px; background: var(--brand);
}
.rail a:focus-visible, .rail-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.rail-dicht .rail { align-items: center; padding: .5rem 0; }
.rail-dicht .rail a { width: 2.5rem; padding: 0; justify-content: center; border-radius: .5rem; }
.rail-dicht .rail a .rail-naam { display: none; }
.rail-dicht .rail-toggle { align-self: center; }
.rail-dicht .rail-toggle .ms { transform: rotate(180deg); }

/* --- Inhoud -------------------------------------------------------------- */
main { margin-left: var(--rail-w); padding: 1.25rem 1.5rem 3rem; transition: margin-left .15s ease, padding .15s ease; }
/* Inhoud die niet schermbreed is, staat in het midden van de ruimte naast de zijbalk. */
main.smal { padding-left: max(1.5rem, calc((100% - var(--rail-w) - 1100px) / 2)); padding-right: max(1.5rem, calc((100% - var(--rail-w) - 1100px) / 2)); }
.pagehead { display: flex; align-items: baseline; gap: .75rem; margin: .1rem 0 1.1rem; }
.pagehead h1 { margin: 0; font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; white-space: nowrap; }
.pagehead p { margin: 0; color: var(--muted); font-size: .9rem; }
.pagehead::after { content: ""; flex: 1; min-width: 2rem; border-bottom: 1px solid var(--line); }

:where(main h2) { margin: 1.75rem 0 .6rem; font-size: 1.05rem; font-weight: 700; color: var(--link); }
:where(main > h2:first-child) { margin-top: 0; }
:where(a) { color: var(--link); }
:where(code) { background: var(--soft); border: 1px solid var(--line); border-radius: 4px; padding: 0 .3em; font-size: .9em; }
:where(kbd) { background: var(--soft); border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 4px; padding: 0 .35em; font-family: inherit; font-size: .9em; }

.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.1rem; margin-top: .75rem; box-shadow: var(--shadow);
}
.card > :first-child { margin-top: 0; }
.row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.field { display: flex; flex-direction: column; gap: .3rem; }
.field > label, .kopje {
  font-size: .6875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
.note { color: var(--muted); font-size: .8125rem; line-height: 1.6; max-width: 95ch; }
.note.warn { color: var(--warn); }
.spacer { flex: 1; }

/* --- Knoppen en velden ---------------------------------------------------- */
:where(button) {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .5rem .95rem; border: 1px solid var(--accent); border-radius: 6px;
  background: var(--accent); color: #fff;
  font: inherit; font-size: .875rem; font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer;
}
:where(button:hover:not(:disabled)) { background: color-mix(in srgb, var(--accent) 88%, #000); }
:where(button.secondary) { background: var(--panel); color: var(--txt); border-color: var(--line-strong); }
:where(button.secondary:hover:not(:disabled)) { background: var(--panel); border-color: var(--accent); color: var(--link); }
:where(button.ok) { background: var(--ok); border-color: var(--ok); }
:where(button.ok:hover:not(:disabled)) { background: color-mix(in srgb, var(--ok) 85%, #000); }
:where(button.danger) { background: var(--err); border-color: var(--err); }
:where(button.danger:hover:not(:disabled)) { background: color-mix(in srgb, var(--err) 85%, #000); }
:where(button.small) { padding: .35rem .7rem; font-size: .8125rem; }
:where(button:disabled) { opacity: .5; cursor: default; }
:where(button:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
:where(button) .ms { font-size: 1.1rem; }
:root[data-bs-theme="dark"] :where(button.ok) { color: #0b1f0b; }

:where(input:not([type=checkbox]):not([type=radio]), select, textarea) {
  min-height: 2.15rem; padding: .4rem .65rem;
  border: 1px solid var(--line-strong); border-radius: 6px;
  background: var(--panel); color: var(--txt); font: inherit; font-size: .875rem;
}
:where(input, select, textarea):focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
:where(input[type=number]) { width: 7rem; }
:where(input[type=checkbox], input[type=radio]) { accent-color: var(--accent); }
::placeholder { color: var(--muted); opacity: .75; }

/* Keuze uit twee of drie, zoals Week | Maand | Jaar in Fuse Online. */
.segment { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 6px; overflow: hidden; background: var(--panel); }
.segment label { position: relative; padding: .42rem .9rem; font-size: .8125rem; font-weight: 600; color: var(--txt); cursor: pointer; }
.segment label + label { border-left: 1px solid var(--line-strong); }
.segment input { position: absolute; opacity: 0; pointer-events: none; }
.segment label:has(input:checked) { background: var(--accent); color: #fff; }
.segment label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }

/* --- Tabellen, zoals de grids van Fuse Online ----------------------------- */
:where(main table) { width: 100%; border-collapse: collapse; margin-top: .75rem; font-size: .85rem; }
:where(main th) {
  padding: .55rem .75rem; text-align: left; white-space: nowrap;
  background: var(--th-bg); color: var(--th-txt); border-bottom: 1px solid var(--th-line);
  font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
:where(main td) { padding: .5rem .75rem; border-bottom: 1px solid var(--bg); }
:where(main tbody tr:hover) > td { background: var(--row-hover); }
:where(main tbody tr:hover) > td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
:where(td.num, th.num) { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- Meldingen en voortgang ---------------------------------------------- */
.status {
  display: none; margin: .9rem 0; padding: .65rem .9rem; border-radius: 6px;
  border: 1px solid var(--line); border-left-width: 4px; font-size: .875rem; white-space: pre-wrap;
}
.status.show { display: block; }
.status.ok { background: color-mix(in srgb, var(--ok) 9%, var(--panel)); border-color: color-mix(in srgb, var(--ok) 30%, transparent); border-left-color: var(--ok); }
.status.err { background: color-mix(in srgb, var(--err) 9%, var(--panel)); border-color: color-mix(in srgb, var(--err) 30%, transparent); border-left-color: var(--err); }
.status.info { background: color-mix(in srgb, var(--brand) 9%, var(--panel)); border-color: color-mix(in srgb, var(--brand) 30%, transparent); border-left-color: var(--brand); }

.statusline { display: flex; align-items: center; gap: .6rem; margin-top: .75rem; font-size: .875rem; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); flex: none; }
.dot.run { background: var(--warn); animation: fuse-pulse 1.2s infinite; }
.dot.ok { background: var(--ok); }
.dot.err { background: var(--err); }
@keyframes fuse-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.bar { display: inline-block; width: 64px; height: 7px; border-radius: 4px; background: var(--soft); border: 1px solid var(--line); overflow: hidden; vertical-align: middle; margin-left: .5rem; }
.bar > span { display: block; height: 100%; background: #48c434; }

.pill { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.pill.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.pill.mid { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.pill.bad { background: color-mix(in srgb, var(--err) 14%, transparent); color: var(--err); }
.pill.none { background: var(--soft); color: var(--muted); }

.log, pre {
  background: var(--code); border: 1px solid var(--line); border-radius: 8px; padding: .75rem .9rem;
  font-family: ui-monospace, Consolas, monospace; font-size: .78rem; line-height: 1.5; color: var(--txt); overflow: auto;
}
.empty { color: var(--muted); padding: 1.5rem; text-align: center; }

@media (max-width: 760px) {
  :root { --rail-w: 3.5rem; }
  .rail { align-items: center; padding: .5rem 0; }
  .rail a { width: 2.5rem; padding: 0; justify-content: center; }
  .rail a .rail-naam, .rail-toggle, .topbar .merk span, .topbar .titel { display: none; }
  main, main.smal { padding: 1rem; }
}