/* ==========================================================================
   More Connect Screens — design system

   Same visual language as moreconnect.be: DM Sans, #D0006F on #141414/white,
   a single 4px radius for everything except pill-shaped buttons. Written as
   plain CSS on purpose — the portal ships with no build step, so a fix can be
   made straight on the server if it ever has to be.
   ========================================================================== */

/* ------------------------------------------------------------------ fonts */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/dm-sans-latin-400-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/dm-sans-latin-ext-400-normal.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/dm-sans-latin-500-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/dm-sans-latin-ext-500-normal.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/dm-sans-latin-700-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/dm-sans-latin-ext-700-normal.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('../fonts/dm-sans-latin-900-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('../fonts/dm-sans-latin-ext-900-normal.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ----------------------------------------------------------------- tokens */
:root {
    --pink: #D0006F;
    --pink-light: #FF3399;
    --pink-dark: #9A0052;
    --pink-soft: rgba(208, 0, 111, 0.08);
    --pink-soft-strong: rgba(208, 0, 111, 0.14);

    --ink: #141414;
    --ink-soft: #1E1E1E;

    --n-50: #FAFAFA;
    --n-100: #F5F5F5;
    --n-150: #EFEFEF;
    --n-200: #E5E5E5;
    --n-300: #D4D4D4;
    --n-400: #A3A3A3;
    --n-500: #737373;
    --n-600: #525252;
    --n-700: #404040;

    --green: #16794B;
    --green-bg: #E8F6EF;
    --amber: #92620B;
    --amber-bg: #FCF3E3;
    --red: #B4231F;
    --red-bg: #FCECEB;
    --blue: #1F5FA8;
    --blue-bg: #EAF2FB;

    --radius: 4px;
    --header-h: 76px;
    --sidebar-w: 248px;

    --shadow-sm: 0 1px 2px rgba(20, 20, 20, 0.05);
    --shadow: 0 4px 16px rgba(20, 20, 20, 0.07);
    --shadow-lg: 0 20px 48px rgba(20, 20, 20, 0.14);

    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--n-50);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 900; letter-spacing: -0.015em; }
h1 { font-size: 30px; }
h2 { font-size: 21px; }
h3 { font-size: 17px; font-weight: 700; }
h4 { font-size: 15px; font-weight: 700; }
p  { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--pink); }

img, svg, video { max-width: 100%; display: block; }

hr { border: 0; border-top: 1px solid var(--n-150); margin: 24px 0; }

code, pre, .mono {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.92em;
}

:focus-visible {
    outline: 2px solid var(--pink);
    outline-offset: 2px;
    border-radius: var(--radius);
}

[hidden] { display: none !important; }

/* --------------------------------------------------------------- utilities */
.muted { color: var(--n-500); }
.tiny { font-size: 12px; }
.small { font-size: 13px; }
.strong { font-weight: 700; }
.black { font-weight: 900; }
.pink { color: var(--pink); }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uppercase { text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; font-weight: 700; }
.full { width: 100%; }
.mt-0 { margin-top: 0; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mb-0 { margin-bottom: 0; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }

.row { display: flex; gap: 12px; align-items: center; }
.row-top { display: flex; gap: 12px; align-items: flex-start; }
.row-wrap { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.between { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.spacer { flex: 1 1 auto; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack-sm { display: flex; flex-direction: column; gap: 6px; }
.stack-lg { display: flex; flex-direction: column; gap: 24px; }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-items: start; }
.grid-auto-sm { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); align-items: start; }

/* Two-column page layouts: a wide main column with a narrower side column.
   Declared here rather than inline so they actually collapse on a phone. */
.grid-main  { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.grid-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.grid--top  { align-items: start; }

/* ------------------------------------------------------------------ shell */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 40;
    background: #fff;
    border-bottom: 1px solid var(--n-100);
    height: var(--header-h);
    display: flex;
    align-items: center;
}

.site-header__inner {
    width: 100%;
    /* Geen eigen breedte meer: het woordmerk hoort links op één lijn met de
       items van het menu eronder, niet gecentreerd op een eigen maat. Links
       is dat de padding van de zijbalk plus die van een menu-item. */
    padding: 0 24px 0 calc(14px + 12px);
    display: flex;
    align-items: center;
    gap: 16px;
}

.site-header__logo img { height: 44px; width: auto; }

.header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 0;
    background: transparent;
    color: var(--n-500);
    cursor: pointer;
    position: relative;
    transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
/* Zonder deze maat rendert de SVG op zijn eigen formaat en staan er logge
   iconen in de kopbalk, veel zwaarder dan die in het menu ernaast. */
.icon-btn svg { width: 19px; height: 19px; stroke-width: 1.9; }
.icon-btn:hover { background: var(--pink-soft); color: var(--pink); }

.icon-btn__dot {
    position: absolute;
    top: 2px;
    right: 2px;
    /* border-box, anders telt de witte rand bij de breedte op en dekt de
       badge het icoon eronder helemaal af. */
    box-sizing: border-box;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--pink);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    line-height: 14px;
    text-align: center;
}

.app-shell { display: flex; min-height: 100vh; padding-top: var(--header-h); }

.sidebar {
    width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    background: #fff;
    border-right: 1px solid var(--n-100);
    position: sticky;
    top: var(--header-h);
    height: calc(100vh - var(--header-h));
    overflow-y: auto;
    padding: 20px 14px 28px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.sidebar__group-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--n-400);
    padding: 0 12px 8px;
}

.sidebar__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 500;
    color: var(--n-600);
    transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.sidebar__link:hover { background: var(--n-50); color: var(--ink); }
.sidebar__link.is-active { background: var(--pink-soft); color: var(--pink); font-weight: 700; }
.sidebar__link svg { width: 18px; height: 18px; flex: 0 0 18px; stroke-width: 1.7; }

.sidebar__count {
    margin-left: auto;
    background: var(--pink);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    padding: 1px 7px;
}
.sidebar__link.is-active .sidebar__count { background: var(--pink); }

.app-main { flex: 1 1 auto; min-width: 0; }

.app-content {
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 28px 64px;
}

.page-head { margin-bottom: 24px; }
.page-head h1 { margin-bottom: 4px; }
.page-head__sub { color: var(--n-500); font-size: 14px; }

.breadcrumbs { font-size: 13px; color: var(--n-500); margin-bottom: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.breadcrumbs a:hover { color: var(--pink); }
.breadcrumbs span { color: var(--n-300); }

/* ------------------------------------------------------------------ cards */
.card {
    background: #fff;
    border: 1px solid var(--n-150);
    border-radius: var(--radius);
    padding: 20px;
}
.card--flush { padding: 0; overflow: hidden; }
.card--dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.card--dark .muted { color: rgba(255, 255, 255, 0.6); }

.card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.card__head h2, .card__head h3 { margin: 0; }
.card__head-sub { color: var(--n-500); font-size: 13px; margin-top: 2px; }

.card--flush .card__head { padding: 18px 20px 0; margin-bottom: 14px; }

.section-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--n-400);
    margin-bottom: 10px;
}

/* ------------------------------------------------------------------ stats */
.stat-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.stat {
    background: #fff;
    border: 1px solid var(--n-150);
    border-radius: var(--radius);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
a.stat:hover { border-color: var(--pink); box-shadow: var(--shadow-sm); color: inherit; }

.stat__label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--n-400); }
.stat__value { font-size: 30px; font-weight: 900; line-height: 1.1; letter-spacing: -0.02em; }
.stat__meta { font-size: 13px; color: var(--n-500); }
.stat--accent { background: var(--ink); border-color: var(--ink); color: #fff; }
.stat--accent .stat__label { color: rgba(255, 255, 255, 0.55); }
.stat--accent .stat__meta { color: rgba(255, 255, 255, 0.7); }
.stat--pink { background: var(--pink); border-color: var(--pink); color: #fff; }
.stat--pink .stat__label { color: rgba(255, 255, 255, 0.7); }
.stat--pink .stat__meta { color: rgba(255, 255, 255, 0.85); }

/* ---------------------------------------------------------------- buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 10px 20px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease), transform 0.12s var(--ease);
    background: var(--pink);
    color: #fff;
    white-space: nowrap;
}
.btn:hover { background: var(--pink-dark); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 17px; height: 17px; stroke-width: 1.9; }

.btn--ghost { background: #fff; color: var(--ink); border-color: var(--n-200); }
.btn--ghost:hover { background: #fff; color: var(--pink); border-color: var(--pink); }

.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #000; color: #fff; }

.btn--danger { background: #fff; color: var(--red); border-color: rgba(180, 35, 31, 0.3); }
.btn--danger:hover { background: var(--red); color: #fff; border-color: var(--red); }

.btn--subtle { background: var(--n-100); color: var(--n-600); }
.btn--subtle:hover { background: var(--n-200); color: var(--ink); }

.btn--sm { padding: 6px 14px; font-size: 13px; }
.btn--xs { padding: 4px 10px; font-size: 12px; gap: 5px; }
.btn--xs svg { width: 14px; height: 14px; }
.btn--lg { padding: 13px 28px; font-size: 15px; }
.btn--block { display: flex; width: 100%; }

.btn[disabled], .btn.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-group { display: inline-flex; gap: 8px; flex-wrap: wrap; }

.link-btn {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--pink);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.link-btn:hover { color: var(--pink-dark); }
.link-btn--muted { color: var(--n-500); }
.link-btn--danger { color: var(--red); }

/* ------------------------------------------------------------------ forms */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }

.label { font-size: 13px; font-weight: 700; color: var(--ink); }
.label span.muted { font-weight: 400; }

.hint { font-size: 12px; color: var(--n-500); line-height: 1.45; }

.input, .select, .textarea {
    width: 100%;
    font-family: inherit;
    font-size: 14px;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--n-200);
    border-radius: var(--radius);
    padding: 10px 12px;
    transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
    appearance: none;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--n-300); }
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--pink);
    box-shadow: 0 0 0 3px var(--pink-soft);
}
.input::placeholder, .textarea::placeholder { color: var(--n-400); }
.input[disabled], .select[disabled], .textarea[disabled] { background: var(--n-100); color: var(--n-500); cursor: not-allowed; }

.textarea { min-height: 96px; resize: vertical; line-height: 1.55; }

.select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 34px;
}

.input--error, .select--error, .textarea--error { border-color: var(--red); }
.field-error { font-size: 12px; color: var(--red); font-weight: 500; }

.input-group { display: flex; align-items: stretch; }
.input-group .input { border-radius: var(--radius) 0 0 var(--radius); }
.input-group .btn { border-radius: 0 var(--radius) var(--radius) 0; }

.suffix-input { position: relative; }
.suffix-input .input { padding-right: 56px; }
.suffix-input__suffix {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--n-500);
    pointer-events: none;
}

.checkbox, .radio {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    cursor: pointer;
    padding: 2px 0;
}
.checkbox input, .radio input {
    width: 17px;
    height: 17px;
    margin: 2px 0 0;
    accent-color: var(--pink);
    flex: 0 0 17px;
    cursor: pointer;
}
.checkbox__text strong { display: block; font-weight: 700; }
.checkbox__text span { font-size: 12px; color: var(--n-500); }

.switch-card {
    border: 1px solid var(--n-150);
    border-radius: var(--radius);
    padding: 12px 14px;
    transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.switch-card:hover { border-color: var(--n-300); }
.switch-card:has(input:checked) { border-color: var(--pink); background: var(--pink-soft); }

/* Woordmerk: de naam van het portaal als logo, voor wie geen bestand uploadt.
   Zwaar en cursief in de merkkleur — DM Sans heeft geen echte cursieve snede,
   dus de browser maakt er een schuine van. */
.wordmark {
    /* Krimpt mee op een smal scherm, zodat het de kopbalk niet leegduwt. */
    font-size: min(var(--wordmark-size, 28px), 6vw);
    font-weight: 900;
    font-style: italic;
    color: var(--pink);
    letter-spacing: -0.03em;
    line-height: 1;
    white-space: nowrap;
    display: inline-block;
}

/* Uitklapbaar paneel voor alles wat je meestal niet hoeft in te vullen.
   Werkt zonder JavaScript: <details> doet het werk. */
.disclosure {
    border: 1px solid var(--n-150);
    border-radius: var(--radius);
    background: var(--n-50);
    margin-bottom: 16px;
}
.disclosure:last-child { margin-bottom: 0; }
.disclosure__summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--n-600);
    cursor: pointer;
    list-style: none;
    user-select: none;
    border-radius: var(--radius);
}
.disclosure__summary::-webkit-details-marker { display: none; }
.disclosure__summary::before {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    margin-left: 2px;
    transition: transform 0.15s var(--ease);
}
.disclosure[open] > .disclosure__summary::before { transform: rotate(45deg); }
.disclosure__summary:hover { color: var(--pink); }
.disclosure__summary:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.disclosure__body {
    padding: 4px 14px 16px;
    border-top: 1px solid var(--n-150);
    margin-top: -1px;
    padding-top: 16px;
    background: #fff;
    border-radius: 0 0 var(--radius) var(--radius);
}

/* Startlijst op het dashboard: wat er nog te doen is voor het eerste beeld
   op een scherm staat. */
.steps { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.steps__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--n-100);
}
.steps__item:last-child { border-bottom: 0; padding-bottom: 4px; }
.steps__mark {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--n-100);
    color: var(--n-500);
    font-size: 13px;
    font-weight: 900;
}
.steps__mark svg { width: 15px; height: 15px; stroke-width: 2.4; }
.steps__item.is-done .steps__mark { background: var(--green-bg); color: var(--green); }
.steps__body { flex: 1; min-width: 0; }
.steps__title { font-weight: 700; font-size: 14px; margin: 0; }
.steps__item.is-done .steps__title { color: var(--n-500); text-decoration: line-through; }
.steps__text { font-size: 12.5px; color: var(--n-500); margin: 2px 0 0; }
.steps__item.is-done .steps__text { display: none; }

/* De keten van verhuurders boven een spot: More Connect → bureau → klant. */
.chain { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.chain__step {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--n-100);
    color: var(--n-600);
    font-weight: 500;
}
.chain__step--owner { background: var(--ink); color: #fff; }
.chain__step--current { background: var(--pink-soft-strong); color: var(--pink); font-weight: 700; }
.chain__arrow { color: var(--n-300); flex: 0 0 auto; }
.chain__arrow svg { width: 14px; height: 14px; display: block; }

.day-picker { display: flex; gap: 6px; flex-wrap: wrap; }
.day-picker input { position: absolute; opacity: 0; pointer-events: none; }
.day-picker label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    padding: 7px 10px;
    border: 1px solid var(--n-200);
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 700;
    color: var(--n-500);
    cursor: pointer;
    transition: all 0.15s var(--ease);
    user-select: none;
}
.day-picker label:hover { border-color: var(--n-400); color: var(--ink); }
.day-picker input:checked + label { background: var(--pink); border-color: var(--pink); color: #fff; }
.day-picker input:focus-visible + label { outline: 2px solid var(--pink); outline-offset: 2px; }

.range-row { display: flex; align-items: center; gap: 12px; }
.range-row input[type="range"] { flex: 1; accent-color: var(--pink); }
.range-row output {
    min-width: 54px;
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

fieldset { border: 0; padding: 0; margin: 0 0 24px; }
fieldset:last-child { margin-bottom: 0; }
legend { padding: 0; }

.form-grid { display: grid; gap: 0 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid > .field--wide { grid-column: 1 / -1; }

/* ----------------------------------------------------------------- badges */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    background: var(--n-100);
    color: var(--n-600);
    white-space: nowrap;
}
.badge--success { background: var(--green-bg); color: var(--green); }
.badge--warning { background: var(--amber-bg); color: var(--amber); }
.badge--danger  { background: var(--red-bg); color: var(--red); }
.badge--info    { background: var(--blue-bg); color: var(--blue); }
.badge--pink    { background: var(--pink-soft-strong); color: var(--pink); }
.badge--muted   { background: var(--n-100); color: var(--n-500); }
.badge--outline { background: transparent; border: 1px solid var(--n-200); color: var(--n-600); }

.dot { width: 8px; height: 8px; border-radius: 999px; background: currentColor; flex: 0 0 8px; }
.dot--pulse { animation: dot-pulse 2s var(--ease) infinite; }

@keyframes dot-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* ----------------------------------------------------------------- alerts */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-radius: var(--radius);
    padding: 12px 14px;
    font-size: 14px;
    margin-bottom: 14px;
    border: 1px solid transparent;
}
.alert svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; stroke-width: 1.9; }
.alert--success { background: var(--green-bg); color: var(--green); border-color: rgba(22, 121, 75, 0.15); }
.alert--error   { background: var(--red-bg); color: var(--red); border-color: rgba(180, 35, 31, 0.15); }
.alert--warning { background: var(--amber-bg); color: var(--amber); border-color: rgba(146, 98, 11, 0.15); }
.alert--info    { background: var(--blue-bg); color: var(--blue); border-color: rgba(31, 95, 168, 0.15); }

.flash-stack { position: sticky; top: calc(var(--header-h) + 12px); z-index: 20; }

/* Een melding die zichzelf opruimt schuift dicht in plaats van te verdwijnen,
   zodat de pagina eronder niet met een schok omhoog springt. */
.alert--hiding {
    max-height: 0 !important;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.25s var(--ease), opacity 0.25s var(--ease),
                margin 0.25s var(--ease), padding 0.25s var(--ease);
}

/* ----------------------------------------------------------------- tables */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--n-400);
    padding: 10px 14px;
    border-bottom: 1px solid var(--n-150);
    white-space: nowrap;
    background: #fff;
}
.table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--n-100);
    vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background 0.12s var(--ease); }
.table tbody tr:hover { background: var(--n-50); }
.table td.right, .table th.right { text-align: right; }
.table .num { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ empty state */
.empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--n-500);
}
/* Enkel het icoon van de lege staat zelf, niet dat in een knop eronder: die
   kreeg anders 40px en een automatische marge, en werd een reuzenpil. */
.empty > svg { width: 40px; height: 40px; margin: 0 auto 14px; color: var(--n-300); stroke-width: 1.4; }
.empty h3 { color: var(--ink); margin-bottom: 6px; }
.empty p { max-width: 420px; margin: 0 auto 16px; font-size: 14px; }

/* ----------------------------------------------------------- screen cards */
.screen-card {
    background: #fff;
    border: 1px solid var(--n-150);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* De raster zet items bovenaan uit; een kaart met een groep of een klant
       erbij zou anders hoger worden dan zijn buren op dezelfde rij. */
    align-self: stretch;
    transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease), transform 0.15s var(--ease);
}
.screen-card:hover { border-color: var(--pink); box-shadow: var(--shadow); transform: translateY(-2px); }

.screen-card__preview {
    position: relative;
    /* De kaart houdt altijd dezelfde maat; het scherm erin krijgt zijn eigen
       verhouding. Vandaar een lichte omkadering in plaats van een zwart vlak
       dat mee van vorm verandert. */
    background: var(--n-100);
    /* Iets hoger dan 16:9: een totem wordt anders een postzegel tussen twee
       brede grijze vlakken. */
    aspect-ratio: 3 / 2;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
/* Eén maat vastzetten en de andere laten volgen uit de aspect-ratio: zo past
   het scherm altijd binnen de kaart, hoe extreem de verhouding ook is. */
.screen-card__screen {
    position: relative;
    height: 100%;
    width: auto;
    background: var(--ink);
    border-radius: 2px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.screen-card__screen--wide { width: 100%; height: auto; }
.screen-card__screen img { width: 100%; height: 100%; object-fit: contain; }

.screen-card__status {
    position: absolute;
    top: 10px;
    left: 10px;
    /* Staat zowel op de lichte omkadering als op een donker beeld, dus vol wit
       met een randje in plaats van doorschijnend. */
    background: #fff;
    box-shadow: 0 0 0 1px var(--n-200);
}

.screen-card__count {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(20, 20, 20, 0.78);
    color: #fff;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
}

.screen-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.screen-card__title { font-size: 15px; font-weight: 700; }
.screen-card__meta { font-size: 13px; color: var(--n-500); }
.screen-card__foot { margin-top: auto; padding-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }

.thumb-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
    text-align: center;
    padding: 16px;
}
.thumb-placeholder svg { width: 28px; height: 28px; stroke-width: 1.4; }

/* ------------------------------------------------------------- spot rails */
.spot-list { display: flex; flex-direction: column; gap: 10px; }

.spot-row {
    display: grid;
    grid-template-columns: 34px 132px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--n-150);
    border-radius: var(--radius);
    padding: 12px 14px;
    transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
/* Zonder sleepgreep: één kolom minder, anders schuift de miniatuur in de
   smalle greepkolom. */
.spot-row--plain { grid-template-columns: 132px minmax(0, 1fr) auto; }
.spot-row:hover { border-color: var(--n-300); }
.spot-row.is-mine { border-left: 3px solid var(--pink); }
.spot-row.is-dragging { opacity: 0.55; border-color: var(--pink); box-shadow: var(--shadow); }
.spot-row.is-drop-target { border-color: var(--pink); border-style: dashed; }
.spot-row.is-inactive { background: var(--n-50); }
.spot-row.is-inactive .spot-row__preview { opacity: 0.5; }

.spot-row__handle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--n-400);
    cursor: grab;
    user-select: none;
}
.spot-row__handle:active { cursor: grabbing; }
.spot-row__handle svg { width: 16px; height: 16px; }
.spot-row__number { font-size: 12px; font-weight: 900; color: var(--n-500); font-variant-numeric: tabular-nums; }

.spot-row__preview {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--ink);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.spot-row__preview img { width: 100%; height: 100%; object-fit: contain; }
.spot-row__preview--portrait { aspect-ratio: 3 / 4; }

.spot-row__kind {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(20, 20, 20, 0.8);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 1px 5px;
    border-radius: 2px;
}

.spot-row__body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.spot-row__title { font-weight: 700; font-size: 14px; }
.spot-row__meta { font-size: 12.5px; color: var(--n-500); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.spot-row__actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

/* ------------------------------------------------------------ media grid */
.media-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

.media-card {
    background: #fff;
    border: 1px solid var(--n-150);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.media-card:hover { border-color: var(--pink); box-shadow: var(--shadow-sm); }
.media-card.is-selected { border-color: var(--pink); box-shadow: 0 0 0 2px var(--pink-soft-strong); }

.media-card__thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.media-card__thumb img { width: 100%; height: 100%; object-fit: contain; }

.media-card__kind {
    position: absolute;
    top: 6px;
    left: 6px;
    background: rgba(20, 20, 20, 0.8);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 2px;
}

.media-card__body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.media-card__title { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-card__meta { font-size: 11.5px; color: var(--n-500); }
.media-card__actions { margin-top: auto; padding-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }

/* ----------------------------------------------------------------- upload */
.dropzone {
    border: 2px dashed var(--n-300);
    border-radius: var(--radius);
    padding: 28px 20px;
    text-align: center;
    background: var(--n-50);
    cursor: pointer;
    transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.dropzone:hover, .dropzone.is-over { border-color: var(--pink); background: var(--pink-soft); }
.dropzone svg { width: 30px; height: 30px; color: var(--n-400); margin: 0 auto 10px; stroke-width: 1.5; }
.dropzone.is-over svg { color: var(--pink); }
.dropzone__title { font-weight: 700; margin-bottom: 4px; }
.dropzone__hint { font-size: 12.5px; color: var(--n-500); }
.dropzone input[type="file"] { display: none; }

.upload-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.upload-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    background: #fff;
    border: 1px solid var(--n-150);
    border-radius: var(--radius);
    padding: 8px 12px;
}
.upload-item__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-item__bar { width: 90px; height: 5px; border-radius: 999px; background: var(--n-200); overflow: hidden; }
.upload-item__bar span { display: block; height: 100%; background: var(--pink); width: 0; transition: width 0.2s linear; }
.upload-item.is-error { border-color: rgba(180, 35, 31, 0.35); color: var(--red); }
.upload-item.is-done .upload-item__bar span { background: var(--green); }

/* ----------------------------------------------------------------- modals */
.modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal.is-open { display: flex; }

.modal__backdrop { position: absolute; inset: 0; background: rgba(20, 20, 20, 0.55); backdrop-filter: blur(2px); }

.modal__panel {
    position: relative;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    width: min(100%, 560px);
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    animation: modal-in 0.2s var(--ease);
}
.modal__panel--wide { width: min(100%, 940px); }
.modal__panel--full { width: min(100%, 1180px); }

@keyframes modal-in {
    from { opacity: 0; transform: translateY(12px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

.modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--n-150);
}
.modal__head h3 { font-size: 17px; font-weight: 900; }
.modal__body { padding: 20px; overflow-y: auto; flex: 1; }
.modal__foot {
    padding: 14px 20px;
    border-top: 1px solid var(--n-150);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
    background: var(--n-50);
}

/* ------------------------------------------------------------------- tabs */
.tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--n-150);
    margin-bottom: 20px;
    overflow-x: auto;
}
.tab {
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--n-500);
    border-bottom: 2px solid transparent;
    background: none;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--pink); border-bottom-color: var(--pink); }

.tab-panel { display: none; }
.tab-panel.is-active { display: block; animation: fade-in 0.2s var(--ease); }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ------------------------------------------------------------------ chart */
.chart { display: flex; align-items: flex-end; gap: 3px; height: 120px; }
.chart__bar {
    flex: 1;
    min-width: 3px;
    background: var(--pink-soft-strong);
    border-radius: 2px 2px 0 0;
    position: relative;
    transition: background 0.15s var(--ease);
    min-height: 2px;
}
.chart__bar:hover { background: var(--pink); }
.chart__bar[data-value]:hover::after {
    content: attr(data-label);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--ink);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: var(--radius);
    white-space: nowrap;
    z-index: 5;
    pointer-events: none;
}

/* -------------------------------------------------- rapport: scherm per rij */
/* Eén scherm per regel in het rapport, dichtgeklapt. <details> doet het werk,
   dus dit blijft ook zonder JavaScript werken. */
.report-screen { border-bottom: 1px solid var(--n-150); }
.report-screen:last-child { border-bottom: 0; }

.report-screen__head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.report-screen__head::-webkit-details-marker { display: none; }
.report-screen__head::after {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-right: 2px solid var(--n-400);
    border-bottom: 2px solid var(--n-400);
    transform: rotate(-45deg);
    margin-bottom: 3px;
    transition: transform 0.15s var(--ease);
}
.report-screen[open] > .report-screen__head::after { transform: rotate(45deg); }
.report-screen__head:hover { background: var(--n-50); }
.report-screen__head:focus-visible { outline: 2px solid var(--pink); outline-offset: -2px; }

.report-screen__name { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.report-screen__name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.report-screen__meta { display: flex; align-items: baseline; gap: 16px; flex: 0 0 auto; }

.report-screen[open] > .report-screen__head { background: var(--n-50); }
.report-screen__empty { padding: 0 20px 16px; }

/* ------------------------------------------------------------------- misc */
.kv { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 6px 16px; font-size: 14px; }
.kv dt { color: var(--n-500); }
.kv dd { margin: 0; font-weight: 500; }

.copy-field {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--n-50);
    border: 1px solid var(--n-200);
    border-radius: var(--radius);
    padding: 8px 8px 8px 12px;
    font-size: 13px;
}
.copy-field code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--n-600); }

.pair-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: var(--pink);
    text-align: center;
    background: var(--pink-soft);
    border-radius: var(--radius);
    padding: 16px;
    word-break: break-all;
}

.timeline { display: flex; flex-direction: column; gap: 2px; }
.timeline__item {
    display: flex;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--n-100);
    font-size: 13.5px;
}
.timeline__item:last-child { border-bottom: 0; }
.timeline__time { color: var(--n-400); font-size: 12px; white-space: nowrap; min-width: 92px; }
.timeline__text { flex: 1; min-width: 0; }
.timeline__actor { font-weight: 700; }

.avatar {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--pink-soft-strong);
    color: var(--pink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 900;
    flex: 0 0 34px;
}
.avatar--sm { width: 30px; height: 30px; flex-basis: 30px; font-size: 11px; }

.filters {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.filters .field { margin-bottom: 0; min-width: 150px; }
.filters .field--grow { flex: 1 1 220px; }

.pagination { display: flex; gap: 6px; align-items: center; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
.pagination a, .pagination span {
    padding: 6px 12px;
    border-radius: var(--radius);
    border: 1px solid var(--n-200);
    font-size: 13px;
    font-weight: 500;
    background: #fff;
}
.pagination .is-current { background: var(--pink); border-color: var(--pink); color: #fff; font-weight: 700; }
.pagination .is-disabled { opacity: 0.4; pointer-events: none; }

.preview-frame {
    width: 100%;
    border: 0;
    background: var(--ink);
    border-radius: var(--radius);
    aspect-ratio: 16 / 9;
    display: block;
}
.preview-frame--portrait { aspect-ratio: 9 / 16; max-width: 420px; margin: 0 auto; }

.inline-form { display: inline; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------- auth pages */
.auth {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #fff;
}

/* Links staat enkel de video, onbewerkt: geen overlay, geen verloop, geen
   schaduw. Wat je uploadt is wat je ziet. Zonder video blijft er een effen
   vlak over, zodat de pagina nooit half leeg oogt. */
.auth__aside {
    background: var(--ink);
    position: relative;
    overflow: hidden;
}
.auth__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.auth__main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 24px 24px;
}
/* De automatische marges centreren de kaart én duwen het copyright naar de
   onderrand, zonder absolute positionering die op kleine schermen overlapt. */
.auth__card { width: 100%; max-width: 380px; margin: auto; }
.auth__copyright {
    font-size: 12px;
    color: var(--n-400);
    text-align: right;
    width: 100%;
    padding-top: 24px;
}
.auth__card h1 { font-size: 28px; margin-bottom: 6px; }
.auth__card > p { color: var(--n-500); font-size: 14px; margin-bottom: 24px; }
/* Op de inlogpagina staat geen ondertitel meer onder de titel; dan mag de
   ruimte die de ondertitel innam naar het formulier. */
.auth__card > h1 + form { display: block; margin-top: 24px; }
.auth__foot { margin-top: 20px; font-size: 13px; color: var(--n-500); text-align: center; }

.password-meter { height: 4px; border-radius: 999px; background: var(--n-200); overflow: hidden; margin-top: 6px; }
.password-meter span { display: block; height: 100%; width: 0; background: var(--red); transition: width 0.2s var(--ease), background 0.2s var(--ease); }
.password-meter.is-ok span { background: var(--amber); }
.password-meter.is-good span { background: var(--green); }

/* ---------------------------------------------------------------- toasts */
.toast-stack {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 80;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.toast {
    background: var(--ink);
    color: #fff;
    border-radius: var(--radius);
    padding: 12px 16px;
    font-size: 14px;
    box-shadow: var(--shadow-lg);
    animation: toast-in 0.22s var(--ease);
    pointer-events: auto;
    max-width: 340px;
}
.toast--error { background: var(--red); }
.toast--success { background: var(--green); }

@keyframes toast-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------- responsive */
.sidebar-toggle { display: none; }

@media (max-width: 1100px) {
    .form-grid { grid-template-columns: minmax(0, 1fr); }
    /* Onder elkaar is het rechtse veld niet langer het einde van een rij maar
       gewoon het volgende veld, en heeft het dus dezelfde tussenruimte nodig
       als alle andere. .field:last-child haalt die anders weg. */
    .form-grid > .field:last-child { margin-bottom: 16px; }
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
    .grid-main, .grid-split { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 960px) {
    :root { --header-h: 68px; }

    .sidebar-toggle { display: inline-flex; }

    .sidebar {
        position: fixed;
        top: var(--header-h);
        left: 0;
        z-index: 45;
        transform: translateX(-100%);
        transition: transform 0.22s var(--ease);
        box-shadow: var(--shadow-lg);
    }
    .sidebar.is-open { transform: none; }

    .app-shell { display: block; }
    .app-content { padding: 20px 16px 56px; }

    .sidebar-scrim {
        position: fixed;
        inset: var(--header-h) 0 0;
        background: rgba(20, 20, 20, 0.4);
        z-index: 44;
        display: none;
    }
    .sidebar-scrim.is-open { display: block; }

    .auth { grid-template-columns: 1fr; }
    .auth__aside { display: none; }

    .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
    .site-header__logo img { height: 36px; }
}

@media (max-width: 620px) {
    .header-actions .btn span { display: none; }
    .header-actions .btn { padding-left: 10px; padding-right: 10px; }
    .site-header__inner { gap: 10px; padding: 0 16px; }
}

@media (max-width: 720px) {
    h1 { font-size: 24px; }
    .grid-4 { grid-template-columns: minmax(0, 1fr); }

    .spot-row {
        grid-template-columns: 30px 96px minmax(0, 1fr);
        grid-template-areas:
            'handle preview body'
            'actions actions actions';
        row-gap: 10px;
    }
    .spot-row--plain {
        grid-template-columns: 96px minmax(0, 1fr);
        grid-template-areas:
            'preview body'
            'actions actions';
    }
    .spot-row__handle { grid-area: handle; }
    .spot-row__preview { grid-area: preview; }
    .spot-row__body { grid-area: body; }
    .spot-row__actions { grid-area: actions; justify-content: flex-start; }

    .kv { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
    .kv dd { margin-bottom: 8px; }

    .modal { padding: 0; align-items: flex-end; }
    .modal__panel { width: 100%; max-height: 92vh; border-radius: var(--radius) var(--radius) 0 0; }

    .toast-stack { left: 12px; right: 12px; bottom: 12px; }
    .toast { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ------------------------------------------------------------------ print */
@media print {
    .site-header, .sidebar, .btn, .filters, .flash-stack { display: none !important; }
    .app-shell { padding-top: 0; }
    .app-content { max-width: none; padding: 0; }
    .card { border-color: #ddd; break-inside: avoid; }
    body { background: #fff; }
}

/* Shown only from tablet width up — used for the header's user name. */
.hide-sm { display: none; }
@media (min-width: 760px) { .hide-sm { display: inline; } }