/*
 * Racing Royale — Release 5 mobile fixes (loaded after the main stylesheet
 * on every public and admin page). Phones/tablets only; desktop unchanged.
 */

/*
 * THE main phone bug: stacked layouts are CSS grids whose single column
 * defaults to the width of its widest content (e.g. a wide table), so on
 * a phone every card became wider than the screen and was cut off on the
 * right. Columns may now shrink to the screen; wide content scrolls inside
 * its own box instead.
 */
.gr-stack, .gr-stack-lg { grid-template-columns: minmax(0, 1fr); }
.gr-stack > *, .gr-stack-lg > *, .gr-grid-2 > *, .gr-grid-3 > *, .gr-grid-4 > *,
.gr-admin-main, .gr-admin-content, .gr-card, .gr-card-body { min-width: 0; }

/* Never let one wide element make the whole page scroll sideways. */
html, body { overflow-x: clip; }
img, svg, video { max-width: 100%; height: auto; }

/* Long emails / codes / URLs in normal text wrap instead of stretching
   the layout — but never inside tables (tables scroll sideways instead). */
.gr-card-body > p, .gr-help, li { overflow-wrap: anywhere; }
.gr-table th, .gr-table td, .gr-table td * { overflow-wrap: normal; word-break: normal; }

/* Buttons inside tables keep their natural size (the base style makes
   every button full-width on phones, which made "Copy" cover the next
   column and stretched rows). */
.gr-table .gr-btn { width: auto !important; min-height: 34px; padding: 4px 12px; }

/* Tables always scroll inside their own box, smoothly on iOS. */
.gr-table-wrap { -webkit-overflow-scrolling: touch; max-width: 100%; }

@media (max-width: 980px) {
    .gr-admin { grid-template-columns: minmax(0, 1fr); }
    .gr-admin-content { padding: 1.25rem 1rem 2rem; }
    .gr-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    /* iPhone zooms in when a field's text is under 16px — stop that. */
    input, select, textarea, .gr-input, .gr-select, .gr-textarea { font-size: 16px !important; }

    /* One column, allowed to shrink to the screen. */
    .gr-grid-2, .gr-grid-3, .gr-grid-4 { grid-template-columns: minmax(0, 1fr); }

    /* Admin stat boxes: smaller numbers. */
    .gr-grid-4 .gr-display, .gr-grid-3 .gr-display { font-size: 1.6rem !important; }

    /* Tighter cards and tables. */
    .gr-card-body { padding: 1rem; }
    .gr-table th, .gr-table td { padding: .55rem .6rem; font-size: .85rem; white-space: nowrap; vertical-align: middle; }

    /* Headings that fit a phone. */
    h1.gr-display, .gr-page-header .gr-display { font-size: clamp(1.7rem, 7vw, 2.2rem); line-height: 1.1; }
    .gr-section-title { font-size: clamp(1.35rem, 5.5vw, 1.7rem); }

    /* Forms: one field per line, full width. */
    .gr-filter-bar { flex-direction: column; align-items: stretch; }
    .gr-filter-bar > .gr-field, .gr-filter-bar > .gr-btn, .gr-filter-bar > button { width: 100%; max-width: none !important; flex: 1 1 auto; }
    .gr-field input[style*="max-width"] { max-width: none !important; }

    /* Rows of buttons wrap neatly. */
    .gr-row { flex-wrap: wrap; }
    .gr-row > .gr-btn, .gr-row > form > .gr-btn { flex: 1 1 auto; text-align: center; }

    /* Admin page title area. */
    .gr-admin-content > .gr-page-header, .gr-admin-content h1 { word-break: break-word; }

    /* Public leaderboard: keep rank + ticket visible while scrolling races. */
    .gr-leaderboard-table th:nth-child(1), .gr-leaderboard-table td:nth-child(1),
    .gr-leaderboard-table th:nth-child(2), .gr-leaderboard-table td:nth-child(2) {
        position: sticky; background: var(--gr-surface, #1a1d1e); z-index: 1;
    }
    .gr-leaderboard-table th:nth-child(1), .gr-leaderboard-table td:nth-child(1) { left: 0; min-width: 2.6rem; }
    .gr-leaderboard-table th:nth-child(2), .gr-leaderboard-table td:nth-child(2) { left: 2.6rem; }
    .gr-leaderboard-table .gr-badge { padding: 2px 6px; font-size: .75rem; }

    /* Countdown box on event cards. */
    .gr-countdown { font-size: 1.15rem !important; }

    /* Home page "How it works" etc. cards stack with less gap. */
    .gr-grid-3 { gap: var(--gr-space-4, 1rem); }

    /* Code chips in admin codes table. */
    .gr-copy-code { padding: 2px 8px !important; }
}

@media (max-width: 460px) {
    .gr-container { width: calc(100% - 20px); }
    .gr-table th, .gr-table td { padding: .45rem .45rem; font-size: .8rem; }
}