/* ===== Status Flow Stepper =====
   Compact sinds 11-10-2026: cirkel 18px in plaats van 28px en minder witruimte, ongeveer 44px hoog in plaats
   van 72px. Verander je de cirkelmaat, pas dan ook de margin-top van de verbindingslijn aan. */
.status-flow-stepper {
    display: flex;
    align-items: flex-start;
    padding: 3px 4px 0;
    overflow: visible;
    gap: 0;
}

.sfs-step {
    display: flex;
    align-items: flex-start;
    flex: 1 1 0;
    min-width: 0;
    position: relative;
}

.sfs-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
    min-width: 32px;
    position: relative;
    cursor: default;
}

/* Circle */
.sfs-circle {
    /* Rand binnen de 18px: daar rekenen de stip en de verbindingslijn mee. */
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
    border: 2px solid #d0d0d0;
    background: #fff;
    cursor: default;
}

.sfs-completed .sfs-circle {
    background: #4caf50;
    border-color: #4caf50;
}

.sfs-active .sfs-circle {
    background: #fff;
    border-color: #1976d2;
    border-width: 2px;
    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
}

.sfs-pending .sfs-circle {
    background: #f5f5f5;
    border-color: #d0d0d0;
}

/* Check icon (completed) */
.sfs-check-icon {
    width: 12px;
    height: 12px;
    fill: #fff;
}

/* Active dot */
/* Even maat: binnen de rand heeft de cirkel 14px, en met 7px stond de stip een halve pixel uit het midden. */
.sfs-active-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1976d2;
}

/* Auto-evaluate icon */
.sfs-auto-icon {
    width: 10px;
    height: 10px;
    fill: #bbb;
}

.sfs-completed .sfs-auto-icon {
    fill: #fff;
}

/* Label */
.sfs-label {
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
    color: #888;
    /* 92px: "Binnengekomen" past dan op één regel; break-word brak hem anders midden in het woord af */
    max-width: 92px;
    overflow: hidden;
    /* Twee regels in plaats van één: bij zeven statussen liep een lange naam ("Invoer gereserveerd") over
       de buren heen (09-10-2026) */
    white-space: normal;
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.sfs-completed .sfs-label {
    color: #4caf50;
    font-weight: 500;
}

.sfs-active .sfs-label {
    color: #1976d2;
    font-weight: 600;
}

/* Connectors */
.sfs-connector {
    flex: 1 1 0;
    height: 2px;
    background: #d0d0d0;
    /* (cirkel - lijndikte) / 2: zo loopt de lijn precies door het midden. Met de halve cirkel (destijds 14px)
       zat hij 1px te laag. */
    margin-top: 8px;
    min-width: 12px;
}

.sfs-connector-done {
    background: #4caf50;
}

/* ===== Tooltip ===== */
.sfs-tooltip {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.5;
    white-space: nowrap;
    pointer-events: none;
    /* display en niet visibility: een verborgen maar aanwezige tooltip telt mee voor de breedte, en die van
       de laatste stap stak half over de rechterrand. Dat gaf op elk scherm met een stepper een horizontale
       schuifbalk, hoe breed het venster ook was. */
    display: none;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Tooltip arrow (points up) */
.sfs-tooltip::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: #333;
}

/* Show on hover */
.sfs-node:hover .sfs-tooltip {
    display: block;
}

/* Eerste en laatste stap: tooltip naar binnen laten uitvallen in plaats van gecentreerd, anders valt hij
   bij hover alsnog buiten beeld. De pijl blijft onder het midden van de cirkel: 14px vanaf de rand van de
   tooltip, en de pijl zelf is 12px breed. */
.sfs-step:first-child .sfs-tooltip {
    transform: translateX(-14px);
}

.sfs-step:first-child .sfs-tooltip::after {
    left: 8px;
    transform: none;
}

.sfs-step:last-child .sfs-tooltip {
    left: auto;
    right: 50%;
    transform: translateX(14px);
}

.sfs-step:last-child .sfs-tooltip::after {
    left: auto;
    right: 8px;
    transform: none;
}

.sfs-tooltip-title {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 4px;
}

.sfs-tooltip-row {
    color: #ccc;
    font-size: 11px;
}

.sfs-tooltip-label {
    color: #999;
    margin-right: 2px;
}

.sfs-tooltip-badge {
    display: inline-block;
    margin-top: 6px;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.sfs-tooltip-badge-active {
    background: rgba(25, 118, 210, 0.3);
    color: #90caf9;
}

.sfs-tooltip-badge-pending {
    background: rgba(255, 255, 255, 0.1);
    color: #999;
}

.sfs-tooltip-badge-clickable {
    background: rgba(255, 152, 0, 0.3);
    color: #ffcc80;
}

/* ===== Clickable steps ===== */
.sfs-clickable {
    cursor: pointer;
}

.sfs-clickable .sfs-circle {
    cursor: pointer;
}

.sfs-clickable .sfs-label {
    cursor: pointer;
}

/* Hover effect on clickable pending steps */
.sfs-pending.sfs-step .sfs-clickable .sfs-circle:hover {
    border-color: #ff9800;
    background: #fff3e0;
    box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.2);
    transform: scale(1.1);
}

.sfs-pending.sfs-step .sfs-clickable .sfs-label:hover {
    color: #ff9800;
}

/* Hover effect on clickable completed steps (backward transition) */
.sfs-completed.sfs-step .sfs-clickable .sfs-circle:hover {
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.3);
    transform: scale(1.1);
}

.sfs-completed.sfs-step .sfs-clickable .sfs-label:hover {
    text-decoration: underline;
}

/* ===== Donkere modus (X Modern) =====
   Witte en lichtgrijze cirkels, grijze verbindingslijnen en de oranje hover-tint krijgen de thematokens.
   De groene (afgerond) en blauwe (actief) accenten blijven; de labels krijgen lichtere varianten.
   De tooltip is al donker (#333) en blijft ongewijzigd. Let op de cascade: de donkere basisregel voor
   .sfs-circle wint van de lichte staatregels, vandaar dat afgerond/actief/wachtend hier opnieuw staan. */
html[data-pfx-theme="dark"] .sfs-circle {
    background: var(--pfx-surface);
    border-color: var(--pfx-line);
}

html[data-pfx-theme="dark"] .sfs-completed .sfs-circle {
    background: #4caf50;
    border-color: #4caf50;
}

html[data-pfx-theme="dark"] .sfs-active .sfs-circle {
    background: var(--pfx-surface);
    border-color: #5B9BE6;
    box-shadow: 0 0 0 2px rgba(96, 150, 230, 0.3);
}

html[data-pfx-theme="dark"] .sfs-active-dot {
    background: #5B9BE6;
}

html[data-pfx-theme="dark"] .sfs-pending .sfs-circle {
    background: var(--pfx-surface-3);
    border-color: var(--pfx-line);
}

html[data-pfx-theme="dark"] .sfs-auto-icon {
    fill: var(--pfx-muted);
}

html[data-pfx-theme="dark"] .sfs-completed .sfs-auto-icon {
    fill: #fff;
}

html[data-pfx-theme="dark"] .sfs-label {
    color: var(--pfx-muted);
}

html[data-pfx-theme="dark"] .sfs-completed .sfs-label {
    color: #7DD3A0;
}

html[data-pfx-theme="dark"] .sfs-active .sfs-label {
    color: #8DB4F0;
}

html[data-pfx-theme="dark"] .sfs-connector {
    background: var(--pfx-line);
}

html[data-pfx-theme="dark"] .sfs-connector.sfs-connector-done {
    background: #4caf50;
}

html[data-pfx-theme="dark"] .sfs-pending.sfs-step .sfs-clickable .sfs-circle:hover {
    border-color: var(--pfx-accent);
    background: rgba(var(--pfx-accent-rgb), .2);
    box-shadow: 0 0 0 3px rgba(var(--pfx-accent-rgb), .25);
}

html[data-pfx-theme="dark"] .sfs-pending.sfs-step .sfs-clickable .sfs-label:hover {
    color: var(--pfx-accent);
}


/* De reden waarom een volgende stap (nog) niet kan, onder de statusbalk. */
.sfs-blocked {
    margin: 6px 8px 2px;
    font-size: .8rem;
    line-height: 1.4;
}

.sfs-blocked-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: #7a5200;
    cursor: pointer;
}

.sfs-blocked-icon {
    color: #e0a800;
    font-weight: 700;
}

.sfs-blocked-step {
    font-weight: 600;
}

html[data-pfx-theme="dark"] .sfs-blocked-row {
    color: #f0c46a;
}