:root {
    /* PRIMARY BACKGROUND (shifted from white) */
    --bs-body-bg: #f4f7f2; /* soft neutral green-gray */
    --bs-body-color: #1a1a1a;
    /* SCOUT COLORS */
    --scout-primary: #2c5e1a;
    --scout-primary-hover: #244c14;
    --scout-accent: #f4c542;
    /* SURFACES */
    --scout-surface: #ffffff; /* cards / modals */
    --scout-secondary-bg: #e9efe3; /* panels / subtle sections */

    --scout-border: #cfd8c6;
    --focus-ring: #005fcc;
    /* Bootstrap overrides */
    --bs-primary: var(--scout-primary);
}

/* ---------------------------------------------------------------- */
/* BACKGROUND + TEXT */
/* ---------------------------------------------------------------- */

body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    padding:10px;
}

main {
    margin: 10px;
}
/* Primary content surfaces (cards, modals, etc.) */
.card,
.modal-content,
.list-group-item,
.dropdown-menu {
    background-color: var(--scout-surface) !important;
}

/* Secondary surfaces (subtle panels, alt rows, etc.) */
.bg-light,
.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--scout-secondary-bg) !important;
}

/* Borders */
.border,
.card,
.table,
hr {
    border-color: var(--scout-border) !important;
}

/* Muted text (improved contrast) */
.text-muted {
    color: #4f4f4f !important;
}

/* ---------------------------------------------------------------- */
/* HEADERS */
/* ---------------------------------------------------------------- */

h1, .h1 {
    color: var(--scout-primary);
    font-weight: 700;
    font-size: 2rem;
}

h2, .h2 {
    color: var(--scout-primary);
    font-weight: 600;
    font-size: 1.6rem;
    border-bottom: 3px solid var(--scout-accent);
    padding-bottom: 0.25rem;
}

h3, .h3 {
    color: #244c14;
    font-weight: 600;
    font-size: 1.3rem;
}

/* ---------------------------------------------------------------- */
/* BUTTONS */
/* ---------------------------------------------------------------- */

.btn {
    border-radius: 0.5rem;
}

/* Primary */
.btn-primary {
    background-color: var(--scout-primary);
    border-color: var(--scout-primary);
    color: #ffffff;
}

    .btn-primary:hover,
    .btn-primary:focus {
        background-color: var(--scout-primary-hover);
        border-color: var(--scout-primary-hover);
    }

/* Secondary */
.btn-secondary {
    background-color: var(--scout-surface);
    color: var(--scout-primary);
    border: 2px solid var(--scout-primary);
}

    .btn-secondary:hover,
    .btn-secondary:focus {
        background-color: #f0f0f0;
    }

/* Accent */
.btn-warning {
    background-color: var(--scout-accent);
    border-color: var(--scout-accent);
    color: #1a1a1a;
}

/* Focus */
.btn:focus,
.btn-close:focus {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
    box-shadow: none !important;
}

/* ---------------------------------------------------------------- */
/* TABLES */
/* ---------------------------------------------------------------- */

.table {
    background-color: var(--scout-surface);
}

    .table thead {
        background-color: var(--scout-primary);
        color: #ffffff;
    }

.table-hover tbody tr:hover {
    background-color: #dde8d6;
}

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

/* ---------------------------------------------------------------- */
/* MODALS */
/* ---------------------------------------------------------------- */

.modal-backdrop.show {
    opacity: 0.7;
}

.modal-content {
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    border-radius: 0.5rem;
}

.modal-title {
    color: var(--scout-primary);
}

/* ---------------------------------------------------------------- */
/* LINKS */
/* ---------------------------------------------------------------- */

a {
    color: var(--scout-primary);
}

    a:hover,
    a:focus {
        color: var(--scout-primary-hover);
        text-decoration: underline;
    }

/* ---------------------------------------------------------------- */
/* FORMS */
/* ---------------------------------------------------------------- */

.form-control,
.form-select {
    background-color: var(--scout-surface);
}

    .form-control:focus,
    .form-select:focus {
        border-color: var(--scout-primary);
        box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.25);
    }

/* ---------------------------------------------------------------- */
/* ACCESSIBILITY */
/* ---------------------------------------------------------------- */

:focus {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

.tab-pane {
    border-color: var(--scout-border);
    border-style: solid;
    min-height: 80vh;
    background-color: var(--scout-secondary-bg);
    padding: 10px;
}

/* ---------------------------------------------------------------- */
/* WCAG-ENHANCED TABLES */
/* ---------------------------------------------------------------- */

/* Table structure */
.table {
    background-color: var(--scout-surface);
    color: var(--bs-body-color);
    border-collapse: collapse;
}

    /* Accessible header contrast */
    .table thead,
    .table thead th {
        background-color: var(--scout-primary);
        color: #ffffff;
        font-weight: 700;
        border-color: var(--scout-primary-hover);
    }

    /* Clear row separation */
    .table td,
    .table th {
        border: 1px solid var(--scout-border);
        padding: 0.75rem;
        vertical-align: top;
    }

/* Zebra striping with sufficient contrast */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: #eef3ea;
}

/* Hover state */
.table-hover tbody tr:hover {
    background-color: #dde8d6;
}

/* Keyboard focus support */
.table tbody tr:focus-within,
.table tbody tr:focus {
    outline: 3px solid var(--focus-ring);
    outline-offset: -3px;
    background-color: #d7e8ff;
}

/* Highlight selected/current row */
.table tbody tr[aria-selected="true"],
.table tbody tr.selected {
    background-color: #cfe2ff;
    font-weight: 600;
}

/* Accessible captions */
.table caption {
    caption-side: top;
    color: var(--bs-body-color);
    font-weight: 600;
    padding: 0.5rem 0;
    text-align: left;
}

/* Sortable column indicators */
.table th[aria-sort="ascending"]::after {
    content: " ?";
}

.table th[aria-sort="descending"]::after {
    content: " ?";
}

/* Ensure links remain identifiable in tables */
.table a {
    text-decoration: underline;
}

    .table a:hover,
    .table a:focus {
        text-decoration-thickness: 2px;
    }

/* Responsive tables retain borders */
.table-responsive {
    border: 1px solid var(--scout-border);
    border-radius: 0.25rem;
}

/* High-contrast mode support */
@media (forced-colors: active) {
    .table,
    .table td,
    .table th {
        border: 1px solid CanvasText;
    }

        .table tbody tr:focus,
        .table tbody tr:focus-within {
            outline: 2px solid Highlight;
        }
}


.table-striped tbody tr:nth-of-type(even) {
    background-color: #ffffff;
}

/* Preserve striping when cells have their own backgrounds */
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: #eef3ea;
    color: var(--bs-body-color);
}

.table-striped > tbody > tr:nth-of-type(even) > * {
    background-color: #ffffff;
    color: var(--bs-body-color);
}