/* =====================================================
   Theme System - CSS Variables
   ===================================================== */

:root {
    /* Default Theme - Blue */
    --primary-color: #3498db;
    --primary-dark: #2980b9;
    --primary-light: #5dade2;
    --secondary-color: #2c3e50;
    --accent-color: #e74c3c;
    
    /* Backgrounds */
    --bg-primary: #f5f5f5;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    
    /* Text Colors */
    --text-primary: #2c3e50;
    --text-secondary: #7f8c8d;
    --text-muted: #95a5a6;
    
    /* Borders */
    --border-color: #e9ecef;
    --border-light: rgba(0, 0, 0, 0.1);
}

/* =====================================================
   Dark Mode
   ===================================================== */

[data-theme-mode="dark"] {
    --bg-primary: #1a1a2e;
    --bg-secondary: #16213e;
    --bg-card: #0f3460;
    
    --text-primary: #eaeaea;
    --text-secondary: #b8b8b8;
    --text-muted: #888888;
    
    --border-color: #2c3e50;
    --border-light: rgba(255, 255, 255, 0.1);
}

/* =====================================================
   Color Themes
   ===================================================== */

/* Blue Ocean (Default) */
[data-theme-color="blue"] {
    --primary-color: #3498db;
    --primary-dark: #2980b9;
    --primary-light: #5dade2;
}

/* Green Nature */
[data-theme-color="green"] {
    --primary-color: #27ae60;
    --primary-dark: #229954;
    --primary-light: #2ecc71;
}

/* Purple Royal */
[data-theme-color="purple"] {
    --primary-color: #8e44ad;
    --primary-dark: #7d3c98;
    --primary-light: #a569bd;
}

/* Red Power */
[data-theme-color="red"] {
    --primary-color: #e74c3c;
    --primary-dark: #c0392b;
    --primary-light: #ec7063;
}

/* Orange Warm */
[data-theme-color="orange"] {
    --primary-color: #f39c12;
    --primary-dark: #e67e22;
    --primary-light: #f8c471;
}

/* Teal Sea */
[data-theme-color="teal"] {
    --primary-color: #16a085;
    --primary-dark: #138d75;
    --primary-light: #48c9b0;
}

/* Pink Chic */
[data-theme-color="pink"] {
    --primary-color: #e91e63;
    --primary-dark: #c2185b;
    --primary-light: #f06292;
}

/* Dark Classic */
[data-theme-color="dark"] {
    --primary-color: #34495e;
    --primary-dark: #2c3e50;
    --primary-light: #5d6d7e;
}

/* =====================================================
   Apply Theme to Components
   ===================================================== */

/* Header */
.admin-header {
    background: var(--primary-color) !important;
}

.admin-header .dashboard-title,
.admin-header .header-left,
.admin-header .header-right,
.admin-header .user-name,
.admin-header .header-logout,
.admin-header .notification-bell {
    color: #ffffff !important;
}

.admin-header .notification-badge,
.nav-badge {
    background: #e74c3c !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Sidebar */
.admin-sidebar {
    background: var(--bg-secondary) !important;
}

.sidebar-header {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

.sidebar-header h2 {
    color: var(--text-primary) !important;
}

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

.nav-item:hover {
    background: var(--border-light) !important;
    color: var(--primary-color) !important;
}

.nav-item.active {
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark)) !important;
    color: white !important;
}

/* Main Content */
.admin-main {
    background: var(--bg-primary) !important;
}

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

.card-header {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.card-header h3 {
    color: var(--text-primary) !important;
}

.card-body {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

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

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

.kpi-number {
    color: var(--text-primary) !important;
}

/* Buttons */
.btn-primary, .btn-danger, .btn-success, .btn-info, .btn-warning {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important;
    font-weight: 500 !important;
}

.btn-primary:hover, .btn-danger:hover, .btn-success:hover, .btn-info:hover, .btn-warning:hover {
    background: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
    color: #ffffff !important;
}

.btn-danger {
    background: linear-gradient(135deg, #e74c3c, #c0392b) !important;
    border-color: #e74c3c !important;
}

.btn-danger:hover {
    background: #c0392b !important;
    border-color: #c0392b !important;
}

.btn-success {
    background: linear-gradient(135deg, #27ae60, #229954) !important;
    border-color: #27ae60 !important;
}

.btn-success:hover {
    background: #229954 !important;
    border-color: #229954 !important;
}

.btn-info {
    background: linear-gradient(135deg, #3498db, #2980b9) !important;
    border-color: #3498db !important;
}

.btn-info:hover {
    background: #2980b9 !important;
    border-color: #2980b9 !important;
}

.btn-warning {
    background: linear-gradient(135deg, #f39c12, #e67e22) !important;
    border-color: #f39c12 !important;
}

.btn-warning:hover {
    background: #e67e22 !important;
    border-color: #e67e22 !important;
}

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

.table thead th {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
    font-weight: 600 !important;
}

.table tbody td {
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.table tbody tr {
    background: var(--bg-card) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background: var(--border-light) !important;
}

.table tbody tr:hover {
    background: var(--border-light) !important;
}

/* Table Actions */
.table .action-btn,
.table .btn-sm {
    color: #ffffff !important;
}

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

.table .text-success {
    color: #27ae60 !important;
}

.table .text-danger {
    color: #e74c3c !important;
}

.table .text-warning {
    color: #f39c12 !important;
}

.table .text-info {
    color: #3498db !important;
}

/* Forms */
.form-control, select.form-control, textarea.form-control, input.form-control {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.form-control::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.6 !important;
}

.form-control:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25) !important;
    color: var(--text-primary) !important;
}

.form-group label {
    color: var(--text-primary) !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
}

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

/* Badges */
.badge, .badge-primary, .badge-success, .badge-danger, .badge-warning, .badge-info {
    color: #ffffff !important;
    font-weight: 500 !important;
}

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

.badge-success {
    background: #27ae60 !important;
}

.badge-danger {
    background: #e74c3c !important;
}

.badge-warning {
    background: #f39c12 !important;
}

.badge-info {
    background: #3498db !important;
}

.badge-secondary {
    background: #95a5a6 !important;
}

/* Links */
a {
    color: var(--primary-color) !important;
}

a:hover {
    color: var(--primary-dark) !important;
}

/* Text Color Utilities */
.text-primary {
    color: var(--primary-color) !important;
}

.text-success {
    color: #27ae60 !important;
}

.text-danger {
    color: #e74c3c !important;
}

.text-warning {
    color: #f39c12 !important;
}

.text-info {
    color: #3498db !important;
}

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

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

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

.text-white {
    color: #ffffff !important;
}

.text-orange {
    color: #f39c12 !important;
}

/* Background Color Utilities */
.bg-primary {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
}

.bg-success {
    background-color: #27ae60 !important;
    color: #ffffff !important;
}

.bg-danger {
    background-color: #e74c3c !important;
    color: #ffffff !important;
}

.bg-warning {
    background-color: #f39c12 !important;
    color: #ffffff !important;
}

.bg-info {
    background-color: #3498db !important;
    color: #ffffff !important;
}

/* Breadcrumb */
.breadcrumb-nav {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

.breadcrumb-nav a {
    color: var(--primary-color) !important;
}

/* Footer */
.admin-footer {
    background: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}

/* Dashboard Content */
.dashboard-content {
    color: var(--text-primary) !important;
}

/* Glass Cards */
.glass-card {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--border-light) !important;
}

[data-theme-mode="dark"] .glass-card {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Settings Tabs */
.settings-tab {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.settings-tab:hover {
    background: var(--border-light) !important;
}

.settings-tab.active {
    background: var(--bg-card) !important;
    color: var(--primary-color) !important;
    border-bottom-color: var(--primary-color) !important;
}

/* Alerts */
.alert-success {
    background: rgba(39, 174, 96, 0.1) !important;
    border-color: rgba(39, 174, 96, 0.3) !important;
    color: #27ae60 !important;
}

.alert-danger {
    background: rgba(231, 76, 60, 0.1) !important;
    border-color: rgba(231, 76, 60, 0.3) !important;
    color: #e74c3c !important;
}

.alert-info {
    background: rgba(52, 152, 219, 0.1) !important;
    border-color: rgba(52, 152, 219, 0.3) !important;
    color: #3498db !important;
}

/* Action Buttons & Dropdowns */
.btn-icon, .action-btn, .dropdown-toggle {
    color: var(--text-primary) !important;
}

.dropdown-menu {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

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

.dropdown-item:hover {
    background: var(--border-light) !important;
    color: var(--primary-color) !important;
}

.dropdown-item.text-danger {
    color: #e74c3c !important;
}

.dropdown-item.text-danger:hover {
    background: rgba(231, 76, 60, 0.1) !important;
    color: #c0392b !important;
}

/* Status Badges in Operations */
.status-badge {
    padding: 4px 12px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
}

.status-badge.status-active {
    background: #27ae60 !important;
}

.status-badge.status-inactive {
    background: #95a5a6 !important;
}

.status-badge.status-pending {
    background: #f39c12 !important;
}

.status-badge.status-approved {
    background: #3498db !important;
}

.status-badge.status-rejected {
    background: #e74c3c !important;
}

/* Smooth Transitions */
* {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease !important;
}

/* Stat Cards & Info Boxes */
.stat-card, .info-box, .summary-card {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.stat-card h3, .info-box h3, .summary-card h3,
.stat-card h4, .info-box h4, .summary-card h4 {
    color: var(--text-primary) !important;
}

.stat-card p, .info-box p, .summary-card p {
    color: var(--text-secondary) !important;
}

.stat-value, .info-value {
    color: var(--primary-color) !important;
    font-weight: 700 !important;
}

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

.employee-card .employee-name {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
}

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

/* Modal */
.modal-content {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

.modal-header {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.modal-title {
    color: var(--text-primary) !important;
}

.modal-body {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

.modal-footer {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

/* List Groups */
.list-group-item {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.list-group-item:hover {
    background: var(--border-light) !important;
}

/* Input Groups */
.input-group-text {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Pagination */
.pagination .page-link {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--primary-color) !important;
}

.pagination .page-link:hover {
    background: var(--border-light) !important;
    color: var(--primary-dark) !important;
}

.pagination .page-item.active .page-link {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important;
}

/* Progress Bar */
.progress {
    background: var(--border-light) !important;
}

.progress-bar {
    background: var(--primary-color) !important;
    color: #ffffff !important;
}

/* Scrollbar (Dark Mode) */
[data-theme-mode="dark"] ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

[data-theme-mode="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

[data-theme-mode="dark"] ::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 5px;
}

[data-theme-mode="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark);
}