/* ============================================================
   Horecahuis Radar — design tokens & shell
   ============================================================ */

:root {
    --hr-sidebar-bg: #0e2436;
    --hr-sidebar-bg-alt: #123049;
    --hr-sidebar-text: #a9bccd;
    --hr-sidebar-text-active: #ffffff;
    --hr-sidebar-heading: #5f7c93;
    --hr-accent: #0d9488;
    --hr-accent-dark: #0b7d73;
    --hr-accent-soft: #d9f5f1;
    --hr-bg: #f3f4f6;
    --hr-surface: #ffffff;
    --hr-bg-subtle: #eef0f2;
    --hr-border: #e5e7eb;
    --hr-text: #0f1f2e;
    --hr-text-muted: #6b7280;
    --hr-danger: #dc2626;
    --hr-radius: 0.75rem;

    /* ---- Typografische tokens (HR-05, Agenda-typografiefase, correctiepas) ----
       Eén centrale schaal i.p.v. losse font-size/-weight-waarden per
       component. Primaire UI-font is Inter (geladen via Google Fonts in
       base.html, geverifieerd via document.fonts — zie het correctiepas-
       eindrapport); het bestaande, aparte heading-lettertype (Plus Jakarta
       Sans, voor h1-h6/.hr-logo-text) blijft ongewijzigd en staat hier
       alleen als token gedocumenteerd voor hergebruik.

       Waarden zijn px-geankerd (bij de standaard 16px root-fontsize) en
       rechtstreeks afgeleid van de opgegeven visuele doelranges — niet
       willekeurig gekozen rem-waarden zoals de vorige pas. Gewichten
       beperkt tot 400/500/600 voor gewone UI; 700 uitsluitend nog gebruikt
       waar expliciet aangegeven, 800/900 niet in deze schaal. Toegepast op
       de Agenda-interface; nog niet losgelaten op de rest van HorecaRadar
       (zie .hr-agenda-page-scope hieronder voor de enige twee gedeelde
       selectors — paginatitel/-subtitel — die bewust page-scoped worden
       overschreven i.p.v. de gedeelde regel zelf te wijzigen). */
    --hr-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --hr-font-family-display: "Plus Jakarta Sans", var(--hr-font-family);

    --hr-font-size-2xl: 1.5rem;      /* 24px — Agenda paginatitel */
    --hr-font-size-xl: 1.3125rem;    /* 21px — modaltitel "Afspraak", afspraaktitel detailkaart */
    --hr-font-size-lg: 1.1875rem;    /* 19px — bevestigingsdialoog-titel ("Afspraak verwijderen?") */
    --hr-font-size-md: 0.9375rem;    /* 15px — input-/textarea-tekst, primaire kaartwaarde */
    --hr-font-size-base: 0.8125rem;  /* 13px — formulierlabels, secundaire tekst, sidebar-kop, chip */
    --hr-font-size-sm: 0.75rem;      /* 12px — sidebar/lijst/maand normale tekst */
    --hr-font-size-xs: 0.6875rem;    /* 11px — uppercase kop-labels, weekdag-/tijd-/eventbloktekst */
    --hr-font-size-button: 0.875rem; /* 14px — knoppen (bestaande, gedeelde waarde — ongewijzigd) */

    --hr-font-weight-normal: 400;
    --hr-font-weight-medium: 500;
    --hr-font-weight-semibold: 600;
    --hr-font-weight-bold: 700; /* zeer uitzonderlijk, alleen decoratieve dag-/datumcijfers */

    --hr-line-height-tight: 1.25;
    --hr-line-height-normal: 1.5;
    --hr-letter-spacing-label: 0.05em;
}

[data-theme="dark"] {
    --hr-bg: #0b1620;
    --hr-surface: #101d29;
    --hr-bg-subtle: #182635;
    --hr-border: #24333f;
    --hr-text: #e7edf2;
    --hr-text-muted: #93a4b1;
    --hr-accent-soft: #103330;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--hr-surface);
    border-color: var(--hr-border);
    color: var(--hr-text);
}
[data-theme="dark"] .form-control::placeholder {
    color: var(--hr-text-muted);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: var(--hr-surface);
    border-color: var(--hr-accent);
    color: var(--hr-text);
    box-shadow: 0 0 0 0.2rem rgba(13, 148, 136, 0.25);
}
[data-theme="dark"] .form-check-input {
    background-color: var(--hr-surface);
    border-color: var(--hr-border);
}
[data-theme="dark"] .alert-success {
    background: #0f2b22;
    color: #7fe3c3;
    border-color: #16493a;
}
[data-theme="dark"] .alert-danger {
    background: #3a1414;
    color: #f3a7a7;
    border-color: #5c1f1f;
}
[data-theme="dark"] .alert-warning {
    background: #3a2f0f;
    color: #f3d98a;
    border-color: #5c4a1a;
}
[data-theme="dark"] .alert-info {
    background: #0f2436;
    color: #9cc7e8;
    border-color: #1a3a54;
}
[data-theme="dark"] .hr-content .pagination .page-link {
    background-color: var(--hr-surface);
}

body {
    background-color: var(--hr-bg);
    color: var(--hr-text);
    font-family: var(--hr-font-family);
}

a {
    color: var(--hr-accent);
    text-decoration: none;
}
a:hover {
    color: var(--hr-accent-dark);
}

/* ---------- Shell layout ---------- */

.hr-shell {
    display: flex;
    min-height: 100vh;
}

.hr-sidebar {
    width: 248px;
    flex: 0 0 248px;
    background: var(--hr-sidebar-bg);
    color: var(--hr-sidebar-text);
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1rem;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.hr-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* ---------- Logo ---------- */

.hr-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem 1rem;
    color: #fff;
}
.hr-logo:hover {
    color: #fff;
}
.hr-logo-mark {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2.5px solid var(--hr-accent);
    box-shadow: inset 0 0 0 3px transparent;
    flex-shrink: 0;
}
.hr-logo-text {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}
.hr-logo-accent {
    color: #6fb8ad;
    font-weight: 500;
}
.hr-logo-dark {
    color: var(--hr-text);
}
.hr-logo-dark .hr-logo-accent {
    color: var(--hr-accent);
}

/* ---------- Workspace switcher ---------- */

.hr-workspace {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.6rem;
    margin-bottom: 1.25rem;
    border-radius: var(--hr-radius);
    background: var(--hr-sidebar-bg-alt);
    cursor: default;
}
.hr-workspace-avatar {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--hr-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}
.hr-workspace-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}
.hr-workspace-name {
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hr-workspace-plan {
    font-size: 0.72rem;
    color: var(--hr-sidebar-heading);
}
.hr-workspace-chevron {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--hr-sidebar-heading);
}

/* ---------- Nav ---------- */

.hr-nav {
    flex: 1 1 auto;
}
.hr-nav-group {
    margin-bottom: 1.1rem;
}
.hr-nav-heading {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hr-sidebar-heading);
    padding: 0 0.6rem 0.4rem;
}
.hr-nav-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--hr-sidebar-text);
    margin-bottom: 0.1rem;
}
.hr-nav-link i {
    font-size: 1rem;
    width: 1.1rem;
    text-align: center;
    flex-shrink: 0;
}
.hr-nav-link:hover {
    background: var(--hr-sidebar-bg-alt);
    color: #fff;
}
.hr-nav-link.active {
    background: var(--hr-accent);
    color: #fff;
}
.hr-nav-link.is-disabled {
    cursor: default;
    opacity: 0.55;
}
.hr-nav-link.is-disabled:hover {
    background: transparent;
    color: var(--hr-sidebar-text);
}
.hr-nav-link .hr-badge {
    margin-left: auto;
}

.hr-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.3rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #dfe9f0;
    font-size: 0.7rem;
    font-weight: 600;
}
.hr-nav-link.active .hr-badge {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}
.hr-badge-new {
    background: transparent;
    border: 1px solid var(--hr-accent);
    color: #6fd7c9;
    font-weight: 600;
}

/* ---------- Help card ---------- */

.hr-help-card {
    background: var(--hr-sidebar-bg-alt);
    border-radius: var(--hr-radius);
    padding: 0.85rem 0.9rem;
    margin-top: 0.5rem;
}
.hr-help-title {
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
}
.hr-help-text {
    color: var(--hr-sidebar-heading);
    font-size: 0.78rem;
    margin-bottom: 0.4rem;
}
.hr-help-link {
    color: #e8975f;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: default;
}

/* ---------- Account footer ---------- */

.hr-account {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0.6rem 0.1rem;
    margin-top: 0.5rem;
    font-size: 0.8rem;
}
.hr-account-name {
    color: var(--hr-sidebar-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hr-account-logout {
    background: transparent;
    border: none;
    color: var(--hr-sidebar-heading);
    font-size: 1rem;
    padding: 0.2rem;
}
.hr-account-logout:hover {
    color: #fff;
}

/* ---------- Topbar ---------- */

.hr-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.75rem 2rem 1.25rem;
}
.hr-page-title {
    font-family: var(--hr-font-family-display);
    font-size: 1.6rem; /* gedeeld over de hele app — bewust ongewijzigd, zie .hr-agenda-page hieronder voor de Agenda-specifieke override */
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0 0 0.2rem;
    color: var(--hr-text);
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.hr-logo-text {
    font-family: var(--hr-font-family-display);
}
.hr-page-subtitle {
    color: var(--hr-text-muted);
    font-size: 0.9rem;
    margin: 0;
}
/* Agenda-specifieke paginakop-override (HR-05 typografie-correctiepas):
   de gedeelde .hr-page-title/-subtitle-regels hierboven blijven voor de
   rest van HorecaRadar ongewijzigd — alleen op de Agenda-pagina zelf
   (body class, zie templates/agenda/week.html) gelden de nieuwe, lichtere
   doelwaarden. */
.hr-agenda-page .hr-page-title {
    font-size: var(--hr-font-size-2xl);
    font-weight: var(--hr-font-weight-semibold);
    line-height: var(--hr-line-height-tight);
}
.hr-agenda-page .hr-page-subtitle {
    font-size: var(--hr-font-size-base);
    font-weight: var(--hr-font-weight-normal);
}
.hr-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}
.hr-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
    border: 1px solid var(--hr-border);
    background: var(--hr-surface);
    color: var(--hr-text-muted);
}
.hr-icon-btn.is-disabled {
    cursor: default;
    opacity: 0.6;
}

.hr-content {
    padding: 0 2rem 2.5rem;
}

/* ---------- Buttons ---------- */

.hr-btn-primary {
    background: #111827;
    border: 1px solid #111827;
    color: #fff;
    font-weight: var(--hr-font-weight-semibold);
    border-radius: 999px;
    padding: 0.55rem 1.1rem;
    font-size: var(--hr-font-size-button);
}
.hr-btn-primary:hover {
    background: #000;
    color: #fff;
}
.hr-btn-secondary {
    background: var(--hr-surface);
    border: 1px solid var(--hr-border);
    color: var(--hr-text);
    font-weight: var(--hr-font-weight-semibold);
    border-radius: 999px;
    padding: 0.55rem 1.1rem;
    font-size: var(--hr-font-size-button);
}
.hr-btn-secondary:hover {
    background: var(--hr-bg-subtle);
    color: var(--hr-text);
}
.hr-btn-danger {
    background: #fff;
    border: 1px solid #fecaca;
    color: var(--hr-danger);
    font-weight: var(--hr-font-weight-semibold);
    border-radius: 999px;
    padding: 0.55rem 1.1rem;
    font-size: var(--hr-font-size-button);
}
.hr-btn-danger:hover {
    background: #fef2f2;
    color: var(--hr-danger);
}
.hr-btn-sm {
    padding: 0.32rem 0.8rem;
    font-size: 0.78rem;
}

/* ---------- Cards ---------- */

.hr-card {
    background: var(--hr-surface);
    border: 1px solid var(--hr-border);
    border-radius: var(--hr-radius);
    box-shadow: 0 1px 2px rgba(15, 31, 46, 0.04);
}
.hr-card-body {
    padding: 1.25rem 1.5rem;
}

.stat-card .stat-value {
    font-size: 2rem;
    font-weight: 700;
}

/* ---------- Tabs ---------- */

.hr-tabs {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    border-bottom: 1px solid var(--hr-border);
    padding: 0 1.5rem;
    overflow-x: auto;
}
.hr-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.9rem 0.1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--hr-text-muted);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.hr-tab:hover {
    color: var(--hr-text);
}
.hr-tab.active {
    color: var(--hr-text);
    border-bottom-color: var(--hr-accent);
}
.hr-tab .hr-tab-count {
    background: var(--hr-bg-subtle);
    color: var(--hr-text-muted);
    border-radius: 999px;
    padding: 0.05rem 0.45rem;
    font-size: 0.72rem;
    font-weight: 600;
}
.hr-tab.active .hr-tab-count {
    background: var(--hr-accent-soft);
    color: var(--hr-accent-dark);
}

/* ---------- Filter row ---------- */

.hr-filter-row {
    padding: 1.1rem 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}
.hr-filter-row .form-control,
.hr-filter-row .form-select {
    border-radius: 999px;
    border-color: var(--hr-border);
    font-size: 0.85rem;
}
.hr-search-input {
    max-width: 280px;
}

/* ---------- View switch (bord/lijst) ---------- */

.hr-view-switch {
    display: inline-flex;
    background: var(--hr-bg);
    border-radius: 999px;
    padding: 0.2rem;
    gap: 0.15rem;
}
.hr-view-switch-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--hr-text-muted);
}
.hr-view-switch-btn:hover {
    color: var(--hr-text);
}
.hr-view-switch-btn.active {
    background: var(--hr-surface);
    color: var(--hr-text);
    box-shadow: 0 1px 2px rgba(15, 31, 46, 0.08);
}

/* ---------- Table ---------- */

.hr-table {
    width: 100%;
    border-collapse: collapse;
}
.hr-table thead th {
    text-align: left;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--hr-text-muted);
    padding: 0.6rem 1.5rem;
    border-top: 1px solid var(--hr-border);
    border-bottom: 1px solid var(--hr-border);
}
.hr-table tbody td {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--hr-border);
    vertical-align: middle;
    font-size: 0.85rem;
}
.hr-table tbody tr:last-child td {
    border-bottom: none;
}
.hr-table tbody tr:hover {
    background: var(--hr-bg-subtle);
}

.hr-object-cell {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}
.hr-object-thumb {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--hr-bg);
}
.hr-object-thumb-placeholder {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: var(--hr-bg);
    color: var(--hr-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.hr-object-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--hr-text);
    display: block;
}
.hr-object-meta {
    font-size: 0.8rem;
    color: var(--hr-text-muted);
}

.hr-row-actions {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: stretch;
}
.hr-row-actions .hr-btn-secondary,
.hr-row-actions .hr-btn-danger {
    text-align: center;
    padding: 0.3rem 0.8rem;
    font-size: 0.75rem;
}
.hr-btn-tint-view {
    color: var(--hr-accent-dark);
    border-color: var(--hr-accent);
    background: var(--hr-accent-soft);
}
.hr-btn-tint-view:hover {
    color: #fff;
    background: var(--hr-accent);
}
.hr-btn-tint-edit {
    color: #1d4ed8;
    border-color: #bfdbfe;
    background: #eff6ff;
}
.hr-btn-tint-edit:hover {
    color: #fff;
    background: #2563eb;
    border-color: #2563eb;
}
.hr-btn-tint-marketing {
    color: #7c3aed;
    border-color: #ddd6fe;
    background: #f5f3ff;
}
.hr-btn-tint-marketing:hover {
    color: #fff;
    background: #7c3aed;
    border-color: #7c3aed;
}

/* ---------- Status pill ---------- */

.hr-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background: var(--hr-bg-subtle);
    color: var(--hr-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.hr-status-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.hr-status-pill.is-positive {
    background: var(--hr-accent-soft);
    color: var(--hr-accent-dark);
}
.hr-status-pill.is-warning {
    background: #fef3c7;
    color: #92400e;
}
.hr-status-pill.is-negative {
    background: #fee2e2;
    color: #b91c1c;
}
.hr-status-pill.is-info {
    background: #dbeafe;
    color: #1d4ed8;
}
.hr-status-pill.is-scheduled {
    background: #ede9fe;
    color: #6d28d9;
}
.hr-status-pill.is-progress {
    background: #ffedd5;
    color: #c2410c;
}

/* ---------- Kanban board (leads) ---------- */

.hr-board {
    display: flex;
    gap: 1.1rem;
    overflow-x: auto;
    padding: 1.5rem;
}
/* Duidelijke "baan" per kolom (correctie t.o.v. de eerste versie: een
   3px border-top bleek in de praktijk nauwelijks zichtbaar). Elke kolom is
   nu een eigen kaart met een dikke, verzadigde kleurbalk bovenaan én een
   lichte kleurtint over de hele baan — dezelfde kleuren als de
   status-pills (leads/templatetags/status_tags.py), zodat de kolomkleur
   direct herkenbaar is als "dezelfde taal" als de status-pill op een
   kaart/rij. */
.hr-board-column {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    background: var(--hr-surface);
    border: 1px solid var(--hr-border);
    border-radius: 0.85rem;
    overflow: hidden;
}
.hr-board-column.is-info { background: rgba(59, 130, 246, 0.05); }
.hr-board-column.is-warning { background: rgba(217, 119, 6, 0.05); }
.hr-board-column.is-scheduled { background: rgba(124, 58, 237, 0.05); }
.hr-board-column.is-progress { background: rgba(234, 88, 12, 0.05); }
.hr-board-column.is-positive { background: rgba(13, 148, 136, 0.05); }
.hr-board-column.is-negative { background: rgba(220, 38, 38, 0.05); }
[data-theme="dark"] .hr-board-column.is-info { background: rgba(59, 130, 246, 0.1); }
[data-theme="dark"] .hr-board-column.is-warning { background: rgba(217, 119, 6, 0.1); }
[data-theme="dark"] .hr-board-column.is-scheduled { background: rgba(124, 58, 237, 0.1); }
[data-theme="dark"] .hr-board-column.is-progress { background: rgba(234, 88, 12, 0.1); }
[data-theme="dark"] .hr-board-column.is-positive { background: rgba(13, 148, 136, 0.1); }
[data-theme="dark"] .hr-board-column.is-negative { background: rgba(220, 38, 38, 0.1); }

.hr-board-column-accent {
    height: 5px;
    width: 100%;
    flex-shrink: 0;
    background: var(--hr-border);
}
.hr-board-column.is-info .hr-board-column-accent { background: #3b82f6; }
.hr-board-column.is-warning .hr-board-column-accent { background: #d97706; }
.hr-board-column.is-scheduled .hr-board-column-accent { background: #7c3aed; }
.hr-board-column.is-progress .hr-board-column-accent { background: #ea580c; }
.hr-board-column.is-positive .hr-board-column-accent { background: var(--hr-accent); }
.hr-board-column.is-negative .hr-board-column-accent { background: #dc2626; }

.hr-board-column-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--hr-text-muted);
    padding: 0.75rem 0.85rem 0.5rem;
}
.hr-board-column-header .hr-tab-count {
    background: var(--hr-surface);
    border-radius: 999px;
    padding: 0.05rem 0.45rem;
    font-weight: 600;
}
.hr-board-column-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--hr-text-muted);
    flex-shrink: 0;
}
.hr-board-column.is-info .hr-board-column-dot { background: #3b82f6; }
.hr-board-column.is-warning .hr-board-column-dot { background: #d97706; }
.hr-board-column.is-scheduled .hr-board-column-dot { background: #7c3aed; }
.hr-board-column.is-progress .hr-board-column-dot { background: #ea580c; }
.hr-board-column.is-positive .hr-board-column-dot { background: var(--hr-accent); }
.hr-board-column.is-negative .hr-board-column-dot { background: #dc2626; }

.hr-board-column-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
    min-height: 80px;
    padding: 0 0.85rem 0.85rem;
    transition: background-color 0.12s ease;
}
.hr-board-column-body.is-drag-over {
    background: var(--hr-bg-subtle);
}

.hr-lead-card {
    background: var(--hr-surface);
    border: 1px solid var(--hr-border);
    border-radius: var(--hr-radius);
    padding: 0.9rem 1rem;
    cursor: grab;
}
.hr-lead-card:active {
    cursor: grabbing;
}
.hr-lead-card.is-dragging {
    opacity: 0.45;
}
.hr-lead-card-top {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}
.hr-lead-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--hr-bg-subtle);
    color: var(--hr-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
}
.hr-lead-name {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--hr-text);
    display: block;
    line-height: 1.2;
}
.hr-lead-time {
    font-size: 0.72rem;
    color: var(--hr-text-muted);
}
.hr-lead-interest {
    font-size: 0.8rem;
    color: var(--hr-text-muted);
    margin-bottom: 0.7rem;
}
.hr-lead-interest strong {
    color: var(--hr-text);
    font-weight: 500;
}
.hr-lead-card-bottom {
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid var(--hr-border);
    padding-top: 0.6rem;
}
.hr-lead-open {
    font-size: 0.8rem;
    font-weight: 600;
}
.hr-empty-column {
    font-size: 0.8rem;
    color: var(--hr-text-muted);
    padding: 0.5rem 0.1rem;
}

/* ---------- Objectenkiezer (lead formulieren) ---------- */

.hr-object-picker-list {
    max-height: 360px;
    overflow-y: auto;
    border: 1px solid var(--hr-border);
    border-radius: var(--hr-radius);
}
.hr-object-picker-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--hr-border);
    cursor: pointer;
    margin: 0;
}
.hr-object-picker-item:last-child {
    border-bottom: none;
}
.hr-object-picker-item:hover {
    background: var(--hr-bg);
}
.hr-object-picker-item input[type="checkbox"] {
    flex-shrink: 0;
}
.hr-object-picker-thumb {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--hr-bg);
}
.hr-object-picker-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hr-text-muted);
}
.hr-object-picker-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.hr-object-picker-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--hr-text);
}
.hr-object-picker-address {
    font-size: 0.75rem;
    color: var(--hr-text-muted);
}
.hr-object-picker-item .hr-status-pill {
    flex-shrink: 0;
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
}

/* ---------- Definition list detail pages ---------- */

.hr-dl dt {
    color: var(--hr-text-muted);
    font-weight: 500;
    font-size: 0.85rem;
}
.hr-dl dd {
    font-size: 0.9rem;
    margin-bottom: 0.85rem;
}

/* ---------- Leadprofiel: header ---------- */

.hr-lead-profile {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}
.hr-lead-profile-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--hr-bg);
    color: var(--hr-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}
.hr-lead-profile-info {
    flex: 1 1 auto;
    min-width: 0;
}
.hr-lead-profile-info h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.15rem;
    color: var(--hr-text);
}
.hr-lead-profile-meta {
    color: var(--hr-text-muted);
    font-size: 0.85rem;
    margin-bottom: 0.4rem;
}
.hr-lead-profile-contact {
    display: flex;
    gap: 1.1rem;
    flex-wrap: wrap;
    font-size: 0.82rem;
    color: var(--hr-text-muted);
}
.hr-lead-profile-contact i {
    margin-right: 0.3rem;
}
.hr-lead-profile-status {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.hr-lead-profile-status label {
    font-size: 0.72rem;
    color: var(--hr-text-muted);
    font-weight: 600;
}
.hr-lead-profile-status select {
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    min-width: 170px;
}

/* ---------- Leadprofiel: actieknoppen ---------- */

.hr-action-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.hr-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--hr-surface);
    border: 1px solid var(--hr-border);
    border-radius: var(--hr-radius);
    padding: 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--hr-text);
    font-family: inherit;
    cursor: pointer;
    width: 100%;
}
.hr-action-btn:hover {
    border-color: var(--hr-accent);
    color: var(--hr-text);
}
.hr-action-btn.is-disabled,
.hr-action-btn:disabled {
    color: var(--hr-text-muted);
    cursor: default;
    opacity: 0.6;
}
.hr-action-btn.is-disabled:hover,
.hr-action-btn:disabled:hover {
    border-color: var(--hr-border);
}
/* HR-05 V0.9, sectie 6: 'Plan bezichtiging' krijgt visuele prioriteit
   t.o.v. de overige, gelijkwaardige acties wanneer de lead een
   bezichtigingsintentie heeft. */
.hr-action-btn.hr-action-btn-primary {
    background: var(--hr-text);
    border-color: var(--hr-text);
    color: #fff;
}
.hr-action-btn.hr-action-btn-primary:hover {
    background: #000;
    border-color: #000;
    color: #fff;
}
.hr-action-buttons-hint {
    font-size: 0.78rem;
    color: var(--hr-text-muted);
    margin: 0 0 1.5rem;
}

/* ---------- HR-05 V0.9: lead-aanleiding-badges ("in één oogopslag") ---------- */

.hr-intent-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}
.hr-intent-badge-row-compact {
    margin-bottom: 0.45rem;
}
.hr-intent-badge-row-compact .hr-intent-badge {
    font-size: 0.68rem;
    padding: 0.15rem 0.45rem;
}
.hr-intent-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--hr-bg-subtle);
    color: var(--hr-text-muted);
    white-space: nowrap;
}
.hr-intent-badge.is-info {
    background: #dbeafe;
    color: #1d4ed8;
}
.hr-intent-badge.is-warning {
    background: #fef3c7;
    color: #92400e;
}
.hr-intent-badge.is-scheduled {
    background: #ede9fe;
    color: #6d28d9;
}
.hr-intent-badge.is-progress {
    background: #ffedd5;
    color: #c2410c;
}

/* ---------- HR-05 V0.9: informatiebanner (bijv. mailaccount niet gekoppeld) ---------- */

.hr-inline-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    background: var(--hr-bg-subtle);
    border: 1px solid var(--hr-border);
    border-radius: 0.6rem;
    padding: 0.65rem 0.85rem;
    font-size: 0.82rem;
    color: var(--hr-text-muted);
    margin-bottom: 1rem;
}
.hr-inline-notice i {
    margin-top: 0.15rem;
    flex-shrink: 0;
}
.hr-inline-notice-compact {
    margin-bottom: 0.85rem;
    padding: 0.5rem 0.7rem;
    font-size: 0.78rem;
}

.hr-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
}
.hr-checkbox-group-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--hr-text);
}

/* ---------- HR-05 V0.9: dashboard-actiecentrum (recente leads) ---------- */

.hr-lead-action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
}
.hr-lead-action-row-divided {
    border-bottom: 1px solid var(--hr-border);
}
.hr-lead-action-identity {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--hr-text);
    min-width: 0;
    flex: 1 1 auto;
}
.hr-lead-action-identity:hover {
    color: var(--hr-text);
}
.hr-lead-action-identity-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.hr-lead-action-name {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--hr-text);
}
.hr-lead-action-sub {
    font-size: 0.75rem;
    color: var(--hr-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hr-lead-action-buttons {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}
.hr-lead-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--hr-bg-subtle);
    color: var(--hr-text-muted);
    font-size: 0.85rem;
}
.hr-lead-action-btn:hover {
    background: var(--hr-accent-soft);
    color: var(--hr-accent-dark);
}
.hr-lead-action-btn.hr-lead-action-btn-primary {
    background: var(--hr-text);
    color: #fff;
}
.hr-lead-action-btn.hr-lead-action-btn-primary:hover {
    background: #000;
    color: #fff;
}

/* ---------- Leadprofiel: tijdlijn ---------- */

.hr-timeline {
    position: relative;
}
.hr-timeline-item {
    display: flex;
    gap: 0.85rem;
    padding-bottom: 1.25rem;
    position: relative;
}
.hr-timeline-item::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 34px;
    bottom: 0;
    width: 1px;
    background: var(--hr-border);
}
.hr-timeline-item:last-child::before {
    display: none;
}
.hr-timeline-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--hr-bg);
    color: var(--hr-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
    z-index: 1;
}
.hr-timeline-dot.is-status {
    background: var(--hr-accent-soft);
    color: var(--hr-accent-dark);
}
.hr-timeline-dot.is-email_sent {
    background: #dbeafe;
    color: #1d4ed8;
}
.hr-timeline-dot.is-email_received {
    background: #ede9fe;
    color: #6d28d9;
}
.hr-timeline-dot.is-call {
    background: #ffedd5;
    color: #c2410c;
}
.hr-timeline-body {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 0.2rem;
}
.hr-timeline-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}
.hr-timeline-head strong {
    font-size: 0.88rem;
    color: var(--hr-text);
}
.hr-timeline-time {
    font-size: 0.75rem;
    color: var(--hr-text-muted);
    white-space: nowrap;
}
.hr-timeline-body p {
    font-size: 0.85rem;
    color: var(--hr-text);
    margin: 0.3rem 0 0.3rem;
}
.hr-timeline-meta {
    font-size: 0.72rem;
    color: var(--hr-text-muted);
}
.hr-timeline-email-meta {
    background: var(--hr-bg-subtle);
    border-radius: 0.5rem;
    padding: 0.5rem 0.65rem;
    margin: 0.4rem 0;
    font-size: 0.78rem;
    color: var(--hr-text-muted);
}
.hr-timeline-email-meta strong {
    color: var(--hr-text);
    font-weight: 600;
}
.hr-timeline-email-preview {
    margin: 0.35rem 0 0;
    color: var(--hr-text);
    white-space: pre-wrap;
}

/* ---------- Leadprofiel: gekoppeld object ---------- */

.hr-linked-object-thumb {
    width: 100%;
    height: 110px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 0.6rem;
}
.hr-linked-object-meta {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--hr-text-muted);
}
.hr-linked-object-name {
    font-weight: 600;
    color: var(--hr-text);
}
.hr-linked-object-price {
    font-size: 0.85rem;
    color: var(--hr-text-muted);
}

/* ---------- Empty state ---------- */

.hr-empty-state {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--hr-text-muted);
}

/* ---------- Media Manager ---------- */

.hr-mm-context {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
}
.hr-mm-context-thumb {
    width: 56px;
    height: 56px;
    border-radius: 0.5rem;
    object-fit: cover;
    flex-shrink: 0;
}
.hr-mm-context-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--hr-accent);
    margin-bottom: 0.15rem;
}

.hr-mm-dropzone {
    border: 2px dashed var(--hr-border);
    border-radius: var(--hr-radius);
    background: var(--hr-surface);
    padding: 4rem 1.5rem;
    text-align: center;
    margin-bottom: 1.5rem;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.hr-mm-dropzone.is-dragover {
    border-color: var(--hr-accent);
    background: var(--hr-accent-soft);
}
.hr-mm-dropzone-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--hr-accent-soft);
    color: var(--hr-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}
.hr-mm-dropzone-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}
.hr-mm-dropzone-text {
    color: var(--hr-text-muted);
    margin-bottom: 1.25rem;
}
.hr-mm-dropzone-hint {
    color: var(--hr-text-muted);
    font-size: 0.82rem;
    margin: 0.75rem 0 0;
}

.hr-mm-selection-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--hr-border);
}
.hr-mm-selection-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--hr-border);
}

.hr-mm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.9rem;
}
.hr-mm-tile {
    position: relative;
    aspect-ratio: 1;
    border-radius: 0.6rem;
    overflow: hidden;
    cursor: grab;
    border: 1px solid var(--hr-border);
    background: var(--hr-bg);
}
.hr-mm-tile.is-dragging {
    opacity: 0.4;
}
.hr-mm-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.hr-mm-tile-badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    background: var(--hr-accent);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.hr-mm-tile-actions {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    gap: 0.35rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.hr-mm-tile:hover .hr-mm-tile-actions {
    opacity: 1;
}
.hr-mm-tile-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(15, 31, 46, 0.65);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}
.hr-mm-tile-btn:hover {
    background: rgba(15, 31, 46, 0.85);
}
.hr-mm-tile-btn.is-danger:hover {
    background: var(--hr-danger);
}

/* ---------- Objectdossier ---------- */

.hr-dossier-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem;
}
.hr-dossier-header-photo {
    width: 96px;
    height: 96px;
    border-radius: 0.6rem;
    overflow: hidden;
    flex-shrink: 0;
}
.hr-dossier-header-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hr-dossier-header-info {
    flex: 1;
    min-width: 0;
}
.hr-dossier-header-phase {
    width: 220px;
    flex-shrink: 0;
}
.hr-dossier-header-phase label {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--hr-text-muted);
}

.hr-dossier-stepper {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.5rem;
    background: var(--hr-surface);
    border: 1px solid var(--hr-border);
    border-radius: var(--hr-radius);
    padding: 1rem 1.25rem;
}
.hr-dossier-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}
.hr-dossier-step-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--hr-border);
    color: var(--hr-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
}
.hr-dossier-step.is-done .hr-dossier-step-dot {
    background: var(--hr-accent-soft);
    color: var(--hr-accent-dark);
}
.hr-dossier-step.is-current .hr-dossier-step-dot {
    background: var(--hr-accent);
    color: #fff;
}
.hr-dossier-step-label {
    min-width: 0;
}
.hr-dossier-step-label .fw-semibold {
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hr-dossier-step.is-current .hr-dossier-step-label .fw-semibold {
    color: var(--hr-accent-dark);
}
.hr-dossier-step-sub {
    font-size: 0.7rem;
    color: var(--hr-text-muted);
}

.hr-checklist-progress {
    height: 6px;
    border-radius: 999px;
    background: var(--hr-border);
    overflow: hidden;
    margin: 0.75rem 0;
}
.hr-checklist-progress-fill {
    height: 100%;
    background: var(--hr-accent);
}
.hr-checklist-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0;
}
.hr-checklist-row-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    flex-shrink: 0;
    background: var(--hr-accent-soft);
    color: var(--hr-accent);
}
.hr-checklist-row-icon.is-pending {
    background: var(--hr-bg);
    color: var(--hr-text-muted);
}

.hr-folder-row {
    border-bottom: 1px solid var(--hr-border);
}
.hr-folder-row:last-of-type {
    border-bottom: none;
}
.hr-folder-row summary {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 0;
    cursor: pointer;
    list-style: none;
}
.hr-folder-row summary::-webkit-details-marker {
    display: none;
}
.hr-folder-icon {
    color: #eab308;
    font-size: 1.05rem;
}
.hr-folder-contents {
    padding: 0 0 0.75rem 1.75rem;
}

/* ---------- Wizard (Nieuw object) ---------- */

.hr-wizard-progress {
    padding: 1rem 1.25rem;
}
.hr-wizard-progress-head {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--hr-text-muted);
    margin-bottom: 0.5rem;
}
.hr-wizard-progress-head .hr-wizard-progress-percent {
    color: var(--hr-accent);
    font-weight: 600;
}
.hr-wizard-progress-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--hr-border);
    overflow: hidden;
}
.hr-wizard-progress-fill {
    height: 100%;
    background: var(--hr-accent);
    border-radius: 999px;
    transition: width 0.2s ease;
}

.hr-wizard-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}
.hr-wizard-tab {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border-radius: var(--hr-radius);
    border: 1px solid var(--hr-border);
    background: var(--hr-surface);
    color: var(--hr-text);
    font-weight: 600;
    font-size: 0.88rem;
}
.hr-wizard-tab.is-active {
    border-color: var(--hr-accent);
    box-shadow: 0 0 0 1px var(--hr-accent);
}
.hr-wizard-tab.is-disabled {
    color: var(--hr-text-muted);
    cursor: default;
}
.hr-wizard-tab-number {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--hr-border);
    color: var(--hr-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
}
.hr-wizard-tab.is-active .hr-wizard-tab-number {
    background: var(--hr-accent);
    color: #fff;
}
.hr-wizard-tab-number.is-done {
    background: var(--hr-accent-soft);
    color: var(--hr-accent-dark);
}

.hr-wizard-ring {
    --pct: 0;
    width: 110px;
    height: 110px;
    margin: 0.5rem auto 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    background: conic-gradient(var(--hr-accent) calc(var(--pct) * 1%), var(--hr-border) 0);
}
.hr-wizard-ring span {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--hr-surface);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hr-wizard-preview-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 0.6rem;
    overflow: hidden;
    background: var(--hr-bg);
}
.hr-wizard-preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hr-wizard-preview-thumb .hr-object-thumb-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 0;
}

.hr-amenity-checklist ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.hr-amenity-checklist li {
    margin: 0;
}
.hr-amenity-checklist label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--hr-border);
    background: var(--hr-surface);
    font-size: 0.85rem;
    cursor: pointer;
}
.hr-amenity-checklist input[type="checkbox"] {
    accent-color: var(--hr-accent);
}

.hr-wizard-checklist-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--hr-border);
}
.hr-wizard-checklist-item:last-child {
    border-bottom: none;
}
.hr-wizard-checklist-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hr-accent-soft);
    color: var(--hr-accent);
    flex-shrink: 0;
    font-size: 0.85rem;
}
.hr-wizard-checklist-icon.is-pending {
    background: #fff3e0;
    color: #c2410c;
}

.hr-wizard-toggle-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--hr-border);
    border-radius: var(--hr-radius);
    margin-bottom: 0.75rem;
}
.hr-wizard-toggle-row.is-disabled {
    opacity: 0.6;
}
.hr-wizard-toggle-row input[type="checkbox"] {
    margin-top: 0.2rem;
    accent-color: var(--hr-accent);
}

/* ---------- Login (guest) ---------- */

.hr-guest {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hr-bg);
    padding: 1.5rem;
}
.hr-login-card {
    width: 100%;
    max-width: 380px;
    background: var(--hr-surface);
    border: 1px solid var(--hr-border);
    border-radius: var(--hr-radius);
    padding: 2rem;
    box-shadow: 0 1px 3px rgba(15, 31, 46, 0.08);
}
.hr-login-card .hr-logo {
    margin-bottom: 1.5rem;
    padding: 0;
}

/* ---------- Pagination ---------- */

.hr-content .pagination .page-link {
    color: var(--hr-text);
    border-color: var(--hr-border);
}
.hr-content .pagination .page-item.active .page-link {
    background: var(--hr-accent);
    border-color: var(--hr-accent);
}

/* ---------- Agenda: weekagenda met urenraster ---------- */

:root {
    --hr-agenda-hour-height: 60px;
    --hr-agenda-grid-line: #f0f2f4;
    --hr-agenda-today-tint: #f7fbfa;
}

/* Event-/lijstregels zijn <button>-elementen (toetsenbordtoegankelijk),
   maar de browser-standaard knopstijl (grijze outset-rand + achtergrond)
   moet weg vóórdat de eigen, subtiele accentstijl verderop in dit bestand
   wordt toegepast — anders oogt elk blok als een "geframede" doos i.p.v.
   een zachte, getinte kaart met alleen een linker accentlijn. */
.hr-agenda-event-block,
.hr-agenda-today-item,
.hr-agenda-month-event,
.hr-agenda-list-item {
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    appearance: none;
    -webkit-appearance: none;
}
[data-theme="dark"] {
    --hr-agenda-grid-line: var(--hr-border);
    --hr-agenda-today-tint: var(--hr-accent-soft);
}

.hr-agenda-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    background: var(--hr-surface);
    border: 1px solid var(--hr-border);
    border-radius: var(--hr-radius);
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
}
.hr-agenda-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.hr-agenda-nav .disabled {
    pointer-events: none;
    opacity: 0.5;
}
.hr-agenda-week-title,
.hr-agenda-period-label {
    font-weight: var(--hr-font-weight-semibold);
    font-size: var(--hr-font-size-button);
    color: var(--hr-text);
    margin-left: 0.4rem;
    white-space: nowrap;
}

.hr-agenda-view-switcher {
    display: flex;
    background: var(--hr-bg-subtle);
    border-radius: 0.5rem;
    padding: 0.2rem;
    margin-right: 0.5rem;
}
.hr-agenda-view-tab {
    padding: 0.25rem 0.65rem;
    font-size: var(--hr-font-size-base);
    font-weight: var(--hr-font-weight-medium);
    color: var(--hr-text-muted);
    border-radius: 0.35rem;
}
.hr-agenda-view-tab:hover {
    color: var(--hr-text);
}
.hr-agenda-view-tab.active {
    background: var(--hr-surface);
    color: var(--hr-text);
    font-weight: var(--hr-font-weight-semibold);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.hr-agenda-toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.hr-agenda-toolbar-right .is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.hr-agenda-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 1rem;
    align-items: start;
}
@media (max-width: 992px) {
    .hr-agenda-layout {
        grid-template-columns: 1fr;
    }
}

/* ---- Kalenderkaart ---- */

.hr-agenda-calendar {
    background: var(--hr-surface);
    border: 1px solid var(--hr-border);
    border-radius: var(--hr-radius);
    overflow: hidden;
}
.hr-agenda-calendar-header {
    display: grid;
    grid-template-columns: 56px repeat(7, minmax(0, 1fr));
    border-bottom: 1px solid var(--hr-border);
}
.hr-agenda-gutter-label {
    font-size: var(--hr-font-size-xs);
    color: var(--hr-text-muted);
    padding: 0.6rem 0.4rem 0.3rem;
}
.hr-agenda-day-col-header {
    text-align: center;
    padding: 0.4rem 0.3rem;
    border-left: 1px solid var(--hr-agenda-grid-line);
}
.hr-agenda-day-col-name {
    display: block;
    font-size: var(--hr-font-size-xs);
    font-weight: var(--hr-font-weight-semibold);
    letter-spacing: 0.03em;
    color: var(--hr-text-muted);
}
.hr-agenda-day-col-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.15rem;
    font-weight: 700;
    color: var(--hr-text);
}
.hr-agenda-day-col-header.is-today .hr-agenda-day-col-number {
    background: var(--hr-accent);
    color: #fff;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
}

.hr-agenda-grid-body {
    display: grid;
    grid-template-columns: 56px repeat(7, minmax(0, 1fr));
}
.hr-agenda-time-col {
    display: flex;
    flex-direction: column;
}
.hr-agenda-time-slot {
    height: var(--hr-agenda-hour-height);
    font-size: var(--hr-font-size-xs);
    color: var(--hr-text-muted);
    text-align: right;
    padding-right: 0.5rem;
    transform: translateY(-0.6em);
}
.hr-agenda-day-column {
    position: relative;
    border-left: 1px solid var(--hr-agenda-grid-line);
}
.hr-agenda-day-column.is-today {
    background: var(--hr-agenda-today-tint);
}
.hr-agenda-hour-line {
    height: var(--hr-agenda-hour-height);
    border-bottom: 1px solid var(--hr-agenda-grid-line);
}

.hr-agenda-event-block {
    position: absolute;
    left: 3px;
    right: 3px;
    min-height: 1.3rem;
    padding: 0.2rem 0.45rem;
    border-radius: 0.35rem;
    border-left: 2.5px solid;
    text-align: left;
    overflow: hidden;
    cursor: pointer;
    line-height: var(--hr-line-height-tight);
    display: flex;
    white-space: nowrap;
    box-shadow: none;
}
.hr-agenda-event-time {
    font-size: var(--hr-font-size-xs);
    font-weight: var(--hr-font-weight-semibold);
    flex-shrink: 0;
}
.hr-agenda-event-title {
    font-size: var(--hr-font-size-xs);
    font-weight: var(--hr-font-weight-medium);
    color: var(--hr-text);
    margin-left: 0.3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.hr-agenda-day-empty {
    color: var(--hr-text-muted);
    font-size: var(--hr-font-size-base);
    margin: 0;
}

/* Event-kleurvarianten — puur visuele afwisseling, geen statusbetekenis.
   In het hoofdrooster krijgt een event een zachte getinte achtergrond; in
   lijst-achtige contexten (sidebar, lijstweergave) blijft de achtergrond
   wit/transparant en spreekt alleen de linker accentlijn + tijdskleur —
   dat oogt als een rij, niet als een omkaderde kaart. */
.hr-agenda-event-block.is-teal {
    background: var(--hr-accent-soft);
    border-left-color: var(--hr-accent);
}
.hr-agenda-event-block.is-teal .hr-agenda-event-time {
    color: var(--hr-accent-dark);
}
.hr-agenda-event-block.is-blue {
    background: #dbeafe;
    border-left-color: #3b82f6;
}
.hr-agenda-event-block.is-blue .hr-agenda-event-time {
    color: #1d4ed8;
}
.hr-agenda-event-block.is-amber {
    background: #fef3c7;
    border-left-color: #f59e0b;
}
.hr-agenda-event-block.is-amber .hr-agenda-event-time {
    color: #92400e;
}

.hr-agenda-today-item.is-teal,
.hr-agenda-list-item.is-teal {
    border-left-color: var(--hr-accent);
}
.hr-agenda-today-item.is-teal .hr-agenda-today-item-time,
.hr-agenda-list-item.is-teal .hr-agenda-list-item-time {
    color: var(--hr-accent-dark);
}
.hr-agenda-today-item.is-blue,
.hr-agenda-list-item.is-blue {
    border-left-color: #3b82f6;
}
.hr-agenda-today-item.is-blue .hr-agenda-today-item-time,
.hr-agenda-list-item.is-blue .hr-agenda-list-item-time {
    color: #1d4ed8;
}
.hr-agenda-today-item.is-amber,
.hr-agenda-list-item.is-amber {
    border-left-color: #f59e0b;
}
.hr-agenda-today-item.is-amber .hr-agenda-today-item-time,
.hr-agenda-list-item.is-amber .hr-agenda-list-item-time {
    color: #92400e;
}

/* ---- Rechter zijpaneel ---- */

.hr-agenda-sidebar {
    background: var(--hr-surface);
    border: 1px solid var(--hr-border);
    border-radius: var(--hr-radius);
    padding: 0.9rem;
}
.hr-agenda-today-header {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.85rem;
}
.hr-agenda-today-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.6rem;
    background: var(--hr-accent-soft);
    color: var(--hr-accent-dark);
    flex-shrink: 0;
}
.hr-agenda-today-badge-day {
    font-size: var(--hr-font-size-xs);
    font-weight: var(--hr-font-weight-semibold);
    letter-spacing: 0.03em;
}
.hr-agenda-today-badge-date {
    font-size: 1.05rem; /* decoratief dagcijfer, geen lopende UI-tekst — buiten de tekstschaal */
    font-weight: var(--hr-font-weight-bold);
    line-height: 1;
}
.hr-agenda-today-info {
    flex: 1;
    color: var(--hr-text);
}
.hr-agenda-today-count {
    font-size: var(--hr-font-size-sm);
    color: var(--hr-text-muted);
    white-space: nowrap;
}
.hr-agenda-sidebar-heading {
    font-size: var(--hr-font-size-base);
    font-weight: var(--hr-font-weight-semibold);
    color: var(--hr-text);
    margin: 0 0 0.5rem;
}
.hr-agenda-today-list {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}
.hr-agenda-today-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.55rem 0.4rem 0.55rem 0.65rem;
    border-left: 2.5px solid;
    border-bottom: 1px solid var(--hr-agenda-grid-line);
    text-align: left;
    cursor: pointer;
}
.hr-agenda-today-list .hr-agenda-today-item:last-child {
    border-bottom: none;
}
.hr-agenda-today-item:hover {
    background: var(--hr-bg-subtle);
}
.hr-agenda-today-item-time {
    display: flex;
    flex-direction: column;
    font-size: var(--hr-font-size-xs);
    font-weight: var(--hr-font-weight-semibold);
    line-height: 1.25;
}
.hr-agenda-today-item-title {
    font-size: var(--hr-font-size-sm);
    font-weight: var(--hr-font-weight-medium);
    color: var(--hr-text);
}
.hr-agenda-today-item i {
    color: var(--hr-text-muted);
    font-size: var(--hr-font-size-sm);
}

.hr-agenda-team-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 0.5rem;
}
.hr-agenda-team-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.hr-agenda-team-name {
    font-size: var(--hr-font-size-sm);
    font-weight: var(--hr-font-weight-medium);
    color: var(--hr-text);
}
.hr-agenda-availability-note {
    font-size: var(--hr-font-size-sm);
    color: var(--hr-text-muted);
    margin-bottom: 1rem;
}

/* ---- Dagweergave ---- */

.hr-agenda-calendar-day {
    padding-top: 0;
}
.hr-agenda-day-single-header {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--hr-border);
}
.hr-agenda-day-single-name {
    display: block;
    font-size: var(--hr-font-size-xs);
    font-weight: var(--hr-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--hr-text-muted);
}
.hr-agenda-day-single-date {
    font-size: 1.1rem; /* decoratief datumcijfer, buiten de tekstschaal */
    font-weight: var(--hr-font-weight-bold);
    color: var(--hr-text);
}
.hr-agenda-grid-body-single {
    grid-template-columns: 56px minmax(0, 1fr);
}
.hr-agenda-event-block-wide .hr-agenda-event-title {
    white-space: normal;
    margin-left: 0.5rem;
}
.hr-agenda-day-empty-block {
    padding: 2rem 1rem;
    text-align: center;
}

/* ---- Maandweergave ---- */

.hr-agenda-month {
    background: var(--hr-surface);
    border: 1px solid var(--hr-border);
    border-radius: var(--hr-radius);
    overflow: hidden;
}
.hr-agenda-month-header {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border-bottom: 1px solid var(--hr-border);
    padding: 0.5rem 0;
}
.hr-agenda-month-header span {
    text-align: center;
    font-size: var(--hr-font-size-xs);
    font-weight: var(--hr-font-weight-semibold);
    color: var(--hr-text-muted);
    letter-spacing: 0.03em;
}
.hr-agenda-month-row {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}
.hr-agenda-month-cell {
    min-height: 6.5rem;
    padding: 0.4rem;
    border-right: 1px solid var(--hr-agenda-grid-line);
    border-bottom: 1px solid var(--hr-agenda-grid-line);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.hr-agenda-month-row:last-child .hr-agenda-month-cell {
    border-bottom: none;
}
.hr-agenda-month-cell:nth-child(7n) {
    border-right: none;
}
.hr-agenda-month-cell:hover {
    background: var(--hr-bg-subtle);
}
.hr-agenda-month-cell.is-outside {
    color: var(--hr-text-muted);
}
.hr-agenda-month-cell.is-outside .hr-agenda-month-cell-date {
    color: var(--hr-text-muted);
    opacity: 0.6;
}
.hr-agenda-month-cell-date {
    font-size: var(--hr-font-size-sm);
    font-weight: var(--hr-font-weight-semibold);
    color: var(--hr-text);
}
.hr-agenda-month-cell.is-today .hr-agenda-month-cell-date {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--hr-accent);
    color: #fff;
}
.hr-agenda-month-cell-events {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.hr-agenda-month-event {
    display: block;
    width: 100%;
    padding: 0.1rem 0.3rem;
    border-radius: 0.3rem;
    border-left: 2.5px solid;
    font-size: var(--hr-font-size-xs);
    font-weight: var(--hr-font-weight-medium);
    color: var(--hr-text);
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hr-agenda-month-more {
    font-size: var(--hr-font-size-xs);
    color: var(--hr-text-muted);
    padding: 0 0.3rem;
}

/* ---- Lijstweergave ---- */

.hr-agenda-list {
    background: var(--hr-surface);
    border: 1px solid var(--hr-border);
    border-radius: var(--hr-radius);
    padding: 1.25rem;
}
.hr-agenda-list-group {
    margin-bottom: 1.5rem;
}
.hr-agenda-list-group:last-child {
    margin-bottom: 0;
}
.hr-agenda-list-group-heading {
    font-size: var(--hr-font-size-base);
    font-weight: var(--hr-font-weight-semibold);
    color: var(--hr-text);
    margin: 0 0 0.6rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--hr-agenda-grid-line);
}
.hr-agenda-list-item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    padding: 0.55rem 0.5rem 0.55rem 0.75rem;
    text-align: left;
    border-left: 2.5px solid var(--hr-agenda-grid-line);
    border-bottom: 1px solid var(--hr-agenda-grid-line);
}
.hr-agenda-list-group .hr-agenda-list-item:last-child {
    border-bottom: none;
}
.hr-agenda-list-item:hover {
    background: var(--hr-bg-subtle);
}
.hr-agenda-list-item-time {
    flex-shrink: 0;
    width: 6.5rem;
    font-size: var(--hr-font-size-sm);
    font-weight: var(--hr-font-weight-semibold);
    color: var(--hr-text-muted);
}
.hr-agenda-list-item-title {
    flex: 1;
    font-size: var(--hr-font-size-sm);
    font-weight: var(--hr-font-weight-medium);
    color: var(--hr-text);
}
.hr-agenda-list-item-meta {
    font-size: var(--hr-font-size-sm);
    color: var(--hr-text-muted);
}
.hr-agenda-list-item i {
    color: var(--hr-text-muted);
    font-size: var(--hr-font-size-sm);
}

/* Kleurvarianten ook voor maand-/lijstweergave (zelfde palet, zelfde
   VISUAL_VARIATION_ONLY-betekenis). */
.hr-agenda-month-event.is-teal { background: var(--hr-accent-soft); border-left-color: var(--hr-accent); }
.hr-agenda-month-event.is-blue { background: #dbeafe; border-left-color: #3b82f6; }
.hr-agenda-month-event.is-amber { background: #fef3c7; border-left-color: #f59e0b; }

.hr-agenda-layout-full {
    grid-template-columns: 1fr;
}

/* ---------- Lichtgewicht modal (geen framework-JS, alleen eigen markup) ---------- */

.hr-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 31, 46, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 1rem;
}
.hr-modal {
    background: var(--hr-surface);
    border-radius: var(--hr-radius);
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}
.hr-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--hr-border);
}
.hr-modal-title {
    font-size: var(--hr-font-size-xl);
    font-weight: var(--hr-font-weight-semibold);
    margin: 0;
    color: var(--hr-text);
}
.hr-modal-body {
    padding: 1.1rem;
}
.hr-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.1rem;
    border-top: 1px solid var(--hr-border);
}
.hr-modal-footer-start,
.hr-modal-footer-end {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
/* Compactere knoppen specifiek in de Agenda-modalfooter (HR-05 typografie-
   correctiepas, sectie 5) — de gedeelde .hr-btn-*-padding elders in de app
   blijft bewust ongewijzigd, dit is uitsluitend .hr-modal-footer-scoped
   (en .hr-modal-footer bestaat alleen binnen agenda/week.html). */
.hr-modal-footer .hr-btn-primary,
.hr-modal-footer .hr-btn-secondary,
.hr-modal-footer .hr-btn-danger {
    padding: 0.45rem 0.95rem;
}
.hr-alert-error {
    background: #fee2e2;
    color: #b91c1c;
    border-radius: 0.5rem;
    padding: 0.55rem 0.75rem;
    font-size: var(--hr-font-size-base);
    margin-bottom: 0.85rem;
}
[data-theme="dark"] .hr-alert-error {
    background: #3f1d1d;
    color: #fca5a5;
}

/* ---------- HR-05 V0.8A: uitgebreid afspraakformulier ---------- */

.hr-agenda-modal {
    max-width: 560px;
}

/* Bootstrap's .form-label/.form-control krijgen geen custom hr-*-class in
   dit formulier (zie templates/agenda/week.html) — zonder deze scoped
   override rendert Bootstrap's eigen, ongestylede default (16px/400), wat
   in de vorige typografiepas over het hoofd is gezien en de daadwerkelijke
   oorzaak was van het "te groot/zwaar" gevoel (zie het correctiepas-
   eindrapport, sectie BOOTSTRAP_OR_LEGACY_OVERRIDES_FOUND). #agenda-form
   (ID-specificiteit) wint hiermee ruim van Bootstrap's kale class-regel,
   zonder !important nodig te hebben. */
#agenda-form .form-label {
    font-size: var(--hr-font-size-base);
    font-weight: var(--hr-font-weight-medium);
    color: var(--hr-text);
    margin-bottom: 0.3rem;
}
#agenda-form .form-control {
    font-size: var(--hr-font-size-md);
    font-weight: var(--hr-font-weight-normal);
    line-height: var(--hr-line-height-tight);
    padding: 0.65rem 0.75rem; /* landt op ~42px hoogte (15px tekst + padding + rand) — binnen de opgegeven 42-46px-doelrange */
}
#agenda-form .form-control::placeholder {
    font-size: var(--hr-font-size-md);
    font-weight: var(--hr-font-weight-normal);
}
/* !important hier is bewust en onvermijdelijk: Bootstrap's eigen
   spacing-utilities (.mb-3, .g-3) zijn zelf met !important gedefinieerd
   (framework-conventie, zodat ze normaliter altijd winnen) — een gewone,
   hogere specificiteit (zoals #agenda-form .mb-3) kan een !important-regel
   nooit verslaan, ongeacht specificiteit. Uitsluitend scoped op
   #agenda-form, dus .mb-3 elders in de app (tientallen andere plekken)
   blijft volledig ongemoeid. */
#agenda-form .mb-3 {
    margin-bottom: 0.75rem !important;
}
#agenda-form .row.g-3 {
    --bs-gutter-x: 0.75rem;
    --bs-gutter-y: 0.75rem;
}
.hr-agenda-form-section-label {
    font-size: var(--hr-font-size-xs);
    font-weight: var(--hr-font-weight-semibold);
    letter-spacing: var(--hr-letter-spacing-label);
    text-transform: uppercase;
    color: var(--hr-text-muted);
    margin: 0 0 0.5rem;
}
.hr-agenda-form-section-label:not(:first-child) {
    margin-top: 1.1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--hr-border);
}
.hr-agenda-calendar-indication {
    margin-top: 0.25rem;
}
.hr-agenda-calendar-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--hr-font-size-base);
    font-weight: var(--hr-font-weight-normal);
    color: var(--hr-text-muted);
}
.hr-agenda-calendar-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--hr-accent);
    flex-shrink: 0;
}
.hr-agenda-view-notes {
    font-size: var(--hr-font-size-base);
    font-weight: var(--hr-font-weight-normal);
    line-height: var(--hr-line-height-normal);
    white-space: pre-wrap;
    word-break: break-word;
}

/* Delete-actie: rustig, tekstueel, bewust niet naast Opslaan */
.hr-agenda-delete-link {
    background: none;
    border: none;
    padding: 0.3rem 0;
    font-size: var(--hr-font-size-base);
    font-weight: var(--hr-font-weight-normal);
    color: var(--hr-danger);
    opacity: 0.85;
}
.hr-agenda-delete-link:hover {
    opacity: 1;
    text-decoration: underline;
}
.hr-agenda-delete-confirm-title {
    font-size: var(--hr-font-size-lg);
    font-weight: var(--hr-font-weight-semibold);
    color: var(--hr-text);
    margin-bottom: 0.35rem;
}
.hr-agenda-delete-confirm-body {
    color: var(--hr-text-muted);
    font-size: var(--hr-font-size-base);
    font-weight: var(--hr-font-weight-normal);
    margin-bottom: 0;
}

/* ---------- HR-05 V0.8A visual refinement: afspraakkaart (detailweergave) ---------- */
/* Correctiepas: kaarten blijven (goedgekeurd als richting), maar iets
   minder interne padding, kleinere/lichtere koppen en waarden, subtielere
   iconen — professionele zakelijke kaart, geen groot mobiel formulier. */

.hr-agenda-detail {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.hr-agenda-detail-title {
    font-size: var(--hr-font-size-lg);
    font-weight: var(--hr-font-weight-semibold);
    color: var(--hr-text);
    margin: 0 0 0.1rem;
}
.hr-agenda-detail-card {
    background: var(--hr-bg-subtle);
    border: 1px solid var(--hr-border);
    border-radius: 0.6rem;
    padding: 0.65rem 0.8rem;
}
.hr-agenda-detail-card-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--hr-font-size-xs);
    font-weight: var(--hr-font-weight-semibold);
    letter-spacing: var(--hr-letter-spacing-label);
    text-transform: uppercase;
    color: var(--hr-text-muted);
    margin: 0 0 0.3rem;
}
.hr-agenda-detail-card-label i {
    font-size: var(--hr-font-size-sm);
    opacity: 0.75; /* subtielere iconen, zie sectie 6 van het correctiepas-verzoek */
}
.hr-agenda-detail-card-main {
    font-size: var(--hr-font-size-md);
    font-weight: var(--hr-font-weight-medium);
    color: var(--hr-text);
    margin: 0;
}
.hr-agenda-detail-card-main-sm {
    font-weight: var(--hr-font-weight-medium);
    font-size: var(--hr-font-size-base);
}
.hr-agenda-detail-card-sub {
    font-size: var(--hr-font-size-base);
    font-weight: var(--hr-font-weight-normal);
    color: var(--hr-text-muted);
    margin: 0.15rem 0 0;
}
.hr-agenda-detail-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
.hr-agenda-detail-card-compact {
    padding: 0.55rem 0.8rem;
}
.hr-agenda-detail-card-muted {
    background: transparent;
}
.hr-agenda-detail-card #agenda-view-url-wrap + .hr-agenda-view-notes {
    margin-top: 0.5rem;
}
.hr-agenda-detail-link {
    font-size: var(--hr-font-size-base);
    color: var(--hr-accent-dark);
    word-break: break-all;
}
.hr-agenda-maps-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.45rem;
    font-size: var(--hr-font-size-base);
    font-weight: var(--hr-font-weight-semibold);
    color: var(--hr-accent-dark);
    text-decoration: none;
}
.hr-agenda-maps-link:hover {
    text-decoration: underline;
}
.hr-agenda-maps-link i {
    opacity: 0.85;
}
@media (max-width: 576px) {
    .hr-agenda-detail-row {
        grid-template-columns: 1fr;
    }
}

/* ---------- HR-05 V0.8A smart location: autocomplete ---------- */

.hr-agenda-location-field {
    position: relative;
}
.hr-agenda-location-input-wrap {
    position: relative;
}
.hr-agenda-location-spinner {
    position: absolute;
    top: 50%;
    right: 0.7rem;
    transform: translateY(-50%);
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    border: 2px solid var(--hr-border);
    border-top-color: var(--hr-accent);
    animation: hr-agenda-spin 0.7s linear infinite;
}
@keyframes hr-agenda-spin {
    to { transform: translateY(-50%) rotate(360deg); }
}
.hr-agenda-location-suggestions {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    margin: 0.3rem 0 0;
    padding: 0.3rem;
    list-style: none;
    background: var(--hr-surface);
    border: 1px solid var(--hr-border);
    border-radius: 0.6rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
    max-height: 220px;
    overflow-y: auto;
}
.hr-agenda-location-suggestions li {
    display: flex;
    flex-direction: column;
    padding: 0.4rem 0.55rem;
    border-radius: 0.4rem;
    cursor: pointer;
}
.hr-agenda-location-suggestions li:hover,
.hr-agenda-location-suggestions li.is-active {
    background: var(--hr-bg-subtle);
}
.hr-agenda-location-suggestion-main {
    font-size: var(--hr-font-size-base);
    font-weight: var(--hr-font-weight-medium);
    color: var(--hr-text);
}
.hr-agenda-location-suggestion-sub {
    font-size: var(--hr-font-size-sm);
    color: var(--hr-text-muted);
}
.hr-agenda-location-hint {
    font-size: var(--hr-font-size-sm);
    color: var(--hr-text-muted);
    margin: 0.35rem 0 0;
}

/* ---------- HR-05 V0.8A: compacte toasts (Django messages-framework) ---------- */

.hr-toast-stack {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 340px;
}
.hr-toast {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    background: var(--hr-surface);
    border: 1px solid var(--hr-border);
    border-left: 3px solid var(--hr-accent);
    border-radius: 0.6rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    padding: 0.65rem 0.75rem;
    font-size: var(--hr-font-size-base);
    font-weight: var(--hr-font-weight-normal);
    color: var(--hr-text);
    animation: hr-toast-in 0.18s ease-out;
}
.hr-toast.is-leaving {
    animation: hr-toast-out 0.2s ease-in forwards;
}
.hr-toast-message {
    flex: 1;
}
.hr-toast-close {
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
    font-size: 1.1rem;
    color: var(--hr-text-muted);
}
.hr-toast-error,
.hr-toast-danger {
    border-left-color: var(--hr-danger);
}
@keyframes hr-toast-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes hr-toast-out {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-6px); }
}