/**
 * @rk-review-log-10/04/2026-10:30-S34  (v2 — full skin; v1 of 10/03 was a spot-polish overlay, Captain judged it
 *     superficial and asked for the zone "as YOU would design it if Falcon was not handed to you".)
 *     Purpose:               The HitCourt Referee-zone DESIGN SYSTEM, delivered as one additive skin over the
 *                            existing Falcon markup (no logic, no layout restructuring). Also loaded by the Admin
 *                            zone and the auth pages (one <link> per layout; delete the link to revert to stock).
 *     The language:          · CHROME — one continuous ink-navy frame: full-bleed top bar + navy left rail,
 *                              meeting in the corner as a single surface (kills the "white square" class of bugs).
 *                            · PAPER — the content well is a referee's desk: near-white field, flat white sheets
 *                              with 1px borders, one soft shadow level, 10px radius. Print-like, calm.
 *                            · ACTION — HitCourt green (from the HC mark) is THE go/confirm colour; navy = primary;
 *                              amber = caution only; red = destructive only; everything else is a quiet tonal chip.
 *                            · NUMBERS — scores and standings in tabular figures so columns read like a scoreboard.
 *     Risk if modified:      Cosmetic only. Nothing here carries behaviour.
 */

:root {
    --hc-ink-900: #0b1727;
    --hc-ink-800: #13294a;
    --hc-ink-700: #1e3a5f;
    --hc-ink-600: #2c4f7c;
    --hc-green: #16a34a;
    --hc-green-700: #15803d;
    --hc-amber: #d97706;
    --hc-red: #dc2626;
    --hc-field: #f4f7fb;            /* the desk */
    --hc-line: #e2e9f2;             /* hairlines */
    --hc-text: #182233;
    --hc-text-2: #5c6b80;
    --hc-navy-grad: linear-gradient(-45deg, #1e3a5f 0%, #0b1727 100%);
    --hc-rail-grad: linear-gradient(180deg, #152c4e 0%, #0b1727 100%);
    --hc-shadow-card: 0 1px 2px rgba(11, 23, 39, .05), 0 8px 24px rgba(11, 23, 39, .05);
    --hc-radius: 10px;
}

/* ================================================================== */
/* 1 · BASE — the desk                                                 */
/* ================================================================== */
html:not(.dark) body { background-color: var(--hc-field); color: var(--hc-text); }
html:not(.dark) h1, html:not(.dark) h2, html:not(.dark) h3,
html:not(.dark) h4, html:not(.dark) h5, html:not(.dark) h6 { color: var(--hc-ink-800); }
::selection { background: rgba(30, 58, 95, .18); }
html:not(.dark) ::-webkit-scrollbar { width: 9px; height: 9px; }
html:not(.dark) ::-webkit-scrollbar-thumb { background-color: rgba(30, 58, 95, .28); border-radius: 6px; }

/* ================================================================== */
/* 2 · TOP BAR — full-bleed ink band, edge to edge (Captain 10/04:     */
/*     the blue must reach the LEFT END and cover behind the logo).    */
/*     A 100vw underlay behind the navbar guarantees the bleed no      */
/*     matter what margins/padding the layout gives the bar.           */
/* ================================================================== */
.navbar-top.navbar-glass { background: transparent !important; box-shadow: none !important; }
.navbar-top { position: relative; z-index: 1016; }
.navbar-top::before {
    content: '';
    position: absolute;
    /* @rk-S35 10/06 (Captain's screenshots): the band was a 100vw strip CENTRED on the bar. The bar is not
       centred in the window (the rail sits to its left), so the band started ~20px in (a white notch at the
       top-left) and ran ~30px past the right edge (a horizontal scrollbar on every page). It is now anchored
       to the bar's right edge and bleeds LEFT only - overflow to the left never creates a scrollbar.
       Pre-S35: top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); */
    top: 0; bottom: 0; left: -100vw; right: 0;
    background: var(--hc-navy-grad);
    box-shadow: 0 2px 12px rgba(11, 23, 39, .35);
    z-index: -1;
}
.navbar-top .navbar-brand span.font-sans-serif { color: #fff; letter-spacing: .02em; }
.navbar-top .navbar-brand img { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }
.navbar-top .nav-link,
.navbar-top .nav-link .fas,
.navbar-top .nav-link .far { color: rgba(255, 255, 255, .85); }
.navbar-top .nav-link:hover, .navbar-top .nav-link:focus { color: #fff; }
.navbar-top .welcome-message .text-muted,
.navbar-top .nav-link .text-muted { color: rgba(255, 255, 255, .72) !important; }
.navbar-top .navbar-toggle-icon .toggle-line,
.navbar-top .navbar-toggle-icon .toggle-line::before,
.navbar-top .navbar-toggle-icon .toggle-line::after { background-color: #fff !important; }
.navbar-top .notification-indicator::before { border-color: var(--hc-ink-700); }

/* ================================================================== */
/* 3 · LEFT RAIL — navy, one surface with the top bar (the TP-style    */
/*     icon rail a tournament referee knows). Covers the rail, the     */
/*     hover fly-out and the expanded state.                           */
/* ================================================================== */
.navbar-vertical,
.navbar-vertical .navbar-collapse,
.navbar-vertical .navbar-vertical-content {
    background: var(--hc-rail-grad) !important;
}
.navbar-vertical { box-shadow: 2px 0 10px rgba(11, 23, 39, .18); }
.navbar-vertical .navbar-brand,
.navbar-vertical .navbar-top { background: transparent !important; box-shadow: none !important; }
.navbar-vertical .nav-link,
.navbar-vertical .nav-link .nav-link-icon span,
.navbar-vertical .dropdown-indicator::after { color: #a9b9ce !important; }
.navbar-vertical .nav-link:hover,
.navbar-vertical .nav-link:hover .nav-link-icon span,
.navbar-vertical .nav-link.active,
.navbar-vertical .nav-link.active .nav-link-icon span,
.navbar-vertical .nav-link[aria-expanded="true"],
.navbar-vertical .nav-link[aria-expanded="true"] .nav-link-icon span { color: #ffffff !important; }
.navbar-vertical .nav-link.active { box-shadow: inset 3px 0 0 var(--hc-green); }
.navbar-vertical .navbar-vertical-label { color: rgba(255, 255, 255, .45) !important; letter-spacing: .08em; }
/* Rail icons carry hard-coded text-danger/text-primary/... from the markup — on the navy rail they ALL
   inherit the rail's muted slate, turning white on hover/active with the link. */
.navbar-vertical .nav-link [class*="text-"],
.navbar-vertical .nav-link .nav-link-icon,
.navbar-vertical .nav-link svg { color: inherit !important; }
.navbar-vertical hr, .navbar-vertical .navbar-vertical-divider hr,
.navbar-vertical .navbar-vertical-hr { border-color: rgba(255, 255, 255, .12) !important; opacity: 1; }
.navbar-vertical .navbar-vertical-content::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, .22); }
/* Falcon paints these states white via its own vars — keep them navy in every mode */
.navbar-vertical-collapsed .navbar-vertical:hover .navbar-collapse,
.navbar-vertical-collapsed .navbar-vertical:hover { background: var(--hc-rail-grad) !important; }
.navbar-vertical .navbar-toggle-icon .toggle-line,
.navbar-vertical .navbar-toggle-icon .toggle-line::before,
.navbar-vertical .navbar-toggle-icon .toggle-line::after { background-color: #fff !important; }

/* ================================================================== */
/* 4 · SHEETS — flat, print-like cards                                 */
/* ================================================================== */
html:not(.dark) .card {
    border: 1px solid var(--hc-line);
    border-radius: var(--hc-radius);
    box-shadow: var(--hc-shadow-card);
}
html:not(.dark) .card .card-header.bg-body-tertiary,
html:not(.dark) .card .card-header.bg-light {
    background: #fbfcfe !important;
    border-bottom: 1px solid var(--hc-line);
}
html:not(.dark) .card-header h5, html:not(.dark) .card-header .h5,
html:not(.dark) .card-header h6, html:not(.dark) .card-header .h6 { color: var(--hc-ink-700); font-weight: 600; }
.modal-content, .offcanvas { border-radius: var(--hc-radius); }

/* ================================================================== */
/* 5 · TABLES & SCORES — scoreboard digits, quiet headings             */
/* ================================================================== */
html:not(.dark) .table thead th {
    background-color: #f6f9fc;
    color: #51607a;
    font-size: .72rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(30, 58, 95, .14);
}
html:not(.dark) .table tbody td { border-color: rgba(11, 23, 39, .06); }
.table-league td, .table-league th { font-variant-numeric: tabular-nums; }
/* Captain 10/04: league boxes are FIXED — a long score wraps by WHOLE sets (helper score_sets_nowrap()),
   never mid-set. (The v1 rule that let cells grow is gone.) */
.score-set { white-space: nowrap; }

/* ================================================================== */
/* 6 · ACTIONS — a disciplined palette on the existing button classes  */
/*     navy = primary · green = go/confirm · amber = caution only ·    */
/*     red = destructive only · info/secondary = quiet tonal chips     */
/* ================================================================== */
.btn { border-radius: 8px; font-weight: 600; letter-spacing: .01em; }
.btn-group-sm > .btn, .btn-sm { border-radius: 7px; }
.btn-primary { background-color: var(--hc-ink-700); border-color: var(--hc-ink-700); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--hc-ink-800) !important; border-color: var(--hc-ink-800) !important; }
.btn-success { background-color: var(--hc-green); border-color: var(--hc-green); }
.btn-success:hover, .btn-success:focus, .btn-success:active { background-color: var(--hc-green-700) !important; border-color: var(--hc-green-700) !important; }
.btn-warning { background-color: var(--hc-amber); border-color: var(--hc-amber); color: #fff; }
.btn-warning:hover, .btn-warning:focus, .btn-warning:active { background-color: #b45309 !important; border-color: #b45309 !important; color: #fff !important; }
.btn-danger { background-color: var(--hc-red); border-color: var(--hc-red); }
.btn-danger:hover, .btn-danger:focus, .btn-danger:active { background-color: #b91c1c !important; border-color: #b91c1c !important; }
.btn-info {
    background-color: #e9f1fb;
    border-color: #cfe0f2;
    color: var(--hc-ink-700);
}
.btn-info:hover, .btn-info:focus, .btn-info:active { background-color: #d9e7f7 !important; border-color: #b9d2ec !important; color: var(--hc-ink-800) !important; }
.btn-secondary, .btn-dark {
    background-color: #e9edf3;
    border-color: #d7dfe9;
    color: var(--hc-ink-700);
}
.btn-secondary:hover, .btn-dark:hover, .btn-secondary:focus, .btn-dark:focus,
.btn-secondary:active, .btn-dark:active { background-color: #dbe2ec !important; border-color: #c6d2e0 !important; color: var(--hc-ink-800) !important; }

/* ================================================================== */
/* 7 · FORMS — larger targets, ink focus                               */
/* ================================================================== */
.form-control, .form-select { border-radius: 8px; border-color: #d4dde9; }
.form-control:focus, .form-select:focus {
    border-color: var(--hc-ink-700);
    box-shadow: 0 0 0 .2rem rgba(30, 58, 95, .14);
}
.input-group-text { border-color: #d4dde9; background-color: #f2f6fb; color: var(--hc-text-2); }
.form-check-input:checked { background-color: var(--hc-green); border-color: var(--hc-green); }

/* ================================================================== */
/* 8 · PILLS, BADGES, TABS                                             */
/* ================================================================== */
.badge { letter-spacing: .015em; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--hc-ink-700); }
html:not(.dark) .nav-tabs .nav-link.active { color: var(--hc-ink-700); border-bottom-color: var(--hc-green); }

/* ================================================================== */
/* 9 · DIALOGS (jquery-confirm / sweetalert) — same sheet language     */
/* ================================================================== */
.jconfirm .jconfirm-box { border-radius: 12px !important; }
.jconfirm .jconfirm-title { color: var(--hc-ink-800); font-weight: 600; }
/* @rk-S35 10/07 (Captain: "Poppins should prevail"): every dialog - title, text and its form controls - in the theme's Poppins */
.jconfirm .jconfirm-box, .jconfirm .jconfirm-title, .jconfirm .jconfirm-content, .jconfirm .jconfirm-content .form-select, .jconfirm .jconfirm-content .form-control, .jconfirm .jconfirm-content table, .sweet-alert, .sweet-alert h2, .sweet-alert p { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; }
.sweet-alert { border-radius: 12px !important; }

/* ================================================================== */
/* 9b · MODAL DESIGN STANDARD (Captain 10/08) — one language for EVERY  */
/*      modal (jquery-confirm dialogs + Bootstrap modals): same box,    */
/*      type, labels, inputs, placeholders, buttons, and NO sideways    */
/*      scroll. Canonical template: tournament_property_add_player.php.  */
/*      A House Rule - future modals inherit this, no per-view styling.  */
/* ================================================================== */
/* --- NO SIDEWAYS SCROLL, ever (House Rule). A genuinely wide table    */
/*     scrolls only inside its own .table-responsive wrapper.           */
.jconfirm .jconfirm-content, .jconfirm .jconfirm-content form, .modal .modal-body, .modal .modal-body form { overflow-x: hidden !important; max-width: 100%; }
.jconfirm .jconfirm-content .table-responsive, .modal .modal-body .table-responsive { overflow-x: auto !important; }
.jconfirm .jconfirm-content .row { margin-left: 0; margin-right: 0; }   /* kill the negative-margin overflow from .row g-* */
.jconfirm .jconfirm-content img, .modal .modal-body img { max-width: 100%; }
/* --- The box: calm, consistent surface. Width stays whatever the call */
/*     sets (a wide draw sheet still gets its width); only the look is   */
/*     unified so form dialogs read as one family.                      */
.jconfirm.jconfirm-modern .jconfirm-box, .jconfirm .jconfirm-box { box-shadow: 0 1rem 2.5rem rgba(11,23,39,.18) !important; }
.jconfirm .jconfirm-box .jconfirm-title-c .jconfirm-title { font-size: 1.05rem; }
.jconfirm .jconfirm-content { color: var(--hc-ink-800); font-size: .8rem; }
/* --- Labels: same size / weight across every modal                   */
.jconfirm .jconfirm-content .form-label, .modal .modal-body .form-label { font-size: .78rem; font-weight: 500; color: var(--hc-ink-800); margin-bottom: .25rem; }
/* --- Inputs & selects: one height, one type size everywhere           */
.jconfirm .jconfirm-content .form-control, .jconfirm .jconfirm-content .form-select,
.modal .modal-body .form-control, .modal .modal-body .form-select { font-size: .82rem; padding: .35rem .6rem; border-radius: .375rem; }
/* --- Placeholders: one quiet style                                    */
.jconfirm .jconfirm-content ::placeholder, .modal .modal-body ::placeholder { color: #b6c1d2 !important; opacity: 1; font-size: .82rem; }
/* --- Footer buttons: one size, Title Case handled in markup           */
.jconfirm .jconfirm-buttons button, .modal .modal-footer .btn { font-size: .8rem; padding: .35rem .9rem; border-radius: .375rem; }
/* --- Helper / note text under a field: one muted style                */
.jconfirm .jconfirm-content .rk-help, .modal .modal-body .rk-help { font-size: .72rem; color: var(--hc-ink-500, #5e6e82); }
/* @rk-S38 10/13 (Add Player pattern): a search-results list inside a dialog (Replace Team, Swap / Edit Team) scrolls DOWN, never sideways */
.jconfirm .jconfirm-content .rk-pick-results { max-height: 220px; overflow-y: auto; overflow-x: hidden; }


/* ================================================================== */
/* 10 · DATATABLES CHROME — quiet controls                             */
/* ================================================================== */
html:not(.dark) .dataTables_wrapper .dataTables_length select,
html:not(.dark) .dataTables_wrapper .dataTables_filter input { border: 1px solid #d4dde9; border-radius: 8px; }
html:not(.dark) .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html:not(.dark) .page-item.active .page-link { background: var(--hc-ink-700) !important; border-color: var(--hc-ink-700) !important; color: #fff !important; }

/* ================================================================== */
/* 11 · AUTH PAGES — the front door                                    */
/* ================================================================== */
main#top > .container-fluid > .row.min-vh-100 {
    background:
        radial-gradient(900px 420px at 110% -10%, rgba(30, 58, 95, .10) 0%, rgba(30, 58, 95, 0) 60%),
        radial-gradient(700px 420px at -10% 110%, rgba(22, 163, 74, .08) 0%, rgba(22, 163, 74, 0) 55%),
        var(--hc-field);
}
main#top .bg-auth-circle-shape, main#top .bg-auth-circle-shape-2 { display: none; } /* the floating PNG blobs: gone */
main#top .card { overflow: hidden; border-radius: 16px; box-shadow: 0 10px 40px rgba(11, 23, 39, .14); border: 0; }
main#top h3 { color: var(--hc-ink-800); font-weight: 600; }
.bg-card-gradient {
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 2px, rgba(255, 255, 255, 0) 2px 18px),
        var(--hc-navy-grad) !important;
}
main#top form button[type="submit"] {
    background-color: var(--hc-green);
    border-color: var(--hc-green);
}
main#top form button[type="submit"]:hover,
main#top form button[type="submit"]:focus { background-color: var(--hc-green-700) !important; border-color: var(--hc-green-700) !important; }
main#top .form-control { min-height: 42px; }

/* ================================================================== */
/* @rk-S35 10/06 (Captain's screenshot) - TOURNAMENT LIST BAR on a     */
/* narrow window: the pills (QD / MD boxes, Lucky Loser, Alternate...) */
/* were squeezed into one row and printed over each other. They now    */
/* keep their natural size, stay on one line each, and WRAP to the     */
/* next row when the window is too narrow. Nothing changes at desktop  */
/* width, where they already fit.                                      */
/* ================================================================== */
.tour-entry-navbar { flex-wrap: wrap; gap: 6px 2px; }
.tour-entry-navbar > * { flex: 0 0 auto; }
.tour-entry-navbar fieldset { min-width: 0; }
.tour-entry-navbar fieldset legend { white-space: nowrap; }
.tour-entry-navbar .btn { white-space: nowrap; padding-left: .4rem !important; padding-right: .4rem !important; margin-left: 2px !important; margin-right: 2px !important; }
.tour-entry-navbar fieldset { padding-left: .3rem !important; padding-right: .3rem !important; }
@media (max-width: 767.98px) {
    .tour-entry-navbar { justify-content: flex-start !important; }
    .tour-entry-navbar fieldset .btn { margin-bottom: 4px; }
}
@media (min-width: 768px) and (max-width: 1499.98px) {
    /* laptop widths: a touch smaller so the whole list bar stays on ONE row */
    .tour-entry-navbar .btn { font-size: .74rem; padding-left: .3rem !important; padding-right: .3rem !important; }
    .tour-entry-navbar fieldset legend { font-size: .7rem; }
}