/* ============================================================
   NAVBAR - COMPLETE WORKING CSS WITH CHARACTER SPACING
   ============================================================ */

/* ---- Settings Hover Styles ---- */
.settings-hover-container { 
    position: relative; 
    display: inline-block; 
    cursor: pointer; 
}

.settings-hover-box { 
    display: none; 
    position: absolute; 
    top: 100%; 
    right: 0; 
    margin-top: 4px; 
    background: #2c3e50; 
    color: #ffffff; 
    padding: 6px 10px; 
    border-radius: 6px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.35); 
    font-size: 11px; 
    line-height: 1.15; 
    min-width: 150px; 
    border: 1px solid #34495e; 
    z-index: 99999; 
    text-align: left; 
}

.settings-hover-box::before { 
    content: ""; 
    position: absolute; 
    bottom: 100%; 
    right: 15px; 
    border-width: 5px; 
    border-style: solid; 
    border-color: transparent transparent #2c3e50 transparent; 
}

.settings-hover-box .box-main-title { 
    font-size: 11px; 
    font-weight: bold; 
    color: #f1c40f; 
    text-align: center; 
    margin-bottom: 2px; 
}

.settings-hover-box hr { 
    border: 0; 
    border-top: 1px solid #4f5f6f; 
    margin: 3px 0; 
}

/* Only on devices with a genuine :hover (mouse/trackpad) - touch browsers
   apply :hover inconsistently after a tap, with no clean way to dismiss
   it, so touch/tablet gets a JS-driven .tt-open toggle instead. */
@media (hover: hover) and (pointer: fine) {
    .settings-hover-container:hover .settings-hover-box {
        display: block !important;
    }
}

.settings-hover-container.tt-open .settings-hover-box {
    display: block !important;
}

.settings-group-title { 
    font-weight: bold; 
    color: #f1c40f; 
    margin-top: 3px; 
    margin-bottom: 1px; 
}

.settings-row { 
    display: flex; 
    justify-content: space-between; 
    padding: 1px 0; 
    align-items: center; 
}

.settings-key { 
    text-align: left; 
    padding-right: 10px; 
    color: #ffffff; 
}

.settings-val { 
    text-align: right; 
    font-weight: bold; 
    color: #ffffff; 
}

.pay-fees-container .settings-hover-box {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    min-width: 220px;
}

.pay-fees-container .settings-hover-box::before {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
}

.pay-sub-text { 
    color: #f1c40f; 
    font-size: 10px; 
    text-align: center; 
    padding: 2px 0; 
}

/* ---- Role Dropdown ---- */
.role-dropdown { 
    font-weight: bold; 
    border: none; 
    background: transparent; 
    color: #003366; 
    cursor: pointer; 
    font-size: 1em; 
    padding: 0; 
    outline: none; 
    direction: rtl; 
    text-align-last: right; 
    /* Fixed width just wide enough for the longest role name ("System
       Developer"), so long "Log in as member" entries don't stretch the
       navbar. navbar.php refines this to an exact measured width. */
    width: 10em;
    box-sizing: border-box;
}

.role-dropdown option {
    direction: ltr;
    text-align: left;
    /* The yellow "currently emulating a role" highlight is set inline on
       the <select> itself so it shows on the closed control - but some
       browsers also bleed a <select>'s own background into its open
       option list. Pin every option back to a plain white row so the
       highlight never doubles up onto the dropdown list. */
    background-color: #ffffff;
    color: #003366;
}

.role-dropdown:hover { 
    background: transparent; 
}

/* ---- Register Interest Flash ---- */
@keyframes registerInterestFlash {
    0%, 100% { background-color: transparent; }
    50% { background-color: #ffff00; }
}

.register-interest-flash { 
    animation: registerInterestFlash 1s infinite; 
    border-radius: 4px; 
}

/* ---- Body Layout ---- */
html { 
    overflow-x: auto; 
}

/* No min-width floor: this used to be pinned to 980px (relaxed only
   below the 768px breakpoint further down), which meant every width
   between ~769-980px was a dead zone where the page was still forced
   wider than the actual window - none of the responsive logic below
   (calendar weekend-merge, nav-bar collapse, title shrink) ever got a
   chance to engage, because they all measure against this element's
   width and it was lying about how much space was really available.
   overflow-x:auto stays as the safety net for whatever still doesn't
   fit at the very narrowest widths. */
body {
    position: relative;
    margin: 0;
    padding-top: 95px;
    overflow-x: auto;
}

/* ---- Header Container ---- */
.site-header-container {
    position: absolute;
    top: 5px;
    left: 30px;
    right: 30px;
    height: 50px;
    width: auto;
    /* No min-width floor, same reasoning as body above - flex children
       don't shrink below their own natural content width by default
       (they have no min-width:0/flex-shrink override here), so this
       was never needed to prevent the logo/title and the fees/login
       info from crushing together; it only forced the container wider
       than necessary, causing the same dead-zone overflow as body. */
    overflow: visible;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    margin: 0;
    background: #ffffff;
}

/* ============================================================
   NAVBAR - MAIN
   ============================================================ */
.site-navbar {
    position: absolute;
    top: 60px;
    left: 30px;
    right: 30px;
    background: #003366;
    height: 24px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    /* No min-width floor: the nav-collapse script above keeps the
       button row legible (2px minimum gap) at any width by switching
       to the hamburger dropdown instead, so this bar can now shrink
       all the way down with the rest of the page instead of forcing
       a fixed-width floor on it. */
    overflow: visible;
    gap: 4px;
}

/* ---- Season selector, relocated here while the nav is collapsed ----
   #seasonSelectorBox normally lives centered over the header above (see
   navbar.php's "SEASON SELECTOR" block); once the nav-bar collapses to
   the hamburger, the JS below moves that same element (not a copy - so
   its Previous/Next Season links keep working exactly as they did) into
   this slot instead, freeing up the header and putting it in the middle
   of the now mostly-empty collapsed bar. .site-navbar is already
   position:absolute, so it's already a positioning context for this -
   same left:0/right:0/justify-content:center centering trick the
   header's own version uses, just scoped to this bar instead of the
   whole page. Shows/hides itself via :not(:empty) - no JS toggle
   needed, it's simply empty except when the season box has been
   moved into it. */
.site-navbar-season-slot {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 5;
}
.site-navbar-season-slot:not(:empty) {
    display: flex;
}
.site-navbar-season-slot #seasonSelectorBox {
    pointer-events: auto;
    /* Full site padding/font-size would be too tall for this 24px-high
       bar - scale it down to fit while staying legible and clickable. */
    padding: 1px 8px !important;
    gap: 6px !important;
    font-size: 12px !important;
}
.site-navbar-season-slot #seasonSelectorBox a {
    font-size: 13px !important;
    padding: 0 4px !important;
}
/* "Season" + the value stack on two lines in the header (see the inline
   style on .season-label-wrap in navbar.php) - too tall for this 24px
   bar, so here they sit "Season" in front of the value on one line
   instead. !important is needed to win over that inline style. */
.site-navbar-season-slot .season-label-wrap {
    flex-direction: row !important;
    gap: 4px !important;
}
.site-navbar-season-slot #seasonSelectorBox span {
    font-size: 11px !important;
}

/* ---- LEFT SIDE - SHRINKS ---- */
.site-navbar-left {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 3px;
    flex: 1 1 0%;
    min-width: 0;
    overflow: visible;
    position: relative; /* anchors .site-nav-dropdown below */
}

/* ---- The row of individual buttons - see the collapse script for how
   this switches with the hamburger button below. ---- */
.site-nav-links-row {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 3px;
    flex: 1 1 auto;
    min-width: 0;
}

/* ============================================================
   NAV BAR - COLLAPSE TO DROPDOWN
   ============================================================
   Below a 2px gap between adjacent nav buttons (or once a label
   starts clipping), the JS in navbar.php adds .nav-collapsed to
   .site-navbar-left, moves the <a> links out of .site-nav-links-row
   and into .site-nav-dropdown, and reveals this button in their
   place - see that script for the actual measurement/decision.
   ============================================================ */
.site-nav-hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 20px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: white;
    font-size: 15px;
    line-height: 1;
    cursor: url('../images/BatPointer.png') 0 0, pointer;
    flex: 0 0 auto;
}
.site-nav-hamburger:hover,
.site-nav-hamburger[aria-expanded="true"] {
    border: 1px solid whitesmoke;
}

.site-navbar-left.nav-collapsed .site-nav-links-row {
    display: none;
}
.site-navbar-left.nav-collapsed .site-nav-hamburger {
    display: flex;
}

.site-nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: #2c3e50;
    border: 1px solid #34495e;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.35);
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 160px;
    z-index: 99999;
}
.site-nav-dropdown[hidden] {
    display: none;
}
/* Full-size and readable inside the dropdown - it's not fighting for
   horizontal room the way the button row is, so undo whatever the
   breakpoints below shrank the buttons down to. */
.site-nav-dropdown .site-nav-link {
    width: 100%;
    font-size: 14px !important;
    padding: 6px 10px !important;
    letter-spacing: 0.3px !important;
}
/* Hover tooltips don't make sense stacked in a vertical menu. */
.site-nav-dropdown .nav-tip {
    display: none !important;
}

/* Flexbox `gap` fallback for older Android browsers - the hamburger
   button/dropdown above only exists to keep this nav usable on narrow,
   older phones, so it needs to still look right on browsers that
   predate flexbox `gap` support (Chrome <84 / Safari <14.1, i.e. most
   stock/WebView browsers on Android 9 and earlier that haven't had
   Chrome updated separately). Without this, `.site-nav-links-row`'s
   buttons and `.site-nav-dropdown`'s stacked links render flush
   against each other with no spacing at all, since `gap` is their only
   separation there (no `justify-content: space-between` to fall back
   on). Gated on html.no-flexbox-gap (set by the feature-test script at
   the top of navbar.php) rather than `@supports (gap: 1px)`, because
   several years of Chrome/Safari versions support `gap` for CSS Grid
   but not flexbox, which would make that @supports check wrongly
   report "supported" for this specific property. */
html.no-flexbox-gap .site-nav-links-row > * + * {
    margin-left: 3px;
}
html.no-flexbox-gap .site-nav-dropdown > * + * {
    margin-top: 2px;
}
html.no-flexbox-gap .site-navbar-season-slot #seasonSelectorBox > * + * {
    margin-left: 6px !important;
}
html.no-flexbox-gap .site-navbar-season-slot .season-label-wrap > * + * {
    margin-left: 4px !important;
}

/* ---- RIGHT SIDE - FIXED ---- */
.site-navbar-right {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 5px;
    flex: 0 0 auto;
    flex-shrink: 0;
    margin-left: 8px;
    overflow: visible;
}

/* ============================================================
   NAV LINKS - WITH CHARACTER SPACING
   ============================================================ */

/* ---- ALL NAV LINKS ---- */
.site-nav-link {
    color: white;
    font-weight: bold;
    font-size: 15px;
    text-decoration: none;
    padding: 0 6px;
    height: 20px;
    display: flex;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 4px;
    box-sizing: border-box;
    background: transparent;
    white-space: nowrap;
    position: relative;
    cursor: url('../images/BatPointer.png') 0 0, pointer;
    transition: all 0.15s ease;
    letter-spacing: 0.5px;
}

/* ---- LEFT LINKS - SHRINK ---- */
.site-navbar-left .site-nav-link {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 15px;
    padding: 0 5px;
    letter-spacing: 0.5px;
}

/* ---- RIGHT LINKS - FIXED ---- */
.site-navbar-right .site-nav-link {
    flex: 0 0 auto;
    font-size: 15px;
    padding: 0 5px;
    letter-spacing: 0.5px;
}

.site-navbar-right img {
    height: 15px;
    vertical-align: middle;
}

/* ---- Hover States ---- */
.site-nav-link:hover {
    background: transparent;
    border: 1px solid whitesmoke;
    text-decoration: none;
}

.site-nav-link.public-link { 
    background: darkred; 
}

.site-nav-link.public-link:hover { 
    background: #6b0000; 
    border: 1px solid whitesmoke; 
}

.site-nav-link.active { 
    background: slategrey; 
    border: 1px solid whitesmoke; 
}

/* ============================================================
   TOOLTIPS - COMPLETE
   ============================================================ */

/* ---- Tooltip Base ---- */
.nav-tip {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 6px;
    background: #2c3e50;
    color: #ffffff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: normal;
    line-height: 1.3;
    white-space: normal;
    text-align: center;
    max-width: 220px;
    width: max-content;
    box-shadow: 0 4px 15px rgba(0,0,0,0.25);
    z-index: 99999;
    pointer-events: none;
    letter-spacing: 0px;
}

/* ---- Show tooltip on hover for ALL links ---- */
.site-nav-link:hover .nav-tip {
    display: block !important;
}

/* ---- Fees paid-in / Outstanding summary (navbar right side) - not a nav
   link, so it needs its own trigger rule reusing the same .nav-tip look
   rather than the .site-nav-link:hover rule above. Every other .nav-tip
   lives inside .site-navbar, which sits 60px down the page (see
   .site-navbar's top:60px), leaving room for the tooltip to pop up above
   its trigger. This one sits inside .site-header-container instead, which
   starts just 5px from the top of the page - and this block is the LOWER
   of two stacked rows within it, so there isn't enough clearance above it
   for the base .nav-tip's upward placement without the tooltip clipping
   against the top of the browser window. Opening it downward instead
   avoids that regardless of how tall the header ends up being. ---- */
.fees-summary {
    position: relative;
    cursor: default;
}
.fees-summary:hover .nav-tip {
    display: block !important;
}
.fees-summary .nav-tip {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 6px;
}

/* ---- Right-aligned tooltip (for right-side links) ---- */
.nav-tip.align-right {
    left: auto;
    right: 0;
    transform: none;
}

/* ---- Right-aligned tooltip for last child (Logout) ---- */
.site-nav-link:last-child .nav-tip {
    left: auto;
    right: 0;
    transform: none;
}

/* ---- Developer-only clickable variant (Logout tooltip's "simulate idle
   timeout now" trigger) - overrides the base .nav-tip's pointer-events:none
   so this one specific tooltip can actually be clicked.

   The base .nav-tip sits 6px above the link (margin-bottom:6px) - genuine
   dead space with no element in it, so moving the mouse from the link up
   to the tooltip crossed a gap where nothing was hovered, :hover was lost
   for that instant, and the tooltip (display:none again) vanished before
   the cursor ever reached it. A small NEGATIVE margin here makes this
   tooltip's own box overlap the link by a couple of pixels instead of
   merely touching it (touching exactly can still leave a 1px gap on some
   browsers/zoom levels) - the boxes are directly adjacent with no dead
   zone to cross, so hover carries over smoothly from one to the other. ---- */
.nav-tip-clickable {
    pointer-events: auto;
    cursor: pointer;
    margin-bottom: -2px;
}
.nav-tip-clickable:hover {
    background-color: #34495e;
}

/* ============================================================
   EDIT MODAL
   ============================================================ */
.edit-info-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;
}

.edit-info-modal-box {
    background: #ffffff;
    padding: 20px;
    border-radius: 6px;
    width: 420px;
    max-width: 90%;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    position: relative;
    color: #333;
}

.edit-info-modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #666;
}

.edit-info-modal-body label { 
    display: block; 
    font-weight: bold; 
    margin-bottom: 6px; 
    font-size: 0.9em; 
}

.edit-info-modal-body textarea,
.edit-info-modal-body input[type="text"],
.edit-info-modal-body select {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.95em;
}

.edit-info-modal-error { 
    color: #cc0000; 
    font-size: 0.85em; 
    margin-top: 8px; 
}

.edit-info-modal-actions { 
    margin-top: 15px; 
    display: flex; 
    justify-content: flex-end; 
    gap: 8px; 
}

.edit-info-cancel-btn,
.edit-info-save-btn {
    padding: 6px 14px;
    border-radius: 4px;
    border: 1px solid #ccc;
    cursor: pointer;
    font-weight: bold;
}

.edit-info-cancel-btn { 
    background: #f1f1f1; 
    color: #333; 
}

.edit-info-save-btn { 
    background: #003366; 
    color: #fff; 
    border-color: #002244; 
}

.season-selector-disabled { 
    opacity: 0.5; 
    pointer-events: none; 
    cursor: default; 
}

.season-selector-disabled a {
    pointer-events: none;
    cursor: default;
}

/* ============================================================
   EDGE SWIPE-NAV BUTTONS
   Created by TTTouch.enableSwipeNavigation() in touch-interactions.js -
   a "<"/">" equivalent to that same function's swipe gesture, for moving
   to the previous/next page in the nav bar's own order. position:fixed
   takes them out of normal document flow entirely, floating over the
   page - they can't push or add margin/space to anything else on the
   page no matter what. Fixed against the left/right edge of the
   viewport and vertically centred, so they sit in the middle of the
   content area regardless of which page's layout is showing. z-index is
   well below every modal overlay in this app (20000+), so an open modal
   already covers and intercepts clicks on these for free - no extra
   show/hide logic needed for that case.

   On a real mouse - "(hover: hover) and (pointer: fine)", i.e. a normal
   desktop browser - they stay invisible until hovered, then fade in:
   floating controls that only show on mouseover, per request. Touch has
   no true hover state, so touch/mobile devices (which don't match that
   media query) keep them always visible instead, since an invisible,
   never-hoverable button would just be unreachable there.
   ============================================================ */
.tt-edge-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 51, 102, 0.55);
    color: #ffffff;
    font-size: 18px;
    line-height: 1;
    font-weight: bold;
    font-family: inherit;
    border: none;
    padding: 0;
    margin: 0;
    z-index: 9000;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.tt-edge-nav-prev {
    left: 0;
    border-radius: 0 6px 6px 0;
}

.tt-edge-nav-next {
    right: 0;
    border-radius: 6px 0 0 6px;
}

/* Hover-reveal, mouse-driven devices only - see the block comment above.
   .tt-edge-nav-sticky: a freshly-loaded page (i.e. right after clicking
   one of these buttons, which navigates to a new document) has no
   :hover state yet even if the cursor never left the button, so without
   this the button would stay invisible until the mouse moves again.
   touch-interactions.js adds this class for one page load right after an
   edge-nav click, then removes it on the first real mousemove. */
@media (hover: hover) and (pointer: fine) {
    .tt-edge-nav {
        opacity: 0;
        transition: opacity 0.15s ease;
    }
    .tt-edge-nav:hover,
    .tt-edge-nav:focus-visible,
    .tt-edge-nav.tt-edge-nav-sticky {
        opacity: 1;
    }
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */
@media screen and (max-width: 1200px) {
    .site-navbar-left .site-nav-link { 
        font-size: 11px; 
        padding: 0 4px; 
        letter-spacing: 0.4px;
    }
    .site-navbar-right .site-nav-link { 
        font-size: 11px; 
        padding: 0 4px; 
        letter-spacing: 0.4px;
    }
}

@media screen and (max-width: 992px) {
    .site-navbar-left .site-nav-link { 
        font-size: 10px; 
        padding: 0 3px; 
        letter-spacing: 0.3px;
    }
    .site-navbar-right .site-nav-link { 
        font-size: 10px; 
        padding: 0 3px; 
        letter-spacing: 0.3px;
    }
    .site-navbar-right img { 
        height: 11px; 
    }
}

@media screen and (max-width: 768px) {
    .site-navbar-left .site-nav-link { 
        font-size: 9px; 
        padding: 0 3px; 
        letter-spacing: 0.2px;
    }
    .site-navbar-right .site-nav-link { 
        font-size: 9px; 
        padding: 0 3px; 
        letter-spacing: 0.2px;
    }
    .site-navbar-right img { 
        height: 10px; 
    }
    .site-navbar { 
        padding: 0 4px; 
    }

    /* ---- Body itself has a 980px desktop min-width (see the
       "Body Layout" rule above) with overflow-x:auto - that's the real
       root cause of the header/title problem: every page is forced to
       be at least 980px wide with horizontal scrolling turned on, so on
       a phone the title (and everything else) just runs off past the
       right edge, reachable only by swiping the page sideways. Drop
       that floor here so the page is actually as wide as the screen. ---- */
    body {
        min-width: 0;
    }

    /* ---- Header (logo/title) - the container has its own 920px
       desktop min-width so justify-content:space-between never crushes
       its children together; on a phone/tablet that forces the header
       wider than the (now correctly-sized) body too, so drop it here
       as well - the title itself now manages its own width via the
       fit script instead of relying on this container's size. ---- */
    .site-header-container {
        min-width: 0;
        left: 8px;
        right: 8px;
    }

    /* ---- Nav links bar - same 920px min-width problem as the header
       above (it's a separate element with its own floor). The existing
       breakpoints already shrink the link font sizes down to 7-9px, but
       that was never enough on its own because this outer bar stayed
       pinned to 920px wide regardless, pushing the right-hand links
       (Sign-in as Member / Logout) off past the edge of the screen. ---- */
    .site-navbar {
        min-width: 0;
        left: 8px;
        right: 8px;
    }
    #siteHeaderLogoImg {
        height: 34px !important;
    }

    /* Title sizing/content is now handled dynamically by the "Site
       Title - Fit To Available Space" script in navbar.php (shrinks
       the font, then abbreviates "Table Tennis" to "TT", then breaks
       the line, then hides it entirely) - see that script rather than
       a static breakpoint here, since the right amount of shrinking
       depends on what's actually next to it (season selector vs. the
       login form vs. nothing), not just the viewport width. */
}

@media screen and (max-width: 600px) {
    .site-navbar-left .site-nav-link { 
        font-size: 8px; 
        padding: 0 2px; 
        letter-spacing: 0.1px;
    }
    .site-navbar-right .site-nav-link { 
        font-size: 8px; 
        padding: 0 3px; 
        letter-spacing: 0.1px;
    }
    .site-navbar-right img { 
        height: 9px; 
    }
    .site-navbar { 
        padding: 0 3px; 
    }
}

@media screen and (max-width: 480px) {
    .site-navbar-left .site-nav-link { 
        font-size: 7px; 
        padding: 0 2px; 
        letter-spacing: 0px;
    }
    .site-navbar-right .site-nav-link { 
        font-size: 8px; 
        padding: 0 3px; 
        letter-spacing: 0px;
    }
    .site-navbar-right img { 
        height: 9px; 
    }
    .site-navbar-right { 
        gap: 3px; 
        margin-left: 4px; 
    }
    /* Hide "Reset" text on very small screens - keep icon */
    .site-navbar-right a:first-child span.nav-tip {
        display: none !important;
    }

    /* ---- Header (logo/title) - tighter still on phones ---- */
    .site-header-container {
        left: 4px;
        right: 4px;
    }
    #siteHeaderLogoImg {
        height: 26px !important;
    }
}

/* ============================================================
   HEADER TITLE ROWS - collapsible filter/search blocks
   ============================================================
   Generic companion to the .hdr-btn-label wording-hide handled in
   navbar.php's header-title-row script: for a block too big to just
   drop a word (e.g. fixtures.php's Competition/Team search selects),
   mark it .hdr-collapsible with its real controls inside a
   .hdr-collapsible-row. When it gets too close to the row's heading,
   that script moves the row's children into .hdr-collapsible-dropdown
   and reveals the .hdr-collapsible-toggle icon button in their place -
   same collapsed-behind-an-icon idea as the nav bar's hamburger above,
   scoped to one header block instead of the whole nav.
   ============================================================ */
.hdr-collapsible {
    position: relative;
}
.hdr-collapsible-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0;
    background: #f0f0f0;
    border: 1px solid #999;
    border-radius: 5px;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}
.hdr-collapsible-toggle[hidden] {
    display: none;
}
.hdr-collapsible-toggle[aria-expanded="true"] {
    background: #cfe8ff;
}
.hdr-collapsible-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: #2c3e50;
    border: 1px solid #34495e;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.35);
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    min-width: 180px;
    z-index: 99999;
}
.hdr-collapsible-dropdown[hidden] {
    display: none;
}
/* The moved-in controls (labels, selects, the reset icon button) read as
   light-on-dark inside the dropdown, matching .site-nav-dropdown - and
   get room to breathe now that they're not fighting for horizontal
   space in the header row. */
.hdr-collapsible-dropdown span {
    color: #ffffff !important;
}
.hdr-collapsible-dropdown select {
    max-width: none !important;
    width: 100%;
}

/* ============================================================
   HEADER LOGIN FORM - compact on phones
   The login block (Register link + "Login" + name/password fields) is
   built from fixed pixel widths (120 + 15 gap + 250 + margins ~ 400px),
   which is wider than a phone, so the inputs were clipped/pushed off
   the right edge. Below 600px, drop the fixed widths and negative
   margins so it shrinks to fit; the site title already hides itself
   when there's no room (see "Site Title - Fit To Available Space").
   !important is needed to beat the inline styles in php/navbar.php.
   ============================================================ */
@media screen and (max-width: 600px) {
    #siteHeaderRightInfo { margin-right: 0 !important; min-width: 0; }
    .hdr-login-wrap  { gap: 4px !important; margin-right: 0 !important; }
    .hdr-login-left  { width: auto !important; flex: 0 0 auto; }
    .hdr-login-flash { margin: 0 0 2px 0 !important; }
    .hdr-login-flash a { font-size: 8px !important; }
    .hdr-login-word  { font-size: 16px !important; margin-right: 0 !important; }
    .hdr-login-fields { width: auto !important; min-width: 0; }
    .hdr-login-fields td { font-size: 8px !important; padding: 1px 2px !important; }
    .hdr-login-input { width: 90px !important; max-width: 100%; font-size: 12px !important; }
}

/* ============================================================
   PHONE/TABLET GUTTER - ALL PAGES
   Keep every page's content exactly as wide as the nav bar
   (.site-navbar / .site-header-container are inset 8px at <=768px).
   Several pages (login, legacy, venue-contacts, teams) set their own
   body padding (~29px) in a page-level <style>, which beat style.css's
   8px rule. This file is linked from php/navbar.php inside <body>, i.e.
   after those <style> blocks, and !important guarantees it wins.
   The -15px right bleed on the scroll container assumes a wide desktop
   gutter, so it's zeroed too.
   ============================================================ */
@media screen and (max-width: 768px) {
    body {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .scrollable-data-container {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ==========================================================================
   MODAL CLOSE (X) - same red square + white X as the Fixtures record popup
   (.record-details-x-close in fixtures.php). !important so it also wins over
   the page-level copies of this rule (legacy.php, edit_info_widget.php).
   ========================================================================== */
.edit-info-modal-close {
    background: #ff3b30 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    width: 24px !important;
    height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    font-weight: bold !important;
    line-height: 1 !important;
    cursor: pointer !important;
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    padding: 0 !important;
}
.edit-info-modal-close:hover {
    background: #d32f2f !important;
    color: #ffffff !important;
}

/* Fixtures search dropdown (reduced mode): make the reset control obvious -
   icon on a white tile, with a bold white "Reset" label beside it. */
.hdr-collapsible-row .reset-lbl { display: none; }
.hdr-collapsible-dropdown .reset-lbl {
    display: inline;
    color: #ffffff !important;
    font-weight: bold !important;
    font-size: 1em;
}
.hdr-collapsible-dropdown #resetHeaderSearchBtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
}
.hdr-collapsible-dropdown #resetHeaderSearchBtn img {
    background: #ffffff;
    border-radius: 4px;
    padding: 3px;
    box-sizing: content-box;
}

/* ==========================================================================
   REDUCED MODE (under 700px): every page's header buttons show ICON ONLY.
   Previously each page hid its button wording at a different width (JS,
   based on the gap to the title); now they all switch together at 700px.
   (The JS still hides the wording earlier if a heading gets cramped.)
   ========================================================================== */
@media screen and (max-width: 700px) {
    .hdr-btn-label { display: none !important; }
    /* Fixtures: compact "(All)/(Upcoming)" stand-in for the hidden filter wording */
    [data-title-row] .title-mode-note { display: inline; }
}

/* ==========================================================================
   STANDARD HEADER BUTTON (.hdr-btn) - every page's title-row buttons
   (Add..., Edit Settings, Generate/Create, Show all, Profile) share ONE size,
   border, background and icon size. Same function = same icon everywhere:
   Add = plus, Settings = gear, Generate/Create sessions = repeat, Filter = calendar.
   Position offsets (top/left/right/transform) stay page-specific.
   ========================================================================== */
.hdr-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    box-sizing: border-box !important;
    height: 32px !important;
    min-width: 36px !important;
    padding: 0 8px !important;
    font-size: 20px !important;
    font-weight: normal !important;
    line-height: 1 !important;
    color: #333 !important;
    background: #f0f0f0 !important;
    border: 1px solid #999 !important;
    border-radius: 5px !important;
    cursor: pointer;
    text-decoration: none !important;
    white-space: nowrap;
}
.hdr-btn:hover { background: #e2e2e2 !important; }
.hdr-btn .hdr-btn-label { font-size: 13px; }
.hdr-btn img { width: 24px !important; height: 24px !important; }
.hdr-btn svg { width: 24px; height: 24px; }
.hdr-btn.hdr-btn-active { background: #cfe8ff !important; }

/* ==========================================================================
   ALL ICONS 24 x 24 px - one size for every icon image on the system
   (delete, edit, change image, insert, move up, reset, save, link, cards,
   fee status, reset password...). Logos/photos are not icons and are not
   matched. Emoji/inline-SVG icons in header buttons are sized in .hdr-btn.
   ========================================================================== */
img[src*="DeleteRecord" i], img[src*="EditDetail"], img[src*="IconEdit"], img[src*="ChangeImage"],
img[src*="InsertItem"], img[src*="moveupitem"], img[src*="IconReset"], img[src*="Save_to_Db"],
img[src*="Link2Map"], img[src*="Cards.png"], img[src*="FeeStatus"], img[src*="ResetPassword"],
.panel-action-icon, .icon-btn img, .delete img {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    max-width: none !important;
    object-fit: contain;
}
/* panel edit-pencil (Help / Legacy / Login): its box grows to hold a 24px icon */
.edit-info-icon { width: 24px !important; height: 24px !important; margin-left: -18px !important; }
.edit-info-icon img { width: 24px !important; height: 24px !important; }
/* search / filter / view icon buttons (Help toolbar, Registrations toggle) */
.search-icon-btn { width: 36px !important; height: 32px !important; }
.search-icon-btn svg { width: 24px; height: 24px; }
@media screen and (min-width: 701px) {
    /* three 24px panel action icons + gaps need a wider column than 74px */
    .panel-action-icons-row { width: 84px !important; flex: 0 0 84px !important; }
    #panelHeaderIconsSpacer { width: 84px !important; flex: 0 0 84px !important; }
}
/* title rows grow slightly to hold the 32px header buttons */
[data-title-row] { min-height: 32px; }

/* ---- Page & Role help ("?" left of Logout + its popup) ---- */
.howto-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border: 1px solid whitesmoke; border-radius: 50%;
    color: white; font-size: 12px; font-weight: bold; cursor: help; flex: 0 0 auto;
}
.howto-btn:hover, .howto-btn:focus { background: rgba(255,255,255,0.2); outline: none; }
.howto-popup {
    position: fixed; z-index: 2000; width: 340px; max-width: calc(100vw - 16px);
    background: #fdf8e4; color: #003366; border-radius: 6px; overflow: hidden;
    /* 3D raised border: light top/left, dark bottom/right */
    border: 3px solid; border-color: #c9d6ea #1f3a5f #1f3a5f #c9d6ea;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35); padding: 0 10px 8px; font-size: 12px;
    font-family: Arial, sans-serif; text-align: left;
}
.howto-popup[hidden] { display: none; }
/* Dark blue heading bar, full width of the popup (negative margins cancel its side padding) */
.howto-title { font-weight: bold; font-size: 13px; background: #003366; color: #fff; margin: 0 -10px 6px; padding: 5px 10px; }
.howto-detail { white-space: pre-wrap; max-height: 60vh; overflow-y: auto; color: #222; line-height: 1.35; }
.howto-detail.howto-empty { color: #999; font-style: italic; }
.howto-edit { width: 100%; min-height: 160px; box-sizing: border-box; font-size: 12px; font-family: inherit; padding: 4px 6px; border: 1px solid #999; border-radius: 3px; }
.howto-toolbar { display: flex; gap: 4px; margin-bottom: 4px; }
.howto-toolbar button { width: 26px; height: 22px; padding: 0; font-size: 12px; border-radius: 3px; border: 1px solid #999; background: #f4f4f4; color: #222; cursor: pointer; }
.howto-toolbar button:hover { background: #e0e8f0; border-color: #003366; }
.howto-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.howto-actions button { padding: 2px 10px; font-size: 11px; font-weight: bold; border-radius: 4px; border: 1px solid #003366; background: #fff; color: #003366; cursor: pointer; }
.howto-actions .howto-save-btn { background: #003366; color: #fff; }
/* `hidden` must win over the display:flex above (e.g. no Edit for
   non-developers / when spoofing a member) */
.howto-popup [hidden] { display: none !important; }

/* Pay Fees step 1 - bank transfer request before card checkout (navbar.php) */
.pay-choice-overlay { position: fixed; inset: 0; z-index: 10050; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.pay-choice-overlay[hidden] { display: none; }
.pay-choice-box { position: relative; background: #fff; color: #222; width: 100%; max-width: 380px; border-radius: 8px; border: 2px solid #003366; box-shadow: 0 6px 20px rgba(0,0,0,0.3); padding: 14px 16px; font-size: 14px; line-height: 1.4; text-align: left; white-space: normal; overflow-wrap: break-word; box-sizing: border-box; }
.pay-choice-title { font-weight: bold; font-size: 16px; color: #003366; margin: 0 24px 8px 0; }
.pay-choice-box p { margin: 0 0 10px; }
.pay-choice-close { position: absolute; top: 6px; right: 8px; border: none; background: none; font-size: 22px; line-height: 1; color: #666; cursor: pointer; }
.pay-choice-bank { width: 100%; border-collapse: collapse; margin-bottom: 12px; background: #f4f7fb; border: 1px solid #c9d6e6; }
.pay-choice-bank td { padding: 4px 8px; border-bottom: 1px solid #e1e8f0; }
.pay-choice-bank td:first-child { color: #555; white-space: nowrap; width: 1%; }
.pay-choice-nobank { color: #a00000; font-style: italic; }
.pay-choice-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.pay-choice-dd-btn { padding: 6px 14px; font-size: 13px; font-weight: bold; color: #003366; background: #fff; border: 1px solid #003366; border-radius: 4px; cursor: pointer; }
.pay-choice-dd-btn:hover { background: #e0e8f0; }
.pay-choice-card-btn { padding: 6px 14px; font-size: 13px; font-weight: bold; color: #fff; background: #cc0000; border: 1px solid #a00000; border-radius: 4px; cursor: pointer; }
.pay-choice-card-btn:hover { background: #a00000; }