/* =============================================================================
   DARK MODE STYLES - Glassmorphism Edition
   Calm, medical, precise. Soft mesh gradients, frosted glass surfaces.
   ============================================================================= */

/* ---------- Dark Mode Variables ---------- */

[data-color-scheme="dark"],
[data-color-scheme-resolved="dark"] {
    --color-bg-body: #0a0e1a;
    --color-bg-surface: rgba(20, 25, 40, 0.6);
    --color-bg-sidebar: rgba(10, 14, 26, 0.95);
    --color-bg-subtle: rgba(30, 35, 50, 0.4);
    --color-border: rgba(255, 255, 255, 0.08);
    --color-text-main: #ffffff;
    --color-text-muted: #a0aec0;
    --color-text-inverse: #0a0e1a;

    /* Medical-appropriate accent: calm cyan/teal */
    --color-primary: #22d3ee;
    --color-primary-hover: #67e8f9;

    /* Shadows for glass elevation */
    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.5);

    /* Dark mode glass tokens */
    --glass-bg: rgba(30, 35, 50, 0.50);
    --glass-bg-hover: rgba(35, 40, 55, 0.60);
    --glass-bg-strong: rgba(25, 30, 45, 0.65);
    --glass-border: rgba(255, 255, 255, 0.10);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.40);
    --glass-shadow-hover: 0 20px 60px rgba(0, 0, 0, 0.55);
    --glass-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05);

    /* Semantic component tokens */
    --color-surface-alt: rgba(30, 35, 50, 0.6);
    --color-border-subtle: rgba(255, 255, 255, 0.08);

    /* Surface hierarchy tokens (dark overrides) */
    --surface: rgba(15, 20, 35, 1);
    --surface-container-low: rgba(25, 30, 48, 0.85);
    --surface-container-lowest: rgba(20, 25, 42, 0.7);
    --surface-container-high: rgba(35, 42, 62, 0.8);
    --on-surface: #e2e8f0;
    --shadow-ambient: 0px 12px 32px rgba(0, 0, 0, 0.35);
    --color-overlay-subtle: rgba(255, 255, 255, 0.05);
    --color-warning-hover: #fbbf24;
    --color-danger-hover: #f87171;

    --color-alert-success-bg: rgba(16, 185, 129, 0.1);
    --color-alert-success-text: #34d399;
    --color-alert-success-border: rgba(16, 185, 129, 0.2);
    --color-alert-error-bg: rgba(239, 68, 68, 0.1);
    --color-alert-error-text: #f87171;
    --color-alert-error-border: rgba(239, 68, 68, 0.2);
    --color-alert-warning-bg: rgba(245, 158, 11, 0.1);
    --color-alert-warning-text: #fbbf24;
    --color-alert-warning-border: rgba(245, 158, 11, 0.2);
    --color-alert-info-bg: rgba(34, 211, 238, 0.1);
    --color-alert-info-text: #22d3ee;
    --color-alert-info-border: rgba(34, 211, 238, 0.2);

    --color-status-completed-bg: rgba(16, 185, 129, 0.2);
    --color-status-completed-text: #34d399;
    --color-status-pending-bg: rgba(245, 158, 11, 0.2);
    --color-status-pending-text: #fbbf24;
    --color-status-cancelled-bg: rgba(239, 68, 68, 0.2);
    --color-status-cancelled-text: #f87171;

    --color-badge-payment-bg: rgba(16, 185, 129, 0.2);
    --color-badge-payment-text: #34d399;
    --color-badge-refund-bg: rgba(249, 115, 22, 0.2);
    --color-badge-refund-text: #fb923c;
    --color-badge-cash-bg: rgba(16, 185, 129, 0.2);
    --color-badge-cash-text: #34d399;
    --color-badge-mbank-bg: rgba(16, 185, 129, 0.2);
    --color-badge-mbank-text: #34d399;
    --color-badge-bakai-bg: rgba(59, 130, 246, 0.2);
    --color-badge-bakai-text: #60a5fa;
    --color-badge-mbusiness-bg: rgba(245, 158, 11, 0.2);
    --color-badge-mbusiness-text: #fbbf24;
    --color-badge-visa-bg: rgba(99, 102, 241, 0.2);
    --color-badge-visa-text: #818cf8;
    --color-badge-operation-bg: rgba(239, 68, 68, 0.2);
    --color-badge-operation-text: #f87171;
    --color-badge-repeat-bg: rgba(245, 158, 11, 0.2);
    --color-badge-repeat-text: #fbbf24;
    --color-badge-note-bg: rgba(14, 165, 233, 0.2);
    --color-badge-note-text: #38bdf8;
    --color-badge-neutral-bg: rgba(100, 116, 139, 0.3);
    --color-badge-neutral-text: var(--color-text-main);

    --color-card-header-danger-bg: rgba(239, 68, 68, 0.15);
    --color-card-header-danger-text: #f87171;
    --color-card-header-danger-border: rgba(239, 68, 68, 0.3);
    --color-card-header-warning-bg: rgba(245, 158, 11, 0.15);
    --color-card-header-warning-text: #fbbf24;
    --color-card-header-warning-border: rgba(245, 158, 11, 0.3);
    --color-card-header-info-bg: rgba(59, 130, 246, 0.15);
    --color-card-header-info-text: #60a5fa;
    --color-card-header-info-border: rgba(59, 130, 246, 0.3);

    --color-services-header-bg: rgba(14, 165, 233, 0.15);
    --color-services-header-text: #38bdf8;
    --color-medicines-header-bg: rgba(245, 158, 11, 0.15);
    --color-medicines-header-text: #fbbf24;

    --color-payment-mbank-bg: rgba(16, 185, 129, 0.15);
    --color-payment-mbank-border: rgba(16, 185, 129, 0.4);
    --color-payment-mbank-text: #34d399;
    --color-payment-bakai-bg: rgba(59, 130, 246, 0.15);
    --color-payment-bakai-border: rgba(59, 130, 246, 0.4);
    --color-payment-bakai-text: #60a5fa;
    --color-payment-cash-bg: rgba(100, 116, 139, 0.2);
    --color-payment-cash-border: rgba(100, 116, 139, 0.4);
    --color-payment-cash-value: var(--color-text-main);
    --color-payment-cash-label: var(--color-text-muted);
    --color-payment-mbusiness-bg: rgba(245, 158, 11, 0.15);
    --color-payment-mbusiness-border: rgba(245, 158, 11, 0.4);
    --color-payment-mbusiness-text: #fbbf24;
    --color-payment-expense-bg: rgba(239, 68, 68, 0.15);
    --color-payment-expense-border: rgba(239, 68, 68, 0.4);
    --color-payment-expense-text: #f87171;

    --color-glass-light-bg: rgba(30, 35, 50, 0.6);
    --color-glass-light-border: rgba(255, 255, 255, 0.1);
}

/* ---------- Mesh Gradient Background (CSS-only) ---------- */
/* Mesh-gradient base for .app-shell — overridden by Aurora Borealis section below */

/* ---------- Body & Layout ---------- */

[data-color-scheme="dark"] body,
[data-color-scheme-resolved="dark"] body {
    background: var(--color-bg-body);
    color: var(--color-text-main);
}

[data-color-scheme="dark"] .app-content,
[data-color-scheme-resolved="dark"] .app-content {
    background: transparent;
    color: var(--color-text-main);
}

[data-dark="true"] .dashboard-shell {
    --dashboard-card-highlight: rgba(255, 255, 255, 0.08);
    --dashboard-active-tint: rgba(34, 211, 238, 0.12);
    --dashboard-active-tint-strong: rgba(74, 222, 128, 0.10);
    --dashboard-upcoming-tint: rgba(96, 165, 250, 0.10);
    --dashboard-completed-tint: rgba(52, 211, 153, 0.10);
    --dashboard-cancelled-tint: rgba(248, 113, 113, 0.10);
    --dashboard-cta-text: #0a0e1a;
}

/* ---------- Legacy Dark Mode Card Fixes ---------- */

[data-color-scheme="dark"] .card-header,
[data-color-scheme-resolved="dark"] .card-header {
    background: rgba(30, 41, 59, 0.5) !important;
    color: var(--color-text-main) !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

[data-color-scheme="dark"] .card-core,
[data-color-scheme-resolved="dark"] .card-core {
    background: rgba(30, 41, 59, 0.6);
    border: none;
}

/* ---------- Clinical Authority Component Dark Overrides ---------- */

[data-color-scheme="dark"] .form-control-core,
[data-color-scheme-resolved="dark"] .form-control-core {
    background: rgba(30, 41, 59, 0.7);
    border-color: transparent;
    color: var(--color-text-main);
}

[data-color-scheme="dark"] .form-control-core:focus,
[data-color-scheme-resolved="dark"] .form-control-core:focus {
    background: rgba(20, 28, 48, 0.9);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15);
}

[data-color-scheme="dark"] .stat-card,
[data-color-scheme-resolved="dark"] .stat-card {
    background: rgba(30, 41, 59, 0.6);
    border-top-color: var(--color-primary);
}

[data-color-scheme="dark"] .stat-card .stat-value,
[data-color-scheme-resolved="dark"] .stat-card .stat-value {
    color: var(--color-primary);
}

[data-color-scheme="dark"] .stat-card .stat-label,
[data-color-scheme-resolved="dark"] .stat-card .stat-label {
    color: var(--color-text-muted);
}

[data-color-scheme="dark"] .empty-state,
[data-color-scheme-resolved="dark"] .empty-state {
    color: var(--color-text-muted);
}

/* ---------- Generic Dark Mode Fixes (Apply to All Themes) ---------- */

/* Form controls - ensure proper dark styling */
[data-color-scheme="dark"] input,
[data-color-scheme="dark"] select,
[data-color-scheme="dark"] textarea,
[data-color-scheme-resolved="dark"] input,
[data-color-scheme-resolved="dark"] select,
[data-color-scheme-resolved="dark"] textarea {
    background-color: #1e293b;
    color: #ffffff;
    border-color: #334155;
}

[data-color-scheme="dark"] input::placeholder,
[data-color-scheme="dark"] textarea::placeholder,
[data-color-scheme-resolved="dark"] input::placeholder,
[data-color-scheme-resolved="dark"] textarea::placeholder {
    color: #64748b;
}

/* Tables */
[data-color-scheme="dark"] .table-core,
[data-color-scheme-resolved="dark"] .table-core {
    color: #ffffff;
}

/* Links */
[data-color-scheme="dark"] a,
[data-color-scheme-resolved="dark"] a {
    color: #22d3ee;
}

/* Visit cards (patient detail history) */
[data-color-scheme="dark"] .visit-card,
[data-color-scheme-resolved="dark"] .visit-card {
    background: rgba(30, 35, 50, 0.5);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--color-text-main);
}

[data-color-scheme="dark"] .visit-card:hover,
[data-color-scheme-resolved="dark"] .visit-card:hover {
    background: rgba(35, 40, 55, 0.6);
    border-color: rgba(255, 255, 255, 0.15);
}

/* ---------- Glass Cards (The Recipe) ---------- */

[data-theme="modern"][data-color-scheme="dark"] .card-core,
[data-theme="modern"][data-color-scheme-resolved="dark"] .card-core {
    background: rgba(30, 35, 50, 0.5) !important;
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-top-color: rgba(255, 255, 255, 0.15) !important;
    border-radius: 20px !important;
    box-shadow:
        0 8px 32px 0 rgba(0, 0, 0, 0.37),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="modern"][data-color-scheme="dark"] .card-core:hover,
[data-theme="modern"][data-color-scheme-resolved="dark"] .card-core:hover {
    background: rgba(35, 40, 55, 0.6);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow:
        0 20px 40px 0 rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

[data-theme="modern"][data-color-scheme="dark"] .card-header,
[data-theme="modern"][data-color-scheme-resolved="dark"] .card-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: var(--color-text-main) !important;
    font-weight: 600;
}

/* ---------- Stat Cards - Glass with Gradient Accents ---------- */

[data-theme="modern"][data-color-scheme="dark"] .stat-card,
[data-theme="modern"][data-color-scheme-resolved="dark"] .stat-card {
    background: rgba(30, 35, 50, 0.5) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 24px !important;
    color: var(--color-text-main) !important;
}

/* Subtle gradient glow on top edge */
[data-theme="modern"][data-color-scheme="dark"] .stat-card::before,
[data-theme="modern"][data-color-scheme-resolved="dark"] .stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 2px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(34, 211, 238, 0.5) 50%,
            transparent 100%);
    border-radius: 2px;
}

[data-theme="modern"][data-color-scheme="dark"] .stat-card:hover,
[data-theme="modern"][data-color-scheme-resolved="dark"] .stat-card:hover {
    background: rgba(35, 42, 58, 0.65);
    border-color: rgba(34, 211, 238, 0.2);
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(34, 211, 238, 0.08);
}

[data-theme="modern"][data-color-scheme="dark"] .stat-label,
[data-theme="modern"][data-color-scheme-resolved="dark"] .stat-label {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

[data-theme="modern"][data-color-scheme="dark"] .stat-value,
[data-theme="modern"][data-color-scheme-resolved="dark"] .stat-value {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--color-text-main);
    line-height: 1.1;
    margin: 0.75rem 0;
}

[data-theme="modern"][data-color-scheme="dark"] .stat-card:nth-child(1) .stat-value {
    color: #22d3ee;
}

[data-theme="modern"][data-color-scheme="dark"] .stat-card:nth-child(2) .stat-value {
    color: #34d399;
}

[data-theme="modern"][data-color-scheme="dark"] .stat-card:nth-child(3) .stat-value {
    color: #a78bfa;
}

/* ---------- Quick Actions - Glass Cards ---------- */

[data-theme="modern"][data-color-scheme="dark"] .quick-action,
[data-theme="modern"][data-color-scheme-resolved="dark"] .quick-action {
    background: rgba(30, 35, 50, 0.4) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    color: var(--color-text-main) !important;
}

[data-theme="modern"][data-color-scheme="dark"] .quick-action:hover,
[data-theme="modern"][data-color-scheme-resolved="dark"] .quick-action:hover {
    background: rgba(35, 42, 58, 0.6);
    border-color: rgba(34, 211, 238, 0.25);
    box-shadow: 0 10px 30px -5px rgba(34, 211, 238, 0.15);
    transform: translateY(-2px);
}

[data-theme="modern"][data-color-scheme="dark"] .action-icon,
[data-theme="modern"][data-color-scheme-resolved="dark"] .action-icon {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ---------- Sidebar - Heavier Glass (Base Layer) ---------- */

[data-theme="modern"][data-color-scheme="dark"] .app-sidebar,
[data-theme="modern"][data-color-scheme-resolved="dark"] .app-sidebar {
    background: rgba(10, 14, 26, 0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="modern"][data-color-scheme="dark"] .sidebar-brand,
[data-theme="modern"][data-color-scheme-resolved="dark"] .sidebar-brand {
    color: var(--color-text-main);
    font-weight: 700;
}

[data-theme="modern"][data-color-scheme="dark"] .nav-item,
[data-theme="modern"][data-color-scheme-resolved="dark"] .nav-item {
    color: var(--color-text-muted);
    border-radius: 12px;
    margin: 0.25rem 0.75rem;
    transition: all 0.2s ease;
}

[data-theme="modern"][data-color-scheme="dark"] .nav-item:hover,
[data-theme="modern"][data-color-scheme-resolved="dark"] .nav-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-main);
}

[data-theme="modern"][data-color-scheme="dark"] .nav-item.active,
[data-theme="modern"][data-color-scheme-resolved="dark"] .nav-item.active {
    background: rgba(34, 211, 238, 0.15);
    color: var(--color-primary);
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.1);
}

/* ---------- Tables - Glass Rows ---------- */

[data-theme="modern"][data-color-scheme="dark"] .table-core th,
[data-theme="modern"][data-color-scheme-resolved="dark"] .table-core th {
    background: transparent;
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: none;
    padding: 1rem;
}

[data-theme="modern"][data-color-scheme="dark"] .table-core tbody tr,
[data-theme="modern"][data-color-scheme-resolved="dark"] .table-core tbody tr {
    background: rgba(30, 35, 50, 0.3);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    transition: all 0.2s ease;
}

[data-theme="modern"][data-color-scheme="dark"] .table-core tbody tr:hover,
[data-theme="modern"][data-color-scheme-resolved="dark"] .table-core tbody tr:hover {
    background: rgba(35, 42, 58, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="modern"][data-color-scheme="dark"] .table-core td,
[data-theme="modern"][data-color-scheme-resolved="dark"] .table-core td {
    border: none;
    color: var(--color-text-main);
    padding: 1rem;
}

/* ---------- Forms - Glass Inputs ---------- */

[data-theme="modern"][data-color-scheme="dark"] .form-control-core,
[data-theme="modern"][data-color-scheme-resolved="dark"] .form-control-core {
    background: rgba(20, 25, 40, 0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: var(--color-text-main);
    padding: 0.875rem 1rem;
    font-size: 0.9375rem;
    transition: all 0.2s ease;
}

[data-theme="modern"][data-color-scheme="dark"] .form-control-core:focus,
[data-theme="modern"][data-color-scheme-resolved="dark"] .form-control-core:focus {
    background: rgba(25, 30, 45, 0.8);
    border-color: rgba(34, 211, 238, 0.4);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.1);
    outline: none;
}

[data-theme="modern"][data-color-scheme="dark"] .form-control-core::placeholder,
[data-theme="modern"][data-color-scheme-resolved="dark"] .form-control-core::placeholder {
    color: var(--color-text-muted);
}

/* ---------- Buttons - Glass Style ---------- */

[data-theme="modern"][data-color-scheme="dark"] .btn-primary,
[data-theme="modern"][data-color-scheme-resolved="dark"] .btn-primary {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.9), rgba(6, 182, 212, 0.9));
    border: 1px solid rgba(34, 211, 238, 0.3);
    border-radius: 12px;
    color: #0a0e1a;
    font-weight: 600;
    box-shadow:
        0 4px 6px -1px rgba(34, 211, 238, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.2s ease;
}

[data-theme="modern"][data-color-scheme="dark"] .btn-primary:hover,
[data-theme="modern"][data-color-scheme-resolved="dark"] .btn-primary:hover {
    background: linear-gradient(135deg, rgba(34, 211, 238, 1), rgba(6, 182, 212, 1));
    box-shadow:
        0 10px 15px -3px rgba(34, 211, 238, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

[data-theme="modern"][data-color-scheme="dark"] .btn-secondary,
[data-theme="modern"][data-color-scheme-resolved="dark"] .btn-secondary {
    background: rgba(30, 35, 50, 0.5);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: var(--color-text-main);
    transition: all 0.2s ease;
}

[data-theme="modern"][data-color-scheme="dark"] .btn-secondary:hover,
[data-theme="modern"][data-color-scheme-resolved="dark"] .btn-secondary:hover {
    background: rgba(40, 45, 60, 0.6);
    border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="modern"][data-color-scheme="dark"] .btn-success,
[data-theme="modern"][data-color-scheme-resolved="dark"] .btn-success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.9), rgba(5, 150, 105, 0.9));
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 12px;
    color: #ffffff;
    font-weight: 600;
    box-shadow:
        0 4px 6px -1px rgba(16, 185, 129, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.2s ease;
}

[data-theme="modern"][data-color-scheme="dark"] .btn-success:hover,
[data-theme="modern"][data-color-scheme-resolved="dark"] .btn-success:hover {
    background: linear-gradient(135deg, rgba(16, 185, 129, 1), rgba(5, 150, 105, 1));
    box-shadow:
        0 10px 15px -3px rgba(16, 185, 129, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

/* ---------- Alerts - Glass Style ---------- */

[data-theme="modern"][data-color-scheme="dark"] .alert-success,
[data-theme="modern"][data-color-scheme-resolved="dark"] .alert-success {
    background: rgba(16, 185, 129, 0.1);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: #34d399;
}

[data-theme="modern"][data-color-scheme="dark"] .alert-error,
[data-theme="modern"][data-color-scheme-resolved="dark"] .alert-error {
    background: rgba(239, 68, 68, 0.1);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #f87171;
}

[data-theme="modern"][data-color-scheme="dark"] .alert-warning,
[data-theme="modern"][data-color-scheme-resolved="dark"] .alert-warning {
    background: rgba(245, 158, 11, 0.1);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

[data-theme="modern"][data-color-scheme="dark"] .alert-info,
[data-theme="modern"][data-color-scheme-resolved="dark"] .alert-info {
    background: rgba(34, 211, 238, 0.1);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(34, 211, 238, 0.2);
    color: #22d3ee;
}

/* ---------- Theme Panel - Glass Style ---------- */

[data-theme="modern"][data-color-scheme="dark"] .sidebar-theme,
[data-theme="modern"][data-color-scheme-resolved="dark"] .sidebar-theme {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Aurora toggle — visible only in dark mode */
[data-theme="modern"][data-color-scheme="dark"] .sidebar-aurora-btn,
[data-theme="modern"][data-color-scheme-resolved="dark"] .sidebar-aurora-btn {
    display: flex;
}

/* Aurora toggle active glow (when aurora is ON) */
[data-aurora="on"][data-color-scheme="dark"] .sidebar-aurora-btn,
[data-aurora="on"][data-color-scheme-resolved="dark"] .sidebar-aurora-btn {
    background: rgba(74, 222, 128, 0.15);
    border-color: rgba(74, 222, 128, 0.35);
    box-shadow: 0 0 12px rgba(74, 222, 128, 0.2);
}

[data-aurora="on"][data-color-scheme="dark"] .sidebar-aurora-btn:hover,
[data-aurora="on"][data-color-scheme-resolved="dark"] .sidebar-aurora-btn:hover {
    background: rgba(74, 222, 128, 0.22);
    border-color: rgba(74, 222, 128, 0.45);
    box-shadow: 0 0 16px rgba(74, 222, 128, 0.3);
}

[data-aurora="off"][data-color-scheme="dark"] .sidebar-aurora-btn,
[data-aurora="off"][data-color-scheme-resolved="dark"] .sidebar-aurora-btn {
    opacity: 0.5;
}

[data-aurora="off"][data-color-scheme="dark"] .sidebar-aurora-btn:hover,
[data-aurora="off"][data-color-scheme-resolved="dark"] .sidebar-aurora-btn:hover {
    opacity: 0.75;
}

[data-theme="modern"][data-color-scheme="dark"] .theme-panel,
[data-theme="modern"][data-color-scheme-resolved="dark"] .theme-panel {
    background: rgba(20, 25, 40, 0.5);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
}

[data-theme="modern"][data-color-scheme="dark"] .theme-label,
[data-theme="modern"][data-color-scheme-resolved="dark"] .theme-label {
    color: var(--color-text-muted);
}

/* ---------- Glass Components - Dark Mode ---------- */

[data-theme="modern"][data-color-scheme="dark"] .glass-card,
[data-theme="modern"][data-color-scheme-resolved="dark"] .glass-card {
    background: rgba(30, 35, 50, 0.5) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow:
        0 8px 32px 0 rgba(0, 0, 0, 0.37),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="modern"][data-color-scheme="dark"] .glass-card:hover,
[data-theme="modern"][data-color-scheme-resolved="dark"] .glass-card:hover {
    background: rgba(35, 40, 55, 0.6);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow:
        0 20px 40px 0 rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-theme="modern"][data-color-scheme="dark"] .glass-header,
[data-theme="modern"][data-color-scheme-resolved="dark"] .glass-header {
    background: rgba(255, 255, 255, 0.04) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: var(--color-text-main) !important;
}

[data-theme="modern"][data-color-scheme="dark"] .glass-stat-card,
[data-theme="modern"][data-color-scheme-resolved="dark"] .glass-stat-card {
    background: rgba(30, 35, 50, 0.5) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--color-text-main) !important;
}

[data-theme="modern"][data-color-scheme="dark"] .glass-stat-card:hover,
[data-theme="modern"][data-color-scheme-resolved="dark"] .glass-stat-card:hover {
    background: rgba(35, 42, 58, 0.65);
    border-color: rgba(34, 211, 238, 0.2);
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(34, 211, 238, 0.08);
}

[data-theme="modern"][data-color-scheme="dark"] .glass-table th,
[data-theme="modern"][data-color-scheme-resolved="dark"] .glass-table th {
    color: var(--color-text-muted);
    border: none;
}

[data-theme="modern"][data-color-scheme="dark"] .glass-table tbody tr,
[data-theme="modern"][data-color-scheme-resolved="dark"] .glass-table tbody tr {
    background: rgba(30, 35, 50, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

[data-theme="modern"][data-color-scheme="dark"] .glass-table tbody tr:hover,
[data-theme="modern"][data-color-scheme-resolved="dark"] .glass-table tbody tr:hover {
    background: rgba(35, 42, 58, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="modern"][data-color-scheme="dark"] .glass-table td,
[data-theme="modern"][data-color-scheme-resolved="dark"] .glass-table td {
    border: none;
    color: var(--color-text-main);
}

[data-theme="modern"][data-color-scheme="dark"] .glass-input,
[data-theme="modern"][data-color-scheme-resolved="dark"] .glass-input {
    background: rgba(20, 25, 40, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--color-text-main);
}

[data-theme="modern"][data-color-scheme="dark"] .glass-input:focus,
[data-theme="modern"][data-color-scheme-resolved="dark"] .glass-input:focus {
    background: rgba(25, 30, 45, 0.8);
    border-color: rgba(34, 211, 238, 0.4);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.1);
}

[data-theme="modern"][data-color-scheme="dark"] .glass-btn,
[data-theme="modern"][data-color-scheme-resolved="dark"] .glass-btn {
    background: rgba(30, 35, 50, 0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    text-decoration: none;
}

[data-theme="modern"][data-color-scheme="dark"] .glass-btn:hover,
[data-theme="modern"][data-color-scheme-resolved="dark"] .glass-btn:hover {
    background: rgba(40, 45, 60, 0.8);
    border-color: rgba(34, 211, 238, 0.3);
    color: #22d3ee;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

[data-theme="modern"][data-color-scheme="dark"] .glass-btn-primary,
[data-theme="modern"][data-color-scheme-resolved="dark"] .glass-btn-primary {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.9), rgba(6, 182, 212, 0.9));
    border: 1px solid rgba(34, 211, 238, 0.3);
    color: #0a0e1a;
    box-shadow:
        0 4px 6px -1px rgba(34, 211, 238, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

[data-theme="modern"][data-color-scheme="dark"] .glass-btn-primary:hover,
[data-theme="modern"][data-color-scheme-resolved="dark"] .glass-btn-primary:hover {
    background: linear-gradient(135deg, rgba(34, 211, 238, 1), rgba(6, 182, 212, 1));
    box-shadow:
        0 10px 15px -3px rgba(34, 211, 238, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* ---------- Links - Pure White ---------- */

[data-theme="modern"][data-color-scheme="dark"] a,
[data-theme="modern"][data-color-scheme-resolved="dark"] a {
    color: var(--color-primary);
    transition: color 0.2s ease;
}

[data-theme="modern"][data-color-scheme="dark"] a:hover,
[data-theme="modern"][data-color-scheme-resolved="dark"] a:hover {
    color: var(--color-primary-hover);
}

/* ---------- Header - Glass Style ---------- */

[data-theme="modern"][data-color-scheme="dark"] .app-header,
[data-theme="modern"][data-color-scheme-resolved="dark"] .app-header {
    background: rgba(10, 14, 26, 0.8);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="modern"][data-color-scheme="dark"] .page-title,
[data-theme="modern"][data-color-scheme-resolved="dark"] .page-title {
    color: var(--color-text-main);
    font-weight: 600;
}

/* ---------- Filter Bar - Glass Dark ---------- */

[data-theme="modern"][data-color-scheme="dark"] .filter-bar,
[data-theme="modern"][data-color-scheme-resolved="dark"] .filter-bar {
    background: rgba(30, 35, 50, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

[data-theme="modern"][data-color-scheme="dark"] .glass-filter-bar,
[data-theme="modern"][data-color-scheme-resolved="dark"] .glass-filter-bar {
    background: rgba(30, 35, 50, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* ---------- Modal - Glass Style ---------- */

[data-theme="modern"][data-color-scheme="dark"] .modal-content,
[data-theme="modern"][data-color-scheme-resolved="dark"] .modal-content {
    background: rgba(20, 25, 40, 0.95);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

[data-theme="modern"][data-color-scheme="dark"] .modal-header,
[data-theme="modern"][data-color-scheme-resolved="dark"] .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="modern"][data-color-scheme="dark"] .modal-footer,
[data-theme="modern"][data-color-scheme-resolved="dark"] .modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ---------- Service/Medicine Tiles (Visit Form) ---------- */

[data-theme="modern"][data-color-scheme="dark"] .service-tile,
[data-theme="modern"][data-color-scheme-resolved="dark"] .service-tile {
    background: rgba(30, 35, 50, 0.5);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    color: var(--color-text-main);
    transition: all 0.2s ease;
}

[data-theme="modern"][data-color-scheme="dark"] .service-tile:hover,
[data-theme="modern"][data-color-scheme-resolved="dark"] .service-tile:hover {
    background: rgba(35, 42, 58, 0.7);
    border-color: rgba(34, 211, 238, 0.3);
    box-shadow: 0 4px 12px rgba(34, 211, 238, 0.1);
}

[data-theme="modern"][data-color-scheme="dark"] .service-tile:active,
[data-theme="modern"][data-color-scheme-resolved="dark"] .service-tile:active {
    background: rgba(25, 30, 42, 0.8);
}

/* Medicine tiles with accent border */
[data-theme="modern"][data-color-scheme="dark"] .service-tile[data-category="MEDICINE"],
[data-theme="modern"][data-color-scheme-resolved="dark"] .service-tile[data-category="MEDICINE"] {
    border-left: 3px solid rgba(251, 191, 36, 0.6);
}

/* Medicine tile price styling */
[data-theme="modern"][data-color-scheme="dark"] .service-tile .tile-price,
[data-theme="modern"][data-color-scheme-resolved="dark"] .service-tile .tile-price {
    color: var(--color-text-muted);
}

/* Selected state for tiles */
[data-theme="modern"][data-color-scheme="dark"] .service-tile.selected,
[data-theme="modern"][data-color-scheme-resolved="dark"] .service-tile.selected {
    background: rgba(34, 211, 238, 0.15);
    border-color: rgba(34, 211, 238, 0.5);
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.2);
}

/* Search input in visit form */
[data-theme="modern"][data-color-scheme="dark"] .service-search,
[data-theme="modern"][data-color-scheme-resolved="dark"] .service-search,
[data-theme="modern"][data-color-scheme="dark"] input[type="search"].service-search,
[data-theme="modern"][data-color-scheme-resolved="dark"] input[type="search"].service-search,
[data-theme="modern"][data-color-scheme="dark"] #serviceSearch,
[data-theme="modern"][data-color-scheme-resolved="dark"] #serviceSearch {
    background: rgba(30, 35, 50, 0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: var(--color-text-main);
}

[data-theme="modern"][data-color-scheme="dark"] .service-search::placeholder,
[data-theme="modern"][data-color-scheme-resolved="dark"] .service-search::placeholder,
[data-theme="modern"][data-color-scheme="dark"] #serviceSearch::placeholder,
[data-theme="modern"][data-color-scheme-resolved="dark"] #serviceSearch::placeholder {
    color: var(--color-text-muted);
}

/* Visit form card headers */
[data-theme="modern"][data-color-scheme="dark"] .visit-summary-header,
[data-theme="modern"][data-color-scheme-resolved="dark"] .visit-summary-header {
    background: rgba(30, 35, 50, 0.6);
    backdrop-filter: blur(16px);
}

/* Visit form service picker body */
[data-theme="modern"][data-color-scheme="dark"] .service-picker-body,
[data-theme="modern"][data-color-scheme-resolved="dark"] .service-picker-body {
    background: transparent;
}

/* Billing table headers in visit form */
[data-theme="modern"][data-color-scheme="dark"] tr#servicesHeader,
[data-theme="modern"][data-color-scheme-resolved="dark"] tr#servicesHeader {
    background: rgba(34, 211, 238, 0.1);
}

[data-theme="modern"][data-color-scheme="dark"] tr#servicesHeader td,
[data-theme="modern"][data-color-scheme-resolved="dark"] tr#servicesHeader td {
    color: #22d3ee;
}

[data-theme="modern"][data-color-scheme="dark"] tr#medicinesHeader,
[data-theme="modern"][data-color-scheme-resolved="dark"] tr#medicinesHeader {
    background: rgba(251, 191, 36, 0.1);
}

[data-theme="modern"][data-color-scheme="dark"] tr#medicinesHeader td,
[data-theme="modern"][data-color-scheme-resolved="dark"] tr#medicinesHeader td {
    color: #fbbf24;
}

/* Billing footer in visit form */
[data-theme="modern"][data-color-scheme="dark"] .visit-summary-footer,
[data-theme="modern"][data-color-scheme-resolved="dark"] .visit-summary-footer {
    background: rgba(30, 35, 50, 0.6);
    backdrop-filter: blur(16px);
}

/* ---------- List Items ---------- */

[data-theme="modern"][data-color-scheme="dark"] .list-item,
[data-theme="modern"][data-color-scheme-resolved="dark"] .list-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: var(--color-text-main);
    transition: all 0.2s ease;
}

[data-theme="modern"][data-color-scheme="dark"] .list-item:hover,
[data-theme="modern"][data-color-scheme-resolved="dark"] .list-item:hover {
    background: rgba(255, 255, 255, 0.03);
}

[data-theme="modern"][data-color-scheme="dark"] .list-item:last-child,
[data-theme="modern"][data-color-scheme-resolved="dark"] .list-item:last-child {
    border-bottom: none;
}

/* ---------- Bootstrap Outline Buttons Dark Mode ---------- */

[data-theme="modern"][data-color-scheme="dark"] .btn-outline-primary,
[data-theme="modern"][data-color-scheme-resolved="dark"] .btn-outline-primary {
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    background-color: transparent !important;
}

[data-theme="modern"][data-color-scheme="dark"] .btn-outline-primary:hover,
[data-theme="modern"][data-color-scheme-resolved="dark"] .btn-outline-primary:hover {
    color: var(--color-bg-body) !important;
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

[data-theme="modern"][data-color-scheme="dark"] .btn-outline-secondary,
[data-theme="modern"][data-color-scheme-resolved="dark"] .btn-outline-secondary {
    color: var(--color-text-muted) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    background-color: transparent !important;
}

[data-theme="modern"][data-color-scheme="dark"] .btn-outline-secondary:hover,
[data-theme="modern"][data-color-scheme-resolved="dark"] .btn-outline-secondary:hover {
    color: var(--color-text-main) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}


/* ---------- Bootstrap Text Classes Dark Mode ---------- */

[data-theme="modern"][data-color-scheme="dark"] .text-muted,
[data-theme="modern"][data-color-scheme-resolved="dark"] .text-muted {
    color: var(--color-text-muted) !important;
}

[data-theme="modern"][data-color-scheme="dark"] .text-dark,
[data-theme="modern"][data-color-scheme-resolved="dark"] .text-dark {
    color: var(--color-text-main) !important;
}

[data-theme="modern"][data-color-scheme="dark"] .text-black,
[data-theme="modern"][data-color-scheme-resolved="dark"] .text-black {
    color: var(--color-text-main) !important;
}

[data-theme="modern"][data-color-scheme="dark"] .text-body,
[data-theme="modern"][data-color-scheme-resolved="dark"] .text-body {
    color: var(--color-text-main) !important;
}

[data-theme="modern"][data-color-scheme="dark"] .text-secondary,
[data-theme="modern"][data-color-scheme-resolved="dark"] .text-secondary {
    color: var(--color-text-muted) !important;
}


/* =============================================================================
   BOOTSTRAP UTILITY CLASS OVERRIDES
   ============================================================================= */

[data-color-scheme="dark"] .text-success,
[data-color-scheme-resolved="dark"] .text-success {
    color: #34d399 !important;
}

[data-color-scheme="dark"] .text-danger,
[data-color-scheme-resolved="dark"] .text-danger {
    color: #f87171 !important;
}

[data-color-scheme="dark"] .text-primary,
[data-color-scheme-resolved="dark"] .text-primary {
    color: var(--color-primary) !important;
}

[data-color-scheme="dark"] .text-info,
[data-color-scheme-resolved="dark"] .text-info {
    color: #22d3ee !important;
}

[data-color-scheme="dark"] .text-warning,
[data-color-scheme-resolved="dark"] .text-warning {
    color: #fbbf24 !important;
}

[data-color-scheme="dark"] .bg-primary,
[data-color-scheme-resolved="dark"] .bg-primary {
    background-color: rgba(34, 211, 238, 0.2) !important;
}

[data-color-scheme="dark"] .bg-info,
[data-color-scheme-resolved="dark"] .bg-info {
    background-color: rgba(6, 182, 212, 0.2) !important;
}

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

[data-color-scheme="dark"] .bg-danger,
[data-color-scheme-resolved="dark"] .bg-danger {
    background-color: rgba(239, 68, 68, 0.2) !important;
}

[data-color-scheme="dark"] .bg-warning,
[data-color-scheme-resolved="dark"] .bg-warning {
    background-color: rgba(245, 158, 11, 0.2) !important;
}

[data-color-scheme="dark"] .bg-secondary,
[data-color-scheme-resolved="dark"] .bg-secondary {
    background-color: rgba(100, 116, 139, 0.3) !important;
}

[data-color-scheme="dark"] .bg-white,
[data-color-scheme-resolved="dark"] .bg-white {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

[data-color-scheme="dark"] .badge,
[data-color-scheme-resolved="dark"] .badge {
    --bs-badge-color: var(--color-text-main);
}

/* =============================================================================
   COMPONENT DARK MODE FIXES
   ============================================================================= */

[data-color-scheme="dark"] .card-header,
[data-color-scheme-resolved="dark"] .card-header {
    background: rgba(30, 41, 59, 0.5) !important;
}

[data-color-scheme="dark"] .table-core th,
[data-color-scheme-resolved="dark"] .table-core th {
    background: rgba(30, 35, 50, 0.6);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-color-scheme="dark"] .table-core td,
[data-color-scheme-resolved="dark"] .table-core td {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-color-scheme="dark"] .table-core tbody tr:hover,
[data-color-scheme-resolved="dark"] .table-core tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

[data-color-scheme="dark"] hr,
[data-color-scheme-resolved="dark"] hr {
    border-color: rgba(255, 255, 255, 0.1);
    opacity: 1;
}

/* =============================================================================
   STATUS BADGE DARK MODE
   ============================================================================= */

[data-color-scheme="dark"] .status-completed,
[data-color-scheme="dark"] .status-paid,
[data-color-scheme-resolved="dark"] .status-completed,
[data-color-scheme-resolved="dark"] .status-paid {
    background: var(--color-status-completed-bg);
    color: var(--color-status-completed-text);
    border-color: rgba(16, 185, 129, 0.3);
}

[data-color-scheme="dark"] .status-pending,
[data-color-scheme="dark"] .status-partial,
[data-color-scheme="dark"] .status-waiting,
[data-color-scheme="dark"] .status-in_progress,
[data-color-scheme-resolved="dark"] .status-pending,
[data-color-scheme-resolved="dark"] .status-partial,
[data-color-scheme-resolved="dark"] .status-waiting,
[data-color-scheme-resolved="dark"] .status-in_progress {
    background: var(--color-status-pending-bg);
    color: var(--color-status-pending-text);
    border-color: rgba(245, 158, 11, 0.3);
}

[data-color-scheme="dark"] .status-planned,
[data-color-scheme="dark"] .status-requested,
[data-color-scheme-resolved="dark"] .status-planned,
[data-color-scheme-resolved="dark"] .status-requested {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.3);
}

[data-color-scheme="dark"] .status-cancelled,
[data-color-scheme="dark"] .status-due,
[data-color-scheme="dark"] .status-no_show,
[data-color-scheme="dark"] .status-overdue,
[data-color-scheme-resolved="dark"] .status-cancelled,
[data-color-scheme-resolved="dark"] .status-due,
[data-color-scheme-resolved="dark"] .status-no_show,
[data-color-scheme-resolved="dark"] .status-overdue {
    background: var(--color-status-cancelled-bg);
    color: var(--color-status-cancelled-text);
    border-color: rgba(239, 68, 68, 0.3);
}

/* =============================================================================
   TOMSELECT DARK MODE
   ============================================================================= */

[data-color-scheme="dark"] .ts-wrapper .ts-control,
[data-color-scheme-resolved="dark"] .ts-wrapper .ts-control {
    background: rgba(30, 35, 50, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--color-text-main) !important;
}

[data-color-scheme="dark"] .ts-wrapper .ts-control input,
[data-color-scheme-resolved="dark"] .ts-wrapper .ts-control input {
    color: var(--color-text-main) !important;
}

[data-color-scheme="dark"] .ts-dropdown,
[data-color-scheme-resolved="dark"] .ts-dropdown {
    background: rgba(20, 25, 40, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-color-scheme="dark"] .ts-dropdown .option,
[data-color-scheme-resolved="dark"] .ts-dropdown .option {
    color: var(--color-text-main) !important;
}

[data-color-scheme="dark"] .ts-dropdown .option.active,
[data-color-scheme-resolved="dark"] .ts-dropdown .option.active {
    background: rgba(34, 211, 238, 0.2) !important;
    color: var(--color-primary) !important;
}


/* =============================================================================
   BADGE SYSTEM DARK MODE OVERRIDES
   ============================================================================= */

/* Payment Method Badges - Dark Mode */
[data-color-scheme="dark"] .badge-payment,
[data-color-scheme-resolved="dark"] .badge-payment {
    background: var(--color-badge-payment-bg);
    color: var(--color-badge-payment-text);
}

[data-color-scheme="dark"] .badge-refund,
[data-color-scheme-resolved="dark"] .badge-refund {
    background: var(--color-badge-refund-bg);
    color: var(--color-badge-refund-text);
}

[data-color-scheme="dark"] .badge-cash,
[data-color-scheme-resolved="dark"] .badge-cash {
    background: var(--color-badge-cash-bg);
    color: var(--color-badge-cash-text);
}

[data-color-scheme="dark"] .badge-mbank,
[data-color-scheme-resolved="dark"] .badge-mbank {
    background: var(--color-badge-mbank-bg);
    color: var(--color-badge-mbank-text);
}

[data-color-scheme="dark"] .badge-bakai,
[data-color-scheme-resolved="dark"] .badge-bakai {
    background: var(--color-badge-bakai-bg);
    color: var(--color-badge-bakai-text);
}

[data-color-scheme="dark"] .badge-mbusiness,
[data-color-scheme-resolved="dark"] .badge-mbusiness {
    background: var(--color-badge-mbusiness-bg);
    color: var(--color-badge-mbusiness-text);
}

[data-color-scheme="dark"] .badge-visa,
[data-color-scheme-resolved="dark"] .badge-visa {
    background: var(--color-badge-visa-bg);
    color: var(--color-badge-visa-text);
}

/* Visit/Record Type Badges - Dark Mode */
[data-color-scheme="dark"] .badge-operation,
[data-color-scheme-resolved="dark"] .badge-operation {
    background: var(--color-badge-operation-bg);
    color: var(--color-badge-operation-text);
}

[data-color-scheme="dark"] .badge-repeat,
[data-color-scheme-resolved="dark"] .badge-repeat {
    background: var(--color-badge-repeat-bg);
    color: var(--color-badge-repeat-text);
}

[data-color-scheme="dark"] .badge-note,
[data-color-scheme-resolved="dark"] .badge-note {
    background: var(--color-badge-note-bg);
    color: var(--color-badge-note-text);
}

[data-color-scheme="dark"] .badge-neutral,
[data-color-scheme-resolved="dark"] .badge-neutral {
    background: var(--color-badge-neutral-bg);
    color: var(--color-badge-neutral-text);
}

/* Card Headers - Dark Mode */
[data-color-scheme="dark"] .card-header-danger,
[data-color-scheme-resolved="dark"] .card-header-danger {
    background: var(--color-card-header-danger-bg);
    color: var(--color-card-header-danger-text);
    border-color: var(--color-card-header-danger-border);
}

[data-color-scheme="dark"] .card-header-warning,
[data-color-scheme-resolved="dark"] .card-header-warning {
    background: var(--color-card-header-warning-bg);
    color: var(--color-card-header-warning-text);
    border-color: var(--color-card-header-warning-border);
}

[data-color-scheme="dark"] .card-header-info,
[data-color-scheme-resolved="dark"] .card-header-info {
    background: var(--color-card-header-info-bg);
    color: var(--color-card-header-info-text);
    border-color: var(--color-card-header-info-border);
}

/* Services/Medicines Headers - Dark Mode */
[data-color-scheme="dark"] .services-header,
[data-color-scheme-resolved="dark"] .services-header {
    background: var(--color-services-header-bg);
    color: var(--color-services-header-text);
}

[data-color-scheme="dark"] .medicines-header,
[data-color-scheme-resolved="dark"] .medicines-header {
    background: var(--color-medicines-header-bg);
    color: var(--color-medicines-header-text);
}

/* Balance Colors - CSS Variables */
:root {
    --color-balance-positive: #28a745;
    --color-balance-negative: #ef4444;
}

[data-color-scheme="dark"],
[data-color-scheme-resolved="dark"] {
    --color-balance-positive: #34d399;
    --color-balance-negative: #f87171;
}



/* ==========================================================================
   AURORA BOREALIS — Dark Mode Background (Aceternity-style)
   ──────────────────────────────────────────────────────────────
   Oversized repeating gradient layers with continuous background-position
   animation. Heavy blur + mix-blend-mode screen = flowing organic aurora.
   Two layers move at different speeds for depth.
   Controlled by data-aurora="on" attribute (toggle in sidebar).
   ========================================================================== */

/* ── Custom properties for aurora colors ── */
[data-theme="modern"][data-color-scheme="dark"],
[data-theme="modern"][data-color-scheme-resolved="dark"] {
    --aurora-green: rgba(74, 222, 128, 0.35);
    --aurora-emerald: rgba(16, 185, 129, 0.30);
    --aurora-teal: rgba(34, 211, 238, 0.28);
    --aurora-cyan: rgba(6, 182, 212, 0.22);
    --aurora-violet: rgba(139, 92, 246, 0.25);
    --aurora-purple: rgba(168, 85, 247, 0.20);
    --aurora-sky: rgba(56, 189, 248, 0.18);
}

/* ── Base night sky (always, regardless of aurora toggle) ── */
[data-theme="modern"][data-color-scheme="dark"] .app-shell,
[data-theme="modern"][data-color-scheme-resolved="dark"] .app-shell {
    background: linear-gradient(180deg,
            #02050f 0%,
            #040c18 18%,
            #061222 42%,
            #0a1830 64%,
            #071420 82%,
            #030a14 100%) !important;
    position: relative;
    overflow: hidden;
}

/* ── Aurora layer 1 — main green/teal curtains (flows right) ── */
[data-aurora="on"][data-color-scheme="dark"] .app-shell::before,
[data-aurora="on"][data-color-scheme-resolved="dark"] .app-shell::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    pointer-events: none;
    z-index: 0;
    background-image:
        repeating-radial-gradient(ellipse 100% 45% at 60% 40%,
            var(--aurora-green) 0%,
            transparent 12%,
            var(--aurora-teal) 18%,
            transparent 28%,
            var(--aurora-emerald) 35%,
            transparent 45%),
        repeating-radial-gradient(ellipse 80% 50% at 30% 30%,
            var(--aurora-cyan) 0%,
            transparent 10%,
            var(--aurora-green) 20%,
            transparent 32%,
            var(--aurora-teal) 40%,
            transparent 50%),
        repeating-radial-gradient(ellipse 90% 40% at 70% 55%,
            var(--aurora-emerald) 0%,
            transparent 14%,
            var(--aurora-sky) 22%,
            transparent 35%,
            var(--aurora-green) 42%,
            transparent 55%);
    background-size: 300% 200%;
    background-position: 50% 50%;
    filter: blur(18px) saturate(150%);
    opacity: 0.55;
    mix-blend-mode: screen;
    animation: aurora-flow 60s linear infinite;
    will-change: background-position;
}

/* ── Aurora layer 2 — violet crowns + secondary glow (flows left) ── */
[data-aurora="on"][data-color-scheme="dark"] .app-shell::after,
[data-aurora="on"][data-color-scheme-resolved="dark"] .app-shell::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    pointer-events: none;
    z-index: 0;
    background-image:
        repeating-radial-gradient(ellipse 70% 55% at 50% 20%,
            var(--aurora-violet) 0%,
            transparent 12%,
            var(--aurora-purple) 20%,
            transparent 30%,
            var(--aurora-green) 38%,
            transparent 48%),
        repeating-radial-gradient(ellipse 100% 35% at 40% 60%,
            var(--aurora-teal) 0%,
            transparent 10%,
            var(--aurora-violet) 18%,
            transparent 28%,
            var(--aurora-emerald) 35%,
            transparent 45%),
        repeating-radial-gradient(ellipse 85% 45% at 65% 35%,
            var(--aurora-purple) 0%,
            transparent 15%,
            var(--aurora-sky) 25%,
            transparent 38%,
            var(--aurora-cyan) 45%,
            transparent 55%);
    background-size: 200% 300%;
    background-position: 50% 50%;
    filter: blur(24px) saturate(130%);
    opacity: 0.45;
    mix-blend-mode: screen;
    animation: aurora-flow-reverse 80s linear infinite;
    will-change: background-position;
}

/* ── Aurora OFF — hide pseudo-elements ── */
[data-aurora="off"][data-color-scheme="dark"] .app-shell::before,
[data-aurora="off"][data-color-scheme-resolved="dark"] .app-shell::before,
[data-aurora="off"][data-color-scheme="dark"] .app-shell::after,
[data-aurora="off"][data-color-scheme-resolved="dark"] .app-shell::after {
    content: none;
}

/* ── Content area — fully transparent, above aurora ── */
[data-theme="modern"][data-color-scheme="dark"] .app-content,
[data-theme="modern"][data-color-scheme-resolved="dark"] .app-content {
    background: transparent !important;
    animation: none !important;
    position: relative;
    z-index: 1;
}

/* ── Continuous flow — background-position travels across oversized canvas ── */
@keyframes aurora-flow {
    0% {
        background-position: 50% 50%, 50% 50%, 50% 50%;
    }

    100% {
        background-position: 350% 50%, 350% 50%, 350% 50%;
    }
}

@keyframes aurora-flow-reverse {
    0% {
        background-position: 50% 50%, 50% 50%, 50% 50%;
    }

    100% {
        background-position: -250% 50%, -250% 50%, -250% 50%;
    }
}

/* ── Reduced-motion ── */
@media (prefers-reduced-motion: reduce) {

    [data-aurora="on"][data-color-scheme="dark"] .app-shell::before,
    [data-aurora="on"][data-color-scheme-resolved="dark"] .app-shell::before,
    [data-aurora="on"][data-color-scheme="dark"] .app-shell::after,
    [data-aurora="on"][data-color-scheme-resolved="dark"] .app-shell::after {
        animation: none !important;
    }
}

[data-animations="reduced"] [data-aurora="on"][data-color-scheme="dark"] .app-shell::before,
[data-animations="reduced"] [data-aurora="on"][data-color-scheme-resolved="dark"] .app-shell::before {
    animation-duration: 180s !important;
}

[data-animations="reduced"] [data-aurora="on"][data-color-scheme="dark"] .app-shell::after,
[data-animations="reduced"] [data-aurora="on"][data-color-scheme-resolved="dark"] .app-shell::after {
    animation-duration: 240s !important;
}

[data-animations="none"] [data-aurora="on"][data-color-scheme="dark"] .app-shell::before,
[data-animations="none"] [data-aurora="on"][data-color-scheme-resolved="dark"] .app-shell::before,
[data-animations="none"] [data-aurora="on"][data-color-scheme="dark"] .app-shell::after,
[data-animations="none"] [data-aurora="on"][data-color-scheme-resolved="dark"] .app-shell::after {
    animation: none !important;
}

/* Dark mode refraction highlight — aurora-tinted */
[data-theme="modern"][data-color-scheme="dark"] .glass-refraction,
[data-theme="modern"][data-color-scheme-resolved="dark"] .glass-refraction {
    background: radial-gradient(400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
            rgba(74, 222, 128, 0.06) 0%,
            rgba(34, 211, 238, 0.03) 30%,
            transparent 60%);
}

/* Mobile nav — dark mode */
[data-color-scheme="dark"] .mobile-nav-bar,
[data-color-scheme-resolved="dark"] .mobile-nav-bar {
    background: var(--color-bg-surface);
    border-top-color: rgba(255, 255, 255, 0.08);
}

[data-color-scheme="dark"] .mobile-nav-item,
[data-color-scheme-resolved="dark"] .mobile-nav-item {
    color: var(--color-text-muted);
}

[data-color-scheme="dark"] .mobile-nav-item:hover,
[data-color-scheme="dark"] .mobile-nav-item:focus-visible,
[data-color-scheme-resolved="dark"] .mobile-nav-item:hover,
[data-color-scheme-resolved="dark"] .mobile-nav-item:focus-visible {
    background: rgba(99, 179, 237, 0.12);
}