/**
 * Dark theme — toggled via html[data-theme="dark"].
 * Pattern adapted from natimark-core portal/static/css/themes/dark.css.
 * Component CSS that wants to support both themes MUST use these variables
 * rather than hardcoded colors.
 */
:root[data-theme="dark"] {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-dark: #0b1220;

    --text-primary: #e5e7eb;
    --text-secondary: #9ca3af;
    --text-muted: #6b7280;

    --border-color: #334155;
    --card-bg: #1e293b;
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);

    --table-bg: #1e293b;
    --table-border: #334155;
    --table-header-bg: #0f172a;
    --table-hover: rgba(74, 158, 255, 0.15);

    --input-bg: #0f172a;
    --input-border: #334155;
    --input-focus-border: #4a9eff;

    --brand-primary: #4a9eff;
    --brand-primary-hover: #6fb5ff;
    --brand-success: #22c55e;
    --brand-warning: #facc15;
    --brand-danger: #f87171;

    color-scheme: dark;
}

/* Body + Bootstrap surface remap for dark mode. */
:root[data-theme="dark"] body {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}
:root[data-theme="dark"] .card {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}
:root[data-theme="dark"] .table {
    --bs-table-bg: var(--table-bg);
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--table-border);
    --bs-table-hover-bg: var(--table-hover);
}
:root[data-theme="dark"] .thead-light th,
:root[data-theme="dark"] thead th {
    background-color: var(--table-header-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-primary);
}
:root[data-theme="dark"] .form-control:focus,
:root[data-theme="dark"] .form-select:focus {
    border-color: var(--input-focus-border);
    background-color: var(--input-bg);
    color: var(--text-primary);
}