/* =========================================================
   ADMIN MOBILE / RESPONSIVE LAYER
   Loaded AFTER the inline <style> of every page, so it wins.
   Desktop (>= 769px) is left completely untouched.
   ========================================================= */

/* ---------- Small global niceties (all sizes) ---------- */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img { max-width: 100%; }

/* =========================================================
   TABLET / PHONE  (<= 768px)
   ========================================================= */
@media (max-width: 768px) {

    /* ---- Page shell ---- */
    body { padding: 0 !important; }

    .admin-page,
    .wrap,
    .container,
    .form-container,
    .admin-page > div,
    .wrap > div[style*="max-width"] {
        max-width: 100% !important;
        width: auto !important;
        margin: 0 !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        border-radius: 0 !important;
    }

    .admin-page > div,
    .wrap,
    .container,
    .form-container {
        padding-top: 14px !important;
        padding-bottom: 28px !important;
    }

    .table-container {
        max-width: 100% !important;
        width: auto !important;
        padding: 12px !important;
        border-radius: 12px !important;
        margin: 0 0 16px !important;
        overflow-x: visible !important;
    }

    /* ---- Typography ---- */
    h1 { font-size: 21px !important; line-height: 1.25; }
    h2 { font-size: 19px !important; line-height: 1.3; }
    h3 { font-size: 17px !important; line-height: 1.3; }
    h1, h2, h3 { word-break: break-word; }

    /* ---- Top bars / header rows: stack instead of float ---- */
    .admin-topbar-actions {
        float: none !important;
        margin-top: 12px !important;
        width: 100%;
    }

    .topbar,
    .bar,
    .wrap > div[style*="space-between"],
    .container > div[style*="space-between"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .topbar > div,
    .bar > div { width: 100%; }

    /* Groups of header buttons become a wrapping grid */
    .topbar > div:last-child,
    .bar > div:last-child,
    .admin-topbar-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .topbar > div:last-child > a,
    .topbar > div:last-child > button,
    .bar > div:last-child > a,
    .bar > div:last-child > button,
    .admin-topbar-actions > a,
    .admin-topbar-actions > button {
        flex: 1 1 auto;
        min-width: 46%;
        text-align: center;
        margin: 0 !important;
    }

    /* ---- Standalone nav / action buttons ---- */
    .btn,
    .action-btn,
    .tab-btn {
        min-height: 42px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        font-size: 14px !important;
    }

    .action-btn { margin: 3px 2px !important; }

    /* Top-level quick-link buttons (Tournaments / Results / ...) */
    .admin-quicklinks {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-bottom: 16px;
    }
    .admin-quicklinks > a {
        margin: 0 !important;
        text-align: center;
        min-height: 44px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        font-size: 13px !important;
    }

    /* ---- Tabs: horizontal scroll strip ---- */
    .tabs {
        display: flex !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 8px !important;
        padding-bottom: 6px;
        margin-bottom: 14px !important;
        scrollbar-width: none;
    }
    .tabs::-webkit-scrollbar { display: none; }
    .tab-btn {
        flex: 0 0 auto;
        padding: 10px 16px !important;
        white-space: nowrap;
    }

    /* ---- Forms ---- */
    input, select, textarea {
        font-size: 16px !important;   /* stops iOS auto-zoom on focus */
        max-width: 100% !important;
    }

    input[type="text"], input[type="email"], input[type="password"],
    input[type="date"], input[type="number"], input[type="search"],
    input[type="tel"], input[type="file"], select, textarea {
        width: 100% !important;
        min-height: 44px;
    }

    input[type="checkbox"], input[type="radio"] {
        width: 20px !important;
        height: 20px;
        min-height: 0;
    }

    textarea { min-height: 90px; }

    button, input[type="submit"] { min-height: 44px; }

    .search-form,
    .search-actions,
    .row,
    .add .row,
    form .row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .search-group { min-width: 0 !important; width: 100% !important; }

    .search-actions button,
    .search-actions .btn { width: 100%; }

    /* Inline "flex row" field groups collapse to one column */
    div[style*="flex: 1"][style*="min-width"],
    div[style*="flex:1"][style*="min-width"] {
        min-width: 100% !important;
    }

    /* ---- Pills / badges ---- */
    .pills { display: flex; flex-wrap: wrap; gap: 6px; }
    .stats-badge { margin-left: 0 !important; margin-top: 6px; }
    .role-badge  { margin-left: 6px !important; }

    /* ---- Active filter banner ---- */
    .active-filter {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 8px;
    }

    /* ---- Modals ---- */
    .modal-content {
        width: 94% !important;
        max-width: 94% !important;
        padding: 20px !important;
        max-height: 88vh;
        overflow-y: auto;
    }
    .modal-buttons { flex-direction: column; }

    /* =====================================================
       TABLES  ->  CARDS
       Applied only to tables tagged by admin-mobile.js
       ===================================================== */
    table.mobile-cards {
        display: block !important;
        min-width: 0 !important;
        width: 100% !important;
        border-collapse: separate !important;
    }
    table.mobile-cards thead {
        position: absolute !important;
        width: 1px; height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    table.mobile-cards tbody,
    table.mobile-cards tr,
    table.mobile-cards td { display: block !important; width: auto !important; }

    table.mobile-cards tr {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.06);
        margin-bottom: 12px;
        padding: 4px 0;
        overflow: hidden;
    }
    table.mobile-cards tr:hover { background: #fff; }

    table.mobile-cards td {
        border: 0 !important;
        border-bottom: 1px solid #f1f3f5 !important;
        padding: 9px 12px !important;
        text-align: left !important;
        font-size: 14px;
        display: flex !important;
        gap: 10px;
        align-items: flex-start;
        justify-content: space-between;
        overflow-wrap: anywhere;
    }
    table.mobile-cards td:last-child { border-bottom: 0 !important; }

    table.mobile-cards td::before {
        content: attr(data-label);
        flex: 0 0 40%;
        max-width: 40%;
        font-weight: 600;
        font-size: 11px;
        letter-spacing: .03em;
        text-transform: uppercase;
        color: #6b7280;
        padding-top: 2px;
        word-break: break-word;
    }
    table.mobile-cards td:not([data-label])::before { content: none; }

    table.mobile-cards td > * { min-width: 0; }

    /* first cell of the card acts as its title */
    table.mobile-cards td.mc-title {
        background: #f8fafc;
        font-weight: 600;
        font-size: 15px;
        flex-direction: column;
        align-items: stretch;
    }
    table.mobile-cards td.mc-title::before {
        flex: none;
        max-width: none;
        margin-bottom: 3px;
        font-weight: 700;
    }

    /* cells holding stacked/rich content get a full-width value area */
    table.mobile-cards td.mc-block {
        flex-direction: column;
        align-items: stretch;
    }
    table.mobile-cards td.mc-block::before {
        flex: none;
        max-width: none;
        margin-bottom: 5px;
    }

    /* action cell: buttons across the full width */
    table.mobile-cards td.mc-actions {
        flex-wrap: wrap;
        background: #fafbfc;
        padding: 10px 12px !important;
        gap: 6px;
    }
    table.mobile-cards td.mc-actions::before {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 4px;
    }
    table.mobile-cards td.mc-actions a,
    table.mobile-cards td.mc-actions button,
    table.mobile-cards td.mc-actions .action-btn,
    table.mobile-cards td.mc-actions .btn {
        flex: 1 1 45%;
        min-width: 45%;
        text-align: center;
        margin: 0 !important;
    }
    table.mobile-cards td.mc-actions form { flex: 1 1 45%; margin: 0; }
    table.mobile-cards td.mc-actions form button { width: 100%; }

    /* empty-state / colspan rows stay full width, no label */
    table.mobile-cards td[colspan] {
        display: block !important;
        text-align: center !important;
        padding: 24px 12px !important;
    }
    table.mobile-cards td[colspan]::before { content: none; }

    /* Tables NOT converted still scroll instead of breaking the layout */
    table:not(.mobile-cards) {
        min-width: 0 !important;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* =========================================================
   SMALL PHONES  (<= 430px)
   ========================================================= */
@media (max-width: 430px) {
    .admin-page > div,
    .wrap, .container, .form-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    .table-container { padding: 10px !important; }

    h1 { font-size: 19px !important; }
    h2 { font-size: 18px !important; }

    .admin-quicklinks { grid-template-columns: 1fr; }

    .topbar > div:last-child > a,
    .topbar > div:last-child > button,
    .bar > div:last-child > a,
    .bar > div:last-child > button,
    .admin-topbar-actions > a,
    .admin-topbar-actions > button {
        min-width: 100%;
    }

    table.mobile-cards td { font-size: 13.5px; }
    table.mobile-cards td::before { flex: 0 0 44%; max-width: 44%; }
    table.mobile-cards td.mc-actions a,
    table.mobile-cards td.mc-actions button,
    table.mobile-cards td.mc-actions .action-btn,
    table.mobile-cards td.mc-actions .btn,
    table.mobile-cards td.mc-actions form { min-width: 100%; flex-basis: 100%; }
}

/* =========================================================
   LOGIN PAGE
   ========================================================= */
@media (max-width: 768px) {
    .login-page { padding: 16px; align-items: center; }
    .login-card {
        max-width: 100% !important;
        padding: 24px 20px !important;
        border-radius: 16px !important;
    }
    .login-card input { min-height: 46px; font-size: 16px !important; }
    .login-card button { min-height: 48px; }
}