/* ========================================
   APEX Dark Mode Theme
   Toggle-based dark theme styling
   Loaded conditionally via [data-theme="dark"]
   ======================================== */


/* ========================================
   1. DARK MODE CSS VARIABLES
   ======================================== */

[data-theme="dark"] {
    /* Background Colors */
    --bg-base: #0F172A;
    --bg-surface: #1E293B;
    --bg-elevated: #334155;
    --bg-input: #1E293B;

    /* Border Colors */
    --border-color: #334155;
    --border-light: #475569;

    /* Text Colors */
    --text-primary: #F8FAFC;
    --text-secondary: #94A3B8;
    --text-muted: #64748B;

    /* Primary remains similar */
    --color-primary: #3B82F6;
    --shadow-glow-primary: 0 4px 14px rgba(59, 130, 246, 0.35);
}


/* ========================================
   2. BODY & MAIN CONTAINERS
   ======================================== */

[data-theme="dark"] body {
    background-color: var(--bg-base);
    color: var(--text-primary);
}

[data-theme="dark"] .apex-main {
    background-color: var(--bg-base);
}

[data-theme="dark"] .apex-content {
    background-color: var(--bg-base);
}


/* ========================================
   3. SIDEBAR
   ======================================== */

[data-theme="dark"] .apex-sidebar-modern {
    background: var(--bg-surface);
    border-right-color: var(--border-color);
}

[data-theme="dark"] .sidebar-brand-modern h2 {
    color: var(--text-primary);
}

[data-theme="dark"] .sidebar-brand-modern span {
    color: var(--text-secondary);
}

[data-theme="dark"] .nav-text-modern {
    color: var(--text-secondary);
}

[data-theme="dark"] .nav-link-modern:hover {
    background: var(--bg-elevated);
}

[data-theme="dark"] .nav-link-modern:hover .nav-text-modern {
    color: var(--text-primary);
}

[data-theme="dark"] .hipaa-badge {
    color: var(--text-secondary);
}


/* ========================================
   4. HEADER
   ======================================== */

[data-theme="dark"] .apex-header {
    background: var(--bg-surface);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .header-search .search-input {
    background: var(--bg-input);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .header-search .search-input::placeholder {
    color: var(--text-muted);
}

[data-theme="dark"] .header-search .search-input:focus {
    background: var(--bg-elevated);
    border-color: var(--color-primary);
}

[data-theme="dark"] .header-btn {
    background: var(--bg-input);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] .header-btn:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

[data-theme="dark"] .user-header-profile {
    background: var(--bg-input);
    border-color: var(--border-color);
}

[data-theme="dark"] .user-header-profile:hover {
    background: var(--bg-elevated);
}

[data-theme="dark"] .user-header-name {
    color: var(--text-primary);
}

[data-theme="dark"] .user-header-role {
    color: var(--text-secondary);
}


/* ========================================
   5. CARDS
   ======================================== */

[data-theme="dark"] .metric-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .chart-card,
[data-theme="dark"] .appointments-card,
[data-theme="dark"] .quick-actions-card {
    background: var(--bg-surface);
    border-color: var(--border-color);
}

[data-theme="dark"] .metric-card:hover,
[data-theme="dark"] .stat-card:hover,
[data-theme="dark"] .feature-card:hover {
    border-color: var(--border-light);
}

[data-theme="dark"] .metric-label,
[data-theme="dark"] .stat-label {
    color: var(--text-secondary);
}

[data-theme="dark"] .metric-value,
[data-theme="dark"] .stat-value {
    color: var(--text-primary);
}

[data-theme="dark"] .metric-sub {
    color: var(--text-muted);
}

[data-theme="dark"] .chart-header,
[data-theme="dark"] .feature-header,
[data-theme="dark"] .appointments-header {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .chart-title,
[data-theme="dark"] .feature-header h6,
[data-theme="dark"] .appointments-title {
    color: var(--text-primary);
}

[data-theme="dark"] .time-pills {
    background: var(--bg-input);
}

[data-theme="dark"] .time-pill {
    color: var(--text-secondary);
}

[data-theme="dark"] .time-pill.active {
    background: var(--bg-elevated);
    color: var(--text-primary);
}


/* ========================================
   6. QUICK ACTIONS
   ======================================== */

[data-theme="dark"] .quick-action-btn,
[data-theme="dark"] .action-btn {
    background: var(--bg-input);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] .action-icon {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

[data-theme="dark"] .action-text {
    color: var(--text-primary);
}


/* ========================================
   7. ROLE TABS
   ======================================== */

[data-theme="dark"] .role-tabs {
    background: var(--bg-input);
    border-color: var(--border-color);
}

[data-theme="dark"] .role-tab {
    color: var(--text-secondary);
}

[data-theme="dark"] .role-tab.active {
    background: var(--bg-elevated);
    color: var(--text-primary);
}


/* ========================================
   8. TABLES
   ======================================== */

[data-theme="dark"] .table {
    color: var(--text-primary);
}

[data-theme="dark"] .table thead {
    background: var(--bg-elevated);
}

[data-theme="dark"] .table th {
    color: var(--text-secondary);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .table td {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .table tbody tr:hover {
    background: var(--bg-input);
}

[data-theme="dark"] .bg-light {
    background: var(--bg-elevated) !important;
}


/* ========================================
   9. BADGES
   ======================================== */

[data-theme="dark"] .badge.bg-success-subtle {
    background: rgba(16, 185, 129, 0.2) !important;
}

[data-theme="dark"] .status-badge {
    background: rgba(16, 185, 129, 0.15);
}

[data-theme="dark"] .role-badge {
    background: rgba(59, 130, 246, 0.15);
}


/* ========================================
   10. DASHBOARD HEADER
   ======================================== */

[data-theme="dark"] .dashboard-header h1,
[data-theme="dark"] .header-left h1 {
    color: var(--text-primary);
}

[data-theme="dark"] .dashboard-header p,
[data-theme="dark"] .header-left p {
    color: var(--text-secondary);
}


/* ========================================
   11. FORM INPUTS
   ======================================== */

[data-theme="dark"] .form-control {
    background: var(--bg-input);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .form-control:focus {
    background: var(--bg-elevated);
    border-color: var(--color-primary);
    color: var(--text-primary);
}


/* ========================================
   12. DROPDOWNS
   ======================================== */

[data-theme="dark"] .dropdown-menu {
    background: var(--bg-surface);
    border-color: var(--border-color);
}

[data-theme="dark"] .dropdown-item {
    color: var(--text-secondary);
}

[data-theme="dark"] .dropdown-item:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

[data-theme="dark"] .dropdown-divider {
    border-color: var(--border-color);
}


/* ========================================
   13. MISC OVERRIDES
   ======================================== */

[data-theme="dark"] .avatar-sm.bg-primary-subtle {
    background: rgba(59, 130, 246, 0.2) !important;
}

[data-theme="dark"] .border-bottom {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .feature-body .border-bottom,
[data-theme="dark"] .overview-item {
    border-color: var(--border-color) !important;
}


/* ========================================
   14. THEME TOGGLE BUTTON
   ======================================== */

.theme-toggle {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    color: #64748B;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.theme-toggle:hover {
    background: white;
    border-color: #CBD5E1;
    color: #0F172A;
}

[data-theme="dark"] .theme-toggle {
    background: var(--bg-input);
    border-color: var(--border-color);
    color: #FBBF24;
}

[data-theme="dark"] .theme-toggle:hover {
    background: var(--bg-elevated);
    color: #FCD34D;
}


/* ========================================
   15. SMOOTH THEME TRANSITION
   ======================================== */

body,
.apex-sidebar-modern,
.apex-header,
.apex-main,
.apex-content,
.metric-card,
.stat-card,
.feature-card,
.chart-card,
.table,
.form-control,
.dropdown-menu {
    transition: background-color 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease;
}