/**
 * VST RMS Portal - Theme Variables
 * CSS Custom Properties for Light and Dark modes
 * Created: December 2024
 */

/* ============================================================
   LIGHT THEME (Default)
   ============================================================ */
:root {
    /* Primary Brand Colors */
    --primary-color: #0d6efd;
    --primary-hover: #0b5ed7;
    --primary-light: #cfe2ff;
    --primary-dark: #084298;
    
    /* Secondary Colors */
    --secondary-color: #6c757d;
    --secondary-hover: #5c636a;
    --secondary-light: #e2e3e5;
    
    /* Status Colors */
    --success-color: #198754;
    --success-light: #d1e7dd;
    --success-dark: #0f5132;
    
    --warning-color: #ffc107;
    --warning-light: #fff3cd;
    --warning-dark: #664d03;
    
    --danger-color: #dc3545;
    --danger-light: #f8d7da;
    --danger-dark: #842029;
    
    --info-color: #0dcaf0;
    --info-light: #cff4fc;
    --info-dark: #055160;
    
    /* Background Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;
    --bg-card: #ffffff;
    --bg-input: #ffffff;
    --bg-hover: #f8f9fa;
    --bg-selected: #e7f1ff;
    
    /* Text Colors */
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-muted: #adb5bd;
    --text-inverse: #ffffff;
    --text-link: #0d6efd;
    --text-link-hover: #0a58ca;
    
    /* Border Colors */
    --border-color: #dee2e6;
    --border-light: #e9ecef;
    --border-dark: #ced4da;
    --border-focus: #86b7fe;
    
    /* Shadow */
    --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    /* Header/Navigation */
    --header-bg: linear-gradient(90deg, rgb(0, 83, 155) 0%, rgb(30, 120, 190) 100%);
    --header-text: #ffffff;
    --nav-bg: #ffffff;
    --nav-hover: #f8f9fa;
    --nav-active: #e7f1ff;
    
    /* Table */
    --table-header-bg: #f8f9fa;
    --table-header-text: #212529;
    --table-row-hover: #f8f9fa;
    --table-row-striped: #f8f9fa;
    --table-border: #dee2e6;
    
    /* Form Elements */
    --input-bg: #ffffff;
    --input-border: #ced4da;
    --input-focus-border: #86b7fe;
    --input-focus-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    --input-placeholder: #6c757d;
    
    /* Charts */
    --chart-bg: #ffffff;
    --chart-grid: #e9ecef;
    --chart-text: #6c757d;
    
    /* Modal/Overlay */
    --modal-bg: #ffffff;
    --modal-overlay: rgba(0, 0, 0, 0.5);
    
    /* Scrollbar */
    --scrollbar-track: #f1f1f1;
    --scrollbar-thumb: #c1c1c1;
    --scrollbar-thumb-hover: #a8a8a8;
    
    /* Alarm Colors (same in both modes) */
    --alarm-a: #800080; /* Pressure Sensor - Purple */
    --alarm-b: #000000; /* Vac Pump - Black */
    --alarm-c: #FFD700; /* Maintenance Switch - Gold */
    --alarm-d: #0000FF; /* Overfill - Blue */
    --alarm-e: #FFA500; /* Digital Storage - Orange */
    --alarm-f: #FFC0CB; /* High Pressure - Pink */
    --alarm-g: #A52A2A; /* Zero Pressure - Brown */
    --alarm-h: #008B8B; /* Var Pressure - Dark Cyan */
    --alarm-i: #00FFFF; /* Low Pressure - Cyan */
    --alarm-j: #FF0000; /* 72 Hr Shutdown - Red */
    
    /* Transitions */
    --transition-fast: 0.15s ease-in-out;
    --transition-normal: 0.3s ease-in-out;
    --transition-slow: 0.5s ease-in-out;
    
    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;
    
    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
}

/* ============================================================
   DARK THEME
   Applied via [data-theme="dark"] on html/body
   ============================================================ */
[data-theme="dark"] {
    /* Primary Brand Colors - slightly adjusted for dark mode */
    --primary-color: #4dabf7;
    --primary-hover: #74c0fc;
    --primary-light: #1c3a5e;
    --primary-dark: #a5d8ff;
    
    /* Secondary Colors */
    --secondary-color: #adb5bd;
    --secondary-hover: #ced4da;
    --secondary-light: #343a40;
    
    /* Status Colors - adjusted for dark backgrounds */
    --success-color: #51cf66;
    --success-light: #1b4332;
    --success-dark: #8ce99a;
    
    --warning-color: #fcc419;
    --warning-light: #4a3c00;
    --warning-dark: #ffe066;
    
    --danger-color: #ff6b6b;
    --danger-light: #4a1a1a;
    --danger-dark: #ffa8a8;
    
    --info-color: #22b8cf;
    --info-light: #0c4a54;
    --info-dark: #66d9e8;
    
    /* Background Colors */
    --bg-primary: #1a1d21;
    --bg-secondary: #212529;
    --bg-tertiary: #2b3035;
    --bg-card: #25292e;
    --bg-input: #2b3035;
    --bg-hover: #343a40;
    --bg-selected: #1c3a5e;
    
    /* Text Colors - lighter for dark backgrounds */
    --text-primary: #f8f9fa;
    --text-secondary: #ced4da;
    --text-muted: #adb5bd;
    --text-inverse: #212529;
    --text-link: #4dabf7;
    --text-link-hover: #74c0fc;
    
    /* Border Colors */
    --border-color: #3d4349;
    --border-light: #343a40;
    --border-dark: #495057;
    --border-focus: #4dabf7;
    
    /* Shadow - darker shadows for dark mode */
    --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
    --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.5);
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3);
    
    /* Header/Navigation */
    --header-bg: linear-gradient(90deg, rgb(0, 83, 155) 0%, rgb(30, 120, 190) 100%);
    --header-text: #e9ecef;
    --nav-bg: #25292e;
    --nav-hover: #343a40;
    --nav-active: #1c3a5e;
    
    /* Table */
    --table-header-bg: #2b3035;
    --table-header-text: #e9ecef;
    --table-row-hover: #343a40;
    --table-row-striped: #2b3035;
    --table-border: #3d4349;
    
    /* Form Elements */
    --input-bg: #2b3035;
    --input-border: #495057;
    --input-focus-border: #4dabf7;
    --input-focus-shadow: 0 0 0 0.25rem rgba(77, 171, 247, 0.25);
    --input-placeholder: #6c757d;
    
    /* Charts */
    --chart-bg: #25292e;
    --chart-grid: #3d4349;
    --chart-text: #adb5bd;
    
    /* Modal/Overlay */
    --modal-bg: #25292e;
    --modal-overlay: rgba(0, 0, 0, 0.7);
    
    /* Scrollbar */
    --scrollbar-track: #2b3035;
    --scrollbar-thumb: #495057;
    --scrollbar-thumb-hover: #6c757d;
    
    /* Dark mode alarm colors - slightly lighter for visibility */
    --alarm-b: #6c757d; /* Vac Pump - Gray instead of black */
}

/* ============================================================
   BASE THEME APPLICATION
   ============================================================ */

/* Smooth transitions for theme switching */
html {
    transition: background-color var(--transition-normal),
                color var(--transition-normal);
}

body {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    transition: background-color var(--transition-normal),
                color var(--transition-normal);
}

/* Cards */
.card, .stat-card, .stat-card-small {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    box-shadow: var(--shadow-card);
}

/* Links */
a {
    color: var(--text-link);
}

a:hover {
    color: var(--text-link-hover);
}

/* Form inputs */
.form-control, .form-select {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-primary);
}

.form-control:focus, .form-select:focus {
    background-color: var(--input-bg);
    border-color: var(--input-focus-border);
    box-shadow: var(--input-focus-shadow);
    color: var(--text-primary);
}

.form-control::placeholder {
    color: var(--input-placeholder);
}

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

.table > thead {
    background-color: var(--table-header-bg);
    color: var(--table-header-text);
}

.table > tbody > tr:hover {
    background-color: var(--table-row-hover);
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--table-row-striped);
}

/* Buttons - primary */
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

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

/* Buttons - secondary/outline */
.btn-outline-secondary {
    color: var(--text-secondary);
    border-color: var(--border-color);
}

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

/* Dropdown menus */
.dropdown-menu {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

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

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

/* Modal */
.modal-content {
    background-color: var(--modal-bg);
    border-color: var(--border-color);
}

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

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */

.bg-theme-primary { background-color: var(--bg-primary); }
.bg-theme-secondary { background-color: var(--bg-secondary); }
.bg-theme-card { background-color: var(--bg-card); }

.text-theme-primary { color: var(--text-primary); }
.text-theme-secondary { color: var(--text-secondary); }
.text-theme-muted { color: var(--text-muted); }

.border-theme { border-color: var(--border-color); }
.shadow-theme { box-shadow: var(--shadow-card); }

/* ============================================================
   THEME TOGGLE BUTTON
   ============================================================ */

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--radius-full);
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.theme-toggle:hover {
    background-color: var(--bg-hover);
    transform: scale(1.05);
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
    font-size: 1.25rem;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

/* Show sun in dark mode, moon in light mode */
.theme-toggle .icon-sun {
    display: none;
}

.theme-toggle .icon-moon {
    display: block;
}

[data-theme="dark"] .theme-toggle .icon-sun {
    display: block;
}

[data-theme="dark"] .theme-toggle .icon-moon {
    display: none;
}

/* ============================================================
   LANGUAGE TOGGLE
   ============================================================ */

.lang-toggle,
.portal-lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
}

.lang-toggle:hover,
.portal-lang-switch:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
    text-decoration: none;
}

.lang-toggle .lang-code,
.portal-lang-switch span:last-child {
    font-weight: 600;
    text-transform: uppercase;
}

.lang-toggle .lang-flag,
.portal-lang-switch span:first-child {
    font-size: 1.1rem;
}