/* ========================================
   THEME SYSTEM - CSS VARIABLES
   Multi-tenant theming with CSS custom properties
   ======================================== */

:root {
    /* ===== BRAND COLORS ===== */
    --primary-color: #0d6efd;
    --secondary-color: #6c757d;
    
    /* ===== STATE COLORS ===== */
    --success-color: #198754;
    --warning-color: #ffc107;
    --danger-color: #dc3545;
    --info-color: #0dcaf0;
    
    /* ===== LAYOUT COLORS ===== */
    --sidebar-color-start: rgb(5, 39, 103);
    --sidebar-color-end: #3a0647;
    --header-background-color: #f7f7f7;
    --page-background-color: #ffffff;
    --card-background-color: #ffffff;
    
    /* ===== TEXT COLORS ===== */
    --text-primary-color: #212529;
    --text-secondary-color: #6c757d;
    --text-muted-color: #6c757d;
    --link-color: #0d6efd;
    --link-hover-color: #0a58ca;
    
    /* ===== UI ELEMENT COLORS ===== */
    --border-color: #dee2e6;
    --input-background-color: #ffffff;
    --active-background-color: #e7f1ff;
    --hover-background-color: #f8f9fa;
}

/* ========================================
   APPLY THEME VARIABLES TO COMPONENTS
   Replaces hardcoded colors with CSS variables
   ======================================== */

/* Sidebar */
.sidebar {
    background-image: linear-gradient(180deg, 
        var(--sidebar-color-start) 0%, 
        var(--sidebar-color-end) 70%) !important;
}

/* Top Header (Main Layout) */
main .top-row {
    background-color: var(--header-background-color) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

/* NavMenu Top Row */
.navbar-dark .top-row {
    background-color: var(--sidebar-color-start) !important;
}

/* Page Background */
body, .content {
    background-color: var(--page-background-color) !important;
}

/* Cards */
.card {
    background-color: var(--card-background-color) !important;
    border-color: var(--border-color) !important;
}

/* Text Colors */
body, .text-body {
    color: var(--text-primary-color) !important;
}

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

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

/* Links */
a:not(.btn):not(.nav-link) {
    color: var(--link-color) !important;
}

a:not(.btn):not(.nav-link):hover {
    color: var(--link-hover-color) !important;
}

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

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

/* Buttons - Secondary */
.btn-secondary {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
}

/* Buttons - Success, Warning, Danger, Info */
.btn-success {
    background-color: var(--success-color) !important;
    border-color: var(--success-color) !important;
}

.btn-warning {
    background-color: var(--warning-color) !important;
    border-color: var(--warning-color) !important;
}

.btn-danger {
    background-color: var(--danger-color) !important;
    border-color: var(--danger-color) !important;
}

.btn-info {
    background-color: var(--info-color) !important;
    border-color: var(--info-color) !important;
}

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

.form-control:focus, .form-select:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
}

/* Active/Selected States */
.nav-item ::deep a.active,
.list-group-item.active {
    background-color: var(--active-background-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

/* Hover States */
.nav-item ::deep .nav-link:hover,
.list-group-item:hover {
    background-color: var(--hover-background-color) !important;
}

/* Borders */
.border, .border-top, .border-bottom, .border-start, .border-end {
    border-color: var(--border-color) !important;
}

/* Alerts */
.alert-success {
    background-color: color-mix(in srgb, var(--success-color) 15%, white) !important;
    border-color: var(--success-color) !important;
    color: var(--success-color) !important;
}

.alert-warning {
    background-color: color-mix(in srgb, var(--warning-color) 15%, white) !important;
    border-color: var(--warning-color) !important;
    color: var(--warning-color) !important;
}

.alert-danger {
    background-color: color-mix(in srgb, var(--danger-color) 15%, white) !important;
    border-color: var(--danger-color) !important;
    color: var(--danger-color) !important;
}

.alert-info {
    background-color: color-mix(in srgb, var(--info-color) 15%, white) !important;
    border-color: var(--info-color) !important;
    color: var(--info-color) !important;
}

/* Badges */
.badge.bg-primary {
    background-color: var(--primary-color) !important;
}

.badge.bg-secondary {
    background-color: var(--secondary-color) !important;
}

.badge.bg-success {
    background-color: var(--success-color) !important;
}

.badge.bg-warning {
    background-color: var(--warning-color) !important;
}

.badge.bg-danger {
    background-color: var(--danger-color) !important;
}

.badge.bg-info {
    background-color: var(--info-color) !important;
}

/* ========================================
   DARK MODE SUPPORT
   Automatically switch based on theme
   ======================================== */

/* Dark mode can be triggered by changing CSS variables via JavaScript */
[data-theme="dark"] {
    --primary-color: #375a7f;
    --secondary-color: #444444;
    --success-color: #00bc8c;
    --warning-color: #f39c12;
    --danger-color: #e74c3c;
    --info-color: #3498db;
    
    --sidebar-color-start: #1a1a1a;
    --sidebar-color-end: #2d2d2d;
    --header-background-color: #2d2d2d;
    --page-background-color: #222222;
    --card-background-color: #2d2d2d;
    
    --text-primary-color: #ffffff;
    --text-secondary-color: #adb5bd;
    --text-muted-color: #888888;
    --link-color: #375a7f;
    --link-hover-color: #4a6fa5;
    
    --border-color: #444444;
    --input-background-color: #1a1a1a;
    --active-background-color: #375a7f;
    --hover-background-color: #333333;
}

/* ========================================
   THEME TRANSITIONS
   Smooth color transitions when switching themes
   ======================================== */

* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Don't transition layout properties */
*:not(.sidebar):not(.top-row) {
    transition-property: background-color, color, border-color;
}