/* Layout + dark mode semantic classes */
.surface {
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-border, #E2E8F0);
    border-radius: 12px;
}

/* --text-muted, not --color-muted: the latter is a near-white SURFACE token,
   and as a text colour it made every .text-muted line invisible on white. */
.text-muted {
    color: var(--text-muted, #64748B);
}

[data-theme="dark"] .surface {
    background: var(--color-surface, #1E293B);
    border-color: var(--color-border, #334155);
}

[data-theme="dark"] .text-muted {
    color: #94A3B8;
}

[data-theme="dark"] select,
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
[data-theme="dark"] textarea {
    background: #1E293B;
    color: #F1F5F9;
    border-color: #334155;
}

[data-theme="dark"] .app-header,
[data-theme="dark"] .app-nav,
[data-theme="dark"] .filters-section {
    background: #1E293B;
    border-color: #334155;
}

[data-theme="dark"] table,
[data-theme="dark"] th,
[data-theme="dark"] td {
    background: #0F172A;
    border-color: #334155;
    color: #F1F5F9;
}

[data-theme="dark"] .tabs-container,
[data-theme="dark"] .tabs-nav {
    background: #1E293B;
    border-color: #334155;
}

[data-theme="dark"] .tab-btn {
    color: #94A3B8;
}

[data-theme="dark"] .tab-btn.active {
    color: #34D399;
    border-bottom-color: #34D399;
}