/* ============================================================
 * 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;
    }
}

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

/* ===== ENSURE MAIN CONTENT NEVER OVERFLOWS ===== */
.main-content,
.content,
main {
    max-width: 100%;
    overflow-x: hidden;
}