/* ==================== Color System - Professional Blue Palette ==================== */
/* Synchronized with mad3oom.online */

:root,
:root[data-theme='light'] {
    /* Base Color Palette - Professional Blue */
    --color-primary: #003366;
    --color-primary-variant: #0055AA;
    --color-accent: #0077CC;
    --color-background: #F5F5F5;
    --color-surface: #FFFFFF;
    --color-text: #333333;
    --color-text-secondary: #777777;
    --color-muted: #EEEEEE;
    --color-success: #2E8A3A;
    --color-warning: #E0A800;
    --color-danger: #D9534F;
    --color-border: #DDDDDD;
    --color-nav-text: #FFFFFF;
    --color-nav-border: rgba(255, 255, 255, 0.1);
    
    /* Computed Colors */
    --color-accent-hover: #0055AA;
    --color-accent-dark: #0055AA;
    --color-sidebar-bg: #002244;
    --color-sidebar-active: #0077CC;
    
    /* Legacy mappings for compatibility */
    --brand-navy: var(--color-primary);
    --brand-cyan: var(--color-accent);
    --brand-gray: var(--color-muted);
    --primary-color: var(--color-accent);
    --primary-dark: var(--color-primary-variant);
    --secondary-color: var(--color-muted);
    --accent-color: var(--color-accent);
    --success-color: var(--color-success);
    --warning-color: var(--color-warning);
    --danger-color: var(--color-danger);
    --bg-primary: var(--color-primary);
    --bg-secondary: var(--color-surface);
    --bg-tertiary: var(--color-muted);
    --text-primary: var(--color-text);
    --text-secondary: var(--color-text-secondary);
    --text-tertiary: var(--color-text-secondary);
    --border-color: var(--color-border);
    --border-color-hover: var(--color-accent);
    --hover-bg: rgba(0, 119, 204, 0.08);
    
    /* Shadows */
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-glow: 0 0 20px rgba(0, 119, 204, 0.2);
    
    /* Input backgrounds */
    --input-bg: #FFFFFF;
    --input-text: var(--color-text);
    
    /* Modal overlay */
    --modal-overlay: rgba(0, 0, 0, 0.7);
}

/* ==================== Dark Theme ==================== */
:root[data-theme='dark'] {
    /* Base Color Palette - Dark Mode */
    --color-primary: #1a1a2e;
    --color-primary-variant: #16213e;
    --color-accent: #0088DD;
    --color-background: #0E0E10;
    --color-surface: #1A1A1A;
    --color-text: #E0E0E0;
    --color-text-secondary: #B0B0B0;
    --color-muted: #2A2A2A;
    --color-success: #4CAF50;
    --color-warning: #FFB300;
    --color-danger: #F44336;
    --color-border: #333333;
    --color-nav-text: #FFFFFF;
    --color-nav-border: rgba(255, 255, 255, 0.1);
    
    /* Computed Colors */
    --color-accent-hover: #0066AA;
    --color-accent-dark: #0066AA;
    --color-sidebar-bg: #121212;
    --color-sidebar-active: #0088DD;
    
    /* Legacy mappings for compatibility */
    --brand-navy: var(--color-primary);
    --brand-cyan: var(--color-accent);
    --brand-gray: var(--color-muted);
    --primary-color: var(--color-accent);
    --primary-dark: var(--color-primary-variant);
    --secondary-color: var(--color-muted);
    --accent-color: var(--color-accent);
    --success-color: var(--color-success);
    --warning-color: var(--color-warning);
    --danger-color: var(--color-danger);
    --bg-primary: var(--color-primary);
    --bg-secondary: var(--color-surface);
    --bg-tertiary: var(--color-muted);
    --text-primary: var(--color-text);
    --text-secondary: var(--color-text-secondary);
    --text-tertiary: var(--color-text-secondary);
    --border-color: var(--color-border);
    --border-color-hover: var(--color-accent);
    --hover-bg: rgba(0, 136, 221, 0.15);
    
    /* Shadows */
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-glow: 0 0 20px rgba(0, 136, 221, 0.4);
    
    /* Input backgrounds */
    --input-bg: #242424;
    --input-text: var(--color-text);
    
    /* Modal overlay */
    --modal-overlay: rgba(0, 0, 0, 0.85);
}

/* ==================== UI Element Colors ==================== */
.navbar, .page-header {
    background: var(--color-primary);
    color: #FFFFFF;
}

.sidebar {
    background: var(--color-sidebar-bg);
    color: #FFFFFF;
    float: right;
}

.sidebar .active {
    background: var(--color-sidebar-active);
}

.btn-primary {
    background: var(--color-accent);
    color: #FFFFFF;
    border: none;
}

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

.btn-secondary {
    border: 1px solid var(--color-border);
    color: var(--color-text);
    background: transparent;
}

a {
    color: var(--color-accent);
}

a:hover {
    color: var(--color-accent-dark);
}

.card, .feature-card, .ticket-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

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

input, textarea, select {
    background: #FFFFFF;
    border: 1px solid var(--color-border);
}

input:focus, textarea:focus, select:focus {
    outline: 2px solid var(--color-accent);
}

.badge-success { background: var(--color-success); color: #FFFFFF; }
.badge-warning { background: var(--color-warning); color: #FFFFFF; }
.badge-danger { background: var(--color-danger); color: #FFFFFF; }