/* =============================================
   Happy House Dart League — Main.css
   Theme: Light, clean, warm — maroon + gold brand
   ============================================= */

:root {
    --maroon:          #7E1D23;
    --maroon-dark:     #5a1219;
    --maroon-light:    #a32a32;
    --gold:            #C9980A;
    --gold-bright:     #ECB92A;
    --gold-bg:         #fdf6e3;
    --body-bg:         #f5f2ee;
    --surface:         #ffffff;
    --surface-2:       #faf8f5;
    --border:          #e8e0d8;
    --text-primary:    #1a1210;
    --text-secondary:  #5c4f4a;
    --text-muted:      #9c8e88;
}

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

body {
    margin: 0;
    min-height: 100vh;
    background-color: var(--body-bg);
    color: var(--text-primary);
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ── Navbar ───────────────────────────────── */
.navbar {
    background: linear-gradient(135deg, var(--maroon-dark) 0%, var(--maroon) 100%);
    border-bottom: 3px solid var(--gold-bright);
    box-shadow: 0 2px 12px rgba(90,18,25,0.18);
    padding-top: .6rem;
    padding-bottom: .6rem;
}

.navbar-brand {
    color: #fff !important;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: .01em;
}

.navbar-brand .bi-bullseye {
    color: var(--gold-bright);
    font-size: 1.2rem;
}

.nav-link {
    color: rgba(255,255,255,.85) !important;
    font-size: .88rem;
    font-weight: 500;
    padding: .35rem .6rem !important;
    border-radius: 6px;
    transition: background .15s, color .15s;
    cursor: pointer;
}

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

.navbar-toggler {
    border-color: rgba(255,255,255,.3);
}

/* ── Main container ───────────────────────── */
main.container {
    padding-top: 1.75rem;
    padding-bottom: 2rem;
}

/* ── Cards ────────────────────────────────── */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: .75rem !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.05);
    color: var(--text-primary);
}

.card.glass {
    background: var(--surface);
    border: 1px solid var(--border);
    backdrop-filter: none;
}

.card-body { color: var(--text-primary); }

/* ── Section headings ─────────────────────── */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--maroon);
    font-weight: 700;
}

/* ── Tables ───────────────────────────────── */
.table {
    color: var(--text-primary);
    margin-bottom: 0;
}

.table > :not(caption) > * > * {
    background-color: transparent;
    color: var(--text-primary);
    border-color: var(--border);
    padding: .65rem .75rem;
}

.table thead th {
    background-color: var(--surface-2);
    color: var(--text-secondary);
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}

.table-hover tbody tr:hover > td {
    background-color: #fcf5f5;
    color: var(--maroon);
}

.table td.fw-semibold { color: var(--text-primary); }

/* ── Buttons ──────────────────────────────── */
.btn-primary {
    background-color: var(--maroon);
    border-color: var(--maroon);
    color: #fff;
    font-weight: 500;
}
.btn-primary:hover {
    background-color: var(--maroon-dark);
    border-color: var(--maroon-dark);
    color: #fff;
}

.btn-outline-primary {
    --bs-btn-color:              var(--maroon);
    --bs-btn-border-color:       var(--maroon);
    --bs-btn-hover-bg:           var(--maroon);
    --bs-btn-hover-color:        #fff;
    --bs-btn-hover-border-color: var(--maroon);
    --bs-btn-active-bg:          var(--maroon-dark);
    --bs-btn-active-color:       #fff;
    font-weight: 500;
}

.btn-outline-light {
    --bs-btn-color:        rgba(255,255,255,.9);
    --bs-btn-border-color: rgba(255,255,255,.4);
    --bs-btn-hover-bg:     rgba(255,255,255,.15);
    --bs-btn-hover-color:  #fff;
}

.btn-success {
    background-color: #2d7a3a;
    border-color: #2d7a3a;
}

/* ── Form controls ────────────────────────── */
.form-control, .form-select {
    background-color: var(--surface);
    border-color: var(--border);
    color: var(--text-primary);
    border-radius: .5rem;
    font-size: .9rem;
}

.form-control:focus, .form-select:focus {
    border-color: var(--maroon);
    box-shadow: 0 0 0 .2rem rgba(126,29,35,.15);
    color: var(--text-primary);
    background-color: var(--surface);
}

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

/* ── Links ────────────────────────────────── */
a { color: var(--maroon); text-decoration: none; }
a:hover { color: var(--maroon-light); text-decoration: underline; }

.link-light { color: var(--text-primary) !important; }
.link-light:hover { color: var(--maroon) !important; }

/* ── Text utilities ───────────────────────── */
.text-muted  { color: var(--text-muted) !important; }
.text-secondary { color: var(--text-secondary) !important; }

/* ── Admin tabs ───────────────────────────── */
#adminTabs {
    background: transparent;
    border-bottom: 3px solid var(--maroon);
    padding: 0;
    gap: .25rem;
}
#adminTabs .nav-item { margin-bottom: 0; }
#adminTabs .nav-link {
    color: rgba(255,255,255,.8) !important;
    border: none !important;
    border-radius: .4rem .4rem 0 0 !important;
    padding: .55rem 1.1rem !important;
    font-size: .9rem;
    background-color: var(--maroon) !important;
    transition: background-color .15s, color .15s;
}
#adminTabs .nav-link:hover {
    color: #fff !important;
    background-color: var(--maroon-light) !important;
}
#adminTabs .nav-link.active {
    color: var(--maroon-dark) !important;
    background-color: var(--gold-bright) !important;
    font-weight: 600;
}

/* ── Badges ───────────────────────────────── */
.badge-soft {
    background: #f8eeee;
    border: 1px solid #e8d0d0;
    color: var(--maroon);
    font-weight: 500;
}

/* season chip */
.season-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .18rem .6rem;
    border-radius: 50px;
    background: var(--gold-bg);
    border: 1px solid #e8d8a0;
    font-size: .78rem;
    font-weight: 500;
    color: #7a5c00;
}

/* section label accent */
.section-label {
    display: inline-block;
    padding: 2px 10px;
    background: #fdf0f0;
    border-left: 3px solid var(--maroon);
    border-radius: 0 4px 4px 0;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--maroon);
    margin-bottom: .5rem;
}

/* ── Footer ───────────────────────────────── */
footer {
    border-top: 1px solid var(--border) !important;
    color: var(--text-muted);
    font-size: .84rem;
    padding-top: 1rem;
    padding-bottom: 1.25rem;
    margin-top: 2rem;
}

footer .bi-bullseye { color: var(--gold); }

/* ── Misc ─────────────────────────────────── */
.anchor { scroll-margin-top: 80px; }
.card-img-top { object-fit: cover; height: 180px; }
.rounded-4 { border-radius: .75rem !important; }
code { color: var(--maroon); background: #fdf0f0; padding: .1em .35em; border-radius: 4px; font-size: .88em; }

/* ── Modal ────────────────────────────────── */
.modal-content {
    border-radius: .75rem;
    border: 1px solid var(--border);
}

.modal-header {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    border-radius: .75rem .75rem 0 0;
}

/* ── Alerts ───────────────────────────────── */
.alert-info {
    background: #eef6ff;
    border-color: #b6d9f7;
    color: #1a4a6e;
}

.alert-success {
    background: #edfaf2;
    border-color: #a3e0bc;
    color: #1a5c38;
}

/* ── Table success highlight ──────────────── */
.table-success > td, tr.table-success > td {
    background-color: #edfaf2 !important;
}