/* ==========================================================================
   Design tokens — light values live on :root. Dark values are duplicated
   under a system-preference media query (guarded so an explicit light
   choice can still win) AND under [data-theme="dark"] for the manual
   toggle. Never rely on the media query alone once a toggle exists.
   ========================================================================== */
:root {
    color-scheme: light dark;

    /* Brand */
    --avm-navy-900: #041a37;
    --avm-navy: #00295b;
    --avm-navy-700: #0d3f7d;
    --avm-blue: #1c7ed6;
    --avm-blue-light: #eaf4fc;
    --avm-coral: #ee4a34;
    --avm-coral-light: #fdeceb;
    --avm-success: #1c8a5a;
    --avm-success-light: #e4f6ee;
    --avm-amber: #b7791f;
    --avm-amber-light: #fdf3df;

    /* Neutrals */
    --avm-ink: #10192b;
    --avm-ink-soft: #566073;
    --avm-ink-faint: #8892a0;
    --avm-line: #e1e7ee;
    --avm-line-soft: #eef2f6;
    --avm-surface: #ffffff;
    --avm-surface-alt: #f6f9fb;
    --avm-bg: #f2f6f9;

    /* Aliases used across views */
    --avm-brand: var(--avm-navy);
    --avm-brand-light: var(--avm-blue-light);
    --avm-border: var(--avm-line);
    --avm-error: #c0392b;

    /* Scale */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-pill: 999px;
    --shadow-xs: 0 1px 2px rgba(4, 26, 55, .07);
    --shadow-sm: 0 2px 10px rgba(4, 26, 55, .09);
    /* Borrowed straight from alstedevanmierlomakelaardij.nl's own CSS: their elevated panels
       use this exact drop shadow (0 7px 25px rgba(0,0,0,.33)), toned down for lighter chrome. */
    --shadow-md: 0 7px 25px rgba(4, 26, 55, .18);
    --shadow-lg: 0 14px 40px rgba(4, 26, 55, .24);
    --header-h: 64px;

    /* Typography — one family site-wide (Inter); component "display" text like the brand
       wordmark uses the same family at different weights rather than a second font. */
    --font-sans: Montserrat, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --text-body: 1.125rem;
    --text-h1: clamp(2.25rem, 5vw, 3rem);
    --text-h2: clamp(1.875rem, 4vw, 2.25rem);
    --text-h3: clamp(1.5rem, 3vw, 1.75rem);
    --text-h4: clamp(1.25rem, 2.5vw, 1.375rem);
    --text-nav: 1rem;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --avm-ink: #eef2f7;
        --avm-ink-soft: #b3bdcc;
        --avm-ink-faint: #7c8aa0;
        --avm-line: #253248;
        --avm-line-soft: #1c283b;
        --avm-surface: #101a2c;
        --avm-surface-alt: #0c1524;
        --avm-bg: #0a1220;
        --avm-blue-light: #10263d;
        --avm-coral-light: #3a1c19;
        --avm-success-light: #113627;
        --avm-amber-light: #3a2c10;
        --shadow-xs: 0 1px 2px rgba(0, 0, 0, .35);
        --shadow-sm: 0 2px 10px rgba(0, 0, 0, .4);
        --shadow-md: 0 7px 25px rgba(0, 0, 0, .45);
        --shadow-lg: 0 18px 44px rgba(0, 0, 0, .55);
    }
}

:root[data-theme="dark"] {
    --avm-ink: #eef2f7;
    --avm-ink-soft: #b3bdcc;
    --avm-ink-faint: #7c8aa0;
    --avm-line: #253248;
    --avm-line-soft: #1c283b;
    --avm-surface: #101a2c;
    --avm-surface-alt: #0c1524;
    --avm-bg: #0a1220;
    --avm-blue-light: #10263d;
    --avm-coral-light: #3a1c19;
    --avm-success-light: #113627;
    --avm-amber-light: #3a2c10;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, .4);
    --shadow-md: 0 7px 25px rgba(0, 0, 0, .45);
    --shadow-lg: 0 18px 44px rgba(0, 0, 0, .55);
}

/* ==========================================================================
   Reset / base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

/* Root stays at the browser default (typically 16px) — component sizing below is expressed in
   rem off that fixed baseline, and clamp()'s vw component still scales fluidly with viewport. */
html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-body);
    font-weight: 400;
    line-height: 1.6;
    background: var(--avm-bg);
    color: var(--avm-ink);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-sans);
    color: var(--avm-navy);
    margin: 0 0 .5em;
}
:root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3, :root[data-theme="dark"] h4 { color: #fff; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) h1, :root:not([data-theme="light"]) h2,
    :root:not([data-theme="light"]) h3, :root:not([data-theme="light"]) h4 { color: #fff; }
}

h1 { font-size: var(--text-h1); font-weight: 700; line-height: 1.1; }
h2 { font-size: var(--text-h2); font-weight: 700; line-height: 1.2; }
h3 { font-size: var(--text-h3); font-weight: 600; line-height: 1.25; }
h4 { font-size: var(--text-h4); font-weight: 600; line-height: 1.3; }

p { max-width: 65ch; }

a { color: var(--avm-blue); }
img { max-width: 100%; display: block; }

::selection { background: var(--avm-coral); color: #fff; }

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

.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;
}

/* ==========================================================================
   Header + navigation — the header keeps the brand navy bar regardless of
   the light/dark toggle (same reasoning real product headers use it for:
   it's the one surface that should always read as "the app", and it means
   the logo treatment below never has to fight a changing background).
   ========================================================================== */
.avm-header {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 1rem;
    height: var(--header-h);
    padding: 0 1rem;
    background: var(--avm-navy);
    color: #fff;
    box-shadow: var(--shadow-sm);
}

/* display_override: ["window-controls-overlay", ...] (site.webmanifest) — installed on Windows/
   ChromeOS desktop Chrome, this draws the app's own content into the strip beside the native
   minimize/maximize/close buttons instead of leaving it blank. Feature-detected and additive: the
   env() vars are only ever non-empty when that mode is actually active, so this is a no-op
   everywhere else (regular browser tab, standalone without overlay, mobile). Only fine-tuned by
   eye against the spec, not an actual desktop install — recheck the exact fit once that's testable. */
@media (display-mode: window-controls-overlay) {
    .avm-header {
        position: fixed;
        left: env(titlebar-area-x, 0);
        top: env(titlebar-area-y, 0);
        width: env(titlebar-area-width, 100%);
        height: env(titlebar-area-height, var(--header-h));
        -webkit-app-region: drag;
        app-region: drag;
    }
    /* Anything clickable inside the overlaid header must opt back out of the drag region, or
       the OS treats clicks on it as "drag the window" instead of activating it. */
    .avm-header a, .avm-header button, .avm-header input, .avm-header .avm-nav, .avm-header .avm-lang-switch {
        -webkit-app-region: no-drag;
        app-region: no-drag;
    }
}

.avm-header__brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    text-decoration: none;
    flex-shrink: 0;
}
.avm-header__logo-mark { height: 32px; width: auto; display: block; }
.avm-header__wordmark { display: none; flex-direction: column; line-height: 1.08; }
.avm-header__wordmark-primary { font-family: var(--font-sans); font-weight: 700; font-size: 1rem; color: #fff; }
.avm-header__wordmark-secondary { font-family: var(--font-sans); font-weight: 600; font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; color: #a9c3e0; }

.avm-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 -.4rem 0 -.5rem;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: #fff;
    cursor: pointer;
}
.avm-menu-toggle:hover { background: rgba(255, 255, 255, .12); }
.avm-menu-toggle svg { width: 22px; height: 22px; }
.avm-menu-toggle .avm-icon-close { display: none; }
.avm-menu-toggle[aria-expanded="true"] .avm-icon-open { display: none; }
.avm-menu-toggle[aria-expanded="true"] .avm-icon-close { display: block; }

.avm-nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(4, 12, 26, .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 39;
}
.avm-nav-backdrop--visible { opacity: 1; pointer-events: auto; }

.avm-nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 41;
    width: min(80vw, 320px);
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: 1.25rem 1rem;
    background: var(--avm-surface);
    box-shadow: var(--shadow-lg);
    transform: translateX(-100%);
    transition: transform .25s ease;
    overflow-y: auto;
}
.avm-nav--open { transform: translateX(0); }

.avm-nav__link {
    color: var(--avm-ink);
    text-decoration: none;
    font-size: var(--text-nav);
    font-weight: 600;
    line-height: 1.25;
    padding: .7rem .8rem;
    border-radius: var(--radius-sm);
}
.avm-nav__link:hover { background: var(--avm-surface-alt); }
.avm-nav__link--current { background: var(--avm-blue-light); color: var(--avm-navy); }
:root[data-theme="dark"] .avm-nav__link--current { color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .avm-nav__link--current { color: #fff; } }

.avm-header__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .35rem;
}

.avm-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, .12);
    border: none;
    border-radius: var(--radius-pill);
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    font: inherit;
    padding: 0;
}
.avm-icon-button svg { width: 19px; height: 19px; }
.avm-icon-button:hover { background: rgba(255, 255, 255, .22); }

/* For icon buttons placed on page content rather than the navy header bar — same shape,
   readable on a light/dark surface instead of assuming a dark background. */
.avm-icon-button--outline {
    background: var(--avm-surface);
    color: var(--avm-navy);
    border: 1px solid var(--avm-line);
}
:root[data-theme="dark"] .avm-icon-button--outline { color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .avm-icon-button--outline { color: #fff; } }
.avm-icon-button--outline:hover { background: var(--avm-surface-alt); border-color: var(--avm-ink-faint); }

.avm-icon-expand-all { display: block; }
.avm-icon-collapse-all { display: none; }
[data-state="expanded"] .avm-icon-expand-all { display: none; }
[data-state="expanded"] .avm-icon-collapse-all { display: block; }

.avm-theme-toggle .avm-icon-moon { display: block; }
.avm-theme-toggle .avm-icon-sun { display: none; }
.avm-theme-toggle[data-mode="dark"] .avm-icon-moon { display: none; }
.avm-theme-toggle[data-mode="dark"] .avm-icon-sun { display: block; }

/* Notification bell reflects its actual permission/subscription state instead of always
   looking like it's waiting to be turned on. */
#avm-enable-notifications .avm-icon-bell-enabled,
#avm-enable-notifications .avm-icon-bell-denied { display: none; }
#avm-enable-notifications[data-state="enabled"] .avm-icon-bell-default { display: none; }
#avm-enable-notifications[data-state="enabled"] .avm-icon-bell-enabled { display: block; }
#avm-enable-notifications[data-state="denied"] .avm-icon-bell-default { display: none; }
#avm-enable-notifications[data-state="denied"] .avm-icon-bell-denied { display: block; color: rgba(255, 255, 255, .55); }

.avm-lang-switch {
    display: flex;
    gap: .15rem;
    background: rgba(255, 255, 255, .14);
    border-radius: var(--radius-pill);
    padding: .2rem;
    margin-right: .1rem;
}
.avm-lang-switch__link {
    padding: .3rem .55rem;
    border-radius: var(--radius-pill);
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .03em;
}
.avm-lang-switch__link:hover { color: #fff; }
.avm-lang-switch__link--current { background: #fff; color: var(--avm-navy); }
.avm-lang-switch__link--current:hover { color: var(--avm-navy); }

/* 1120px rather than a typical ~860px "tablet" breakpoint: six full-text nav links plus the
   wordmark and header icons don't comfortably fit inline until well into laptop widths — below
   that the compact hamburger/drawer pattern is used instead, verified to avoid header overflow
   at 1024px. */
@media (min-width: 1120px) {
    .avm-header { padding: 0 clamp(1rem, 4vw, 2.5rem); gap: 1.5rem; }
    .avm-header__wordmark { display: flex; }
    .avm-menu-toggle { display: none; }

    .avm-nav-backdrop { display: none; }
    .avm-nav {
        position: static;
        flex-direction: row;
        align-items: center;
        width: auto;
        padding: 0;
        gap: .25rem;
        background: transparent;
        box-shadow: none;
        transform: none;
        overflow: visible;
    }
    .avm-nav__link { color: rgba(255, 255, 255, .82); }
    .avm-nav__link:hover { background: rgba(255, 255, 255, .12); color: #fff; }
    .avm-nav__link--current { background: rgba(255, 255, 255, .16); color: #fff; }
}

/* ==========================================================================
   Layout shell
   ========================================================================== */
.avm-main {
    max-width: 1040px;
    margin: 0 auto;
    padding: clamp(1rem, 3vw, 2.5rem) clamp(1rem, 4vw, 2rem) 4rem;
}
/* The login page's shell fills the viewport and centers itself on its own — this padding would
   just add unused height on top of that and force a scrollbar even when the card fits fine. */
.avm-main--flush { max-width: none; padding: 0; }

.avm-scroll-top {
    position: fixed;
    right: clamp(1rem, 4vw, 2rem);
    bottom: clamp(1rem, 4vw, 2rem);
    z-index: 30;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--avm-navy);
    color: #fff;
    border: none;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    opacity: 1;
    transition: opacity .15s ease, transform .15s ease, background-color .15s ease;
}
.avm-scroll-top[hidden] { display: none; }
.avm-scroll-top svg { width: 20px; height: 20px; }
.avm-scroll-top:hover { background: var(--avm-navy-700); transform: translateY(-2px); }

.avm-version {
    position: fixed;
    right: .5rem;
    bottom: .375rem;
    z-index: 20;
    font-size: .6875rem;
    color: var(--avm-ink-faint);
    opacity: .6;
    pointer-events: none;
    user-select: none;
}

/* "Install this app" banner (pwa.js) — data-mode="prompt" (beforeinstallprompt-capable browsers)
   shows the Installeren button; data-mode="ios" (Safari, which never fires that event) shows
   manual instructions instead. Both hint/trigger variants stay in the DOM either way and are
   toggled purely by the parent's data-mode, so pwa.js only ever needs to set one attribute. */
.avm-install-banner {
    position: fixed;
    left: 1rem; right: 1rem; bottom: 1rem;
    z-index: 35;
    display: flex; flex-wrap: wrap; align-items: center; gap: .85rem 1.25rem;
    max-width: 640px; margin: 0 auto;
    padding: 1rem 1.1rem;
    background: var(--avm-surface); border: 1px solid var(--avm-line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.avm-install-banner[hidden] { display: none; }
.avm-install-banner__text { display: flex; flex-direction: column; gap: .2rem; flex: 1 1 220px; min-width: 0; }
.avm-install-banner__text strong { color: var(--avm-navy); }
:root[data-theme="dark"] .avm-install-banner__text strong { color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .avm-install-banner__text strong { color: #fff; } }
.avm-install-banner__text span { font-size: .9rem; color: var(--avm-ink-soft); }
.avm-install-banner__actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; margin-left: auto; }

/* Scoped through the parent (rather than a bare class) so this reliably outranks .avm-button's
   own display:inline-flex on the trigger button — same specificity as a bare class otherwise,
   which the Buttons section below would win purely by appearing later in the file. */
.avm-install-banner .avm-install-banner__hint--prompt,
.avm-install-banner .avm-install-banner__hint--ios,
.avm-install-banner .avm-install-banner__trigger--prompt { display: none; }
.avm-install-banner[data-mode="prompt"] .avm-install-banner__hint--prompt { display: inline; }
.avm-install-banner[data-mode="prompt"] .avm-install-banner__trigger--prompt { display: inline-flex; }
.avm-install-banner[data-mode="ios"] .avm-install-banner__hint--ios { display: inline; }

/* "New version available" toast (pwa.js) — pinned to the top so it never fights the install
   banner for the same bottom-of-screen space if both happen to be relevant at once. */
.avm-update-toast {
    position: fixed;
    left: 1rem; right: 1rem; top: calc(var(--header-h) + 1rem);
    z-index: 36;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.25rem;
    max-width: 480px; margin: 0 auto;
    padding: .85rem 1rem;
    background: var(--avm-surface); border: 1px solid var(--avm-line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    font-size: .92rem; color: var(--avm-ink);
}
.avm-update-toast[hidden] { display: none; }
/* .avm-button's own `display: inline-flex` (site.css:471) has the same specificity as the UA
   `[hidden] { display: none }` rule and, being an author rule, wins the tie — so the reload
   button needs its own higher-specificity override to actually disappear when hidden. */
.avm-update-toast .avm-button[hidden] { display: none; }

/* ==========================================================================
   Buttons — secondary/neutral by default (bordered, quiet); .avm-button--primary
   is reserved for the one clear call to action per form.
   ========================================================================== */
.avm-button,
button:where(:not(.avm-menu-toggle):not(.avm-icon-button):not(.avm-link-button):not(.avm-thread__status):not(.avm-copy-button):not(.avm-scroll-top)) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .65rem 1.2rem;
    background: var(--avm-surface);
    color: var(--avm-navy);
    border: 1px solid var(--avm-line);
    border-radius: var(--radius-pill);
    font-family: inherit;
    font-size: var(--text-nav);
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
    text-decoration: none;
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
:root[data-theme="dark"] .avm-button, :root[data-theme="dark"] button { color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .avm-button, :root:not([data-theme="light"]) button { color: #fff; } }

.avm-button:hover,
button:where(:not(.avm-menu-toggle):not(.avm-icon-button):not(.avm-link-button):not(.avm-thread__status):not(.avm-copy-button):not(.avm-scroll-top)):hover {
    background: var(--avm-surface-alt);
    border-color: var(--avm-ink-faint);
}
.avm-button:active, button:active { transform: translateY(1px); }

.avm-button--primary,
.avm-login button[type="submit"],
.avm-login__admin button[type="submit"] {
    background: var(--avm-navy);
    color: #fff;
    border-color: var(--avm-navy);
}
.avm-button--primary:hover,
.avm-login button[type="submit"]:hover,
.avm-login__admin button[type="submit"]:hover {
    background: var(--avm-navy-700);
    border-color: var(--avm-navy-700);
    box-shadow: var(--shadow-md);
}

.avm-link-button {
    background: none; border: none; color: inherit; opacity: .85; cursor: pointer;
    font: inherit; padding: 0; text-decoration: underline;
}
.avm-link-button:hover { opacity: 1; }

.avm-button--danger {
    background: var(--avm-coral-light);
    color: var(--avm-error);
    border-color: var(--avm-coral);
}
.avm-button--danger:hover { background: var(--avm-coral); color: #fff; }

.avm-welcome-text { white-space: pre-wrap; }

/* ==========================================================================
   File inputs — the OS-drawn "Choose file"/"Bestand kiezen" button is the one
   part of input[type="file"] that can be restyled; matched to .avm-button's
   pill here so it doesn't read as a bare, unstyled browser control the way
   the rest of the form chrome around it (LogbookHub.cshtml's file uploads) no
   longer does. ::file-selector-button and its older WebKit-prefixed
   equivalent must stay in separate rules — grouping them in one selector
   list invalidates the whole rule in browsers that don't recognize one of
   the two pseudo-elements.
   ========================================================================== */
input[type="file"] { font: inherit; font-size: .85rem; color: var(--avm-ink-soft); }
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
    margin-right: .75rem;
    padding: .5rem 1rem;
    border: 1px solid var(--avm-line);
    border-radius: var(--radius-pill);
    background: var(--avm-surface);
    color: var(--avm-navy);
    font: inherit;
    font-weight: 600;
    font-size: .85rem;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover {
    background: var(--avm-surface-alt);
    border-color: var(--avm-ink-faint);
}
:root[data-theme="dark"] input[type="file"]::file-selector-button,
:root[data-theme="dark"] input[type="file"]::-webkit-file-upload-button { color: #fff; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) input[type="file"]::file-selector-button,
    :root:not([data-theme="light"]) input[type="file"]::-webkit-file-upload-button { color: #fff; }
}

/* ==========================================================================
   Alerts
   ========================================================================== */
.avm-alert {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .8rem 1rem;
    border-radius: var(--radius-md);
    font-size: 1rem;
    margin: 0 0 1rem;
}
.avm-alert--error { background: var(--avm-coral-light); color: var(--avm-error); }
.avm-alert--info { background: var(--avm-blue-light); color: var(--avm-navy-700); }
:root[data-theme="dark"] .avm-alert--info { color: #cfe4fa; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .avm-alert--info { color: #cfe4fa; } }

/* ==========================================================================
   Login page
   ========================================================================== */
.avm-login-shell {
    min-height: calc(100dvh - var(--header-h));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: var(--avm-bg);
}

.avm-login {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    text-align: center;
    background: var(--avm-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: clamp(1.5rem, 4vw, 2.5rem);
}

.avm-login__brand { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin-bottom: 1.5rem; }
.avm-login__icon { height: 48px; width: auto; }
.avm-login__wordmark { text-align: center; line-height: 1.15; }
.avm-login__wordmark-primary { display: block; font-family: var(--font-sans); font-weight: 700; font-size: 1.15rem; color: var(--avm-ink); }
.avm-login__wordmark-secondary { display: block; font-family: var(--font-sans); font-weight: 600; font-size: .95rem; letter-spacing: .04em; color: var(--avm-blue); }

.avm-login label { display: block; text-align: left; font-weight: 600; font-size: .85rem; margin: .9rem 0 .3rem; }
.avm-login input[type="password"],
.avm-login input[type="text"] {
    width: 100%; padding: .75rem .9rem; border: 1px solid var(--avm-line); border-radius: var(--radius-md);
    background: var(--avm-surface-alt); color: var(--avm-ink); font: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.avm-login input:focus {
    outline: none; border-color: var(--avm-blue); box-shadow: 0 0 0 3px var(--avm-blue-light);
}
.avm-login button { width: 100%; margin-top: 0.2rem; padding: .8rem 1.3rem; }

.avm-login__external {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--avm-line-soft);
    display: flex;
    flex-direction: column;
    gap: 0   ;
}
.avm-login__external p { margin: 0 0 .2rem; font-size: .82rem; color: var(--avm-ink-faint); text-transform: uppercase; letter-spacing: .04em; }

.avm-button--social {
    color: var(--avm-ink);
    width: 100%;
}
.avm-button--social:hover { border-color: var(--avm-ink-faint); }
.avm-button--social svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Shown, not hidden, when a method is switched on but has no real OAuth credentials yet —
   greyed out and inert rather than a working link, with a hint explaining why. */
.avm-button--social[disabled] {
    opacity: .55;
    cursor: not-allowed;
    background: var(--avm-surface-alt);
}
.avm-button--social[disabled]:hover { transform: none; box-shadow: none; border-color: var(--avm-line); }
.avm-button--social__hint {
    margin-left: auto;
    font-size: .72rem;
    font-style: italic;
    color: var(--avm-ink-faint);
    white-space: nowrap;
}

.avm-login__admin {
    margin-top: 1rem;
    text-align: left;
    font-size: .88rem;
    color: var(--avm-ink-soft);
}
/* Styled to match the Google/Microsoft/Apple buttons above it — this is the agents' login
   option, presented as a peer button rather than a small text disclosure. */
.avm-login__admin summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    padding: .7rem 1.2rem;
    border: 1px solid var(--avm-line);
    border-radius: var(--radius-pill);
    background: var(--avm-surface);
    color: var(--avm-ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    transition: background-color .15s ease, border-color .15s ease;
}
.avm-login__admin summary:hover { background: var(--avm-surface-alt); border-color: var(--avm-ink-faint); }
.avm-login__admin summary svg { width: 18px; height: 18px; flex-shrink: 0; }
.avm-login__admin summary::-webkit-details-marker { display: none; }
.avm-login__admin[open] summary { margin-bottom: .9rem; }
.avm-login__admin label { display: block; font-weight: 600; margin: .8rem 0 .3rem; }
.avm-login__admin input {
    width: 100%; padding: .65rem .8rem; border: 1px solid var(--avm-line); border-radius: var(--radius-md);
    background: var(--avm-surface-alt); color: var(--avm-ink); font-family: inherit; font-size: 1rem;
}
.avm-login__admin button { width: 100%; }

/* ==========================================================================
   Threads / messages (Logbook hub)
   ========================================================================== */
/* One real heading (the address) with the customer's name as a byline, plus a small separate
   info-icon button to reveal more — replaces the old pattern of cramming address + name + agent
   into one clickable heading line, which read as a cluttered run-on sentence and risked wrapping
   badly. */
.avm-hub__identity {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: .6rem 1rem;
    margin: 0 0 1.25rem;
}
/* flex-wrap on the row itself would drop the icon button to its own line whenever the address
   is long enough to wrap — the row now stays nowrap and only this text block shrinks/wraps
   internally, so the icon stays pinned level with it (vertically centered) no matter how many
   lines the heading takes. */
.avm-hub__identity-text { flex: 1 1 auto; min-width: 0; }
.avm-hub__address-heading {
    margin: 0;
    font-size: clamp(1.2rem, 2vw, 1.4rem);
    font-weight: 700;
    color: var(--avm-navy);
}
:root[data-theme="dark"] .avm-hub__address-heading { color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .avm-hub__address-heading { color: #fff; } }
.avm-hub__customer-byline { margin: .15rem 0 0; font-size: .9rem; color: var(--avm-ink-soft); }

.avm-hub__identity .avm-icon-button { margin-left: auto; flex-shrink: 0; }
#avm-overview-toggle[aria-expanded="true"] {
    background: var(--avm-blue-light); border-color: var(--avm-blue); color: var(--avm-navy);
}
:root[data-theme="dark"] #avm-overview-toggle[aria-expanded="true"] { color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #avm-overview-toggle[aria-expanded="true"] { color: #fff; } }

#avm-overview-panel.avm-overview { margin-bottom: 1.25rem; }

.avm-hub__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin: 1.25rem 0;
}
.avm-hub__toolbar-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
#avm-new-thread-toggle svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Shared by the "new message" and "files" disclosure panels — neither had any styling of its
   own before, so labels/inputs/textarea rendered as bare unstyled browser controls dropped into
   an otherwise-designed page. */
.avm-hub__new-thread {
    background: var(--avm-surface);
    border: 1px solid var(--avm-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    padding: 1.1rem 1.25rem 1.25rem;
    margin: .85rem 0 1.25rem;
}
.avm-hub__new-thread form { display: flex; flex-direction: column; }
.avm-hub__new-thread label { display: block; font-weight: 600; font-size: .85rem; margin: .9rem 0 .35rem; }
.avm-hub__new-thread label:first-child { margin-top: 0; }
.avm-hub__new-thread input[type="text"],
.avm-hub__new-thread input[type="file"],
.avm-hub__new-thread textarea {
    width: 100%; padding: .65rem .85rem; border: 1px solid var(--avm-line); border-radius: var(--radius-md);
    background: var(--avm-surface-alt); color: var(--avm-ink); font: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.avm-hub__new-thread textarea { resize: vertical; }
.avm-hub__new-thread input[type="file"] { border-style: dashed; padding: .55rem .7rem; font-size: .88rem; }
.avm-hub__new-thread input:focus, .avm-hub__new-thread textarea:focus {
    outline: none; border-color: var(--avm-blue); box-shadow: 0 0 0 3px var(--avm-blue-light);
}
/* Secondary action (Annuleren) docks left, primary (Versturen) docks right — same convention as
   .avm-thread__admin-footer below. */
.avm-hub__form-actions { display: flex; justify-content: space-between; gap: .6rem; margin-top: 1.1rem; }

.avm-thread-list, .avm-message-list, .avm-attachment-list, .avm-logbook-list { list-style: none; padding: 0; margin: 0; }

.avm-thread {
    border: 1px solid var(--avm-line);
    border-radius: var(--radius-lg);
    margin-bottom: .85rem;
    background: var(--avm-surface);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}
.avm-thread--unread { border-color: var(--avm-blue); }

/* Hidden but still real (fetch reads form.action/FormData from it) — sized out of flow so an
   unread thread's collapsed row is exactly the same height as a read one, never taller. */
.avm-thread__read-form { position: absolute; width: 0; height: 0; margin: 0; padding: 0; overflow: hidden; }

.avm-thread__details > summary {
    cursor: pointer;
    list-style: none;
    padding: 1rem 1.25rem;
    transition: background-color .12s ease;
}
.avm-thread__details > summary::-webkit-details-marker { display: none; }
.avm-thread__details > summary:hover { background: var(--avm-surface-alt); }

/* nowrap + a shrinkable, truncating subject: a long subject/title used to either force the row
   to wrap (chevron dropping to its own line) or overflow past the card — now it just ellipsizes
   and keeps the date/chevron pinned on the same line, with the full text available as a hint. */
.avm-thread__header, .avm-activity__header { display: flex; flex-wrap: nowrap; gap: .55rem; align-items: center; }
.avm-thread__subject {
    font-family: var(--font-sans); font-size: 1.02rem;
    /* flex-basis 0 (not auto) keeps the wrap-fit calculation from counting the subject's full
       unshrunk text width — with white-space:nowrap that width is the whole string, which under
       flex-wrap:wrap pushed later siblings (the chevron) onto their own line even though the
       subject itself still shrinks to fit via flex-grow/shrink either way. */
    flex: 1 1 0%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Capitalizes only the first character, not text-transform:capitalize's every-word behavior —
   subjects are typed free-hand and sometimes start lowercase. */
.avm-thread__subject::first-letter { text-transform: uppercase; }
.avm-thread__date { color: var(--avm-ink-faint); font-size: .8rem; flex-shrink: 0; }

/* Groups the count pills + date so they can be pushed onto their own line as a unit below 700px
   (see the media query further down) without the chevron — which stays put — coming along. */
.avm-thread__meta {
    display: inline-flex; align-items: center; gap: .55rem; flex-shrink: 0;
    margin-left: auto;
}

/* Per-thread message-count pills, one for the agent's replies and one for the customer's —
   only rendered when that count is above zero. Sit just left of the date inside .avm-thread__meta. */
.avm-thread__count {
    display: inline-flex; align-items: center; flex-shrink: 0;
    padding: .15rem .45rem; border-radius: var(--radius-pill);
    font-size: .72rem; font-weight: 700;
}
.avm-thread__count--agent { background: var(--avm-blue-light); color: var(--avm-navy-700); }
:root[data-theme="dark"] .avm-thread__count--agent { color: #9dc7f2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .avm-thread__count--agent { color: #9dc7f2; } }
.avm-thread__count--customer { background: var(--avm-line-soft); color: var(--avm-ink-soft); }

/* Below 700px, .avm-thread__meta (the pills + date) drops to its own right-aligned line instead
   of squeezing onto the subject's row — .order pulls it after the chevron in source order so the
   chevron still ends up on line 1 with the subject, even though it comes before .avm-thread__meta
   in the markup. This also makes the pills viable at any width, replacing an earlier rule that
   just hid them below 360px because there wasn't room to share a line with everything else. */
@media (max-width: 700px) {
    .avm-thread__header { flex-wrap: wrap; }
    .avm-thread__meta { order: 1; flex-basis: 100%; justify-content: flex-end; margin-left: 0; margin-top: .3rem; }
}

.avm-thread__status {
    display: inline-flex; flex-shrink: 0; color: var(--avm-ink-faint);
    background: none; border: none; padding: .2rem; margin: -.2rem; border-radius: var(--radius-sm); cursor: pointer;
}
button.avm-thread__status:hover { background: var(--avm-line-soft); color: var(--avm-navy); }
:root[data-theme="dark"] button.avm-thread__status:hover { color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) button.avm-thread__status:hover { color: #fff; } }
.avm-thread__status svg { width: 17px; height: 17px; }
.avm-thread__status .avm-icon-unread { display: none; }
.avm-thread--unread .avm-thread__status,
.avm-activity--unread .avm-thread__status { color: var(--avm-blue); }
.avm-thread--unread .avm-thread__status .avm-icon-read,
.avm-activity--unread .avm-thread__status .avm-icon-read { display: none; }
.avm-thread--unread .avm-thread__status .avm-icon-unread,
.avm-activity--unread .avm-thread__status .avm-icon-unread { display: block; }

.avm-thread__chevron { margin-left: .25rem; color: var(--avm-ink-faint); transition: transform .18s ease; flex-shrink: 0; }
.avm-thread__chevron svg { width: 16px; height: 16px; }
.avm-thread__details[open] > summary .avm-thread__chevron { transform: rotate(180deg); }

.avm-thread__body { padding: 0 1.25rem 1.1rem; border-top: 1px solid var(--avm-line-soft); }
.avm-thread__body { padding-top: .9rem; }

.avm-message { padding: .55rem 0; border-top: 1px solid var(--avm-line-soft); }
.avm-message:first-child { border-top: none; padding-top: 0; }
/* Sits above .avm-message-list (a sibling, not its first child) so it stays pinned in place as
   "Vorige berichten ophalen" prepends more messages just below it. */
.avm-message-list__load-older { width: 100%; justify-content: center; margin-bottom: .6rem; font-size: .85rem; }
.avm-message-list__load-older:disabled { opacity: .6; cursor: default; }
/* Threads are already newest-first, so unlike the message-list version above, this one sits
   below the list rather than above it — "older" naturally means "further down". */
.avm-thread-list__load-older { width: 100%; justify-content: center; margin-top: .8rem; }
.avm-thread-list__load-older:disabled { opacity: .6; cursor: default; }
/* ::first-letter only reliably applies to a block-level box (block/inline-block/list-item/
   table-cell) per spec — a plain inline span like this doesn't qualify, which is why the
   capitalization below wasn't consistently taking effect. */
.avm-message__author { display: inline-block; font-weight: 700; margin-right: .5rem; font-size: .88rem; }
.avm-message__author::first-letter { text-transform: uppercase; }
.avm-message__date { color: var(--avm-ink-faint); font-size: .78rem; }
.avm-message p { margin: .3rem 0 0; }
/* Wijzig/Kopieer/Verstuur notificatie opnieuw (admin-only, LogbookHub.cshtml) sit to the right of
   the author/date on the same row. */
.avm-message__header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.avm-message__actions { display: flex; align-items: center; gap: .1rem; flex-shrink: 0; }
/* Same ghost-icon treatment as .avm-copy-button (below) rather than .avm-icon-button--outline's
   border — lighter footprint next to inline metadata text instead of a standalone action. */
.avm-message__actions .avm-icon-button,
.avm-message__actions .avm-copy-button {
    width: 26px; height: 26px; background: none; border: none; color: var(--avm-ink-faint);
}
.avm-message__actions .avm-icon-button:hover,
.avm-message__actions .avm-copy-button:hover { background: var(--avm-line-soft); color: var(--avm-navy); }
:root[data-theme="dark"] .avm-message__actions .avm-icon-button:hover { color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .avm-message__actions .avm-icon-button:hover { color: #fff; } }
.avm-message__actions .avm-icon-button svg { width: 14px; height: 14px; }
/* "Verstuur notificatie opnieuw" is the only one of the three actions that has to be a real
   <form> (it needs the antiforgery/routing fields Html.BeginUmbracoForm injects) rather than a
   bare button — plain display:inline left it baseline-aligned instead of centered like its two
   sibling buttons, since a flex item's own children don't inherit the row's align-items.
   Scoped through .avm-message__actions (two classes) rather than the bare class alone: this
   form is also a descendant of .avm-thread, whose own "form" rule (.avm-thread form — one class
   + one type selector) has one more type-selector than a single class and so wins the tie on a
   bare .avm-message__resend-form selector regardless of source order — its margin-top: .9rem
   was what actually pushed this button down below its two siblings. */
.avm-message__actions .avm-message__resend-form { display: inline-flex; align-items: center; margin-top: 0; }
.avm-message__edit-panel { margin-top: .5rem; }
.avm-message__edit-panel textarea { width: 100%; }
.avm-message--agent { background: var(--avm-blue-light); border-radius: var(--radius-md); padding: .7rem .9rem; border-top: none; margin: .4rem 0; }
.avm-message--agent .avm-message__author { color: var(--avm-navy-700); }
:root[data-theme="dark"] .avm-message--agent .avm-message__author { color: #9dc7f2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .avm-message--agent .avm-message__author { color: #9dc7f2; } }

/* Every message after the thread-opener is a reply: indent it so the conversation reads as a
   thread rather than a flat list. */
.avm-message--reply {
    margin-left: clamp(.75rem, 4vw, 1.75rem);
    padding-left: .9rem;
    border-left: 2px solid var(--avm-line);
    border-top: none;
    margin-top: .5rem;
}
.avm-message--reply.avm-message--agent { margin-left: clamp(.75rem, 4vw, 1.75rem); }

.avm-attachment-list { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0; }
.avm-attachment-list li { display: flex; align-items: center; gap: .35rem; }
.avm-attachment-list a {
    display: inline-flex; align-items: center; gap: .4rem;
    height: 32px; padding: 0 .8rem; background: var(--avm-surface-alt); border: 1px solid var(--avm-line);
    border-radius: var(--radius-pill); font-size: .82rem; text-decoration: none; color: var(--avm-ink);
}
.avm-attachment-list a::before { content: "📎"; }
/* An image attachment gets a real thumbnail instead (LogbookHub.cshtml) — the generic paperclip
   would just be redundant clutter next to it. */
.avm-attachment-list a.avm-attachment-list__link--image::before { content: none; }
.avm-attachment-list__thumb { width: 20px; height: 20px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; }
.avm-attachment-list a:hover { border-color: var(--avm-blue); color: var(--avm-blue); }
/* Matches the filename pill's own 32px height so the delete button next to it lines up exactly. */
.avm-attachment-list .avm-icon-button { width: 32px; height: 32px; }

.avm-thread textarea, .avm-form textarea {
    width: 100%; padding: .7rem .9rem; border: 1px solid var(--avm-line); border-radius: var(--radius-md);
    background: var(--avm-surface-alt); color: var(--avm-ink); font: inherit; resize: vertical;
}
.avm-thread textarea:focus, .avm-form textarea:focus, .avm-form input:focus {
    outline: none; border-color: var(--avm-blue); box-shadow: 0 0 0 3px var(--avm-blue-light);
}
.avm-thread form { display: flex; gap: .6rem; margin-top: .9rem; align-items: flex-start; flex-wrap: wrap; }
.avm-thread form textarea { flex: 1 1 220px; }
.avm-thread form input[type="file"] {
    flex: 1 1 220px; font-size: .85rem; padding: .5rem; border: 1px dashed var(--avm-line); border-radius: var(--radius-md);
}
.avm-thread form button { flex-shrink: 0; }

/* Admin-only card (mark, subject/internal note/follow-up, delete) — collapsed by default (see
   .avm-thread__admin-body below), already gated by Model.IsAdmin. Styled like .avm-hub__new-thread
   (surface-alt background for contrast against the thread card's own plain surface, same label/
   input conventions) so it reads as the same kind of form chrome as the rest of the page. */
.avm-thread__admin-actions {
    margin-top: .9rem;
    background: var(--avm-surface-alt);
    border: 1px solid var(--avm-line);
    border-radius: var(--radius-lg);
    padding: 1rem 1.1rem;
}
/* .avm-thread form (above) makes every <form> a wrapping flex row for the compact reply/upload
   forms — undo that here so the admin fields stack vertically like .avm-hub__new-thread's do. */
.avm-thread__admin-actions form { display: block; margin-top: 0; }
/* The heading doubles as the collapse/expand trigger (hub.js) — no <details>/<summary> here since
   the chevron needs to sit at the end of a heading that's also flush with the card's own padding. */
.avm-thread__admin-heading {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--avm-ink-soft); margin: 0; cursor: pointer;
}
.avm-thread__admin-chevron { color: var(--avm-ink-faint); transition: transform .18s ease; flex-shrink: 0; }
.avm-thread__admin-chevron svg { width: 15px; height: 15px; display: block; }
.avm-thread__admin-heading[aria-expanded="true"] .avm-thread__admin-chevron { transform: rotate(180deg); }
.avm-thread__admin-body { margin-top: 1rem; }
.avm-thread__admin-actions label { display: block; font-weight: 600; font-size: .85rem; margin: .9rem 0 .35rem; }
.avm-thread__admin-actions label:first-of-type { margin-top: 0; }
.avm-thread__admin-actions input[type="text"],
.avm-thread__admin-actions textarea {
    width: 100%; padding: .65rem .85rem; border: 1px solid var(--avm-line); border-radius: var(--radius-md);
    background: var(--avm-surface); color: var(--avm-ink); font: inherit;
}
.avm-thread__admin-actions textarea { resize: vertical; }
.avm-thread__admin-actions input:focus, .avm-thread__admin-actions textarea:focus {
    outline: none; border-color: var(--avm-blue); box-shadow: 0 0 0 3px var(--avm-blue-light);
}
.avm-thread__admin-actions select {
    padding: .5rem .7rem; border-radius: var(--radius-pill); border: 1px solid var(--avm-line);
    background: var(--avm-surface); color: var(--avm-ink); font: inherit; font-weight: 600;
}
.avm-thread__admin-body > * + * { margin-top: 1rem; }
/* Secondary action (Verwijderen) docks left, primary (Opslaan) docks right — same convention as
   .avm-hub__form-actions above. Opslaan submits the UpdateThreadDetails form above via its
   form="..." attribute rather than sitting inside it, so it can share this row with Verwijderen's
   own (separate) form. */
.avm-thread__admin-footer { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }

/* Colored mark icon (LogbookHub.cshtml MarkIconSvg) shown before a thread's subject text. */
.avm-thread__mark-icon { display: inline-flex; margin-right: .35rem; vertical-align: -3px; }
.avm-thread__mark-icon svg { width: 15px; height: 15px; display: block; }
.avm-thread__mark-icon--gray { color: var(--avm-ink-soft); }
.avm-thread__mark-icon--red { color: var(--avm-coral); }
.avm-thread__mark-icon--green { color: var(--avm-success); }
.avm-thread__mark-icon--yellow { color: var(--avm-amber); }

/* Custom mark picker (LogbookHub.cshtml/hub.js) — a native <select><option> can't render the
   icons above, so this is a button + listbox popup instead, backed by a hidden input for the
   actual form value. */
.avm-mark-select { position: relative; display: inline-block; }
.avm-mark-select__trigger {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .5rem .7rem; border-radius: var(--radius-pill); border: 1px solid var(--avm-line);
    background: var(--avm-surface); color: var(--avm-ink); font: inherit; font-weight: 600; cursor: pointer;
}
.avm-mark-select__trigger:hover { border-color: var(--avm-ink-faint); }
.avm-mark-select__current { display: inline-flex; align-items: center; }
.avm-mark-select__chevron { width: 14px; height: 14px; color: var(--avm-ink-faint); transition: transform .15s ease; flex-shrink: 0; }
.avm-mark-select__trigger[aria-expanded="true"] .avm-mark-select__chevron { transform: rotate(180deg); }

.avm-mark-select__list {
    position: absolute; z-index: 10; top: calc(100% + .35rem); left: 0; min-width: 190px;
    margin: 0; padding: .35rem; list-style: none;
    background: var(--avm-surface); border: 1px solid var(--avm-line); border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}
.avm-mark-select__option { display: flex; align-items: center; padding: .5rem .6rem; border-radius: var(--radius-sm); cursor: pointer; font-size: .9rem; color: var(--avm-ink); }
.avm-mark-select__option:hover, .avm-mark-select__option:focus-visible { background: var(--avm-surface-alt); outline: none; }
.avm-mark-select__option[aria-selected="true"] { font-weight: 700; }

/* ==========================================================================
   Mark — a tint instead of a separate pill badge. On the agent home page's flat
   activity items (avm-activity--mark-*) it's the whole card's background; on
   LogbookHub.cshtml's threads, avm-thread--mark-* is applied to .avm-thread__header
   only (the <summary>) rather than the whole card, so the expanded body's
   background stays plain and readable — that gets a border frame instead, below.
   ========================================================================== */
.avm-thread--mark-gray, .avm-activity--mark-gray { background: var(--avm-line-soft); }
.avm-thread--mark-red, .avm-activity--mark-red { background: var(--avm-coral-light); }
.avm-thread--mark-green, .avm-activity--mark-green { background: var(--avm-success-light); }
.avm-thread--mark-yellow, .avm-activity--mark-yellow { background: var(--avm-amber-light); }

/* Left/right/bottom only — the top edge stays .avm-thread__body's own plain separator line
   (border-top, set above) meeting the header's colored background right above it. */
.avm-thread__body--mark-gray { border-left: 2px solid var(--avm-ink-faint); border-right: 2px solid var(--avm-ink-faint); border-bottom: 2px solid var(--avm-ink-faint); }
.avm-thread__body--mark-red { border-left: 2px solid var(--avm-coral); border-right: 2px solid var(--avm-coral); border-bottom: 2px solid var(--avm-coral); }
.avm-thread__body--mark-green { border-left: 2px solid var(--avm-success); border-right: 2px solid var(--avm-success); border-bottom: 2px solid var(--avm-success); }
.avm-thread__body--mark-yellow { border-left: 2px solid var(--avm-amber); border-right: 2px solid var(--avm-amber); border-bottom: 2px solid var(--avm-amber); }
/* .avm-thread's own overflow:hidden clips backgrounds to its rounded corners fine, but a border
   (a stroke, not a fill) drawn on a square-cornered box gets cut off abruptly right at that clip
   path instead of following its curve — these give the bordered elements the same radius so the
   stroke itself curves into the corner instead of leaving it looking uncolored. Closed: the
   header is the whole visible card, so it takes all four corners; open: the header keeps only the
   top two (matching the card) and the body — which only ever renders while open — takes the
   bottom two, since together they form one continuous frame around the expanded card. */
.avm-thread__header { border-radius: var(--radius-lg); }
.avm-thread__details[open] > .avm-thread__header { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.avm-thread__body { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* The header's own border extension only while open — closed, there's no body below for it to
   frame, so it stays background-only (set above). border-bottom-width: 0 leaves that edge to the
   existing thin neutral separator (.avm-thread__body's border-top) instead of doubling it up. */
.avm-thread__details[open] > .avm-thread__header.avm-thread--mark-gray { border: 2px solid var(--avm-ink-faint); border-bottom-width: 0; }
.avm-thread__details[open] > .avm-thread__header.avm-thread--mark-red { border: 2px solid var(--avm-coral); border-bottom-width: 0; }
.avm-thread__details[open] > .avm-thread__header.avm-thread--mark-green { border: 2px solid var(--avm-success); border-bottom-width: 0; }
.avm-thread__details[open] > .avm-thread__header.avm-thread--mark-yellow { border: 2px solid var(--avm-amber); border-bottom-width: 0; }

/* ==========================================================================
   Overview
   ========================================================================== */
.avm-overview {
    background: var(--avm-surface); border: 1px solid var(--avm-line); border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem; margin: 0;
    display: grid; grid-template-columns: 1fr; gap: .1rem;
}
/* The [hidden] attribute loses to any author rule that sets its own `display`, grid included —
   restate it explicitly so toggling the hidden attribute actually hides this panel. */
.avm-overview[hidden] { display: none; }
.avm-overview dt { font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--avm-ink-faint); margin-top: .9rem; }
.avm-overview dt:first-child { margin-top: 0; }
.avm-overview dd { margin: .1rem 0 0; font-size: 1rem; display: flex; align-items: center; gap: .4rem; }
/* .avm-form fieldset (Forms section, below) is normally its own bordered card — here it's nested
   inside .avm-overview--edit's own card, so strip the duplicate border/background/padding and
   keep only its grid-column behavior. */
#avm-overview-panel.avm-overview--edit fieldset { border: none; background: none; box-shadow: none; padding: 0; margin: 0; }
/* This form's fields are explicitly paired (Straat+Huisnummer, Postcode+Plaats, ...) rather than
   left to the generic fieldset auto-flow (Forms section, below) — each .avm-form__field wraps its
   own label+input as one grid item so the pairing survives regardless of column count, with
   --full spanning both columns for stand-alone fields, textareas, checkboxes and the submit
   button. Scoped to this one form via the id — .avm-form fieldset's own column rules still apply
   unchanged everywhere else (LogbookUtilityPage.cshtml's NewLogbook form). */
#avm-overview-panel fieldset.avm-form__grid {
    display: grid; grid-template-columns: 1fr; gap: .9rem 1.5rem;
}
@media (min-width: 640px) {
    #avm-overview-panel fieldset.avm-form__grid { grid-template-columns: 1fr 1fr; }
}
.avm-form__field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.avm-form__field label { margin: 0; }
/* ID-scoped to outrank .avm-form fieldset > .avm-checkbox (Forms section, below — same
   specificity as a plain .avm-form__field--full class, and declared later in the file) which
   would otherwise still force the checkboxes here back to a half-width span. */
#avm-overview-panel .avm-form__field--full { grid-column: 1 / -1; }

.avm-copy-button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; flex-shrink: 0;
    background: none; border: none; border-radius: var(--radius-sm);
    color: var(--avm-ink-faint); cursor: pointer; padding: 0;
}
.avm-copy-button:hover { background: var(--avm-line-soft); color: var(--avm-navy); }
:root[data-theme="dark"] .avm-copy-button:hover { color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .avm-copy-button:hover { color: #fff; } }
.avm-copy-button svg { width: 15px; height: 15px; }
/* Toned down further than the button's own already-muted ink-faint color — it's a secondary,
   easy-to-miss-on-purpose affordance next to the text it copies, not something that should
   compete with it for attention. */
.avm-icon-copy { opacity: .55; }
.avm-copy-button .avm-icon-copied { display: none; color: var(--avm-success); }
.avm-copy-button--copied .avm-icon-copy { display: none; }
.avm-copy-button--copied .avm-icon-copied { display: block; }

@media (min-width: 640px) {
    .avm-overview { grid-template-columns: repeat(2, 1fr); column-gap: 2rem; }
    /* The dt/dd 2-column split above is for the read-only view's flat list of fields — the edit
       variant's only child is a single <form>, which would otherwise collapse into just one of
       those two columns, leaving the other half of the card empty. Its own fieldset (Forms
       section, below) already goes 2-column on its own at a wider breakpoint. */
    .avm-overview--edit { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Forms (utility pages)
   ========================================================================== */
.avm-utility__intro { color: var(--avm-ink-soft); margin-bottom: 1.25rem; }

.avm-form { display: flex; flex-direction: column; max-width: 640px; gap: 1rem; }
.avm-form fieldset {
    /* Fieldsets ignore a flex/grid parent's width and size to their content's intrinsic minimum
       unless min-width is reset — with the larger body text this pushed narrow viewports into
       horizontal overflow. */
    min-width: 0;
    border: 1px solid var(--avm-line); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem 1.5rem;
    background: var(--avm-surface); box-shadow: var(--shadow-xs);
    display: grid; grid-template-columns: 1fr; gap: 0;
}
.avm-form legend { font-family: var(--font-sans); font-weight: 600; color: var(--avm-navy); padding: 0 .4rem; }
:root[data-theme="dark"] .avm-form legend { color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .avm-form legend { color: #fff; } }
.avm-form label { font-weight: 600; font-size: .85rem; margin-top: .9rem; margin-bottom: .3rem; }
/* width: 100% matters more than it used to now that .avm-form fieldset is a grid (below) — an
   <input>/<select>'s auto width doesn't stretch to fill its grid cell the way a plain block
   element would, so without it these sit at their browser-intrinsic width inside a half-width
   column, wasting most of the cell. */
.avm-form input[type="text"], .avm-form input[type="email"], .avm-form input[type="url"],
.avm-form select, .avm-form textarea {
    width: 100%; padding: .65rem .85rem; border: 1px solid var(--avm-line); border-radius: var(--radius-md); font: inherit;
    background: var(--avm-surface-alt); color: var(--avm-ink);
}
.avm-checkbox { display: flex; align-items: center; gap: .55rem; font-weight: 500 !important; margin-top: .8rem !important; }
.avm-checkbox input { width: 18px; height: 18px; accent-color: var(--avm-navy); }
.avm-form > button, .avm-form .avm-button { align-self: flex-start; }

/* Rich-text editor (Partials/RichTextEditor, hub.js) — a contenteditable surface plus a small
   formatting toolbar, standing in for whichever plain textarea it wraps. */
.avm-richtext { border: 1px solid var(--avm-line); border-radius: var(--radius-md); overflow: hidden; background: var(--avm-surface-alt); }
.avm-richtext__toolbar { display: flex; flex-wrap: wrap; gap: .15rem; padding: .35rem; border-bottom: 1px solid var(--avm-line); background: var(--avm-surface); }
.avm-richtext__btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0; background: none; border: none; border-radius: var(--radius-sm);
    color: var(--avm-ink-soft); cursor: pointer; font: inherit; font-weight: 700; font-size: .85rem;
}
.avm-richtext__btn:hover { background: var(--avm-line-soft); color: var(--avm-ink); }
.avm-richtext__btn svg { width: 16px; height: 16px; }
.avm-richtext__surface { min-height: 6rem; padding: .65rem .85rem; color: var(--avm-ink); font: inherit; outline: none; }
.avm-richtext__surface:focus { box-shadow: inset 0 0 0 2px var(--avm-blue-light); }
.avm-richtext__surface p { margin: 0 0 .5em; }
.avm-richtext__surface p:last-child { margin-bottom: 0; }
.avm-richtext__surface ul, .avm-richtext__surface ol { margin: 0 0 .5em; padding-left: 1.4em; }
.avm-richtext__surface a { color: var(--avm-blue); }

@media (min-width: 760px) {
    .avm-form { max-width: none; }
    .avm-form fieldset { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; align-content: start; }
    .avm-form fieldset > label, .avm-form fieldset > input, .avm-form fieldset > textarea,
    .avm-form fieldset > .avm-checkbox {
        grid-column: span 1;
    }
    .avm-form fieldset > legend,
    /* .avm-richtext (Partials/RichTextEditor, e.g. this form's Welkomsttekst) always goes full
       width regardless of which field it's for — a formatting toolbar has no sensible half-width
       layout. */
    .avm-form fieldset > label[for="welcomeText"], .avm-form fieldset > .avm-richtext,
    .avm-form fieldset > label[for="remarkInternal"], .avm-form fieldset > textarea#remarkInternal,
    .avm-form fieldset > label[for="code"], .avm-form fieldset > input#code,
    .avm-form fieldset > label[for="title"], .avm-form fieldset > input#title {
        grid-column: 1 / -1;
    }
}

/* ==========================================================================
   Activities
   ========================================================================== */
/* One entry per day loaded into the agent home's activity panel (home.js) — each has its own
   heading and either an .avm-activity-list or an .avm-home__empty notice. */
.avm-activity-days { display: flex; flex-direction: column; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.avm-activity-day__heading {
    font-size: .85rem; font-weight: 600; color: var(--avm-ink-soft);
    margin: 0 0 .6rem; padding-bottom: .4rem;
    border-bottom: 1px solid var(--avm-line-soft);
}
.avm-activity-list { display: flex; flex-direction: column; gap: .75rem; list-style: none; margin: 0; padding: 0; }
.avm-activity {
    border: 1px solid var(--avm-line);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    background: var(--avm-surface);
    box-shadow: var(--shadow-xs);
    border-radius: 10px;
}
.avm-activity--unread { border-color: var(--avm-blue); }
.avm-activity p { margin: .5rem 0; color: var(--avm-ink-soft); }
.avm-activity {
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.avm-activity:hover { border-color: var(--avm-blue); box-shadow: var(--shadow-sm); }
.avm-activity:focus-visible { outline: 2px solid var(--avm-blue); outline-offset: 2px; }
.avm-activity__identity { display: flex; flex-direction: column; gap: .1rem; margin-bottom: .6rem; }

/* ==========================================================================
   Logbook lists
   ========================================================================== */
.avm-logbook-list li { margin-bottom: .5rem; }
.avm-logbook-list button {
    width: 100%; justify-content: flex-start; text-align: left; font-weight: 500;
}
.avm-logbook-list button:hover { border-color: var(--avm-blue); color: var(--avm-navy); box-shadow: var(--shadow-xs); }
:root[data-theme="dark"] .avm-logbook-list button:hover { color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .avm-logbook-list button:hover { color: #fff; } }

.avm-logbook-list--checkable {
    max-height: 340px; overflow-y: auto; border: 1px solid var(--avm-line); border-radius: var(--radius-md);
    padding: .5rem 1rem; background: var(--avm-surface-alt);
}
.avm-logbook-list--checkable li { margin: 0; padding: 0; border-bottom: 1px solid var(--avm-line-soft); }
.avm-logbook-list--checkable li:last-child { border-bottom: none; }
.avm-logbook-list--checkable label.avm-checkbox {
    padding: .4rem .3rem; margin: 0 !important; border-radius: var(--radius-sm); transition: background-color .12s ease;
}
.avm-logbook-list--checkable label.avm-checkbox:hover { background: var(--avm-surface-alt); }

.avm-logbook-list--filterable button {
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
    border-radius: 10px;
}
.avm-logbook-list__primary { font-weight: 500; }
.avm-logbook-list__byline { font-size: .85rem; font-weight: 400; color: var(--avm-ink-soft); }

/* ==========================================================================
   Agent home (LogBooks list utility page — logbook picker + activity-of-a-day)
   ========================================================================== */
/* The grid itself is capped to the space left below the header, minus .avm-main's own top and
   bottom padding — not just the header — otherwise it runs past the viewport by that padding
   amount and forces the whole page to scroll instead of just the two columns below. Rows are
   1fr so that on narrow viewports, where the columns stack (see media query below), each one
   gets half of that budget instead of each independently claiming the full height and doubling
   the page length. */
.avm-home {
    display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; gap: 2rem;
    max-height: calc(100dvh - var(--header-h) - clamp(1rem, 3vw, 2.5rem) - 4rem);
}
.avm-home__column {
    min-width: 0; min-height: 0;
    /* Fills its grid row; the heading/filters/date-row stay their natural size (flex: none, set
       below) and the list below takes whatever's left. */
    display: flex; flex-direction: column;
}
.avm-home__column-heading {
    flex: none; display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
    font-size: 1.05rem; font-weight: 600; color: var(--avm-navy); margin: 0 0 .85rem;
}
:root[data-theme="dark"] .avm-home__column-heading { color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .avm-home__column-heading { color: #fff; } }
/* Visible-of-total logbook count next to "Logboeken" (home.js) — muted and smaller so it reads
   as metadata, not a second heading. */
.avm-home__count { font-size: .85rem; font-weight: 500; color: var(--avm-ink-soft); }
.avm-home__filters { flex: none; display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1rem; }
.avm-home__search {
    padding: .65rem .85rem; border: 1px solid var(--avm-line); border-radius: var(--radius-md); font: inherit;
    background: var(--avm-surface-alt); color: var(--avm-ink); width: 100%;
}
.avm-home__filter-group { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.avm-home__filter-group .avm-checkbox { margin-top: 0 !important; font-size: .9rem; }
.avm-home__empty { flex: none; color: var(--avm-ink-soft); }
.avm-home__hidden-template { display: none; }

/* "Volgende dag" lives inside .avm-home__scroll, right after the last loaded day, so it
   scrolls with the list instead of staying pinned below it. */
.avm-home__column--activity .avm-button { margin-top: 1rem; }

/* Each column's own list scrolls independently instead of growing the whole page — flex: 1 lets
   it soak up whatever space the column's fixed-size header content (heading/filters/date row)
   doesn't use, so it always reaches to just short of the viewport bottom without a guessed
   pixel offset. A thin, theme-coloured scrollbar instead of the browser default. */
.avm-home__scroll {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: var(--avm-line) transparent;
}
.avm-home__scroll::-webkit-scrollbar { width: 8px; }
.avm-home__scroll::-webkit-scrollbar-track { background: transparent; }
.avm-home__scroll::-webkit-scrollbar-thumb {
    background-color: var(--avm-line); border-radius: var(--radius-pill); border: 2px solid transparent; background-clip: padding-box;
}
.avm-home__scroll::-webkit-scrollbar-thumb:hover { background-color: var(--avm-ink-faint); }

@media (min-width: 960px) {
    .avm-home { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
}