/* Layout - Dashboard, tabs, grids, and page structure */

/* Welcome Screen */
.welcome-content {
    text-align: center;
    color: white;
}

.welcome-content h2 {
    font-size: 3rem;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.welcome-content p {
    font-size: 1.2rem;
    margin-bottom: 3rem;
    opacity: 0.9;
}

.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.feature-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    color: #333;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-10px);
}

.feature-card i {
    font-size: 3rem;
    color: #111037;
    margin-bottom: 20px;
}

.feature-card h3 {
    margin-bottom: 15px;
    color: #2c3e50;
}

/* Dashboard */
.dashboard-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    flex-wrap: wrap;
}

.tab-btn {
    background: #111037;
    border: none;
    padding: 15px 25px;
    color: white;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    transition: all 0.3s ease;
    font-weight: bold;
}

.tab-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.tab-btn.active {
    background: rgba(255, 255, 255, 0.95);
    color: #D91B5B;
    font-weight: bold;
}

.tab-btn[data-tab="draws"].active {
    color: #D91B5B !important;
}

.tab-content {
    display: none;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.tab-content.active {
    display: block;
}

/* Section Headers */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e9ecef;
}

.section-header h3 {
    color: #2c3e50;
    font-size: 1.5rem;
}

/* Navigation Grid */
.nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.nav-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 40px 30px;
    border-radius: 15px;
    text-align: center;
    color: #333;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.nav-card:hover {
    transform: translateY(-10px);
    border-color: #111037;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.nav-card i {
    font-size: 3rem;
    color: #111037;
    margin-bottom: 20px;
    display: block;
}

.nav-card h3 {
    margin-bottom: 15px;
    color: #2c3e50;
    font-size: 1.3rem;
}

.nav-card p {
    margin: 0;
    opacity: 0.8;
    line-height: 1.5;
}

/* Data Lists */
.data-list {
    display: grid;
    gap: 20px;
}

.data-item {
    background: #f8f9fa;
    border: 3px solid #e9ecef;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.data-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.data-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.data-item-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #2c3e50;
    display: flex;
    align-items: center;
    gap: 10px;
}

.data-item-actions {
    display: flex;
    gap: 10px;
}

.data-item-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.info-item {
    display: flex;
    flex-direction: column;
}

.info-label {
    font-size: 12px;
    color: #6c757d;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 4px;
}

.info-value {
    font-weight: 600;
    color: #2c3e50;
}

/* Dashboard Grid */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
    position: relative;
    z-index: 1;
}

.dashboard-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: none !important;
}

.dashboard-card.calendar-card {
    grid-column: span 2;
}

/* ── Card headers ──────────────────────────────────────────────────────────
   `.card-header` is the bar at the top of every dashboard card, every panel on
   pages/profile.html, and every competition card drawn by
   js/competitions/display/draws-display.js. It is defined HERE and nowhere
   else: it used to be declared twice, here and in css/styles.css, and this
   copy carried `background: #111037 !important`. That `!important` was not a
   style choice, it was a bug with three victims:

     · a club that had set its own colours got hardcoded navy anyway — the
       inline gradient UserCache.applyTheme() painted lost to it, so the
       theming feature was dead while still applying its own negative margins,
       which dragged the header 20px outside the card's rounded corners;
     · pages/profile.html asks for a pale gradient header with #2c3e50 text.
       It got navy instead, so that page shipped slate-on-navy at 1.7:1;
     · css/competitions.css asks for a plain header with #495057 text. Same
       story, 2.4:1.

   No `!important` on the ground here now. A page or a sibling sheet that
   declares its own header ground wins, which is what those two files were
   always asking for.

   ── What was wrong on the dashboard, measured ──────────────────────────────
   Four filled navy slabs stacked down a pale page under a navy top nav, and
   they were not even the same slab. Measured at 1440px, Chromium 149:

     Your Season Statistics   82.39px tall   title baseline 46.69px from top
     Upcoming Games           69.94px        40.47px
     Availability (1)         69.94px        40.47px
     Club Feed               (70.00px)       40.50px

   The stats card was 12.45px taller than its neighbours and its title sat
   6.2px lower — because "View Full Stats" was a full-size `.btn` (42.39px)
   and the other headers had nothing to push them open. The title text also
   started at a different x per card (69px / 66px / 66px / 69px) because
   css/theme.css pads every Font Awesome glyph by 10px a side and the glyphs
   are different widths, so the four labels did not share a left edge either.
   That is the "not correct between the panels and the headers" the owner
   could see and could not name.

   ── The shape now ─────────────────────────────────────────────────────────
   One height for every header, control or no control: `--ch-height`, which is
   the 30px tap floor plus 12px of padding a side plus the hairline = 55px. The
   30px floor is a requirement, not a taste — members are largely elderly and
   tapping on tablets — so the bar is sized around it rather than the other way
   round, and nothing up here is allowed to go under it. The icon becomes a
   fixed-size chip so every title starts on the same vertical whatever glyph it
   carries. Line heights are whole pixels.

   The brand does not leave, it stops shouting: the navy moves out of a filled
   slab and into the type, a tinted icon chip and a tinted ground. The top nav
   is still a navy bar, so the identity is where identity belongs.

   ── Club theming, and why the type is a MIX and not the club colour ───────
   Restoring theming changes how a themed club's dashboard looks. That is the
   point — the feature has been dead for as long as the `!important` was here.
   But a club picks its own colour from a colour picker, and nothing stops it
   picking pale yellow. Two rules keep that safe:

     · anything a club's colour paints DIRECTLY is a tint (`--ch-ground`, the
       band; `--ch-chip`, the icon tile) — alpha over the card, so it is pale
       for every possible hue and never has text sitting on it;
     · anything with text on it uses `--ch-ink`, the club colour mixed 40% into
       near-black. That mix has a contrast FLOOR: the worst input a picker can
       produce is #ffffff, which still lands at 4.70:1 on the header ground,
       4.71:1 on the chip and 4.97:1 on a white control — all above 4.5:1. The
       platform navy default lands at 15.9:1 and is indistinguishable from
       plain #111037, so an unthemed club sees no change from this line.

   `color-mix()` is behind `@supports` rather than declared twice, because a
   custom property holding an unsupported function is not dropped at parse
   time — it fails later and takes the whole `color:` declaration with it.
   Browsers without `color-mix()` keep the flat navy, which is safe, just not
   themed. */
:root {
    /* Card-header scale. Namespaced `--ch-` and declared here rather than
       borrowed from the `--fd-` feed scale in css/announcement-card.css:
       layout.css is loaded by 23 pages, announcement-card.css by three, so a
       header on pages/players.html would have been running entirely on
       fallback literals. The two scales agree where they overlap — 30px tap
       floor, 8px control radius, #e2e8f0 line — and css/announcement-card.css
       reads `--ch-ink` for the one control it puts inside a header. */
    /* 12 + 30 + 12 + the 1px hairline. Landing the sum exactly on the
       min-height keeps every box integral: no half-pixel row, which on a 1x
       tablet is a soft edge under the title. */
    --ch-height: 55px;
    --ch-pad-y: 12px;
    --ch-pad-x: 20px;
    --ch-gap: 12px;
    --ch-gap-sm: 8px;           /* glyph-to-label inside a control */
    --ch-control: 30px;         /* the tap floor; == --fd-tap-min */
    --ch-radius: 8px;           /* == --fd-radius-control */
    --ch-fs-title: 16px;
    --ch-lh-title: 20px;
    --ch-fs-label: 13px;        /* the control beside the title */
    --ch-fs-glyph: 14px;
    --ch-line: #e2e8f0;         /* the hairline under the bar — decoration */
    --ch-control-line: #6b7280;  /* the edge of a CONTROL — see below */
    --ch-focus: #6366f1;

    /* Club colour, only ever as alpha over whatever the card is. */
    --ch-ground: rgba(var(--club-primary-rgb, 17, 16, 55), .05);
    --ch-chip: rgba(var(--club-primary-rgb, 17, 16, 55), .12);

    /* Everything that carries text. See the floor argument above. */
    --ch-ink: #111037;
}

@supports (color: color-mix(in srgb, red 40%, blue)) {
    :root {
        --ch-ink: color-mix(in srgb, var(--club-primary, #111037) 40%, #0b1020);
        /* The edge of a control is not decoration: WCAG 1.4.11 wants 3:1 for
           whatever identifies a component, and up here the border is all there
           is — a white control on a 5%-tinted band differs from its own ground
           by 1.05:1, so the ground identifies nothing. The hairline this
           started as measured 1.23:1. Mixing 75% of the (already guaranteed
           dark) ink with white is the LIGHTEST mix that still clears 3:1 for
           every possible club colour: 8.47:1 on the navy default, 3.05:1 in
           the worst case a picker can produce. */
        --ch-control-line: color-mix(in srgb, var(--ch-ink) 75%, #fff);
    }
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Wraps rather than crushes. At 390px "Your Season Statistics" and a
       156px control cannot share a 318px row: unwrapped, the title broke to
       three lines and its last line ran under the button. Wrapped, the control
       drops to a row of its own and the title keeps one or two lines. The
       `flex` basis on the title below is what forces the choice — a title
       allowed to shrink to nothing never triggers the wrap. */
    flex-wrap: wrap;
    gap: var(--ch-gap);
    min-height: var(--ch-height);
    padding: var(--ch-pad-y) var(--ch-pad-x);
    background: var(--ch-ground);
    color: var(--ch-ink);
    border-bottom: 1px solid var(--ch-line);
}

.card-header h3,
.card-header h4 {
    margin: 0;
    /* NO `min-width: 0`. A flex item's default `min-width: auto` floors it at
       its own min-content, and that floor is exactly what makes the wrap above
       fire: the control drops to a second row when the title can no longer
       give up space, instead of the title crushing to nothing to keep it on
       the first. `break-word` rather than `anywhere` for the same reason —
       `anywhere` would reduce min-content to one character and the wrap would
       never trigger. */
    flex: 1 1 auto;
    overflow-wrap: break-word;
    display: flex;
    align-items: center;
    gap: var(--ch-gap);
    font-size: var(--ch-fs-title);
    /* css/theme.css forces weight 400 onto every heading with !important, so a
       header title cannot be given weight without matching it. */
    font-weight: 600 !important;
    line-height: var(--ch-lh-title);
    letter-spacing: -.01em;
    color: inherit;
}

/* The leading icon becomes a chip. css/theme.css pads every Font Awesome glyph
   by 10px each side with !important and paints it in the theme accent, which
   is why the icons never lined up with the 20px content padding below them and
   why the four titles did not share a left edge. The chip undoes both and
   gives the glyph a box of its own. */
.card-header h3 > i:first-child,
.card-header h4 > i:first-child {
    flex: 0 0 var(--ch-control);
    width: var(--ch-control);
    height: var(--ch-control);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border-radius: var(--ch-radius);
    /* Filled, no border: a tinted tile reads as a badge, and a 1px ring on it
       reads as something you can press — which it is not, and there are two
       things in these headers that genuinely are. */
    background: var(--ch-chip);
    color: var(--ch-ink) !important;
    font-size: var(--ch-fs-glyph);
}

/* Phones. Below 480px "Your Season Statistics" plus a 156px control cannot
   share a row on any reading of it, so the title takes the whole first row and
   the control gets its own — decided by a breakpoint rather than by whatever
   the longest word happens to measure, so every card behaves the same way at
   the same width. */
@media (max-width: 480px) {
    .card-header { align-items: flex-start; }
    .card-header h3,
    .card-header h4 { flex: 1 1 100%; }
}

/* Right-hand controls. "View Full Stats" was a `.btn-primary`, and what that
   actually rendered as was not a navy button: css/theme.css carries
   `.btn-primary { background: var(--theme-primary) !important }`, and on a club
   that has not set a theme `--theme-primary` is undefined, so the declaration
   is invalid at computed-value time and the background falls back to
   transparent while `border-color: var(--theme-primary) !important` falls back
   to currentColor. The result was a 42.39px control with no ground and a navy
   edge you could not see against a navy slab — and on a club that HAS themed,
   the same rule would paint it a solid club colour with a club-coloured label
   on top. Both `!important`s have to be answered here by name; specificity
   alone does not reach them. `.card-header .btn` is 0,2,0 against 0,1,0, so
   these win the important-cascade.

   Both controls that sit up here — this one and `.feed-held-btn` in
   css/announcement-card.css — are now the same object: a 30px quiet outline
   control on white. */
.card-header .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Keeps the control on the right on a wrapped row too, where
       `space-between` has nothing to push it against. */
    margin-left: auto;
    gap: var(--ch-gap-sm);
    min-height: var(--ch-control);
    padding: 0 var(--ch-gap);
    border: 1px solid var(--ch-control-line) !important;
    border-radius: var(--ch-radius);
    background: #fff !important;
    color: var(--ch-ink) !important;
    font-size: var(--ch-fs-label);
    font-weight: 600 !important;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: none;
    transition: background .12s ease, border-color .12s ease;
}

.card-header .btn:hover {
    background: var(--ch-ground) !important;
    border-color: var(--ch-ink) !important;
    /* .btn:hover lifts by 2px platform-wide (css/components.css). A control
       pinned inside a header bar has nowhere to lift to; it just detaches from
       its own row. */
    transform: none;
    box-shadow: none;
}

.card-header .btn:focus-visible {
    outline: 2px solid var(--ch-focus);
    outline-offset: 2px;
}

/* css/components.css paints every `.btn` glyph white with !important and drops
   a shadow under it, and `.btn-primary i` repeats the white. On a pale control
   that is a glyph you cannot see. */
.card-header .btn i {
    padding: 0 !important;
    color: var(--ch-ink) !important;
    font-size: var(--ch-fs-label);
    filter: none;
}

.card-content {
    padding: 20px;
}

/* Competition Info Banner */
.competition-info-banner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.info-card {
    background: linear-gradient(135deg, #111037 0%, #764ba2 100%);
    color: white;
    padding: 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.info-card i {
    font-size: 2rem;
    opacity: 0.8;
}

.info-card h4 {
    margin: 0 0 5px 0;
    font-size: 1.1rem;
}

.info-card p {
    margin: 0;
    opacity: 0.9;
    font-size: 0.9rem;
}

/* Player Dashboard Styles */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: none !important;
    transform: translateZ(0);
    backface-visibility: hidden;
    position: relative;
}

.player-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.club-badge {
    font-size: 3rem;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    backdrop-filter: blur(10px);
}

.player-details h2 {
    margin: 0;
    font-size: 1.8rem;
}

.club-name {
    margin: 5px 0 0 0;
    opacity: 0.9;
    font-weight: 500;
}

.quick-actions {
    display: flex;
    gap: 10px;
}

.game-item {
    padding: 15px;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 15px;
    background: #f8f9fa;
    transition: all 0.3s ease;
    border-left: 4px solid var(--club-primary, #111037);
}

.game-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.game-teams {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.game-details {
    display: flex;
    gap: 15px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.game-details span {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #6c757d;
    font-size: 0.9rem;
}

.game-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.poll-item {
    padding: 15px;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 15px;
    background: rgba(var(--club-primary-rgb, 102, 126, 234), 0.1);
    border-left: 4px solid var(--club-primary, #f39c12);
}

.poll-title {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 10px;
}

.poll-details {
    display: flex;
    gap: 15px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.poll-details span {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #856404;
    font-size: 0.9rem;
}

.poll-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.empty-message {
    text-align: center;
    color: #6c757d;
    font-style: italic;
    padding: 20px;
}

/* Mini Calendar Styles */
.mini-calendar {
    background: white;
}

.mini-calendar-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--club-primary, #111037);
}

.mini-day-header {
    padding: 8px;
    text-align: center;
    color: white;
    font-weight: 600;
    font-size: 12px;
}

.mini-calendar-body {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.mini-calendar-day {
    min-height: 35px;
    padding: 4px;
    border: 1px solid #e9ecef;
    background: white;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.mini-calendar-day.other-month {
    background: #f8f9fa;
    color: #6c757d;
}

.mini-calendar-day.today {
    background: #e3f2fd;
    border-color: #2196f3;
    font-weight: bold;
}

.mini-calendar-day.has-games {
    background: #fff3e0;
    border-color: #ff9800;
}

.mini-day-number {
    font-size: 12px;
    font-weight: 500;
}

.game-dot {
    width: 6px;
    height: 6px;
    background: #ff9800;
    border-radius: 50%;
    margin-top: 2px;
}