/* ══════════════════════════════════════════════════════════════════════════
   FerroxX Flow — component-stijl (fase 1: foundation)
   Overschrijft Bootstrap-componenten op basis van de tokens in fx-tokens.css.
   Bewust géén nieuwe markup vereist: elke bestaande .card/.table/.badge/.btn
   in de 245 pagina's krijgt de nieuwe look automatisch. Nieuwe Fx-*-componenten
   (fase 2+) bouwen op dezelfde tokens voort.
   Alleen actief onder [data-bs-theme=dark] (zie fx-tokens.css / theme.js: light
   is nog aanwezig in de code maar wordt niet meer aangeboden - sectie 2026-09).
   ══════════════════════════════════════════════════════════════════════════ */

[data-bs-theme="dark"] {
    --bs-body-bg: var(--fx-bg);
    --bs-body-color: var(--fx-text);
    --bs-secondary-color: var(--fx-text-muted);
    --bs-tertiary-bg: var(--fx-surface-2);
    --bs-border-color: var(--fx-border);
    --bs-emphasis-color: var(--fx-text);
}

[data-bs-theme="dark"] body {
    background:
        radial-gradient(1200px 600px at 15% -10%, rgba(var(--fx-accent-rgb), .06), transparent 60%),
        radial-gradient(900px 500px at 100% 0%, rgba(var(--fx-accent-rgb), .04), transparent 55%),
        var(--fx-bg);
    background-attachment: fixed;
}

[data-bs-theme="dark"] ::selection { background: rgba(var(--fx-accent-rgb), .35); }

/* Dunne, donkere scrollbar past beter bij het thema dan de systeemstandaard. */
[data-bs-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
[data-bs-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--fx-surface-2); border-radius: var(--fx-radius-pill); border: 2px solid var(--fx-bg); }
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--fx-surface-hover); }

/* ── Typografie ── */
[data-bs-theme="dark"] body {
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -.005em;
}
[data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2, [data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4, [data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6 {
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--fx-text);
}
[data-bs-theme="dark"] .text-muted { color: var(--fx-text-muted) !important; }
/* Cijfers in KPI's en tabellen: vaste breedte per cijfer, zodat kolommen niet "dansen". */
[data-bs-theme="dark"] .fx-num, [data-bs-theme="dark"] .fx-kpi-value {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ── Kaarten ── */
[data-bs-theme="dark"] .card {
    background: linear-gradient(180deg, var(--fx-surface-2), var(--fx-surface));
    border: 1px solid var(--fx-border);
    border-radius: var(--fx-radius-lg);
    box-shadow: var(--fx-shadow-1);
    transition: border-color var(--fx-transition), box-shadow var(--fx-transition), transform var(--fx-transition);
}
[data-bs-theme="dark"] .card:hover {
    border-color: var(--fx-border-strong);
}
[data-bs-theme="dark"] .card-header {
    background: rgba(255, 255, 255, .015);
    border-bottom: 1px solid var(--fx-border);
    padding: var(--fx-card-pad-y) var(--fx-card-pad-x);
    font-weight: 600;
    letter-spacing: -.005em;
}
[data-bs-theme="dark"] .card-body { padding: var(--fx-card-pad-y) var(--fx-card-pad-x); }
[data-bs-theme="dark"] .card-footer {
    background: rgba(255, 255, 255, .015);
    border-top: 1px solid var(--fx-border);
}
/* Kaarten die bewust een statuskleur dragen (bijv. dashboardwidgets met Severity) gloeien zacht
   in die kleur i.p.v. alleen een gekleurde rand - dat is het "premium" verschil met vlak Bootstrap. */
[data-bs-theme="dark"] .card.border-danger { border-color: rgba(var(--fx-bad-rgb), .45) !important; box-shadow: var(--fx-glow-bad); }
[data-bs-theme="dark"] .card.border-warning { border-color: rgba(var(--fx-warn-rgb), .45) !important; box-shadow: var(--fx-glow-warn); }
[data-bs-theme="dark"] .card.border-success { border-color: rgba(var(--fx-ok-rgb), .45) !important; box-shadow: var(--fx-glow-ok); }
[data-bs-theme="dark"] .card.border-primary { border-color: rgba(var(--fx-accent-rgb), .5) !important; box-shadow: var(--fx-glow-accent); }

/* Widgets die je kunt aanklikken (fx-widget-clickable, dashboard) lichten zachter op dan een
   platte hover-bg, en tillen heel licht op - subtiel, geen speels effect. */
[data-bs-theme="dark"] .fx-widget-clickable:hover {
    background: rgba(var(--fx-accent-rgb), .08) !important;
}

/* Een aanklikbare kaart of rij was alleen met de muis te zien: hover wel, focus niet. Wie met
   Tab werkt (of met handschoenen aan liever het toetsenbord pakt) zag dus niet waar hij stond.
   :focus-visible i.p.v. :focus, zodat een muisklik geen ring achterlaat. */
.fx-clickable:focus-visible,
.fx-widget-clickable:focus-visible,
tr[role="button"]:focus-visible {
    outline: 2px solid var(--fx-accent, var(--bs-primary));
    outline-offset: 2px;
    border-radius: var(--fx-radius-sm, .5rem);
}
/* Bewust géén eigen hover-achtergrond op .fx-clickable: die klasse staat ook op tabelrijen die
   al een toestandskleur dragen (table-warning bij een wijziging in behandeling, table-danger bij
   een bottleneck). Een eigen background zou daar bovenop gaan en de betekenis wegpoetsen;
   table-hover regelt de hover op die rijen al. */

/* ── Paginakop ── */
[data-bs-theme="dark"] .fx-page-header h3,
[data-bs-theme="dark"] .fx-page-header h1 {
    display: flex;
    align-items: center;
    gap: .5rem;
}
[data-bs-theme="dark"] .fx-page-header .bi { color: var(--fx-accent); }

/* ── Knoppen ── */
[data-bs-theme="dark"] .btn {
    border-radius: var(--fx-radius-sm);
    font-weight: 500;
    letter-spacing: -.005em;
    transition: transform var(--fx-transition-fast), box-shadow var(--fx-transition), filter var(--fx-transition);
}
[data-bs-theme="dark"] .btn:hover { filter: brightness(1.06); }
[data-bs-theme="dark"] .btn:active { transform: translateY(1px); }
[data-bs-theme="dark"] .btn-primary { box-shadow: 0 0 0 0 rgba(var(--fx-accent-rgb), 0); }
[data-bs-theme="dark"] .btn-primary:hover { box-shadow: var(--fx-glow-accent); }
[data-bs-theme="dark"] .btn-primary:focus-visible,
[data-bs-theme="dark"] .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 .2rem rgba(var(--fx-accent-rgb), .3);
}
[data-bs-theme="dark"] .btn-outline-secondary,
[data-bs-theme="dark"] .btn-outline-light {
    border-color: var(--fx-border-strong);
    color: var(--fx-text);
}
[data-bs-theme="dark"] .btn-outline-secondary:hover,
[data-bs-theme="dark"] .btn-outline-light:hover {
    background: var(--fx-surface-hover);
    border-color: var(--fx-border-strong);
    color: var(--fx-text);
}

/* ── Badges (statussen) ── */
[data-bs-theme="dark"] .badge {
    border-radius: var(--fx-radius-pill);
    font-weight: 600;
    font-size: .74rem;
    letter-spacing: .01em;
    padding: .32em .65em;
}
[data-bs-theme="dark"] .badge.bg-secondary { background: var(--fx-surface-hover) !important; color: var(--fx-text-muted) !important; border: 1px solid var(--fx-border-strong); }
[data-bs-theme="dark"] .badge.bg-light { background: var(--fx-surface-hover) !important; color: var(--fx-text) !important; }
[data-bs-theme="dark"] .badge.bg-dark { background: var(--fx-bg-elevated) !important; color: var(--fx-text) !important; border: 1px solid var(--fx-border); }
[data-bs-theme="dark"] .badge.bg-success,
[data-bs-theme="dark"] .badge.text-bg-success { background: rgba(var(--fx-ok-rgb), .16) !important; color: var(--fx-ok-emphasis) !important; }
[data-bs-theme="dark"] .badge.bg-warning,
[data-bs-theme="dark"] .badge.text-bg-warning { background: rgba(var(--fx-warn-rgb), .18) !important; color: var(--fx-warn-emphasis) !important; }
[data-bs-theme="dark"] .badge.bg-danger,
[data-bs-theme="dark"] .badge.text-bg-danger { background: rgba(var(--fx-bad-rgb), .16) !important; color: var(--fx-bad-emphasis) !important; }
[data-bs-theme="dark"] .badge.bg-info,
[data-bs-theme="dark"] .badge.text-bg-info { background: rgba(var(--fx-info-rgb), .16) !important; color: var(--fx-info-emphasis) !important; }
[data-bs-theme="dark"] .badge.bg-primary,
[data-bs-theme="dark"] .badge.text-bg-primary { background: rgba(var(--fx-accent-rgb), .18) !important; color: var(--fx-accent) !important; }

/* ── Tabellen ── */
[data-bs-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--fx-text);
    --bs-table-border-color: var(--fx-border);
    --bs-table-striped-bg: rgba(255, 255, 255, .015);
    --bs-table-hover-bg: rgba(var(--fx-accent-rgb), .07);
    border-collapse: separate;
    border-spacing: 0;
}
[data-bs-theme="dark"] .table > thead > tr > th {
    background: rgba(255, 255, 255, .02);
    color: var(--fx-text-muted);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--fx-border-strong);
    padding: var(--fx-cell-pad-y) var(--fx-cell-pad-x);
    white-space: nowrap;
}
[data-bs-theme="dark"] .table > tbody > tr > td {
    padding: var(--fx-cell-pad-y) var(--fx-cell-pad-x);
    border-bottom: 1px solid var(--fx-border);
    vertical-align: middle;
}
[data-bs-theme="dark"] .table > tbody > tr { transition: background var(--fx-transition-fast); }
[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * { color: var(--fx-text); }
[data-bs-theme="dark"] .table-responsive {
    border-radius: var(--fx-radius);
    border: 1px solid var(--fx-border);
}
[data-bs-theme="dark"] .table-responsive .table { margin-bottom: 0; }
[data-bs-theme="dark"] .table-responsive .table > thead > tr > th:first-child { border-top-left-radius: var(--fx-radius); }
[data-bs-theme="dark"] .table-responsive .table > thead > tr > th:last-child { border-top-right-radius: var(--fx-radius); }

/* ── Formulieren ── */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: var(--fx-surface-2);
    border: 1px solid var(--fx-border-strong);
    color: var(--fx-text);
    border-radius: var(--fx-radius-sm);
}
[data-bs-theme="dark"] .form-control::placeholder { color: var(--fx-text-faint); }
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: var(--fx-surface-2);
    color: var(--fx-text);
    border-color: var(--fx-accent);
    /* Bootstrap's eigen focus-glow staat vast op blauw (niet via een variabele, letterlijk
       rgba(13,110,253,...) in de gecompileerde CSS), dus zonder deze override botst die met het
       teal accent overal elders (knop, logo, links). */
    box-shadow: 0 0 0 .25rem var(--fx-accent-glow-soft);
}
[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-control[readonly] { background-color: var(--fx-surface); color: var(--fx-text-muted); }
[data-bs-theme="dark"] .form-label { font-weight: 600; font-size: .84rem; color: var(--fx-text-muted); margin-bottom: .3rem; }
/* Bootstrap "knipt" de rand achter een opgetild floating label met een ::after in de kleur van
   --bs-body-bg (paginakleur) - die staat hier los van --fx-surface-2 (de kleur van het veld zelf),
   dus zonder deze override laat dat knipsel een zwarte vlek zien in plaats van in het veld op te
   gaan. */
[data-bs-theme="dark"] .form-floating > .form-control-plaintext ~ label::after,
[data-bs-theme="dark"] .form-floating > .form-control:focus ~ label::after,
[data-bs-theme="dark"] .form-floating > .form-control:not(:placeholder-shown) ~ label::after,
[data-bs-theme="dark"] .form-floating > .form-select ~ label::after {
    background-color: var(--fx-surface-2);
}
[data-bs-theme="dark"] .form-floating > .form-control:disabled ~ label::after,
[data-bs-theme="dark"] .form-floating > :disabled ~ label::after {
    background-color: var(--fx-surface);
}
[data-bs-theme="dark"] .form-check-input { background-color: var(--fx-surface-2); border-color: var(--fx-border-strong); }
[data-bs-theme="dark"] .form-switch .form-check-input { background-color: var(--fx-surface-2); }
[data-bs-theme="dark"] .input-group-text { background-color: var(--fx-surface-2); border-color: var(--fx-border-strong); color: var(--fx-text-muted); }

/* ── Alerts ── */
[data-bs-theme="dark"] .alert { border-radius: var(--fx-radius); border: 1px solid var(--fx-border); }
[data-bs-theme="dark"] .alert-success { background: rgba(var(--fx-ok-rgb), .1); border-color: rgba(var(--fx-ok-rgb), .3); color: var(--fx-ok-emphasis); }
[data-bs-theme="dark"] .alert-warning { background: rgba(var(--fx-warn-rgb), .1); border-color: rgba(var(--fx-warn-rgb), .3); color: var(--fx-warn-emphasis); }
[data-bs-theme="dark"] .alert-danger { background: rgba(var(--fx-bad-rgb), .1); border-color: rgba(var(--fx-bad-rgb), .3); color: var(--fx-bad-emphasis); }
[data-bs-theme="dark"] .alert-info { background: rgba(var(--fx-info-rgb), .1); border-color: rgba(var(--fx-info-rgb), .3); color: var(--fx-info-emphasis); }

/* ── Dropdowns / modals ── */
[data-bs-theme="dark"] .dropdown-menu {
    background: var(--fx-surface-2);
    border: 1px solid var(--fx-border-strong);
    border-radius: var(--fx-radius);
    box-shadow: var(--fx-shadow-2);
}
[data-bs-theme="dark"] .dropdown-item { color: var(--fx-text); border-radius: var(--fx-radius-sm); margin: 0 .25rem; width: calc(100% - .5rem); }
[data-bs-theme="dark"] .dropdown-item:hover, [data-bs-theme="dark"] .dropdown-item:focus { background: rgba(var(--fx-accent-rgb), .12); color: var(--fx-text); }
[data-bs-theme="dark"] .dropdown-divider { border-color: var(--fx-border); }
[data-bs-theme="dark"] .modal-content {
    background: var(--fx-surface-2);
    border: 1px solid var(--fx-border-strong);
    border-radius: var(--fx-radius-lg);
    box-shadow: var(--fx-shadow-2);
}
[data-bs-theme="dark"] .modal-header, [data-bs-theme="dark"] .modal-footer { border-color: var(--fx-border); }
.modal.d-block { background: rgba(0, 0, 0, .5); }

/* ── Progress (voortgangsbalken, o.a. dashboardwidgets/ringen fase 2) ── */
[data-bs-theme="dark"] .progress { background: var(--fx-surface); border-radius: var(--fx-radius-pill); height: .6rem; }
[data-bs-theme="dark"] .progress-bar { border-radius: var(--fx-radius-pill); }

/* ══════════════════════════════════════════════════════════════════════════
   Topbar
   ══════════════════════════════════════════════════════════════════════════ */
[data-bs-theme="dark"] .fx-navbar {
    background: linear-gradient(180deg, var(--fx-bg-elevated), var(--fx-bg)) !important;
    border-bottom: 1px solid var(--fx-border);
    box-shadow: 0 1px 0 rgba(var(--fx-accent-rgb), .06), var(--fx-shadow-1);
    min-height: 56px;
}
[data-bs-theme="dark"] .fx-navbar .navbar-brand img { filter: drop-shadow(0 0 10px rgba(var(--fx-accent-rgb), .35)); }
[data-bs-theme="dark"] .fx-main-nav .nav-link {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: var(--fx-text-muted);
    font-weight: 500;
    font-size: .88rem;
    padding: .5rem .7rem;
    border-radius: var(--fx-radius-sm);
    position: relative;
    transition: color var(--fx-transition-fast), background var(--fx-transition-fast);
}
[data-bs-theme="dark"] .fx-main-nav .nav-link .bi { font-size: .95rem; opacity: .85; }
[data-bs-theme="dark"] .fx-main-nav .nav-link:hover,
[data-bs-theme="dark"] .fx-main-nav .nav-item.dropdown:hover > .nav-link {
    color: var(--fx-text);
    background: rgba(255, 255, 255, .04);
}
/* Actief: Blazor's NavLink zet zelf .active op directe links én op dropdown-items - :has() tilt
   dat door naar het bovenliggende menu-item, zodat "je zit in Productie" ook zichtbaar is als je
   op een subpagina van Productie staat. (Degradeert onschadelijk in zeer oude browsers: dan
   ontbreekt alleen de outline op het groepsitem.) */
[data-bs-theme="dark"] .fx-main-nav .nav-link.active,
[data-bs-theme="dark"] .fx-main-nav .nav-item.dropdown:has(.dropdown-item.active) > .nav-link {
    color: var(--fx-accent);
    background: rgba(var(--fx-accent-rgb), .1);
}
[data-bs-theme="dark"] .fx-main-nav .nav-link.active::after,
[data-bs-theme="dark"] .fx-main-nav .nav-item.dropdown:has(.dropdown-item.active) > .nav-link::after {
    content: "";
    position: absolute;
    left: .6rem;
    right: .6rem;
    bottom: -1px;
    height: 2px;
    background: var(--fx-accent);
    border-radius: var(--fx-radius-pill);
    box-shadow: 0 0 8px 0 rgba(var(--fx-accent-rgb), .7);
}
[data-bs-theme="dark"] .fx-navbar .dropdown-menu-dark {
    --bs-dropdown-bg: var(--fx-surface-2);
    --bs-dropdown-border-color: var(--fx-border-strong);
    --bs-dropdown-link-color: var(--fx-text);
    --bs-dropdown-link-hover-bg: rgba(var(--fx-accent-rgb), .12);
    --bs-dropdown-divider-bg: var(--fx-border);
    box-shadow: var(--fx-shadow-2);
}
[data-bs-theme="dark"] .fx-navbar .form-control {
    background: rgba(255, 255, 255, .04);
    border-color: var(--fx-border-strong);
}
[data-bs-theme="dark"] .fx-navbar .btn-outline-light {
    border-color: var(--fx-border-strong);
}
[data-bs-theme="dark"] .fx-navbar .btn-outline-light:hover {
    background: rgba(var(--fx-accent-rgb), .14);
    border-color: rgba(var(--fx-accent-rgb), .4);
    color: var(--fx-text);
}

/* ── Skeleton loader (fase 2/4: async lijsten die nog laden) ── */
[data-bs-theme="dark"] .fx-skeleton {
    background: linear-gradient(90deg, var(--fx-surface) 25%, var(--fx-surface-hover) 37%, var(--fx-surface) 63%);
    background-size: 400% 100%;
    animation: fx-skeleton-shine 1.4s ease infinite;
    border-radius: var(--fx-radius-sm);
}
[data-fx-anim="off"] .fx-skeleton { animation: none; background: var(--fx-surface-hover); }
@keyframes fx-skeleton-shine {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}
[data-bs-theme="dark"] .fx-skeleton-group { padding: .1rem 0; }

/* ── Lege staat ── */
[data-bs-theme="dark"] .fx-empty-state {
    text-align: center;
    padding: 1.75rem 1rem;
    color: var(--fx-text-muted);
}
[data-bs-theme="dark"] .fx-empty-state-icon { font-size: 1.6rem; color: var(--fx-text-faint); display: block; margin-bottom: .5rem; }
[data-bs-theme="dark"] .fx-empty-state-title { font-weight: 600; color: var(--fx-text); font-size: .92rem; }
[data-bs-theme="dark"] .fx-empty-state-text { font-size: .82rem; margin-top: .15rem; }

/* ══════════════════════════════════════════════════════════════════════════
   Fase 2 — dashboard-widgets (FxKpiCard, FxProgressRing, FxTrend, FxSparkline,
   FxMachineCard, FxRoutingSteps, FxPlanningGantt, FxNestingPreview)
   ══════════════════════════════════════════════════════════════════════════ */
[data-bs-theme="dark"] .fx-kpi-value { font-size: 1.9rem; line-height: 1.1; }
[data-bs-theme="dark"] .fx-kpi-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; border-radius: var(--fx-radius);
    font-size: 1.05rem; flex-shrink: 0;
}
[data-bs-theme="dark"] .fx-kpi-icon-accent { background: rgba(var(--fx-accent-rgb), .14); color: var(--fx-accent); }
[data-bs-theme="dark"] .fx-kpi-icon-ok { background: rgba(var(--fx-ok-rgb), .14); color: var(--fx-ok); }
[data-bs-theme="dark"] .fx-kpi-icon-warn { background: rgba(var(--fx-warn-rgb), .14); color: var(--fx-warn); }
[data-bs-theme="dark"] .fx-kpi-icon-bad { background: rgba(var(--fx-bad-rgb), .14); color: var(--fx-bad); }
[data-bs-theme="dark"] .fx-kpi-progress { height: .35rem; }

[data-bs-theme="dark"] .fx-trend { display: inline-flex; align-items: center; font-size: .78rem; font-weight: 700; border-radius: var(--fx-radius-pill); padding: .05rem .4rem; }
[data-bs-theme="dark"] .fx-trend-up { color: var(--fx-ok); background: rgba(var(--fx-ok-rgb), .12); }
[data-bs-theme="dark"] .fx-trend-down { color: var(--fx-bad); background: rgba(var(--fx-bad-rgb), .12); }
[data-bs-theme="dark"] .fx-trend-flat { color: var(--fx-text-muted); background: rgba(255, 255, 255, .04); }

[data-bs-theme="dark"] .fx-sparkline rect { transition: opacity var(--fx-transition-fast); }

/* ── FxMachineCard ── */
[data-bs-theme="dark"] .fx-machine-card {
    display: flex; align-items: center; gap: .65rem;
    background: var(--fx-surface-2); border: 1px solid var(--fx-border);
    border-radius: var(--fx-radius); padding: .6rem .75rem;
    transition: border-color var(--fx-transition), transform var(--fx-transition);
}
[data-bs-theme="dark"] .fx-machine-card:hover { border-color: var(--fx-border-strong); transform: translateY(-1px); }
[data-bs-theme="dark"] .fx-machine-dot { width: .5rem; height: .5rem; border-radius: 50%; flex-shrink: 0; }

/* Foto van het werkstation met de statusstip in de hoek. Buiten de dark-prefix: dit is vorm, geen
   kleur, en moet in beide thema's hetzelfde zijn. */
.fx-machine-photo { position: relative; flex: 0 0 auto; line-height: 0; }
.fx-machine-photo img {
    width: 56px;
    height: 42px;
    object-fit: cover;
    border-radius: .35rem;
    background: var(--bs-tertiary-bg);
}
.fx-machine-photo .fx-machine-dot {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    /* Randje in de kaartkleur, anders valt de stip weg tegen een donker deel van de foto. Met
       outline en niet box-shadow: de statusklassen (-running/-blocked/-down) gebruiken box-shadow
       al voor hun glow, en die zou hier sneuvelen. */
    outline: 2px solid var(--fx-surface-2, var(--bs-body-bg));
}
[data-bs-theme="dark"] .fx-machine-dot-running { background: var(--fx-ok); box-shadow: 0 0 6px var(--fx-ok); }
[data-bs-theme="dark"] .fx-machine-dot-idle { background: var(--fx-text-faint); }
[data-bs-theme="dark"] .fx-machine-dot-blocked { background: var(--fx-warn); box-shadow: 0 0 6px var(--fx-warn); }
[data-bs-theme="dark"] .fx-machine-dot-down { background: var(--fx-bad); box-shadow: 0 0 6px var(--fx-bad); }
[data-fx-anim="off"] .fx-machine-card:hover { transform: none; }

/* ── FxRoutingSteps ── */
[data-bs-theme="dark"] .fx-routing { display: flex; flex-direction: column; }
[data-bs-theme="dark"] .fx-routing-step { display: flex; gap: .75rem; position: relative; padding-bottom: 1.1rem; }
[data-bs-theme="dark"] .fx-routing-step:last-child { padding-bottom: 0; }
[data-bs-theme="dark"] .fx-routing-line {
    position: absolute; left: .6rem; top: 1.5rem; bottom: -.1rem; width: 2px;
    background: var(--fx-border-strong);
}
[data-bs-theme="dark"] .fx-routing-step:last-child .fx-routing-line { display: none; }
[data-bs-theme="dark"] .fx-routing-dot {
    width: 1.25rem; height: 1.25rem; border-radius: 50%; flex-shrink: 0; z-index: 1;
    display: flex; align-items: center; justify-content: center; font-size: .7rem;
    background: var(--fx-surface-2); border: 2px solid var(--fx-border-strong); color: var(--fx-text-muted);
}
[data-bs-theme="dark"] .fx-routing-step-done .fx-routing-dot { background: var(--fx-ok); border-color: var(--fx-ok); color: var(--fx-ok-contrast); }
[data-bs-theme="dark"] .fx-routing-step-active .fx-routing-dot { background: var(--fx-accent); border-color: var(--fx-accent); color: var(--fx-accent-contrast); box-shadow: var(--fx-glow-accent); }
[data-bs-theme="dark"] .fx-routing-step-blocked .fx-routing-dot { border-color: var(--fx-bad); color: var(--fx-bad); }
[data-bs-theme="dark"] .fx-routing-step-done .fx-routing-line { background: var(--fx-ok); }
[data-bs-theme="dark"] .fx-routing-title { font-weight: 600; font-size: .88rem; }
[data-bs-theme="dark"] .fx-routing-step-done .fx-routing-title { color: var(--fx-text-muted); }
[data-bs-theme="dark"] .fx-routing-meta { font-size: .76rem; color: var(--fx-text-muted); }

/* ── FxNestingPreview ── */
[data-bs-theme="dark"] .fx-nesting-plate {
    background: var(--fx-surface); border: 1px solid var(--fx-border-strong); border-radius: var(--fx-radius);
    aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
[data-bs-theme="dark"] .fx-nesting-plate svg { width: 100%; height: 100%; }
[data-bs-theme="dark"] .fx-nesting-part { fill: rgba(var(--fx-accent-rgb), .22); stroke: var(--fx-accent); stroke-width: 1; }

/* ── FxPlanningGantt ── */
[data-bs-theme="dark"] .fx-gantt-row { display: grid; grid-template-columns: 160px 1fr; align-items: center; min-height: 2.6rem; border-bottom: 1px solid var(--fx-border); }
[data-bs-theme="dark"] .fx-gantt-row:last-child { border-bottom: none; }
[data-bs-theme="dark"] .fx-gantt-resource { padding: .3rem .6rem; font-size: .82rem; }
[data-bs-theme="dark"] .fx-gantt-resource .fx-gantt-resource-sub { color: var(--fx-text-muted); font-size: .7rem; }
[data-bs-theme="dark"] .fx-gantt-track { position: relative; height: 1.9rem; background: repeating-linear-gradient(90deg, transparent, transparent calc(var(--fx-gantt-col, 14.28%) - 1px), var(--fx-border) calc(var(--fx-gantt-col, 14.28%) - 1px), var(--fx-border) var(--fx-gantt-col, 14.28%)); }
[data-bs-theme="dark"] .fx-gantt-bar {
    position: absolute; top: .2rem; height: 1.5rem; border-radius: .35rem;
    display: flex; align-items: center; padding: 0 .4rem; font-size: .72rem; font-weight: 600;
    color: var(--fx-accent-contrast); overflow: hidden; white-space: nowrap; cursor: pointer;
    box-shadow: var(--fx-shadow-1);
    transition: filter var(--fx-transition-fast), transform var(--fx-transition-fast);
}
[data-bs-theme="dark"] .fx-gantt-bar:hover { filter: brightness(1.12); transform: translateY(-1px); }
[data-fx-anim="off"] .fx-gantt-bar:hover { transform: none; }
[data-bs-theme="dark"] .fx-gantt-header { display: grid; grid-template-columns: 160px 1fr; font-size: .72rem; color: var(--fx-text-muted); text-transform: uppercase; letter-spacing: .04em; padding-bottom: .35rem; }
[data-bs-theme="dark"] .fx-gantt-header-days { display: grid; }
[data-bs-theme="dark"] .fx-gantt-header-days > div { text-align: center; }

/* ══════════════════════════════════════════════════════════════════════════
   FxTable (fase 3: overige lijsten) — zoeken, sorteren, paginering,
   bulk-selectie, kolommen tonen/verbergen, sticky kop
   ══════════════════════════════════════════════════════════════════════════ */
.fx-table-toolbar {
    display: flex; align-items: center; flex-wrap: wrap; gap: .6rem;
    margin-bottom: .75rem;
}
.fx-table-search { max-width: 22rem; }
.fx-table-selected-count {
    font-size: .82rem; font-weight: 600; color: var(--fx-accent);
    background: rgba(var(--fx-accent-rgb), .12); border-radius: var(--fx-radius-pill);
    padding: .2rem .7rem;
}
[data-bs-theme="dark"] .fx-table-sortable { cursor: pointer; user-select: none; }
[data-bs-theme="dark"] .fx-table-sortable:hover { color: var(--fx-text); }
[data-bs-theme="dark"] .fx-table-sort-icon { color: var(--fx-accent); font-size: .65rem; }
[data-bs-theme="dark"] .fx-table-row-clickable { cursor: pointer; }
[data-bs-theme="dark"] .fx-table-row-clickable:hover > * { background: rgba(var(--fx-accent-rgb), .07); }

.fx-table-scroll { max-height: 70vh; overflow-y: auto; }
[data-bs-theme="dark"] .fx-table-scroll thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--fx-bg-elevated);
}

.fx-table-pager {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
    margin-top: .75rem;
}
[data-bs-theme="dark"] .fx-table-pager-info { font-size: .78rem; color: var(--fx-text-muted); }