/* Lock the page so the outer window never scrolls */
html, body {height:100%; margin:0; padding:0; overflow:hidden; font-family:Arial, sans-serif;
    background:#f4f4f4;}
/* Give the page content layout some padding without breaking height */
body {display:flex; flex-direction:column; box-sizing:border-box; padding:5px 30px;}

/* Keep every page's content gutter in lockstep with the navigation bar's
   own left/right inset (navbar.css's .site-navbar/.site-header-container:
   left/right 30px above 768px, 8px at or below it), so the content area
   is always exactly as wide as the nav bar's background - not just at
   the two extremes, but at every width as the viewport shrinks. This is
   the one place that needs to track navbar.css's breakpoint if it ever
   changes. Also zeroes .scrollable-data-container's usual -15px
   left-bleed (below) at the same breakpoint - that bleed assumes a full
   30px gutter to bleed into, and would push content past the (now much
   narrower) 8px gutter, off the edge of the screen, if left as is. */
@media screen and (max-width: 768px) {
    body {padding-left: 8px; padding-right: 8px;}
    .scrollable-data-container {margin-left: 0;}
}

nav {background:#003366; display:flex; flex-shrink:0;}
nav a {color:white; text-decoration:none; margin:2px 3px; padding:1px 6px; font-weight:bold; 
    border-radius:6px;}
table {margin:0 auto!important; border-collapse:collapse; background:antiquewhite;}
th, td {padding:1px 2px; text-align:center; white-space:nowrap;}
h1, h2, .cal-header {color:#003366; flex-shrink:0; margin-top:5px; margin-bottom:5px;}
.scrollable-data-container {flex-grow:1; overflow-y:auto; background:#f4f4f4; margin: 5px -15px 15px 0;
    scrollbar-gutter: stable; padding:0}
.scrollable-data-container table th {position:sticky; top:0; background:gainsboro !important;
    z-index:20; box-shadow:inset 0 -1px 0 #ccc;}
td.fixture-understrength {background-color:#ffa500 !important;}

/* ============================================================
   SHARED PAGE RULES - extracted from identical copies that used to be
   duplicated in several pages' own <style> blocks (see _backup_pre_dedupe/
   for the pre-change pages). Only rules whose every definition was
   byte-identical and never touched by a responsive override were moved. */
.cal-title-container h2 { margin:0; height:24px; line-height:24px; font-size:1.3em; }
.cal-title-container a { text-decoration:none; background:#e4e8ed; font-size:16px; font-weight:bold; color:#003366; padding:1px 6px; border-radius:3px; display:inline-flex; align-items:center; justify-content:center; line-height:1; }
.cal-title-container a:hover { background:lightgrey; }
.cal-header { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:5px; }
.cal-header a { text-decoration:none; background:#e4e8ed; font-size:15px; font-weight:bold; color:#003366; padding:1px 6px; border-radius:3px; display:inline-flex; align-items:center; justify-content:center; line-height:1; }
.cal-header a:hover { background:lightgrey; }
.cal-header h3 { margin:0; min-width:150px; text-align:center; font-size:1.05em; color:#003366; }
.cal-event-count { font-size:12px; color:#003366; white-space:nowrap; }
.fx-comp-line, .fx-teams-line { white-space:nowrap; overflow:hidden; }
.fx-comp-line { font-weight:bold; }
.fx-result { color:inherit; text-decoration:none; font-weight:bold; }
.fx-result img { vertical-align:middle; margin-left:2px; }
.fx-team-us { font-weight:bold; }
.day-number { font-weight:bold; font-size:12px; pointer-events:none; }
.other-month .day-number { color:#aaa; }
td.other-month { pointer-events:none; }
.day-cell-content { display:flex; flex-direction:column; height:100%; }
.needs-players-banner { margin-top:auto; padding-top:4px; text-align:center; font-size:9px; white-space:normal; font-weight:bold; color:#000; pointer-events:none; }
.other-month .fixture-entry, .other-month .static-entry { opacity:0.45; filter:grayscale(40%); }
.fixture-entry { position:relative; margin-top:2px; padding:1px 2px; border-radius:3px; background:#f2f4f7; font-size:12px; line-height:1.2; cursor:pointer; }
/* Fixture with "to be confirmed" / "tbc" in its Notes (calendar + fixtures pages):
   red 45° stripes over the league colour. !important beats the inline background. */
.fx-tbc { background-image:repeating-linear-gradient(45deg, rgba(210,0,0,0.45) 0 8px, transparent 8px 28px) !important; }
.static-entry { position:relative; margin-top:2px; padding:1px 2px; border-radius:3px; background:#f2f4f7; font-size:12px; line-height:1.2; cursor:pointer; }
.static-entry.special-event-entry { background:#007bff !important; color:#ffffff !important; font-weight:bold !important; }
.fixture-entry .attendee-count, .static-entry .attendee-count { font-weight:normal; font-size:10px; }
.more-entries { margin-top:2px; font-size:9px; color:#666; font-style:italic; }
#calendar-tooltip strong { color:#f1c40f; }
#calendar-tooltip hr { border:0; border-top:1px solid #4f5f6f; margin:6px 0; }
#calendar-tooltip .tooltip-body { box-sizing:border-box; min-width:0; overflow-wrap:anywhere; }
#calendar-tooltip .tooltip-result { font-weight:bold; color:#f1c40f; margin-bottom:6px; text-align:left; word-break:break-word; }
#tooltip-card-outside a { display:block; height:100%; width:100%; }
#tooltip-card-outside img { height:100%; width:auto; display:block; object-fit:contain; max-width:420px; }
.record-details-modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.5); display: none; align-items: center; justify-content: center; z-index: 20000; padding: 10px; box-sizing: border-box; }
.record-details-modal-box { background: #ffffff; color: #333333; padding: 16px; border-radius: 8px; width: 100%; max-width: 450px; max-height: 90vh; overflow-y: auto; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); position: relative; box-sizing: border-box; }
.record-details-content { font-size: 0.9em; line-height: 1.25; margin-bottom: 8px; }
.data-grid { border-collapse:separate; table-layout:fixed; width:100%; margin:0; }
.info-header-row { padding:0; font-weight:bold; color:#003366; border-bottom:2px solid #cddced; }
.info-header-row > span { display:inline-block; box-sizing:border-box; padding:0; margin:0; }
.data-grid td { padding:10px; text-align:left; vertical-align:top; background-color:#fff8e1; white-space:normal; word-wrap:break-word; overflow-wrap:break-word; }
.data-grid tbody tr { border:1px solid #ddd; border-radius:6px; box-shadow:0 1px 3px rgba(0,0,0,0.05); }
.data-grid tbody td { border-top:1px solid #ddd; border-bottom:1px solid #ddd; }
.data-grid tbody td:first-child { border-left:1px solid #ddd; border-top-left-radius:12px; border-bottom-left-radius:12px; }
.data-grid tbody td:last-child { border-right:1px solid #ddd; border-top-right-radius:12px; border-bottom-right-radius:12px; }
.col-section { width:115px; text-align:center!important; }
.col-content { width: calc(100% - 110px); max-width:none; }
.data-grid td.col-section { font-size:1em; font-weight:bold; }
.panel-row-wrapper { display:flex; align-items:stretch; gap:8px; width:800px; max-width:95%; margin:0 auto 8px auto; }
.panel-row-wrapper > .data-grid { flex:1 1 auto; }
.panel-cell-content { position:relative; min-height:14px; }
.panel-action-icons-row { width:74px; flex:0 0 74px; display:flex; flex-direction:row; gap:3px; justify-content:flex-start; align-items:flex-start; padding-top:10px; }
.main-content { flex:1; margin-top:15px; display:flex; flex-direction:column; min-height:0; }
.icon-btn { border:none; background:none; padding:0; cursor:pointer; vertical-align:middle; }
.delete img, .icon-btn img { vertical-align:middle; }

/* ============================================================
   NARROW SCREENS - PANEL CARDS (Help + Legacy pages, same idea as the
   Welcome page's boxes). Below 700px the two-column Section | Detail grid
   becomes one full-width dashed card per panel (Section as its centred
   heading, Detail beneath); the Section/Detail column-header row is
   dropped; and each panel's action icons drop below its card,
   right-aligned. !important beats the inline styles on the header row.
   ============================================================ */
@media screen and (max-width: 700px) {
    #panelHeaderRow, .panel-header-row { display: none !important; }

    .panel-row-wrapper { flex-direction: column; gap: 0; width: 100%; max-width: 100%; margin-bottom: 10px; }
    .panel-row-wrapper > .data-grid,
    .panel-row-wrapper > .data-grid tbody,
    .panel-row-wrapper > .data-grid tr,
    .panel-row-wrapper > .data-grid td { display: block; width: 100% !important; box-sizing: border-box; }
    .panel-row-wrapper > .data-grid tbody tr {
        background: #fff8e1; border: 1px dashed #a0b0c0; border-radius: 12px; box-shadow: none;
    }
    .data-grid tbody td,
    .data-grid tbody td:first-child,
    .data-grid tbody td:last-child {
        border: none !important; border-radius: 0 !important; background: transparent !important;
    }
    .data-grid td.col-section { text-align: center !important; color: #003366; font-size: 1.05em; padding: 10px 14px 2px; }
    .data-grid td.col-content { padding: 2px 14px 10px; }
    .panel-action-icons-row { width: auto; flex: 0 0 auto; align-self: flex-end; padding: 3px 4px 0 0; }
}