/* ============================================================
 * YouthSoccerGenie — Responsive Breakpoints
 * Build: YSG_V06_RESPONSIVE_DARK
 * Source: coaches-portal-v5.1.html (approved mockup)
 *
 * Purpose: Mockup-specific responsive rules that complement
 * the existing mobile.css. Covers layout shifts, content
 * padding, and component adjustments per mockup breakpoints.
 *
 * NOTE: Sidebar responsive rules are in app-sidebar.css.
 * Grid responsive rules are in app-cards-tables.css.
 * This file covers everything else from the mockup.
 * ============================================================ */

/* ===== TABLET / SMALL DESKTOP (≤768px) ===== */
@media (max-width: 768px) {
    /* Main content area — remove sidebar margin */
    .main {
        margin-left: 0;
    }

    /* Detail panel — full width on mobile */
    .detail-panel {
        width: 100%;
        right: -100%;
    }

    /* Login page — stack columns */
    .login-wrapper {
        flex-direction: column;
    }

    .login-left {
        min-height: 200px;
        padding: 32px;
    }

    .login-left h1 {
        font-size: 1.5rem;
    }

    /* Topbar adjustments */
    .topbar {
        padding: 0 16px;
    }

    .topbar img {
        width: 28px;
        height: 28px;
    }

    /* Content padding */
    .content {
        padding: 16px;
    }

    /* Game day clock */
    .clock-time {
        font-size: 40px;
    }

    /* Wizard steps */
    .wizard-steps {
        gap: 16px;
    }

    /* Flex-between header bars */
    .flex-between {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* ===== SMALL MOBILE (≤414px) ===== */
@media (max-width: 414px) {
    /* Game day elements */
    .clock {
        padding: 24px 16px;
    }

    .clock-display {
        font-size: 48px;
    }

    .score-display {
        font-size: 28px;
    }

    .score-btn {
        padding: 6px 12px;
        margin: 0 4px;
        font-size: 14px;
    }

    /* Formation field */
    .field-container {
        max-width: 100%;
        height: auto;
    }
}

/* ===== VERY SMALL MOBILE (≤375px) ===== */
@media (max-width: 375px) {
    .clock {
        padding: 16px 12px;
    }

    .clock-display {
        font-size: 40px;
    }

    .score-display {
        font-size: 24px;
    }

    .score-btn {
        padding: 4px 8px;
        margin: 0 2px;
        font-size: 12px;
    }

    body {
        font-size: 14px;
    }
}

/* ===== MATCH DAY PLANNING — MOBILE (V39, V43 card reorder) ===== */
/* Grids use inline styles in TeamMatchDay.razor, so !important is needed
   to override at mobile breakpoints. Classes: mdp-page-grid, mdp-form-grid,
   mdp-planner-row were added to the inline-styled elements.
   V43: Column wrappers use display:contents on mobile so each card becomes
   a direct grid item. Order classes swap AI Planner before Saved Plans. */
@media (max-width: 768px) {
    /* Main two-column layout → single column on mobile */
    .mdp-page-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* V43: Unwrap column divs so individual cards become grid items */
    .mdp-col-left,
    .mdp-col-right {
        display: contents;
    }

    /* V43: Reorder — Match Structure (1) → AI Planner (2) → Saved Plans (3)
       Everything else in the right column (plan output) stays at default order (0)
       which would place it before the ordered items. Fix: give plan output order 4. */
    .mdp-card-structure { order: 1; }
    .mdp-card-planner { order: 2; }
    .mdp-card-saved { order: 3; }
    .mdp-col-right > :not(.mdp-card-planner) { order: 4; }

    /* Form input grids (Match Structure, Saved Plans) → single column */
    .mdp-form-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* AI Planner formation + buttons → stack vertically */
    .mdp-planner-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    /* Formation dropdown: full width when stacked */
    .mdp-planner-row .form-group {
        min-width: 0 !important;
        width: 100%;
    }

    /* Form labels: slightly smaller on mobile */
    .mdp-form-grid .form-label {
        font-size: 13px;
    }

    /* Form helper text: smaller to reduce clutter */
    .mdp-form-grid .form-text {
        font-size: 11px;
        line-height: 1.3;
    }

    /* Card headers: tighter on mobile */
    .mdp-page-grid .card-header {
        padding: 10px 14px;
        font-size: 14px;
    }

    /* Page header buttons: smaller on mobile */
    .mdp-page-grid ~ .flex-between .btn,
    .flex-between .btn-outline {
        font-size: 12px;
        padding: 6px 10px;
    }
}

@media (max-width: 414px) {
    /* Extra small: form controls need breathing room */
    .mdp-form-grid .form-control,
    .mdp-form-grid select.form-control {
        font-size: 14px;
        padding: 8px 10px;
    }

    /* Planner action buttons: full width stacked */
    .mdp-planner-row .btn {
        width: 100%;
        text-align: center;
    }
}

/* ===== FORMATION EDITOR — MOBILE (V40) ===== */
/* The editor uses a 1fr 2fr grid with a 520px fixed pitch. On phones the
   pitch overflows and the controls panel is too narrow. Fix: collapse to
   single column, pitch scales via max-width:100% + aspect-ratio, tokens
   shrink so they don't overlap on a small pitch. */
@media (max-width: 768px) {
    /* Main two-column layout → single column, pitch on top */
    .fe-page-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Reverse visual order: pitch first, controls below */
    .fe-page-grid > div:first-child {
        order: 2;
    }
    .fe-page-grid > div:last-child {
        order: 1;
    }

    /* Pitch: let it scale down to fit screen */
    .ysg-half-pitch-surface {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    /* Tokens: shrink from 44px to 34px on mobile */
    .ysg-half-pitch-surface div[style*="border-radius:50%"] {
        width: 34px !important;
        height: 34px !important;
        font-size: 10px !important;
    }

    /* Slot table: compact layout */
    .fe-slot-table .data-table {
        font-size: 12px;
    }
    .fe-slot-table .data-table input[type="number"] {
        width: 50px !important;
        font-size: 12px;
    }

    /* Page header: stack buttons below title */
    .fe-page-grid ~ div[style*="justify-content:space-between"],
    div[style*="justify-content:space-between"] {
        flex-direction: column;
        align-items: flex-start !important;
    }
}

@media (max-width: 414px) {
    /* Extra small: even tighter tokens */
    .ysg-half-pitch-surface div[style*="border-radius:50%"] {
        width: 28px !important;
        height: 28px !important;
        font-size: 9px !important;
    }

    /* Formation details card inputs: full width */
    .fe-page-grid .form-control {
        font-size: 14px;
        padding: 8px 10px;
    }

    /* Buttons: full width stacked */
    .fe-page-grid .btn {
        font-size: 13px;
    }
}

/* ===== MATCH DAY PLANNING — SUMMARY GRID MOBILE (V41) ===== */
/* The Minutes Summary + Strength Summary grid inside the right column
   uses inline 1.2fr 1fr. On mobile this squeezes both panels into
   unreadable strips. Collapse to single column. */
@media (max-width: 768px) {
    .mdp-summary-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}

/* ===== GAME DAY — MOBILE (V41, V43 clock-first) ===== */
/* Main two-column layout: Game Clock (left) + Pitch/Next Changes (right).
   On mobile, collapse to single column. V43: Clock stays at top (natural
   source order) — no reordering needed. Just collapse the grid. */
@media (max-width: 768px) {
    .gd-page-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Pitch wrapper: ensure it doesn't overflow on mobile */
    .ysg-pitch-wrap {
        max-width: 100% !important;
    }

    /* Tokens: shrink for mobile screens */
    .ysg-token {
        min-width: 52px !important;
        padding: 4px 6px !important;
        font-size: 11px !important;
    }

    .ysg-token-name {
        font-size: 0.70rem !important;
    }

    .ysg-token-role {
        font-size: 0.62rem !important;
    }
}

@media (max-width: 414px) {
    /* Extra small: tokens even tighter */
    .ysg-token {
        min-width: 44px !important;
        padding: 3px 4px !important;
    }

    .ysg-token-name {
        font-size: 0.62rem !important;
    }

    .ysg-token-role {
        font-size: 0.55rem !important;
    }
}

/* ===== MATCH HISTORY — MOBILE (V41) ===== */
/* Matches list + Details panel in 1fr 1fr grid. On mobile the text wrapping
   makes both columns unreadable. Collapse to single column — matches list
   on top, details below. */
@media (max-width: 768px) {
    .mh-page-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Tables inside history: allow horizontal scroll */
    .mh-page-grid .data-table {
        font-size: 13px;
    }

    /* Cards: full width with breathing room */
    .mh-page-grid .card {
        overflow-x: auto;
    }
}

/* ===== NO HORIZONTAL SCROLL SAFETY ===== */
html,
body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* ===== ENSURE MAIN CONTENT NEVER OVERFLOWS ===== */
/* V48: Added .main — Blazor layout uses class="main" not "main-content" */
.main,
.main-content,
.content,
main {
    max-width: 100%;
    overflow-x: hidden;
}