/*
 * ProRail Duimstok — Design System tokens
 * Bron: _docs of `01_Stijlgids ProRail/prorail-stijlgids ...md`
 *
 * Structuur:
 *   1. :root           — globale tokens (kleur, type, spacing, radius, shadow)
 *   2. .ds-*           — globale design-system componenten (toolbar, panel,
 *                        stat-card, pill, object-badge, table, tabs, auth-card)
 *   3. .ds-prorail     — scope voor pagina's met Bootstrap (showcase pagina's)
 *                        Bootstrap-variant overrides + Bootstrap-component styling
 */

:root {
    /* ─── Kleuren — primair palet ─────────────────────────────────── */
    --color-brand-primary: #B20A2F;
    --color-brand-dark:    #7E0721;
    --color-brand-light:   #F2DEE3;

    /* ─── Kleuren — neutraal palet ────────────────────────────────── */
    --color-neutral-900: #1A1A1A;
    --color-neutral-700: #4A4A4A;
    --color-neutral-400: #9E9E9E;
    --color-neutral-200: #E5E5E5;
    --color-neutral-100: #F5F5F5;
    --color-neutral-000: #FFFFFF;

    /* ─── Kleuren — semantisch ────────────────────────────────────── */
    --color-status-open:        #F5A623;
    --color-status-open-bg:     #FFF8EC;
    --color-status-positive:    #2E7D32;
    --color-status-positive-bg: #E8F5E9;
    --color-status-negative:    #B20A2F;
    --color-status-negative-bg: #FBE3E8;
    --color-status-info:        #1565C0;
    --color-status-info-bg:     #E3F2FD;
    --color-status-neutral:     #616161;
    --color-status-neutral-bg:  #F5F5F5;

    /* ─── Kleuren — objectsoort (inspectie-domein) ─────────────────── */
    --color-object-wissel:      #7B1FA2;
    --color-object-wissel-bg:   #F3E5F5;
    --color-object-overweg:     #0288D1;
    --color-object-overweg-bg:  #E1F5FE;
    --color-object-spoor:       #E65100;
    --color-object-spoor-bg:    #FFF3E0;
    /* engelsman + kruising delen de wissel-kleur (worden als variant gezien) */

    /* ─── Typografie ──────────────────────────────────────────────── */
    --font-family-base: "Inter", "Source Sans Pro", system-ui, -apple-system, sans-serif;
    --font-family-fallback: Arial, Helvetica, sans-serif;

    --type-display-size: 28px;       --type-display-lh: 36px;       --type-display-weight: 700;
    --type-heading-1-size: 22px;     --type-heading-1-lh: 30px;     --type-heading-1-weight: 700;
    --type-heading-2-size: 18px;     --type-heading-2-lh: 26px;     --type-heading-2-weight: 600;
    --type-heading-3-size: 16px;     --type-heading-3-lh: 24px;     --type-heading-3-weight: 600;
    --type-body-lg-size: 15px;       --type-body-lg-lh: 22px;       --type-body-lg-weight: 400;
    --type-body-md-size: 14px;       --type-body-md-lh: 20px;       --type-body-md-weight: 400;
    --type-body-sm-size: 12px;       --type-body-sm-lh: 18px;       --type-body-sm-weight: 400;
    --type-label-size: 12px;         --type-label-lh: 16px;         --type-label-weight: 600;

    /* ─── Spacing (4px grid) ──────────────────────────────────────── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* ─── Radius ──────────────────────────────────────────────────── */
    --radius-0: 0;
    --radius-1: 2px;
    --radius-2: 4px;
    --radius-3: 6px;
    --radius-4: 8px;
    --radius-full: 999px;

    /* ─── Shadow / elevatie ───────────────────────────────────────── */
    --shadow-none: none;
    --shadow-1: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-2: 0 2px 8px rgba(0,0,0,0.12);
    --shadow-3: 0 4px 16px rgba(0,0,0,0.16);
    --shadow-4: 0 8px 32px rgba(0,0,0,0.20);

    /* ─── Motion ──────────────────────────────────────────────────── */
    --motion-quick: 100ms ease-out;
    --motion-standard: 200ms ease-in-out;
    --motion-gentle: 300ms cubic-bezier(.4,0,.2,1);

    /* ─── Layout ──────────────────────────────────────────────────── */
    --toolbar-height: 56px;
}

/* ─── Bootstrap 5 brand overrides ─────────────────────────────────── */
.ds-prorail {
    --bs-primary:   var(--color-brand-primary);
    --bs-primary-rgb: 178, 10, 47;
    --bs-danger:    var(--color-status-negative);
    --bs-danger-rgb: 178, 10, 47;
    --bs-success:   var(--color-status-positive);
    --bs-success-rgb: 46, 125, 50;
    --bs-warning:   var(--color-status-open);
    --bs-warning-rgb: 245, 166, 35;
    --bs-info:      var(--color-status-info);
    --bs-info-rgb:  21, 101, 192;
    --bs-link-color: var(--color-brand-primary);
    --bs-link-hover-color: var(--color-brand-dark);
    --bs-border-color: var(--color-neutral-200);
    --bs-body-color:  var(--color-neutral-900);
    --bs-body-font-family: var(--font-family-base);
}

/* ─── Globals binnen design-system ────────────────────────────────── */
.ds-prorail {
    font-family: var(--font-family-base);
    color: var(--color-neutral-900);
    background-color: var(--color-neutral-000);
}

.ds-prorail h1, .ds-prorail h2, .ds-prorail h3,
.ds-prorail h4, .ds-prorail h5, .ds-prorail h6 {
    font-family: var(--font-family-base);
    color: var(--color-neutral-900);
}

/* ─── Paginaheader (rode balk) ────────────────────────────────────── */
.ds-page-header {
    background-color: var(--color-brand-primary);
    color: var(--color-neutral-000);
    padding: var(--space-5) var(--space-6);
    border-radius: var(--radius-3);
    margin-bottom: var(--space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    box-shadow: var(--shadow-2);
}
.ds-page-header-left {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex: 1 1 auto;
    min-width: 0;
}
.ds-page-header-logo {
    height: 40px;
    width: auto;
    flex-shrink: 0;
    /* Logo is rood, op rode achtergrond -> invert naar wit */
    filter: brightness(0) invert(1);
}
.ds-page-header h1 {
    color: var(--color-neutral-000);
    font-size: var(--type-display-size);
    line-height: var(--type-display-lh);
    font-weight: var(--type-display-weight);
    margin: 0;
}
.ds-page-header .ds-page-subtitle {
    font-size: var(--type-body-md-size);
    line-height: var(--type-body-md-lh);
    color: rgba(255,255,255,0.85);
    margin-top: var(--space-1);
}
.ds-page-header .ds-back-link {
    color: var(--color-neutral-000);
    text-decoration: none;
    font-size: var(--type-body-md-size);
    font-weight: 600;
    padding: var(--space-2) var(--space-3);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: var(--radius-2);
    transition: background-color var(--motion-quick);
}
.ds-page-header .ds-back-link:hover {
    background-color: rgba(255,255,255,0.15);
    color: var(--color-neutral-000);
}

/* ─── Section heading ─────────────────────────────────────────────── */
.ds-prorail .ds-section {
    margin-bottom: var(--space-10);
    padding-bottom: var(--space-8);
    border-bottom: 1px solid var(--color-neutral-200);
}
.ds-prorail .ds-section:last-child {
    border-bottom: none;
}
.ds-prorail .ds-section-title {
    font-size: var(--type-heading-1-size);
    line-height: var(--type-heading-1-lh);
    font-weight: var(--type-heading-1-weight);
    margin: 0 0 var(--space-3) 0;
}
.ds-prorail .ds-section-intro {
    font-size: var(--type-body-lg-size);
    line-height: var(--type-body-lg-lh);
    color: var(--color-neutral-700);
    margin-bottom: var(--space-6);
}

/* ─── Color swatches ──────────────────────────────────────────────── */
.ds-prorail .ds-swatch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-4);
}
.ds-prorail .ds-swatch {
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-3);
    overflow: hidden;
    box-shadow: var(--shadow-1);
    background: var(--color-neutral-000);
}
.ds-prorail .ds-swatch-preview {
    height: 84px;
}
.ds-prorail .ds-swatch-body {
    padding: var(--space-3) var(--space-4);
}
.ds-prorail .ds-swatch-token {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--type-body-sm-size);
    color: var(--color-neutral-700);
    word-break: break-all;
}
.ds-prorail .ds-swatch-name {
    font-weight: 600;
    font-size: var(--type-body-md-size);
    color: var(--color-neutral-900);
    margin-bottom: var(--space-1);
}
.ds-prorail .ds-swatch-hex {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--type-body-sm-size);
    color: var(--color-neutral-900);
}

/* ─── Type scale showcase ─────────────────────────────────────────── */
.ds-prorail .ds-type-row {
    display: grid;
    grid-template-columns: 180px 1fr 140px;
    align-items: baseline;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-neutral-200);
}
.ds-prorail .ds-type-row:last-child {
    border-bottom: none;
}
.ds-prorail .ds-type-token {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--type-body-sm-size);
    color: var(--color-neutral-700);
}
.ds-prorail .ds-type-meta {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--type-body-sm-size);
    color: var(--color-neutral-700);
    text-align: right;
}
.ds-prorail .ds-type-display   { font-size: var(--type-display-size);   line-height: var(--type-display-lh);   font-weight: var(--type-display-weight); }
.ds-prorail .ds-type-heading-1 { font-size: var(--type-heading-1-size); line-height: var(--type-heading-1-lh); font-weight: var(--type-heading-1-weight); }
.ds-prorail .ds-type-heading-2 { font-size: var(--type-heading-2-size); line-height: var(--type-heading-2-lh); font-weight: var(--type-heading-2-weight); }
.ds-prorail .ds-type-heading-3 { font-size: var(--type-heading-3-size); line-height: var(--type-heading-3-lh); font-weight: var(--type-heading-3-weight); }
.ds-prorail .ds-type-body-lg   { font-size: var(--type-body-lg-size);   line-height: var(--type-body-lg-lh);   font-weight: var(--type-body-lg-weight); }
.ds-prorail .ds-type-body-md   { font-size: var(--type-body-md-size);   line-height: var(--type-body-md-lh);   font-weight: var(--type-body-md-weight); }
.ds-prorail .ds-type-body-sm   { font-size: var(--type-body-sm-size);   line-height: var(--type-body-sm-lh);   font-weight: var(--type-body-sm-weight); }
.ds-prorail .ds-type-label     { font-size: var(--type-label-size);     line-height: var(--type-label-lh);     font-weight: var(--type-label-weight); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-neutral-700); }

/* ─── Spacing showcase ────────────────────────────────────────────── */
.ds-prorail .ds-space-row {
    display: grid;
    grid-template-columns: 100px 80px 1fr;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-2) 0;
}
.ds-prorail .ds-space-bar {
    background-color: var(--color-brand-primary);
    height: 16px;
    border-radius: var(--radius-1);
}

/* ─── Shadow showcase ─────────────────────────────────────────────── */
.ds-prorail .ds-shadow-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-6);
}
.ds-prorail .ds-shadow-tile {
    background: var(--color-neutral-000);
    border-radius: var(--radius-3);
    padding: var(--space-5);
    text-align: center;
    border: 1px solid var(--color-neutral-100);
}
.ds-prorail .ds-shadow-1 { box-shadow: var(--shadow-1); }
.ds-prorail .ds-shadow-2 { box-shadow: var(--shadow-2); }
.ds-prorail .ds-shadow-3 { box-shadow: var(--shadow-3); }
.ds-prorail .ds-shadow-4 { box-shadow: var(--shadow-4); }
.ds-prorail .ds-shadow-tile .ds-shadow-name {
    font-weight: 600;
    margin-bottom: var(--space-1);
}
.ds-prorail .ds-shadow-tile .ds-shadow-meta {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--type-body-sm-size);
    color: var(--color-neutral-700);
}

/* ─── Bootstrap component overrides ───────────────────────────────── */
.ds-prorail .btn {
    border-radius: var(--radius-2);
    font-weight: 600;
    transition: background-color var(--motion-quick), color var(--motion-quick);
}
.ds-prorail .btn-primary,
.ds-prorail .btn-danger {
    --bs-btn-bg: var(--color-brand-primary);
    --bs-btn-border-color: var(--color-brand-primary);
    --bs-btn-hover-bg: var(--color-brand-dark);
    --bs-btn-hover-border-color: var(--color-brand-dark);
    --bs-btn-active-bg: var(--color-brand-dark);
    --bs-btn-active-border-color: var(--color-brand-dark);
    --bs-btn-color: var(--color-neutral-000);
    --bs-btn-hover-color: var(--color-neutral-000);
}
.ds-prorail .btn-outline-primary {
    --bs-btn-color: var(--color-brand-primary);
    --bs-btn-border-color: var(--color-brand-primary);
    --bs-btn-hover-color: var(--color-brand-primary);
    --bs-btn-hover-bg: var(--color-brand-light);
    --bs-btn-hover-border-color: var(--color-brand-primary);
}
.ds-prorail .btn-success {
    --bs-btn-bg: var(--color-status-positive);
    --bs-btn-border-color: var(--color-status-positive);
    --bs-btn-hover-bg: #1B5E20;
    --bs-btn-hover-border-color: #1B5E20;
}
.ds-prorail .btn-warning {
    --bs-btn-bg: var(--color-status-open);
    --bs-btn-border-color: var(--color-status-open);
    --bs-btn-color: var(--color-neutral-900);
    --bs-btn-hover-bg: #D08F1C;
    --bs-btn-hover-border-color: #D08F1C;
}
.ds-prorail .btn-info {
    --bs-btn-bg: var(--color-status-info);
    --bs-btn-border-color: var(--color-status-info);
    --bs-btn-color: var(--color-neutral-000);
    --bs-btn-hover-color: var(--color-neutral-000);
    --bs-btn-hover-bg: #0D47A1;
    --bs-btn-hover-border-color: #0D47A1;
}
.ds-prorail .btn-secondary {
    --bs-btn-bg: var(--color-neutral-100);
    --bs-btn-border-color: var(--color-neutral-200);
    --bs-btn-color: var(--color-neutral-900);
    --bs-btn-hover-bg: var(--color-neutral-200);
    --bs-btn-hover-border-color: var(--color-neutral-200);
    --bs-btn-hover-color: var(--color-neutral-900);
}
.ds-prorail .btn:focus-visible {
    outline: 2px solid var(--color-brand-primary);
    outline-offset: 2px;
    box-shadow: none;
}

/* Alert overrides — gebruik semantische palette */
.ds-prorail .alert {
    border-radius: var(--radius-2);
    border: 1px solid transparent;
}
.ds-prorail .alert-primary,
.ds-prorail .alert-danger {
    --bs-alert-bg: var(--color-status-negative-bg);
    --bs-alert-color: var(--color-brand-dark);
    --bs-alert-border-color: var(--color-brand-light);
}
.ds-prorail .alert-success {
    --bs-alert-bg: var(--color-status-positive-bg);
    --bs-alert-color: var(--color-status-positive);
    --bs-alert-border-color: #C8E6C9;
}
.ds-prorail .alert-warning {
    --bs-alert-bg: var(--color-status-open-bg);
    --bs-alert-color: #B26A00;
    --bs-alert-border-color: #FFE0B2;
}
.ds-prorail .alert-info {
    --bs-alert-bg: var(--color-status-info-bg);
    --bs-alert-color: var(--color-status-info);
    --bs-alert-border-color: #BBDEFB;
}
.ds-prorail .alert-secondary,
.ds-prorail .alert-light {
    --bs-alert-bg: var(--color-neutral-100);
    --bs-alert-color: var(--color-neutral-900);
    --bs-alert-border-color: var(--color-neutral-200);
}

/* Cards */
.ds-prorail .card {
    border-radius: var(--radius-3);
    border-color: var(--color-neutral-200);
    box-shadow: var(--shadow-2);
}

/* Inline code */
.ds-prorail code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: var(--color-neutral-100);
    border-radius: var(--radius-1);
    padding: 1px 6px;
    color: var(--color-brand-dark);
    font-size: 0.92em;
}

/* ─── Logo showcase ───────────────────────────────────────────────── */
.ds-prorail .ds-logo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-4);
}
.ds-prorail .ds-logo-tile {
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-3);
    overflow: hidden;
    box-shadow: var(--shadow-1);
}
.ds-prorail .ds-logo-tile-preview {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
}
.ds-prorail .ds-logo-tile-preview img {
    max-height: 56px;
    max-width: 100%;
    width: auto;
}
.ds-prorail .ds-logo-tile-bg-white { background: var(--color-neutral-000); }
.ds-prorail .ds-logo-tile-bg-light { background: var(--color-neutral-100); }
.ds-prorail .ds-logo-tile-bg-brand { background: var(--color-brand-primary); }
.ds-prorail .ds-logo-tile-bg-dark  { background: var(--color-neutral-900); }
.ds-prorail .ds-logo-tile-bg-brand img,
.ds-prorail .ds-logo-tile-bg-dark img {
    filter: brightness(0) invert(1);
}
.ds-prorail .ds-logo-tile-caption {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-neutral-200);
    background: var(--color-neutral-000);
}
.ds-prorail .ds-logo-tile-name {
    font-weight: 600;
    font-size: var(--type-body-md-size);
    color: var(--color-neutral-900);
}
.ds-prorail .ds-logo-tile-hint {
    font-size: var(--type-body-sm-size);
    color: var(--color-neutral-700);
}

/* ─── Brand hero (kleur-presentatie) ──────────────────────────────── */
.ds-prorail .ds-brand-hero {
    background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-dark) 100%);
    color: var(--color-neutral-000);
    border-radius: var(--radius-3);
    padding: var(--space-8) var(--space-6);
    display: flex;
    align-items: center;
    gap: var(--space-6);
    box-shadow: var(--shadow-3);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}
.ds-prorail .ds-brand-hero-logo {
    height: 64px;
    width: auto;
    filter: brightness(0) invert(1);
    flex-shrink: 0;
}
.ds-prorail .ds-brand-hero-content {
    flex: 1 1 320px;
}
.ds-prorail .ds-brand-hero h2 {
    color: var(--color-neutral-000);
    font-size: var(--type-display-size);
    line-height: var(--type-display-lh);
    font-weight: var(--type-display-weight);
    margin: 0 0 var(--space-2) 0;
}
.ds-prorail .ds-brand-hero p {
    margin: 0;
    color: rgba(255,255,255,0.9);
    font-size: var(--type-body-lg-size);
    line-height: var(--type-body-lg-lh);
}

/* Status pills */
.ds-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--type-body-sm-size);
    line-height: var(--type-body-sm-lh);
    font-weight: 600;
}
.ds-pill-open      { color: var(--color-status-open);     background: var(--color-status-open-bg); }
.ds-pill-positive  { color: var(--color-status-positive); background: var(--color-status-positive-bg); }
.ds-pill-negative  { color: var(--color-status-negative); background: var(--color-status-negative-bg); }
.ds-pill-info      { color: var(--color-status-info);     background: var(--color-status-info-bg); }
.ds-pill-neutral   { color: var(--color-status-neutral);  background: var(--color-status-neutral-bg); }

/* ──────────────────────────────────────────────────────────────────
   Globale design-system componenten (productie-app)
   Geen scope-class nodig: gebruik direct .ds-toolbar, .ds-panel, etc.
   ────────────────────────────────────────────────────────────────── */

/* ─── Topnav (witte balk met logo, boven de rode toolbar) ─────────── */
/* Stijlgids §4 Topnavigatie: witte balk, 48 px hoog, logo links, iconen rechts. */
.ds-topnav {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: var(--color-neutral-000);
    border-bottom: 1px solid var(--color-neutral-200);
    box-shadow: var(--shadow-1);
    height: 48px;
    position: sticky;
    top: 0;
    z-index: 110;
}
.ds-topnav-logo {
    height: 28px;
    width: auto;
    display: block;
}
.ds-topnav-logo-link {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}
.ds-topnav-spacer {
    flex: 1;
}
.ds-topnav-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.ds-topnav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-2);
    color: var(--color-neutral-700);
    background: transparent;
    border: none;
    text-decoration: none;
    transition: background var(--motion-quick);
}
.ds-topnav-icon:hover {
    background: var(--color-neutral-100);
    color: var(--color-brand-primary);
    text-decoration: none;
}
.ds-topnav-icon svg {
    width: 20px;
    height: 20px;
}
/* Labelled "Terug" control at the start of the order-list title bar. The
   toolbar's own `.toolbar a` rule gives it the shared white-pill button look;
   here we only size its leading arrow icon to sit next to the 12px label. */
.toolbar-back svg {
    width: 16px;
    height: 16px;
}

/* ─── Toolbar (sticky pagina-header) ──────────────────────────────── */
.ds-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--color-brand-primary);
    color: var(--color-neutral-000);
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-1);
    min-height: var(--toolbar-height);
}
.ds-toolbar h1,
.ds-toolbar .ds-toolbar-title {
    flex: 1;
    font-size: var(--type-heading-3-size);
    line-height: var(--type-heading-3-lh);
    font-weight: 700;
    letter-spacing: 0.3px;
    margin: 0;
    color: var(--color-neutral-000);
}
.ds-toolbar a,
.ds-toolbar button,
.ds-toolbar label {
    background: var(--color-neutral-000);
    color: var(--color-brand-primary);
    border: none;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-2);
    font-size: var(--type-body-sm-size);
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    text-decoration: none;
    transition: background var(--motion-quick);
}
.ds-toolbar a:hover,
.ds-toolbar button:hover,
.ds-toolbar label:hover {
    background: var(--color-brand-light);
    text-decoration: none;
}
.ds-toolbar .ds-toolbar-inline {
    display: inline;
}

/* ─── Collapsible (native <details>/<summary>) ────────────────────── */
/* Wrapper voor inklapbare panelen met altijd-zichtbare samenvatting */
.ds-collapsible {
    background: var(--color-neutral-000);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-3);
    box-shadow: var(--shadow-1);
    margin-bottom: var(--space-5);
    overflow: hidden;
}
.ds-collapsible-summary {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background var(--motion-quick);
}
.ds-collapsible-summary::-webkit-details-marker { display: none; }
.ds-collapsible-summary:hover {
    background: var(--color-neutral-100);
}
.ds-collapsible-summary:focus-visible {
    outline: 2px solid var(--color-brand-primary);
    outline-offset: -2px;
}
.ds-collapsible-title {
    font-weight: 700;
    font-size: var(--type-body-md-size);
    color: var(--color-neutral-900);
    flex-shrink: 0;
}
.ds-collapsible-spacer {
    flex: 1;
}
.ds-collapsible-meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-neutral-700);
    font-size: var(--type-body-sm-size);
}
.ds-collapsible-mini-bar {
    flex: 1;
    max-width: 240px;
    height: 6px;
    background: var(--color-neutral-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.ds-collapsible-mini-bar-fill {
    height: 100%;
    background: var(--color-status-positive);
    transition: width var(--motion-quick);
}
.ds-collapsible-percentage {
    font-weight: 700;
    color: var(--color-neutral-900);
    font-variant-numeric: tabular-nums;
}
.ds-collapsible-chevron {
    width: 20px;
    height: 20px;
    color: var(--color-neutral-700);
    transition: transform var(--motion-quick);
    flex-shrink: 0;
}
.ds-collapsible[open] .ds-collapsible-chevron {
    transform: rotate(180deg);
}
.ds-collapsible-body {
    padding: var(--space-4);
    border-top: 1px solid var(--color-neutral-200);
}

/* ─── Panel (card met optionele headerbalk) ───────────────────────── */
.ds-panel {
    background: var(--color-neutral-000);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-3);
    box-shadow: var(--shadow-2);
    overflow: hidden;
    margin-bottom: var(--space-5);
}
.ds-panel-header {
    background: var(--color-brand-primary);
    color: var(--color-neutral-000);
    padding: var(--space-3) var(--space-5);
    font-size: var(--type-heading-3-size);
    line-height: var(--type-heading-3-lh);
    font-weight: var(--type-heading-3-weight);
}
.ds-panel-body {
    padding: var(--space-5);
}

/* ─── Stat-card (dashboard / summary tegel) ──────────────────────── */
.ds-stat-card {
    background: var(--color-neutral-000);
    border: 1px solid var(--color-neutral-200);
    border-left: 4px solid var(--color-neutral-400);
    border-radius: var(--radius-3);
    padding: var(--space-4) var(--space-5);
    box-shadow: var(--shadow-1);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    transition: box-shadow var(--motion-quick), transform var(--motion-quick);
}
.ds-stat-card:hover {
    box-shadow: var(--shadow-2);
}
.ds-stat-card-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-2);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-neutral-100);
    color: var(--color-neutral-700);
    font-size: 20px;
    flex-shrink: 0;
}
.ds-stat-card-body { flex: 1; min-width: 0; }
.ds-stat-card-label {
    font-size: var(--type-label-size);
    line-height: var(--type-label-lh);
    font-weight: var(--type-label-weight);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-neutral-700);
    margin-bottom: var(--space-1);
}
.ds-stat-card-value {
    font-size: var(--type-heading-1-size);
    line-height: var(--type-heading-1-lh);
    font-weight: var(--type-heading-1-weight);
    color: var(--color-neutral-900);
}

/* Objectsoort-varianten: kleur de linkerbalk + icon achtergrond */
.ds-stat-card--wissel  { border-left-color: var(--color-object-wissel); }
.ds-stat-card--wissel  .ds-stat-card-icon { background: var(--color-object-wissel-bg);  color: var(--color-object-wissel); }
.ds-stat-card--overweg { border-left-color: var(--color-object-overweg); }
.ds-stat-card--overweg .ds-stat-card-icon { background: var(--color-object-overweg-bg); color: var(--color-object-overweg); }
.ds-stat-card--spoor   { border-left-color: var(--color-object-spoor); }
.ds-stat-card--spoor   .ds-stat-card-icon { background: var(--color-object-spoor-bg);   color: var(--color-object-spoor); }
.ds-stat-card--brand   { border-left-color: var(--color-brand-primary); }
.ds-stat-card--brand   .ds-stat-card-icon { background: var(--color-brand-light);       color: var(--color-brand-primary); }

/* ─── Object-badge (objectsoort badge in tabellen) ────────────────── */
.ds-object-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-2);
    border-radius: var(--radius-1);
    font-size: var(--type-body-sm-size);
    line-height: var(--type-body-sm-lh);
    font-weight: 600;
    text-transform: capitalize;
    background: var(--color-neutral-100);
    color: var(--color-neutral-700);
}
.ds-object-badge--wissel,
.ds-object-badge--engelsman,
.ds-object-badge--kruising  { background: var(--color-object-wissel-bg);  color: var(--color-object-wissel); }
.ds-object-badge--overweg   { background: var(--color-object-overweg-bg); color: var(--color-object-overweg); }
.ds-object-badge--spoor     { background: var(--color-object-spoor-bg);   color: var(--color-object-spoor); }

/* ─── Datatabel ───────────────────────────────────────────────────── */
.ds-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--type-body-md-size);
    background: var(--color-neutral-000);
}
.ds-table thead th {
    background: var(--color-neutral-100);
    color: var(--color-neutral-700);
    font-weight: var(--type-label-weight);
    font-size: var(--type-label-size);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-3) var(--space-3);
    border-bottom: 2px solid var(--color-neutral-200);
    text-align: left;
}
.ds-table tbody tr {
    border-bottom: 1px solid var(--color-neutral-200);
    transition: background-color var(--motion-quick);
}
.ds-table tbody tr:nth-child(even) {
    background: #FAFAFA;
}
.ds-table tbody tr:hover {
    background: var(--color-brand-light);
}
.ds-table tbody td {
    padding: var(--space-3) var(--space-3);
    color: var(--color-neutral-900);
    vertical-align: middle;
}

/* ─── Tabs (horizontale navigatie) ────────────────────────────────── */
.ds-tabs {
    display: flex;
    border-bottom: 2px solid var(--color-neutral-200);
    gap: 0;
    overflow-x: auto;
    margin-bottom: var(--space-5);
}
.ds-tab {
    padding: var(--space-2) var(--space-4);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-neutral-700);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: color var(--motion-quick), border-color var(--motion-quick);
}
.ds-tab:hover {
    color: var(--color-neutral-900);
    border-bottom-color: var(--color-neutral-400);
    text-decoration: none;
}
.ds-tab--active,
.ds-tab.active {
    color: var(--color-brand-primary);
    font-weight: 600;
    border-bottom-color: var(--color-brand-primary);
}

/* ─── Auth-card (login, register, reset) ─────────────────────────── */
.ds-auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-neutral-100);
    padding: var(--space-6);
}
.ds-auth-card {
    background: var(--color-neutral-000);
    border-radius: var(--radius-3);
    box-shadow: var(--shadow-2);
    padding: var(--space-8) var(--space-6);
    max-width: 420px;
    width: 100%;
}
.ds-auth-card-logo {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-5);
}
.ds-auth-card-logo img {
    height: 40px;
    width: auto;
}
.ds-auth-card-title {
    font-size: var(--type-heading-1-size);
    line-height: var(--type-heading-1-lh);
    font-weight: var(--type-heading-1-weight);
    color: var(--color-neutral-900);
    text-align: center;
    margin: 0 0 var(--space-2) 0;
}
.ds-auth-card-subtitle {
    font-size: var(--type-body-md-size);
    line-height: var(--type-body-md-lh);
    color: var(--color-neutral-700);
    text-align: center;
    margin: 0 0 var(--space-6) 0;
}
.ds-auth-card-footer {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-neutral-200);
    text-align: center;
    font-size: var(--type-body-md-size);
    color: var(--color-neutral-700);
}
.ds-auth-card-footer a {
    color: var(--color-brand-primary);
    font-weight: 600;
    text-decoration: none;
}
.ds-auth-card-footer a:hover {
    text-decoration: underline;
}