/* ============================================================
   Design System – Barcode Scan App
   Single source of truth voor kleuren, spacing en statussen.
   Geladen NA default.min.css zodat overrides werken.
   ============================================================ */

:root {
    /* Statuskleuren – hoog contrast voor magazijnverlichting */
    --status-success: #118921;
    --status-success-bg: rgba(17, 137, 33, 0.15);
    --status-error: #dc3545;
    --status-error-bg: rgba(220, 53, 69, 0.15);
    --status-warning: #e8a317;
    --status-warning-bg: rgba(232, 163, 23, 0.15);
    --status-partial: #fd7e14;
    --status-partial-bg: rgba(253, 126, 20, 0.15);
    --status-manco: #6f42c1;
    --status-manco-bg: rgba(111, 66, 193, 0.15);

    /* Primaire kleuren */
    --color-primary: #007bff;
    --color-text: #333;
    --color-text-muted: #6c757d;
    --color-border: rgba(0, 0, 0, 0.125);

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;

    /* Touch targets – minimaal 44px voor magazijngebruik */
    --touch-min: 44px;
    --btn-min-width: 150px;
}

/* ----- Tekst-status utility-klassen ----- */
.text-status-success { color: var(--status-success); }
.text-status-error   { color: var(--status-error); }
.text-status-warning { color: var(--status-warning); }
.text-status-partial { color: var(--status-partial); }
.text-status-manco   { color: var(--status-manco); }

/* ----- Achtergrond-status utility-klassen (met linkerrand) ----- */
.status-success {
    background: var(--status-success-bg);
    border-left: 4px solid var(--status-success);
}
.status-error {
    background: var(--status-error-bg);
    border-left: 4px solid var(--status-error);
}
.status-warning {
    background: var(--status-warning-bg);
    border-left: 4px solid var(--status-warning);
}
.status-partial {
    background: var(--status-partial-bg);
    border-left: 4px solid var(--status-partial);
}
.status-manco {
    background: var(--status-manco-bg);
    border-left: 4px solid var(--status-manco);
}

/* ----- Orderregel-statussen via data-attribute ----- */
[data-rowstatus="completed"] {
    background: rgba(74, 255, 71, 0.5) !important;
}
[data-rowstatus="partial"] {
    background: var(--status-partial-bg) !important;
}
[data-rowstatus="manco"] {
    background: rgba(255, 0, 0, 0.5) !important;
}
[data-rowstatus="open"] {
    background: transparent;
}

/* ----- Lege-scherm standaard ----- */
.empty-state {
    text-align: center;
    color: var(--color-text-muted);
    padding: var(--space-lg);
}

/* ============================================================
   Dark mode overrides
   ============================================================ */
@media (prefers-color-scheme: dark) {
    :root {
        --status-success: #2ecc40;
        --status-success-bg: rgba(46, 204, 64, 0.2);
        --status-error: #ff6b6b;
        --status-error-bg: rgba(255, 107, 107, 0.2);
        --status-warning: #ffc107;
        --status-warning-bg: rgba(255, 193, 7, 0.2);
        --status-partial: #fd7e14;
        --status-partial-bg: rgba(253, 126, 20, 0.2);
        --status-manco: #b388ff;
        --status-manco-bg: rgba(179, 136, 255, 0.2);

        --color-text: #e0e0e0;
        --color-text-muted: #adb5bd;
        --color-border: rgba(255, 255, 255, 0.125);
    }

    [data-rowstatus="completed"] {
        background: #17a31c !important;
    }
    [data-rowstatus="manco"] {
        background: #dc3545 !important;
    }
}