/* ============================================================
   ScoutStack — Scouting America Outdoors Theme
   Palette:
     Hunter Green (primary):   #2B5329
     Dark Hunter Green (nav):  #1A3A1C
     Medium Green (hover):     #3D7040
     BSA Gold (accent):        #C9922A
     Field Tan / Khaki (bg):   #F2ECD9
     Parchment (card header):  #E8DFC6
     Card border:              #D4C89A
     Trail Brown (text dark):  #2E2410
     Bark Brown (muted):       #6B5744
   ============================================================ */

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background-color: #F2ECD9;
    color: #2E2410;
    margin: 0;
    min-height: 100vh;
}

/* ── Links ── */
a { color: #2B5329; }
a:hover { color: #1A3A1C; }
.btn-link { color: #2B5329; }

/* ── Top Navbar ── */
.ss-navbar {
    background-color: #1A3A1C;
    padding: 0 1rem;
    min-height: 56px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: 0 2px 10px rgba(0,0,0,0.45);
    border-bottom: 3px solid #C9922A;
}

.ss-brand {
    color: #E8D9A0 !important;
    font-size: 1.25rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.ss-brand:hover { color: #fff !important; text-decoration: none; }

.ss-brand-icon {
    font-size: 1.4rem;
}

.ss-toggler {
    margin-left: auto;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(201,146,42,0.5);
    border-radius: 4px;
    color: #E8D9A0;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}

.ss-toggler:hover { background: rgba(201,146,42,0.2); }

.ss-nav-links {
    display: none;
    width: 100%;
    padding: 0.5rem 0;
    flex-direction: column;
    border-top: 1px solid rgba(201,146,42,0.3);
}

.ss-nav-links.open {
    display: flex;
}

.ss-nav-links .nav-link {
    color: #C8D8C2 !important;
    padding: 0.6rem 0.75rem;
    border-radius: 5px;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

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

.ss-nav-links .nav-link.active {
    background: rgba(201,146,42,0.25);
    color: #F5D97A !important;
    font-weight: 600;
    border-left: 3px solid #C9922A;
}

.ss-nav-divider {
    border-top: 1px solid rgba(201,146,42,0.25);
    margin: 0.4rem 0;
}

/* ── Page layout ── */
.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.page-content {
    flex: 1;
    padding: 1rem;
}

/* ── Buttons ── */
.btn-primary {
    background-color: #2B5329;
    border-color: #2B5329;
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: #1A3A1C;
    border-color: #1A3A1C;
    color: #fff;
}
.btn-primary:active {
    background-color: #1A3A1C !important;
    border-color: #1A3A1C !important;
}

.btn-success {
    background-color: #3D7040;
    border-color: #3D7040;
    color: #fff;
}
.btn-success:hover, .btn-success:focus {
    background-color: #2B5329;
    border-color: #2B5329;
    color: #fff;
}

.btn-warning {
    background-color: #C9922A;
    border-color: #C9922A;
    color: #fff;
}
.btn-warning:hover, .btn-warning:focus {
    background-color: #a67420;
    border-color: #a67420;
    color: #fff;
}

.btn-outline-primary {
    color: #2B5329;
    border-color: #2B5329;
}
.btn-outline-primary:hover {
    background-color: #2B5329;
    border-color: #2B5329;
    color: #fff;
}

.btn-outline-success {
    color: #2B5329;
    border-color: #3D7040;
}
.btn-outline-success:hover {
    background-color: #3D7040;
    border-color: #3D7040;
    color: #fff;
}

/* ── Cards ── */
.card {
    border-color: #D4C89A;
    border-radius: 8px;
    background-color: #FDFAF3;
    box-shadow: 0 1px 5px rgba(46,36,16,0.1);
}

.card-header {
    background-color: #E8DFC6;
    border-bottom-color: #D4C89A;
    font-weight: 600;
    color: #2E2410;
}

/* Section highlight (e.g. selected row bg) */
.table-active, tr.table-active td {
    background-color: rgba(201,146,42,0.12) !important;
}

/* ── Tables — horizontal scroll on mobile ── */
.table-responsive-always {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table { font-size: 0.9rem; }

.table-light thead th {
    background-color: #E8DFC6;
    border-color: #D4C89A;
    color: #2E2410;
}

@media (max-width: 575.98px) {
    .table { font-size: 0.82rem; }
    .table th, .table td { white-space: nowrap; }
}

/* ── Forms ── */
.form-control, .form-select {
    border-color: #C0B088;
    background-color: #FDFAF3;
    min-height: 2.6rem;
    color: #2E2410;
}
.form-control:focus, .form-select:focus {
    border-color: #2B5329;
    background-color: #fff;
    box-shadow: 0 0 0 0.2rem rgba(43,83,41,0.22);
}
.form-control::placeholder { color: #9A8672; }

/* ── Badges ── */
.badge.bg-primary   { background-color: #2B5329 !important; }
.badge.bg-success   { background-color: #3D7040 !important; }
.badge.bg-warning   { background-color: #C9922A !important; color: #fff !important; }
.badge.bg-secondary { background-color: #6B5744 !important; }

/* ── Alerts ── */
.alert-info {
    background-color: #dff0e8;
    border-color: #a8d5ba;
    color: #1A3A1C;
}
.alert-success {
    background-color: #d6edda;
    border-color: #8ec89a;
    color: #1A3A1C;
}

/* ── Nav tabs ── */
.nav-tabs { border-bottom-color: #D4C89A; }

.nav-tabs .nav-link {
    color: #2B5329;
    border-color: transparent;
}
.nav-tabs .nav-link.active {
    color: #1A3A1C;
    font-weight: 700;
    background-color: #FDFAF3;
    border-color: #D4C89A #D4C89A #FDFAF3;
}
.nav-tabs .nav-link:hover {
    color: #1A3A1C;
    border-color: #D4C89A #D4C89A transparent;
}

/* ── List groups ── */
.list-group-item {
    background-color: #FDFAF3;
    border-color: #D4C89A;
}
.list-group-item-action:hover {
    background-color: #EEE5CC;
}

/* ── Mobile-specific overrides ── */
@media (max-width: 575.98px) {
    .page-content { padding: 0.75rem 0.6rem; }
    h2 { font-size: 1.3rem; }
    h4 { font-size: 1.1rem; }
    h5 { font-size: 1rem; }
    .container, .container-fluid { padding-left: 0.5rem; padding-right: 0.5rem; }
    .btn { font-size: 0.88rem; }
    .d-flex.gap-2.flex-wrap { gap: 0.4rem !important; }
}

/* ── Desktop nav: horizontal ── */
@media (min-width: 768px) {
    .ss-toggler { display: none; }

    .ss-nav-links {
        display: flex !important;
        flex-direction: row;
        width: auto;
        margin-left: auto;
        padding: 0;
        align-items: center;
        gap: 0.1rem;
        border-top: none;
    }

    .ss-nav-links .nav-link {
        padding: 0.45rem 0.65rem;
        font-size: 0.88rem;
        border-left: none !important;
    }

    .ss-nav-links .nav-link.active {
        border-bottom: 2px solid #C9922A;
        border-left: none;
        border-radius: 0;
        background: rgba(201,146,42,0.15);
    }

    .ss-nav-divider {
        border-top: none;
        border-left: 1px solid rgba(201,146,42,0.3);
        height: 1.5rem;
        margin: 0 0.25rem;
        width: 0;
    }
}

/* ── Validation ── */
.valid.modified:not([type=checkbox]) { outline: 1px solid #3D7040; }
.invalid { outline: 1px solid #c0392b; }
.validation-message { color: #c0392b; }

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background-color: #f8f5f0;
    color: #2c2c2c;
    margin: 0;
    min-height: 100vh;
}

/* ── Links ── */
a { color: #2d6a4f; }
a:hover { color: #1b4332; }
.btn-link { color: #2d6a4f; }

/* ── Top Navbar ── */
.ss-navbar {
    background-color: #1b4332;
    padding: 0 1rem;
    min-height: 56px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

.ss-brand {
    color: #e9d8b4 !important;
    font-size: 1.25rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.ss-brand:hover { color: #fff !important; text-decoration: none; }

.ss-brand-icon {
    font-size: 1.4rem;
}

.ss-toggler {
    margin-left: auto;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 4px;
    color: #e9d8b4;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}

.ss-toggler:hover { background: rgba(255,255,255,0.22); }

.ss-nav-links {
    display: none;
    width: 100%;
    padding: 0.5rem 0;
    flex-direction: column;
}

.ss-nav-links.open {
    display: flex;
}

.ss-nav-links .nav-link {
    color: #c8ddd0 !important;
    padding: 0.6rem 0.75rem;
    border-radius: 6px;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.ss-nav-links .nav-link:hover,
.ss-nav-links .nav-link.active {
    background: rgba(255,255,255,0.18);
    color: #fff !important;
}

.ss-nav-links .nav-link.active {
    font-weight: 600;
}

.ss-nav-divider {
    border-top: 1px solid rgba(255,255,255,0.12);
    margin: 0.4rem 0;
}

/* ── Page layout ── */
.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.page-content {
    flex: 1;
    padding: 1rem;
}

/* ── Buttons ── */
.btn-primary {
    background-color: #2d6a4f;
    border-color: #2d6a4f;
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: #1b4332;
    border-color: #1b4332;
    color: #fff;
}

.btn-success {
    background-color: #40916c;
    border-color: #40916c;
    color: #fff;
}
.btn-success:hover, .btn-success:focus {
    background-color: #2d6a4f;
    border-color: #2d6a4f;
    color: #fff;
}

.btn-outline-primary {
    color: #2d6a4f;
    border-color: #2d6a4f;
}
.btn-outline-primary:hover {
    background-color: #2d6a4f;
    border-color: #2d6a4f;
    color: #fff;
}

/* ── Cards ── */
.card {
    border-color: #e0d8cc;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}

.card-header {
    background-color: #eae3d8;
    border-bottom-color: #e0d8cc;
    font-weight: 600;
}

/* ── Tables — horizontal scroll on mobile ── */
.table-responsive-always {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table { font-size: 0.9rem; }

@media (max-width: 575.98px) {
    .table { font-size: 0.82rem; }
    .table th, .table td { white-space: nowrap; }
}

/* ── Forms ── */
.form-control, .form-select {
    border-color: #ccc3b5;
    background-color: #fff;
    min-height: 2.6rem;  /* easier tap target on mobile */
}
.form-control:focus, .form-select:focus {
    border-color: #2d6a4f;
    box-shadow: 0 0 0 0.2rem rgba(45,106,79,0.25);
}

/* ── Badges ── */
.badge.bg-primary { background-color: #2d6a4f !important; }
.badge.bg-success { background-color: #40916c !important; }

/* ── Nav tabs ── */
.nav-tabs .nav-link {
    color: #2d6a4f;
}
.nav-tabs .nav-link.active {
    color: #1b4332;
    font-weight: 600;
    border-bottom-color: transparent;
}
.nav-tabs .nav-link:hover {
    color: #1b4332;
}

/* ── Mobile-specific overrides ── */
@media (max-width: 575.98px) {
    .page-content { padding: 0.75rem 0.6rem; }
    h2 { font-size: 1.3rem; }
    h4 { font-size: 1.1rem; }
    h5 { font-size: 1rem; }
    .container, .container-fluid { padding-left: 0.5rem; padding-right: 0.5rem; }
    .btn { font-size: 0.88rem; }
    /* Stack button groups vertically on xs */
    .d-flex.gap-2.flex-wrap { gap: 0.4rem !important; }
}

/* ── Desktop nav: horizontal ── */
@media (min-width: 768px) {
    .ss-toggler { display: none; }

    .ss-nav-links {
        display: flex !important;
        flex-direction: row;
        width: auto;
        margin-left: auto;
        padding: 0;
        align-items: center;
        gap: 0.15rem;
    }

    .ss-nav-links .nav-link {
        padding: 0.45rem 0.7rem;
        font-size: 0.88rem;
    }

    .ss-nav-divider {
        border-top: none;
        border-left: 1px solid rgba(255,255,255,0.18);
        height: 1.5rem;
        margin: 0 0.3rem;
        width: 0;
    }
}

/* ── Footer ── */
.ss-footer {
    background-color: #1A3A1C;
    color: rgba(255, 255, 255, 0.7);
    border-top: 3px solid #C9922A;
    padding: 0.75rem 1.5rem;
    text-align: center;
    font-size: 0.82rem;
}

.ss-footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.ss-footer-build {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 0.75rem;
    opacity: 0.6;
}

@media (max-width: 576px) {
    .ss-footer-content {
        flex-direction: column;
        gap: 0.25rem;
    }
}

/* ── Validation ── */
.valid.modified:not([type=checkbox]) { outline: 1px solid #40916c; }
.invalid { outline: 1px solid #dc3545; }
.validation-message { color: #dc3545; }