:root {
    --maroon: #6b1d2a;
    --maroon-dark: #4a1220;
    --gold: #c9a227;
    --gold-soft: #f6eccb;
    --ink: #2b2b2b;
    --bg: #f7f5f0;
    --surface: #fff;
    --surface-2: #fbf8ef;
    --line: #e6e0d0;
    --line-2: #eee3c4;
    --muted: #8a7f63;
    --head-ink: #5a4a2a;
    --title: var(--maroon);
    --photo-bg: #f1f1f1;
}
:root[data-bs-theme="dark"] {
    --bg: #14100d;
    --ink: #ece4d6;
    --surface: #1f1915;
    --surface-2: #2a221c;
    --line: #3a3027;
    --line-2: #4a3d2c;
    --muted: #b3a586;
    --head-ink: #e2cf9d;
    --title: #e6c35c;
    --gold-soft: #3b2f15;
    --photo-bg: #2a221c;
    --bs-body-bg: var(--surface);
    --bs-body-color: var(--ink);
    --bs-border-color: var(--line);
    --bs-secondary-bg: var(--surface-2);
    --bs-tertiary-bg: var(--surface-2);
    --bs-link-color: #e6c35c;
    --bs-link-color-rgb: 230, 195, 92;
    --bs-link-hover-color: #f3dc8a;
    --bs-link-hover-color-rgb: 243, 220, 138;
}
[data-bs-theme="dark"] .table-light { --bs-table-bg: var(--surface-2); --bs-table-color: var(--ink); }


html { font-size: 15px; }
body { background: var(--bg); color: var(--ink); min-height: 100vh; }

.topbar {
    position: sticky; top: 0; z-index: 1030;
    display: flex; align-items: center; padding: .55rem 1rem;
    background: linear-gradient(90deg, var(--maroon-dark), var(--maroon));
    border-bottom: 3px solid var(--gold);
}
.brand { white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; margin-right: .5rem; color: #fff; font-weight: 700; font-size: 1.15rem; text-decoration: none; letter-spacing: .3px; }
.brand:hover { color: #f6eccb; }
.brand-mark { color: var(--gold); }

.shell { display: flex; min-height: calc(100vh - 56px); }
.sidebar {
    width: 250px; border-right: 3px solid var(--gold);
    background: linear-gradient(180deg, var(--maroon) 0%, var(--maroon-dark) 100%);
}
@media (min-width: 992px) {
    .sidebar { position: sticky; top: 56px; height: calc(100vh - 56px); overflow-y: auto; flex-shrink: 0; }
}
.sidebar .offcanvas-header { border-bottom: 1px solid rgba(201,162,39,.4); }
.sidebar .offcanvas-header .brand { color: #fff !important; }
.sidebar .offcanvas-header .btn-close { filter: invert(1) grayscale(1) brightness(2); }
.sidebar .nav-link { display: block; color: #f3e6e8; padding: .42rem 1.1rem; border-left: 3px solid transparent; font-size: .93rem; }
.sidebar .nav-link:hover { background: rgba(255,255,255,.08); color: #f6eccb; }
.sidebar .nav-link.active { background: rgba(201,162,39,.18); color: #fff; border-left-color: var(--gold); font-weight: 600; }
.nav-head { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); padding: .9rem 1.1rem .25rem; font-weight: 700; border-top: 1px solid rgba(201,162,39,.25); margin-top: .35rem; }

.content { flex: 1; min-width: 0; padding: 1.25rem; }
@media (max-width: 575px) { .content { padding: .75rem; } }

.page-title { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.page-title h1 { font-size: 1.4rem; margin: 0; color: var(--title); font-weight: 700; }

.card { border: 1px solid var(--line); border-radius: .6rem; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.card-header { background: var(--surface-2); border-bottom: 1px solid var(--line); font-weight: 600; color: var(--title); }

.btn-gold { background: var(--gold); border-color: var(--gold); color: #2b1a00; font-weight: 600; }
.btn-gold:hover { background: #b38e1c; border-color: #b38e1c; color: #fff; }
.btn-maroon { background: var(--maroon); border-color: var(--maroon); color: #fff; }
.btn-maroon:hover { background: var(--maroon-dark); color: #fff; }

.stat { padding: 1rem; border-radius: .6rem; background: var(--surface); border: 1px solid var(--line); height: 100%; }
.stat .label { font-size: .78rem; text-transform: uppercase; color: var(--muted); letter-spacing: .05em; }
.stat .value { font-size: 1.5rem; font-weight: 700; color: var(--title); }

.table thead th { background: var(--surface-2); color: var(--head-ink); font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.table td, .table th { vertical-align: middle; }
.table tfoot td, .table tfoot th { font-weight: 700; background: var(--surface-2); }
.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

.summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
.summary-grid > div { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: .5rem; padding: .5rem .75rem; }
.summary-grid .k { font-size: .75rem; color: var(--muted); text-transform: uppercase; }
.summary-grid .v { font-weight: 700; }

.member-photo { width: 90px; height: 110px; object-fit: cover; border-radius: .4rem; border: 1px solid var(--line); background: var(--photo-bg); }
.member-photo-sm { width: 36px; height: 44px; object-fit: cover; border-radius: .25rem; }

.form-label { font-weight: 600; font-size: .88rem; margin-bottom: .2rem; }
.required::after { content: " *"; color: #c00; }

.badge-active { background: #198754; }
.badge-closed { background: #6c757d; }
.badge-cancelled { background: #dc3545; }

/* ---------- Mobile ---------- */
.bottom-nav { display: none; }
@media screen and (max-width: 991.98px) {
    body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
    .bottom-nav {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
        padding-bottom: env(safe-area-inset-bottom);
        background: linear-gradient(180deg, var(--maroon), var(--maroon-dark));
        border-top: 3px solid var(--gold); box-shadow: 0 -2px 8px rgba(0,0,0,.15);
    }
    .bottom-nav a, .bottom-nav button {
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
        height: 57px; color: #f3e6e8; font-size: .7rem; text-decoration: none; background: none; border: 0;
    }
    .bottom-nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .bottom-nav .active { color: var(--gold); font-weight: 600; }
}
@media screen and (max-width: 767.98px) {
    .topbar { padding: .45rem .75rem; }
    .brand { font-size: 1.05rem; }

    .page-title h1 { font-size: 1.2rem; flex-basis: 100%; }
    .page-title .btn { flex: 1 1 auto; }
    .page-title > .d-flex { width: 100%; }

    /* 16px inputs stop iOS zooming in on focus; taller controls are easier to tap */
    .form-control, .form-select { font-size: 16px; min-height: 42px; }
    .form-control-sm, .form-select-sm { min-height: 36px; }
    .btn { min-height: 40px; }
    .btn-sm { min-height: 34px; }
    .content form .btn-lg, .content form .ms-auto:has(> .btn-lg) { width: 100%; }
    .content form .ms-auto:has(> .btn-lg) { margin-left: 0 !important; }

    .stat { padding: .75rem; }
    .stat .value { font-size: 1.2rem; }
    .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .card-header { padding: .6rem .75rem; }
    .list-group-item { padding: .65rem .75rem; }

    /* tables become one card per row, labelled from the header (labels set in site.js) */
    .table-stack thead { display: none; }
    .table-stack, .table-stack tbody, .table-stack tfoot, .table-stack tr { display: block; width: 100%; }
    .table-stack tr { padding: .5rem .75rem; border-bottom: 1px solid var(--line); background: var(--surface); }
    .table-stack tfoot tr { background: var(--surface-2); }
    .table-stack td, .table-stack th {
        display: flex; justify-content: space-between; align-items: center; gap: .75rem;
        padding: .2rem 0; border: 0; text-align: right; white-space: normal; background: transparent; box-shadow: none;
    }
    .table-stack td[data-label]::before {
        content: attr(data-label); flex-shrink: 0; text-align: left;
        font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 600;
    }
    .table-stack td:not([data-label]) { justify-content: flex-start; text-align: left; }
    .table-stack td:first-child { font-weight: 600; font-size: 1rem; }
    .table-stack td.cell-empty { display: none; }
    .table-stack td .form-control, .table-stack td .form-select { width: auto !important; max-width: none !important; flex: 0 1 60%; }
    .table-stack td form { justify-content: flex-end; }
}

/* ---------- Print ---------- */
.print-only { display: none; }
.print-head { text-align: center; border-bottom: 2px solid #000; margin-bottom: .75rem; padding-bottom: .4rem; }
.print-head h2 { margin: 0; font-size: 1.3rem; }
@media print {
    @page { margin: 10mm; }
    html { font-size: 12px; }
    body { background: #fff; }
    .shell { display: block; }
    .content { padding: 0; }
    .print-only { display: block; }
    .card { border: none; box-shadow: none; }
    .card-header { background: none; padding-left: 0; }
    .table thead th, .table tfoot td, .table tfoot th { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    a { text-decoration: none; color: #000; }
}

.receipt { max-width: 560px; margin: 0 auto; background: var(--surface); padding: 1.25rem; border: 1px dashed var(--line); }
@media print { .receipt { border: none; max-width: 100%; } }

/* ---------- Theme toggle ---------- */
.theme-toggle { min-width: 34px; line-height: 1; }
[data-bs-theme="dark"] .theme-toggle .ti-moon,
:root:not([data-bs-theme="dark"]) .theme-toggle .ti-sun { display: none; }

/* ---------- Installable app ---------- */
/* in the home-screen app on iPhone the page runs under the status bar */
.topbar { padding-top: calc(.55rem + env(safe-area-inset-top)); }
.sidebar .install-link { width: 100%; text-align: left; background: none; border-top: 0; border-right: 0; border-bottom: 0; color: var(--gold); font-weight: 600; }
.install-banner {
    position: fixed; left: 12px; right: 12px; z-index: 1031;
    bottom: calc(68px + env(safe-area-inset-bottom));
    display: flex; align-items: center; gap: .65rem; padding: .6rem .75rem;
    background: var(--surface); color: var(--ink); border: 1px solid var(--gold); border-radius: .75rem;
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.install-banner img { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; }
.install-banner .btn-close { flex-shrink: 0; }
@media (min-width: 992px) { .install-banner { display: none !important; } }
.ios-steps li { margin-bottom: .5rem; }
.ios-steps svg { width: 20px; height: 20px; vertical-align: -4px; fill: none; stroke: #0a84ff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Language & help ---------- */
.lang-select { width: auto; min-height: 31px !important; font-size: .82rem !important; padding: .2rem 1.75rem .2rem .5rem; }
.topbar .lang-select { background-color: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.5);
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
.topbar .lang-select option { color: var(--ink); background: var(--surface); }
.login-lang { position: absolute; top: .75rem; right: .75rem; }
.help-btn { display: inline-flex; align-items: center; gap: .35rem; }
.help-btn .help-q { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border-radius: 50%;
    background: var(--gold); color: #2b1a00; font-weight: 700; font-size: .8rem; }
.help-panel { --bs-offcanvas-width: 420px; }
.help-panel .offcanvas-header { background: linear-gradient(90deg, var(--maroon-dark), var(--maroon)); color: #fff; border-bottom: 3px solid var(--gold); }
.help-panel .offcanvas-header .btn-close { filter: invert(1) grayscale(1) brightness(2); }
.help-panel .help-intro { font-size: 1rem; }
.help-panel h6 { color: var(--title); font-weight: 700; margin-top: 1rem; text-transform: uppercase; font-size: .78rem; letter-spacing: .05em; }
.help-panel ol, .help-panel ul { padding-left: 1.2rem; }
.help-panel li { margin-bottom: .4rem; }
.help-panel dt { color: var(--title); font-weight: 600; }
.help-panel dd { margin-bottom: .6rem; }
.help-panel .help-notes li::marker { color: var(--gold); }
@media (max-width: 575.98px) {
    .topbar .lang-select { max-width: 92px; }
    .page-title .help-btn { flex: 0 0 auto; }
}

/* ---------- Back button ---------- */
.back-btn { display: inline-flex; align-items: center; gap: .2rem; padding-left: .4rem; }
.back-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 575.98px) { .back-btn { padding: .25rem .35rem; } .topbar .brand { font-size: .98rem; } }