/* ============================================================================
 * Theme System - Light Theme
 * ============================================================================ */

:root {
    /* Colors */
    --color-primary: #5a5ee6;
    --color-primary-dark: #4c50d1;
    --color-secondary: #8b5cf6;
    --color-success: #198754;
    --color-danger: #dc3545;
    --color-warning: #ffc107;
    --color-info: #00d4ff;
    
    /* Light Theme */
    --bg-primary: #fffefe;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f8f8fd;
    
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-muted: #999999;

    --overlay-text: #ffffff;
    
    --border-color: #e9e6f0;
    --shadow-color: rgba(31, 38, 92, 0.08);
    --table-header-bg: #f7f5fc;
    --table-row-bg: #ffffff;
    --table-row-alt-bg: #fcfbfe;
    --table-hover-bg: #f4f1fb;

    /* Light-only aura / shimmer accents */
    --bg-aurora:
        radial-gradient(circle at 12% 12%, rgba(0, 212, 255, 0.08), transparent 48%),
        radial-gradient(circle at 86% 14%, rgba(124, 58, 237, 0.07), transparent 45%),
        radial-gradient(circle at 54% 86%, rgba(255, 77, 181, 0.055), transparent 44%),
        radial-gradient(circle at 24% 74%, rgba(77, 255, 214, 0.045), transparent 42%),
        linear-gradient(130deg, #fffefe 0%, #fefcff 48%, #fffefe 100%);
    --surface-aurora:
        linear-gradient(155deg, rgba(255, 255, 255, 0.988), rgba(254, 252, 255, 0.975)),
        radial-gradient(circle at 100% 0, rgba(0, 212, 255, 0.04), transparent 52%),
        radial-gradient(circle at 0 100%, rgba(124, 58, 237, 0.03), transparent 52%);
    --control-aurora:
        linear-gradient(155deg, rgba(255, 255, 255, 0.995), rgba(253, 251, 255, 0.982)),
        radial-gradient(circle at 100% 0, rgba(124, 58, 237, 0.025), transparent 48%);
    --surface-outline-glow: rgba(124, 58, 237, 0.055);
    --aurora-animation: auroraFloat 36s ease-in-out infinite;

    --nav-link: #4f52d8;

    /* Bootstrap variable bridge so Bootstrap controls inherit current theme */
    --bs-body-bg: var(--bg-primary);
    --bs-body-color: var(--text-primary);
    --bs-emphasis-color: var(--text-primary);
    --bs-secondary-color: var(--text-secondary);
    --bs-tertiary-color: var(--text-muted);
    --bs-border-color: var(--border-color);
    --bs-heading-color: var(--text-primary);
    --bs-link-color: var(--nav-link);
    --bs-link-hover-color: var(--color-primary-dark);
    --bs-primary: var(--color-primary);
    --bs-primary-rgb: 79, 70, 229;
    
    /* Transitions */
    --transition-duration: 0.3s;
    --transition-timing: ease-in-out;
}

/* ============================================================================
 * Dark Theme
 * ============================================================================ */
[data-theme="dark"] {
    --color-primary: #3aa0ff;
    --color-primary-dark: #2681d6;
    --bs-primary-rgb: 58, 160, 255;
    
    --bg-primary: #0b1220;
    --bg-secondary: #1a2332;
    --bg-tertiary: #253349;
    
    --text-primary: #e6eef8;
    --text-secondary: #a0aec0;
    --text-muted: #718096;

    --overlay-text: #e6eef8;
    
    --border-color: #2d3748;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --table-header-bg: #253349;
    --table-row-bg: #1a2332;
    --table-row-alt-bg: #202c40;
    --table-hover-bg: #2a3f5f;

    --nav-link: #9cc9ff;

    --bg-aurora: none;
    --surface-aurora: none;
    --control-aurora: none;
    --surface-outline-glow: transparent;
    --aurora-animation: none;
}

/* ============================================================================
 * AI Colors Theme
 * ============================================================================ */
[data-theme="ai"] {
    --color-primary: #00d4ff;
    --color-primary-dark: #00a8cc;
    --color-secondary: #7c3aed;
    --bs-primary-rgb: 0, 212, 255;
    
    --bg-primary: #0a0e27;
    --bg-secondary: #1a1f3a;
    --bg-tertiary: #2d3561;
    
    --text-primary: #e0f7ff;
    --text-secondary: #a8d8ff;
    --text-muted: #6b8fb8;

    --overlay-text: #e0f7ff;
    
    --border-color: #3a4575;
    --shadow-color: rgba(0, 212, 255, 0.1);
    --table-header-bg: #25335f;
    --table-row-bg: #1a1f3a;
    --table-row-alt-bg: #21284a;
    --table-hover-bg: #2a3670;

    --nav-link: #8be9ff;

    --bg-aurora: none;
    --surface-aurora: none;
    --control-aurora: none;
    --surface-outline-glow: transparent;
    --aurora-animation: none;
}

/* ============================================================================
 * Global Styles
 * ============================================================================ */
* {
    transition: background-color var(--transition-duration) var(--transition-timing),
                color var(--transition-duration) var(--transition-timing),
                border-color var(--transition-duration) var(--transition-timing);
}

html, body {
    background-color: var(--bg-primary);
    background-image: var(--bg-aurora);
    background-size: 160% 160%, 160% 160%, 170% 170%, 160% 160%, 100% 100%;
    background-attachment: fixed;
    color: var(--text-primary);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    animation: var(--aurora-animation);
}

label,
.form-label {
    color: var(--text-primary) !important;
}

.form-text {
    color: var(--text-secondary) !important;
}

a {
    color: var(--nav-link);
    text-decoration: none;
}

a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.btn-primary:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.card {
    background-color: var(--bg-secondary);
    background-image: var(--surface-aurora);
    border-color: var(--border-color);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--shadow-color) 66%, transparent),
                0 0 0 1px var(--surface-outline-glow);
}

.form-control {
    background-color: var(--bg-secondary);
    background-image: var(--control-aurora);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.form-select {
    background-color: var(--bg-secondary);
    background-image: var(--control-aurora);
    color: var(--text-primary) !important;
    border-color: var(--border-color);
}

.form-control,
.form-select,
textarea,
input,
select {
    color: var(--text-primary) !important;
}

.form-select option {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.form-control:disabled,
.form-select:disabled {
    color: color-mix(in srgb, var(--text-primary) 72%, var(--text-secondary)) !important;
    -webkit-text-fill-color: color-mix(in srgb, var(--text-primary) 72%, var(--text-secondary));
    opacity: 0.95;
}

.form-control:focus {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.18);
}

.form-select:focus {
    background-color: var(--bg-secondary);
    color: var(--text-primary) !important;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.18);
}

.form-control::placeholder,
.form-select::placeholder,
textarea::placeholder,
input::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

input[type="time"],
.form-control[type="time"],
.theme-time-picker {
    color-scheme: light;
}

[data-theme="dark"] input[type="time"],
[data-theme="dark"] .form-control[type="time"],
[data-theme="dark"] .theme-time-picker,
[data-theme="ai"] input[type="time"],
[data-theme="ai"] .form-control[type="time"],
[data-theme="ai"] .theme-time-picker {
    color-scheme: dark;
}

input[type="time"]::-webkit-calendar-picker-indicator,
.form-control[type="time"]::-webkit-calendar-picker-indicator,
.theme-time-picker::-webkit-calendar-picker-indicator {
    opacity: 0.82;
    cursor: pointer;
}

[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] .form-control[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] .theme-time-picker::-webkit-calendar-picker-indicator,
[data-theme="ai"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="ai"] .form-control[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="ai"] .theme-time-picker::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.18);
}

.form-control[type="file"] {
    padding: 0;
    overflow: hidden;
}

.form-control[type="file"]::file-selector-button {
    margin-inline-end: 0.85rem;
    padding: 0.58rem 0.95rem;
    border: 0;
    border-inline-end: 1px solid var(--border-color);
    background:
        linear-gradient(145deg,
            color-mix(in srgb, var(--color-primary) 18%, var(--bg-tertiary)),
            color-mix(in srgb, var(--color-primary) 10%, var(--bg-secondary)));
    color: var(--text-primary);
    font-weight: 600;
    cursor: pointer;
}

.form-control[type="file"]::file-selector-button:hover {
    background:
        linear-gradient(145deg,
            color-mix(in srgb, var(--color-primary) 24%, var(--bg-tertiary)),
            color-mix(in srgb, var(--color-primary) 14%, var(--bg-secondary)));
}

.form-control[type="file"]::-webkit-file-upload-button {
    margin-inline-end: 0.85rem;
    padding: 0.58rem 0.95rem;
    border: 0;
    border-inline-end: 1px solid var(--border-color);
    background:
        linear-gradient(145deg,
            color-mix(in srgb, var(--color-primary) 18%, var(--bg-tertiary)),
            color-mix(in srgb, var(--color-primary) 10%, var(--bg-secondary)));
    color: var(--text-primary);
    font-weight: 600;
    cursor: pointer;
}

.input-group-text {
    background-color: var(--bg-tertiary);
    background-image: var(--control-aurora);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.form-check-input {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
}

.form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.form-check-label {
    color: var(--text-primary);
}

.dropdown-menu {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

.text-muted {
    color: var(--text-secondary) !important;
}

.dropdown-item {
    color: var(--text-primary);
}

.dropdown-item:hover,
.dropdown-item:active {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.modal-content {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

.modal-header {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.modal-body {
    color: var(--text-primary);
}

.modal-footer {
    border-color: var(--border-color);
}

.card-header {
    background-color: var(--bg-tertiary);
    background-image: var(--surface-aurora);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.table {
    color: var(--text-primary);
    border-color: var(--border-color);
}

.table > :not(caption) > * > * {
    background-color: var(--table-row-bg);
    background-image: var(--surface-aurora);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.table thead th {
    background-color: var(--table-header-bg);
    background-image: var(--surface-aurora);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.table tbody tr:nth-of-type(even) > * {
    background-color: var(--table-row-alt-bg);
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--table-hover-bg);
    color: var(--text-primary);
}

.table .text-muted {
    color: var(--text-secondary) !important;
}

.small,
small {
    color: var(--text-secondary);
}

.text-body,
.text-body-secondary,
.text-body-tertiary {
    color: var(--text-secondary) !important;
}

.navbar, .sidebar {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

.btn-outline-primary {
    color: var(--color-primary);
    border-color: color-mix(in srgb, var(--color-primary) 70%, var(--border-color));
}

.btn-outline-primary:hover {
    color: var(--overlay-text);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-outline-secondary {
    color: var(--text-primary);
    border-color: var(--border-color);
}

.btn-outline-secondary:hover {
    color: var(--text-primary);
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
}

hr {
    border-color: var(--border-color);
}

.btn-secondary {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}

.btn-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
}

@keyframes auroraFloat {
    0% {
        background-position: 0% 0%, 100% 16%, 48% 100%, 18% 78%, 0 0;
    }
    50% {
        background-position: 18% 10%, 84% 10%, 58% 86%, 26% 70%, 0 0;
    }
    100% {
        background-position: 0% 0%, 100% 16%, 48% 100%, 18% 78%, 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    html,
    body {
        animation: none;
    }
}