:root {
    --color-background: #ffffff;
    --color-navbar-footer: #f7f9fb;
    --color-app-title: #161918;
    --color-menu-items: #595959;
    --color-text: #212529;
    --color-text-muted: #5a6268;
    --color-text-secondary: #666666;
    --color-link: #0056b3;
    --color-primary: #0d6efd;
    --color-brand: #17a2b8;
    --color-success: #198754;
    --color-success-light: #28a745;
    --color-danger: #dc3545;
    --color-warning: #ffc107;
    --color-warning-dark: #fd7e14;
    --color-info: #17a2b8;
    --color-light: #f8f9fa;
    --color-light-hover: #e9ecef;
    --color-dark: #343a40;
    --color-darker: #333333;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-card-bg: #ffffff;
    --color-border: #dee2e6;
    --color-input-bg: #ffffff;
    --color-input-border: #ced4da;
    --color-error-bg: #f8d7da;
    --color-success-bg: #d1e7dd;
    --color-warning-bg: #fff3cd;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 2px 5px rgba(0, 0, 0, 0.3);
    --shadow-marker: 0 2px 5px rgba(0, 0, 0, 0.3);
    --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

[data-bs-theme="high-contrast"] {
    --color-background: #ffffff;
    --color-navbar-footer: #ffffff;
    --color-app-title: #000000;
    --color-menu-items: #000000;
    --color-text: #000000;
    --color-text-muted: #404040;
    --color-text-secondary: #404040;
    --color-link: #0000cc;
    --color-primary: #0000cc;
    --color-brand: #000000;
    --color-success: #006600;
    --color-success-light: #006600;
    --color-danger: #cc0000;
    --color-warning: #806600;
    --color-warning-dark: #804000;
    --color-info: #006666;
    --color-light: #f0f0f0;
    --color-light-hover: #e0e0e0;
    --color-dark: #000000;
    --color-darker: #000000;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-card-bg: #ffffff;
    --color-border: #000000;
    --color-input-bg: #ffffff;
    --color-input-border: #000000;
    --color-error-bg: #ffcccc;
    --color-success-bg: #ccffcc;
    --color-warning-bg: #ffffcc;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 2px 5px rgba(0, 0, 0, 0.4);
    --shadow-marker: 0 2px 5px rgba(0, 0, 0, 0.4);
    --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

[data-bs-theme="high-contrast"] .btn-success {
    background-color: #004d00;
    border-color: #004d00;
}

[data-bs-theme="high-contrast"] .btn-danger {
    background-color: #990000;
    border-color: #990000;
}

[data-bs-theme="high-contrast"] .btn-primary {
    background-color: #000099;
    border-color: #000099;
}

[data-bs-theme="high-contrast"] .btn-secondary {
    background-color: #333333;
    border-color: #333333;
}

[data-bs-theme="high-contrast"] .btn-outline-primary {
    color: #000099;
    border-color: #000099;
}

[data-bs-theme="high-contrast"] .btn-outline-primary:hover,
[data-bs-theme="high-contrast"] .btn-outline-primary.active,
[data-bs-theme="high-contrast"] .btn-outline-primary:active,
[data-bs-theme="high-contrast"] .btn-check:checked + .btn-outline-primary {
    background-color: #000066;
    border-color: #000066;
    color: #ffffff;
}

[data-bs-theme="high-contrast"] .btn-outline-success {
    color: #004d00;
    border-color: #004d00;
}

[data-bs-theme="high-contrast"] .btn-outline-success:hover {
    background-color: #004d00;
    border-color: #004d00;
    color: #ffffff;
}

[data-bs-theme="high-contrast"] .btn-outline-danger {
    color: #990000;
    border-color: #990000;
}

[data-bs-theme="high-contrast"] .btn-outline-danger:hover {
    background-color: #990000;
    border-color: #990000;
    color: #ffffff;
}

[data-bs-theme="high-contrast"] .btn-outline-secondary {
    color: #333333;
    border-color: #333333;
}

[data-bs-theme="high-contrast"] .btn-outline-secondary:hover,
[data-bs-theme="high-contrast"] .btn-outline-secondary.active,
[data-bs-theme="high-contrast"] .btn-outline-secondary:active,
[data-bs-theme="high-contrast"] .btn-check:checked + .btn-outline-secondary {
    background-color: #1a1a1a;
    border-color: #1a1a1a;
    color: #ffffff;
}

[data-bs-theme="high-contrast"] .btn-outline-warning {
    color: #664400;
    border-color: #664400;
}

[data-bs-theme="high-contrast"] .btn-outline-warning:hover {
    background-color: #664400;
    border-color: #664400;
    color: #ffffff;
}

[data-bs-theme="high-contrast"] .text-success {
    color: #005000 !important;
}

[data-bs-theme="high-contrast"] .text-primary {
    color: #000099 !important;
}

[data-bs-theme="high-contrast"] .text-warning {
    color: #594400 !important;
}

[data-bs-theme="high-contrast"] .text-danger {
    color: #8b0000 !important;
}

[data-bs-theme="high-contrast"] .form-text {
    color: #4a4a4a !important;
}

[data-bs-theme="high-contrast"] code {
    color: #8b0000 !important;
}

[data-bs-theme="high-contrast"] .bg-primary {
    background-color: #000066 !important;
}

[data-bs-theme="high-contrast"] .bg-secondary {
    background-color: #333333 !important;
}

[data-bs-theme="high-contrast"] .distance-detail {
    color: #333333 !important;
}

[data-bs-theme="high-contrast"] .mode-indicator,
[data-bs-theme="high-contrast"] #modeText {
    color: #000066 !important;
    background-color: #ffffff !important;
}

[data-bs-theme="high-contrast"] .speed-unit {
    color: #333333 !important;
}

[data-bs-theme="high-contrast"] .bg-success {
    background-color: #0a5c36 !important;
}

[data-bs-theme="dark"] code {
    color: #ea868f !important;
}

[data-bs-theme="dark"] .text-secondary {
    color: #b8b8b8 !important;
}

[data-bs-theme="dark"] .distance-detail {
    color: #b8b8b8 !important;
}

[data-bs-theme="dark"] .speed-unit {
    color: #b8b8b8 !important;
}

[data-bs-theme="dark"] #statusText {
    color: #e4e4e4 !important;
}

[data-bs-theme="dark"] .coords-display {
    color: #e4e4e4 !important;
    background-color: #2d2d44 !important;
}

[data-bs-theme="dark"] .text-success {
    color: #75b798 !important;
}

[data-bs-theme="dark"] .text-primary {
    color: #6ea8fe !important;
}

[data-bs-theme="dark"] .text-warning {
    color: #ffda6a !important;
}

[data-bs-theme="dark"] .text-danger {
    color: #ea868f !important;
}

[data-bs-theme="dark"] {
    --color-background: #1a1a2e;
    --color-navbar-footer: #16213e;
    --color-app-title: #e8e8e8;
    --color-menu-items: #b8b8b8;
    --color-text: #e4e4e4;
    --color-text-muted: #a0a0a0;
    --color-text-secondary: #9a9a9a;
    --color-link: #6ea8fe;
    --color-primary: #6ea8fe;
    --color-brand: #17a2b8;
    --color-success: #75b798;
    --color-success-light: #5cb85c;
    --color-danger: #ea868f;
    --color-warning: #ffda6a;
    --color-warning-dark: #fd9843;
    --color-info: #6edff6;
    --color-light: #2d2d44;
    --color-light-hover: #3d3d5c;
    --color-dark: #f8f9fa;
    --color-darker: #e9ecef;
    --color-white: #1a1a2e;
    --color-black: #ffffff;
    --color-card-bg: #212140;
    --color-border: #404060;
    --color-input-bg: #2d2d44;
    --color-input-border: #404060;
    --color-error-bg: #4a2020;
    --color-success-bg: #1e4620;
    --color-warning-bg: #4a4020;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 2px 5px rgba(0, 0, 0, 0.5);
    --shadow-marker: 0 2px 5px rgba(0, 0, 0, 0.5);
    --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

body {
    background-color: var(--color-background);
    color: var(--color-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6, p {
    color: var(--color-text);
}

a {
    color: var(--color-link);
    text-decoration: none;
}

a:hover {
    color: var(--color-link);
    text-decoration: none;
}

.text-secondary {
    color: var(--color-text-muted) !important;
}

.text-muted {
    color: var(--color-text-muted) !important;
}

.navbar {
    background-color: var(--color-navbar-footer) !important;
}

.navbar-brand {
    color: var(--color-app-title) !important;
    font-weight: bold;
}

.nav-link {
    color: var(--color-menu-items) !important;
}

.nav-link.active {
    color: var(--color-primary) !important;
    font-weight: bold;
}

footer {
    background-color: var(--color-navbar-footer);
    color: var(--color-text);
}

/* Bootstrap component overrides for dark mode */
.card {
    background-color: var(--color-card-bg);
    border-color: var(--color-border);
}

.card-header {
    background-color: var(--color-light);
    border-color: var(--color-border);
}

.form-control, .form-select {
    background-color: var(--color-input-bg);
    border-color: var(--color-input-border);
    color: var(--color-text);
}

.form-control:focus, .form-select:focus {
    background-color: var(--color-input-bg);
    color: var(--color-text);
    border-color: var(--color-primary);
}

.form-control::placeholder {
    color: var(--color-text-muted);
}

.input-group-text {
    background-color: var(--color-light);
    border-color: var(--color-input-border);
    color: var(--color-text);
}

.btn-outline-primary {
    color: #0a58ca;
    border-color: #0a58ca;
}

.btn-outline-primary:hover {
    background-color: #0a58ca;
    border-color: #0a58ca;
    color: #ffffff;
}

.btn-outline-primary.active,
.btn-outline-primary:active {
    background-color: #0a58ca;
    border-color: #0a58ca;
    color: #ffffff;
}

[data-bs-theme="dark"] .btn-outline-primary {
    color: #6ea8fe;
    border-color: #6ea8fe;
}

[data-bs-theme="dark"] .btn-outline-primary:hover {
    background-color: #6ea8fe;
    border-color: #6ea8fe;
    color: #1a1a2e;
}

[data-bs-theme="dark"] .btn-outline-primary.active,
[data-bs-theme="dark"] .btn-outline-primary:active {
    background-color: #6ea8fe;
    border-color: #6ea8fe;
    color: #1a1a2e;
}

a {
    color: var(--color-link);
}

a:hover {
    color: #004085;
}

code {
    color: #a71d2a !important;
}

.text-warning {
    color: #806600 !important;
}

.btn-outline-warning {
    color: #806600;
    border-color: #806600;
}

.btn-outline-warning:hover {
    background-color: #806600;
    border-color: #806600;
    color: #ffffff;
}

[data-bs-theme="dark"] .btn-outline-warning {
    color: #ffda6a;
    border-color: #ffda6a;
}

[data-bs-theme="dark"] .btn-outline-warning:hover {
    background-color: #ffda6a;
    border-color: #ffda6a;
    color: #1a1a2e;
}

[data-bs-theme="dark"] .btn-outline-success {
    color: #75b798;
    border-color: #75b798;
}

[data-bs-theme="dark"] .btn-outline-success:hover {
    background-color: #75b798;
    border-color: #75b798;
    color: #1a1a2e;
}

[data-bs-theme="dark"] .btn-outline-danger {
    color: #ea868f;
    border-color: #ea868f;
}

[data-bs-theme="dark"] .btn-outline-danger:hover {
    background-color: #ea868f;
    border-color: #ea868f;
    color: #1a1a2e;
}

[data-bs-theme="dark"] .bg-warning {
    background-color: #ffda6a !important;
    color: #1a1a2e !important;
}

[data-bs-theme="dark"] .bg-light {
    background-color: #2d2d44 !important;
    color: #e4e4e4 !important;
}

[data-bs-theme="dark"] .bg-light small {
    color: #e4e4e4 !important;
}

[data-bs-theme="dark"] .table-secondary,
[data-bs-theme="dark"] .table-secondary > td,
[data-bs-theme="dark"] .table-secondary > th,
[data-bs-theme="dark"] tr.table-secondary > td,
[data-bs-theme="dark"] tr.table-secondary > th {
    --bs-table-bg: #2d2d44 !important;
    background-color: #2d2d44 !important;
    color: #e4e4e4 !important;
}

[data-bs-theme="dark"] .table-secondary .text-muted,
[data-bs-theme="dark"] tr.table-secondary .text-muted {
    color: #b8b8b8 !important;
}

[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table-light > td,
[data-bs-theme="dark"] .table-light > th,
[data-bs-theme="dark"] tr.table-light > td,
[data-bs-theme="dark"] tr.table-light > th {
    --bs-table-bg: #212140 !important;
    background-color: #212140 !important;
    color: #e4e4e4 !important;
}

[data-bs-theme="dark"] .table-light .text-muted,
[data-bs-theme="dark"] tr.table-light .text-muted {
    color: #b8b8b8 !important;
}

.btn-outline-secondary {
    color: var(--color-text-muted);
    border-color: var(--color-border);
}

.btn-outline-secondary:hover {
    background-color: var(--color-light-hover);
    color: var(--color-text);
}

.btn-group-vertical > .btn {
    border-color: var(--color-border);
}

.btn-group-vertical > .btn:not(:first-child) {
    margin-top: -1px;
}

.btn-group-vertical > .btn:hover,
.btn-group-vertical > .btn:focus {
    z-index: 1;
}

.btn-group > .btn-outline-secondary:not(:first-child) {
    border-left-color: var(--color-border);
}

.dropdown-menu {
    background-color: var(--color-card-bg);
    border-color: var(--color-border);
}

.dropdown-item {
    color: var(--color-text);
}

.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--color-light-hover);
    color: var(--color-text);
}

.dropdown-item.active {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.table {
    color: var(--color-text);
}

.table-bordered {
    border-color: var(--color-border);
}

.table-bordered td, .table-bordered th {
    border-color: var(--color-border);
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--color-light);
}

.modal-content {
    background-color: var(--color-card-bg);
    border-color: var(--color-border);
}

.modal-header, .modal-footer {
    border-color: var(--color-border);
}

.alert-info {
    background-color: var(--color-light);
    border-color: var(--color-border);
    color: var(--color-text);
}

.badge.bg-light {
    background-color: var(--color-light) !important;
    color: var(--color-text) !important;
}

code {
    background-color: var(--color-light);
    color: var(--color-danger);
}

pre {
    background-color: var(--color-light);
    border-color: var(--color-border);
    color: var(--color-text);
}

/* Force single column layout on small screens */
@media (max-width: 767.98px) {
    body .container .row > div[class*="col-"],
    body .container .row > [class*="col-"],
    body .row > div[class*="col-"],
    body .row > [class*="col-"],
    body [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    body .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        display: block !important;
    }

    body .row > * {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* Ensure minimum padding on very small screens */
@media (max-width: 575.98px) {
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    main.container {
        margin-top: 15px !important;
    }
}