/* theme.css */
:root {
    --app-bg: #f8fafc;
    --surface: #ffffff;
    --surface-muted: #f8fafc;

    --border-color: #e6eaf0;
    --border-subtle: #edf2f7;
    --border-strong: #dbe3ee;

    --text-color: #0f172a;
    --text-muted: #64748b;
    --text-soft: #6b7280;

    --accent-bg: #f4f7fb;
    --accent-border: #dbe3ee;

    --primary-color: #0d6efd;
    --success-color: #198754;
    --danger-color: #dc3545;
    --warning-color: #b45309;
    --info-color: #0d6efd;
    --purple-color: #6f42c1;
    --efarm-color: #215316;

    --shadow-sm: 0 4px 12px rgba(16, 24, 40, 0.04);
    --shadow-md: 0 6px 18px rgba(16, 24, 40, 0.04);

    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;

    --font-family-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-family-mono: 'Consolas', 'Courier New', monospace;

    --table-header-bg: #f8fafc;
    --table-row-alt-bg: #fcfdff;
    --table-row-hover-bg: #f1f5f9;
    --table-border: #e6eaf0;
    --table-border-outer: #dbe3ee;
}

html[data-theme="dark"] {
    --app-bg: #0f172a;
    --surface: #111827;
    --surface-muted: #1f2937;

    --border-color: #263244;
    --border-subtle: #334155;
    --border-strong: #3b4b61;

    --text-bright: #f8fafc;
    --text-color: #c1d5db;
    --text-muted: #9ca3af;
    --text-soft: #94a3b8;

    --accent-bg: #172033;
    --accent-border: #334155;

    --shadow-sm: none;
    --shadow-md: none;

    --table-header-bg: #172033;
    --table-row-alt-bg: #0f1a2b;
    --table-row-hover-bg: #1b2940;
    --table-border: #334155;
    --table-border-outer: #3b4b61;
}

html[data-theme="colorful"] {
    --app-bg: linear-gradient(180deg, #f3f1ff 0%, #eef4ff 45%, #f8fbff 100%);
    --surface: #ffffff;
    --surface-muted: #f6f3ff;

    --border-color: #d9d6fe;
    --border-subtle: #ebe7ff;
    --border-strong: #c7c2ff;

    --text-color: #1f1b3a;
    --text-muted: #6b6790;
    --text-soft: #7d7aa3;

    --accent-bg: #f1edff;
    --accent-border: #cfc7ff;

    --primary-color: #4f46e5;
    --success-color: #16a34a;
    --danger-color: #dc2626;
    --warning-color: #c2410c;
    --info-color: #2563eb;
    --purple-color: #7c3aed;
    --efarm-color: #215316;

    --shadow-sm: 0 6px 16px rgba(79, 70, 229, 0.08);
    --shadow-md: 0 10px 24px rgba(99, 102, 241, 0.10);

    --table-header-bg: #f3f0ff;
    --table-row-alt-bg: #faf8ff;
    --table-row-hover-bg: #eef2ff;
    --table-border: #ddd6fe;
    --table-border-outer: #c4b5fd;
}

html[data-theme="aurora"] {
    --app-bg: linear-gradient(180deg, #24124a 0%, #312e81 18%, #2563eb 52%, #7c3aed 82%, #ecfeff 100%);
    --surface: rgba(255, 255, 255, 0.92);
    --surface-muted: rgba(243, 240, 255, 0.92);

    --border-color: #b8b5ff;
    --border-subtle: #d9d6fe;
    --border-strong: #8b83ff;
    --text-color: #1c1740;
    --text-muted: #5f5a8c;
    --text-soft: #7671a8;

    --accent-bg: linear-gradient(135deg, #ede9fe 0%, #dbeafe 50%, #f5d0fe 100%);
    --accent-border: #a78bfa;

    --primary-color: #4338ca;
    --success-color: #16a34a;
    --danger-color: #dc2626;
    --warning-color: #c2410c;
    --info-color: #2563eb;
    --purple-color: #7c3aed;
    --efarm-color: #215316;

    --shadow-sm: 0 8px 22px rgba(67, 56, 202, 0.16);
    --shadow-md: 0 16px 38px rgba(109, 40, 217, 0.18);

    --table-header-bg: rgba(237, 233, 254, 0.95);
    --table-row-alt-bg: rgba(250, 245, 255, 0.9);
    --table-row-hover-bg: rgba(224, 231, 255, 0.95);
    --table-border: #c4b5fd;
    --table-border-outer: #a78bfa;
}

/* ============================================================================
   GLOBAL PAGE BACKGROUND
   ============================================================================ */
html,
body {
    min-height: 100%;
}

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

html[data-theme="colorful"] body,
html[data-theme="aurora"] body {
    background: var(--app-bg);
    background-attachment: fixed;
}

/* ============================================================================
   FORM SELECT (THEME SAFE)
   ============================================================================ */
.form-select {
    background-color: var(--surface);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    box-shadow: none;
}

.form-select {
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
        linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) calc(50% - 3px),
        calc(100% - 12px) calc(50% - 3px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.form-select:focus {
    border-color: var(--accent-border);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 14%, white);
    outline: none;
}

.form-select:disabled {
    background-color: var(--surface-muted);
    color: var(--text-muted);
}

.form-select option {
    background-color: var(--surface);
    color: var(--text-color);
}

/* ============================================================================
   THEME-SPECIFIC SURFACE TUNING
   ============================================================================ */
html[data-theme="colorful"] .page-badge,
html[data-theme="colorful"] .report-status-badge {
    background: linear-gradient(135deg, #ede9fe 0%, #e0e7ff 100%);
    border-color: #c7d2fe;
    color: #312e81;
}

html[data-theme="aurora"] .page-badge,
html[data-theme="aurora"] .report-status-badge {
    background: linear-gradient(135deg, #ddd6fe 0%, #bfdbfe 50%, #f5d0fe 100%);
    border-color: #8b5cf6;
    color: #312e81;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.18);
}

html[data-theme="colorful"] .page-card,
html[data-theme="colorful"] .metric-card,
html[data-theme="colorful"] .section-card,
html[data-theme="colorful"] .workflow-state-card {
    border-color: #ddd6fe;
}

html[data-theme="aurora"] .page-card,
html[data-theme="aurora"] .metric-card,
html[data-theme="aurora"] .section-card,
html[data-theme="aurora"] .workflow-state-card {
    border-color: rgba(167, 139, 250, 0.7);
    backdrop-filter: blur(8px);
}

html[data-theme="colorful"] .page-eyebrow,
html[data-theme="colorful"] .report-eyebrow {
    color: #6d28d9;
}

html[data-theme="aurora"] .page-eyebrow,
html[data-theme="aurora"] .report-eyebrow {
    color: #5b21b6;
}

html[data-theme="aurora"] .page-title,
html[data-theme="aurora"] .metric-value {
    color: #221b4f;
}

html[data-theme="aurora"] .btn-primary {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    border-color: #5b21b6;
}

html[data-theme="aurora"] .btn-outline-primary {
    border-color: #7c3aed;
    color: #5b21b6;
}

html[data-theme="aurora"] .btn-outline-primary:hover {
    background: linear-gradient(135deg, #ede9fe 0%, #dbeafe 100%);
    border-color: #7c3aed;
    color: #312e81;
}

html[data-theme="aurora"] .page-sub-title {
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(124, 58, 237, 0.35);
}