/* Permanent final refinement layer. Former per-surface overlays are kept in
 * their production source order so cascade behavior remains unchanged.
 */

/* Source: audhd-automations.css */
/* AuDHD additions — audhd-automations
   Loaded after app.css; keep this as thin page-specific chrome that maps
   back to the canonical tokens in app.css. */

/* ─── Draft persistence: banner + pip ──────────────────────────────── */

.audhd-draft-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin: 0 0 8px;
    border-radius: var(--radius-md);
    background: rgba(var(--color-info-rgb, 59, 130, 246), 0.10);
    border: 1px solid rgba(var(--color-info-rgb, 59, 130, 246), 0.35);
    color: var(--color-text);
    font-size: 0.92rem;
    line-height: 1.35;
}

.audhd-draft-banner__text {
    flex: 1 1 auto;
    min-width: 0;
}

.audhd-draft-banner__text strong {
    font-weight: 600;
}

.audhd-draft-banner__actions {
    display: inline-flex;
    gap: 8px;
    flex-shrink: 0;
}

.audhd-draft-banner__btn {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 8px;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.audhd-draft-banner__btn--primary {
    background: var(--color-info);
    color: var(--color-on-accent);
    border-color: var(--color-info);
}

.audhd-draft-banner__btn--primary:hover {
    filter: brightness(1.08);
}

.audhd-draft-banner__btn--ghost {
    color: var(--color-text-muted);
    border-color: var(--color-line);
}

.audhd-draft-banner__btn--ghost:hover {
    color: var(--color-text);
    border-color: var(--color-line-strong);
}

.audhd-draft-pip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 10px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(var(--color-success-rgb, 5, 150, 105), 0.12);
    color: var(--color-success-text);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.audhd-draft-pip > span[aria-hidden] {
    font-size: 0.65rem;
    line-height: 1;
}

/* ─── Recipe gallery ──────────────────────────────────────────────── */

.audhd-recipe-gallery {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 12px 0 24px;
}

.audhd-recipe-gallery--inline {
    padding: 24px 0 32px;
}

.audhd-recipe-gallery__header {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.audhd-recipe-gallery__title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    color: var(--color-text);
}

.audhd-recipe-gallery__lead {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.45;
}

.audhd-recipe-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

@media (min-width: 768px) {
    .audhd-recipe-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }
}

.audhd-recipe-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 18px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.audhd-recipe-card:hover {
    border-color: var(--color-line-strong);
    transform: translateY(-1px);
}

/* Per-recipe domain accent (RECIPE_ACCENT -> .acc-*): a soft corner glow +
   accent-tinted border + an accent icon-chip, matching the og-card / sidebar
   nav-chip idiom so the gallery reads as part of the colour-coded app. */
.audhd-recipe-card[class*="acc-"] {
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 55%),
        var(--color-surface);
    border-color: color-mix(in srgb, var(--accent) 20%, var(--color-line));
}

.audhd-recipe-card[class*="acc-"] .audhd-recipe-card__icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.2rem;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent-text);
}

.audhd-recipe-card__icon {
    font-size: 1.6rem;
    line-height: 1;
}

.audhd-recipe-card__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--color-text);
}

.audhd-recipe-card__desc {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--color-text-muted);
    flex: 1 1 auto;
}

.audhd-recipe-card__cta {
    align-self: flex-start;
    margin-top: 4px;
}

.audhd-recipe-gallery__footer {
    display: flex;
    justify-content: center;
    padding-top: 4px;
}

.audhd-recipe-gallery__blank-link {
    appearance: none;
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font: inherit;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    transition: color 0.12s ease;
}

.audhd-recipe-gallery__blank-link:hover {
    color: var(--color-text);
    text-decoration: underline;
}

/* ─── Recipes modal ───────────────────────────────────────────────── */

.audhd-recipes-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.audhd-recipes-modal__scrim {
    position: absolute;
    inset: 0;
    background: var(--color-shell-scrim);
    border: none;
    appearance: none;
    cursor: pointer;
}

.audhd-recipes-modal__panel {
    position: relative;
    width: min(960px, 100%);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-xl);
    padding: 24px 28px;
    box-shadow: var(--shadow-card);
}

.audhd-recipes-modal__close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--color-line);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.audhd-recipes-modal__close:hover {
    color: var(--color-text);
    border-color: var(--color-line-strong);
}

/* Source: audhd-overview.css */
/* AuDHD additions — audhd-overview
   Loaded after app.css; overrides apply.

   The "Wat hapert er?" triage chip strip (.ah-triage-*) was removed from the
   Overview surface — the desktop "Meldingen" card now covers triage. The dead
   rules (which also carried a latent dark-mode severity-tint bug) were stripped
   on 2026-06-15. The <link> is retained so the overlay can host future
   Overview-only polish without re-touching index.html. */

/* Source: audhd-meer.css */
/* AuDHD additions — audhd-meer
   Loaded after app.css; overrides apply. */

/* Section header inside the Meer bottom sheet — matches the sidebar
   .nav-section visual (uppercase, muted, letter-spaced) so users build a
   single mental model across desktop sidebar + mobile sheet. */
.meer-sheet-section-label {
    margin: 14px 4px 4px;
    padding: 4px 8px;
    color: var(--color-text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

/* First section label sits flush with the sheet title — no double spacing. */
.meer-sheet-list > .meer-sheet-section-label:first-child {
    margin-top: 2px;
}

/* Logout stays calm — same row treatment as other items, only a subtle
   amber accent on the label so it reads as a verb, not a danger button. */
.meer-sheet-item--logout .meer-sheet-item-label {
    color: var(--color-solar);
}

/* Beheer-availability dot on the Meer tabbar icon. Informational
   ("there's depth here"), not a notification badge — small, no count,
   no animation. Positioned at top-right of the icon glyph. */
.mobile-tabbar-item {
    position: relative;
}
.mobile-tabbar-beheer-dot {
    position: absolute;
    top: 6px;
    /* Right offset places the dot over the icon's top-right corner
       across both 4-tab and 5-tab fill modes (icon is centered). */
    right: calc(50% - 14px);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-solar);
    pointer-events: none;
}

/* Source: audhd-microwins.css */
/* AuDHD additions — audhd-microwins
   Loaded after app.css; overrides apply. */

/* ---------- F1: Stale-card "Nu vernieuwen" button ---------- */

.status-stale-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.status-stale-row .status-stale {
    margin: 0;
}

.status-refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 12px;
    line-height: 1.2;
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, opacity 120ms ease;
    font-family: inherit;
}

.status-refresh-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.22);
}

.status-refresh-btn:focus-visible {
    outline: 2px solid var(--color-focus-outline);
    outline-offset: 2px;
}

.status-refresh-btn:disabled,
.status-refresh-btn.is-busy {
    cursor: progress;
    opacity: 0.85;
}

.status-refresh-btn.is-failed {
    border-color: color-mix(in srgb, var(--color-error) 45%, var(--color-line));
    color: var(--color-error-text);
}
/* Light: white-alpha base/hover invisible on white bg */
[data-theme="light"] .status-refresh-btn {
    background: var(--color-bg-soft);
    border-color: var(--color-line);
    color: var(--color-text);
}
[data-theme="light"] .status-refresh-btn:hover:not(:disabled) {
    background: var(--color-bg-deep);
    border-color: var(--color-line-strong);
}
[data-theme="light"] .status-refresh-btn.is-failed {
    border-color: rgba(185, 28, 28, 0.45);
    color: var(--color-error);
}

.status-refresh-spin {
    display: inline-block;
    animation: audhd-refresh-spin 0.9s linear infinite;
    animation-play-state: paused;
}

/* Only spin while the refresh is actively in flight. Idle animation on a
   visible button is exactly the kind of continuous motion that hurts AuDHD
   focus — keep it paused at rest. */
.status-refresh-btn.is-busy .status-refresh-spin {
    animation-play-state: running;
}

@keyframes audhd-refresh-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.status-refresh-text {
    white-space: nowrap;
}

/* On very tight cards, hide the text label and keep the icon only */
@media (max-width: 480px) {
    .status-refresh-text {
        display: none;
    }
    .status-refresh-btn {
        padding: 4px 8px;
    }
}

/* ---------- F2: Stays RangePicker quick-preset chips ---------- */

.range-quick-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 12px;
}

.range-quick-chip {
    appearance: none;
    padding: 6px 12px;
    font-size: 13px;
    line-height: 1.2;
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
    font-family: inherit;
}

.range-quick-chip:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.range-quick-chip:focus-visible {
    outline: 2px solid var(--color-focus-outline);
    outline-offset: 2px;
}

.range-quick-chip.is-active {
    background: var(--color-info-soft);
    border-color: color-mix(in srgb, var(--color-info) 55%, var(--color-line));
    color: var(--color-info);
}

[data-theme="light"] .range-quick-chip.is-active {
    background: var(--color-info-soft);
    border-color: rgba(var(--color-info-rgb), 0.50);
    color: var(--color-info);
}
/* Light: white-alpha base/hover border and bg are invisible on white */
[data-theme="light"] .range-quick-chip {
    background: var(--color-bg-soft);
    border-color: var(--color-line-strong);
    color: var(--color-text);
}
[data-theme="light"] .range-quick-chip:hover {
    background: var(--color-bg-deep);
    border-color: var(--color-line-strong);
}

/* Source: audhd-editor.css */
/* AuDHD additions — audhd-editor
   Loaded after audhd-automations.css. Calm error UX + plain-Dutch rule
   summary for AutomationRuleEditor. */

/* ─── Plain-Dutch rule summary bar (T5.19) ────────────────────────────
   Sits between the editor header and the WANNEER/ALS/DAN columns.
   Calm, non-interactive, single-line preview of "what this rule does". */
.audhd-editor-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin: 4px 0 12px;
    border-radius: 10px;
    background: rgba(var(--color-info-rgb, 59, 130, 246), 0.07);
    border: 1px solid rgba(var(--color-info-rgb, 59, 130, 246), 0.20);
    color: var(--color-text);
    font-size: 0.95rem;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: 0.005em;
}

.audhd-editor-summary__icon {
    flex-shrink: 0;
    font-size: 1rem;
    opacity: 0.75;
}

.audhd-editor-summary__text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.audhd-editor-summary__text--empty {
    color: var(--color-text-muted);
    font-weight: 400;
    font-style: italic;
}

.audhd-editor-summary__arrow {
    margin: 0 4px;
    color: var(--color-text-muted);
    font-weight: 600;
}

/* ─── Calm amber teaching banner (T1.1) ───────────────────────────────
   Replaces the shouty red validation strip when the user hasn't actively
   tried to save yet. Tone: "still missing one thing", not "ERROR". */
.audhd-editor-teaching {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    margin: 0 0 12px;
    border-radius: 10px;
    border-left: 3px solid var(--color-warning);
    background: var(--color-warning-soft-faint, rgba(217, 119, 6, 0.07));
    color: var(--color-text);
    font-size: 0.92rem;
    line-height: 1.4;
}

.audhd-editor-teaching__icon {
    flex-shrink: 0;
    font-size: 1rem;
    color: var(--color-warning, #d97706);
    line-height: 1.4;
}

.audhd-editor-teaching__text {
    flex: 1 1 auto;
    min-width: 0;
}

/* ─── Footer count summary (T1.2) ─────────────────────────────────────
   Tiny count-only chip that ONLY appears after a failed Opslaan attempt.
   Replaces the duplicate footer error strip. */
.audhd-editor-error-count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    margin: 8px 0 0;
    border-radius: 999px;
    background: rgba(var(--color-warning-rgb, 217, 119, 6), 0.10);
    color: var(--color-warning-text, #b45309);
    font-size: 0.85rem;
    font-weight: 500;
    width: fit-content;
}

.audhd-editor-error-count__icon {
    font-size: 0.75rem;
    line-height: 1;
}

/* ─── Sticky editor header (follow-up patch to Wave D) ────────────────
   The rule editor's actions (Terug · titel · toggle · Simuleren · Opslaan)
   live in `.automation-editor__header`, NOT a footer — there is no footer
   element. The modal panel is the scroll container (overflow-y: auto), so
   when the user scrolls a tall rule the header scrolls away with the
   content and Save becomes unreachable (tunnel-feeling failure). Pinning
   the header to the top of the panel solves it on every viewport.

   Validation 2026-05-03 confirmed `.automation-editor__footer` matched
   nothing in the DOM; the original Wave D rule was a no-op. */
.automation-editor-modal-panel .automation-editor__header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--color-surface-strong, var(--color-surface));
    border-bottom: 1px solid var(--color-line);
}

/* Source: audhd-rangepicker.css */
/* ─────────────────────────────────────────────────────────────────────────
   T1.3 — RangePicker "Bereken" button calm-when-clean

   When the displayed report already matches the inputs (the user clicked a
   preset chip, or just submitted), the Bereken button drops to the calm
   ghost style. The primary-CTA amber returns the moment a date is manually
   edited — that's when the action genuinely needs doing.

   No new colours: reuses the .btn-ghost / .btn-primary tokens from app.css.
   This file only carries the AuDHD-specific transition + a softer
   border-when-clean so the button doesn't fully vanish into the row.
   ───────────────────────────────────────────────────────────────────────── */

.range-bereken-btn {
    transition:
        background-color 220ms ease,
        border-color 220ms ease,
        color 220ms ease,
        box-shadow 220ms ease;
}

/* Calm state: ghost. Pull a soft border in so it still reads as a button
   in the input row (without the border, ghost buttons can be invisible
   next to bordered date inputs). */
.range-bereken-btn--calm {
    border-color: var(--color-line-strong);
}

.range-bereken-btn--calm:hover:not(:disabled) {
    border-color: var(--color-line-strong);
}

/* Dirty state: keep the primary amber as-is — no extra glow, the gradient
   already does the work. Override left intentionally minimal. */
.range-bereken-btn--dirty {
    /* nothing additional — .btn-primary handles it */
}

.range-picker-error {
    flex-basis: 100%;
    margin-top: 0;
}

/* Source: audhd-modi.css */
/* AuDHD additions — audhd-modi
   Loaded after app.css; overrides apply.

   T2.7.A — replace "empty" debug-leak with calm Standaardgedrag explainer
   T2.7.B — section reorder handled in Modes.js template
   T2.7.C — 1-line action summaries in mode rows (instead of "—")
   T2.7.D — relative-time chip per calendar entry, ticked by clock.now
   T2.7.E — Verwijder behind ⋯ overflow with inline confirmation
   T2.7.F — primary CTA "+ Plan een nieuwe periode" promoted next to title
*/

/* ---------- T2.7.A: calm explainer line under "Standaardgedrag" ---------- */

.mode-status-explainer {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--color-text-soft);
}

/* ---------- T2.7.C: action summary line on Modi rows ---------- */

.mode-summary {
    color: var(--color-text-soft);
    font-size: 13px;
    line-height: 1.4;
}

.mode-summary--empty {
    font-style: italic;
    opacity: 0.75;
}

/* ---------- T2.7.D: relative-time chip on Kalender rows ---------- */

.mode-calendar-when {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    font-size: 12px;
    line-height: 1.3;
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    white-space: nowrap;
}

.mode-calendar-when--future {
    color: var(--color-info);
    background: var(--color-info-soft);
    border-color: color-mix(in srgb, var(--color-info) 35%, var(--color-line));
}

.mode-calendar-when--active {
    color: var(--color-success-text);
    background: var(--color-success-soft);
    border-color: color-mix(in srgb, var(--color-success) 35%, var(--color-line));
}

/* Past variant: solid muted text + visible border instead of stacked
   opacity. Reads as quiet historical context, still legible. */
.mode-calendar-when--past {
    color: var(--color-text-soft);
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.18);
}

/* Light theme: dark-tuned text colors above are invisible on white tints;
   use semantic text-color tokens with darker peer rgba. */
[data-theme="light"] .mode-calendar-when--future {
    color: var(--color-info);
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.45);
}

[data-theme="light"] .mode-calendar-when--active {
    color: var(--color-success-text);
    background: rgba(5, 150, 105, 0.12);
    border-color: rgba(5, 150, 105, 0.45);
}

[data-theme="light"] .mode-calendar-when--past {
    color: var(--color-text-soft);
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.12);
}

/* ---------- T2.7.E: ⋯ overflow menu with inline confirmation ---------- */

.row-overflow {
    position: relative;
    display: inline-block;
}

.row-overflow-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 16px;
    line-height: 1;
    color: var(--color-text-soft);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
    font-family: inherit;
}

.row-overflow-toggle:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--color-text);
}

.row-overflow-toggle:focus-visible {
    outline: 2px solid var(--color-focus-outline);
    outline-offset: 2px;
}

.row-overflow-toggle.is-open {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text);
}

.row-overflow-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 30;
    min-width: 220px;
    padding: 6px;
    background: var(--color-surface);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.row-overflow-item {
    display: block;
    width: 100%;
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.3;
    text-align: left;
    color: var(--color-text);
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
}

.row-overflow-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.row-overflow-item--danger {
    color: var(--color-error-text);
}

.row-overflow-item--danger:hover {
    background: var(--color-error-soft);
    color: var(--color-error-text);
}

[data-theme="light"] .row-overflow-item--danger {
    color: var(--color-error);
}

[data-theme="light"] .row-overflow-item--danger:hover {
    background: rgba(185, 28, 28, 0.08);
    color: var(--color-error);
}

.row-overflow-confirm {
    padding: 8px 10px;
}

.row-overflow-confirm-text {
    margin: 0 0 8px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-text-soft);
}

.row-overflow-confirm-actions {
    display: flex;
    gap: 6px;
}

.row-overflow-confirm-actions .btn {
    flex: 1;
}

/* Light-theme overrides for the ⋯ overflow chrome.
   The dark theme uses rgba(255,255,255,0.06–0.18) for hover/open
   states and the menu border. On light surfaces those are invisible.
   Mirror with neutral-dark tints; alphas tuned slightly higher than
   the dark counterparts because dark-on-light reads lighter at equal
   alpha. (See .mode-library-chip-more block above for the same
   pattern.) */
[data-theme="light"] .row-overflow-toggle:hover {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.18);
    color: var(--color-text);
}

[data-theme="light"] .row-overflow-toggle.is-open {
    background: rgba(0, 0, 0, 0.10);
    color: var(--color-text);
}

[data-theme="light"] .row-overflow-menu {
    border-color: rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .row-overflow-item:hover {
    background: rgba(0, 0, 0, 0.06);
}

/* ---------- T2.7.F: primary CTA "+ Plan een nieuwe periode" ---------- */

.section-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.section-header-row .section-header {
    margin: 0;
}

/* The promoted CTA reuses .btn .btn-primary tokens from app.css — same
   amber gradient as the Verblijven page Bereken button. No new colours. */
.mode-calendar-cta {
    flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────
   T2.7.G — De-blur pass: hero status block + timeline-band Kalender
   Cures the "all four cards stack identically" problem by breaking the
   shared .card chrome on the status section and replacing the calendar
   list's row-grammar with phase-tinted bands distinct from the editor
   list's rows.
   ───────────────────────────────────────────────────────────────────── */

.mode-hero {
    position: relative;
    padding: 28px 28px 24px 36px;
    border-radius: var(--radius-2xl, 24px);
    background:
        radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--color-solar) 18%, transparent), transparent 38%),
        var(--color-bg-alt);
    border: 1px solid var(--color-line);
    overflow: hidden;
    isolation: isolate;
}
.mode-hero::before {
    content: '';
    position: absolute;
    left: 0; top: 14px; bottom: 14px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--color-solar);
}
.mode-hero--fallback::before { background: var(--color-text-faint); }

.mode-hero-eyebrow {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--color-text-muted);
    text-transform: uppercase;
}
.mode-hero-name {
    margin: 6px 0 0;
    font-family: var(--font-display);
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
    color: var(--color-text);
}
.mode-hero-state {
    margin-top: 6px;
    color: var(--color-text-muted);
    font-size: 0.92rem;
}
.mode-hero-source { color: var(--color-text-soft); font-weight: 600; }
.mode-hero-since { font-variant-numeric: tabular-nums; }
.mode-hero-explainer {
    margin-top: 8px;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--color-text-muted);
    max-width: 60ch;
}
.mode-hero-chips {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.mode-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-pill, 999px);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    color: var(--color-text-soft);
    font-size: 0.88rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.mode-hero-chip-icon { font-size: 0.95rem; line-height: 1; }
.mode-hero-chip--empty {
    color: var(--color-text-muted);
    font-style: italic;
    font-weight: 400;
}

/* ── Timeline bands ─────────────────────────────────────────────────── */

.mode-calendar-bands {
    list-style: none;
    padding: 0;
    margin: 12px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mode-calendar-band {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 14px 16px 14px 22px;
    border-radius: var(--radius-lg, 12px);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    transition: background 140ms ease, border-color 140ms ease;
}
.mode-calendar-band:hover {
    background: color-mix(in srgb, var(--color-bg-soft) 70%, var(--color-bg-alt));
    border-color: var(--color-line-strong);
}
.mode-calendar-band-rail {
    position: absolute;
    left: 0; top: 10px; bottom: 10px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--color-line-strong);
}
.mode-calendar-band--active {
    background: color-mix(in srgb, var(--color-solar-soft) 60%, var(--color-bg-alt));
    border-color: color-mix(in srgb, var(--color-solar) 40%, var(--color-line-strong));
}
.mode-calendar-band--active .mode-calendar-band-rail { background: var(--color-solar); }
.mode-calendar-band--future .mode-calendar-band-rail { background: var(--color-water); }
/* Past entries stay full-contrast — rail color alone communicates phase.
   Don't stack opacity on the band; it makes historical records hard to
   read for no signal gain. */
.mode-calendar-band--past .mode-calendar-band-rail { background: var(--color-text-faint); }

.mode-calendar-band-dates {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-text-soft);
    font-variant-numeric: tabular-nums;
}
.mode-calendar-band-day { font-weight: 600; color: var(--color-text); font-size: 0.95rem; }
.mode-calendar-band-arrow { color: var(--color-text-muted); font-size: 0.95rem; }

/* Body lays mode name + relative-time chip on a single line; wraps below
   only when truly narrow. Inline pill is autism-safe (single visual chunk
   instead of two stacked pieces). */
.mode-calendar-band-body {
    min-width: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    row-gap: 4px;
}
.mode-calendar-band-mode {
    font-weight: 600;
    color: var(--color-text);
    font-size: 1rem;
}

.mode-calendar-band-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .mode-hero {
        padding: 22px 20px 20px 26px;
    }
    .mode-hero-name {
        font-size: 1.65rem;
    }
    /* Mobile: keep the desktop horizontal grid (auto 1fr auto) instead of
       stacking. Each entry collapses from 4 visual rows down to 1. Compact
       paddings + font sizes fit the narrower viewport; the body still wraps
       internally if mode + status pill won't fit on one line. */
    .mode-calendar-band {
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 10px;
        padding: 10px 10px 10px 16px;
    }
    .mode-calendar-band-dates { gap: 6px; }
    .mode-calendar-band-day { font-size: 0.82rem; }
    .mode-calendar-band-arrow { font-size: 0.82rem; }
    .mode-calendar-band-mode { font-size: 0.92rem; }
    .mode-calendar-band-body {
        gap: 4px 8px;
        row-gap: 2px;
    }
    /* Hide the inline Bewerken button on mobile — the ⋯ overflow menu now
       carries both Bewerken and Verwijderen. Reduces row footprint and
       avoids the awkward two-button stack inside a constrained row. */
    .mode-calendar-band-actions .btn { display: none; }
    .mode-calendar-band-actions {
        display: flex;
        gap: 4px;
    }
}

/* ─────────────────────────────────────────────────────────────────────
   T2.7.H — Modusbibliotheek as unframed chip strip
   "Configured once, then quiet" — drop the .card frame entirely. Section
   becomes a slim label + wrapping chip strip. Each chip = tap-to-edit,
   always-visible ⋯ (NOT hover-only — long-press on touch is undiscoverable
   and motor-control unfriendly for AuDHD users). Standaard mode marked
   inline with ★, no pill badge.
   ───────────────────────────────────────────────────────────────────── */

.mode-library {
    margin-top: 4px;
}
.mode-library-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
}
.mode-library-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.mode-library-count {
    font-size: 0.75rem;
    color: var(--color-text-faint);
    font-variant-numeric: tabular-nums;
}
.mode-library-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.mode-library-chip {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    border-radius: 999px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    overflow: visible;
    transition: border-color 140ms ease, background 140ms ease;
}
.mode-library-chip:hover {
    border-color: var(--color-line-strong);
    background: color-mix(in srgb, var(--color-bg-soft) 70%, var(--color-bg-alt));
}
.mode-library-chip--default {
    border-color: color-mix(in srgb, var(--color-solar) 45%, var(--color-line-strong));
}

.mode-library-chip-body {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 4px 6px 12px;
    background: transparent;
    border: none;
    color: var(--color-text);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.2;
}
.mode-library-chip-body:focus-visible {
    outline: 2px solid var(--color-focus-outline);
    outline-offset: 2px;
    border-radius: 999px;
}
.mode-library-chip-body--readonly {
    cursor: default;
}
.mode-library-chip-star {
    color: var(--color-solar);
    font-size: 0.85rem;
    line-height: 1;
}
.mode-library-chip-name { white-space: nowrap; }

.mode-library-chip-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    padding: 0 8px 0 4px;
    margin-left: 2px;
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
    border-radius: 0 999px 999px 0;
    transition: color 120ms ease, background 120ms ease;
}
.mode-library-chip-more:hover,
.mode-library-chip-more.is-open {
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.06);
}
[data-theme="light"] .mode-library-chip-more:hover,
[data-theme="light"] .mode-library-chip-more.is-open {
    background: rgba(0, 0, 0, 0.04);
}
.mode-library-chip-more:focus-visible {
    outline: 2px solid var(--color-focus-outline);
    outline-offset: 2px;
}

.mode-library-chip-menu {
    top: calc(100% + 4px);
}

.mode-library-add {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: transparent;
    border: 1px dashed var(--color-line-strong);
    color: var(--color-text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 140ms ease, color 140ms ease;
}
.mode-library-add:hover {
    border-color: var(--color-solar);
    color: var(--color-text);
}
.mode-library-add:focus-visible {
    outline: 2px solid var(--color-focus-outline);
    outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────────
   T-STAYS-DEBLUR — /verblijven de-blur (staging prototype)

   Same recipe as the /modi de-blur: hero + bands + slim secondary list,
   different shapes for different jobs. Drops .card chrome on the summary
   (it becomes a destination), gives stays bands a cost-tinted rail
   (paid=warning, earned=success, zero=neutral), slims the empty-days
   breakdown so it doesn't compete with the stays list.
   ───────────────────────────────────────────────────────────────────── */

/* Hero — total cost is the answer the page exists to give. */
.stays-hero {
    position: relative;
    padding: 28px 28px 22px 36px;
    border-radius: var(--radius-2xl, 24px);
    background:
        radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--stays-hero-accent, var(--color-solar)) 18%, transparent), transparent 38%),
        var(--color-bg-alt);
    border: 1px solid var(--color-line);
    overflow: hidden;
    isolation: isolate;
}
.stays-hero::before {
    content: '';
    position: absolute;
    left: 0; top: 14px; bottom: 14px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--stays-hero-accent, var(--color-solar));
}
.stays-hero--paid    { --stays-hero-accent: var(--color-solar); }
.stays-hero--earned  { --stays-hero-accent: var(--color-energy); }
.stays-hero--zero    { --stays-hero-accent: var(--color-text-muted); }
.stays-hero--unknown { --stays-hero-accent: var(--color-text-muted); }

.stays-hero-eyebrow {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--color-text-muted);
    text-transform: uppercase;
}
.stays-hero-total {
    margin: 6px 0 0;
    font-family: var(--font-display);
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}
.stays-hero--paid   .stays-hero-total { color: var(--color-solar-text); }
.stays-hero--earned .stays-hero-total { color: var(--color-success-text); }

.stays-hero-chips {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.stays-hero-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--radius-pill, 999px);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    color: var(--color-text-soft);
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
}
.stays-hero-chip strong {
    color: var(--color-text);
    font-weight: 700;
    font-size: 1rem;
}
.stays-hero-chip-cost {
    color: var(--color-text-muted);
    font-size: 0.82rem;
    border-left: 1px solid var(--color-line);
    padding-left: 8px;
}

.stays-hero-breakdown {
    margin-top: 16px;
    display: grid;
    grid-template-columns: auto repeat(3, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 6px;
    padding: 14px 18px;
    border-radius: 14px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    min-width: 0;
    max-width: 560px;
    font-size: 0.88rem;
    line-height: 1.4;
}
.stays-hero-bd-row {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    align-items: baseline;
}
.stays-hero-bd-head {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-faint);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--color-line);
    margin-bottom: 4px;
}
.stays-hero-bd-head > span {
    text-align: right;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stays-hero-bd-head > span:first-child {
    text-align: left;
}
.stays-hero-bd-label {
    color: var(--color-text-muted);
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stays-hero-bd-val {
    text-align: right;
    color: var(--color-text-soft);
    font-variant-numeric: tabular-nums;
    min-width: 0;
}
.stays-hero-bd-val--total {
    font-weight: 700;
    color: var(--color-text-soft);
}
.stays-hero-bd-foot {
    padding-top: 6px;
    margin-top: 4px;
    border-top: 1px solid var(--color-line);
    font-weight: 700;
}
.stays-hero-bd-foot .stays-hero-bd-label {
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.78rem;
}
.stays-hero-bd-foot .stays-hero-bd-val,
.stays-hero-bd-foot .stays-hero-bd-val--total {
    color: var(--color-text-soft);
}
@media (max-width: 480px) {
    .stays-hero-breakdown {
        padding: 12px 14px;
        column-gap: 10px;
        font-size: 0.78rem;
    }
    .stays-hero-bd-head {
        font-size: 0.6rem;
        letter-spacing: 0.04em;
    }
}

.stays-hero-tariff {
    margin-top: 14px;
    font-size: 0.82rem;
    color: var(--color-text-muted);
    line-height: 1.45;
}
.stays-hero-tariff--unconfigured {
    color: var(--color-warning-text);
}

/* Stays list — slim section header (eyebrow), bands below. */
.stays-list-section {
    margin-top: 4px;
}
.stays-list-eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 10px;
}
.stays-list-eyebrow-count {
    color: var(--color-text-faint);
    margin-left: 4px;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
.stays-list-bands {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Stay band — date column · mode + cost body · precision chip + chevron. */
.stay-band {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 14px 16px 14px 22px;
    border-radius: var(--radius-lg, 12px);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, transform 80ms ease;
}
.stay-band:hover {
    background: color-mix(in srgb, var(--color-bg-soft) 70%, var(--color-bg-alt));
    border-color: var(--color-line-strong);
}
.stay-band:focus-visible {
    outline: 2px solid var(--color-focus-outline);
    outline-offset: 2px;
}
.stay-band:active {
    transform: scale(0.997);
}
.stay-band-rail {
    position: absolute;
    left: 0; top: 10px; bottom: 10px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--stay-band-accent, var(--color-line-strong));
}
.stay-band--paid     { --stay-band-accent: var(--color-solar); }
.stay-band--earned   { --stay-band-accent: var(--color-energy); }
.stay-band--zero     { --stay-band-accent: var(--color-line-strong); }
.stay-band--unknown  { --stay-band-accent: var(--color-text-faint); }

.stay-band-dates {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-soft);
    font-variant-numeric: tabular-nums;
    font-size: 0.88rem;
    white-space: nowrap;
}
.stay-band-day {
    color: var(--color-text);
    font-weight: 600;
}
.stay-band-arrow {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.stay-band-body {
    min-width: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
}
.stay-band-mode {
    font-weight: 600;
    color: var(--color-text);
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.stay-band-cost {
    font-variant-numeric: tabular-nums;
    font-size: 0.92rem;
    font-weight: 600;
}
.stay-band-cost--paid    { color: var(--color-solar-text); }
.stay-band-cost--earned  { color: var(--color-success-text); }
.stay-band-cost--zero    { color: var(--color-text-soft); }
.stay-band-cost--unknown { color: var(--color-text-muted); }

.stay-band-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.stay-band-chevron {
    color: var(--color-text-muted);
    font-size: 1.1rem;
    line-height: 1;
}

/* Older stays — scrollable overflow section below the top-4 */
.stays-older-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 10px;
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}
.stays-older-divider::before,
.stays-older-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-line);
}

.stays-older-scroll {
    max-height: 262px; /* ~4 rows at ~55px each + gaps */
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-line-strong) transparent;
    padding-right: 4px;
}
.stays-older-scroll::-webkit-scrollbar {
    width: 4px;
}
.stays-older-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.stays-older-scroll::-webkit-scrollbar-thumb {
    background: var(--color-line-strong);
    border-radius: 2px;
}

/* Empty-days breakdown — slim secondary section. No card chrome, no h2;
   eyebrow label + tighter row list. Visually quieter than the stays bands. */
.empty-days-section {
    margin-top: 8px;
    padding: 12px 18px 14px;
    border-radius: var(--radius-lg, 12px);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    opacity: 0.92;
}
.empty-days-eyebrow {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}

.undo-toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 8px);
    background: var(--color-surface-elevated, var(--color-surface));
    color: var(--color-text);
    box-shadow: var(--shadow-panel);
}

@media (max-width: 760px) {
    .undo-toast {
        left: 14px;
        right: 14px;
        bottom: max(92px, calc(env(safe-area-inset-bottom) + 92px));
        justify-content: space-between;
        flex-wrap: wrap;
    }
}

@media (max-width: 640px) {
    .stays-hero {
        padding: 22px 18px 18px 26px;
    }
    .stays-hero-total { font-size: 1.7rem; }

    /* Mobile: keep the desktop horizontal grid (auto 1fr auto) instead of
       stacking. Each stay collapses to a single row. */
    .stay-band {
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 10px;
        padding: 10px 10px 10px 16px;
    }
    .stay-band-dates { gap: 6px; font-size: 0.82rem; }
    .stay-band-day { font-size: 0.82rem; }
    .stay-band-arrow { font-size: 0.78rem; }
    .stay-band-mode { font-size: 0.92rem; }
    .stay-band-cost { font-size: 0.85rem; }
    .stay-band-body {
        gap: 4px 8px;
        row-gap: 2px;
    }
    .stay-band-meta {
        justify-content: flex-end;
        gap: 6px;
    }
}

/* Source: audhd-vendor-heroes.css */
/* AuDHD batch — vendor page heroes
 *
 * Replaces the "bare metric / vendor name" hero pattern with
 * "headline + state subtitle". Tado's hero stays unchanged; the rest
 * (Unifi, HeatPump, Pool, Water, Solar, Energy) now use a phrase-based
 * headline with a live state line below.
 *
 * The original hero-title class scales metric values to 64px+; for the
 * new pattern we want the headline to read as a phrase, not a number.
 * .hero-title without the legacy --solar / --pool / --heatpump modifiers
 * uses calmer phrase-typography.
 *
 * Subtitle gets slightly more weight than the legacy version so the
 * state line is the second-loudest thing on the page (after the
 * headline) — important for AuDHD scanning: the user wants the
 * device's current state, not its name.
 */

/* Headline — phrase-style. Smaller than the bare-metric variant the
   page-specific modifiers used to set, so a multi-word phrase doesn't
   wrap awkwardly on 1280px desktops. */
.hero .hero-title:not(.hero-title--solar):not(.hero-title--pool):not(.hero-title--heatpump) {
    font-size: clamp(1.7rem, 2.4vw, 2.4rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0;
}

/* Subtitle — give the state line a bit more weight than the legacy
   "describe what this page does" subtitle. Not bold, but readable. */
.hero .hero-subtitle {
    font-weight: 500;
    color: var(--color-text-muted);
    line-height: 1.4;
}

/* MELCloud schedule rows — fixed Ma..Zo positions (T1.4 AuDHD batch).
   Backend may emit days in any order; the visual order must stay
   stable across rows so users keep their spatial map of "Tuesday is
   always the second cell". Inactive slots render as muted placeholders
   to preserve column alignment. */
.schedule-days--fixed {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

.schedule-day-slot {
    display: inline-block;
    min-width: 1.4rem;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--color-text-faint);
    opacity: 0.55;
    letter-spacing: 0.04em;
}

.schedule-day-slot--active {
    color: var(--color-text);
    opacity: 1;
    font-weight: 700;
}

/* Source: audhd-admin.css */
/* AuDHD staging — admin pages (audit / system status / settings / users / comfort)
   Loaded after app.css and the other audhd-*.css files via index.html. */

/* ──────────────────────────────────────────────────────────────────────
   T4.13 — /audit grouped + coalesced rendering
   ────────────────────────────────────────────────────────────────────── */

/* Section divider rows. Span the full table width with a slim, calm header
   that breaks the 40-row sea into Vandaag / Gisteren / Eerder deze week /
   {Maand jaar} chunks. Calm, never sticky — a sticky header would amplify
   the scan-tax. */
.audit-table--grouped .ah-section-divider td {
    background: transparent;
    color: var(--color-text-muted);
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 18px 12px 8px;
    border-bottom: 1px solid var(--color-line);
}

.audit-table--grouped .ah-section-divider:first-child td {
    padding-top: 6px;
}

.ah-section-divider--mobile {
    color: var(--color-text-muted);
    font-family: var(--font-display);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 14px 12px 6px;
}

/* Two-line timestamp: absolute (HH:MM) on top, relative (X min geleden)
   muted underneath. Both render on every row so the user can scan either
   axis. tabular-nums keeps "12:08 / 1 min geleden" stacked aligned. */
.ah-time-stack {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.15;
}

.ah-time-stack .ah-time-abs {
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.ah-time-stack .ah-time-rel,
.ah-time-rel {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

/* Coalesced cluster summary — single row standing in for many. */
.audit-table--grouped .ah-cluster-row td {
    background: rgba(255, 255, 255, 0.025);
}

.ah-cluster-expand {
    margin-left: 8px;
    background: transparent;
    border: 0;
    color: var(--color-info);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
}

.ah-cluster-expand:hover,
.ah-cluster-expand:focus-visible {
    background: rgba(var(--color-info-rgb), 0.12);
    outline: none;
}

.ah-cluster-head td {
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-text-muted);
    font-size: 0.82rem;
    padding: 8px 12px;
    border-top: 1px solid var(--color-line);
    border-bottom: 1px dashed var(--color-line);
}

.ah-cluster-head--mobile {
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-text-muted);
    font-size: 0.82rem;
    padding: 10px 12px;
    border-radius: 8px;
    margin: 6px 0;
}

.audit-table--grouped .ah-cluster-child td:first-child {
    padding-left: 28px;
}

.audit-table--grouped .ah-cluster-child td {
    background: rgba(255, 255, 255, 0.018);
}

.ah-cluster-card {
    border-left: 3px solid var(--color-info);
}

/* "Geen gegevens" pill replaces dual em-dash columns when both ISP and
   Locatie are null. One muted chip, no scan tax. */
.ah-empty-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-text-muted);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* ──────────────────────────────────────────────────────────────────────
   T4.15 — Settings danger zone (Verwijder behind Geavanceerd)
   ────────────────────────────────────────────────────────────────────── */

.ah-danger-zone {
    margin-top: 20px;
    padding: 14px 16px;
    border: 1px dashed rgba(var(--color-error-rgb), 0.35);
    border-radius: 12px;
    background: rgba(var(--color-error-rgb), 0.03);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ah-danger-zone-label {
    color: rgba(var(--color-error-rgb), 0.85);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.ah-danger-zone-hint {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.ah-danger-zone-confirm-text {
    color: var(--color-text);
    font-size: 0.88rem;
}

.ah-danger-zone-confirm-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ──────────────────────────────────────────────────────────────────────
   T4.17 — /gebruikers Bewerken affordance
   ────────────────────────────────────────────────────────────────────── */

.ah-user-row {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ah-user-row-main {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}

.ah-user-row-edit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    flex-shrink: 0;
    transition: background 160ms ease, color 160ms ease;
}

.ah-user-row:hover .ah-user-row-edit,
.ah-user-row:focus-visible .ah-user-row-edit,
.ah-user-row.selected .ah-user-row-edit {
    background: rgba(var(--color-info-rgb), 0.16);
    color: var(--color-info);
}

.ah-user-row-edit-chevron {
    font-size: 1.05rem;
    line-height: 1;
}

/* ──────────────────────────────────────────────────────────────────────
   T4.18 — /comfort desktop styling
   ────────────────────────────────────────────────────────────────────── */

/* The .domain-preview rules in app.css are wrapped in @media (max-width:1100px)
   so on desktop the cards have no styling at all — broken anchor underlines,
   no spacing, "22°CInlaat" runs together because the value/label spans are
   inline by default. Mirror the mobile styling here, scaled for desktop. */
@media (min-width: 1101px) {
    .comfort-desktop-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 16px;
        margin-top: 16px;
    }

    .comfort-desktop-grid .domain-preview {
        display: grid;
        gap: 12px;
        padding: 20px;
        border: 1px solid var(--color-line);
        border-radius: 18px;
        background: var(--color-bg-alt);
        text-decoration: none;
        color: var(--color-text);
        cursor: pointer;
        transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
    }

    .comfort-desktop-grid .domain-preview:hover,
    .comfort-desktop-grid .domain-preview:focus-visible {
        border-color: var(--color-line-strong, rgba(255, 255, 255, 0.18));
        background: rgba(255, 255, 255, 0.03);
        outline: none;
    }

    .comfort-desktop-grid .domain-preview-header {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .comfort-desktop-grid .domain-preview-icon {
        display: inline-grid;
        place-items: center;
        width: 32px;
        height: 32px;
        flex-shrink: 0;
    }

    .comfort-desktop-grid .domain-preview-icon svg {
        width: 22px;
        height: 22px;
    }

    .comfort-desktop-grid .domain-preview-title {
        font-family: var(--font-display);
        font-size: 1.02rem;
        font-weight: 700;
        letter-spacing: 0;
        flex: 1 1 0;
        min-width: 0;
    }

    .comfort-desktop-grid .domain-preview-chevron {
        color: var(--color-text-muted);
        font-size: 1.3rem;
        font-weight: 700;
        flex-shrink: 0;
    }

    .comfort-desktop-grid .domain-preview-summary {
        color: var(--color-text-soft, var(--color-text-muted));
        font-size: 0.88rem;
        margin: 0;
        line-height: 1.4;
    }

    /* Stats row — display:flex with gap fixes the "22°CInlaat" run-together
       bug (spans were defaulting to inline display with no whitespace). */
    .comfort-desktop-grid .domain-preview-stats {
        display: flex;
        gap: 18px;
        flex-wrap: wrap;
    }

    .comfort-desktop-grid .domain-preview-stat {
        display: grid;
        gap: 2px;
    }

    .comfort-desktop-grid .domain-preview-stat-value {
        font-size: 1.15rem;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        letter-spacing: 0;
        color: var(--color-text);
    }

    .comfort-desktop-grid .domain-preview-stat-label {
        color: var(--color-text-muted);
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }
}

/* ─────────────────────────────────────────────────────────────────────
 * SystemStatus regelactiviteit panel (staging prototype)
 *
 * Backend (php/api/index.php /health/detail) returns:
 *   automations.recentFirings      — last 20 entries from actions.log
 *   automations.firingsLastHour    — { ruleId: count } for last 60 min
 *
 * The panel surfaces "frost guard fired at 03:14" / "solar surplus fired
 * 14× last hour" without scrolling actions.log. Closes the observability
 * gap on automation v2.
 * ───────────────────────────────────────────────────────────────────── */

.system-firings-top {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.system-firing-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    font-size: 0.78rem;
    color: var(--color-text-soft);
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.system-firing-chip strong {
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.system-firings-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.system-firing-row {
    display: grid;
    grid-template-columns: minmax(80px, auto) 1fr minmax(40px, auto);
    align-items: baseline;
    gap: 10px;
    padding: 4px 0;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--color-line);
}
.system-firing-row:last-child { border-bottom: none; }
.system-firing-time {
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
}
.system-firing-rule {
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}
.system-firing-event {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    text-align: right;
}
.system-firing-row--automation_activate .system-firing-event {
    color: var(--color-success-text);
}
.system-firing-row--automation_deactivate .system-firing-event {
    color: var(--color-text-muted);
}

.system-firings-empty {
    margin-top: 12px;
    padding: 10px;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    text-align: center;
    background: var(--color-bg-soft);
    border-radius: 8px;
}

/* Flapping-rule chip — count >= 10 firings/hour gets an amber border so
   operator-mode-deliberate scanning catches the outlier without a separate
   widget. The chip's neutral chrome stays so the AAN/UIT timeline below
   reads consistently. */
.system-firing-chip--flapping {
    border-color: color-mix(in srgb, var(--color-warning) 55%, var(--color-line));
    background: color-mix(in srgb, var(--color-warning-soft) 60%, var(--color-bg-soft));
}
.system-firing-chip--flapping strong {
    color: var(--color-warning-text);
}
[data-theme="light"] .system-firing-chip--flapping {
    border-color: color-mix(in srgb, var(--color-warning) 65%, var(--color-line));
    background: color-mix(in srgb, var(--color-warning-soft) 80%, transparent);
}

/* Loading skeleton — single-line placeholder shown while /health/detail
   is in flight. Reserves a stable height so the section grids don't pop
   in late and shift the rest of the page. Per CLAUDE.md the app prohibits
   idle animation; this skeleton is a static "Statusgegevens laden…" line,
   not an infinite shimmer. */
.system-skeleton {
    margin-top: 16px;
    padding: 14px 18px;
    border-radius: 12px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    color: var(--color-text-muted);
    font-size: 0.9rem;
}
.system-skeleton-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ──────────────────────────────────────────────────────────────────────
   Light-theme overrides for white-rgba surfaces
   ──────────────────────────────────────────────────────────────────────
   The dark theme uses faint white tints (rgba(255,255,255,0.018–0.04))
   to distinguish cluster rows, sub-rows, status pills, and pill-on-row
   chrome from the surrounding surface. On light backgrounds those tints
   are invisible (white on white). Mirror each tint with an equivalent
   neutral-dark tint so the cluster/firing/pill chrome stays distinguishable
   against light surfaces. Alpha values are slightly higher than the dark
   counterparts because dark-on-light needs a touch more weight to feel
   equivalent. */

[data-theme="light"] .audit-table--grouped .ah-cluster-row td {
    background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .ah-cluster-head td {
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .ah-cluster-head--mobile {
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .audit-table--grouped .ah-cluster-child td {
    background: rgba(0, 0, 0, 0.025);
}

[data-theme="light"] .ah-empty-pill {
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .ah-user-row-edit {
    background: rgba(0, 0, 0, 0.04);
}

@media (min-width: 1101px) {
    [data-theme="light"] .comfort-desktop-grid .domain-preview:hover,
    [data-theme="light"] .comfort-desktop-grid .domain-preview:focus-visible {
        border-color: rgba(0, 0, 0, 0.18);
        background: rgba(0, 0, 0, 0.025);
    }
}