/* Dark Mode Styles - Comprehensive System-Wide Implementation */
:root {
    --bg-color: #cbd5e1;
    --container-bg: #cbd5e1;
    --text-color: #2c3e50;
    --header-bg: #000000;
    --header-text: #c41e3a;
    --button-bg: #cbd5e1;
    --button-text: #c41e3a;
    --button-hover-bg: #b8c5d3;
    --border-color: rgba(255, 255, 255, 0.08);
    --shadow-color: rgba(0, 0, 0, 0.1);
    --link-color: #c41e3a;
    --quote-bg: #f8f9fa;
    --card-bg: #ffffff;
    --input-bg: #ffffff;
    --input-text: #333333;
}

[data-theme="dark"] {
    --bg-color: #1a1a1a;
    --container-bg: #2d2d2d;
    --text-color: #e0e0e0;
    --header-bg: #0a0a0a;
    --header-text: #ff4d6d;
    --button-bg: #3d3d3d;
    --button-text: #ff4d6d;
    --button-hover-bg: #4d4d4d;
    --border-color: rgba(255, 255, 255, 0.15);
    --shadow-color: rgba(0, 0, 0, 0.5);
    --link-color: #ff6b8a;
    --quote-bg: #3a3a3a;
    --card-bg: #2d2d2d;
    --input-bg: #3a3a3a;
    --input-text: #e0e0e0;
}

/* Base dark mode body styles */
[data-theme="dark"] body {
    background-color: var(--bg-color) !important;
    background-image: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
    color: var(--text-color) !important;
}

/* Bootstrap dark mode overrides */
[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-white {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] .bg-primary {
    background-color: #1e3a8a !important;
}

[data-theme="dark"] .navbar-dark.bg-primary {
    background-color: #1e3a8a !important;
}

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

[data-theme="dark"] .alert {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .alert-success {
    background-color: #1e4d2e !important;
    border-color: #28a745 !important;
}

[data-theme="dark"] .alert-danger {
    background-color: #4d1e1e !important;
    border-color: #dc3545 !important;
}

[data-theme="dark"] .btn-primary {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
}

[data-theme="dark"] .btn-secondary {
    background-color: #4b5563 !important;
    border-color: #4b5563 !important;
}

[data-theme="dark"] .btn-outline-light {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #e0e0e0 !important;
}

[data-theme="dark"] .btn-outline-secondary {
    background-color: transparent !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

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

[data-theme="dark"] .list-group-item {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

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

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

[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .table thead th {
    background-color: var(--button-bg) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] .modal-content {
    background-color: var(--container-bg) !important;
    color: var(--text-color) !important;
}

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

/* Custom class overrides */
[data-theme="dark"] .container {
    background: transparent !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] .site-header {
    background: var(--header-bg) !important;
    color: var(--header-text) !important;
}

[data-theme="dark"] .site-header .title {
    color: var(--header-text) !important;
}

[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 {
    color: var(--text-color) !important;
}

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

[data-theme="dark"] p, [data-theme="dark"] li, [data-theme="dark"] span, [data-theme="dark"] div {
    color: var(--text-color) !important;
}

[data-theme="dark"] a {
    color: var(--link-color) !important;
}

[data-theme="dark"] .site-nav .nav-btn,
[data-theme="dark"] .btn-bubble {
    background: var(--button-bg) !important;
    color: var(--button-text) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .site-nav .nav-btn:hover,
[data-theme="dark"] .btn-bubble:hover {
    background: var(--button-hover-bg) !important;
}

[data-theme="dark"] .top-actions a {
    color: var(--link-color) !important;
}

[data-theme="dark"] .contact-info {
    background: var(--container-bg) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] .jared-quote {
    background-color: var(--quote-bg) !important;
    color: var(--text-color) !important;
    border-left-color: var(--header-text) !important;
}

[data-theme="dark"] .quote-attribution {
    color: var(--text-color) !important;
}

/* Stats cards and gradient cards */
[data-theme="dark"] .stats-card {
    background: linear-gradient(135deg, #2d1b3d 0%, #1a1a2e 100%) !important;
    color: white !important;
}

[data-theme="dark"] .filter-section {
    background: var(--card-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .pcr-card,
[data-theme="dark"] .evaluation-card {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
    border-left-color: #2563eb !important;
}

/* File cards and grids */
[data-theme="dark"] .file-card {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] .file-card:hover {
    background: var(--button-hover-bg) !important;
    box-shadow: 0 4px 12px var(--shadow-color) !important;
}

[data-theme="dark"] .empty-state {
    color: var(--text-color) !important;
}

[data-theme="dark"] .stats-bar {
    background: var(--container-bg) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] .stat-item {
    color: var(--text-color) !important;
}

/* Page headers and sections */
[data-theme="dark"] .page-header {
    background: var(--container-bg) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] .form-section {
    background: var(--container-bg) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] .form-card {
    background: var(--quote-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .welcome-message {
    background: var(--quote-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* Category sections (user management) */
[data-theme="dark"] .category-section {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .category-header {
    background: var(--button-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* Badge overrides */
[data-theme="dark"] .badge,
[data-theme="dark"] .status-badge {
    background-color: var(--button-bg) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] .type-badge {
    background: var(--quote-bg) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] .performance-badge {
    background: #1e4d2e !important;
    color: #90ee90 !important;
}

[data-theme="dark"] .clinical-badge {
    background: #1e4d2e !important;
    color: #90ee90 !important;
}

[data-theme="dark"] .preceptor-badge {
    background: #4d1e1e !important;
    color: #ff6b6b !important;
}

/* Images */
[data-theme="dark"] img {
    opacity: 0.9;
}

[data-theme="dark"] img:hover {
    opacity: 1;
}

/* Dark mode toggle button */
.dark-mode-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    background: var(--button-bg);
    border: 2px solid var(--border-color);
    border-radius: 50px;
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 8px var(--shadow-color);
    transition: all 0.3s ease;
    font-weight: 600;
    color: var(--button-text);
}

.dark-mode-toggle:hover {
    background: var(--button-hover-bg);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow-color);
}

.dark-mode-toggle svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.dark-mode-toggle .toggle-text {
    font-size: 14px;
}

@media (max-width: 480px) {
    .dark-mode-toggle .toggle-text {
        display: none;
    }
    .dark-mode-toggle {
        padding: 8px;
    }
}

/* Text color utilities for dark mode */
[data-theme="dark"] .text-dark,
[data-theme="dark"] .text-muted {
    color: var(--text-color) !important;
}

[data-theme="dark"] .text-white {
    color: #e0e0e0 !important;
}

/* Navbar text */
[data-theme="dark"] .navbar-text {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Calendar/Schedule Table Dark Mode */
[data-theme="dark"] .calendar {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .cal-header {
    background: #4a5568 !important;
    color: white !important;
}

[data-theme="dark"] .cal-header > div {
    border-right-color: rgba(255, 255, 255, 0.2) !important;
}

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

[data-theme="dark"] .cal-day {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] .cal-day.empty {
    background: var(--quote-bg) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .day-number {
    color: var(--text-color) !important;
}

[data-theme="dark"] .assignment-block {
    background: #2563eb !important;
    color: white !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] .assignment-header {
    color: white !important;
}

[data-theme="dark"] .assignment-time {
    color: rgba(255, 255, 255, 0.9) !important;
}

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

[data-theme="dark"] .slot-item.unassigned {
    background: #4a3d1a !important;
    color: #ffd700 !important;
    border-color: #ffc107 !important;
}

[data-theme="dark"] .slot-item.unassigned:hover {
    background: #5a4d2a !important;
    border-color: #ffc107 !important;
}

[data-theme="dark"] .slot-item.assigned {
    background: #1e4d2e !important;
    color: #90ee90 !important;
    border-color: #28a745 !important;
}

[data-theme="dark"] .slot-item-name {
    color: inherit !important;
}

[data-theme="dark"] .slot-item-name.sick {
    color: #ff6b6b !important;
}

[data-theme="dark"] .legend {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] .legend h3 {
    color: var(--text-color) !important;
}

[data-theme="dark"] .legend-unassigned {
    background: #4a3d1a !important;
    border-color: #ffc107 !important;
}

[data-theme="dark"] .legend-assigned {
    background: #1e4d2e !important;
    border-color: #28a745 !important;
}

/* Calendar navigation and headers */
[data-theme="dark"] .month-label {
    background: var(--header-text) !important;
    color: white !important;
}

[data-theme="dark"] .btn-nav {
    background: #4a5568 !important;
    color: white !important;
}

[data-theme="dark"] .btn-nav:hover {
    background: #5a6678 !important;
}

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

[data-theme="dark"] .header h1 {
    color: var(--text-color) !important;
}

/* Calendar assignment site and details */
[data-theme="dark"] .assignment-site {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Calendar filter sections */
[data-theme="dark"] div[style*="background: #d4edda"],
[data-theme="dark"] div[style*="background:#d4edda"],
[data-theme="dark"] div[style*="background: #cfe2ff"],
[data-theme="dark"] div[style*="background:#cfe2ff"] {
    background-color: #1e4d2e !important;
    border-color: #28a745 !important;
    color: #90ee90 !important;
}

[data-theme="dark"] select[style*="border: 1px solid"] {
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
    border-color: var(--border-color) !important;
}

/* Calendar today highlight */
[data-theme="dark"] .cal-day[style*="border: 3px solid #ffd700"] {
    border-color: #ffd700 !important;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.6) !important;
}

/* Calendar grid specific styles */
[data-theme="dark"] .calendar-grid {
    background: var(--card-bg) !important;
}

[data-theme="dark"] .calendar-header {
    background: #4a5568 !important;
    color: white !important;
}

[data-theme="dark"] .day-header {
    color: white !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

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

/* Special handling for notification boxes and dashboard sections */
[data-theme="dark"] div[style*="background: white"],
[data-theme="dark"] div[style*="background:white"],
[data-theme="dark"] div[style*="background:#fff"],
[data-theme="dark"] div[style*="background:#ffffff"] {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] div[style*="background: #f8f9fa"],
[data-theme="dark"] div[style*="background:#f8f9fa"],
[data-theme="dark"] div[style*="background: #f3f4f6"],
[data-theme="dark"] div[style*="background:#f3f4f6"] {
    background-color: var(--quote-bg) !important;
    color: var(--text-color) !important;
}