/**
 * AlBND Theme System
 * 
 * Available Themes:
 * - theme-dark (Default dark)
 * - theme-light (Light mode)
 * - theme-ocean (Ocean Blue)
 * - theme-emerald (Emerald Green)
 * - theme-purple (Slate Purple)
 * - theme-steel (Midnight Steel)
 * - theme-sapphire (Sapphire Gold)
 */

/* ============================================
   DARK THEME (Default)
   ============================================ */
:root,
html.theme-dark,
.theme-dark {
    --primary: #d4a853;
    --primary-light: #e8c97a;
    --primary-dark: #b8923f;
    --primary-rgb: 212, 168, 83;
    
    --bg-primary: #0a0f1a;
    --bg-secondary: #111827;
    --bg-tertiary: #1f2937;
    --bg-card: #161f2e;
    --bg-hover: rgba(255, 255, 255, 0.05);
    --bg-input: #1f2937;
    --bg-sidebar: #0d1321;
    --bg-header: #111827;
    --bg-modal: #161f2e;
    --bg-dropdown: #1f2937;
    --bg-tooltip: #374151;
    
    --text-primary: #f3f4f6;
    --text-secondary: #9ca3af;
    --text-muted: #6b7280;
    --text-inverse: #0a0f1a;
    --text-link: #60a5fa;
    --text-link-hover: #93c5fd;
    
    --border-color: #374151;
    --border-light: rgba(255, 255, 255, 0.1);
    --border-input: #4b5563;
    --border-focus: #d4a853;
    
    --success: #10b981;
    --success-light: rgba(16, 185, 129, 0.15);
    --warning: #f59e0b;
    --warning-light: rgba(245, 158, 11, 0.15);
    --danger: #ef4444;
    --danger-light: rgba(239, 68, 68, 0.15);
    --info: #3b82f6;
    --info-light: rgba(59, 130, 246, 0.15);
    
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.6);
    
    --scrollbar-bg: #1f2937;
    --scrollbar-thumb: #4b5563;
    --scrollbar-thumb-hover: #6b7280;
    
    --table-header-bg: #1f2937;
    --table-row-hover: rgba(255, 255, 255, 0.03);
    
    --btn-primary-bg: #d4a853;
    --btn-primary-text: #0a0f1a;
    --btn-secondary-bg: #374151;
    --btn-secondary-text: #f3f4f6;
    
    --card-bg: #161f2e;
    --card-border: #374151;
    --input-bg: #1f2937;
    --input-border: #4b5563;
    --nav-active-bg: #d4a853;
    --nav-active-text: #0a0f1a;
}

/* ============================================
   LIGHT THEME
   ============================================ */
html.theme-light,
.theme-light {
    --primary: #b8923f;
    --primary-light: #d4a853;
    --primary-dark: #9a7a32;
    --primary-rgb: 184, 146, 63;
    
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --bg-card: #ffffff;
    --bg-hover: rgba(0, 0, 0, 0.03);
    --bg-input: #ffffff;
    --bg-sidebar: #f8fafc;
    --bg-header: #ffffff;
    --bg-modal: #ffffff;
    --bg-dropdown: #ffffff;
    --bg-tooltip: #1f2937;
    
    --text-primary: #1f2937;
    --text-secondary: #4b5563;
    --text-muted: #9ca3af;
    --text-inverse: #ffffff;
    --text-link: #2563eb;
    --text-link-hover: #1d4ed8;
    
    --border-color: #e5e7eb;
    --border-light: rgba(0, 0, 0, 0.08);
    --border-input: #d1d5db;
    --border-focus: #b8923f;
    
    --success: #059669;
    --success-light: rgba(5, 150, 105, 0.12);
    --warning: #d97706;
    --warning-light: rgba(217, 119, 6, 0.12);
    --danger: #dc2626;
    --danger-light: rgba(220, 38, 38, 0.12);
    --info: #2563eb;
    --info-light: rgba(37, 99, 235, 0.12);
    
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.15);
    
    --scrollbar-bg: #f1f5f9;
    --scrollbar-thumb: #cbd5e1;
    --scrollbar-thumb-hover: #94a3b8;
    
    --table-header-bg: #f8fafc;
    --table-row-hover: rgba(0, 0, 0, 0.02);
    
    --btn-primary-bg: #b8923f;
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: #e5e7eb;
    --btn-secondary-text: #374151;
    
    --card-bg: #ffffff;
    --card-border: #e5e7eb;
    --input-bg: #ffffff;
    --input-border: #d1d5db;
    --nav-active-bg: #b8923f;
    --nav-active-text: #ffffff;
}

/* ============================================
   OCEAN BLUE THEME
   ============================================ */
html.theme-ocean,
.theme-ocean {
    --primary: #0891B2;
    --primary-light: #22d3ee;
    --primary-dark: #0e7490;
    --primary-rgb: 8, 145, 178;
    
    --bg-primary: #0c1929;
    --bg-secondary: #112233;
    --bg-tertiary: #1a3344;
    --bg-card: #142838;
    --bg-hover: rgba(8, 145, 178, 0.08);
    --bg-input: #1a3344;
    --bg-sidebar: #091520;
    --bg-header: #112233;
    --bg-modal: #142838;
    --bg-dropdown: #1a3344;
    --bg-tooltip: #234455;
    
    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text-inverse: #0c1929;
    --text-link: #22d3ee;
    --text-link-hover: #67e8f9;
    
    --border-color: #234455;
    --border-light: rgba(34, 211, 238, 0.15);
    --border-input: #2d5566;
    --border-focus: #0891B2;
    
    --success: #10b981;
    --success-light: rgba(16, 185, 129, 0.15);
    --warning: #f59e0b;
    --warning-light: rgba(245, 158, 11, 0.15);
    --danger: #ef4444;
    --danger-light: rgba(239, 68, 68, 0.15);
    --info: #0891B2;
    --info-light: rgba(8, 145, 178, 0.15);
    
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.6);
    
    --scrollbar-bg: #1a3344;
    --scrollbar-thumb: #2d5566;
    --scrollbar-thumb-hover: #3d6577;
    
    --table-header-bg: #1a3344;
    --table-row-hover: rgba(8, 145, 178, 0.05);
    
    --btn-primary-bg: #0891B2;
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: #234455;
    --btn-secondary-text: #e2e8f0;
    
    --card-bg: #142838;
    --card-border: #234455;
    --input-bg: #1a3344;
    --input-border: #2d5566;
    --nav-active-bg: #0891B2;
    --nav-active-text: #ffffff;
}

/* ============================================
   EMERALD THEME
   ============================================ */
html.theme-emerald,
.theme-emerald {
    --primary: #059669;
    --primary-light: #34d399;
    --primary-dark: #047857;
    --primary-rgb: 5, 150, 105;
    
    --bg-primary: #0a1f17;
    --bg-secondary: #0f2d22;
    --bg-tertiary: #153d2e;
    --bg-card: #122a20;
    --bg-hover: rgba(5, 150, 105, 0.08);
    --bg-input: #153d2e;
    --bg-sidebar: #071510;
    --bg-header: #0f2d22;
    --bg-modal: #122a20;
    --bg-dropdown: #153d2e;
    --bg-tooltip: #1a4d38;
    
    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text-inverse: #0a1f17;
    --text-link: #34d399;
    --text-link-hover: #6ee7b7;
    
    --border-color: #1a4d38;
    --border-light: rgba(52, 211, 153, 0.15);
    --border-input: #256d4a;
    --border-focus: #059669;
    
    --success: #059669;
    --success-light: rgba(5, 150, 105, 0.15);
    --warning: #d97706;
    --warning-light: rgba(217, 119, 6, 0.15);
    --danger: #dc2626;
    --danger-light: rgba(220, 38, 38, 0.15);
    --info: #0284c7;
    --info-light: rgba(2, 132, 199, 0.15);
    
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.6);
    
    --scrollbar-bg: #153d2e;
    --scrollbar-thumb: #256d4a;
    --scrollbar-thumb-hover: #34d399;
    
    --table-header-bg: #153d2e;
    --table-row-hover: rgba(5, 150, 105, 0.05);
    
    --btn-primary-bg: #059669;
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: #1a4d38;
    --btn-secondary-text: #e2e8f0;
    
    --card-bg: #122a20;
    --card-border: #1a4d38;
    --input-bg: #153d2e;
    --input-border: #256d4a;
    --nav-active-bg: #059669;
    --nav-active-text: #ffffff;
}

/* ============================================
   SLATE PURPLE THEME
   ============================================ */
html.theme-purple,
.theme-purple {
    --primary: #7C3AED;
    --primary-light: #a78bfa;
    --primary-dark: #6d28d9;
    --primary-rgb: 124, 58, 237;
    
    --bg-primary: #13111c;
    --bg-secondary: #1c1827;
    --bg-tertiary: #262033;
    --bg-card: #1a1625;
    --bg-hover: rgba(124, 58, 237, 0.08);
    --bg-input: #262033;
    --bg-sidebar: #0f0d15;
    --bg-header: #1c1827;
    --bg-modal: #1a1625;
    --bg-dropdown: #262033;
    --bg-tooltip: #332b44;
    
    --text-primary: #e2e8f0;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;
    --text-inverse: #13111c;
    --text-link: #a78bfa;
    --text-link-hover: #c4b5fd;
    
    --border-color: #332b44;
    --border-light: rgba(167, 139, 250, 0.15);
    --border-input: #433b55;
    --border-focus: #7C3AED;
    
    --success: #10b981;
    --success-light: rgba(16, 185, 129, 0.15);
    --warning: #f59e0b;
    --warning-light: rgba(245, 158, 11, 0.15);
    --danger: #ef4444;
    --danger-light: rgba(239, 68, 68, 0.15);
    --info: #14b8a6;
    --info-light: rgba(20, 184, 166, 0.15);
    
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.6);
    
    --scrollbar-bg: #262033;
    --scrollbar-thumb: #433b55;
    --scrollbar-thumb-hover: #7C3AED;
    
    --table-header-bg: #262033;
    --table-row-hover: rgba(124, 58, 237, 0.05);
    
    --btn-primary-bg: #7C3AED;
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: #332b44;
    --btn-secondary-text: #e2e8f0;
    
    --card-bg: #1a1625;
    --card-border: #332b44;
    --input-bg: #262033;
    --input-border: #433b55;
    --nav-active-bg: #7C3AED;
    --nav-active-text: #ffffff;
}

/* ============================================
   MIDNIGHT STEEL THEME
   ============================================ */
html.theme-steel,
.theme-steel {
    --primary: #3B82F6;
    --primary-light: #60a5fa;
    --primary-dark: #2563eb;
    --primary-rgb: 59, 130, 246;
    
    --bg-primary: #0f1419;
    --bg-secondary: #16202a;
    --bg-tertiary: #1e2a36;
    --bg-card: #192430;
    --bg-hover: rgba(59, 130, 246, 0.08);
    --bg-input: #1e2a36;
    --bg-sidebar: #0b1015;
    --bg-header: #16202a;
    --bg-modal: #192430;
    --bg-dropdown: #1e2a36;
    --bg-tooltip: #283848;
    
    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text-inverse: #0f1419;
    --text-link: #60a5fa;
    --text-link-hover: #93c5fd;
    
    --border-color: #283848;
    --border-light: rgba(96, 165, 250, 0.15);
    --border-input: #374858;
    --border-focus: #3B82F6;
    
    --success: #10b981;
    --success-light: rgba(16, 185, 129, 0.15);
    --warning: #f59e0b;
    --warning-light: rgba(245, 158, 11, 0.15);
    --danger: #ef4444;
    --danger-light: rgba(239, 68, 68, 0.15);
    --info: #3B82F6;
    --info-light: rgba(59, 130, 246, 0.15);
    
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.6);
    
    --scrollbar-bg: #1e2a36;
    --scrollbar-thumb: #374858;
    --scrollbar-thumb-hover: #3B82F6;
    
    --table-header-bg: #1e2a36;
    --table-row-hover: rgba(59, 130, 246, 0.05);
    
    --btn-primary-bg: #3B82F6;
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: #283848;
    --btn-secondary-text: #e2e8f0;
    
    --card-bg: #192430;
    --card-border: #283848;
    --input-bg: #1e2a36;
    --input-border: #374858;
    --nav-active-bg: #3B82F6;
    --nav-active-text: #ffffff;
}

/* ============================================
   SAPPHIRE GOLD THEME
   ============================================ */
html.theme-sapphire,
.theme-sapphire {
    --primary: #2563EB;
    --primary-light: #3b82f6;
    --primary-dark: #1d4ed8;
    --primary-rgb: 37, 99, 235;
    
    --bg-primary: #0a1128;
    --bg-secondary: #101c3a;
    --bg-tertiary: #18284d;
    --bg-card: #132040;
    --bg-hover: rgba(37, 99, 235, 0.08);
    --bg-input: #18284d;
    --bg-sidebar: #070c1c;
    --bg-header: #101c3a;
    --bg-modal: #132040;
    --bg-dropdown: #18284d;
    --bg-tooltip: #203860;
    
    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text-inverse: #0a1128;
    --text-link: #d4a853;
    --text-link-hover: #e8c97a;
    
    --border-color: #203860;
    --border-light: rgba(212, 168, 83, 0.2);
    --border-input: #2a4870;
    --border-focus: #d4a853;
    
    --success: #10b981;
    --success-light: rgba(16, 185, 129, 0.15);
    --warning: #d4a853;
    --warning-light: rgba(212, 168, 83, 0.15);
    --danger: #ef4444;
    --danger-light: rgba(239, 68, 68, 0.15);
    --info: #2563EB;
    --info-light: rgba(37, 99, 235, 0.15);
    
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.6);
    
    --scrollbar-bg: #18284d;
    --scrollbar-thumb: #2a4870;
    --scrollbar-thumb-hover: #d4a853;
    
    --table-header-bg: #18284d;
    --table-row-hover: rgba(37, 99, 235, 0.05);
    
    --btn-primary-bg: #2563EB;
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: #203860;
    --btn-secondary-text: #e2e8f0;
    
    --card-bg: #132040;
    --card-border: #203860;
    --input-bg: #18284d;
    --input-border: #2a4870;
    --nav-active-bg: #d4a853;
    --nav-active-text: #0a1128;
}

/* ============================================
   THEME-SPECIFIC BODY BACKGROUNDS
   ============================================ */
html.theme-dark body,
body.theme-dark {
    background-color: #0a0f1a;
}

html.theme-light body,
body.theme-light {
    background-color: #f8fafc;
}

html.theme-ocean body,
body.theme-ocean {
    background-color: #0c1929;
}

html.theme-emerald body,
body.theme-emerald {
    background-color: #0a1f17;
}

html.theme-purple body,
body.theme-purple {
    background-color: #13111c;
}

html.theme-steel body,
body.theme-steel {
    background-color: #0f1419;
}

html.theme-sapphire body,
body.theme-sapphire {
    background-color: #0a1128;
}

/* ============================================
   GLOBAL THEME TRANSITIONS
   ============================================ */
body,
.sidebar,
.header,
.card,
.btn,
.form-control,
.modal-content,
.dropdown-menu {
    transition: background-color 0.3s ease, 
                border-color 0.3s ease, 
                color 0.3s ease,
                box-shadow 0.3s ease;
}

/* ============================================
   SCROLLBAR THEMING
   ============================================ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

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

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

/* ============================================
   FORM CONTROLS THEMING
   ============================================ */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
    background-color: var(--bg-input) !important;
    border-color: var(--border-input) !important;
    color: var(--text-primary) !important;
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--border-focus) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15) !important;
}

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

/* ============================================
   CARD THEMING
   ============================================ */
.card,
.panel,
.box,
[class*="-card"],
[class*="-panel"] {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* ============================================
   TABLE THEMING
   ============================================ */
.table,
table {
    color: var(--text-primary);
}

.table thead th,
table thead th,
.table th,
table th {
    background-color: var(--table-header-bg);
    color: var(--text-secondary);
    border-color: var(--border-color);
}

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

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

/* ============================================
   MODAL THEMING
   ============================================ */
.modal-content {
    background-color: var(--bg-modal);
    border-color: var(--border-color);
    color: var(--text-primary);
}

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

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

/* ============================================
   DROPDOWN THEMING
   ============================================ */
.dropdown-menu {
    background-color: var(--bg-dropdown);
    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);
}

/* ============================================
   BUTTON THEMING
   ============================================ */
.btn-primary {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border-color: var(--btn-primary-bg);
}

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

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

/* ============================================
   SIDEBAR THEMING
   ============================================ */
.sidebar,
.main-sidebar,
[class*="sidebar"] {
    background-color: var(--bg-sidebar);
    border-color: var(--border-color);
}

.sidebar .nav-link,
.main-sidebar .nav-link {
    color: var(--text-secondary);
}

.sidebar .nav-link:hover,
.main-sidebar .nav-link:hover {
    color: var(--text-primary);
    background-color: var(--bg-hover);
}

.sidebar .nav-link.active,
.main-sidebar .nav-link.active {
    background-color: var(--nav-active-bg);
    color: var(--nav-active-text);
}

/* ============================================
   HEADER THEMING
   ============================================ */
.header,
.main-header,
[class*="header"] {
    background-color: var(--bg-header);
    border-color: var(--border-color);
}

/* ============================================
   ALERT/BADGE THEMING
   ============================================ */
.badge-success, .alert-success { background-color: var(--success-light); color: var(--success); }
.badge-warning, .alert-warning { background-color: var(--warning-light); color: var(--warning); }
.badge-danger, .alert-danger { background-color: var(--danger-light); color: var(--danger); }
.badge-info, .alert-info { background-color: var(--info-light); color: var(--info); }

/* ============================================
   TEXT UTILITIES
   ============================================ */
.text-primary { color: var(--primary) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger { color: var(--danger) !important; }
.text-info { color: var(--info) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-secondary { color: var(--text-secondary) !important; }

/* ============================================
   BACKGROUND UTILITIES
   ============================================ */
.bg-primary { background-color: var(--primary) !important; }
.bg-success { background-color: var(--success) !important; }
.bg-warning { background-color: var(--warning) !important; }
.bg-danger { background-color: var(--danger) !important; }
.bg-info { background-color: var(--info) !important; }

/* ============================================
   BORDER UTILITIES
   ============================================ */
.border { border-color: var(--border-color) !important; }
.border-primary { border-color: var(--primary) !important; }
.border-success { border-color: var(--success) !important; }
.border-warning { border-color: var(--warning) !important; }
.border-danger { border-color: var(--danger) !important; }

/* ============================================
   LINK THEMING
   ============================================ */
a {
    color: var(--text-link);
}

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

/* ============================================
   TOOLTIP THEMING
   ============================================ */
.tooltip-inner,
[data-tooltip]::after {
    background-color: var(--bg-tooltip);
    color: var(--text-primary);
}