:root,
html[data-theme="light"] {
    --toolset-bg: #f3f4f6;
    --toolset-surface: #ffffff;
    --toolset-surface-2: #f9fafb;
    --toolset-surface-3: #f3f4f6;
    --toolset-text: #111827;
    --toolset-muted: #6b7280;
    --toolset-muted-2: #4b5563;
    --toolset-border: #e5e7eb;
    --toolset-border-strong: #d1d5db;
    --toolset-primary: #111827;
    --toolset-primary-text: #ffffff;
    --toolset-header: #111827;
    --toolset-header-surface: #1f2937;
    --toolset-header-border: #374151;
    --toolset-success-bg: #ecfdf5;
    --toolset-success-text: #065f46;
    --toolset-warning-bg: #fffbeb;
    --toolset-warning-text: #92400e;
    --toolset-danger-bg: #fef2f2;
    --toolset-danger-text: #991b1b;
    --toolset-shadow: rgba(0, 0, 0, .08);

    /*
     * Generieke namen voor huidige en
     * toekomstige Toolset-modules.
     */
    --bg: var(--toolset-bg);
    --surface: var(--toolset-surface);
    --surface-2: var(--toolset-surface-2);
    --surface-3: var(--toolset-surface-3);
    --text: var(--toolset-text);
    --muted: var(--toolset-muted);
    --border: var(--toolset-border);
    --border-strong: var(--toolset-border-strong);
    --primary: var(--toolset-primary);
    --primary-text: var(--toolset-primary-text);
    --success-bg: var(--toolset-success-bg);
    --success-text: var(--toolset-success-text);
    --warning-bg: var(--toolset-warning-bg);
    --warning-text: var(--toolset-warning-text);
    --danger-bg: var(--toolset-danger-bg);
    --danger-text: var(--toolset-danger-text);
}


html[data-theme="dark"] {
    --toolset-bg: #0b1220;
    --toolset-surface: #111827;
    --toolset-surface-2: #172033;
    --toolset-surface-3: #1f2937;
    --toolset-text: #f3f4f6;
    --toolset-muted: #a8b1c0;
    --toolset-muted-2: #c4cad4;
    --toolset-border: #263244;
    --toolset-border-strong: #3a475b;
    --toolset-primary: #f3f4f6;
    --toolset-primary-text: #111827;
    --toolset-header: #070d18;
    --toolset-header-surface: #172033;
    --toolset-header-border: #2b374a;
    --toolset-success-bg: #0d281c;
    --toolset-success-text: #86efac;
    --toolset-warning-bg: #2b220d;
    --toolset-warning-text: #fcd34d;
    --toolset-danger-bg: #321719;
    --toolset-danger-text: #fca5a5;
    --toolset-shadow: rgba(0, 0, 0, .34);

    --bg: var(--toolset-bg);
    --surface: var(--toolset-surface);
    --surface-2: var(--toolset-surface-2);
    --surface-3: var(--toolset-surface-3);
    --text: var(--toolset-text);
    --muted: var(--toolset-muted);
    --border: var(--toolset-border);
    --border-strong: var(--toolset-border-strong);
    --primary: var(--toolset-primary);
    --primary-text: var(--toolset-primary-text);
    --success-bg: var(--toolset-success-bg);
    --success-text: var(--toolset-success-text);
    --warning-bg: var(--toolset-warning-bg);
    --warning-text: var(--toolset-warning-text);
    --danger-bg: var(--toolset-danger-bg);
    --danger-text: var(--toolset-danger-text);
}


html {
    background: var(--toolset-bg);
}


body {
    background: var(--toolset-bg);
    color: var(--toolset-text);

    transition:
        background-color .16s ease,
        color .16s ease;
}


/* =====================================================
   THEME TOGGLE
   ===================================================== */

.theme-area {
    flex-shrink: 0;
}

.theme-toggle {
    min-height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding: 0 11px;

    border:
        1px solid
        var(--toolset-header-border);

    border-radius: 10px;

    background:
        var(--toolset-header-surface);

    color: #ffffff;

    font: inherit;
    font-size: 12px;
    font-weight: 750;

    white-space: nowrap;
}

.theme-toggle:hover {
    filter: brightness(1.08);
}

.theme-toggle-icon {
    width: 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 18px;
    line-height: 1;
}

.auth-theme-toggle {
    position: fixed;

    z-index: 20;

    top:
        calc(
            18px
            + env(safe-area-inset-top)
        );

    right: 18px;

    border-color:
        var(--toolset-border-strong);

    background:
        var(--toolset-surface);

    color:
        var(--toolset-text);

    box-shadow:
        0 5px 18px
        var(--toolset-shadow);
}


/* =====================================================
   COMMON DARK THEME
   ===================================================== */

html[data-theme="dark"] .app-header {
    background: var(--toolset-header);
}

html[data-theme="dark"] .module-nav a {
    color: #cbd5e1;
}

html[data-theme="dark"] .module-nav a:hover {
    background: var(--toolset-header-surface);
    color: #ffffff;
}

html[data-theme="dark"] .module-nav a.active {
    background: #e5e7eb;
    color: #111827;
}

html[data-theme="dark"] .status-pill {
    border-color: var(--toolset-header-border);
    background: var(--toolset-header-surface);
    color: #dbe2ea;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    border-color:
        var(--toolset-border-strong)
        !important;

    background:
        var(--toolset-surface)
        !important;

    color:
        var(--toolset-text)
        !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: #7f8a9b;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
    border-color: #94a3b8 !important;

    box-shadow:
        0 0 0 3px
        rgba(148, 163, 184, .14)
        !important;
}

html[data-theme="dark"] option {
    background: var(--toolset-surface);
    color: var(--toolset-text);
}

html[data-theme="dark"] .page-subtitle,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .eyebrow {
    color:
        var(--toolset-muted)
        !important;
}

html[data-theme="dark"] .card {
    border-color:
        var(--toolset-border)
        !important;

    background:
        var(--toolset-surface)
        !important;

    box-shadow:
        0 4px 18px
        var(--toolset-shadow);
}


/* =====================================================
   DASHBOARD
   ===================================================== */

html[data-theme="dark"] .module-tile {
    border-color:
        var(--toolset-border)
        !important;

    background:
        var(--toolset-surface)
        !important;

    color:
        var(--toolset-text)
        !important;
}

html[data-theme="dark"] .module-tile p {
    color:
        var(--toolset-muted)
        !important;
}

html[data-theme="dark"] .module-icon {
    background:
        var(--toolset-surface-3)
        !important;
}


/* =====================================================
   KRATLABELS
   ===================================================== */

html[data-theme="dark"] .selection-panel,
html[data-theme="dark"] .print-dock {
    border-color:
        var(--toolset-border)
        !important;

    background:
        var(--toolset-surface)
        !important;
}

html[data-theme="dark"] .panel-header {
    border-color:
        var(--toolset-border)
        !important;
}

html[data-theme="dark"] .panel-header span,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .info-block span,
html[data-theme="dark"] .keyboard-header {
    color:
        var(--toolset-muted)
        !important;
}

html[data-theme="dark"] .print-controls label {
    color:
        var(--toolset-muted-2)
        !important;
}

html[data-theme="dark"] .selection-button {
    background:
        var(--toolset-surface-2)
        !important;

    color:
        var(--toolset-text)
        !important;
}

html[data-theme="dark"] .selection-button:hover {
    background:
        var(--toolset-surface-3)
        !important;
}

html[data-theme="dark"] .selection-button.selected {
    border-color: #e5e7eb !important;
    background: #e5e7eb !important;
    color: #111827 !important;
}

html[data-theme="dark"] .special-button {
    border-color: #64748b !important;
}

html[data-theme="dark"] .copies button,
html[data-theme="dark"] .copies strong,
html[data-theme="dark"] .screen-keyboard,
html[data-theme="dark"] .keyboard-special,
html[data-theme="dark"] .keyboard-clear {
    border-color:
        var(--toolset-border)
        !important;

    background:
        var(--toolset-surface-3)
        !important;

    color:
        var(--toolset-text)
        !important;
}

html[data-theme="dark"] .keyboard-header strong {
    color:
        var(--toolset-text)
        !important;
}

html[data-theme="dark"] .keyboard-row button {
    border-color:
        var(--toolset-border-strong)
        !important;

    background:
        var(--toolset-surface-2)
        !important;

    color:
        var(--toolset-text)
        !important;
}

html[data-theme="dark"] .keyboard-row button:active {
    background:
        var(--toolset-surface-3)
        !important;
}

html[data-theme="dark"] .keyboard-shift.active,
html[data-theme="dark"] .print-button {
    border-color: #e5e7eb !important;
    background: #e5e7eb !important;
    color: #111827 !important;
}


/* =====================================================
   INVENTORY / BESTELLINGEN
   ===================================================== */

html[data-theme="dark"] .scanner-state,
html[data-theme="dark"] .order-button,
html[data-theme="dark"] .article-card:not(.partial):not(.complete):not(.over),
html[data-theme="dark"] .stock-card,
html[data-theme="dark"] .label-modal,
html[data-theme="dark"] .receive-scanner-indicator,
html[data-theme="dark"] .compact-complete-toggle,
html[data-theme="dark"] .advanced-stock-header,
html[data-theme="dark"] .advanced-location-grid,
html[data-theme="dark"] .advanced-stock-card,
html[data-theme="dark"] .advanced-line-actions button,
html[data-theme="dark"] .order-create-picker-results,
html[data-theme="dark"] .order-create-search-row,
html[data-theme="dark"] .order-create-result,
html[data-theme="dark"] .order-create-basket-line,
html[data-theme="dark"] .order-create-success-card,
html[data-theme="dark"] .inventory-delete-dialog,
html[data-theme="dark"] .inventory-delete-cancel {
    border-color:
        var(--toolset-border)
        !important;

    background:
        var(--toolset-surface)
        !important;

    color:
        var(--toolset-text)
        !important;
}

html[data-theme="dark"] .inventory-tabs,
html[data-theme="dark"] .scan-hint,
html[data-theme="dark"] .quantity-cell,
html[data-theme="dark"] .article-image,
html[data-theme="dark"] .advanced-scan-hint,
html[data-theme="dark"] .advanced-article-image,
html[data-theme="dark"] .printer-settings-grid,
html[data-theme="dark"] .create-form,
html[data-theme="dark"] .agent-credentials,
html[data-theme="dark"] .printer-add-panel,
html[data-theme="dark"] .order-create-result-image,
html[data-theme="dark"] .order-create-search-error:not(.error) {
    background:
        var(--toolset-surface-2)
        !important;

    color:
        var(--toolset-text)
        !important;
}

html[data-theme="dark"] .inventory-tab {
    background:
        var(--toolset-surface-3)
        !important;

    color:
        var(--toolset-muted-2)
        !important;
}

html[data-theme="dark"] .inventory-tab.active,
html[data-theme="dark"] .primary-action,
html[data-theme="dark"] .advanced-action-bar button,
html[data-theme="dark"] .settings-primary-button,
html[data-theme="dark"] .small-button.save,
html[data-theme="dark"] .small-save,
html[data-theme="dark"] .order-create-primary,
html[data-theme="dark"] .order-create-success-wide {
    border-color: #e5e7eb !important;
    background: #e5e7eb !important;
    color: #111827 !important;
}

html[data-theme="dark"] .icon-button,
html[data-theme="dark"] .line-actions button,
html[data-theme="dark"] .copies-control button,
html[data-theme="dark"] .inventory-toolbar-control,
html[data-theme="dark"] .order-create-add,
html[data-theme="dark"] .order-create-clear,
html[data-theme="dark"] .order-create-quantity button,
html[data-theme="dark"] .order-create-remove,
html[data-theme="dark"] .inventory-line-delete-button {
    border-color:
        var(--toolset-border-strong)
        !important;

    background:
        var(--toolset-surface)
        !important;

    color:
        var(--toolset-text)
        !important;
}

html[data-theme="dark"] .sticky-action-bar,
html[data-theme="dark"] .advanced-action-bar,
html[data-theme="dark"] .order-create-action-bar,
html[data-theme="dark"] .receive-header {
    border-color:
        var(--toolset-border)
        !important;

    background:
        rgba(17, 24, 39, .97)
        !important;

    color:
        var(--toolset-text)
        !important;
}

html[data-theme="dark"] .article-card.partial {
    border-color: #d97706 !important;
    background: #2b220d !important;
}

html[data-theme="dark"] .article-card.complete {
    border-color: #16a34a !important;
    background: #0d281c !important;
}

html[data-theme="dark"] .article-card.over {
    border-color: #dc2626 !important;
    background: #321719 !important;
}

html[data-theme="dark"] .supplier-group-header,
html[data-theme="dark"] .order-reference,
html[data-theme="dark"] .delivery-date span,
html[data-theme="dark"] .article-number,
html[data-theme="dark"] .quantity-cell span,
html[data-theme="dark"] .sticky-summary span,
html[data-theme="dark"] .modal-message,
html[data-theme="dark"] .advanced-stock-header p,
html[data-theme="dark"] .advanced-article-info span,
html[data-theme="dark"] .advanced-quantity span,
html[data-theme="dark"] .order-create-header p,
html[data-theme="dark"] .order-create-picker-results span,
html[data-theme="dark"] .order-create-result-commercial,
html[data-theme="dark"] .order-create-basket-number,
html[data-theme="dark"] .order-create-basket-meta,
html[data-theme="dark"] .order-create-section-heading h3 {
    color:
        var(--toolset-muted)
        !important;
}

html[data-theme="dark"] .advanced-stock-header h2,
html[data-theme="dark"] .advanced-article-info strong,
html[data-theme="dark"] .advanced-quantity strong,
html[data-theme="dark"] .order-create-result-number,
html[data-theme="dark"] .order-create-result-name,
html[data-theme="dark"] .order-create-basket-name,
html[data-theme="dark"] #receiveOrderNumber {
    color:
        var(--toolset-text)
        !important;
}

html[data-theme="dark"] .order-create-search-row input {
    border: 0 !important;
    background: transparent !important;
}

html[data-theme="dark"] .inventory-empty,
html[data-theme="dark"] .advanced-empty,
html[data-theme="dark"] .order-create-empty,
html[data-theme="dark"] .settings-empty {
    border-color:
        var(--toolset-border-strong)
        !important;

    background:
        transparent
        !important;

    color:
        var(--toolset-muted)
        !important;
}

html[data-theme="dark"] .inventory-delete-modal,
html[data-theme="dark"] .modal-backdrop {
    background:
        rgba(0, 0, 0, .62)
        !important;
}


/* =====================================================
   SETTINGS
   ===================================================== */

html[data-theme="dark"] .settings-section,
html[data-theme="dark"] .settings-modern-section,
html[data-theme="dark"] .settings-credentials,
html[data-theme="dark"] .printer-detail-card,
html[data-theme="dark"] .settings-row-card {
    border-color:
        var(--toolset-border)
        !important;

    background:
        var(--toolset-surface)
        !important;

    color:
        var(--toolset-text)
        !important;
}

html[data-theme="dark"] .settings-small-button,
html[data-theme="dark"] .small-button {
    border-color:
        var(--toolset-border-strong)
        !important;

    background:
        var(--toolset-surface)
        !important;

    color:
        var(--toolset-text)
        !important;
}

html[data-theme="dark"] .settings-modern-header p,
html[data-theme="dark"] .settings-section-heading p,
html[data-theme="dark"] .settings-credentials p,
html[data-theme="dark"] .gateway-detail-meta,
html[data-theme="dark"] .settings-row-card .item-meta,
html[data-theme="dark"] .item-meta,
html[data-theme="dark"] .last-seen,
html[data-theme="dark"] .credential-line span,
html[data-theme="dark"] .credential-row span,
html[data-theme="dark"] .settings-back-link {
    color:
        var(--toolset-muted)
        !important;
}

html[data-theme="dark"] .gateway-detail-header h1,
html[data-theme="dark"] .settings-section-heading h2,
html[data-theme="dark"] .settings-credentials h2,
html[data-theme="dark"] .settings-row-title,
html[data-theme="dark"] .printer-add-panel summary,
html[data-theme="dark"] .item-title {
    color:
        var(--toolset-text)
        !important;
}

html[data-theme="dark"] .settings-tag,
html[data-theme="dark"] .tag.inactive {
    background:
        var(--toolset-surface-3)
        !important;

    color:
        var(--toolset-muted-2)
        !important;
}

html[data-theme="dark"] .settings-tag.current {
    background: #172554 !important;
    color: #93c5fd !important;
}

html[data-theme="dark"] .gateway-main-link:hover {
    background:
        var(--toolset-surface-2)
        !important;
}

html[data-theme="dark"] .settings-notice.success,
html[data-theme="dark"] .settings-message.success,
html[data-theme="dark"] .template-message.success {
    background:
        var(--toolset-success-bg)
        !important;

    color:
        var(--toolset-success-text)
        !important;
}

html[data-theme="dark"] .settings-notice.error,
html[data-theme="dark"] .settings-message.error,
html[data-theme="dark"] .template-message.error,
html[data-theme="dark"] .error {
    background:
        var(--toolset-danger-bg)
        !important;

    color:
        var(--toolset-danger-text)
        !important;
}


/* =====================================================
   PRINT TEMPLATES
   ===================================================== */

html[data-theme="dark"] .template-card {
    border-color:
        var(--toolset-border)
        !important;

    background:
        var(--toolset-surface)
        !important;
}

html[data-theme="dark"] .mapping-row {
    background:
        var(--toolset-surface-2)
        !important;
}

html[data-theme="dark"] .new-field {
    border-color:
        var(--toolset-border-strong)
        !important;
}

html[data-theme="dark"] .secondary-button {
    background:
        var(--toolset-surface-3)
        !important;

    color:
        var(--toolset-text)
        !important;
}

html[data-theme="dark"] .template-page input,
html[data-theme="dark"] .template-page select {
    border-color:
        var(--toolset-border-strong)
        !important;

    background:
        var(--toolset-surface)
        !important;

    color:
        var(--toolset-text)
        !important;
}


/* =====================================================
   LOGIN
   ===================================================== */

html[data-theme="dark"] .login-card {
    background:
        var(--toolset-surface)
        !important;

    color:
        var(--toolset-text)
        !important;

    box-shadow:
        0 18px 50px
        rgba(0, 0, 0, .38);
}

html[data-theme="dark"] .login-brand {
    color:
        var(--toolset-muted)
        !important;
}


/* =====================================================
   MOBILE
   ===================================================== */

@media(max-width:900px) {

    .theme-toggle-label {
        display: none;
    }

    .theme-toggle {
        width: 38px;
        padding: 0;
    }

}


@media(max-width:700px) {

    .theme-toggle {
        min-height: 36px;
        width: 36px;
    }

    .theme-toggle-icon {
        font-size: 17px;
    }

    .auth-theme-toggle {
        top:
            calc(
                12px
                + env(safe-area-inset-top)
            );

        right: 12px;
    }

}