/* PIBAL Theme System */
:root {
    /* Dark Theme (Default) */
    --bg: #05070a;
    --bg-secondary: #0a0e1a;
    --card: rgba(20, 30, 50, 0.8);
    --card-solid: #141e32;
    --card-border: rgba(100, 150, 255, 0.15);
    --accent: #00d4ff;
    --accent-glow: rgba(0, 212, 255, 0.3);
    --success: #00ff88;
    --danger: #ff3366;
    --warning: #ffaa00;
    --text: #e2e8f0;
    --text-muted: #94a3b8;
    --text-dark: #475569;
    --glass: blur(16px) saturate(180%);
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    --radius: 16px;
    --input-bg: rgba(15, 23, 42, 0.8);
    --navbar-bg: rgba(15, 23, 42, 0.9);
    --hover-bg: rgba(100, 150, 255, 0.1);
    --border-color: rgba(100, 150, 255, 0.2);
}

[data-theme="light"] {
    --bg: #f8fafc;
    --bg-secondary: #e2e8f0;
    --card: rgba(255, 255, 255, 0.95);
    --card-solid: #ffffff;
    --card-border: rgba(0, 0, 0, 0.12);
    --accent: #0369a1;
    --accent-glow: rgba(3, 105, 161, 0.15);
    --success: #15803d;
    --danger: #dc2626;
    --warning: #d97706;
    --text: #1e293b;
    --text-muted: #475569;
    --text-dark: #64748b;
    --glass: blur(16px) saturate(180%);
    --shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    --radius: 16px;
    --input-bg: #ffffff;
    --navbar-bg: rgba(255, 255, 255, 0.95);
    --hover-bg: rgba(3, 105, 161, 0.08);
    --border-color: rgba(0, 0, 0, 0.15);
    --select-bg: #ffffff;
    --select-text: #1e293b;
    --select-option-bg: #ffffff;
    --select-option-text: #1e293b;
}

/* Theme Toggle Button */
.theme-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--card);
    border: 1px solid var(--card-border);
    color: var(--text);
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: var(--shadow);
    backdrop-filter: var(--glass);
}

.theme-toggle:hover {
    transform: scale(1.1);
    background: var(--accent);
    color: #fff;
}

/* Theme transition */
body.theme-transition,
body.theme-transition *,
body.theme-transition *::before,
body.theme-transition *::after {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* Light mode specific styles for select elements */
[data-theme="light"] select {
    background-color: #ffffff !important;
    color: #1e293b !important;
}

[data-theme="light"] select option {
    background-color: #ffffff !important;
    color: #1e293b !important;
}

[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="email"] {
    background-color: #ffffff !important;
    color: #1e293b !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
}

[data-theme="light"] input:focus,
[data-theme="light"] select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-glow) !important;
}

/* Dark mode specific styles for select elements */
[data-theme="dark"] select {
    background-color: #0f172a;
    color: #e2e8f0;
}

[data-theme="dark"] select option {
    background-color: #0f172a;
    color: #e2e8f0;
}

/* Light mode - Fix all form containers and cards */
[data-theme="light"] .form-group select,
[data-theme="light"] .form-group input,
[data-theme="light"] .form-group textarea {
    background-color: #ffffff !important;
    color: #1e293b !important;
}

/* Light mode - Fix archive items and data containers */
[data-theme="light"] .archive-item {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .table-row,
[data-theme="light"] .table-header {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .table-row:hover {
    background: #f1f5f9 !important;
}

/* Light mode - Fix setup card and other containers */
[data-theme="light"] .setup-card,
[data-theme="light"] .card {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
}

/* Light mode - Fix modal content */
[data-theme="light"] .modal-content {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
}

/* Light mode - Fix toast notifications */
[data-theme="light"] .toast {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
}

/* Light mode - Fix wind info and other info boxes */
[data-theme="light"] .wind-info-item {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

/* Light mode - Fix chart containers */
[data-theme="light"] .chart-container {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

/* Light mode - Fix keypad */
[data-theme="light"] .keypad-overlay {
    background: #ffffff !important;
}

[data-theme="light"] .keypad-key {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #1e293b !important;
}

[data-theme="light"] .keypad-key:hover {
    background: #f1f5f9 !important;
}

/* Light mode - Fix green font colors to black for readability */
[data-theme="light"] .keypad-display {
    color: #1e293b !important;
}

[data-theme="light"] .success-text,
[data-theme="light"] .badge-active {
    color: #1e293b !important;
}

[data-theme="light"] .toast.success {
    border-color: rgba(0, 0, 0, 0.2) !important;
}

[data-theme="light"] .toast.success i {
    color: #1e293b !important;
}

/* Light mode - Fix chart text colors */
[data-theme="light"] .chart-container {
    color: #1e293b !important;
}

/* Light mode - Fix wind info text */
[data-theme="light"] .wind-info-item .value {
    color: #1e293b !important;
}

/* Light mode - Fix timer display */
[data-theme="light"] .timer-value {
    color: #1e293b !important;
}

[data-theme="light"] .timer-alert {
    color: #dc2626 !important;
}

/* Light mode - Fix table input fields (fill data) */
[data-theme="light"] .col-val {
    border-right-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .col-val input {
    background: #ffffff !important;
    color: #1e293b !important;
}

[data-theme="light"] .col-val input:focus {
    background: rgba(3, 105, 161, 0.05) !important;
}

/* Light mode - table container */
[data-theme="light"] .table-card {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
}

[data-theme="light"] .table-header {
    background: #f8fafc !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #1e293b !important;
}

[data-theme="light"] .table-body .table-row {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .table-body .table-row:hover {
    background: #f1f5f9 !important;
}

[data-theme="light"] .col-no {
    color: #1e293b !important;
}