/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-sans);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS
   Every colour in the portal resolves through one of these tokens, so the dark
   theme below only has to restate the tokens — never the rules that use them.
   Light is the default and is what every user gets until they opt in on
   /account/profiel/. There is deliberately NO prefers-color-scheme rule: dark
   mode is an explicit choice, not something the OS turns on for you.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    color-scheme: light;

    /* --- Type -------------------------------------------------------------
       One family; hierarchy comes from a 1.25 (major third) scale. */
    --font-sans: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --fs-1: 0.8rem;
    --fs-2: 1rem;
    --fs-3: 1.25rem;
    --fs-4: 1.563rem;
    --fs-5: 1.953rem;
    --fs-6: 2.441rem;

    /* --- Logo -----------------------------------------------------------
       The CYBERCYBER wordmark keeps its brand colours in every theme. These
       are pinned literals precisely so that re-theming --primary-color and
       --secondary-color can never recolour the logo. Do not swap these for
       the brand tokens below, and do not restate them in a theme block. */
    --logo-blue: #0056b3;
    --logo-cyan: #00a0e9;
    --logo-white: #fff;

    /* --- Brand ----------------------------------------------------------- */
    --primary-color: #0b4f9c;
    --primary-hover: #083f7d;
    --secondary-color: #00a0e9;
    --accent-color: #ff6b00;
    --accent-hover: #e05d00;

    /* Foreground used on top of a filled brand/state surface. */
    --on-primary: #fff;
    --on-accent: #fff;
    --on-danger: #fff;
    --on-staff-accent: #fff;

    /* --- Text ------------------------------------------------------------ */
    --text-color: #1a2433;
    --light-text: #5b6676;
    --lighter-text: #8a93a0;

    /* --- Surfaces -------------------------------------------------------- */
    --background-color: #eef1f4;
    --card-background: #fff;
    --header-background: #fff;
    --input-background: #fff;
    --surface-alt: #e9ecef;        /* secondary buttons, avatar/device circles */
    --surface-alt-hover: #dee2e6;
    --surface-muted: #eceff1;      /* neutral round icons, "closed" badge */
    --surface-sunken: #f0f3f7;     /* grouped table rows */
    --border-color: #d9dee4;
    --border-strong: #c5ccd5;

    /* --- State ----------------------------------------------------------- */
    --success-color: #28a745;
    --warning-color: #ffc107;
    --danger-color: #dc3545;
    /* Readable text versions of the state colours, for use on a tinted
       (not filled) background where the pure hue would be too low-contrast. */
    --success-text: #1c7a34;
    --warning-text: #856404;
    --warning-text-gold: #b8860b;
    --danger-text: #a71d2a;
    --accent-text: #b84800;
    --neutral-text: #495057;
    --neutral-dot: #6c757d;
    --info-color: #0076ca;
    --info-text: #0076ca;
    --mdr-color: #6a3fd4;
    --mdr-text: #5a34c4;
    --tint-mdr-bg: rgba(106, 63, 212, 0.10);

    /* --- State tints (background washes + their borders) ------------------ */
    --tint-success-bg: rgba(40, 167, 69, 0.12);
    --tint-warning-bg: rgba(255, 193, 7, 0.15);
    --tint-danger-bg: rgba(220, 53, 69, 0.12);
    --tint-info-bg: rgba(0, 160, 233, 0.1);
    --tint-info-wash: rgba(0, 118, 202, 0.10);
    --tint-info-border: rgba(0, 118, 202, 0.32);
    --tint-accent-bg: rgba(255, 107, 0, 0.10);
    --tint-neutral-bg: rgba(0, 0, 0, 0.06);
    --tint-primary-soft: rgba(0, 86, 179, 0.04);
    --tint-danger-soft: rgba(220, 53, 69, 0.06);
    --tint-success-soft: rgba(40, 167, 69, 0.06);
    --tint-success-border: rgba(40, 167, 69, 0.35);
    --tint-warning-border: rgba(255, 193, 7, 0.55);
    --tint-danger-border: rgba(220, 53, 69, 0.45);
    --tint-accent-border: rgba(255, 107, 0, 0.45);
    --tint-neutral-border: rgba(108, 117, 125, 0.35);
    --tint-primary-border: rgba(0, 86, 179, 0.2);
    --tint-primary-border-strong: rgba(0, 86, 179, 0.30);

    /* --- Hover / focus --------------------------------------------------- */
    --hover-primary-soft: rgba(0, 86, 179, 0.08);
    --hover-row: rgba(0, 86, 179, 0.035);
    --focus-ring-primary: 0 0 0 3px rgba(0, 86, 179, 0.12);
    --focus-ring-secondary: 0 0 0 3px rgba(0, 160, 233, 0.15);

    /* --- Elevation ------------------------------------------------------- */
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-dropdown: 0 4px 20px rgba(0, 0, 0, 0.12);
    --shadow-panel: 0 8px 24px rgba(11, 29, 52, 0.25);
    --shadow-bulk: 0 12px 30px -14px rgba(11, 29, 52, 0.35);
    --overlay: rgba(0, 0, 0, 0.5);
    --overlay-strong: rgba(0, 0, 0, 0.82);

    /* --- Ticket status badges (distinct hue per status, by design) -------- */
    --badge-new-bg: #e7f0fb;      --badge-new-fg: #0056b3;
    --badge-open-bg: #e1f5fe;     --badge-open-fg: #0277bd;
    --badge-waiting-bg: #fff4d6;  --badge-waiting-fg: #946200;
    --badge-research-bg: #e8eaf6; --badge-research-fg: #3949ab;
    --badge-external-bg: #e0f2f1; --badge-external-fg: #00695c;
    --badge-proposed-bg: #ede7f6; --badge-proposed-fg: #5e35b1;
    --badge-resolved-bg: #e3f6e8; --badge-resolved-fg: #1e7e34;
    --badge-closed-bg: #eceff1;   --badge-closed-fg: #566069;

    /* --- Ticket priority badges ------------------------------------------ */
    --prio-low-bg: #e8f5e9;     --prio-low-fg: #2e7d32;
    --prio-medium-bg: #fff8e1;  --prio-medium-fg: #8a6a00;
    --prio-high-bg: #ffefe0;    --prio-high-fg: #b85c00;
    --prio-urgent-bg: #fde7e9;  --prio-urgent-fg: #c0392b;

    /* --- Notification severity chips -------------------------------------- */
    --sev-high-bg: #fbe3e5;
    --sev-mid-bg: #fff3d6;      --sev-mid-fg: #9a6b00;
    --sev-low-bg: #e5f3ff;
    --notif-unread-bg: #f0f6ff;

    /* --- Banners / inline alerts ------------------------------------------ */
    --banner-info-bg: #eaf4fb;  --banner-info-border: #bfe0f5;  --banner-info-fg: #0a4b78;
    --banner-warn-bg: #fff8e6;  --banner-warn-border: #f5e3b3;  --banner-warn-fg: #b67900;
    --alert-info-bg: #eaf4fc;

    /* --- Assorted component surfaces --------------------------------------- */
    --security-ok-bg: #f2fbf5;     --security-ok-fg: #1c7a35;
    --security-alert-bg: #fdf3f4;
    --security-warn-bg: #fffaf0;   --security-warn-fg: #8a6d1a;
    --message-internal-bg: #fff8e1;
    --message-staff-bg: #f0f7ff;
    --action-pill-bg: #fff4ec;
    --activity-danger-bg: #fdecea;
    --activity-success-bg: #e7f6ec;
    --matrix-price-bg: #eaf4ff;
    --mdr-num-bg: #d7dce2;         --mdr-num-fg: #fff;
    --pulse-success: rgba(40, 167, 69, 0.55);
    --pulse-success-fade: rgba(40, 167, 69, 0);

    /* Deep brand ink for full-width bands (impersonation bar, footer). */
    --bar-ink: #0f2944;

    /* --- Footer (a dark band in both themes) ------------------------------- */
    --footer-background: var(--bar-ink);
    --footer-text: #fff;
    --footer-link: #ecf0f1;
    --footer-muted: #a9b7c6;
    --footer-border: rgba(255, 255, 255, 0.1);

    /* --- Omgeving / Beschikbaarheid aliases ---------------------------------
       Those pages' scoped styles speak --omg-*. They are aliases of the portal
       tokens above (not a second palette), so the dark theme reaches them
       through the tokens they point at. Do not give them literal values. */
    --omg-ink: var(--text-color);
    --omg-ink-soft: var(--light-text);
    --omg-card: var(--card-background);
    --omg-line: var(--border-color);
    --omg-line-2: var(--border-strong);
    --omg-solid: var(--primary-color);
    --omg-solid-hover: var(--primary-hover);
    --omg-on-solid: var(--on-primary);
    --omg-on-accent: var(--on-primary);
    --omg-on-bad: var(--on-danger);
    --omg-accent: var(--primary-color);
    --omg-ok: var(--success-text);
    --omg-amber: var(--warning-text-gold);
    --omg-amber-text: var(--warning-text);
    --omg-bad: var(--danger-color);
    --omg-quiet: var(--lighter-text);
    --omg-info: var(--info-color);
    --omg-mdr: var(--mdr-color);
    --omg-mdr-text: var(--mdr-text);
    --omg-onboarding: var(--accent-color);
    --omg-onboarding-text: var(--accent-text);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK THEME
   Opt-in only: applied when base.html renders <html data-theme="dark">, which
   it does from the user's `theme` profile field. Tokens only — if you find
   yourself restating a selector here, the light rule needs a token instead.
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
    color-scheme: dark;

    /* Brand blues are lightened so they clear 4.5:1 against the dark canvas;
       filled brand buttons therefore carry near-black text, not white. */
    --primary-color: #57a6ea;
    --primary-hover: #7bbaf0;
    --secondary-color: #3fc0ff;
    --accent-color: #ff8c33;
    --accent-hover: #ffa159;

    --on-primary: #0d1b26;
    --on-accent: #241202;
    --on-danger: #2a0508;
    --on-staff-accent: #24120a;

    --text-color: #e4e7ea;
    --light-text: #a3abb4;
    --lighter-text: #7c848d;

    --background-color: #14171b;
    --card-background: #1c2025;
    --header-background: #1c2025;
    --input-background: #22272d;
    --surface-alt: #2a3037;
    --surface-alt-hover: #343b43;
    --surface-muted: #262c33;
    --surface-sunken: #22272d;
    --border-color: #32383f;
    --border-strong: #434a53;

    --success-color: #4ac26b;
    --warning-color: #e8b23a;
    --danger-color: #f4676f;
    --success-text: #71d18c;
    --warning-text: #e8c887;
    --warning-text-gold: #e0b458;
    --danger-text: #f9909a;
    --accent-text: #ffab6b;
    --neutral-text: #a3abb4;
    --neutral-dot: #5b636c;
    --info-color: #4fb0f5;
    --info-text: #7cc6f8;
    --mdr-color: #a081e8;
    --mdr-text: #b79ce0;
    --tint-mdr-bg: rgba(160, 129, 232, 0.16);

    --tint-success-bg: rgba(74, 194, 107, 0.15);
    --tint-warning-bg: rgba(232, 178, 58, 0.15);
    --tint-danger-bg: rgba(244, 103, 111, 0.15);
    --tint-info-bg: rgba(63, 192, 255, 0.14);
    --tint-info-wash: rgba(79, 176, 245, 0.14);
    --tint-info-border: rgba(79, 176, 245, 0.4);
    --tint-accent-bg: rgba(255, 140, 51, 0.14);
    --tint-neutral-bg: rgba(255, 255, 255, 0.08);
    --tint-primary-soft: rgba(87, 166, 234, 0.07);
    --tint-danger-soft: rgba(244, 103, 111, 0.09);
    --tint-success-soft: rgba(74, 194, 107, 0.09);
    --tint-success-border: rgba(74, 194, 107, 0.4);
    --tint-warning-border: rgba(232, 178, 58, 0.45);
    --tint-danger-border: rgba(244, 103, 111, 0.45);
    --tint-accent-border: rgba(255, 140, 51, 0.45);
    --tint-neutral-border: rgba(255, 255, 255, 0.22);
    --tint-primary-border: rgba(87, 166, 234, 0.3);
    --tint-primary-border-strong: rgba(87, 166, 234, 0.4);

    --hover-primary-soft: rgba(87, 166, 234, 0.14);
    --hover-row: rgba(87, 166, 234, 0.07);
    --focus-ring-primary: 0 0 0 3px rgba(87, 166, 234, 0.3);
    --focus-ring-secondary: 0 0 0 3px rgba(63, 192, 255, 0.3);

    /* Shadows carry almost no weight on a dark canvas, so they lean on
       opacity rather than spread to keep cards separated from the page. */
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
    --shadow-dropdown: 0 4px 20px rgba(0, 0, 0, 0.65);
    --shadow-panel: 0 8px 24px rgba(0, 0, 0, 0.7);
    --shadow-bulk: 0 12px 30px -14px rgba(0, 0, 0, 0.8);
    --overlay: rgba(0, 0, 0, 0.68);
    --overlay-strong: rgba(0, 0, 0, 0.9);

    --badge-new-bg: rgba(87, 166, 234, 0.16);   --badge-new-fg: #8fc6f6;
    --badge-open-bg: rgba(63, 192, 255, 0.16);  --badge-open-fg: #79cdf7;
    --badge-waiting-bg: rgba(232, 178, 58, 0.16); --badge-waiting-fg: #e8bf6a;
    --badge-research-bg: rgba(121, 134, 203, 0.18); --badge-research-fg: #9fa8da;
    --badge-external-bg: rgba(77, 182, 172, 0.16); --badge-external-fg: #80cbc4;
    --badge-proposed-bg: rgba(149, 117, 205, 0.2); --badge-proposed-fg: #b79ce0;
    --badge-resolved-bg: rgba(74, 194, 107, 0.16); --badge-resolved-fg: #71d18c;
    --badge-closed-bg: rgba(255, 255, 255, 0.08); --badge-closed-fg: #a3abb4;

    --prio-low-bg: rgba(74, 194, 107, 0.15);    --prio-low-fg: #71d18c;
    --prio-medium-bg: rgba(232, 178, 58, 0.15); --prio-medium-fg: #e8bf6a;
    --prio-high-bg: rgba(255, 140, 51, 0.16);   --prio-high-fg: #ffab6b;
    --prio-urgent-bg: rgba(244, 103, 111, 0.16); --prio-urgent-fg: #f9909a;

    --sev-high-bg: rgba(244, 103, 111, 0.16);
    --sev-mid-bg: rgba(232, 178, 58, 0.16);     --sev-mid-fg: #e8bf6a;
    --sev-low-bg: rgba(87, 166, 234, 0.16);
    --notif-unread-bg: rgba(87, 166, 234, 0.09);

    --banner-info-bg: rgba(87, 166, 234, 0.12);
    --banner-info-border: rgba(87, 166, 234, 0.32);
    --banner-info-fg: #a9d3f7;
    --banner-warn-bg: rgba(232, 178, 58, 0.12);
    --banner-warn-border: rgba(232, 178, 58, 0.32);
    --banner-warn-fg: #e8c887;
    --alert-info-bg: rgba(87, 166, 234, 0.12);

    --security-ok-bg: rgba(74, 194, 107, 0.09);    --security-ok-fg: #6fd08a;
    --security-alert-bg: rgba(244, 103, 111, 0.09);
    --security-warn-bg: rgba(232, 178, 58, 0.09);  --security-warn-fg: #dcbf7e;
    --message-internal-bg: rgba(232, 178, 58, 0.1);
    --message-staff-bg: rgba(87, 166, 234, 0.1);
    --action-pill-bg: rgba(255, 140, 51, 0.12);
    --activity-danger-bg: rgba(244, 103, 111, 0.14);
    --activity-success-bg: rgba(74, 194, 107, 0.14);
    --matrix-price-bg: rgba(87, 166, 234, 0.1);
    --mdr-num-bg: #3a4149;                      --mdr-num-fg: #8f979f;
    --pulse-success: rgba(74, 194, 107, 0.55);
    --pulse-success-fade: rgba(74, 194, 107, 0);

    /* The footer already reads as a dark band; in dark mode it simply sinks
       below the page surface instead of standing out against it. */
    --bar-ink: #12304f;
    --footer-background: #101317;
    --footer-text: #e4e7ea;
    --footer-link: #c8ced4;
    --footer-muted: #8f979f;
    --footer-border: rgba(255, 255, 255, 0.08);
}

/* The staff accent (see the block at the end of this file) needs a slightly
   stronger wash on a dark canvas to stay visible at the same perceived weight. */
html[data-theme="dark"] {
    --staff-accent: #f79340;
    --staff-accent-hover: #ffa85e;
    --staff-accent-bg: rgba(247, 147, 64, 0.14);
    --staff-accent-border: rgba(247, 147, 64, 0.5);
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    text-decoration: none;
    color: var(--primary-color);
}

ul {
    list-style: none;
}

button {
    cursor: pointer;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.primary-btn,
a.primary-btn {
    background-color: var(--primary-color);
    color: var(--on-primary);
    display: inline-block;
    padding: 10px 24px;
    border-radius: 4px;
    font-weight: 500;
    font-size: inherit;
    line-height: 1.5;
    text-decoration: none;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.primary-btn:hover,
a.primary-btn:hover {
    background-color: var(--primary-hover);
    color: var(--on-primary);
}

.secondary-btn,
a.secondary-btn {
    background-color: var(--surface-alt);
    color: var(--text-color);
    display: inline-block;
    padding: 10px 24px;
    border-radius: 4px;
    font-weight: 500;
    font-size: inherit;
    line-height: 1.5;
    text-decoration: none;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.secondary-btn:hover,
a.secondary-btn:hover {
    background-color: var(--surface-alt-hover);
    color: var(--text-color);
}

.upgrade-btn,
a.upgrade-btn {
    background-color: var(--accent-color);
    color: var(--on-accent);
    display: inline-block;
    padding: 10px 24px;
    border-radius: 4px;
    font-weight: 500;
    font-size: inherit;
    text-decoration: none;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.upgrade-btn:hover,
a.upgrade-btn:hover {
    background-color: var(--accent-hover);
    color: var(--on-accent);
}

/* Impersonation Banner */
.impersonation-bar {
    background: var(--bar-ink);
    color: white;
    padding: 8px 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    font-size: 0.9rem;
    font-weight: 500;
    z-index: 101;
}

.impersonation-stop-btn {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 4px 14px;
    font-size: 0.85rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.impersonation-stop-btn:hover {
    background-color: rgba(255, 255, 255, 0.35);
}

.impersonation-switch {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 4px 8px;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    max-width: 320px;
}

.impersonation-switch option {
    color: var(--text-color);
    background-color: var(--card-background);
}

/* Searchable "Beheren als" combobox (progressive enhancement, main.js).
   Rendered instead of the plain <select> once it holds 8+ options; the input
   mirrors the .impersonation-switch styling, the panel is a light dropdown. */
.impersonation-combobox {
    position: relative;
    display: inline-block;
}

.impersonation-combobox-input {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 4px 8px;
    font-size: 0.9rem;
    font-weight: 500;
    font-family: inherit;
    border-radius: 4px;
    width: 260px;
    max-width: 320px;
}

.impersonation-combobox-input::placeholder {
    color: rgba(255, 255, 255, 0.75);
}

.impersonation-combobox-input:focus {
    outline: none;
    background-color: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.85);
}

.impersonation-combobox-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 200;
    min-width: 100%;
    max-width: 380px;
    max-height: 320px;
    overflow-y: auto;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background-color: var(--card-background);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-shadow: var(--shadow-panel);
    font-weight: 400;
}

.impersonation-combobox-panel[hidden] {
    display: none;
}

.impersonation-combobox-option {
    padding: 6px 12px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.impersonation-combobox-option--child {
    padding-left: 26px;
}

.impersonation-combobox-option--active,
.impersonation-combobox-option:hover {
    background-color: var(--background-color);
    color: var(--primary-color);
}

.impersonation-combobox-option--selected {
    font-weight: 600;
}

.impersonation-combobox-empty {
    padding: 6px 12px;
    color: var(--light-text);
    font-style: italic;
    cursor: default;
}

/* Persistent scope indicator next to the "Beheren als" switcher. */
.impersonation-scope {
    background-color: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 999px;
    padding: 3px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Header Styles */
header {
    background-color: var(--header-background);
    border-bottom: 1px solid var(--border-color);
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
}

/* The wordmark uses the pinned --logo-* literals, never the themeable brand
   tokens, so switching to dark mode leaves the logo colours untouched. */
.logo h1 {
    color: var(--logo-blue);
    font-weight: 700;
}

/* Portal header: the wordmark is a plain span (page titles own the <h1>),
   sized like the old heading. */
.logo .logo-word {
    display: block;
    color: var(--logo-blue);
    font-size: 2em;
    font-weight: 700;
}

.logo span {
    color: var(--logo-cyan);
}

nav ul {
    display: flex;
}

nav ul li {
    margin: 0 15px;
}

nav ul li a {
    color: var(--text-color);
    font-weight: 500;
    padding: 5px 0;
    position: relative;
}

nav ul li a:hover {
    color: var(--primary-color);
}

/* The current section is marked by a fixed bar; hover only changes colour,
   so the marker always means "you are here", never "you are pointing here". */
nav ul li a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 3px;
    bottom: -2px;
    left: 0;
    background-color: var(--primary-color);
}

nav ul li a.active::after {
    width: 100%;
}

nav ul li a.active {
    color: var(--text-color);
}

.user-info {
    display: flex;
    align-items: center;
}

.user-info span {
    margin-right: 15px;
    font-weight: 500;
}

.logout-btn {
    color: var(--light-text);
    font-size: 0.9rem;
}

/* Admin Dropdown */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-toggle {
    cursor: pointer;
}

.nav-dropdown-arrow {
    font-size: 0.7em;
    margin-left: 3px;
    display: inline-block;
    transition: transform 0.2s ease;
}

.nav-dropdown.open .nav-dropdown-arrow {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    flex-direction: column;
    background-color: var(--card-background);
    border-radius: 4px;
    box-shadow: var(--shadow-dropdown);
    padding: 8px 0;
    min-width: 180px;
    z-index: 200;
}

.nav-dropdown.open .nav-dropdown-menu {
    display: flex;
}

.nav-dropdown-menu li {
    margin: 0 !important;
}

/* Section header inside a long dropdown (Beheer). Not a link: sentence case,
   quiet, with a hairline above every group except the first. */
.nav-dropdown-menu li.nav-dropdown-group {
    padding: 10px 20px 4px;
    color: var(--light-text);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}
.nav-dropdown-menu li.nav-dropdown-group ~ li.nav-dropdown-group {
    margin-top: 6px !important;
    border-top: 1px solid var(--border-color);
}
.nav-dropdown-menu li.nav-dropdown-group:first-child { padding-top: 4px; }

.nav-dropdown-menu li a {
    display: block;
    padding: 8px 20px !important;
    color: var(--text-color) !important;
    font-size: 0.9rem !important;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

.nav-dropdown-menu li a::after {
    display: none !important;
}

.nav-dropdown-menu li a:hover {
    background-color: var(--background-color);
    color: var(--primary-color) !important;
}

.nav-dropdown-menu li a.active {
    color: var(--primary-color) !important;
    background-color: var(--background-color);
}

/* Form-based dropdown items (e.g. the "Beheren als" company switcher) styled to
   match the link items above. */
.nav-dropdown-menu li form {
    margin: 0;
}
.nav-dropdown-menu .nav-dropdown-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 20px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-color);
    white-space: nowrap;
    transition: background-color 0.15s ease;
}
.nav-dropdown-menu .nav-dropdown-btn:hover {
    background-color: var(--background-color);
    color: var(--primary-color);
}
.nav-dropdown-menu .nav-dropdown-btn.active {
    color: var(--primary-color);
    background-color: var(--background-color);
}

/* Caret button that toggles a submenu (the label next to it is a real link). */
.nav-dropdown-caret {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px 2px 5px 4px;
    color: inherit;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}
/* The user-menu toggle is a button styled like the old "Welkom, …" text. */
button.nav-dropdown-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    color: var(--light-text);
    padding: 5px 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.user-menu { position: relative; }
/* Right-align the user menu so it doesn't clip off the right edge. */
.user-menu .nav-dropdown-menu {
    left: auto;
    right: 0;
    transform: none;
}
/* Bridge the 10px gap between label and menu so hover doesn't drop. */
.nav-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
}
/* Desktop: open the submenu on hover; the .open class pins it for touch. */
@media (min-width: 769px) {
    .nav-dropdown:hover > .nav-dropdown-menu { display: flex; }
    .nav-dropdown:hover .nav-dropdown-arrow { transform: rotate(180deg); }
}

/* ── Notifications bell + dropdown panel ─────────────────────────────── */
.notif-menu { position: relative; display: inline-flex; margin-right: 6px; }
.notif-toggle {
    position: relative;
    background: none; border: none; cursor: pointer;
    color: var(--light-text); padding: 5px 6px;
    display: inline-flex; align-items: center;
}
.notif-toggle svg { width: 22px; height: 22px; }
.notif-toggle:hover { color: var(--primary-color); }
.notif-badge {
    position: absolute; top: -1px; right: -1px;
    min-width: 17px; height: 17px; padding: 0 4px;
    background: var(--accent-color); color: var(--on-accent);
    font-size: 0.68rem; font-weight: 700; line-height: 17px;
    text-align: center; border-radius: 999px; box-sizing: border-box;
}
/* Right-align the wide panel so it doesn't clip off the viewport edge. */
.notif-menu .nav-dropdown-menu.notif-panel {
    left: auto; right: 0; transform: none;
    width: 340px; max-width: 92vw; padding: 0;
}
.notif-panel-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px; border-bottom: 1px solid var(--border-color);
    font-weight: 600;
}
.notif-panel-count { font-size: 0.78rem; font-weight: 500; color: var(--accent-text); }
.notif-list { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow-y: auto; }
.notif-item { position: relative; margin: 0 !important; border-bottom: 1px solid var(--border-color); }
.notif-item > a { display: block; padding: 10px 40px 10px 16px !important; white-space: normal !important; }
.notif-delete-form { position: absolute; top: 6px; right: 8px; margin: 0; }
.notif-delete {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; padding: 0; border: none; border-radius: 4px;
    background: none; color: var(--light-text); cursor: pointer; font-size: 0.9rem;
}
.notif-delete:hover, .notif-delete:focus-visible { color: var(--danger-color); background: var(--background-color); }
.notif-item > a::after { display: none !important; }
.notif-item--unread { background: var(--notif-unread-bg); }
.notif-item-title { display: block; font-size: 0.88rem; font-weight: 500; color: var(--text-color) !important; }
.notif-item--unread .notif-item-title { font-weight: 700; }
.notif-item-body { display: block; font-size: 0.8rem; color: var(--light-text); margin-top: 2px; }
.notif-item-meta {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    margin-top: 6px; font-size: 0.72rem; color: var(--light-text);
}
.notif-chip {
    padding: 1px 7px; border-radius: 999px;
    background: var(--background-color); color: var(--light-text); font-size: 0.7rem;
}
.notif-chip--sev-hoog { background: var(--sev-high-bg); color: var(--danger-color); }
.notif-chip--sev-midden { background: var(--sev-mid-bg); color: var(--sev-mid-fg); }
.notif-chip--sev-laag { background: var(--sev-low-bg); color: var(--primary-color); }
.notif-empty { padding: 20px 16px; text-align: center; color: var(--light-text); font-size: 0.85rem; }
.notif-panel-footer {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px; border-top: 1px solid var(--border-color); font-size: 0.82rem;
}
.notif-panel-footer > a, .notif-linkbtn { color: var(--primary-color); text-decoration: none; }
.notif-panel-footer > a:hover, .notif-linkbtn:hover { text-decoration: underline; }
.notif-linkbtn { background: none; border: none; cursor: pointer; font: inherit; padding: 0; }
.notif-panel-footer form { margin: 0; }
.notif-gear { margin-left: auto; font-size: 1.05rem; text-decoration: none; }

/* Notifications list page (/meldingen/) */
.filter-chip {
    display: inline-block; padding: 4px 12px; border-radius: 999px;
    background: var(--card-background); border: 1px solid var(--border-color);
    color: var(--light-text); font-size: 0.82rem; text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.filter-chip:hover { color: var(--primary-color); border-color: var(--secondary-color); }
.filter-chip--active {
    background: var(--primary-color); border-color: var(--primary-color); color: var(--on-primary);
}
/* Keep the active chip readable on hover (the generic hover sets primary text). */
.filter-chip--active:hover { color: var(--on-primary); border-color: var(--primary-color); }
/* Option that would show nothing with the other filters kept (Detecties):
   greyed out, not a link, the title explains why. */
.filter-chip--empty, .filter-chip--empty:hover {
    color: var(--light-text); opacity: 0.5; cursor: not-allowed; border-color: var(--border-color);
}
/* Combined pill: several mutually exclusive chips joined into one pill
   (e.g. Met / Alleen / Zonder onboarding). The group draws the outer border,
   so the total height matches a single .filter-chip. */
.filter-chip-group {
    display: inline-flex; border: 1px solid var(--border-color);
    border-radius: 999px; overflow: hidden; background: var(--card-background);
    white-space: nowrap;
}
.filter-chip-group__label {
    padding: 4px 4px 4px 12px; font-size: 0.82rem; color: var(--light-text);
}
.filter-chip-group .filter-chip { border: 0; border-radius: 0; }
.filter-chip-group__label + .filter-chip { padding-left: 8px; }
.filter-chip-group .filter-chip + .filter-chip { border-left: 1px solid var(--border-color); }
@media (max-width: 600px) {
    /* Long option labels (Detecties): wrap instead of overflowing the phone width. */
    .filter-chip-group { flex-wrap: wrap; white-space: normal; border-radius: 4px; }
}
.filter-chip-group .filter-chip--active + .filter-chip,
.filter-chip-group .filter-chip + .filter-chip--active { border-left-color: var(--primary-color); }
.notif-page-list { list-style: none; margin: 20px 0 0; padding: 0; }
.notif-page-item {
    border: 1px solid var(--border-color); border-radius: 4px;
    background: var(--card-background); margin-bottom: 8px;
}
.notif-page-item > a { display: block; padding: 14px 18px; text-decoration: none; }
/* Severity: a full border in the matching tint (the severity chip in the
   meta row carries the label), mirroring the ticket-banner--* palette. */
.notif-page-item--danger { border-color: var(--tint-danger-border); }
.notif-page-item--warn { border-color: var(--tint-warning-border); }
/* Unread marker: a dot before the title, kept distinct from the severity
   border so the two signals never blur together. */
.notif-page-item--unread .notif-item-title { font-weight: 700; }
.notif-page-item--unread .notif-item-title::before {
    content: ""; display: inline-block;
    width: 8px; height: 8px; margin-right: 8px;
    border-radius: 50%; background: var(--accent-color);
    vertical-align: middle;
}

/* Notification preferences matrix (/account/meldingen/) */
.notif-prefs-table th, .notif-prefs-table td { vertical-align: middle; }
.notif-prefs-hint { font-size: 0.8rem; color: var(--light-text); }
.notif-prefs-mandatory {
    font-size: var(--fs-1);
    color: var(--light-text); background: var(--background-color);
    padding: 2px 8px; border-radius: 999px;
}
.notif-prefs-table input[type="checkbox"] { width: 17px; height: 17px; }

/* Main Content Styles */
main {
    padding: 30px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    flex: 1 0 auto;
}

h2 {
    margin-bottom: 20px;
    color: var(--text-color);
    font-size: var(--fs-4);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

/* Page titles: the heading straight inside <main> takes the next step up.
   Page templates use <h1> (the logo is no longer a heading); a few older
   pages still have <h2> here and look the same. */
main > h1,
main > h2 {
    margin-bottom: 20px;
    color: var(--text-color);
    font-size: var(--fs-5);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

h3 {
    font-size: var(--fs-3);
    line-height: 1.3;
}

/* Help icon on page titles — links to a Handleidingen KB article.
   Rendered by the {% help_icon "slug" %} template tag (knowledge/templatetags/kb.py).
   Sits inside the page title and floats to the top-right of the content column. */
.help-icon {
    float: right;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: 12px;
    border-radius: 50%;
    color: var(--light-text);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.help-icon:hover,
.help-icon:focus {
    color: var(--primary-color);
    background-color: var(--hover-primary-soft);
}

.help-icon svg {
    width: 18px;
    height: 18px;
}

/* Dashboard Styles */
.dashboard-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.summary-card {
    background-color: var(--card-background);
    border-radius: 4px;
    padding: 20px;
    border: 1px solid var(--border-color);
}

.summary-card h3 {
    margin-bottom: 10px;
    color: var(--light-text);
    font-size: var(--fs-2);
    font-weight: 600;
}

.summary-card strong {
    font-variant-numeric: tabular-nums;
}

/* Inline SVG icons from {% icon %} (templatetags/ui_icons.py): 1em, inherit
   the text colour, sit on the text baseline like a glyph would. */
.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    flex: none;
}

/* Card titles that double as navigation: keep the heading look untouched,
   just add a hover affordance so it reads as clickable. */
.card-title-link {
    color: inherit;
    text-decoration: none;
}
.card-title-link:hover { text-decoration: underline; }

.package-name {
    font-size: var(--fs-3);
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.summary-card p {
    margin-bottom: 15px;
    font-size: 1.1rem;
}

/* Beveiligingsstatus: the one loud element in the portal. It answers "ben ik
   veilig?" as a full-width band above the other cards, with the answer set in
   the largest step of the type scale. Every state gets its own surface so the
   colour alone already tells the story before anything is read. */
.security-card {
    grid-column: 1 / -1;
    padding: 28px 32px;
}
.security-card--ok {
    background: var(--security-ok-bg);
    border-color: var(--tint-success-border);
}
.security-card--alert {
    background: var(--security-alert-bg);
    border: 1px solid var(--tint-danger-border);
}
.security-card--warn {
    background: var(--security-warn-bg);
    border: 1px solid var(--tint-warning-border);
}
.security-headline {
    font-size: 1.15rem;
    font-weight: 600;
}
.security-card .security-headline {
    font-size: clamp(var(--fs-4), 3.4vw, var(--fs-6));
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin-bottom: 12px;
    max-width: 30ch;
    display: flex;
    align-items: baseline;
    gap: 0.35em;
}
.security-card .security-headline .icon {
    flex: none;
    width: 0.8em;
    height: 0.8em;
    align-self: center;
}
@media (max-width: 600px) {
    .security-card { padding: 20px; }
}
.security-headline--ok { color: var(--security-ok-fg); }
.security-headline--alert { color: var(--danger-color); }
.security-headline--warn { color: var(--security-warn-fg); }

/* "Aan de slag" checklist shown in place of the activity feed for a fresh
   (zero-device) tenant. */
.getting-started-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
}
.getting-started-checklist li {
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 1.05rem;
}
.getting-started-checklist li:last-child { border-bottom: none; }

.recent-activity {
    background-color: var(--card-background);
    border-radius: 4px;
    padding: 20px;
    border: 1px solid var(--border-color);
}

.recent-activity h3 {
    margin-bottom: 15px;
    color: var(--light-text);
}

/* Card header row: title on the left, "Alles bekijken" link on the right. */
.recent-activity__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 15px;
}
.recent-activity__head h3 { margin-bottom: 0; }
.recent-activity__all {
    font-size: 0.85rem;
    white-space: nowrap;
    color: var(--primary-color);
}
.recent-activity__all:hover { text-decoration: underline; }

.recent-activity ul li {
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
}

/* Standalone activity list (the "Alles bekijken" page, no card wrapper). */
.activity-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Merged activity row: kind icon | title + muted detail | date. Used by both
   the dashboard card and the full page; the class beats .recent-activity ul li. */
.activity-item {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}
.activity-ico {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-top: 1px;
    border-radius: 50%;
    background-color: var(--surface-muted);
    color: var(--light-text);
}
.activity-ico svg { width: 16px; height: 16px; }
.activity-ico--threat,
.activity-ico--uptime { background-color: var(--activity-danger-bg); color: var(--danger-color); }
.activity-ico--scan,
.activity-ico--training { background-color: var(--activity-success-bg); color: var(--success-color); }
.activity-ico--threat-blocked { background-color: var(--activity-success-bg); color: var(--success-color); }
.activity-ico--threat-reported { background-color: var(--banner-warn-bg); color: var(--banner-warn-fg); }

.activity-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.activity-detail {
    color: var(--light-text);
    font-size: 0.85rem;
    word-break: break-word;
}

.activity-date {
    flex: 0 0 auto;
    color: var(--lighter-text);
    font-size: 0.9rem;
    min-width: 120px;
    text-align: right;
}

.activity-desc a:hover,
a.activity-desc:hover {
    text-decoration: underline;
}

/* Environment / Devices Styles */
.action-bar {
    margin-bottom: 20px;
    display: flex;
    justify-content: flex-end;
}

.devices-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
}

.asset-top-cards {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    align-items: stretch;
}
@media (max-width: 720px) {
    .asset-top-cards {
        grid-template-columns: 1fr;
    }
}

.device-card {
    background-color: var(--card-background);
    border-radius: 4px;
    padding: 20px;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
}

.device-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--surface-alt);
    margin-right: 15px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 60%;
}

.device-icon.laptop {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%230056b3"><path d="M20 18c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2h-4zM4 6h16v10H4V6z"/></svg>');
}

.device-icon.desktop {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%230056b3"><path d="M21 2H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h7l-2 3v1h8v-1l-2-3h7c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H3V4h18v12z"/></svg>');
}

.device-icon.mobile {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%230056b3"><path d="M17 1.01L7 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z"/></svg>');
}

.device-icon.tablet {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%230056b3"><path d="M19 18H5V6h14v12zm2-14c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4z"/></svg>');
}

.device-info {
    flex-grow: 1;
}

.device-info h3 {
    margin-bottom: 5px;
}

.device-info p {
    color: var(--light-text);
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.status {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
}

.status.protected {
    background-color: var(--tint-success-bg);
    color: var(--success-text);
}

.status.vulnerable {
    background-color: var(--tint-warning-bg);
    color: var(--warning-text);
}

.status.at-risk {
    background-color: var(--tint-danger-bg);
    color: var(--danger-color);
}

/* Tickets Styles */
.tickets-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
}

.ticket-card {
    background-color: var(--card-background);
    border-radius: 4px;
    padding: 20px;
    border: 1px solid var(--border-color);
}

/* Urgency is shown by the priority badge in the card header; urgent tickets
   additionally get a tinted border so they stand out in a full grid. */
.ticket-card.urgent {
    border: 1px solid var(--tint-danger-border);
}

.ticket-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.ticket-id {
    color: var(--lighter-text);
    font-size: 0.9rem;
}

.ticket-status {
    font-size: 0.9rem;
    font-weight: 500;
}

/* Coloured pill badges for status and priority. The icon comes from the
   status_icon / priority_icon template filters. */
.status-badge,
.priority-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    vertical-align: middle;
}

/* Device tags — rounded pills; the colour comes from an inline
   background-color/color pair, this rule only gives them the pill shape so they
   stop reading as flat square blocks. */
.device-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    vertical-align: middle;
    margin: 0 3px 3px 0;
}

/* Asset detail — "Groepen bewerken" dropdown in the top toolbar */
.asset-tags-dropdown {
    position: relative;
    display: inline-block;
}
.asset-tags-dropdown > summary {
    list-style: none;
    cursor: pointer;
}
.asset-tags-dropdown > summary::-webkit-details-marker { display: none; }
.asset-tags-dropdown > summary::marker { content: ""; }
.asset-tags-dropdown__panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 30;
    width: 360px;
    max-width: min(360px, calc(100vw - 32px));
    padding: 16px 18px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--card-background);
    box-shadow: var(--shadow-lg);
}
@media (max-width: 480px) {
    .asset-tags-dropdown { position: static; }
    .asset-tags-dropdown__panel { width: 100%; left: 0; }
}

/* Advanced security-info panel — even, aligned module tiles */
.bd-adv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 14px;
    align-items: stretch;
}
.bd-adv-cell {
    display: flex;
    flex-direction: column;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--background-color);
}
.bd-adv-cell__label {
    font-size: 0.8rem;
    color: var(--light-text);
    margin-bottom: 8px;
}
.bd-adv-cell__value {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.2;
}
.bd-adv-cell__note {
    margin: 6px 0 0;
    font-size: 0.85rem;
    color: var(--light-text);
}

/* Beschermingsmodules — aligned icon column + labels */
.bd-modules {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 5px 16px;
}
.bd-module {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-color);
}
.bd-module__icon {
    flex: 0 0 1em;
    text-align: center;
    color: var(--success-color);
}
.bd-module--off,
.bd-module--off .bd-module__icon {
    color: var(--light-text);
}

/* Ticket status: a neutral chip with a coloured dot. Each status keeps its
   own hue (the --badge-*-fg tokens), but only on the dot, so a list of
   tickets reads as calm text rather than a row of pastel pills. */
.status-badge.status-new,
.status-badge.status-open,
.status-badge.status-waiting,
.status-badge.status-research,
.status-badge.status-external,
.status-badge.status-c2_check,
.status-badge.status-proposed,
.status-badge.status-resolved,
.status-badge.status-closed,
.priority-badge.priority-high,
.priority-badge.priority-urgent {
    background-color: var(--card-background);
    border: 1px solid var(--border-strong);
    color: var(--text-color);
}
.status-badge.status-new::before,
.status-badge.status-open::before,
.status-badge.status-waiting::before,
.status-badge.status-research::before,
.status-badge.status-external::before,
.status-badge.status-c2_check::before,
.status-badge.status-proposed::before,
.status-badge.status-resolved::before,
.status-badge.status-closed::before,
.priority-badge.priority-high::before,
.priority-badge.priority-urgent::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--dot, currentColor);
}
.status-badge.status-new      { --dot: var(--badge-new-fg); }
.status-badge.status-open     { --dot: var(--badge-open-fg); }
.status-badge.status-waiting  { --dot: var(--badge-waiting-fg); }
.status-badge.status-research { --dot: var(--badge-research-fg); }
.status-badge.status-external { --dot: var(--badge-external-fg); }
.status-badge.status-proposed { --dot: var(--badge-proposed-fg); }
.status-badge.status-resolved { --dot: var(--badge-resolved-fg); }
.status-badge.status-closed   { --dot: var(--badge-closed-fg); color: var(--light-text); }
/* Internal (staff-only) status keeps the staff-accent wash. */
.status-badge.status-c2_check {
    --dot: var(--staff-accent);
    background-color: var(--staff-accent-bg);
    border-color: var(--staff-accent-border);
}

/* Recente Activiteit — ticket status: red when attention is needed, grey when OK/solved. */
.activity-status {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    vertical-align: middle;
}
.activity-status--attn { background-color: var(--activity-danger-bg); color: var(--danger-color); }
.activity-status--ok   { background-color: var(--surface-muted); color: var(--light-text); }

/* Priority: only the two levels that should change what you do next get
   colour. Low and medium stay plain text, so urgency is the one thing that
   stands out in a ticket list. */
.priority-badge.priority-low,
.priority-badge.priority-medium {
    background: none;
    padding-left: 0;
    padding-right: 0;
    color: var(--light-text);
    font-weight: 500;
}
.priority-badge.priority-high {
    --dot: var(--prio-high-fg);
    background-color: var(--prio-high-bg);
    border-color: transparent;
    color: var(--prio-high-fg);
}
.priority-badge.priority-urgent {
    --dot: var(--prio-urgent-fg);
    background-color: var(--prio-urgent-bg);
    border-color: transparent;
    color: var(--prio-urgent-fg);
}

/* Keep the status + priority pills compact on ticket rows/cards so they (and
   the action pill beside them) don't stretch the column. Scoped to ticket
   contexts so the device/training status badges are untouched. */
.ticket-table .status-badge,
.ticket-table .priority-badge,
.ticket-card .status-badge,
.ticket-card .priority-badge {
    padding: 2px 8px;
    font-size: 0.74rem;
    line-height: 1.35;
    gap: 4px;
}

.ticket-table .priority-badge.priority-low,
.ticket-table .priority-badge.priority-medium,
.ticket-card .priority-badge.priority-low,
.ticket-card .priority-badge.priority-medium {
    padding-left: 0;
    padding-right: 0;
}

.ticket-card h3 {
    margin-bottom: 10px;
}

.ticket-card p {
    color: var(--light-text);
    margin-bottom: 15px;
    font-size: 0.95rem;
}

.ticket-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ticket-date {
    color: var(--lighter-text);
    font-size: 0.9rem;
}

/* ── Shared Tegels/Lijst view toggle ──────────────────────────────────────
   Used by both Tickets and Mijn Omgeving so the chooser looks and sits the
   same on both pages: right-aligned, primary-blue active segment. */
.view-toggle {
    display: inline-flex;
    margin-left: auto;            /* push to the right of its row */
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}
.view-toggle a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--light-text);
    text-decoration: none;
    background: transparent;
    transition: all .15s ease;
}
.view-toggle a + a { border-left: 1px solid var(--border-color); }
.view-toggle a:hover { color: var(--text-color); background: var(--background-color); }
.view-toggle a.active { background: var(--primary-color); color: var(--on-primary); }
.view-toggle svg { width: 15px; height: 15px; }

/* Clickable ticket titles — inherit colour normally, blue + underline on
   hover (matches the Mijn Omgeving device-name headers). */
.ticket-card h3 a.ticket-title-link,
.ticket-table a.ticket-title-link { color: inherit; text-decoration: none; }
.ticket-card h3 a.ticket-title-link:hover,
.ticket-table a.ticket-title-link:hover { color: var(--primary-color); text-decoration: underline; }

/* Tickets list (lijst) view table. */
.ticket-table-wrap {
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow-x: auto;
}
.ticket-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.ticket-table th {
    text-align: left;
    padding: 12px 14px;
    font-size: var(--fs-1);
    font-weight: 600;
    color: var(--light-text);
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}
.ticket-table td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
    vertical-align: middle;
}
.ticket-table tbody tr:last-child td { border-bottom: none; }
.ticket-table tbody tr:hover td { background: var(--hover-row); }
.ticket-table .ticket-table__id,
.ticket-table .ticket-table__date { color: var(--light-text); white-space: nowrap; }

/* Ticket Detail Styles */
.ticket-detail-header {
    background-color: var(--card-background);
    border-radius: 4px;
    padding: 20px;
    border: 1px solid var(--border-color);
    margin-bottom: 20px;
}

.ticket-detail-header h2 {
    margin-bottom: 10px;
}

.ticket-meta {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    color: var(--light-text);
    font-size: 0.9rem;
}

.ticket-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ticket-messages {
    margin-bottom: 20px;
}

.message-card {
    background-color: var(--card-background);
    border-radius: 4px;
    padding: 20px;
    border: 1px solid var(--border-color);
    margin-bottom: 10px;
}

.message-card.internal {
    background-color: var(--message-internal-bg);
    border: 1px solid var(--tint-warning-border);
}

/* Staff (CYBERCYBER Support) replies: a light-blue tint + author pill,
   parallel to the internal-note yellow treatment, so customer and staff
   messages read as visually distinct in the thread. */
.message-card.staff {
    background-color: var(--message-staff-bg);
    border: 1px solid var(--tint-primary-border);
}

/* Author role pill in a message header: grey for a customer/company, brand
   blue for CYBERCYBER staff. */
.author-pill {
    display: inline-block;
    padding: 1px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--background-color);
    color: var(--light-text);
    border: 1px solid var(--border-color);
    vertical-align: middle;
}
.author-pill--staff {
    background: var(--primary-color);
    color: var(--on-primary);
    border-color: var(--primary-color);
}

/* "Whose move" pill (Actie van u nodig / Wij zijn aan zet / raw staff label). */
.action-pill {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.72em;
    border: 1px solid var(--border-color);
    color: var(--light-text);
    white-space: nowrap;
}
.action-pill--action {
    color: var(--accent-text);
    border-color: var(--accent-color);
    background: var(--action-pill-bg);
    font-weight: 600;
}
.action-pill--neutral {
    color: var(--light-text);
}

/* Inline info/warning banner used on ticket detail (reassurance, reopen note)
   and reused elsewhere. */
.ticket-banner {
    padding: 12px 16px;
    border-radius: 4px;
    font-size: 0.92rem;
    line-height: 1.45;
}
.ticket-banner--info {
    background: var(--banner-info-bg);
    border: 1px solid var(--banner-info-border);
    color: var(--banner-info-fg);
}
.ticket-banner--warning {
    background: var(--banner-warn-bg);
    border: 1px solid var(--banner-warn-border);
    color: var(--banner-warn-fg);
}

/* Priority captions under the priority select on the ticket form. */
.priority-hints {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    font-size: 0.82rem;
    color: var(--light-text);
}
.priority-hints li {
    margin: 2px 0;
}
.priority-hints strong {
    color: var(--text-color);
}

/* Inline status-change marker in the ticket conversation timeline. */
.status-event {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 4px 0 10px;
    padding: 6px 12px;
    font-size: 0.85rem;
    color: var(--light-text);
}

.status-event-icon {
    flex: 0 0 auto;
}

.status-event-text {
    flex: 1 1 auto;
}

.status-event-when {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Collapsed run of duplicate Bitdefender repeat notifications. Full detail is
   kept in each nested .message-card; the <details> just hides it until asked. */
.repeat-group {
    margin: 4px 0 10px;
    border: 1px dashed var(--border-color);
    border-radius: 4px;
    background: var(--background-color);
}

.repeat-group-summary {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--light-text);
    list-style: none;
}

.repeat-group-summary::-webkit-details-marker {
    display: none;
}

.repeat-group-summary::before {
    content: "▸";
    flex: 0 0 auto;
    color: var(--light-text);
}

.repeat-group[open] > .repeat-group-summary::before {
    content: "▾";
}

.repeat-group-label {
    flex: 1 1 auto;
}

.repeat-group-when {
    flex: 0 0 auto;
    white-space: nowrap;
}

.repeat-group-body {
    padding: 0 12px 8px;
}

.repeat-group-body .message-card {
    margin: 8px 0 0;
}

.message-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: var(--light-text);
}

.message-header strong {
    color: var(--text-color);
}

.ticket-body {
    color: var(--text-color);
    line-height: 1.5;
    /* Unbroken tokens (GZ_PACKAGE_ID=…, hashes, long URLs) wrap instead of
       pushing the card past its column; normal words still wrap at spaces. */
    overflow-wrap: anywhere;
}

.ticket-body-intro {
    margin: 0 0 14px;
}

.ticket-body-section {
    margin: 18px 0 8px;
    font-size: var(--fs-1);
    font-weight: 600;
    color: var(--light-text);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 4px;
}

.ticket-body-section:first-child {
    margin-top: 0;
}

.ticket-body-kv {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 4px 16px;
    margin: 0 0 6px;
}

.ticket-body-kv dt {
    color: var(--light-text);
    font-weight: 500;
}

.ticket-body-kv dd {
    margin: 0;
    word-break: break-word;
}

.ticket-body code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    font-size: 0.85rem;
    background-color: var(--background-color);
    padding: 1px 6px;
    border-radius: 2px;
}

.ticket-body-chain {
    margin: 4px 0 0;
    padding-left: 22px;
}

.ticket-body-chain li {
    margin: 3px 0;
    word-break: break-all;
}

/* Collapsible "Origineel (Engels)" block beneath an auto-translated MDR note. */
.ticket-body-original {
    margin: 8px 0 6px;
    font-size: 0.9rem;
}

.ticket-body-original > summary {
    cursor: pointer;
    color: var(--light-text);
    font-weight: 500;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}

.ticket-body-original > summary::-webkit-details-marker {
    display: none;
}

.ticket-body-original > summary::before {
    content: "\25B8"; /* right-pointing triangle */
    font-size: 0.75rem;
    transition: transform 0.15s ease;
}

.ticket-body-original[open] > summary::before {
    transform: rotate(90deg);
}

.ticket-body-original-body {
    margin-top: 6px;
    padding: 8px 12px;
    border-left: 2px solid var(--border-color);
    color: var(--light-text);
}

.reply-form {
    background-color: var(--card-background);
    border-radius: 4px;
    padding: 20px;
    border: 1px solid var(--border-color);
}

.reply-form h3 {
    margin-bottom: 15px;
    color: var(--light-text);
}

/* Knowledge Base Styles */
.search-bar {
    display: flex;
    margin-bottom: 30px;
}

.search-bar input {
    flex-grow: 1;
    padding: 10px 15px;
    border: 1px solid var(--border-color);
    border-radius: 4px 0 0 4px;
    font-size: 1rem;
}

.search-btn {
    background-color: var(--primary-color);
    color: var(--on-primary);
    border-radius: 0 3px 3px 0;
    padding: 10px 20px;
}

.knowledge-categories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.category-card {
    background-color: var(--card-background);
    border-radius: 4px;
    padding: 20px;
    border: 1px solid var(--border-color);
}

.category-card h3 {
    margin-bottom: 15px;
    color: var(--primary-color);
}

.category-card ul li {
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.category-card ul li:last-child {
    border-bottom: none;
}

/* Article Detail Styles */
.article-detail {
    background-color: var(--card-background);
    border-radius: 4px;
    padding: 30px;
    border: 1px solid var(--border-color);
}

.article-detail h2 {
    margin-bottom: 10px;
}

.article-meta {
    color: var(--lighter-text);
    font-size: 0.9rem;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

.article-body {
    line-height: 1.8;
}

.article-body p {
    margin-bottom: 15px;
}

/* Billing Styles */
.billing-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.current-plan, .payment-method {
    background-color: var(--card-background);
    border-radius: 4px;
    padding: 20px;
    border: 1px solid var(--border-color);
}

.current-plan h3, .payment-method h3 {
    margin-bottom: 15px;
    color: var(--light-text);
}

.plan-details h4 {
    color: var(--primary-color);
    margin-bottom: 5px;
    font-size: 1.2rem;
}

.plan-price {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.payment-details p {
    margin-bottom: 10px;
}

.invoice-history {
    background-color: var(--card-background);
    border-radius: 4px;
    padding: 20px;
    border: 1px solid var(--border-color);
}

.invoice-history h3 {
    margin-bottom: 15px;
    color: var(--light-text);
}

table {
    width: 100%;
    border-collapse: collapse;
}

table th, table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

table th {
    font-weight: 500;
    color: var(--light-text);
}

/* Upgrade Page Styles */
.packages-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.package-card {
    background-color: var(--card-background);
    border-radius: 4px;
    padding: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
}

.package-card.current {
    border-color: var(--primary-color);
}

.package-card.recommended {
    border-color: var(--accent-color);
    transform: scale(1.05);
}

.current-label, .recommended-label {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 15px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}

.current-label {
    background-color: var(--primary-color);
    color: var(--on-primary);
}

.recommended-label {
    background-color: var(--accent-color);
    color: var(--on-accent);
}

.package-header {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

.package-header h3 {
    margin-bottom: 10px;
    color: var(--primary-color);
}

.package-price {
    font-size: 1.8rem;
    font-weight: 700;
}

.package-price span {
    font-size: 1rem;
    font-weight: 400;
    color: var(--light-text);
}

.package-features {
    flex-grow: 1;
    margin-bottom: 20px;
}

.package-features ul li {
    padding: 8px 0;
    position: relative;
    padding-left: 25px;
}

.package-features ul li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: var(--success-color);
    font-weight: bold;
}

.package-card button {
    width: 100%;
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay);
    animation: fadeIn 0.3s ease;
}

.modal.active {
    display: block;
}

.modal-content {
    background-color: var(--card-background);
    margin: 10% auto;
    padding: 30px;
    border-radius: 4px;
    box-shadow: var(--shadow);
    width: 90%;
    max-width: 600px;
    position: relative;
    animation: slideDown 0.3s ease;
}

/* Copyable install command in the "Apparaat beveiligen" MSI wrapper modal */
.msi-cmd {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    font-size: 0.8rem;
    background-color: var(--background-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 10px 12px;
    margin: 6px 0 8px;
    white-space: pre-wrap;
    word-break: break-all;
}

.msi-cmd-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 6px 0 8px;
}

.msi-cmd-row .msi-cmd {
    flex: 1;
    min-width: 0;
    margin: 0;
}

.msi-copy-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 16px;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideDown {
    from { transform: translateY(-50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--lighter-text);
}

.close-modal:hover {
    color: var(--text-color);
}

.modal h2 {
    margin-bottom: 20px;
}

/* Confirm modal (JS-vervanger van window.confirm) */
.confirm-modal-content {
    max-width: 440px;
    margin-top: 15vh;
}

.confirm-modal-message {
    color: var(--text-color);
    line-height: 1.5;
    white-space: pre-line;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 1rem;
}

/* Standalone form controls (selects/inputs used outside .form-group, e.g. the
   ticket status/assign dropdowns and bulk toolbar). Gives them a consistent,
   button-height look so they sit neatly beside .primary-btn / .secondary-btn. */
.form-control {
    /* 1rem / 1.6 line-height + 9px padding + 1px border = the same border-box
       height as .primary-btn / .secondary-btn (10px padding, no border), so
       dropdowns line up exactly with the buttons beside them. */
    padding: 9px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--input-background);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: var(--focus-ring-secondary);
}

select.form-control:not([multiple]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 34px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
}

select.form-control[multiple] {
    padding: 6px 8px;
}

select.form-control:hover {
    border-color: var(--secondary-color);
}

.form-group-checkbox label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.form-group-checkbox input[type="checkbox"] {
    width: auto;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

/* Django Messages */
.messages {
    margin-bottom: 20px;
}

.messages .alert {
    padding: 12px 20px;
    border-radius: 4px;
    margin-bottom: 10px;
    font-size: 0.95rem;
}

.messages .alert-success {
    background-color: var(--tint-success-bg);
    color: var(--success-text);
    border: 1px solid var(--success-color);
}

.messages .alert-error {
    background-color: var(--tint-danger-bg);
    color: var(--danger-color);
    border: 1px solid var(--danger-color);
}

.messages .alert-warning {
    background-color: var(--tint-warning-bg);
    color: var(--warning-text);
    border: 1px solid var(--warning-color);
}

.messages .alert-info {
    background-color: var(--tint-info-bg);
    color: var(--primary-color);
    border: 1px solid var(--secondary-color);
}

/* Form Errors */
.form-errors {
    color: var(--danger-color);
    font-size: 0.85rem;
    margin-top: 5px;
}

.errorlist {
    color: var(--danger-color);
    font-size: 0.85rem;
    list-style: none;
    padding: 0;
    margin-top: 5px;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--light-text);
}

.empty-state h3 {
    margin-bottom: 10px;
    color: var(--lighter-text);
}

/* Footer Styles */
footer {
    background-color: var(--footer-background);
    color: var(--footer-text);
    padding: 40px 30px 20px;
    margin-top: 50px;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 30px;
}

.footer-logo h2 {
    color: var(--logo-white);
    margin-bottom: 10px;
}

.footer-logo span {
    color: var(--logo-cyan);
}

.footer-links ul li {
    margin-bottom: 10px;
}

.footer-links ul li a {
    color: var(--footer-link);
}

.footer-links ul li a:hover {
    color: var(--secondary-color);
}

.footer-contact p {
    margin-bottom: 10px;
    color: var(--footer-link);
}

.copyright {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid var(--footer-border);
    color: var(--footer-muted);
    font-size: 0.9rem;
}

/* Responsive Styles */
/* Hamburger button — hidden on desktop, shown ≤768px. */
.nav-hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    color: var(--text-color);
}
.nav-hamburger svg { width: 26px; height: 26px; display: block; }

@media (max-width: 768px) {
    /* One compact row: logo · hamburger · user menu. Stays sticky. */
    header {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 10px;
        padding: 10px 16px;
    }
    .logo { margin-bottom: 0; flex: 1 1 auto; }
    .logo h1, .logo .logo-word { font-size: 1.4rem; }
    .nav-hamburger { display: inline-flex; order: 2; }
    .user-info { order: 3; flex-direction: row; align-items: center; margin: 0; }
    .user-info span { margin: 0; }

    /* Nav collapses into a full-width vertical panel below the header. */
    nav {
        order: 4;
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--card-background);
        box-shadow: var(--shadow);
        border-top: 1px solid var(--border-color);
        max-height: calc(100vh - 60px);
        overflow-y: auto;
    }
    header.nav-open nav { display: block; }
    nav ul { flex-direction: column; }
    nav ul li { margin: 0; }
    nav ul li a { display: block; padding: 13px 20px; }

    /* Dropdown children render inline/indented — no floating menus on mobile. */
    nav .nav-dropdown-menu {
        position: static;
        display: block;
        transform: none;
        box-shadow: none;
        padding: 0 0 0 18px;
        min-width: 0;
        background: var(--background-color);
    }
    nav .nav-dropdown-menu::before { display: none; }
    nav .nav-dropdown-caret { display: none; }
    /* The user menu keeps its click-to-open dropdown (it's outside <nav>). */
    .user-menu-toggle { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .user-menu-company { display: none; }

    main {
        padding: 20px 15px;
    }
    .breadcrumbs { margin-bottom: 14px; }

    .dashboard-summary,
    .devices-list,
    .tickets-list,
    .knowledge-categories,
    .billing-summary,
    .packages-container {
        grid-template-columns: 1fr;
    }

    .package-card.recommended {
        transform: none;
    }

    .footer-content {
        flex-direction: column;
    }

    .footer-logo,
    .footer-links,
    .footer-contact {
        margin-bottom: 20px;
    }
}

/* ─── Security Monitoring upgrade page ─────────────────────────────── */

.sm-hero { text-align: center; margin: 32px 0 16px; }
.sm-hero h2 { margin-bottom: 8px; }
.sm-hero__sub { color: var(--light-text); font-size: 1.1rem; }

.sm-stats {
    display: flex; gap: 16px; justify-content: center;
    margin: 16px 0 32px; flex-wrap: wrap;
}
.sm-stats__item {
    background: var(--card-background); border: 1px solid var(--border-color);
    border-radius: 4px; padding: 16px 24px; text-align: center; min-width: 160px;
}
.sm-stats__value { display: block; font-size: 1.6rem; font-weight: 700; color: var(--primary-color); }
.sm-stats__label { color: var(--light-text); font-size: 0.9rem; }

.package-price-note { color: var(--light-text); font-size: 0.85rem; margin-top: 4px; }
.package-summary { color: var(--light-text); margin: 12px 0; font-size: 0.95rem; }
.package-footnote { color: var(--light-text); font-size: 0.8rem; font-style: italic; margin-top: 8px; }

.sm-explainer {
    background: var(--card-background); border: 1px solid var(--border-color);
    border-radius: 4px; padding: 24px; margin: 32px 0;
}
.sm-explainer h3 { margin-bottom: 16px; }
.sm-explainer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.sm-explainer__grid h4 { color: var(--primary-color); margin-bottom: 8px; }
.sm-explainer__grid p { margin-bottom: 8px; }
@media (max-width: 768px) { .sm-explainer__grid { grid-template-columns: 1fr; } }

.sm-matrix {
    background: var(--card-background); border: 1px solid var(--border-color);
    border-radius: 4px; padding: 24px; margin: 32px 0;
}
.sm-matrix__header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 16px; flex-wrap: wrap; gap: 12px;
}
.sm-matrix__toggle {
    background: transparent; border: 1px solid var(--primary-color); color: var(--primary-color);
    padding: 6px 14px; border-radius: 4px; cursor: pointer; font-size: 0.9rem;
}
.sm-matrix__toggle:hover { background: var(--primary-color); color: var(--on-primary); }
.sm-matrix__table { width: 100%; border-collapse: collapse; }
.sm-matrix__table th,
.sm-matrix__table td { padding: 8px 12px; border-bottom: 1px solid var(--border-color); text-align: left; }
.sm-matrix__table th:nth-child(2),
.sm-matrix__table th:nth-child(3),
.sm-matrix__table td:nth-child(2),
.sm-matrix__table td:nth-child(3) { text-align: center; width: 140px; }
.sm-matrix__group td { background: var(--surface-sunken); }
.sm-matrix__note { color: var(--light-text); font-size: 0.85rem; margin-top: 12px; font-style: italic; }

/* Toggle button labels: show only the "destination" label, hide the other */
.sm-matrix--plain .sm-matrix__toggle-to-plain { display: none; }
.sm-matrix--jargon .sm-matrix__toggle-to-jargon { display: none; }

/* Show only the tbody matching current mode. Default (plain) survives no-JS. */
.sm-matrix--plain .sm-matrix__rows--jargon { display: none; }
.sm-matrix--jargon .sm-matrix__rows--plain { display: none; }

.sm-matrix__price-row td { background: var(--matrix-price-bg); font-size: 1.05rem; }

.sm-benefits {
    background: var(--card-background);
    padding: 24px;
    border-radius: 4px;
    margin: 32px 0;
}
.sm-benefits h3 { margin-bottom: 16px; }
.sm-benefits__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}
.sm-benefits__item h4 { color: var(--primary-color); margin-bottom: 6px; }
.sm-benefits__item p { color: var(--light-text); margin: 0; }

.muted { color: var(--light-text); font-style: italic; font-weight: normal; }


/* ─── Bewaakt / Niet bewaakt monitor badges ─────────────────────────── */

.monitor-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px 3px 8px;
    border-radius: 999px;
    margin-left: 10px;
    vertical-align: middle;
    line-height: 1.4;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
a.monitor-badge {
    text-decoration: none;
    transition: filter 0.15s ease;
}
a.monitor-badge:hover {
    filter: brightness(0.92);
    text-decoration: none;
}
.monitor-badge::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.monitor-badge--yes {
    background: var(--tint-success-bg);
    color: var(--success-text);
    border: 1px solid var(--tint-success-border);
}
.monitor-badge--yes::before {
    background: var(--success-color);
    box-shadow: 0 0 0 0 var(--pulse-success);
    animation: monitor-pulse 2.2s ease-out infinite;
}
.monitor-badge--no {
    background: var(--tint-accent-bg);
    color: var(--accent-text);
    border: 1px solid var(--tint-accent-border);
}
.monitor-badge--no::before {
    background: var(--accent-color);
}
.monitor-badge--neutral {
    background: var(--tint-neutral-bg);
    color: var(--neutral-text);
    border: 1px solid var(--tint-neutral-border);
    cursor: help;
}
.monitor-badge--neutral::before {
    background: var(--neutral-dot);
}

@keyframes monitor-pulse {
    0%   { box-shadow: 0 0 0 0 var(--pulse-success); }
    70%  { box-shadow: 0 0 0 6px var(--pulse-success-fade); }
    100% { box-shadow: 0 0 0 0 var(--pulse-success-fade); }
}
@media (prefers-reduced-motion: reduce) {
    .monitor-badge--yes::before { animation: none; }
}

/* Auto-ticket "Probleem" badge on device cards. Driven by Device.malware_status,
   linked to the device's latest open Ticket when one exists. */
.problem-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    margin-left: 8px;
    vertical-align: middle;
    line-height: 1.4;
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-decoration: none;
}
.problem-badge--infected {
    background: var(--tint-danger-bg);
    color: var(--danger-text);
    border: 1px solid var(--tint-danger-border);
}
.problem-badge--at-risk {
    background: var(--tint-warning-bg);
    color: var(--warning-text);
    border: 1px solid var(--tint-warning-border);
}
a.problem-badge:hover { filter: brightness(0.92); }

/* Inline alert used for unlinked-tenant banner on /omgeving/; .health-banner =
   push-delivery warning on the super-admin BD events page */
.alert.mb-16 { margin-bottom: 16px; }
.alert.alert-info {
    background: var(--alert-info-bg);
    color: var(--primary-color);
    border: 1px solid var(--tint-primary-border);
    padding: 16px;
    border-radius: 4px;
}
.alert.alert-info p { margin-bottom: 8px; }
.alert.health-banner {
    background: var(--tint-warning-bg);
    color: var(--warning-text);
    border: 1px solid var(--tint-warning-border);
    padding: 16px;
    border-radius: 4px;
}
.alert.health-banner p { margin-bottom: 8px; }
.alert.health-banner ul { margin: 0 0 8px 20px; }
.alert.health-banner a { color: inherit; text-decoration: underline; }

/* ─── Rapportage (reporting app) ──────────────────────────────────── */
.text-muted { color: var(--light-text); font-size: 0.9rem; }
.at-risk-text { color: var(--danger-color); }

.report-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
}
.report-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.report-stat {
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 16px;
}
.report-stat-label {
    display: block;
    font-size: var(--fs-1);
    color: var(--light-text);
}
.report-stat-value {
    display: block;
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-top: 4px;
}
.report-stat-sub { display: block; font-size: 0.8rem; color: var(--light-text); }

.report-section {
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 20px 24px;
    margin-bottom: 24px;
}
.report-section h3 {
    color: var(--primary-color);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
    margin-bottom: 16px;
}
.report-section h4 { margin: 18px 0 8px; font-size: 0.95rem; color: var(--text-color); }
.report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}
.report-kv {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-color);
}
.report-kv span:first-child { color: var(--light-text); }
.report-kv strong { margin-left: auto; color: var(--text-color); }

.status-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 6px;
}
.status-dot.clean { background: var(--success-color); }
.status-dot.at-risk { background: var(--warning-color); }
.status-dot.infected { background: var(--danger-color); }

.status-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}
.status-badge.clean { background: var(--tint-success-bg); color: var(--success-text); }
.status-badge.at_risk,
.status-badge.at-risk { background: var(--tint-warning-bg); color: var(--warning-text-gold); }
.status-badge.infected { background: var(--tint-danger-bg); color: var(--danger-color); }

/* ─── Training module ──────────────────────────────────────────── */
.status-badge.neutral { background: var(--tint-neutral-bg); color: var(--light-text); }
.status-badge.protected { background: var(--tint-success-bg); color: var(--success-text); }
.status-badge.vulnerable { background: var(--tint-warning-bg); color: var(--warning-text-gold); }

.training-card { display: flex; flex-direction: column; }
.training-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}
.training-card-head h3 { margin: 0; }
.training-meta { color: var(--light-text); font-size: 0.85rem; margin: 8px 0 14px; }
.training-card .primary-btn { margin-top: auto; align-self: flex-start; }
.page-intro { color: var(--light-text); margin-bottom: 20px; }
.section-title { margin: 28px 0 12px; }

/* Quiz form */
.quiz-form { max-width: 760px; }
.quiz-question {
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 18px 20px;
    margin-bottom: 16px;
}
/* Float the legend so it sits as a normal block at the top of the fieldset
   instead of straddling (overlapping) the fieldset's top border. */
.quiz-question legend {
    float: left;
    width: 100%;
    font-weight: 600;
    padding: 0;
    margin-bottom: 12px;
}
.quiz-qnum { color: var(--primary-color); margin-right: 4px; }
.quiz-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 4px;
    cursor: pointer;
}
.quiz-option:hover { background: var(--background-color); }
.quiz-option input { margin-top: 3px; }

/* Quiz result / feedback */
.result-summary { text-align: center; max-width: 420px; }
.result-summary .result-score { font-size: 2.4rem; font-weight: 700; margin: 6px 0; }
.result-passed h3 { color: var(--success-text); }
.result-failed h3 { color: var(--danger-color); }
.feedback-item.feedback-incorrect { border-color: var(--tint-danger-border); }
.feedback-question { font-weight: 600; margin-bottom: 8px; }
.feedback-line { margin: 4px 0; }
.feedback-line .status-badge { margin-left: 6px; }
.feedback-explanation {
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--background-color);
    border-radius: 4px;
    font-size: 0.9rem;
    color: var(--light-text);
}

/* Admin question answers list + overview matrix */
.answer-list { list-style: none; padding: 0; margin: 8px 0 0; }
.answer-list li { padding: 6px 0; border-bottom: 1px solid var(--border-color); }
.answer-list li.answer-correct { font-weight: 600; }
.answer-formset input[type="text"] { width: 100%; }
/* Wide tables (e.g. the per-module training matrix) scroll horizontally inside
   their container rather than blowing out the page width. */
.table-container { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.overview-matrix { font-size: 0.88rem; }
/* Keep result badges on one line, but let long module-name headers wrap so the
   table stays as narrow as possible. */
.overview-matrix td { white-space: nowrap; }
.overview-matrix thead th { white-space: normal; vertical-align: bottom; max-width: 120px; }
.overview-matrix thead th:first-child,
.overview-matrix thead th:nth-child(2) { white-space: nowrap; }

/* --- AI-uitleg (Bitdefender ticket explanation) --- */
.ai-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    vertical-align: -2px;
    border: 2px solid color-mix(in srgb, currentColor 45%, transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: ai-spin 0.7s linear infinite;
}
@keyframes ai-spin {
    to { transform: rotate(360deg); }
}
#ai-explain-btn[disabled] {
    opacity: 0.85;
    cursor: progress;
}
.ai-explanation-body {
    line-height: 1.6;
    color: var(--text-color);
}
.ai-explanation-body h3,
.ai-explanation-body h4,
.ai-explanation-body h5 {
    margin: 16px 0 6px;
    color: var(--primary-color);
    font-size: 1.02rem;
}
.ai-explanation-body h3:first-child,
.ai-explanation-body h4:first-child { margin-top: 0; }
.ai-explanation-body p { margin: 0 0 10px; }
.ai-explanation-body ul,
.ai-explanation-body ol { margin: 0 0 10px; padding-left: 22px; }
.ai-explanation-body li { margin-bottom: 4px; }
.ai-explanation-body code {
    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 0.88em;
}

/* --- Ticket attachments --- */
.ticket-attachments {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--border-color);
}
.ticket-attachments-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--light-text);
    margin-bottom: 8px;
}
.attachment-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.attachment {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 240px;
    text-decoration: none;
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--background-color);
    overflow: hidden;
}
.attachment:hover {
    border-color: var(--secondary-color);
}
.attachment-file {
    padding: 8px 12px;
}
.attachment-file .attachment-icon {
    font-size: 1.2rem;
}
.attachment-image {
    flex-direction: column;
    align-items: stretch;
    width: 140px;
    max-width: 140px;
    gap: 0;
}
.attachment-image img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    display: block;
    background: var(--card-background);
}
.attachment-image .attachment-name,
.attachment-file .attachment-name {
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.attachment-image .attachment-name {
    padding: 6px 8px;
}

/* --- Attachment lightbox (click to expand an image) --- */
.attachment-image { cursor: zoom-in; }
.attachment-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: var(--overlay-strong);
    cursor: zoom-out;
}
.attachment-lightbox-figure {
    margin: 0;
    max-width: 92vw;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: default;
}
.attachment-lightbox-figure img {
    max-width: 92vw;
    max-height: 84vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    background: var(--card-background);
}
.attachment-lightbox-figure figcaption {
    color: #fff;
    font-size: 0.9rem;
    text-align: center;
    word-break: break-word;
}
.attachment-lightbox-close {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}
.attachment-lightbox-close:hover { background: rgba(255, 255, 255, 0.3); }

/* --- Collapsible panels on ticket forms (attachments, status) --- */
.reply-panel {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin-bottom: 12px;
    background: var(--background-color);
}
.reply-panel > summary {
    cursor: pointer;
    padding: 10px 12px;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--text-color);
    list-style: none;
    user-select: none;
}
.reply-panel > summary::-webkit-details-marker { display: none; }
.reply-panel > summary::before {
    content: "▸";
    display: inline-block;
    margin-right: 8px;
    color: var(--light-text);
    transition: transform 0.15s ease;
}
.reply-panel[open] > summary::before { transform: rotate(90deg); }
.reply-panel[open] > summary { border-bottom: 1px solid var(--border-color); }
.reply-panel > summary:hover { color: var(--primary-color); }
.reply-panel > .form-group { padding: 12px; margin-bottom: 0; }

/* --- Emoji picker on the ticket reply textarea (built by main.js) --- */
.emoji-field { position: relative; }
.emoji-field textarea { padding-right: 42px; }
.emoji-picker {
    position: absolute;
    top: 6px;
    right: 6px;
}
.emoji-picker-toggle {
    border: none;
    background: none;
    padding: 4px;
    font-size: 1.1rem;
    line-height: 1;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0.45;
    filter: grayscale(1);
    transition: opacity 0.15s ease, filter 0.15s ease;
}
.emoji-picker-toggle:hover,
.emoji-picker-toggle:focus-visible,
.emoji-picker-toggle[aria-expanded="true"] {
    opacity: 1;
    filter: none;
}
.emoji-picker-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    display: grid;
    grid-template-columns: repeat(6, 32px);
    gap: 2px;
    padding: 6px;
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-shadow: var(--shadow-md);
    z-index: 60;
}
.emoji-picker-menu[hidden] { display: none; }
.emoji-picker-item {
    border: none;
    background: none;
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 1.15rem;
    line-height: 1;
    border-radius: 4px;
    cursor: pointer;
}
.emoji-picker-item:hover,
.emoji-picker-item:focus-visible { background: var(--background-color); }

/* --- Pending (pre-upload) attachment previews, incl. pasted images --- */
.attachment-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.attachment-pending {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 220px;
    padding: 4px 6px 4px 4px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--background-color);
}
.attachment-pending img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    flex: 0 0 auto;
}
.attachment-pending-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex: 0 0 auto;
}
.attachment-pending-name {
    font-size: 0.82rem;
    color: var(--light-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.attachment-pending-remove {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: var(--light-text);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}
.attachment-pending-remove:hover { color: var(--danger-color); }

/* ── Groepen / tags beheer ───────────────────────────────────────────── */
.content-section {
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 18px;
}
.tag-manage-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tag-manage-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
}
.tag-manage-item--dragging {
    opacity: 0.5;
    border-style: dashed;
}
.tag-manage-handle {
    cursor: grab;
    color: var(--light-text);
    font-size: 1.1rem;
    user-select: none;
    line-height: 1;
}
.tag-manage-handle:active { cursor: grabbing; }
.tag-manage-name { font-weight: 600; }
.tag-manage-badge {
    font-size: var(--fs-1);
    color: var(--light-text);
    background: var(--border-color);
    border-radius: 999px;
    padding: 1px 8px;
}
.tag-manage-delete { margin-left: auto; }
.tag-manage-delete-btn {
    background: none;
    border: none;
    color: var(--danger-color);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 2px 4px;
}
.tag-manage-delete-btn:hover { text-decoration: underline; }

/* ─── NIS2-overzicht ─────────────────────────────────────────────── */
.nis2-summary { font-weight: 600; color: var(--primary-color); white-space: nowrap; }
.nis2-measure {
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 18px 20px;
    margin-bottom: 16px;
}
.nis2-measure-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.nis2-measure-head h3 { margin: 0; font-size: 1.05rem; }
.nis2-article { font-size: 0.8rem; }
.nis2-desc { margin: 6px 0 12px; font-size: 0.9rem; }

/* Clickable measure head → guidance panel (taak #93). */
.nis2-guidance { margin: 0; }
summary.nis2-measure-head {
    cursor: pointer;
    list-style: none;
    border-radius: 4px;
    margin: -4px;
    padding: 4px;
    transition: background 0.12s ease;
}
summary.nis2-measure-head::-webkit-details-marker { display: none; }
summary.nis2-measure-head:hover { background: var(--hover-primary-soft); }
summary.nis2-measure-head:focus-visible { outline: 2px solid var(--secondary-color); outline-offset: 2px; }
.nis2-guidance-hint {
    align-self: center;
    flex-shrink: 0;
    font-size: 0.78rem;
    color: var(--info-text);
    font-weight: 600;
    white-space: nowrap;
}
.nis2-guidance-hint::before { content: "▾ "; }
.nis2-guidance[open] .nis2-guidance-hint::before { content: "▴ "; }
.nis2-guidance-body {
    margin: 12px 0 0;
    padding: 12px 14px;
    background: var(--tint-primary-soft);
    border: 1px solid var(--tint-primary-border);
    border-radius: 4px;
}
.nis2-guidance-body p { margin: 0; font-size: 0.9rem; color: var(--text-color); }

/* Beveiligingsbeleid: intro, overzicht + inwerkperiode als twee kaarten naast
   elkaar (onder elkaar op smalle schermen), actieknop onderaan de kaart. */
.policy-intro { max-width: 760px; color: var(--light-text); margin-bottom: 20px; }
.policy-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    align-items: stretch;
}
.policy-card { display: flex; flex-direction: column; }
.policy-card p { font-size: 1rem; }
.policy-counts { display: flex; flex-direction: column; gap: 10px; }
.policy-count { display: flex; align-items: center; gap: 10px; }
.policy-count .status-badge { min-width: 2.5em; text-align: center; font-variant-numeric: tabular-nums; }
.policy-card .policy-note { margin: 14px 0 0; color: var(--warning-text); font-size: 0.95rem; }
.policy-card-foot {
    margin-top: auto;
    padding-top: 16px;
}
.policy-card-foot .secondary-btn { margin-top: 0; }
.policy-form label { display: block; margin-bottom: 8px; font-weight: 500; }
.policy-form-row { display: flex; gap: 10px; align-items: stretch; }
.policy-form-row input {
    width: 8em;
    padding: 9px 12px;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    font: inherit;
    color: var(--text-color);
    background-color: var(--input-background);
}
.policy-form-row .primary-btn { margin: 0; }
.policy-card .policy-form-error { margin: 6px 0 0; color: var(--danger-color); font-size: 0.9rem; }
.policy-card .policy-form-help { margin: 6px 0 0; color: var(--light-text); font-size: 0.9rem; }
.policy-section-title { margin-top: 28px; }

/* Beveiligingsbeleid: klikbare "Aandacht vereist" statusuitleg (per apparaat). */
.policy-attention { display: inline-block; margin: 0; }
.policy-attention-badge {
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.policy-attention-badge::-webkit-details-marker { display: none; }
.policy-attention-badge::marker { content: ""; }
.policy-attention-hint::before { content: " ▾"; font-weight: 600; }
.policy-attention[open] .policy-attention-hint::before { content: " ▴"; }
.policy-attention-body {
    margin: 10px 0 0;
    padding: 12px 14px;
    background: var(--tint-danger-soft);
    border: 1px solid var(--tint-danger-border);
    border-radius: 4px;
    max-width: 420px;
    white-space: normal;
}
.policy-attention-body p { margin: 0; font-size: 0.9rem; color: var(--text-color); font-weight: normal; }
.nis2-checks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.nis2-check { border-top: 1px solid var(--border-color); padding-top: 10px; }
.nis2-check-head { display: flex; align-items: center; gap: 8px; }
.nis2-check-title { font-weight: 600; }
.nis2-check-summary { margin: 4px 0 0; color: var(--light-text); font-size: 0.9rem; }
.nis2-action {
    display: inline-block;
    margin-top: 8px;
    padding: 5px 12px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    border-radius: 4px;
    text-decoration: none;
}
.nis2-action:hover { background: var(--primary-color); color: var(--on-primary); }
.nis2-details-wrap { margin-top: 6px; font-size: 0.85rem; }
.nis2-details-wrap summary { cursor: pointer; color: var(--primary-color); }
.nis2-details { margin: 6px 0 0; padding-left: 18px; }
.nis2-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}
.nis2-pill.nis2-good { background: var(--tint-success-bg); color: var(--success-text); }
.nis2-pill.nis2-warn { background: var(--tint-warning-bg); color: var(--warning-text-gold); }
.nis2-pill.nis2-bad { background: var(--tint-danger-bg); color: var(--danger-color); }
.nis2-pill.nis2-unknown { background: var(--tint-neutral-bg); color: var(--light-text); }
.nis2-footnote { margin-top: 20px; font-size: 0.82rem; border-top: 1px solid var(--border-color); padding-top: 12px; }

/* ==========================================================================
   Shared page toolbar — the Mijn Omgeving / Tickets pattern: one row of
   controls that all share the same 40px height (search with inline icon,
   optional selects, spacer, view toggle, one primary action).
   ========================================================================== */
.page-toolbar {
    --ctl-h: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 20px;
}
.page-toolbar__search {
    position: relative;
    flex: 1 1 260px;
    max-width: 420px;
    margin: 0;
}
.page-toolbar__search input {
    width: 100%;
    height: var(--ctl-h);
    padding: 0 14px 0 38px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--card-background);
    font-size: 0.93rem;
    font-family: inherit;
    color: var(--text-color);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.page-toolbar__search input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: var(--focus-ring-primary);
}
.page-toolbar__search::before {
    content: "";
    position: absolute;
    left: 13px; top: 50%;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    background: no-repeat center/contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23666666" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>');
}
.page-toolbar__spacer { flex: 1; }
.page-toolbar .primary-btn,
.page-toolbar .secondary-btn,
.page-toolbar .danger-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: var(--ctl-h);
    padding-top: 0;
    padding-bottom: 0;
    white-space: nowrap;
}
.page-toolbar select,
.page-toolbar .form-control {
    height: var(--ctl-h);
    padding-top: 0;
    padding-bottom: 0;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--input-background);
    color: var(--text-color);
    font-size: 0.93rem;
    font-family: inherit;
    max-width: 220px;
}
.page-toolbar .view-toggle { margin-left: 0; }
.page-toolbar .view-toggle a {
    height: calc(var(--ctl-h) - 2px);
    padding-top: 0;
    padding-bottom: 0;
}

/* Action bars (top-right button rows) share the toolbar height so pages
   with both never show two button sizes. */
.action-bar {
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.action-bar .primary-btn,
.action-bar .secondary-btn,
.action-bar .danger-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding-top: 0;
    padding-bottom: 0;
    white-space: nowrap;
    margin-left: 0 !important;   /* templates used ad-hoc inline margins */
}

/* Destructive action button — outline red, filled on hover. (Was used in
   six templates but never defined, so it fell back to the bare <button>
   look and broke the button rhythm.) */
.danger-btn,
a.danger-btn {
    background-color: transparent;
    color: var(--danger-color);
    display: inline-block;
    padding: 9px 23px;               /* 1px border keeps outer size equal */
    border: 1px solid var(--tint-danger-border);
    border-radius: 4px;
    font-weight: 500;
    font-size: inherit;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}
.danger-btn:hover,
a.danger-btn:hover {
    background-color: var(--danger-color);
    border-color: var(--danger-color);
    color: var(--on-danger);
}

/* Row actions inside data tables: compact and all exactly the same size,
   whatever their color. */
.data-table .primary-btn,
.data-table .secondary-btn,
.data-table .danger-btn {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    font-size: 0.85rem;
    border-width: 1px;
    border-style: solid;
    white-space: nowrap;
}
.data-table .primary-btn { border-color: var(--primary-color); }
.data-table .secondary-btn { border-color: var(--surface-alt); }

/* ═══════════════════════════════════════════════════════════════════════════
   Super-admin (CYBERCYBER staff) only controls
   ---------------------------------------------------------------------------
   Buttons, features and menus that ONLY super-admins can see are tinted with
   the CYBERCYBER staff accent (#f58523) — detail lines, backgrounds and text —
   so staff instantly recognise which controls are exclusive to them and never
   shown to customers. Mark a single control with .staff-only; mark a feature
   block / toolbar with .staff-only-panel (its inner buttons inherit the tint).
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    --staff-accent: #f58523;
    --staff-accent-hover: #d96f19;
    --staff-accent-bg: rgba(245, 133, 35, 0.09);
    --staff-accent-border: rgba(245, 133, 35, 0.45);
}

/* --- Buttons ------------------------------------------------------------- */
/* Primary buttons only staff see become solid staff-orange. */
.staff-only.primary-btn,
a.staff-only.primary-btn,
.staff-only .primary-btn,
.staff-only-panel .primary-btn {
    background-color: var(--staff-accent);
    border-color: var(--staff-accent);
    color: var(--on-staff-accent);
}
.staff-only.primary-btn:hover,
a.staff-only.primary-btn:hover,
.staff-only .primary-btn:hover,
.staff-only-panel .primary-btn:hover {
    background-color: var(--staff-accent-hover);
    border-color: var(--staff-accent-hover);
    color: var(--on-staff-accent);
}
/* Secondary / outline buttons only staff see: orange text on a faint orange
   wash with an orange detail border. */
.staff-only.secondary-btn,
a.staff-only.secondary-btn,
.staff-only .secondary-btn,
.staff-only-panel .secondary-btn {
    background-color: var(--staff-accent-bg);
    color: var(--staff-accent);
    border: 1px solid var(--staff-accent-border);
}
.staff-only.secondary-btn:hover,
a.staff-only.secondary-btn:hover,
.staff-only .secondary-btn:hover,
.staff-only-panel .secondary-btn:hover {
    background-color: var(--staff-accent);
    color: var(--on-staff-accent);
    border-color: var(--staff-accent);
}

/* --- Feature panels / toolbars ------------------------------------------ */
/* A super-admin-only feature block: orange detail bar + faint orange wash. */
/* Staff-only "Interne samenvatting" (Ticket.internal_summary): full-width
   editor on the detail page, one-line ellipsised snippet in the ticket list. */
.internal-summary-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
}
.internal-summary-snippet {
    display: block;
    max-width: 100%;
    margin-top: 4px;
    font-size: 0.85em;
    color: var(--staff-accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ticket-card .internal-summary-snippet { margin: -4px 0 8px; }
/* In a table cell, nowrap would stretch the column instead of truncating. */
.ticket-table .internal-summary-snippet { max-width: 360px; }

.staff-only-panel {
    border: 1px solid var(--staff-accent-border);
    background-color: var(--staff-accent-bg);
    border-radius: 4px;
    padding: 12px 14px;
}

/* --- Navigation menu (Admin dropdown) ----------------------------------- */
/* The Admin dropdown is rendered only for super-admins: colour its label,
   caret and hover/active underline detail in the staff accent. */
.nav-dropdown.staff-only > .nav-dropdown-toggle,
.nav-dropdown.staff-only > .nav-dropdown-toggle:hover,
.nav-dropdown.staff-only > .nav-dropdown-caret {
    color: var(--staff-accent) !important;
}
.nav-dropdown.staff-only > .nav-dropdown-toggle::after {
    background-color: var(--staff-accent);
}
.nav-dropdown.staff-only .nav-dropdown-menu li a:hover,
.nav-dropdown.staff-only .nav-dropdown-menu li a.active {
    color: var(--staff-accent) !important;
}

/* --- Inline detail text (staff-only table columns, badges) -------------- */
.staff-only-text { color: var(--staff-accent) !important; }

/* Underline-style tab navigation (the queue-tabs look, as a component).
   Replaces button-styled "tabs" so tabs and actions are visually distinct. */
.page-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}
.page-tabs a {
    padding: 8px 14px;
    text-decoration: none;
    color: var(--light-text);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
}
.page-tabs a:hover { color: var(--text-color); }
.page-tabs a.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    font-weight: 600;
}

/* Sticky bottom bulk/selection bar — appears once something is checked.
   (Same pattern as Mijn Omgeving and Tickets, as a shared component.) */
.bulk-bar {
    position: sticky;
    bottom: 12px;
    z-index: 20;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin: 14px 0 0;
    padding: 12px 16px;
    background: var(--card-background);
    border: 1px solid var(--tint-primary-border-strong);
    border-radius: 4px;
    box-shadow: var(--shadow-bulk);
}
.bulk-bar[hidden] { display: none; }
.bulk-bar .primary-btn,
.bulk-bar .secondary-btn,
.bulk-bar .danger-btn {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 0.88rem;
    white-space: nowrap;
}
.bulk-bar select {
    height: 36px;
    padding: 0 10px;
    max-width: 220px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--input-background);
    color: var(--text-color);
    font-size: 0.88rem;
}
.bulk-bar__spacer { flex: 1; }
.bulk-bar__count { color: var(--light-text); font-size: 0.9rem; }
.bulk-check {
    width: 17px;
    height: 17px;
    accent-color: var(--primary-color);
    cursor: pointer;
    vertical-align: middle;
}

/* Banner with text left and action buttons right (dashboard nudges,
   upgrade prompts). Buttons inside are compact so the banner stays low. */
.ticket-banner--split {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.ticket-banner__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ticket-banner--split .primary-btn,
.ticket-banner--split .secondary-btn {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 0.88rem;
    white-space: nowrap;
}

/* ── Breadcrumbs (kruimelpad) ────────────────────────────── */
.breadcrumbs {
    margin: 0 0 18px;
    font-size: 0.85rem;
    color: var(--light-text);
}

.breadcrumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.breadcrumbs li {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.breadcrumbs li + li::before {
    content: "\203A"; /* > */
    content: "\203A" / "";
    color: var(--light-text);
    opacity: 0.6;
}

.breadcrumbs a {
    color: var(--light-text);
    text-decoration: none;
}

.breadcrumbs a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.breadcrumbs [aria-current="page"] {
    color: var(--text-color);
    font-weight: 600;
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── 24x7 Bewaking (MDR) settings ──────────────────────────────────────────
   Customer-facing step-wise settings screen (mdr/settings.html). Reuses the
   house form-group / ticket-banner / button styles; adds a 3-step progress
   header, collapsible panels and compact switch rows. */

/* Progress tiles: 1 › 2 › 3, grey (todo) or green (done). */
.mdr-steps {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 18px 0 6px;
}
.mdr-steps__sep { color: var(--light-text); font-size: 1.1rem; }
.mdr-tile {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--background-color);
    color: var(--light-text);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    transition: border-color .15s, background .15s, color .15s;
}
.mdr-tile:hover { border-color: var(--secondary-color); }
.mdr-tile__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--mdr-num-bg);
    color: var(--mdr-num-fg);
    font-size: 0.85rem;
}
.mdr-tile--done {
    background: var(--tint-success-bg);
    border-color: var(--success-color);
    color: var(--success-text);
}
.mdr-tile--done .mdr-tile__num { background: var(--success-color); }

.mdr-todo__list { display: block; margin-top: 4px; font-size: 0.88rem; }
.mdr-todo__list a { color: inherit; font-weight: 600; }

.mdr-expand-all { margin: 8px 0 4px; text-align: right; }

/* Collapsible step panels. */
.mdr-section {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--card-background);
    margin: 14px 0;
    overflow: hidden;
}
.mdr-section__summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
}
.mdr-section__summary::-webkit-details-marker { display: none; }
.mdr-section__summary::after {
    content: "▾";
    margin-left: auto;
    color: var(--light-text);
    transition: transform .15s;
}
details[open] .mdr-section__summary::after { transform: rotate(180deg); }
.mdr-section__dot {
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--mdr-num-bg); flex-shrink: 0;
}
.mdr-section__dot.is-done { background: var(--success-color); }
.mdr-section__title { font-size: 1.05rem; }
.mdr-section__status { margin-left: 6px; font-size: 0.85rem; font-weight: 600; color: var(--success-text); }
.mdr-section__status--todo { color: var(--light-text); }
.mdr-section__body { padding: 0 18px 20px; }

/* Contact cards. */
.mdr-contact-row {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 14px;
    margin-bottom: 12px;
    background: var(--background-color);
}
.mdr-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
}
.mdr-contact-grid .form-group { margin-bottom: 12px; }
.mdr-contact-foot {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.mdr-contact-foot .mdr-remove-contact { margin-left: auto; color: var(--danger-color); }

/* Compact switch rows (toggles + actions). Plain checkbox, tidy layout. */
.mdr-switch-list { display: flex; flex-direction: column; }
.mdr-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 600;
}
.mdr-switch__box { display: inline-flex; }
.mdr-switch__box input[type="checkbox"] { width: 18px; height: 18px; margin: 0; cursor: pointer; }
.mdr-switch__text { font-weight: 600; }
.mdr-switch--row { align-items: flex-start; padding: 4px 0; }
.mdr-switch--row .mdr-switch__box { margin-top: 2px; }
.mdr-switch__main { display: flex; flex-direction: column; }
.mdr-help { margin: 2px 0 0; font-size: 0.88rem; color: var(--light-text); font-weight: 400; }

.mdr-action-row {
    padding: 12px 0;
    border-top: 1px solid var(--border-color);
}
.mdr-action-row:first-child { border-top: none; }
.mdr-note { margin: 8px 0 0 26px; max-width: 520px; }
.mdr-note textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.95rem;
    /* Explicit tokens: without them the field inherits nothing and the browser
       paints it white, which breaks the dark theme. */
    background: var(--card-background);
    color: var(--text-color);
}
/* The exclusions field is filled from the device pages, never typed here.
   readonly (not disabled) so the text stays selectable and readable. */
.mdr-note textarea[readonly] {
    background: var(--background-color);
    color: var(--light-text);
    cursor: default;
    resize: none;
}
.mdr-note__label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--light-text);
}
.mdr-note__hint { margin: 6px 0 0; font-size: 0.85rem; color: var(--light-text); }
.mdr-note-toggle {
    display: block;
    margin: 6px 0 0 26px;
    padding: 0;
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 0.88rem;
    cursor: pointer;
}
.mdr-note-toggle:hover { text-decoration: underline; }

.mdr-actions-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
}
.mdr-actions-bar .primary-btn { margin-left: auto; }

@media (max-width: 640px) {
    .mdr-contact-grid { grid-template-columns: 1fr; }
}

/* --- "Namens" label on MSP-created tickets --------------------------------
   Subtle muted indicator ("Aangemaakt door MSP namens Klant") shown in the
   ticket meta and — compact, as "via MSP" — in the ticket lists. */
.namens-label {
    color: var(--light-text);
    font-size: 0.85em;
    font-style: italic;
    white-space: nowrap;
}

.namens-label--compact {
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 1px 8px;
    font-style: normal;
    background-color: var(--background-color);
}

/* ── 24x7 Bewaking: toegestane acties per apparaat (apparaatpagina) ───────
   Same polarity as /mdr/ step 3 — a tick means allowed, everything is on by
   default. The card itself is neutral like the policy card; only a row the
   customer switches OFF turns orange, because that is the exception. */
.asset-mdr-card {
    margin-top: 16px;
    padding: 16px 18px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--card-background);
}
.asset-mdr-card__head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.asset-mdr-card__head > div:first-child { flex: 1; min-width: 240px; }
.asset-mdr-card__label {
    font-size: var(--fs-1);
    color: var(--light-text);
    font-weight: 600;
}
.asset-mdr-card__state { margin: 6px 0 0; }
.asset-mdr-card__link { font-size: 0.9rem; white-space: nowrap; }
.asset-mdr-card__hint { margin: 10px 0 0; font-size: 0.9rem; color: var(--light-text); }
.asset-mdr-chip {
    display: inline-block;
    margin: 2px 4px 2px 0;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--card-background);
    color: var(--text-color);
    font-size: 0.85rem;
}
.asset-mdr-edit { margin-top: 12px; }
.asset-mdr-edit > summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--primary-color);
}
.asset-mdr-edit__lead { margin: 10px 0 4px; max-width: 640px; color: var(--light-text); }
.asset-mdr-edit__actions { margin-top: 12px; }
.asset-mdr-list { display: flex; flex-direction: column; }
.asset-mdr-row {
    padding: 10px 0;
    border-top: 1px solid var(--border-color);
    transition: background-color 0.15s ease;
}
.asset-mdr-row:first-child { border-top: none; }
/* An unticked action is a limitation on what the monitoring team may do —
   make that unmistakable rather than leaving it as one empty checkbox. */
.asset-mdr-row.is-excluded {
    background: var(--tint-warning-bg);
    border-radius: 4px;
    margin: 4px 0;
    padding: 10px 12px;
    border-top-color: transparent;
}
.asset-mdr-row__main {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
}
.asset-mdr-row__main input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    cursor: pointer;
}
.asset-mdr-row__title { display: block; font-weight: 600; }
.asset-mdr-row__help { display: block; font-size: 0.88rem; color: var(--light-text); }
.asset-mdr-row__note { display: block; margin-top: 2px; font-size: 0.85rem; color: var(--light-text); font-style: italic; }
.asset-mdr-row__detail { margin: 8px 0 0 26px; max-width: 520px; }
.asset-mdr-row__warning {
    margin: 0 0 8px;
    font-size: 0.88rem;
    color: var(--text-color);
    font-weight: 600;
}
.asset-mdr-row__detail input {
    width: 100%;
    padding: 7px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--card-background);
    color: var(--text-color);
    font-family: inherit;
    font-size: 0.95rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Checklist Cyberbeveiligingswet (NIS2) — /nis2/checklist/
   Prefix cbwc- (CyberBeveiligingsWet Checklist) om niet te botsen met de
   nis2-* klassen van het meet-overzicht, dat een andere pagina is.
   ═══════════════════════════════════════════════════════════════════════════ */
.cbwc-progress { display: flex; align-items: center; gap: 12px; flex: 1 1 320px; }
.cbwc-progress__bar {
    flex: 1 1 auto;
    max-width: 320px;
    height: 8px;
    border-radius: 999px;
    background: var(--surface-alt);
    overflow: hidden;
}
.cbwc-progress__bar span {
    display: block;
    height: 100%;
    background: var(--success-color);
    transition: width .2s ease;
}
.cbwc-progress__label { font-weight: 600; white-space: nowrap; font-size: 0.92rem; }

.cbwc-section {
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 18px 20px;
    margin-bottom: 16px;
}
.cbwc-section__head { display: flex; align-items: baseline; gap: 12px; }
.cbwc-section__head h3 { margin: 0; font-size: 1.05rem; flex: 1; }
.cbwc-section__intro { margin: 8px 0 14px; max-width: 760px; }
.cbwc-count {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--light-text);
    background: var(--tint-neutral-bg);
    border-radius: 999px;
    padding: 2px 10px;
    white-space: nowrap;
}
.cbwc-count--done { color: var(--success-text); background: var(--tint-success-bg); }
.cbwc-subhead { margin: 22px 0 10px; font-size: 0.95rem; }

.cbwc-items { list-style: none; padding: 0; margin: 0; }
.cbwc-item {
    border-top: 1px solid var(--border-color);
    padding: 12px 0 10px;
}
.cbwc-item:first-child { border-top: none; }
.cbwc-item.is-done .cbwc-item__title { color: var(--success-text); }
/* Eén rij: vinkje + titel links, artikelverwijzing rechts — zelfde kleine,
   grijze stijl als voorheen, alleen nu naast de titel in plaats van eronder. */
.cbwc-item__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.cbwc-item__check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; flex: 1 1 auto; min-width: 0; }
.cbwc-item__title { font-weight: 600; line-height: 1.4; }
.cbwc-check { margin-top: 2px; flex: 0 0 auto; }
.cbwc-ref {
    flex: 0 0 auto;
    margin-top: 2px;
    font-size: 0.78rem;
    color: var(--light-text);
    white-space: nowrap;
}
.cbwc-checked-by {
    display: block;
    margin: 4px 0 0 27px;
    font-size: 0.78rem;
    color: var(--light-text);
}

.cbwc-explain { margin: 6px 0 0 27px; font-size: 0.9rem; }
.cbwc-explain > summary {
    cursor: pointer;
    color: var(--primary-color);
    font-size: 0.85rem;
    width: max-content;
}
.cbwc-explain > summary:focus-visible { outline: 2px solid var(--secondary-color); outline-offset: 2px; }
.cbwc-explain__body {
    margin-top: 8px;
    padding: 12px 14px;
    background: var(--tint-primary-soft);
    border: 1px solid var(--tint-primary-border);
    border-radius: 4px;
}
.cbwc-explain__body p { margin: 0 0 8px; line-height: 1.55; }
.cbwc-explain__body p:last-child { margin-bottom: 0; }
.cbwc-evidence { color: var(--light-text); }

/* ── Zichtbaarheid: privé vs. gedeeld — bovenaan de pagina ─────────────────── */
.cbwc-visibility { margin-bottom: 14px; }
.cbwc-visibility--private {
    background: var(--tint-neutral-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
}
.cbwc-visibility strong { margin-right: 4px; }

/* ── Samenwerken: leden + uitnodigen, bovenaan vóór de checklist zelf ──────── */
/* <details>, standaard dichtgeklapt (geen `open`-attribuut in de template) —
   zelfde in-/uitklappatroon als de mdr-instellingenpagina. */
.cbwc-collab { margin-bottom: 20px; padding: 0; overflow: hidden; }
.cbwc-collab__summary {
    cursor: pointer;
    list-style: none;
    padding: 18px 20px;
    margin: 0;
}
.cbwc-collab__summary::-webkit-details-marker { display: none; }
.cbwc-collab__summary::after {
    content: "▾";
    margin-left: auto;
    color: var(--light-text);
    transition: transform .15s;
}
.cbwc-collab[open] .cbwc-collab__summary::after { transform: rotate(180deg); }
.cbwc-collab__summary:hover { background: var(--hover-primary-soft); }
.cbwc-collab__summary:focus-visible { outline: 2px solid var(--secondary-color); outline-offset: 2px; }
.cbwc-collab__body { padding: 0 20px 18px; }
.cbwc-members { list-style: none; padding: 0; margin: 0 0 16px; }
.cbwc-member {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--border-color);
}
.cbwc-member:first-child { border-top: none; }
.cbwc-member__name { font-weight: 600; }
.cbwc-member__remove {
    background: none;
    border: none;
    color: var(--danger-text);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}
.cbwc-member__remove:hover { background: var(--tint-danger-bg); }

.cbwc-invite-form { max-width: 480px; margin-top: 4px; }
.cbwc-invite-form input,
.cbwc-invite-form textarea {
    background-color: var(--input-background);
    color: var(--text-color);
    font-family: inherit;
}
.cbwc-invites { margin-top: 8px; }
.cbwc-invites__actions { text-align: right; }
.cbwc-invites__actions form { display: inline; }

.cbwc-note { margin-top: 10px; }
.cbwc-note label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--light-text);
    margin-bottom: 4px;
}
.cbwc-note__by { font-weight: 400; margin-left: 4px; }
.cbwc-note__field {
    width: 100%;
    max-width: 640px;
    resize: vertical;
    font-family: inherit;
    font-size: 0.88rem;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--input-background);
    color: var(--text-color);
}

/* ── Ontvangerskant: gedeelde lijst naast de eigen lijst ──────────────────── */
.cbwc-quote {
    margin: 0 0 16px;
    padding: 12px 16px;
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    max-width: 760px;
}
.cbwc-quote cite { display: block; margin-top: 6px; font-size: 0.85rem; color: var(--light-text); }

.cbwc-diff-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px 20px;
    margin-bottom: 16px;
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 4px;
}
.cbwc-diff-stat { display: flex; flex-direction: column; }
.cbwc-diff-stat__num { font-size: 1.4rem; font-weight: 700; }
.cbwc-diff-stat__label { font-size: 0.8rem; color: var(--light-text); }
.cbwc-diff-stat--target .cbwc-diff-stat__num { color: var(--primary-color); }
.cbwc-diff-stat__spacer { flex: 1; }
.cbwc-diff-arrow { font-size: 1.3rem; color: var(--light-text); }
.cbwc-diff-legend { list-style: none; padding: 0; margin: 0; font-size: 0.88rem; }
.cbwc-diff-legend li { display: flex; align-items: center; gap: 8px; margin: 2px 0; }

.cbwc-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.8rem;
    line-height: 1;
}
.cbwc-mark--gain { background: var(--tint-success-bg); color: var(--success-text); }
.cbwc-mark--loss { background: var(--tint-danger-bg); color: var(--danger-text); }
.cbwc-mark--same { background: var(--tint-neutral-bg); color: var(--light-text); }
.cbwc-mark--none { background: transparent; color: var(--lighter-text); }

.cbwc-item--diff { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cbwc-item--diff .cbwc-item__title { font-weight: 500; flex: 1 1 260px; }
.cbwc-item--diff.is-loss .cbwc-item__title { text-decoration: line-through; color: var(--danger-text); }
.cbwc-item--diff.is-gain .cbwc-item__title { color: var(--success-text); }
.cbwc-diff-note { font-size: 0.8rem; white-space: nowrap; }

@media (max-width: 600px) {
    .cbwc-diff-note { white-space: normal; }
    .cbwc-progress__bar { max-width: none; }
}

/* ── Checklist Cyberbeveiligingswet: afdrukken / PDF ───────────────────────
   Alleen de checklist-inhoud zelf hoort op papier: geen navigatie, geen
   beheer-acties (samenwerken/uitnodigen/verwijderen), geen invulknoppen. De
   uitleg-panelen staan standaard dichtgeklapt in het scherm maar moeten op
   papier gewoon leesbaar zijn, dus forceren we ze open ondanks het
   ontbrekende `open`-attribuut. */
@media print {
    header, footer, .breadcrumbs, .messages, .impersonation-bar,
    .cbwc-no-print {
        display: none !important;
    }
    .cbwc-explain > .cbwc-explain__body { display: block !important; }
    .cbwc-explain > summary { list-style: none; }
    .cbwc-explain > summary::-webkit-details-marker { display: none; }
    .cbwc-section { break-inside: avoid-page; border: none; box-shadow: none; }
    .cbwc-item { break-inside: avoid-page; }
    .cbwc-note__field { border-color: #999; }
}

/* --- Detecties (Omgeving): expandable per-detection details --- */
.detection-item > summary { font-weight: 500; }
/* Checkbox + <details> side by side (a checkbox inside <summary> would toggle it). */
.detection-row { display: flex; align-items: flex-start; gap: 10px; }
.detection-row > .bulk-check { margin-top: 14px; flex: none; }
.detection-row > .detection-item { flex: 1; min-width: 0; }
.detection-row--selected > .detection-item { border-color: var(--primary-color); }
.detection-item-when { color: var(--light-text); margin-right: 8px; font-variant-numeric: tabular-nums; }
.detection-item-type {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.8rem;
    background: var(--background-color);
    border: 1px solid var(--border-color);
    color: var(--light-text);
}
.detection-item-device { color: var(--light-text); font-weight: 400; }
.detection-facts {
    display: grid;
    grid-template-columns: minmax(120px, 180px) 1fr;
    gap: 6px 16px;
    margin: 0;
    padding: 12px 16px;
    background: var(--card-background);
    border-radius: 0 0 4px 4px;
    font-size: 0.92rem;
}
.detection-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 4px 16px 14px;
    background: var(--card-background);
    border-radius: 0 0 4px 4px;
    font-size: 0.9rem;
}
.detection-facts dt { color: var(--light-text); }
.detection-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.detection-facts ol { margin: 0; padding-left: 20px; }
.detection-facts code { font-size: 0.85rem; }
@media (max-width: 600px) {
    .detection-facts { grid-template-columns: 1fr; }
    .detection-facts dd { margin-bottom: 6px; }
}

/* Ticketcontacten — checkbox list on the ticket create form, the detail-page
   editor and Beheer → Ticketcontacten. */
.contact-picker { border: 1px solid var(--border-color); border-radius: 4px; padding: 10px 14px; margin: 0 0 16px; }
.contact-picker legend { font-weight: 500; padding: 0 4px; }
.contact-picker__row { display: flex; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; font-weight: 400; }
.contact-picker__row input[type="checkbox"] { width: 17px; height: 17px; margin: 0; flex: none; }
.contact-picker__row--locked { cursor: not-allowed; opacity: 0.8; }
.contact-settings-table { width: 100%; border-collapse: collapse; }
.contact-settings-table th,
.contact-settings-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border-color); }
.contact-settings-table td.contact-settings-table__check { width: 90px; text-align: center; }
.contact-settings-table input[type="checkbox"],
.contact-settings-table input[type="radio"] { width: 17px; height: 17px; margin: 0; }
.ticket-contacts { margin-top: 12px; }
.ticket-contacts__summary { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; list-style: none; }
.ticket-contacts__summary::-webkit-details-marker { display: none; }
.ticket-contacts--editable > .ticket-contacts__summary { cursor: pointer; }
.ticket-contacts__label { font-size: 0.85em; color: var(--light-text); }
.ticket-contacts__chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--border-color); background: var(--background-color); font-size: 0.85em; }
.ticket-contacts__toggle { font-size: 0.85em; color: var(--primary-color); }
.ticket-contacts__toggle::after { content: " \25BE"; }
.ticket-contacts[open] .ticket-contacts__toggle::after { content: " \25B4"; }
.ticket-contacts__editor { margin: 8px 0 0; }

/* Stale-tab guard: page greyed out after "Beheren als" changed in another tab
   (main.js, tenants:context_status). Sits above every modal/header. */
.context-stale-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 15vh 16px 16px;
    background-color: var(--overlay);
}

.context-stale-overlay[hidden] {
    display: none;
}

.context-stale-panel {
    width: 100%;
    max-width: 480px;
    padding: 24px 28px;
    background-color: var(--card-background);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.context-stale-panel h2 {
    margin-bottom: 12px;
}

.context-stale-panel p {
    line-height: 1.5;
}

.context-stale-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

/* Secondary text (dates, hints, counts). */
.light-text { color: var(--light-text); }

/* Dashboard "Te doen": all open actions in one list under the status band,
   most urgent first. Warning rows get a tinted background + full border,
   never a side stripe. */
.todo-panel {
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 20px;
    margin: -10px 0 30px;
}
.todo-panel h3 { margin: 0 0 12px; color: var(--text-color); }
.todo-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.todo-item {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 8px 16px;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    line-height: 1.45;
}
.todo-item--warn {
    background: var(--tint-warning-bg);
    border-color: var(--tint-warning-border);
}
.todo-item__text { flex: 1 1 320px; }
.todo-item__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.todo-item__actions .secondary-btn {
    display: inline-flex; align-items: center;
    height: 34px; padding-top: 0; padding-bottom: 0;
}

/* Signed-in user in the header menu toggle: name, company underneath. */
.user-menu-who { display: inline-block; vertical-align: middle; text-align: left; }
.user-menu-company {
    display: block;
    color: var(--light-text);
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.2;
    text-align: left;
}

/* Login: other ways in (SSO, demo) as quiet links under one divider, so
   "Inloggen" is the only filled button on the page. */
.login-alt {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    margin-top: 20px; padding-top: 16px;
    border-top: 1px solid var(--border-color);
    text-align: center;
}
.login-alt__link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--primary-color);
    font: 600 0.95rem var(--font-sans);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.login-alt__link:hover { color: var(--primary-hover); }
.login-alt__link:disabled { color: var(--light-text); cursor: default; text-decoration: none; }
.login-alt__hint { margin: -4px 0 0; color: var(--light-text); font-size: 0.8rem; }