/**
 * Dark Mode Support for RST Ambulance Service
 * Automatically applies when iPad/device is in dark appearance mode
 */

/* Dark mode detection and styles */
@media (prefers-color-scheme: dark) {
    /* Base color adjustments */
    :root {
        --bs-body-bg: #1a1d20;
        --bs-body-color: #dee2e6;
        --bs-border-color: #495057;
        --bs-card-bg: #212529;
        --bs-navbar-bg: #1a1d20;
    }

    /* Body and main containers */
    body {
        background-color: #1a1d20;
        color: #dee2e6;
    }

    /* Navigation bar */
    .navbar {
        background-color: #212529 !important;
        border-bottom: 1px solid #495057;
    }

    .navbar-brand,
    .navbar-nav .nav-link {
        color: #dee2e6 !important;
    }

    .navbar-nav .nav-link:hover {
        background-color: rgba(255, 255, 255, 0.05) !important;
        color: #fff !important;
    }

    /* Cards and panels */
    .card {
        background-color: #212529;
        border-color: #495057;
        color: #dee2e6;
    }

    .card-header {
        background-color: #2c3034;
        border-bottom-color: #495057;
        color: #dee2e6;
    }

    /* Keep status colors vibrant in dark mode */
    .card-header.bg-primary,
    .card-header.bg-success,
    .card-header.bg-danger,
    .card-header.bg-warning,
    .card-header.bg-info {
        opacity: 0.9;
    }

    /* Tables */
    .table {
        color: #dee2e6;
        border-color: #495057;
    }

    .table-striped > tbody > tr:nth-of-type(odd) > * {
        background-color: rgba(255, 255, 255, 0.02);
    }

    .table-hover > tbody > tr:hover > * {
        background-color: rgba(255, 255, 255, 0.05);
        color: #dee2e6;
    }

    .table-light {
        background-color: #2c3034 !important;
        color: #dee2e6;
    }

    thead.table-light {
        background-color: #2c3034 !important;
    }

    /* Form controls */
    .form-control,
    .form-select {
        background-color: #2c3034;
        border-color: #495057;
        color: #dee2e6;
    }

    .form-control:focus,
    .form-select:focus {
        background-color: #2c3034;
        border-color: #6c757d;
        color: #dee2e6;
        box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.25);
    }

    .form-control::placeholder {
        color: #6c757d;
    }

    /* Buttons - make them slightly darker */
    .btn-primary {
        background-color: #0b5ed7;
        border-color: #0a58ca;
    }

    .btn-success {
        background-color: #157347;
        border-color: #146c43;
    }

    .btn-danger {
        background-color: #bb2d3b;
        border-color: #b02a37;
    }

    .btn-warning {
        background-color: #ffca2c;
        border-color: #ffc720;
        color: #000;
    }

    .btn-secondary {
        background-color: #5c636a;
        border-color: #565e64;
    }

    /* Badges - ensure they remain visible */
    .badge {
        opacity: 0.95;
    }

    /* Dropdown menus */
    .dropdown-menu {
        background-color: #212529;
        border-color: #495057;
    }

    .dropdown-item {
        color: #dee2e6;
    }

    .dropdown-item:hover,
    .dropdown-item:focus {
        background-color: #2c3034;
        color: #fff;
    }

    /* Modal dialogs */
    .modal-content {
        background-color: #212529;
        border-color: #495057;
    }

    .modal-header,
    .modal-footer {
        border-color: #495057;
    }

    .modal-header .btn-close {
        filter: invert(1) grayscale(100%) brightness(200%);
    }

    /* List groups */
    .list-group-item {
        background-color: #212529;
        border-color: #495057;
        color: #dee2e6;
    }

    .list-group-item:hover {
        background-color: #2c3034;
    }

    /* Alert boxes */
    .alert {
        border-color: #495057;
    }

    .alert-primary {
        background-color: rgba(13, 110, 253, 0.1);
        border-color: #084298;
        color: #6ea8fe;
    }

    .alert-success {
        background-color: rgba(25, 135, 84, 0.1);
        border-color: #0f5132;
        color: #75b798;
    }

    .alert-danger {
        background-color: rgba(220, 53, 69, 0.1);
        border-color: #842029;
        color: #ea868f;
    }

    .alert-warning {
        background-color: rgba(255, 193, 7, 0.1);
        border-color: #997404;
        color: #ffda6a;
    }

    /* Text colors */
    .text-muted {
        color: #6c757d !important;
    }

    .text-dark {
        color: #dee2e6 !important;
    }

    /* Links */
    a {
        color: #6ea8fe;
    }

    a:hover {
        color: #8bb9fe;
    }

    /* Breadcrumbs */
    .breadcrumb {
        background-color: #2c3034;
    }

    .breadcrumb-item + .breadcrumb-item::before {
        color: #6c757d;
    }

    /* Pagination */
    .page-link {
        background-color: #212529;
        border-color: #495057;
        color: #6ea8fe;
    }

    .page-link:hover {
        background-color: #2c3034;
        border-color: #495057;
        color: #8bb9fe;
    }

    .page-item.active .page-link {
        background-color: #0d6efd;
        border-color: #0d6efd;
    }

    /* CAD specific elements */
    .call-info-card,
    .cad-log-card {
        background-color: #212529;
        border-color: #495057;
    }

    .log-entry {
        border-color: #495057;
    }

    .log-entry:hover {
        background-color: rgba(255, 255, 255, 0.03);
    }

    /* Unit status cards */
    .unit-badge-compact {
        opacity: 0.95;
    }

    /* Vibe box at bottom */
    .vibe-box {
        background-color: #1a1d20;
        border-top-color: #495057;
    }

    .vibe-box-input {
        background-color: #2c3034;
        border-color: #495057;
        color: #dee2e6;
    }

    .vibe-box-input:focus {
        background-color: #2c3034;
        border-color: #6c757d;
    }

    /* Search boxes and filters */
    input[type="search"],
    input[type="text"],
    select {
        background-color: #2c3034 !important;
        border-color: #495057 !important;
        color: #dee2e6 !important;
    }

    /* Scrollbar styling for webkit browsers (Safari on iPad) */
    ::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }

    ::-webkit-scrollbar-track {
        background: #1a1d20;
    }

    ::-webkit-scrollbar-thumb {
        background: #495057;
        border-radius: 6px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #6c757d;
    }

    /* Code and pre elements */
    code {
        color: #e685b5;
        background-color: #2c3034;
    }

    pre {
        color: #dee2e6;
        background-color: #2c3034;
        border-color: #495057;
    }

    /* HR elements */
    hr {
        border-color: #495057;
        opacity: 0.25;
    }

    /* Focus visible outlines */
    *:focus-visible {
        outline-color: #6c757d;
    }
}

/* Utility class to force dark mode (can be toggled via JavaScript) */
.dark-mode-forced {
    filter: invert(1) hue-rotate(180deg);
}

.dark-mode-forced img,
.dark-mode-forced video,
.dark-mode-forced iframe {
    filter: invert(1) hue-rotate(180deg);
}