:root,
[data-theme="flow"] {
    --bg: #e7eef6;
    --paper: #ffffff;
    --paper-2: #f8fbff;
    --ink: #1c2b3a;
    --muted: #5c6b7c;
    --line: #d5e0ec;
    --green: #1d4ed8;
    --green-2: #1e40af;
    --brass: #7c3aed;
    --warn: #b45309;
    --warn-bg: #fff4e5;
    --bad: #dc2626;
    --bad-bg: #fee2e2;
    --ok: #15803d;
    --ok-bg: #dcfce7;
    --shadow: 0 14px 40px rgba(20, 42, 90, 0.08);
    --radius: 12px;
    --block-bg: #ffffff;
    --block-border: #e2eaf3;
    --block-gap: 1.15rem;
    --block-head-bg: #f4f8fc;
    --block-head-ink: #1e3a5f;
    --block-accent: #2563eb;
    --tone-0-bg: #ffffff;
    --tone-0-head: #f4f8fc;
    --tone-0-border: #3b82f6;
    --tone-1-bg: #ffffff;
    --tone-1-head: #f4f8fc;
    --tone-1-border: #14b8a6;
    --tone-2-bg: #ffffff;
    --tone-2-head: #f4f8fc;
    --tone-2-border: #7c3aed;
    --sidebar-top: #0f2a33;
    --sidebar-bottom: #142a6b;
    --display: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    color-scheme: light;
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.45;
}

[data-theme="rustig"] {
    --bg: #e6dfd2;
    --paper: #f7f3eb;
    --paper-2: #fffdf8;
    --ink: #1c1914;
    --muted: #5e584e;
    --line: #ddd4c4;
    --green: #1b3c30;
    --green-2: #245443;
    --brass: #8d5b2c;
    --warn: #8a4b10;
    --warn-bg: #f6e7d4;
    --bad: #8c2f2a;
    --bad-bg: #f6e4e1;
    --ok: #1d6840;
    --ok-bg: #e4f1e8;
    --shadow: 0 12px 40px rgba(48, 36, 18, 0.08);
    --radius: 14px;
    --block-bg: #f7f3eb;
    --block-border: #b7aa96;
    --block-gap: 1.15rem;
    --block-head-bg: #d5e4da;
    --block-head-ink: #1b3c30;
    --block-accent: #1b3c30;
    --tone-0-bg: #f7f3eb;
    --tone-0-head: #d5e4da;
    --tone-0-border: #1b3c30;
    --tone-1-bg: #f7f3eb;
    --tone-1-head: #d5e4da;
    --tone-1-border: #1b3c30;
    --tone-2-bg: #f7f3eb;
    --tone-2-head: #d5e4da;
    --tone-2-border: #1b3c30;
    --sidebar-top: #1b3c30;
    --sidebar-bottom: #14352a;
    --display: Georgia, "Iowan Old Style", Palatino, serif;
    color-scheme: light;
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.45;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    background-color: var(--bg);
    background-image:
        linear-gradient(rgba(148, 163, 184, 0.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.18) 1px, transparent 1px);
    background-size: 320px 320px;
    color: var(--ink);
    min-height: 100vh;
}
[data-theme="rustig"] body,
[data-theme="contrast"] body,
[data-theme="accent"] body {
    background:
        radial-gradient(1200px 400px at 10% -10%, rgba(141, 91, 44, 0.08), transparent 50%),
        var(--bg);
    background-size: auto;
}
body.auth-body {
    display: grid;
    place-items: center;
    padding: 1.25rem;
}
a { color: var(--green); }
a:hover { color: var(--brass); }
h1, h2, h3 {
    font-family: var(--display, Georgia, Palatino, serif);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 0.4rem;
}
h1 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
h2 { font-size: 1.35rem; }
p { margin: 0 0 0.8rem; }
.lead { color: var(--muted); max-width: 42rem; }
.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.72rem;
    color: var(--brass);
    margin: 0 0 0.35rem;
}
.release { color: var(--muted); margin-top: -0.2rem; }
.fine { color: var(--muted); font-size: 0.92rem; }
.skip {
    position: absolute;
    left: -999px;
    top: 0;
}
.skip:focus { left: 0.5rem; background: white; padding: 0.4rem 0.6rem; z-index: 5; }

.top {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.1rem;
    background: var(--green);
    color: #f4efe6;
    position: sticky;
    top: 0;
    z-index: 20;
}
.brand {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: inherit;
    text-decoration: none;
    font-family: Georgia, Palatino, serif;
    font-size: 1.25rem;
}
.brand em { font-style: normal; color: #e6c39a; font-size: 0.82rem; letter-spacing: 0.12em; margin-left: 0.15rem; }
.brand-dark { color: var(--green); margin-bottom: 1rem; }
.brand-dark em { color: var(--brass); }
.mark { width: 28px; height: 28px; }
.nav-toggle {
    margin-left: auto;
    background: transparent;
    color: inherit;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 999px;
    padding: 0.45rem 0.8rem;
    font: inherit;
}
header.top nav { display: none; gap: 0.2rem; flex-wrap: wrap; }
header.top nav.open, header.top nav:target { display: flex; }
nav a {
    color: #f4efe6;
    text-decoration: none;
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
}
nav a:hover { background: rgba(255,255,255,0.08); color: white; }
.who { display: none; align-items: center; gap: 0.7rem; margin-left: auto; }
.who-tenant { color: #e6c39a; font-size: 0.85rem; }
.who-name { font-size: 0.95rem; }
.who form { margin: 0; }
.top .btn.quiet {
    background: transparent;
    color: #f4efe6;
    border-color: rgba(255,255,255,0.35);
}

main { padding: 1.25rem clamp(1rem, 3vw, 2.2rem) 3rem; max-width: 1080px; margin: 0 auto; }
footer {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    color: var(--muted);
    font-size: 0.85rem;
    padding: 1rem;
}
.auth-card {
    width: min(440px, 100%);
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 1.4rem 1.3rem 1rem;
    box-shadow: var(--shadow);
}
.hero { margin-bottom: 1.2rem; }
.card, form.card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1rem 0.4rem;
    margin: 1rem 0;
}
label, fieldset { display: block; margin: 0 0 0.85rem; }
fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 0.7rem 0.8rem 0.2rem; }
legend { padding: 0 0.3rem; font-family: Georgia, serif; }
label { font-size: 0.92rem; color: var(--muted); }
input, select, textarea {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.65rem 0.7rem;
    font: inherit;
    color: var(--ink);
    background: var(--paper-2);
    border: 1px solid #cfc5b4;
    border-radius: 10px;
}
textarea { min-height: 6rem; resize: vertical; }
input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--green);
    border-color: var(--green);
}
label.check {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--ink);
    min-height: 44px;
}
label.check input { width: 1.15rem; height: 1.15rem; margin: 0; }
.btn, button.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--green);
    background: var(--green);
    color: #f7f3eb;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}
.btn:hover { background: var(--green-2); color: white; }
.btn.quiet, button.btn.quiet {
    background: transparent;
    color: var(--green);
}
.actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.8rem 0 1.5rem; }
.banner { border-radius: 12px; padding: 0.75rem 0.85rem; }
.banner.bad { background: var(--bad-bg); color: var(--bad); }
.banner.ok { background: var(--ok-bg); color: var(--ok); }
.banner.warn { background: var(--warn-bg); color: var(--warn); }
.secret {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    color: var(--ink);
    word-break: break-all;
}
.qr { width: min(220px, 70%); height: auto; display: block; margin: 0.4rem auto 1rem; background: white; padding: 0.4rem; border-radius: 8px; }
.empty {
    padding: 1rem;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    color: var(--muted);
}
.kv { display: grid; gap: 0.55rem; margin: 0 0 1rem; }
.kv div { display: grid; grid-template-columns: 7rem 1fr; gap: 0.6rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
table.stack { width: 100%; border-collapse: collapse; margin: 1rem 0; }
table.stack th { text-align: left; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
table.stack th, table.stack td { padding: 0.55rem 0.4rem; border-bottom: 1px solid var(--line); vertical-align: top; }

.panel-toggle { position: absolute; opacity: 0; pointer-events: none; }
.panel {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(440px, 100%);
    transform: translateX(104%);
    transition: transform 0.2s ease;
    z-index: 30;
}
.panel-toggle:checked ~ .panel { transform: translateX(0); }
.panel-toggle:focus-visible + .btn { outline: 2px solid var(--brass); }
.panel-card {
    height: 100%;
    overflow: auto;
    background: var(--paper-2);
    border-left: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: 1rem 1rem 2rem;
}
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.close { color: var(--muted); cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; }

.save-status { min-height: 1.2rem; font-size: 0.85rem; color: var(--muted); }
.save-status.bad { color: var(--bad); }
.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
    background: #efe8dc;
    color: var(--ink);
    font-size: 0.82rem;
}
.pill i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--muted); display: inline-block; }
.pill.done i { background: var(--ok); }
.pill.attention i { background: var(--warn); }
.pill.gone i { background: var(--bad); }
.pill.progress i { background: var(--brass); }
.row { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: end; }
.grow { flex: 1 1 180px; }
.money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.hidden { display: none !important; }
.page-head { display: flex; justify-content: space-between; gap: 1rem; align-items: end; flex-wrap: wrap; margin-bottom: 0.8rem; }
.filters { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: end; margin: 1rem 0; }
.filters label { margin: 0; flex: 1 1 160px; }
.filters .check { flex: 0 0 auto; }
details.fold { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; margin: 0 0 0.6rem; padding: 0.2rem 0.85rem 0.4rem; }
details.fold summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
details summary { cursor: pointer; }
details summary h2 { display: inline; }
.logboek textarea { min-height: 4.5rem; }
img.preview { max-width: 12rem; height: auto; display: block; border: 1px solid var(--line); }
ul.history { list-style: none; padding: 0; margin: 0; }
ul.history li { padding: 0.45rem 0; border-bottom: 1px solid var(--line); display: grid; gap: 0.15rem; }
form.bedrijf .alleen-prive { display: none; }
form:not(.bedrijf) .alleen-bedrijf { display: none; }

@media (min-width: 900px) {
    .nav-toggle { display: none; }
    header.top nav { display: flex; }
    header.top .who { display: flex; }
}
@media (max-width: 899px) {
    .top { flex-wrap: wrap; }
    nav.open {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding-bottom: 0.4rem;
    }
    .who { display: flex; width: 100%; justify-content: space-between; }
    table.stack thead { display: none; }
    table.stack tr {
        display: block;
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: 12px;
        margin: 0 0 0.7rem;
        padding: 0.3rem 0.6rem;
    }
    table.stack td {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        border: 0;
        padding: 0.4rem 0;
    }
    table.stack td::before {
        content: attr(data-label);
        color: var(--muted);
        flex: 0 0 38%;
    }
}
.demo-banner {
    margin: 0;
    padding: 0.35rem 0.8rem;
    background: #8d5b2c;
    color: #fffdf8;
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.18em;
}
.auth-card .demo-banner { margin: -0.2rem 0 0.8rem; border-radius: 8px; }
.day-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem;
    margin: 0 0 0.9rem;
}
.day-card h2 { font-size: 1.45rem; }
.day-card .btn, .day-card input, .day-card textarea, .day-card select { min-height: 44px; font-size: 1rem; }
.route { display: inline-flex; min-height: 44px; align-items: center; }

@media (prefers-reduced-motion: reduce) {
    .panel { transition: none; }
}

[data-theme="contrast"] {
    --bg: #cfc6b8;
    --paper: #fbfaf6;
    --paper-2: #ffffff;
    --line: #c9bfb0;
    --block-bg: #fbfaf6;
    --block-border: #1b3c30;
    --block-gap: 1.5rem;
    --block-head-bg: #14352a;
    --block-head-ink: #f4efe6;
    --block-accent: #14352a;
    --tone-0-bg: #fbfaf6;
    --tone-0-head: #14352a;
    --tone-0-border: #14352a;
    --tone-1-bg: #fbfaf6;
    --tone-1-head: #14352a;
    --tone-1-border: #14352a;
    --tone-2-bg: #fbfaf6;
    --tone-2-head: #14352a;
    --tone-2-border: #14352a;
}

[data-theme="accent"] {
    --bg: #e3ebe4;
    --paper: #f7f3eb;
    --paper-2: #fffdf8;
    --block-bg: #f4f7f4;
    --block-border: #c5d0c6;
    --block-gap: 1.25rem;
    --block-head-bg: #d7e6dc;
    --block-head-ink: #1c1914;
    --block-accent: #2f6a4f;
    --tone-0-bg: #e8f2eb;
    --tone-0-head: #d3e6d8;
    --tone-0-border: #2f6a4f;
    --tone-1-bg: #e7f6f1;
    --tone-1-head: #d2eee4;
    --tone-1-border: #1d6840;
    --tone-2-bg: #f3efe6;
    --tone-2-head: #e6dfd2;
    --tone-2-border: #6d5a3a;
}

.block {
    background: var(--tone-bg, var(--block-bg));
    border: 1px solid var(--block-border);
    border-left: 5px solid var(--tone-border, var(--block-accent));
    border-radius: var(--radius);
    margin: 0 0 var(--block-gap);
    overflow: hidden;
}
.block.tone-0 { --tone-bg: var(--tone-0-bg); --tone-head: var(--tone-0-head); --tone-border: var(--tone-0-border); }
.block.tone-1 { --tone-bg: var(--tone-1-bg); --tone-head: var(--tone-1-head); --tone-border: var(--tone-1-border); }
.block.tone-2 { --tone-bg: var(--tone-2-bg); --tone-head: var(--tone-2-head); --tone-border: var(--tone-2-border); }
.block-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.7rem 0.9rem;
    background: var(--tone-head, var(--block-head-bg));
    color: var(--block-head-ink);
    border-bottom: 1px solid var(--block-border);
}
.block-head h2, .block-head h3 { margin: 0; color: inherit; flex: 1 1 auto; }
.block-body { padding: 0.85rem 0.9rem 0.35rem; background: var(--tone-bg, var(--block-bg)); color: var(--ink); }
.block-icon { width: 1.4rem; height: 1.4rem; flex: 0 0 auto; }
.amount-brief { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 0.92rem; }
.block-head .pill { background: #efe8dc; color: var(--ink); }

.theme-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin: 0; }
.theme-choices {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 0.55rem;
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}
.theme-choices legend {
    padding: 0 0.35rem 0 0;
    font-family: inherit;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #e6c39a;
}
.theme-option {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 44px;
    margin: 0;
    color: #f4efe6;
    font-size: 0.88rem;
}
.theme-option input { width: 1.15rem; height: 1.15rem; margin: 0; flex: 0 0 auto; }
html.js .theme-submit {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
}

.search-wrap { position: relative; display: block; }
.search-wrap input { padding-right: 3rem; }
.clear-search {
    position: absolute;
    right: 0.2rem;
    bottom: 0.2rem;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--paper-2);
    color: var(--ink);
    font: inherit;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}
.clear-search[hidden] { display: none; }

@media (max-width: 899px) {
    .who { flex-wrap: wrap; align-items: flex-start; }
    .theme-form, .theme-choices { width: 100%; }
    .amount-brief { margin-left: 0; width: 100%; }
    .block-head h2, .block-head h3 { flex-basis: calc(100% - 2.2rem); }
}

.order-line {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    margin: 0 0 0.75rem;
}
.order-line.tone-normal { color: var(--ink); }
.order-line.tone-late { color: var(--bad); }
.order-line.tone-muted { color: var(--muted); }
.order-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.1rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}
.order-legend li::before {
    content: "";
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    margin-right: 0.35rem;
    border-radius: 999px;
    background: currentColor;
    vertical-align: 0.05rem;
}
.check-line { display: flex; gap: 0.7rem; align-items: flex-start; }
.check-line input { width: 1.25rem; height: 1.25rem; margin-top: 0.2rem; }
.suggest { position: relative; }
.suggest-list {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0;
    position: absolute;
    z-index: 6;
    left: 0;
    right: 0;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 10px;
    max-height: 16rem;
    overflow: auto;
    box-shadow: var(--shadow);
}
.suggest-list button {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    font: inherit;
    color: var(--ink);
    padding: 0.55rem 0.75rem;
    min-height: 44px;
    cursor: pointer;
}
.suggest-list mark {
    background: var(--warn-bg);
    color: inherit;
    font-weight: 700;
}
.suggest-meta { color: var(--muted); }
.suggest-hint { padding: 0.35rem 0.15rem; }
.suggest-list[hidden] { display: none; }

[data-theme="contrast"],
[data-theme="accent"] {
    --display: Georgia, "Iowan Old Style", Palatino, serif;
    --sidebar-top: #14352a;
    --sidebar-bottom: #0f241c;
}
[data-theme="warehouse"] {
    color-scheme: dark;
    --bg: #0e1520;
    --paper: #172033;
    --paper-2: #1c2740;
    --ink: #e8eef8;
    --muted: #9aa8bd;
    --line: #2c3c56;
    --green: #7dd3fc;
    --green-2: #38bdf8;
    --brass: #c4b5fd;
    --warn: #fdba74;
    --warn-bg: #3b2a16;
    --bad: #fca5a5;
    --bad-bg: #3f1d24;
    --ok: #86efac;
    --ok-bg: #143024;
    --shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    --radius: 12px;
    --block-bg: #172033;
    --block-border: #2c3c56;
    --block-head-bg: #1c2740;
    --block-head-ink: #e8eef8;
    --block-accent: #38bdf8;
    --tone-0-bg: #172033;
    --tone-0-head: #1c2740;
    --tone-0-border: #38bdf8;
    --tone-1-bg: #172033;
    --tone-1-head: #1c2740;
    --tone-1-border: #2dd4bf;
    --tone-2-bg: #172033;
    --tone-2-head: #1c2740;
    --tone-2-border: #c4b5fd;
    --sidebar-top: #070d16;
    --sidebar-bottom: #111827;
    --display: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
[data-theme="warehouse"] body { background-image: none; }

.shell { display: flex; min-height: 100vh; align-items: stretch; }
.canvas { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.canvas main { width: 100%; }
.bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1.1rem;
    background: rgba(255, 255, 255, 0.72);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 15;
}
.bar .who-role { color: var(--muted); font-size: 0.85rem; }
.bar form { margin: 0 0 0 auto; }
.sidebar {
    width: 248px;
    flex: 0 0 248px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: auto;
    color: #e8eefc;
    background: linear-gradient(180deg, #0f3d45 0%, #12315f 42%, #142a6b 100%);
    box-shadow: inset 0 3px 0 0 transparent;
    border-top: 3px solid transparent;
    border-image: linear-gradient(90deg, #f59e0b, #a855f7) 1;
    display: flex;
    flex-direction: column;
    padding: 0.85rem 0.7rem 1.2rem;
    z-index: 25;
}
.side-brand { color: inherit; text-decoration: none; padding: 0.35rem 0.45rem 0.8rem; }
.side-brand em { color: #9ad7e6; }
.collapse-toggle, .nav-toggle {
    background: transparent;
    color: inherit;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    min-height: 36px;
    min-width: 36px;
}
.collapse-toggle { align-self: flex-end; margin: 0 0.3rem 0.6rem; color: #e8eefc; }
.nav-toggle { color: var(--ink); border-color: var(--line); background: var(--paper); }
.side-nav ul { list-style: none; margin: 0; padding: 0; }
.side-link, .nav-sub a, .nav-sub .is-soon {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    margin-bottom: 0.28rem;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    min-height: 42px;
    padding: 0.35rem 0.65rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #e7eefb;
    text-decoration: none;
    font: inherit;
    text-align: left;
    position: relative;
}
.side-link.is-active, .nav-sub a.is-active {
    background: linear-gradient(90deg, rgba(45, 212, 191, 0.28), rgba(59, 130, 246, 0.22));
    border-color: rgba(45, 212, 191, 0.55);
    box-shadow: inset 3px 0 0 #5eead4;
}
.side-link:hover, .nav-sub a:hover { background: rgba(255, 255, 255, 0.08); color: white; }
.side-link.is-soon, .nav-sub .is-soon { color: rgba(232, 238, 252, 0.45); cursor: default; }
.nav-ico { width: 20px; height: 20px; flex: 0 0 20px; }
.nav-badge {
    margin-left: auto;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: #ef4444;
    color: white;
    font-size: 0.72rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.nav-badge.calm { background: rgba(255, 255, 255, 0.18); }
.nav-soon {
    margin-left: auto;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.nav-sub { display: none; margin: 0.15rem 0 0.4rem 1.7rem; }
.nav-section.is-open .nav-sub { display: block; }
.sidebar.is-collapsed { width: 76px; flex-basis: 76px; }
.sidebar.is-collapsed .nav-label,
.sidebar.is-collapsed .nav-soon,
.sidebar.is-collapsed .nav-sub,
.sidebar.is-collapsed .nav-badge { display: none; }
.sidebar.is-collapsed .side-link { justify-content: center; padding-left: 0; padding-right: 0; }
.sidebar.is-collapsed .collapse-toggle svg { transform: scaleX(-1); }

[data-theme="flow"] .block,
[data-theme="flow"] .card,
[data-theme="flow"] .kpi,
[data-theme="flow"] .order-line {
    position: relative;
    background: var(--paper);
    border: 0;
    box-shadow: var(--shadow);
}
[data-theme="flow"] .block::before,
[data-theme="flow"] .kpi::before,
[data-theme="flow"] .card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #3b82f6, #a855f7);
}
[data-theme="flow"] .tone-1::before,
[data-theme="flow"] .kpi.stripe-teal::before { background: linear-gradient(180deg, #14b8a6, #2563eb); }
[data-theme="flow"] .tone-2::before,
[data-theme="flow"] .kpi.stripe-violet::before { background: linear-gradient(180deg, #6366f1, #d946ef); }
[data-theme="flow"] main { max-width: 1180px; }
[data-theme="flow"] main:has(.order-sheet),
[data-theme="flow"] main:has(.week-plan) { max-width: none; }

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
    margin: 0 0 1.1rem;
}
.kpi {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.15rem 0.5rem;
    padding: 0.9rem 0.95rem 0.7rem 1.05rem;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
}
.kpi-icon {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #1d4ed8;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.16), rgba(168, 85, 247, 0.16));
}
.kpi-value { font-size: 1.8rem; font-weight: 650; line-height: 1; }
.kpi-label { color: var(--muted); font-size: 0.92rem; }
.kpi-sub { grid-column: 1 / -1; color: var(--ok); font-size: 0.82rem; }
.spark { grid-column: 1 / -1; width: 100%; height: 28px; }
.stripe-teal .spark-from { stop-color: #14b8a6; }
.stripe-teal .spark-to { stop-color: #3b82f6; }
.stripe-blue .spark-from { stop-color: #2563eb; }
.stripe-blue .spark-to { stop-color: #7c3aed; }
.stripe-violet .spark-from { stop-color: #6366f1; }
.stripe-violet .spark-to { stop-color: #d946ef; }
.dash-grid { display: grid; grid-template-columns: 1.3fr 0.9fr; gap: 0.9rem; align-items: start; }
.donut-wrap { display: flex; gap: 1rem; align-items: center; }
.donut { width: 140px; height: 140px; flex: 0 0 auto; }
.donut-track { stroke: #e2e8f0; }
.donut text { fill: var(--ink); font-size: 7px; font-weight: 700; }
.donut-seg.seg-0, .swatch.seg-0 { stroke: #14b8a6; background: #14b8a6; }
.donut-seg.seg-1, .swatch.seg-1 { stroke: #2563eb; background: #2563eb; }
.donut-seg.seg-2, .swatch.seg-2 { stroke: #f59e0b; background: #f59e0b; }
.donut-seg.seg-3, .swatch.seg-3 { stroke: #22c55e; background: #22c55e; }
.donut-seg.seg-4, .swatch.seg-4 { stroke: #a855f7; background: #a855f7; }
.donut-seg.seg-5, .swatch.seg-5 { stroke: #06b6d4; background: #06b6d4; }
.donut-seg.seg-6, .swatch.seg-6 { stroke: #64748b; background: #64748b; }
.donut-seg.seg-7, .swatch.seg-7 { stroke: #4f46e5; background: #4f46e5; }
.donut-seg.seg-8, .swatch.seg-8 { stroke: #94a3b8; background: #94a3b8; }
.donut-legend { list-style: none; margin: 0; padding: 0; }
.donut-legend a { display: flex; gap: 0.4rem; align-items: center; color: inherit; text-decoration: none; min-height: 28px; }
.swatch { width: 0.7rem; height: 0.7rem; border-radius: 999px; display: inline-block; }
.theme-list { border: 0; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.theme-card {
    display: flex;
    gap: 0.7rem;
    align-items: center;
    min-height: 48px;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--paper);
}
.theme-card.is-soon { color: var(--muted); }
.theme-page .nav-soon { margin-left: 0.5rem; }

@media (max-width: 980px) {
    .kpi-grid, .dash-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 800px) {
    .sidebar {
        position: fixed;
        left: 0;
        transform: translateX(-105%);
        width: min(280px, 86vw);
        flex-basis: auto;
        box-shadow: var(--shadow);
    }
    .sidebar.is-open { transform: none; }
    .collapse-toggle { display: none; }
    .kpi-grid, .dash-grid { grid-template-columns: 1fr; }
    .bar { flex-wrap: wrap; }
}

.field-status { display: inline-block; margin-left: 0.4rem; color: var(--ok); font-size: 0.82rem; }
.field-status.bad { color: var(--bad); }
.order-knoppen { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.8rem; }
.order-sheet { overflow-x: auto; }
.order-grid {
    display: grid;
    grid-template-columns: 1.75rem minmax(7.5rem, 1fr) minmax(8rem, 1.15fr) minmax(6.5rem, 0.9fr) minmax(16rem, 2.6fr) 4.2rem 6.8rem 6.8rem 3.2rem minmax(7.5rem, 1fr);
    column-gap: 0.35rem;
    align-items: center;
    height: 34px;
    min-width: 1180px;
}
.order-sheet input[type="hidden"] { display: none; }
.order-line form { display: contents; }
.order-head { font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); height: 28px; }
.order-head a { color: inherit; text-decoration: none; }
.order-row, .order-line.order-row {
    margin: 0 0 2px;
    padding: 0 0.2rem 0 0;
    border: 1px solid #e4e0da;
    border-radius: 2px;
    background: transparent;
    box-shadow: inset 5px 0 10px -8px rgba(28, 25, 20, 0.45);
    font-size: 0.86rem;
    color: #1c1914;
}
.order-line { padding: 0; margin: 0 0 2px; border: 0; background: transparent; box-shadow: none; }
.order-line.tone-late { color: #b4545a; box-shadow: inset 6px 0 12px -7px rgba(180, 84, 90, 0.85); }
.order-line.tone-normal { color: #1c1914; }
.order-line.tone-muted { color: #8a8680; box-shadow: inset 6px 0 12px -7px rgba(138, 134, 128, 0.7); }
[data-theme="flow"] .order-line,
[data-theme="flow"] .order-row { box-shadow: inset 6px 0 12px -7px rgba(28, 25, 20, 0.35); background: transparent; border: 1px solid #e6e2dc; }
[data-theme="flow"] .order-line::before,
[data-theme="flow"] .order-row::before { display: none; }
[data-theme="flow"] .order-line.tone-late { color: #b4545a; box-shadow: inset 6px 0 12px -7px rgba(180, 84, 90, 0.9); }
[data-theme="flow"] .order-line.tone-muted { color: #8a8680; }
.order-row input, .order-row select, .order-line input, .order-line select {
    min-height: 0;
    height: 28px;
    margin: 0;
    padding: 0 0.2rem;
    border: 1px solid transparent;
    background: transparent;
    color: inherit;
    font: inherit;
    width: 100%;
    box-shadow: none;
}
.order-row input:hover, .order-row input:focus,
.order-row select:hover, .order-row select:focus,
.order-line input:hover, .order-line input:focus,
.order-line select:hover, .order-line select:focus {
    border-color: #cfc8be;
    background: #fff;
}
.pick-cell, .stock-cell { display: flex; align-items: center; justify-content: center; height: 32px; }
.pick-cell input, .stock-cell input { width: 0.95rem; height: 0.95rem; margin: 0; }
.who-cell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.order-group { font-size: 0.95rem; margin: 0.7rem 0 0.25rem; }
.agenda-shell { display: grid; grid-template-columns: 240px 1fr; gap: 1rem; align-items: start; }
.agenda-pane { display: grid; gap: 0.45rem; }
.agenda-pane .btn, .agenda-pane .is-soon { text-align: left; }
.agenda { display: grid; gap: 0.45rem; }
.agenda-week, .agenda-dag { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.agenda-dag { grid-template-columns: 1fr; }
.agenda-maand { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.agenda-day { background: var(--paper); border-radius: 12px; padding: 0.45rem; box-shadow: var(--shadow); min-height: 8rem; }
.agenda-day.is-today { outline: 2px solid #3b82f6; }
.agenda-day.is-outside { opacity: 0.45; }
.agenda-day h2 { font-size: 0.82rem; }
.agenda-chip, .agenda-block { display: block; margin: 0.2rem 0; padding: 0.15rem 0.35rem; border-radius: 6px; text-decoration: none; font-size: 0.78rem; }
.agenda-chip.tone-taak, .agenda-block { background: #e0e7ff; color: #1e3a8a; }
.agenda-chip.tone-plaatsing { background: #ccfbf1; color: #115e59; }
.week-plan {
    display: grid;
    grid-template-columns: 2.6rem repeat(7, minmax(0, 1fr));
    width: 100%;
    background: var(--paper);
    border-radius: 12px;
    overflow: hidden;
}
.week-name, .week-allday, .week-slot, .week-gutter, .week-corner { min-width: 0; }
.week-name { font-size: 0.82rem; margin: 0; padding: 0.45rem 0.35rem; }
.week-name.is-today { color: #1d4ed8; }
.week-allday { min-height: 2.4rem; padding: 0.15rem; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.week-gutter, .week-slot { height: 36px; border-top: 1px solid var(--line); }
.week-slot { position: relative; border-left: 1px solid var(--line); }
.week-gutter { color: var(--muted); font-size: 0.72rem; padding-right: 0.25rem; text-align: right; }
.agenda-block { position: absolute; left: 2px; right: 2px; z-index: 1; overflow: hidden; }
.o-0 { top: 1px; } .o-15 { top: 10px; } .o-30 { top: 19px; } .o-45 { top: 28px; }
.l-15 { height: 16px; } .l-30 { height: 18px; } .l-45 { height: 27px; } .l-60 { height: 34px; }
.l-75 { height: 45px; } .l-90 { height: 54px; } .l-105 { height: 63px; } .l-120 { height: 72px; }
.l-135 { height: 81px; } .l-150 { height: 90px; } .l-165 { height: 99px; } .l-180 { height: 108px; }
.project-tree { margin-left: 0.85rem; }
.project-number { display: block; font-size: 1rem; color: #f8fbff; padding: 0.35rem 0.45rem 0.15rem; }
.project-pages { list-style: none; margin: 0 0 0.35rem 1.1rem; padding: 0; }
.project-pages a, .project-pages .is-soon { padding-left: 0.85rem; }