/* ============================================
   DARK MODE SYSTEM
   Warm Professional dark color palette
   ============================================ */

/* Dark Mode Color Variables */
[data-theme="dark"] {
    /* Dark Backgrounds - Warm tinted */
    --dark-bg-primary: #1a1614;
    --dark-bg-secondary: #252220;
    --dark-bg-tertiary: #332f2c;
    --dark-bg-elevated: #433e3a;

    /* Dark Text Colors */
    --dark-text-primary: #f5f2ee;
    --dark-text-secondary: #d4cdc4;
    --dark-text-tertiary: #a69e94;
    --dark-text-muted: #7a736a;

    /* Warm Accent (adjusted for dark mode) */
    --warm-accent-dark-mode: #b39777;
    --warm-accent-light-dark-mode: #c9b394;

    /* Gold (brighter for dark mode) */
    --gold-dark-mode: #d4b07a;
    --gold-light-dark-mode: #e0c69a;

    /* Success Green (adjusted) */
    --success-green-dark-mode: #10b981;
    --success-green-light-dark-mode: #34d399;

    /* Warning (more vibrant) */
    --warning-yellow-dark-mode: #fbbf24;

    /* Danger Red */
    --danger-red-dark-mode: #ef4444;

    /* Borders */
    --dark-border: #3d3835;
    --dark-border-light: #4d4743;

    /* Shadows (darker, more subtle) */
    --dark-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
    --dark-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --dark-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    --dark-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.6);

    /* Override global variables */
    --bg-primary: var(--dark-bg-primary);
    --bg-card: var(--dark-bg-secondary);
    --text-primary: var(--dark-text-primary);
    --text-secondary: var(--dark-text-secondary);
    --warm-subtle: var(--dark-bg-tertiary);
    --warm-border: var(--dark-border);
    --warm-accent: var(--warm-accent-dark-mode);
    --warm-accent-light: var(--warm-accent-light-dark-mode);
    --warm-accent-dark: #8a7a62;
    --gold: var(--gold-dark-mode);
    --icon-color: var(--gold-light-dark-mode);
}

/* Apply dark mode colors */
[data-theme="dark"] body {
    background: var(--dark-bg-primary);
    color: var(--dark-text-primary);
}

/* Cards */
[data-theme="dark"] .card,
[data-theme="dark"] .tool-card,
[data-theme="dark"] .metric-card,
[data-theme="dark"] .auth-card,
[data-theme="dark"] .crew-swap-card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dashboard-card,
[data-theme="dark"] .dashboard-welcome {
    background: var(--dark-bg-secondary);
    border-color: var(--dark-border);
    box-shadow: var(--dark-shadow-md);
    color: var(--dark-text-primary);
}

[data-theme="dark"] .card:hover,
[data-theme="dark"] .tool-card:hover {
    box-shadow: var(--dark-shadow-xl);
    border-color: var(--warm-accent-dark-mode);
}

[data-theme="dark"] .card-header,
[data-theme="dark"] .card-title {
    color: var(--gold-light-dark-mode);
    border-bottom-color: var(--dark-border-light);
}

/* Navigation Bar */
[data-theme="dark"] .navbar {
    background: var(--dark-bg-secondary);
    border-bottom-color: var(--dark-border);
}

[data-theme="dark"] .navbar-brand,
[data-theme="dark"] .nav-item {
    color: var(--dark-text-primary);
}

[data-theme="dark"] .nav-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .nav-dropdown-menu {
    background: var(--dark-bg-secondary);
    border-color: var(--dark-border);
    box-shadow: var(--dark-shadow-lg);
}

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

[data-theme="dark"] .nav-dropdown-item:hover {
    background: var(--dark-bg-tertiary);
    color: var(--gold-light-dark-mode);
}

/* Dashboard */
[data-theme="dark"] .dashboard-header {
    background: var(--warm-accent-dark-mode);
}

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

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

[data-theme="dark"] .tool-card p {
    color: var(--dark-text-secondary);
}

[data-theme="dark"] .tool-icon {
    background: var(--dark-bg-tertiary);
}

[data-theme="dark"] .tool-icon svg {
    stroke: var(--gold-light-dark-mode);
}

/* Quick Access */
[data-theme="dark"] .quick-access-item {
    background: var(--dark-bg-secondary);
    border-color: var(--dark-border);
}

[data-theme="dark"] .quick-access-item:hover {
    background: var(--dark-bg-tertiary);
    border-color: var(--warm-accent-dark-mode);
}

[data-theme="dark"] .quick-access-icon {
    background: var(--dark-bg-tertiary);
}

[data-theme="dark"] .quick-access-icon svg {
    color: var(--gold-light-dark-mode);
    stroke: var(--gold-light-dark-mode);
}

/* Section Toggle */
[data-theme="dark"] .section-header-toggle {
    background: var(--dark-bg-secondary);
    border-color: var(--dark-border);
}

[data-theme="dark"] .section-header-toggle:hover {
    background: var(--dark-bg-tertiary);
    border-color: var(--warm-accent-dark-mode);
}

/* News & Coming Soon Lists */
[data-theme="dark"] .news-item,
[data-theme="dark"] .coming-soon-item {
    background: var(--dark-bg-tertiary);
}

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

[data-theme="dark"] .news-content p {
    color: var(--dark-text-secondary);
}

/* Footer */
[data-theme="dark"] .site-footer {
    background: var(--dark-bg-secondary);
}

[data-theme="dark"] .footer-column {
    background: var(--dark-bg-tertiary);
}

[data-theme="dark"] .footer-newsletter {
    background: var(--dark-bg-tertiary);
}

/* Forms */
[data-theme="dark"] .form-control,
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background: var(--dark-bg-tertiary);
    border-color: var(--dark-border-light);
    color: var(--dark-text-primary);
}

[data-theme="dark"] .form-control:hover {
    border-color: var(--warm-accent-dark-mode);
}

[data-theme="dark"] .form-control:focus {
    border-color: var(--warm-accent-light-dark-mode);
    box-shadow: 0 0 0 4px rgba(179, 151, 119, 0.2);
    background: var(--dark-bg-secondary);
}

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

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

[data-theme="dark"] .view-mode-select {
    background: var(--dark-bg-tertiary);
    border-color: var(--dark-border-light);
    color: var(--dark-text-primary);
}

[data-theme="dark"] .view-mode-select:focus {
    border-color: var(--warm-accent-dark-mode);
    box-shadow: 0 0 0 3px rgba(179, 151, 119, 0.2);
}

/* Buttons */
[data-theme="dark"] .btn-primary {
    background: var(--warm-accent-dark-mode);
}

[data-theme="dark"] .btn-primary:hover {
    background: var(--warm-accent-light-dark-mode);
}

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

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

[data-theme="dark"] .btn-success {
    background: var(--success-green-dark-mode);
}

[data-theme="dark"] .btn-success:hover {
    background: var(--success-green-light-dark-mode);
}

[data-theme="dark"] .btn-outline {
    border-color: var(--warm-accent-light-dark-mode);
    color: var(--warm-accent-light-dark-mode);
}

[data-theme="dark"] .btn-outline:hover {
    background: var(--warm-accent-dark-mode);
    border-color: var(--warm-accent-dark-mode);
    color: white;
}

[data-theme="dark"] .btn-ghost {
    color: var(--warm-accent-light-dark-mode);
}

[data-theme="dark"] .btn-ghost:hover {
    background: rgba(179, 151, 119, 0.1);
}

/* Tables */
[data-theme="dark"] .data-table,
[data-theme="dark"] .admin-users-table,
[data-theme="dark"] table {
    background: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
}

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

[data-theme="dark"] .data-table th,
[data-theme="dark"] .admin-users-table th {
    color: var(--dark-text-primary);
    border-bottom-color: var(--dark-border-light);
}

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

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

[data-theme="dark"] .table-pagination {
    background: var(--dark-bg-secondary);
    border-color: var(--dark-border);
}

[data-theme="dark"] .table-pagination-btn {
    background: var(--dark-bg-tertiary);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
}

[data-theme="dark"] .table-pagination-btn:hover:not(:disabled) {
    background: var(--dark-bg-elevated);
    border-color: var(--warm-accent-dark-mode);
}

[data-theme="dark"] .table-pagination-btn.active {
    background: var(--warm-accent-dark-mode);
    border-color: var(--warm-accent-dark-mode);
}

/* Alerts */
[data-theme="dark"] .alert-success {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success-green-light-dark-mode);
    border-color: var(--success-green-dark-mode);
}

[data-theme="dark"] .alert-danger {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border-color: var(--danger-red-dark-mode);
}

[data-theme="dark"] .alert-info {
    background: rgba(179, 151, 119, 0.15);
    color: var(--gold-light-dark-mode);
    border-color: var(--warm-accent-dark-mode);
}

/* Badges */
[data-theme="dark"] .tool-badge,
[data-theme="dark"] .badge {
    background: var(--dark-bg-elevated);
    color: var(--dark-text-primary);
}

[data-theme="dark"] .badge-primary {
    background: var(--dark-bg-elevated);
    color: var(--warm-accent-light-dark-mode);
}

[data-theme="dark"] .news-badge.new {
    background: var(--gold-dark-mode);
}

[data-theme="dark"] .news-badge.update {
    background: var(--warm-accent-dark-mode);
}

[data-theme="dark"] .status-badge.status-approved {
    background: rgba(16, 185, 129, 0.2);
    color: var(--success-green-light-dark-mode);
}

[data-theme="dark"] .status-badge.status-pending {
    background: rgba(251, 191, 36, 0.2);
    color: var(--warning-yellow-dark-mode);
}

[data-theme="dark"] .status-badge.status-rejected {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

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

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

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

[data-theme="dark"] .modal-close {
    color: var(--dark-text-tertiary);
}

[data-theme="dark"] .modal-close:hover {
    background: var(--dark-bg-tertiary);
    color: var(--dark-text-primary);
}

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

/* Settings */
[data-theme="dark"] .settings-item {
    background: var(--dark-bg-tertiary);
}

[data-theme="dark"] .settings-item-icon {
    background: var(--dark-bg-elevated);
    color: var(--gold-light-dark-mode);
}

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

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

[data-theme="dark"] .settings-section-title {
    color: var(--dark-text-tertiary);
}

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

/* Dropdowns */
[data-theme="dark"] .user-dropdown,
[data-theme="dark"] .autocomplete-dropdown {
    background: var(--dark-bg-secondary);
    border-color: var(--dark-border);
    box-shadow: var(--dark-shadow-lg);
}

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

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

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

[data-theme="dark"] .user-dropdown-item:hover {
    background: var(--dark-bg-tertiary);
}

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

[data-theme="dark"] .autocomplete-item:hover {
    background: var(--dark-bg-tertiary);
}

[data-theme="dark"] .autocomplete-item div:first-child {
    color: var(--dark-text-primary);
}

[data-theme="dark"] .autocomplete-item div:last-child {
    color: var(--dark-text-tertiary);
}

/* Skeletons */
[data-theme="dark"] .skeleton {
    background: linear-gradient(
        90deg,
        var(--dark-bg-tertiary) 0%,
        var(--dark-bg-elevated) 50%,
        var(--dark-bg-tertiary) 100%
    );
}

/* File Upload */
[data-theme="dark"] .file-upload-zone {
    background: var(--dark-bg-tertiary);
    border-color: var(--dark-border-light);
}

[data-theme="dark"] .file-upload-zone:hover {
    border-color: var(--warm-accent-dark-mode);
    background: var(--dark-bg-elevated);
}

[data-theme="dark"] .file-upload-zone.drag-over {
    border-color: var(--warm-accent-light-dark-mode);
    background: rgba(179, 151, 119, 0.1);
}

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

[data-theme="dark"] .file-upload-hint {
    color: var(--dark-text-muted);
}

[data-theme="dark"] .file-preview-card {
    background: var(--dark-bg-tertiary);
    border-color: var(--dark-border);
}

[data-theme="dark"] .file-preview-name {
    color: var(--dark-text-secondary);
}

/* Stepper */
[data-theme="dark"] .stepper::before {
    background: var(--dark-border);
}

[data-theme="dark"] .stepper-progress {
    background: var(--warm-accent-dark-mode);
}

[data-theme="dark"] .stepper-step-circle {
    background: var(--dark-bg-secondary);
    border-color: var(--dark-border-light);
    color: var(--dark-text-tertiary);
}

[data-theme="dark"] .stepper-step.active .stepper-step-circle {
    background: var(--warm-accent-dark-mode);
    border-color: var(--warm-accent-dark-mode);
}

[data-theme="dark"] .stepper-step.completed .stepper-step-circle {
    background: var(--success-green-dark-mode);
    border-color: var(--success-green-dark-mode);
}

[data-theme="dark"] .stepper-step-label {
    color: var(--dark-text-tertiary);
}

[data-theme="dark"] .stepper-step.active .stepper-step-label {
    color: var(--warm-accent-light-dark-mode);
}

[data-theme="dark"] .stepper-step.completed .stepper-step-label {
    color: var(--success-green-light-dark-mode);
}

/* Progress Indicators */
[data-theme="dark"] .progress-bar {
    background: var(--dark-border);
}

[data-theme="dark"] .progress-fill {
    background: var(--warm-accent-dark-mode);
}

/* Slider */
[data-theme="dark"] .slider {
    background: var(--dark-border);
}

[data-theme="dark"] .slider::-webkit-slider-thumb {
    background: var(--warm-accent-dark-mode);
}

[data-theme="dark"] .slider::-webkit-slider-thumb:hover {
    background: var(--warm-accent-light-dark-mode);
}

[data-theme="dark"] .slider::-moz-range-thumb {
    background: var(--warm-accent-dark-mode);
}

/* Training System */
[data-theme="dark"] .training-header {
    background: var(--warm-accent-dark-mode);
}

[data-theme="dark"] .compliance-summary-card {
    background: var(--dark-bg-secondary);
    border-color: var(--dark-border);
}

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

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

/* Crew Swap Tool */
[data-theme="dark"] .crew-swap-navbar {
    background: var(--warm-accent-dark-mode);
}

[data-theme="dark"] .crew-swap-container {
    background: var(--dark-bg-primary);
}

/* Scrollbars (Webkit only) */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

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

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--dark-bg-elevated);
    border-radius: 6px;
}

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

/* Code blocks (if any) */
[data-theme="dark"] code,
[data-theme="dark"] pre {
    background: var(--dark-bg-tertiary);
    color: var(--gold-light-dark-mode);
}

/* Links */
[data-theme="dark"] a {
    color: var(--warm-accent-light-dark-mode);
}

[data-theme="dark"] a:hover {
    color: var(--gold-light-dark-mode);
}

/* Text colors */
[data-theme="dark"] .text-muted {
    color: var(--dark-text-muted);
}

[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(--dark-text-primary);
}

/* Welcome Section */
[data-theme="dark"] .welcome-title {
    color: var(--dark-text-primary);
}

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

/* Section Title */
[data-theme="dark"] .section-title {
    color: var(--dark-text-primary);
}

[data-theme="dark"] .section-title svg {
    color: var(--gold-light-dark-mode);
}

/* ============================================
   DARK MODE FOCUS-VISIBLE STYLES
   ============================================ */

/* Focus-visible for keyboard navigation in dark mode */
[data-theme="dark"] *:focus-visible {
    outline: 3px solid var(--warm-accent-dark-mode);
    outline-offset: 2px;
}

/* Button focus-visible in dark mode */
[data-theme="dark"] .btn:focus-visible {
    outline: 3px solid var(--warm-accent-dark-mode);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(179, 151, 119, 0.2);
}

/* Form control focus-visible in dark mode */
[data-theme="dark"] .form-control:focus-visible {
    outline: 3px solid var(--warm-accent-dark-mode);
    outline-offset: 2px;
    border-color: var(--warm-accent-dark-mode);
}

/* Link focus-visible in dark mode */
[data-theme="dark"] a:focus-visible {
    outline: 3px solid var(--warm-accent-dark-mode);
    outline-offset: 2px;
}

/* Card focus-visible in dark mode */
[data-theme="dark"] .card:focus-visible,
[data-theme="dark"] .tool-card:focus-visible {
    outline: 3px solid var(--warm-accent-dark-mode);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(179, 151, 119, 0.15);
}

/* Navigation items focus-visible in dark mode */
[data-theme="dark"] .nav-item:focus-visible,
[data-theme="dark"] .nav-dropdown-item:focus-visible,
[data-theme="dark"] .user-dropdown-item:focus-visible {
    outline: 3px solid rgba(179, 151, 119, 0.8);
    outline-offset: 2px;
    background: rgba(179, 151, 119, 0.15);
}

/* Modal close button focus-visible in dark mode */
[data-theme="dark"] .modal-close:focus-visible {
    outline: 3px solid var(--warm-accent-dark-mode);
    outline-offset: 2px;
    background: rgba(179, 151, 119, 0.1);
}

/* Skip to content focus-visible in dark mode */
[data-theme="dark"] .skip-to-content:focus-visible {
    outline: 3px solid var(--warm-accent-dark-mode);
    outline-offset: 2px;
}

/* Print Mode - Force Light Colors */
@media print {
    [data-theme="dark"] * {
        background: white !important;
        color: black !important;
        border-color: #ddd !important;
    }
}

/* Respect system preference by default */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
    }
}