/**
 * Dark mode overrides
 * For elements that need more than CSS variable swaps
 */

/* ===== General ===== */
[data-theme="dark"] .card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .summary-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* ===== Status Badges ===== */
[data-theme="dark"] .status-scheduled {
    background: #064e3b;
    color: #6ee7b7;
}

[data-theme="dark"] .status-pending {
    background: #7c2d12;
    color: #fdba74;
}

[data-theme="dark"] .badge {
    opacity: 0.95;
}

/* ===== Appointment Time ===== */
[data-theme="dark"] .appointment-time {
    background: #064e3b;
    color: #6ee7b7;
}

[data-theme="dark"] .appointment-time:hover {
    background: #065f46;
}

/* ===== Event Card Active ===== */
[data-theme="dark"] .event-card.active {
    background: linear-gradient(to bottom, var(--surface-alt) 0%, var(--surface) 100%);
}

/* ===== Highlight span ===== */
[data-theme="dark"] .detail-item span.highlight {
    background: #78350f;
    color: #fde68a;
}

/* ===== Charts ===== */
[data-theme="dark"] .chart-container {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* ===== Modals ===== */
[data-theme="dark"] .modal {
    background: rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .modal-content {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

/* ===== Buttons ===== */
[data-theme="dark"] .btn-secondary {
    background: #475569;
    color: #e2e8f0;
}

[data-theme="dark"] .btn-secondary:hover:not(:disabled) {
    background: #64748b;
}

[data-theme="dark"] .btn-primary:hover:not(:disabled) {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* ===== Scheduler drag states ===== */
[data-theme="dark"] .slot-body.drag-over-full {
    background: #450a0a;
    outline-color: #dc3545;
}

/* ===== Form group small text ===== */
[data-theme="dark"] .form-group small {
    color: var(--text-light);
}

/* ===== Users page inline bg override ===== */
[data-theme="dark"] .card[style*="background: #f5f5f5"] {
    background: var(--surface-alt) !important;
}

/* ===== Toast styles in dark mode ===== */
[data-theme="dark"] .toast {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* ===== Print - no dark mode in print ===== */
@media print {
    [data-theme="dark"] {
        --background: #ffffff;
        --surface: #ffffff;
        --surface-alt: #f5f5f5;
        --text: #1e293b;
        --text-light: #64748b;
        --border: #e2e8f0;
    }
}