/* ============================================================
   SBC System — Global Design System
   Primary: #0d1b3e (navy)  |  Accent: #d8790f (gold)
   ============================================================ */

/* ── Local fonts: Poppins (body/nav/buttons/headers) / Syncopate (brand name only) ── */
@font-face { font-family: 'Poppins'; src: url('../fonts/Poppins/Poppins-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/Poppins/Poppins-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/Poppins/Poppins-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/Poppins/Poppins-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/Poppins/Poppins-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/Poppins/Poppins-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Syncopate'; src: url('../fonts/Syncopate/Syncopate-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Syncopate'; src: url('../fonts/Syncopate/Syncopate-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

/* ── CSS Variables ────────────────────────────────────────── */
:root {
    --navy:          #0d1b3e;
    --navy-light:    #1a2d5a;
    --navy-lighter:  #253e75;
    --gold:          #d8790f;
    --gold-light:    #e0943f;
    --gold-dark:     #ad610c;
    --gold-muted:    rgba(216,121,15,0.15);
    --white:         #ffffff;
    --page-bg:       #eef1f8;
    --card-bg:       #ffffff;
    --border:        #dde3ed;
    --text:          #0f172a;
    --text-muted:    #475569;
    --text-light:    #7c93b0;
    --red:           #dc2626;
    --red-bg:        #fee2e2;
    --green:         #15803d;
    --green-bg:      #dcfce7;
    --radius:        8px;
    --radius-lg:     12px;
    --shadow:        0 2px 14px rgba(13,27,62,.09);
    --shadow-md:     0 4px 22px rgba(13,27,62,.13);
    --shadow-lg:     0 8px 40px rgba(13,27,62,.18);
    --nav-h:         60px;
    --footer-h:      44px;
    --transition:    .18s ease;
}

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

html { scroll-behavior: smooth; height: 100%; }

body {
    margin: 0;
    padding-bottom: var(--footer-h);
    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    background: var(--page-bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ── Fixed bottom footer ──────────────────────────────────── */
.app-footer {
    background: var(--navy);
    color: rgba(255,255,255,.5);
    text-align: center;
    padding: 0 20px;
    font-size: 13px;
    line-height: var(--footer-h);
    height: var(--footer-h);
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 400;
    border-top: 1px solid rgba(255,255,255,.07);
    letter-spacing: .2px;
}
.admin-wrap { flex: 1; }

a { color: var(--navy-lighter); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--gold); }

h1,h2,h3,h4,h5,h6 { color: var(--navy); margin-top: 0; font-weight: 700; line-height: 1.3; font-family: 'Poppins', 'Segoe UI', Arial, sans-serif; }

p { margin: 0 0 10px; color: var(--text); }
small { color: var(--text-muted); font-size: 12px; }
hr { border: none; border-top: 1px solid var(--border); margin: 20px 0; }

/* ── Top Navigation Bar ───────────────────────────────────── */
.app-nav {
    position: sticky; top: 0; z-index: 500;
    height: var(--nav-h);
    background: var(--navy);
    display: flex; align-items: center;
    padding: 0 24px;
    gap: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,.25);
}

.app-nav-logo {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none; flex-shrink: 0;
}
.app-nav-logo-badge {
    height: 36px; width: auto;
    object-fit: contain;
    flex-shrink: 0;
}
.app-nav-logo-text {
    font-family: 'Syncopate', 'Poppins', sans-serif;
    font-weight: 700; font-size: 15px;
    color: var(--white); letter-spacing: .3px;
    white-space: nowrap;
}

.b-accent {
    color: var(--gold);
}

.app-nav-spacer { flex: 1; }

.app-nav-links {
    display: flex; align-items: center; gap: 4px; flex-wrap: nowrap;
}
.app-nav-link {
    color: rgba(255,255,255,.75);
    font-size: 13px; font-weight: 700;
    padding: 6px 12px;
    border-radius: 6px;
    transition: background var(--transition), color var(--transition);
    white-space: nowrap;
}
.app-nav-link:hover { background: rgba(255,255,255,.08); color: var(--gold); }
.app-nav-link.active { color: var(--gold); background: var(--gold-muted); }

.app-nav-user {
    display: flex; align-items: center; gap: 10px;
    border-left: 1px solid rgba(255,255,255,.12);
    padding-left: 14px; flex-shrink: 0;
}
.app-nav-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--gold-muted);
    border: 2px solid var(--gold);
    color: var(--gold);
    font-weight: 700; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.app-nav-avatar img { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; }
.ui-icon { width: 1em; height: 1em; vertical-align: -0.15em; display: inline-block; flex-shrink: 0; }

.app-nav-user-info { line-height: 1.2; max-width: 140px; }
.app-nav-user-name  {
    font-size: 13px; font-weight: 600; color: var(--white);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-nav-user-role  { font-size: 11px; color: var(--gold); text-transform: uppercase; letter-spacing: .5px; }

.app-nav-logout {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(220,38,38,.18);
    color: #fca5a5;
    font-size: 12px; font-weight: 700;
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid rgba(220,38,38,.3);
    transition: background var(--transition);
    white-space: nowrap;
}
.app-nav-logout:hover { background: rgba(220,38,38,.32); color: #fca5a5; }
/* The icon reads as too small matching the 12px label text 1:1 — bump it up on
   its own instead of enlarging the whole button. */
.app-nav-logout svg.lucide { width: 16px; height: 16px; }

/* ── Notification bell (member/user chrome) ─────────────────────────────── */
.notif-bell-wrap { position: relative; flex-shrink: 0; }
.notif-bell-btn {
    position: relative;
    background: none; border: none; cursor: pointer;
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; line-height: 1;
    color: rgba(255,255,255,.85);
    transition: background var(--transition);
}
.notif-bell-btn:hover { background: rgba(255,255,255,.1); }
.notif-bell-dot {
    position: absolute; top: 5px; right: 6px;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--gold);
    border: 2px solid var(--navy);
}

.notif-popup {
    display: none;
    position: absolute; top: calc(100% + 10px); right: 0;
    width: 340px; max-width: 90vw;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 900;
    overflow: hidden;
}
.notif-popup.open { display: block; }
.notif-popup-hd {
    padding: 13px 16px;
    font-weight: 700; font-size: 12px;
    color: var(--navy);
    text-transform: uppercase; letter-spacing: .5px;
    border-bottom: 1px solid var(--border);
}
[data-theme="dark"] .notif-popup-hd { color: var(--gold-light); }
.notif-popup-empty {
    padding: 30px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}
.notif-popup-item {
    display: block;
    padding: 11px 16px;
    border-bottom: 1px solid var(--border);
}
.notif-popup-item:last-of-type { border-bottom: none; }
.notif-popup-item.unread { background: var(--gold-muted); }
a.notif-popup-item { text-decoration: none; color: inherit; cursor: pointer; transition: background var(--transition); }
a.notif-popup-item:hover { background: var(--page-bg); }
a.notif-popup-item.unread:hover { background: var(--gold-muted); filter: brightness(0.97); }
.notif-popup-item-msg { font-size: 13px; color: var(--text); line-height: 1.4; }
.notif-popup-item-time { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.notif-popup-viewall {
    display: block;
    text-align: center;
    padding: 11px;
    font-size: 12.5px; font-weight: 700;
    color: var(--navy);
    background: var(--page-bg);
    border-top: 1px solid var(--border);
    text-transform: uppercase; letter-spacing: .4px;
}
.notif-popup-viewall:hover { color: var(--gold); }
[data-theme="dark"] .notif-popup-viewall { color: var(--gold-light); }

@media (max-width: 480px) {
    .notif-popup { position: fixed; top: var(--nav-h); right: 8px; left: 8px; width: auto; }
}

.app-nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 34px; height: 34px;
    background: none; border: none; cursor: pointer;
    padding: 0; flex-shrink: 0;
}
.app-nav-toggle span {
    display: block; width: 22px; height: 2px;
    background: var(--white);
    border-radius: 2px;
    transition: transform var(--transition), opacity var(--transition);
}
.app-nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.app-nav-toggle.open span:nth-child(2) { opacity: 0; }
.app-nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Page wrapper ─────────────────────────────────────────── */
.page-wrap {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 28px 20px 60px;
    box-sizing: border-box;
}
.page-header {
    margin-bottom: 28px;
    padding-bottom: 18px;
    border-bottom: 2px solid var(--border);
    display: flex; align-items: flex-end; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
}
.page-header h2 { margin: 0; font-size: 22px; }
.page-header p  { margin: 0; color: var(--text-muted); font-size: 14px; }

/* ── Auth container (general page card) ───────────────────── */
.auth-container {
    width: 100%;
    max-width: 860px;
    margin: 32px auto;
    background: var(--card-bg);
    padding: 28px 30px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    border-top: 4px solid var(--navy);
}
.auth-container h2 {
    margin: 0 0 20px;
    font-size: 20px;
    color: var(--navy);
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
.auth-container > p:first-of-type { margin-bottom: 16px; }

/* ── Tournament format cards (replaces the format <select>) ──── */
.format-card-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.format-card {
    position: relative;
    flex: 1 1 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 16px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--white);
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.format-card:hover { border-color: var(--navy-lighter); }
.format-card input[type="radio"] {
    position: absolute;
    top: 10px; left: 10px;
    width: 16px; height: 16px;
    margin: 0;
    accent-color: var(--navy);
}
.format-card:has(input:checked),
.format-card.selected {
    border-color: var(--navy);
    background: rgba(13,27,62,.05);
    box-shadow: 0 0 0 3px rgba(13,27,62,.08);
}
.format-card-diagram {
    width: 100%;
    max-width: 130px;
    color: var(--navy-lighter);
}
.format-card-diagram svg { display: block; width: 100%; height: auto; }
.format-card:has(input:checked) .format-card-diagram,
.format-card.selected .format-card-diagram { color: var(--gold-dark); }
.format-card-title { font-weight: 700; font-size: 14px; color: var(--navy); }
.format-card-tagline { font-size: 12px; color: var(--text-muted); }

/* ── Bracket preview layout (main card + format-info sidebar) ── */
.bracket-layout {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    max-width: 1140px;
    margin: 32px auto;
    padding: 0 20px;
    box-sizing: border-box;
}
.bracket-layout .auth-container.bracket-main {
    flex: 2 1 560px;
    margin: 0;
    max-width: none;
}
.bracket-side {
    flex: 1 1 260px;
    max-width: 300px;
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    border-top: 4px solid var(--gold);
    padding: 22px 22px 24px;
    position: sticky;
    top: 20px;
}
.bracket-side h3 {
    margin: 0 0 14px;
    font-size: 17px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.bracket-side h4 {
    margin: 16px 0 4px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--gold-dark);
}
.bracket-side-diagram { color: var(--navy-lighter); margin-bottom: 6px; }
.bracket-side-diagram svg { display: block; width: 100%; height: auto; }
.bracket-side-desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin: 0; }
@media (max-width: 900px) {
    .bracket-layout { flex-direction: column; padding: 0 16px; }
    .bracket-side { position: static; max-width: none; width: 100%; }
}

/* ── Bracket card header (title + Back, space-between) ───────── */
.bracket-card-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
.bracket-card-hd h2 { margin: 0; padding: 0; border: none; }

/* ── Bracket tree diagram (single elimination) ───────────────── */
.bracket-diagram-wrap {
    overflow-x: auto;
    margin-bottom: 26px;
    padding-bottom: 10px;
}
.bracket-diagram {
    display: grid;
    min-width: max-content;
}
.bracket-round-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-muted);
    text-align: center;
    padding-bottom: 10px;
}
.bracket-node {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 150px;
}
/* Each non-round-1 node draws its connector in two pieces so the line
   actually merges at the gutter's midpoint instead of running the full
   gutter width at the wrong height (which read as a "flipped" connector):
   .bracket-connector is the "[" — a vertical bar at the midpoint with
   stubs reaching left to touch each of the two child matches — and
   .bracket-connector-stub is the short final segment from that midpoint
   rightward into this node. --half-gap is set on .bracket-diagram. */
.bracket-connector {
    position: absolute;
    right: calc(100% + var(--half-gap));
    top: 50%;
    transform: translateY(-50%);
    width: var(--half-gap);
    border-top: 2px solid var(--border);
    border-bottom: 2px solid var(--border);
    border-right: 2px solid var(--border);
    box-sizing: border-box;
    pointer-events: none;
}
.bracket-connector-stub {
    position: absolute;
    right: 100%;
    top: 50%;
    width: var(--half-gap);
    border-top: 2px solid var(--border);
    pointer-events: none;
}
.bracket-box {
    width: 100%;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--white);
    font-size: 12px;
    box-shadow: var(--shadow);
}
.bracket-box-placeholder { border-style: dashed; box-shadow: none; opacity: .6; }
.bracket-slot {
    max-width: 150px;
    padding: 6px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text);
}
.bracket-slot + .bracket-slot { border-top: 1px solid var(--border); }
.bracket-slot-winner { font-weight: 700; color: var(--navy); background: var(--gold-muted); }
.bracket-slot-bye { color: var(--text-light); font-style: italic; }
.rr-cell-self { background: var(--page-bg); }
.rr-name {
    display: inline-block;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* ── Player count badge (create/edit-players textarea) ───────── */
.player-count-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 9px;
    border-radius: 999px;
    background: var(--gold-muted);
    color: var(--gold-dark);
    font-size: 11px;
    font-weight: 700;
}

/* ── One-input-per-player list (create / edit players) ───────── */
.player-inputs-label { display: block; margin-bottom: 8px; }
.player-input-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 340px;
    overflow-y: auto;
    padding-right: 4px;
    margin-bottom: 10px;
}
.player-input-row { display: flex; align-items: center; gap: 8px; }
.player-input-row input { flex: 1; min-width: 0; margin: 0; }
.player-input-num {
    flex: 0 0 26px;
    text-align: right;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
}
.player-input-remove {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.player-input-remove:hover:not(:disabled) { color: #b91c1c; border-color: #b91c1c; }
.player-input-remove:disabled { opacity: .35; cursor: not-allowed; }
.player-input-add:disabled { opacity: .5; cursor: not-allowed; }

/* ── 3rd-place match option (create form) ─────────────────────── */
.third-place-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
}
.third-place-option input { margin-top: 3px; }
.third-place-option.is-disabled { opacity: .55; cursor: not-allowed; }
.third-place-option-title { font-weight: 700; font-size: 14px; color: var(--navy); }
.third-place-option-hint { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* ── 3rd-place match card under the bracket tree ──────────────── */
.bracket-third-place { margin-top: 18px; max-width: 220px; }
.bracket-third-place .bracket-round-label { text-align: left; }

/* ── Manual bracket arrangement ───────────────────────────────── */
.arrange-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
.arrange-match {
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.arrange-match-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-muted);
}

/* ── Auth pages (login / signup) ──────────────────────────── */
body.page-auth {
    background: var(--navy);
    min-height: 100vh;
    display: flex; flex-direction: column;
}
body.page-auth .app-nav { display: none; }

.auth-back-btn {
    position: fixed;
    top: 20px; left: 20px;
    z-index: 50;
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.1);
    color: var(--white);
    border: 1px solid rgba(255,255,255,.25);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px; font-weight: 600;
    text-decoration: none;
    transition: background var(--transition);
}
.auth-back-btn:hover { background: rgba(255,255,255,.2); color: var(--white); }

.auth-split {
    flex: 1;
    display: flex;
    min-height: 100vh;
}

.auth-brand {
    width: 380px; flex-shrink: 0;
    background: linear-gradient(160deg, var(--navy) 0%, var(--navy-light) 60%, #0f224f 100%);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 48px 40px;
    text-align: center;
    border-right: 1px solid rgba(216,121,15,.2);
}
.auth-brand-logo {
    height: 72px; width: auto;
    object-fit: contain;
    margin-bottom: 20px;
}
.auth-brand h1 {
    font-family: 'Syncopate', 'Poppins', sans-serif;
    color: var(--white);
    font-size: 22px; font-weight: 700;
    margin: 0 0 10px;
    line-height: 1.25;
}
.auth-brand p { color: rgba(255,255,255,.6); font-size: 14px; margin: 0 0 32px; }
.auth-brand-tagline {
    color: var(--gold);
    font-size: 12px; font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.auth-form-panel {
    flex: 1;
    background: var(--white);
    display: flex; align-items: center; justify-content: center;
    padding: 48px 40px;
}
.auth-form-inner { width: 100%; max-width: 400px; }
.auth-form-inner h2 {
    font-size: 24px; margin: 0 0 6px;
    color: var(--navy);
}
.auth-form-inner .auth-form-sub {
    color: var(--text-muted); font-size: 14px; margin-bottom: 28px;
}

@media (max-width: 700px) {
    .auth-split { flex-direction: column; }
    .auth-brand { width: 100%; min-height: 180px; padding: 32px 24px; }
    .auth-form-panel { padding: 32px 20px; }
}

/* ── Generic modal (popups) ───────────────────────────────── */
.modal-bg {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.modal-bg.hidden { display: none; }
.modal-box {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: 26px;
    max-width: 480px; width: 100%;
    max-height: 85vh; overflow-y: auto; scroll-behavior: smooth;
    box-shadow: 0 25px 60px rgba(0,0,0,.25);
}
.modal-box h3 { margin: 0; font-size: 19px; }
.modal-btns { display: flex; justify-content: space-between; margin-top: 20px; }

/* ── Forms ────────────────────────────────────────────────── */
.form-group { margin-bottom: 14px; }

label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="tel"],
input[type="time"],
select,
textarea {
    resize: none;
    width: 100%;
    padding: 10px 13px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    color: var(--text);
    background: var(--white);
    transition: border-color var(--transition), box-shadow var(--transition);
    box-sizing: border-box;
    font-family: inherit;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--navy-lighter);
    box-shadow: 0 0 0 3px rgba(13,27,62,.1);
}
/* The dropdown's own open/close animation is native OS chrome and outside CSS's
   reach in every browser — this is the achievable "smoother dropdown": the
   closed control eases into its hover/focus state instead of snapping, so
   picking one already feels more responsive before the native popup even opens. */
select:hover { border-color: var(--navy-lighter); cursor: pointer; }
input::placeholder, textarea::placeholder { color: var(--text-light); }
input[type="checkbox"] { width: auto; }

/* Search boxes (every page's .xx-search-wrap input, the modal product/racket/
   string pickers, and the public tournaments search) carry no box shadow, not
   even the global focus ring above — the border color change still marks focus. */
[class*="search-wrap"] input,
[class*="search-wrap"] input:focus,
input[name^="search"],
input[name^="search"]:focus,
input[type="search"],
input[type="search"]:focus,
#puBrowserSearch, #puBrowserSearch:focus,
#rentalPickerSearch, #rentalPickerSearch:focus,
#stringingPickerSearch, #stringingPickerSearch:focus,
#searchInput, #searchInput:focus { box-shadow: none; }

/* ── Buttons ──────────────────────────────────────────────── */
button,
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 20px;
    font-size: 14px; font-weight: 700;
    font-family: inherit;
    border: none; border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
    width: auto;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
    background: var(--navy);
    color: var(--white);
}
button:hover, .btn:hover {
    background: var(--navy-light);
    box-shadow: 0 4px 14px rgba(13,27,62,.2);
}
button:active { transform: scale(.98); }
button:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* Primary = Gold */
button[type="submit"],
.btn-primary {
    background: var(--gold);
    color: var(--navy);
    box-shadow: 0 2px 10px rgba(216,121,15,.3);
}
button[type="submit"]:hover,
.btn-primary:hover {
    background: var(--gold-light);
    box-shadow: 0 4px 18px rgba(216,121,15,.45);
}

/* Outlined */
.btn-outline {
    background: transparent;
    color: var(--navy);
    border: 2px solid var(--navy);
}
.btn-outline:hover { background: var(--navy); color: var(--white); }

.btn-outline-gold {
    background: transparent;
    color: var(--gold-dark);
    border: 2px solid var(--gold);
}
.btn-outline-gold:hover { background: var(--gold); color: var(--navy); }

/* Danger — button.btn-danger repeats the class at equal (element+class) specificity to
   button[type="submit"] above so a <button type="submit" class="btn-danger"> stays red
   instead of being repainted gold by the submit-button rule. */
.btn-danger, button.danger, button.btn-danger {
    background: #b91c1c; color: var(--white);
    box-shadow: none;
}
.btn-danger:hover, button.danger:hover, button.btn-danger:hover { background: #991b1b; }

/* Ghost */
.btn-ghost {
    background: var(--page-bg);
    color: var(--text);
    border: 1.5px solid var(--border);
}
.btn-ghost:hover { background: var(--border); }

/* Small */
.btn-sm { padding: 6px 14px; font-size: 11px; border: 1px solid var(--border); }
.btn-sm:hover { background: var(--page-bg); color: var(--navy); }

/* Full width */
.btn-block { width: 100%; }

/* Borderless icon-only button — table row actions (e.g. a "⋮" more-options
   trigger) that shouldn't carry the bordered/padded look of a labelled .btn. */
.btn-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--navy);
    font-size: 15px;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.btn-icon:hover { background: var(--page-bg); color: var(--gold-dark); }

/* Password toggle */
.password-wrap { position: relative; }
.password-wrap input { padding-right: 40px; }
.toggle-password {
    position: absolute; right: 6px; top: 36px;
    width: 27px; height: 27px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: none; color: var(--navy-lighter);
    font-size: 14px;
    border: none; border-radius: 5px;
}
.toggle-password:hover { background: var(--page-bg); color: var(--gold-dark); box-shadow: none; }

/* ── Alerts / Flash ───────────────────────────────────────── */
.alert {
    padding: 12px 16px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 500;
    border-left: 4px solid;
}
.alert-danger  { background: var(--red-bg);   color: #991b1b; border-color: var(--red);   }
.alert-success { background: var(--green-bg); color: #166534; border-color: var(--green); }
.alert-warning { background: #fffbeb;         color: #92400e; border-color: #f59e0b;       }
.alert-info    { background: #eff6ff;         color: #1e40af; border-color: #3b82f6;       }

/* ── Tables ───────────────────────────────────────────────── */
table {
    width: 100%; border-collapse: collapse;
    font-size: 14px;
}
th {
    background: var(--navy);
    color: var(--gold);
    padding: 10px 12px;
    text-align: center;
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .6px;
    white-space: nowrap;
}
td {
    text-align: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: top;
}
tr:last-child td { border-bottom: none; }
/* .res-tbl (the booking-picker availability grid, reservation-picker.css) and
   .today-grid (the dashboard court/time grid, below) opt out — both use their
   own per-cell hover instead of a whole-row background. */
table:not(.res-tbl):not(.today-grid) tr:hover td { background: var(--page-bg); }
.tbl-wrap { width: 100%; overflow-x: auto; scroll-behavior: smooth; border-radius: var(--radius-lg); border: 1px solid var(--border); }

/* ── Dashboard card grid ──────────────────────────────────── */
.dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 18px;
    margin-top: 8px;
}
.dash-card {
    background: var(--card-bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px 20px;
    text-decoration: none;
    display: flex; flex-direction: column; gap: 10px;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.dash-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--navy);
    transition: background var(--transition);
}
.dash-card:hover {
    border-color: var(--gold);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    color: inherit;
}
.dash-card:hover::before { background: var(--gold); }
.dash-card-icon {
    font-size: 26px; line-height: 1;
    width: 48px; height: 48px;
    background: var(--page-bg);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--transition);
}
.dash-card:hover .dash-card-icon { background: var(--gold-muted); }
.dash-card-title {
    font-size: 14px; font-weight: 700;
    color: var(--navy);
}
.dash-card-desc {
    font-size: 12px; color: var(--text-muted); line-height: 1.4;
    flex: 1;
}
.dash-card-arrow {
    font-size: 18px; color: var(--text-light);
    align-self: flex-end;
    transition: color var(--transition), transform var(--transition);
}
.dash-card:hover .dash-card-arrow { color: var(--gold); transform: translateX(3px); }

/* Section headings inside dash */
.dash-section-title {
    font-size: 11px; font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 1px;
    margin: 28px 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

/* Welcome banner */
.dash-welcome {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
    border-radius: var(--radius-lg);
    padding: 24px 28px;
    margin-bottom: 28px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    box-shadow: var(--shadow-md);
}
.dash-welcome-text { min-width: 0; flex: 1 1 auto; }
.dash-welcome-text h2 {
    color: var(--white); margin: 0 0 4px; font-size: 20px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-welcome-text p  { color: rgba(255,255,255,.65); margin: 0; font-size: 14px; }
.dash-welcome-badge {
    background: var(--gold-muted);
    color: var(--gold);
    border: 1px solid rgba(216,121,15,.3);
    border-radius: 20px; padding: 6px 16px;
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px;
    white-space: nowrap;
}

/* ── Info / status pills ──────────────────────────────────── */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .4px;
    white-space: nowrap;
}
.badge-navy    { background: rgba(13,27,62,.1);    color: var(--navy); }
.badge-gold    { background: rgba(216,121,15,.15); color: var(--gold-dark); }
.badge-green   { background: var(--green-bg);      color: var(--green); }
.badge-red     { background: var(--red-bg);        color: var(--red); }
.badge-gray    { background: var(--page-bg);       color: var(--text-muted); }

/* ── Section card ─────────────────────────────────────────── */
.section-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px 24px;
    /* margin-bottom: 20px; */
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.section-card h3 {
    margin: 0 0 16px;
    font-size: 14px; color: var(--navy);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    text-transform: uppercase; letter-spacing: .5px;
}

/* ── Admin sidebar layout ────────────────────────────────────── */
.admin-wrap {
    display: flex;
    min-height: calc(100vh - var(--nav-h));
    align-items: flex-start;
}
.admin-sidebar {
    width: 230px;
    flex-shrink: 0;
    background: var(--navy);
    position: sticky;
    top: var(--nav-h);
    height: calc(100vh - var(--nav-h) - var(--footer-h));
    overflow-y: auto;
    scroll-behavior: smooth;
    padding: 18px 0 20px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.1) transparent;
}
.admin-sidebar::-webkit-scrollbar { width: 4px; }
.admin-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 4px; }

.admin-sidebar-group {
    font-size: 12px; font-weight: 600;
    color: rgba(255,255,255,.28);
    text-transform: uppercase; letter-spacing: 1.2px;
    padding: 10px 20px 10px;
}
.admin-sidebar-group-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%;
    background: none; border: none; outline: none; cursor: pointer;
    text-align: left; font-family: inherit;
}
.admin-sidebar-group-label { display: flex; align-items: center; gap: 8px; }
.admin-sidebar-chevron {
    font-size: 9px;
    transition: transform var(--transition);
}
.admin-sidebar-group-toggle.collapsed .admin-sidebar-chevron {
    transform: rotate(-90deg);
}
.admin-sidebar-body {
    max-height: 1000px;
    overflow: hidden;
    transition: max-height var(--transition);
}
.admin-sidebar-body.collapsed {
    max-height: 0;
}
.admin-sidebar-link {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 20px;
    color: rgba(255,255,255,.68);
    font-size: 13px; font-weight: 500;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.admin-sidebar-link:hover {
    background: rgba(255,255,255,.06);
    color: var(--gold-light);
    border-left-color: rgba(216,121,15,.4);
}
.admin-sidebar-link.active {
    background: rgba(216,121,15,.1);
    color: var(--gold);
    border-left-color: var(--gold);
    font-weight: 600;
}
.admin-sidebar-icon { font-size: 15px; width: 18px; text-align: center; flex-shrink: 0; }

.admin-main {
    flex: 1;
    padding: 28px 30px 60px;
    min-width: 0;
    overflow-x: hidden;
}

/* ── Stat cards ──────────────────────────────────────────────── */
.stat-grid {
    display: grid;
    /* auto-fit (not auto-fill) so a row with fewer cards than fit at this width
       — e.g. the User dashboard's 4 "My Stats" cards — stretches them to fill
       the full row instead of leaving unused empty grid tracks past the last
       card. The narrow sidebar "Player Insight" .stat-grid uses (Reservations/
       Waitlists/Reschedules detail panels) only ever fit one column regardless,
       so this is a no-op there. */
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}
.stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.stat-card-accent {
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
.stat-card-icon {
    position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
    font-size: 38px; opacity: .08; line-height: 1;
    pointer-events: none;
}
/* Icon-font glyphs (Font Awesome <i class="fa-..."> ) size themselves off
   font-size automatically. Lucide icons render as inline <svg> instead, so they
   need an explicit size — 1em keeps them matching whatever font-size their
   container already sets (e.g. .stat-card-icon's 38px watermark), the same way
   the emoji characters they replace used to. Every icon lucide.createIcons()
   renders carries this "lucide" class by default. */
svg.lucide { width: 1em; height: 1em; }
.stat-card-label {
    font-size: 11px; font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .7px;
    margin-bottom: 10px;
}
.stat-card-value {
    font-size: 25px; font-weight: 900;
    color: var(--navy); line-height: 1;
    margin-bottom: 4px;
    font-variant-numeric: tabular-nums;
}
.stat-card-sub {
    font-size: 12px; color: var(--text-muted);
}

/* Manager dashboard: every stat card font 1px smaller than the shared default
   above, and (unlike the shared rules) held to the same size at every
   breakpoint instead of drifting between a desktop and a ≤1100px value. */
.mgr-dash-stats .stat-card-icon { font-size: 37px; }
.mgr-dash-stats .stat-card-label { font-size: 10px; }
.mgr-dash-stats .stat-card-value { font-size: 24px; }
.mgr-dash-stats .stat-card-sub { font-size: 11px; }

/* ── Dashboard two-column table row (Recent Reservations / Court Utilization) ── */
.dash-tables-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    align-items: start;
}
@media (max-width: 880px) { .dash-tables-grid { grid-template-columns: 1fr; } }


.mini-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    box-shadow: var(--shadow);
}
.mini-card-label {
    font-size: 11px; font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .6px;
    margin-bottom: 10px;
}
.mini-card-title { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.mini-card-sub   { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
.mini-card-empty { font-size: 13px; color: var(--text-light); margin-bottom: 12px; }
.mini-card-link  { font-size: 12.5px; font-weight: 700; color: var(--navy-lighter); text-decoration: none; }
.mini-card-link:hover { color: var(--gold); }

/* Today's court/time grid */
.sched-hd { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 4px; }
.sched-hd h3 { margin: 0; }
.sched-day-nav { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.today-grid-wrap { overflow-x: auto; scroll-behavior: smooth; }
.today-grid { border-collapse: collapse; }
.today-grid th {
    background: none; color: var(--text-muted);
    font-size: 10px; font-weight: 700;
    padding: 4px 2px; text-align: center; white-space: nowrap;
}
.today-grid td.tg-court {
    width: 10%;
    font-size: 12px; font-weight: 700; color: var(--navy);
    text-align: center; padding: 3px 10px 3px 2px; white-space: nowrap;
    border-bottom: none;
}
.today-grid td.tg-cell { width: 26px; height: 35px; padding: 0; border: 2px solid var(--card-bg); }
.tg-cell.tg-available         { background: var(--green-bg); }
.tg-cell.tg-reserved_waitlist { background: #bfdbfe; }
.tg-cell.tg-reserved_blocked  { background: #fca5a5; }
.tg-cell.tg-academy           { background: #e5e7eb; }
.tg-cell.tg-blocked           { background: #e5e7eb; }
.tg-cell.tg-locked            { background: #fef08a; }
.tg-cell.tg-neutral           { background: var(--page-bg); }
.tg-cell.tg-highlight         { background: #bfdbfe; }
/* A cancelled reservation frees its slot back up (status falls back to whatever
   else applies, usually available), but the manager should still be able to see
   a cancellation happened there — an outline (not background) so it doesn't fight
   with whatever status color/hover shadow the cell already has. */
.today-grid td.tg-cell.tg-had-cancel { outline: 1px solid #dc2626; outline-offset: -2px; }
/* Per-cell hover affordance for non-empty cells (reserved/blocked/locked, or a
   cancelled marker on an otherwise-available cell) — a darker shade of the
   cell's own status color instead of a contrasting border, so hover doesn't
   fight visually with the had-cancel outline or the status color-coding
   itself. Plain available cells with no cancellation history have nothing to
   show on hover, so they stay plain. */
.today-grid td.tg-cell:not(.tg-available):hover,
.today-grid td.tg-cell.tg-had-cancel:hover { filter: brightness(0.85); cursor: pointer; }
/* The border only appears once a cell is explicitly clicked — hover stays a
   same-color shade so a reserved court's color-coding is never overridden by
   an unrelated border/shadow color until the manager actually selects it. */
.today-grid td.tg-cell.tg-selected { box-shadow: inset 0 0 0 1px var(--navy); }

.today-grid-legend {
    display: flex; flex-wrap: wrap; gap: 6px 16px;
    margin-top: 14px; font-size: 11px; color: var(--text-muted);
}
.today-grid-legend span { display: inline-flex; align-items: center; gap: 5px; }
.today-grid-legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* ── Manager dashboard: middle column + fixed right sidebar ──────────── */
.mgr-dash-main,
.mgr-dash-stats,
.mgr-dash-charts { margin-right: 336px; min-width: 0; }
.mgr-dash-charts { margin-top: 20px; }
@media (max-width: 1100px) {
    .mgr-dash-main,
    .mgr-dash-stats,
    .mgr-dash-charts { margin-right: 0; }
}

.mgr-dash-stats .stat-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
}
.mgr-dash-stats .stat-card { flex: 1 1 200px; }

/* Between the mobile breakpoint and a genuinely wide monitor, .mgr-dash-stats
   (viewport minus the 230px admin sidebar minus the 336px reserved for the
   fixed right sidebar) isn't quite wide enough for all 4 cards at once, so the
   4th wraps onto its own row alone. Force a clean 2x2 instead of that 3-then-1
   split at these in-between "small desktop" widths. */
@media (max-width: 1600px) and (min-width: 1101px) {
    .mgr-dash-stats .stat-card { flex: 1 1 calc(50% - 8px); }
}

.mgr-dash-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: fixed;
    top: calc(var(--nav-h) + 20px);
    right: 30px;
    width: 300px;
    /* Must clear the fixed bottom footer too, not just the top nav — this was
       missing before, so the sidebar's own scroll region ran out from under the
       footer instead of stopping above it, hiding the last ~44px of content
       (the bottom of the "Requesting Reschedule" card) behind the footer bar. */
    max-height: calc(100vh - var(--nav-h) - var(--footer-h) - 20px);
    overflow-y: auto;
    /* Breathing room at the scroll boundary — without it the last card's own
       edge sits flush against the clipping line, which reads as an abrupt
       cutoff rather than "scroll for more" (worse now that the scrollbar
       itself is hidden, so there's no visual scroll-affordance either). */
    padding-bottom: 12px;
    scroll-behavior: smooth;
    /* Scroll still works (wheel/trackpad/keyboard) — just no visible scrollbar
       track/thumb, so the fixed sidebar doesn't feel like a separate scroll pane
       next to the page's own. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.mgr-dash-side::-webkit-scrollbar { display: none; }
@media (max-width: 1100px) {
    .mgr-dash-side {
        position: static;
        top: auto; right: auto; width: auto;
        max-height: none; overflow-y: visible;
        margin-top: 20px;
    }
    /* Mobile: no date table — the carousel cards right below the court/time
       table take its place. Bottom stat row (moved after .mgr-dash-side in
       the DOM) then naturally stacks last, as compact 2-per-row cards. */
    .mgr-cal-card { display: none; }
    .mgr-dash-stats { margin-top: 20px; }
    .mgr-dash-stats .stat-card { flex: 1 1 calc(50% - 8px); padding: 14px 16px; }
    .mgr-dash-stats .stat-card-icon { font-size: 27px; }
}

.mgr-side-card { margin: 0; }
/* Calendar card lifted out of .mgr-dash-side to sit above the page's main
   content on mobile — see assets/js/mobile-layout.js. Needs the extra class to
   beat .mgr-side-card's margin:0 above. */
.mgr-side-card.cal-mobile-top { margin: 0 0 16px; }

/* Mini calendar — its own card, separate from the court/time table */
.mgr-cal-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.mgr-cal-title {
    font-size: 13px; font-weight: 700; color: var(--navy);
    text-align: center;
}
.mgr-cal-nav {
    background: none; border: 1px solid var(--border); border-radius: 6px;
    width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text-muted); font-size: 13px; line-height: 1;
    transition: background var(--transition), color var(--transition);
}
.mgr-cal-nav:hover { background: var(--page-bg); color: var(--navy); }
.mgr-cal-dow-row {
    display: grid; grid-template-columns: repeat(7, 1fr);
    gap: 2px; margin-bottom: 6px;
}
.mgr-cal-dow {
    text-align: center; font-size: 10px; font-weight: 700;
    color: var(--text-light);
}
.mgr-cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.mgr-cal-day {
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    font-size: 12px; color: var(--text); border-radius: 6px;
}
.mgr-cal-day.empty { visibility: hidden; }
.mgr-cal-day.today { background: var(--gold); color: var(--navy); font-weight: 700; }
/* Bookable = any real day, clickable to browse that date's court/time schedule. Selected
   is a ring rather than a background so it composes with .today's own gold fill instead
   of fighting it. */
.mgr-cal-day.bookable { cursor: pointer; transition: background var(--transition); }
.mgr-cal-day.bookable:hover { background: var(--page-bg); }
.mgr-cal-day.selected { box-shadow: 0 0 0 2px var(--navy) inset; font-weight: 700; }

.mgr-side-card-hd {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 10px; padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.mgr-side-card-hd h3 {
    margin: 0; padding: 0; border: none;
    font-size: 12.5px; color: var(--navy);
    text-transform: uppercase; letter-spacing: .5px;
}
.mgr-side-card-hd h3 a { color: inherit; text-decoration: none; }
.mgr-side-card-hd h3 a:hover { color: var(--gold); }

/* "+N" badge — how many more pending reschedule requests sit behind the one shown */
.mgr-reschedule-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px;
    background: var(--gold);
    color: var(--white);
    font-size: 10px; font-weight: 700;
    flex-shrink: 0;
}

/* Carousels (upcoming reservations / court status / reschedule requests) */
.mgr-carousel-card { padding: 14px 16px; }
.mgr-carousel { overflow: hidden; }
.mgr-carousel-track {
    display: flex;
    transition: transform .4s ease;
}
.mgr-carousel-slide {
    flex: 0 0 100%;
    min-width: 0;
}
.mgr-carousel-slide-multi { display: flex; flex-direction: column; gap: 10px; }
.mgr-carousel-empty {
    color: var(--text-light); font-size: 12.5px;
    text-align: center; padding: 14px 0;
}
.mgr-slide-sub {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; font-size: 13px;
}
.mgr-slide-sub:not(:last-child) {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.mgr-slide-court {
    font-size: 10px; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px;
}
.mgr-slide-name { font-size: 13.5px; font-weight: 700; color: var(--navy); margin-bottom: 3px; }
.mgr-slide-meta {
    font-size: 12px; color: var(--text-muted);
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}

.mgr-carousel-nav { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.mgr-carousel-btn {
    width: 22px; height: 22px; padding: 0; flex-shrink: 0;
    border-radius: 50%; border: 1px solid var(--border);
    background: var(--page-bg); color: var(--navy);
    font-size: 13px; line-height: 1; cursor: pointer;
}
.mgr-carousel-btn:hover { background: var(--gold-muted); }

/* Merged activity log table (admin dashboard sidebar) */
.mgr-log-table-wrap {
    max-height: 420px;
    overflow-y: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.mgr-log-table-wrap::-webkit-scrollbar { display: none; }
.mgr-log-table { width: 100%; border-collapse: collapse; }
.mgr-log-table td {
    padding: 8px 0; border-bottom: 1px solid var(--border);
    vertical-align: top; font-size: 12px;
}
.mgr-log-table tr:last-child td { border-bottom: none; }
/* Rows that link out to a specific record (e.g. the "Latest Reservation Logs"
   card's rows jumping to that reservation in All Reservations) get a pointer
   cursor + hover tint — opt-in per row (not every .mgr-log-table use is
   clickable, e.g. plain admin/manager activity logs). */
.mgr-log-row-clickable { cursor: pointer; }
.mgr-log-row-clickable:hover td { background: var(--page-bg); }
.mgr-log-title-row {
    display: flex; align-items: center; gap: 6px;
    flex-wrap: wrap; margin-bottom: 3px;
}
.mgr-log-title { font-size: 12.5px; font-weight: 700; color: var(--navy); }
.mgr-log-sub { font-size: 11px; color: var(--text-muted); }

/* ── Chart cards ──────────────────────────────────────────────── */
.chart-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}
@media (max-width: 900px) { .chart-grid { grid-template-columns: 1fr; } }
.chart-card {
    background: var(--card-bg);
    height: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
    box-shadow: var(--shadow);
    container-type: inline-size;
}
.chart-card-title {
    font-size: 13px; font-weight: 700;
    color: var(--navy);
    margin-bottom: 16px;
    display: flex; align-items: center; justify-content: space-between;
}
.chart-card-title span { color: var(--text-muted); font-weight: 400; font-size: 12px; }
/* Groups a chart-card-title's own label text with a rate/status badge right
   beside it, as ONE flex item — so the title's justify-content:space-between
   still puts just 2 things apart (this group on the left, a range label on
   the right) instead of visually centering the badge between 3 items. */
.chart-card-title-group { display: flex; align-items: center; gap: 6px; }
.chart-card-title .chart-card-title-group { color: inherit; font-weight: inherit; font-size: inherit; }
.chart-canvas-wrap { position: relative; }

/* Pie charts: canvas + a custom legend (vertical swatch, label, count below it) instead
   of Chart.js's built-in one-line "swatch label" legend — set legend.display:false in
   the chart config and render this alongside the canvas. */
.pie-chart-row { display: flex; align-items: center; gap: 18px; justify-content: space-evenly;}
/* Specificity needs to beat page-level ".xyz-cards-grid .chart-canvas-wrap { width:100% }"
   rules (equal 2-class specificity, but those load after this stylesheet) that would
   otherwise stretch the canvas to the full card width and push the legend onto its own row. */
.chart-card .pie-chart-row .chart-canvas-wrap { flex: 0 0 auto; width: 200px; }
/* Scrollable instead of stretching the card: a legend with a handful of rows
   (status/format breakdowns, etc.) can outgrow the chart's own height, and
   without a cap it grows the whole .pie-chart-row/.chart-card taller instead
   of just scrolling in place. Only kicks in where the including page also
   sets a matching height on .pie-chart-row itself (percentage heights need a
   definite reference) — a plain 2-row legend with no such height keeps
   growing naturally as before. Scrollbar hidden (still scrolls via wheel/
   touch/keyboard) — same treatment as .mgr-dash-side's own hidden scrollbar. */
.pie-legend {
    display: flex; flex-direction: column; gap: 12px; min-width: 0;
    max-height: 100%; overflow-y: auto; overflow-x: hidden;
    scrollbar-width: none; -ms-overflow-style: none;
}
.pie-legend::-webkit-scrollbar { display: none; }
.pie-legend-item { display: flex; align-items: stretch; gap: 8px; }
.pie-legend-swatch { width: 6px; border-radius: 3px; flex-shrink: 0; }
.pie-legend-text { display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.pie-legend-label { font-size: 11.5px; color: var(--text-muted); font-weight: 600; }
.pie-legend-value { font-size: 16px; color: var(--navy); font-weight: 800; line-height: 1; }

/* Manager dashboard: chart titles + pie legends 1px smaller than the shared
   default above, and the legend label brought in line with .stat-card-label's
   size (both are the same "small uppercase-ish caption" role). */
.mgr-dash-stats .chart-card-title { font-size: 12px; }
.mgr-dash-stats .chart-card-title span { font-size: 11px; }
.mgr-dash-stats .pie-legend-label { font-size: 10px; }
.mgr-dash-stats .pie-legend-value { font-size: 15px; }

/* Below this the legend + fixed-width canvas no longer both fit without wrapping
   awkwardly — drop the legend and let the pie chart alone use the card's width.
   Container queries measure the container's content-box (padding/border excluded),
   so the 345px is offset by .chart-card's own padding (22px * 2) + border (1px * 2)
   to actually trigger once the visible card hits 345px, not its content box. */
@container (max-width: 299px) {
    .pie-legend { display: none; }
}

/* ── Admin content overrides ─────────────────────────────────── */
/* Strip raw HTML border="1" attribute styling, apply design-system */
.admin-main table[border],
.admin-main table { border: none !important; border-collapse: collapse; }
.admin-main table[border] td,
.admin-main table[border] th { border: none !important; }

/* Auth-container inside admin: full-width, gold top accent */
.admin-main .auth-container {
    max-width: 100%;
    margin: 0 0 24px;
    border-top: 4px solid var(--gold);
}

/* Full-width admin content card (alternative to auth-container) */
.adm-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px 24px;
    margin-bottom: 20px;
    box-shadow: var(--shadow);
}

/* Table wrapper: adds rounded border + scroll */
.adm-tbl {
    width: 100%;
    overflow-x: auto;
    scroll-behavior: smooth;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--card-bg);
    box-shadow: var(--shadow);
    margin-bottom: 20px;
}

/* Filter / toolbar row above tables */
.adm-toolbar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 16px;
}
.adm-toolbar input[type="text"],
.adm-toolbar select { max-width: 220px; margin: 0; }

/* ── Admin page header ──────────────────────────────────────── */
.admin-page-hd {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--border);
}
.admin-page-hd h2 { margin: 0; font-size: 20px; color: var(--navy); }
.admin-page-hd p  { margin: 0; font-size: 13px; color: var(--text-muted); }

/* ── Utility ──────────────────────────────────────────────── */
.text-center { text-align: center; }

/* Table columns are centered by default (see "Tables" above). Name/user-identifying
   columns (User, Customer, Name, Admin, Manager, Creator, Player, Product...) read
   better left-aligned; add e.g. class="tbl-left-1" to the <table> to left-align its
   1st column — every other column, including Action, stays centered. Works whether
   the table uses thead/tbody or flat <tr> rows, since it targets row-child position
   rather than th/td specifically. Combine classes (e.g. "tbl-left-1 tbl-left-7") for
   tables with more than one such column. */
.tbl-left-1 tr > *:nth-child(1),
.tbl-left-2 tr > *:nth-child(2),
.tbl-left-3 tr > *:nth-child(3),
.tbl-left-4 tr > *:nth-child(4),
.tbl-left-7 tr > *:nth-child(7) { text-align: left; }

/* Name/customer columns can overflow a narrow table cell with a long full name.
   Wrap the value in <span class="truncate-name">...</span> (with a title= attribute
   for the full value on hover) to clip it with an ellipsis instead of stretching or
   wrapping the row. inline-block is used (rather than relying on td { overflow }
   directly) since text-overflow on a bare table-cell is unreliable across browsers. */
.truncate-name {
    display: inline-block;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* Same idea as .truncate-name, but block-level and sized to fill its container
   instead of a fixed pixel width — for wider, variable-width contexts like a
   stat-card value or a carousel slide, where 130px would clip too early (or
   leave slack). Pair with a title= attribute so the full value is still
   reachable on hover. */
.truncate-block {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.text-muted  { color: var(--text-muted); }
.text-gold   { color: var(--gold-dark); }
.text-navy   { color: var(--navy); }
.mt-4  { margin-top: 4px; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-0  { margin-bottom: 0; }
.flex  { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }

/* ── User page wrapper ────────────────────────────────────── */
.user-page {
    width: 100%;
    max-width: 740px;
    margin: 28px auto;
    padding: 0 20px;
    box-sizing: border-box;
}
.user-page-hd {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px;
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--border);
}
.user-page-hd h2 { margin: 0; font-size: 22px; color: var(--navy); }
.user-page-hd p  { margin: 3px 0 0; font-size: 14px; color: var(--text-muted); }

/* ── User list item card ──────────────────────────────────── */
.user-list-item {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-left: 4px solid var(--navy);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    margin-bottom: 12px;
    box-shadow: var(--shadow);
    transition: box-shadow var(--transition), border-color var(--transition);
}
.user-list-item:hover { box-shadow: var(--shadow-md); }
.user-list-item.gold  { border-left-color: var(--gold); }
.user-list-item.green { border-left-color: var(--green); }
.user-list-item.red   { border-left-color: var(--red); }
.user-list-item.gray  { border-left-color: var(--border); opacity: .8; }

.uli-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; margin-bottom: 8px; flex-wrap: wrap;
}
.uli-title  { font-weight: 700; font-size: 16px; color: var(--navy); }
.uli-meta   {
    display: flex; gap: 18px; flex-wrap: wrap;
    font-size: 14px; color: var(--text-muted); margin-bottom: 10px;
}
.uli-meta span { display: flex; align-items: center; gap: 5px; }
.uli-actions {
    display: flex; gap: 8px; flex-wrap: wrap;
    padding-top: 10px; margin-top: 6px;
    border-top: 1px solid var(--border);
}

/* ── Auth form card (verify, forgot, reset) ───────────────── */
.auth-card-page {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 40px 20px;
    background: var(--navy);
}
.auth-card {
    background: var(--white);
    border-radius: 16px;
    padding: 40px 36px;
    width: 100%; max-width: 440px;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.auth-card .brand-row {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 28px;
}
.auth-card .brand-badge {
    height: 42px; width: auto;
    object-fit: contain;
    flex-shrink: 0;
}
.auth-card h2 { margin: 0 0 4px; font-size: 22px; color: var(--navy); }
.auth-card .auth-sub { color: var(--text-muted); font-size: 14px; margin-bottom: 24px; }

/* ── Products grid ────────────────────────────────────────── */
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
@media (max-width: 1100px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .product-grid { grid-template-columns: 1fr; } }
.product-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 16px;
    box-shadow: var(--shadow);
    transition: box-shadow var(--transition), transform var(--transition);
    overflow: hidden;
}
.product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.product-card-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 110px;
    max-height: 110px;
    object-fit: cover;
    border-radius: var(--radius-md, 8px);
    margin-bottom: 12px;
    background: var(--page-bg);
}
.product-card-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: var(--text-muted);
}
.product-card-name  { font-weight: 700; font-size: 15px; color: var(--navy); margin-bottom: 6px; }
.product-card-price { font-size: 18px; font-weight: 800; color: var(--gold-dark); margin-bottom: 4px; }
.product-card-stock { font-size: 13px; color: var(--text-muted); }

/* ============================================================
   Mobile responsiveness — app shell (nav, sidebar, tables,
   generic containers). Individual booking/product pages already
   carry their own fluid layouts; this section covers the chrome
   and generic components every logged-in page shares.
   ============================================================ */
@media (max-width: 880px) {
    /* Top nav collapses behind a hamburger. The same button is reused to
       open the admin/manager sidebar on those roles (see header.php JS) —
       their .app-nav-links block is empty, so there's nothing else for it
       to control. */
    .app-nav-toggle { display: flex; }

    .app-nav-links {
        display: none;
        position: absolute;
        top: var(--nav-h);
        left: 0; right: 0;
        background: var(--navy);
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 10px 16px 16px;
        box-shadow: 0 10px 24px rgba(0,0,0,.3);
    }
    .app-nav-links.open { display: flex; }
    .app-nav-links .app-nav-link { padding: 12px 14px; }

    .app-nav-logo-text { display: none; }
    .app-nav-user-info { display: none; }
    .app-nav-avatar { display: none; }
    .app-nav-user { border-left: none; padding-left: 0; gap: 8px; }

    /* Admin/Manager sidebar becomes an off-canvas drawer instead of a
       permanent side column. */
    .admin-wrap { flex-direction: column; }
    .admin-sidebar {
        display: none;
        position: fixed;
        top: var(--nav-h);
        left: 0; right: 0;
        width: 100%;
        height: auto;
        max-height: calc(100vh - var(--nav-h));
        z-index: 480;
        box-shadow: 0 10px 24px rgba(0,0,0,.35);
    }
    .admin-sidebar.open { display: block; }
    .admin-main {
        width: 100%;
        max-width: 100%;
        padding: 20px 16px 60px;
    }

    .page-wrap { padding: 20px 14px 50px; }
    .auth-container { padding: 20px 18px; margin: 20px auto; }
    .section-card { padding: 18px 16px; width: 100%; }
    .mini-card { padding: 16px 18px; }
    .user-page { padding: 0 14px; margin: 20px auto; }

    /* Title + action-button header rows: stack instead of squeezing
       side by side, which is what was forcing these into horizontal
       overflow on narrow screens. */
    .admin-page-hd,
    .page-header,
    .user-page-hd,
    .dash-welcome {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .dash-welcome-badge { display: none; }

    .stat-grid,
    .dash-grid { grid-template-columns: 1fr 1fr; }

    canvas { max-width: 900%; max-height: 90%;}
}

@media (max-width: 480px) {
    .stat-grid,
    .dash-grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
    .app-nav { padding: 0 14px; gap: 10px; }
    .stat-card-value { font-size: 28px; }
}

/* Any plain HTML table that isn't already wrapped in a scroll container
   (.tbl-wrap / .adm-tbl / an inline overflow-x div) gets one for free —
   several admin views render raw <table border="1"> markup directly. */
@media (max-width: 768px) {
    table {overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; text-align: center;}
}

/* ── Shared pagination controls (views/partials/pagination.php) ─────────── */
.pg-nav {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    margin: 18px 0; font-size: 13px;
}
.pg-btn {
    display: inline-block; padding: 7px 14px; border-radius: 6px;
    border: 1px solid var(--border, #dde3ed); background: var(--white, #fff);
    color: var(--navy); text-decoration: none; font-size: 13px; font-weight: 600;
    transition: background .15s;
}
.pg-btn:hover { background: var(--page-bg, #eef1f8); }
.pg-btn.disabled { opacity: .4; pointer-events: none; }
[data-theme="dark"] .pg-btn { background: #1e293b; border-color: #334155; color: #e2e8f0; }
[data-theme="dark"] .pg-btn:hover { background: #334155; }
.pg-info { color: var(--text-muted, #475569); }
[data-theme="dark"] .pg-info { color: #94a3b8; }