/* =============================================================
   CWTB BeamMP Page — Mobile CSS (rewrite)
   Base width: 380px. Applies to all screens <= 768px.
   Players show as name-only cards; actions via detail modal.
   ============================================================= */

/* Hidden on desktop by default — JS toggles .hidden class to avoid overriding gap/grid-template-columns */
#mobilePlayersGrid {
    display: none;
}

#mobilePlayersGrid.hidden {
    display: none !important;
}

@media (max-width: 768px) {

#mobilePlayersGrid {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr;
}

    /* ── Prevent horizontal scroll / clipping ── */
    .admin-main, .beammp-container, .beammp-content,
    .beammp-header, .beammp-tabs, .section-header,
    .mobile-players-grid, .mobile-bans-list, .mobile-whitelist-list,
    .broadcast-card, .chat-viewer {
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    /* ── BeamMP container — transparent on mobile, individual islands handle their own styling ── */
    .beammp-container {
        padding: 0;
        width: 100%;
        box-sizing: border-box;
        background: none !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* ── Global server selector row — hidden on mobile (injected into players tab instead) ── */
    .beammp-header {
        display: none;
    }

    /* ── Players section header — server selector on top, title+count+refresh below ── */
    .players-section-mobile {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        margin-bottom: 1rem;
    }

    .players-section-mobile .mobile-server-row {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
    }

    .players-section-mobile .mobile-server-row label {
        font-size: 0.78rem;
        font-weight: 600;
        color: #aaa;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .players-section-mobile .mobile-title-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
    }

    .players-section-mobile .mobile-title-row h3 {
        margin: 0;
        font-size: 1rem;
        font-weight: 700;
        color: #fff;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .players-section-mobile .player-count-badge {
        font-size: 0.75rem;
        font-weight: 600;
        color: #fff;
        background: rgba(59,130,246,0.15);
        border: 1px solid rgba(59,130,246,0.3);
        border-radius: 20px;
        padding: 1px 8px;
    }

    .server-selector {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
    }

    .server-selector label {
        font-size: 0.82rem;
        font-weight: 600;
        color: #aaa;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    #serverSelect, .server-select {
        width: 100%;
        padding: 0.75rem;
        background: #1a1a2e;
        border: 1px solid rgba(59,130,246,0.2);
        border-radius: 10px;
        color: #fff;
        font-size: 16px;
        min-height: 46px;
        -webkit-appearance: none;
        appearance: none;
        box-sizing: border-box;
    }

    /* ── Connection status — full-width bar under selector ── */
    .connection-status {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        width: 100%;
        padding: 0.6rem 1rem;
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 10px;
        font-size: 0.88rem;
        font-weight: 600;
        color: #aaa;
        box-sizing: border-box;
    }

    /* green when connected */
    .connection-status.connected {
        background: rgba(34,197,94,0.08);
        border-color: rgba(34,197,94,0.3);
        color: #22c55e;
    }

    /* ── Tabs — no outer container, each tab is its own island ── */
    .beammp-tabs {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 0.4rem;
        margin-bottom: 1.25rem;
        background: none;
        border: none;
        border-radius: 0;
        padding: 0;
        box-sizing: border-box;
    }

    /* Top row: 3 equal tabs, each 2 of 6 cols */
    .beammp-tabs .beammp-tab:nth-child(1),
    .beammp-tabs .beammp-tab:nth-child(2),
    .beammp-tabs .beammp-tab:nth-child(3) {
        grid-column: span 2;
    }

    /* Bottom row: 2 equal tabs, each 3 of 6 cols */
    .beammp-tabs .beammp-tab:nth-child(4),
    .beammp-tabs .beammp-tab:nth-child(5) {
        grid-column: span 3;
    }

    .beammp-tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        padding: 0.55rem 0.25rem;
        border-radius: 10px;
        border: 1px solid rgba(255,255,255,0.07);
        background: rgba(255,255,255,0.03);
        color: #666;
        font-size: 0.7rem;
        font-weight: 600;
        white-space: nowrap;
        min-height: 52px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        transition: background 0.15s, color 0.15s, border-color 0.15s;
    }

    .beammp-tab i {
        font-size: 1rem;
        display: block;
    }

    .beammp-tab.active {
        background: rgba(59,130,246,0.12);
        border-color: rgba(59,130,246,0.3);
        color: #60a5fa;
        box-shadow: 0 1px 8px rgba(59,130,246,0.1);
    }

    /* ── Tab content ── */
    .beammp-content { display: none; }
    .beammp-content.active { display: block; }

    /* ── Section header ── */
    .section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    .section-header h3 {
        font-size: 1rem;
        font-weight: 600;
        color: #fff;
        margin: 0;
    }

    .section-header .btn {
        min-height: 38px;
        font-size: 0.82rem;
        padding: 0.5rem 0.85rem;
    }

    /* ─────────────────────────────────────────
       PLAYER LIST — name-only cards
       Tap a card to open the detail/action modal
    ───────────────────────────────────────── */

    /* Hide the table entirely on mobile */
    .players-table-wrapper { display: none !important; }

    /* Mobile player list — banner rows */
    .mobile-players-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-bottom: 1rem;
    }

    .mobile-player-card {
        background: #1a1a2e;
        border: 1px solid rgba(100,181,246,0.18);
        border-radius: 12px;
        padding: 0.8rem 1rem;
        display: flex;
        align-items: center;
        gap: 0.85rem;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        transition: background 0.12s, border-color 0.12s;
        -webkit-user-select: none;
        user-select: none;
        min-height: 60px;
    }

    .mobile-player-card:active {
        background: rgba(100,181,246,0.1);
        border-color: rgba(100,181,246,0.45);
    }

    .mobile-player-card .player-avatar-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: rgba(100,181,246,0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #64b5f6;
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    .mobile-player-card .player-card-info {
        flex: 1;
        min-width: 0;
    }

    .mobile-player-card .player-card-name {
        font-size: 0.95rem;
        font-weight: 700;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-player-card .player-card-tap-hint {
        font-size: 0.72rem;
        color: #555;
        margin-top: 2px;
    }

    .mobile-player-card .player-card-chevron {
        color: #444;
        font-size: 0.85rem;
        flex-shrink: 0;
    }

    .mobile-players-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2rem 1rem;
        gap: 0.75rem;
        color: #555;
    }

    .mobile-players-empty i { font-size: 2.5rem; }
    .mobile-players-empty p { font-size: 0.9rem; text-align: center; margin: 0; }

    /* ─────────────────────────────────────────
       PLAYER DETAIL MODAL (action sheet)
    ───────────────────────────────────────── */

    .player-detail-modal {
        padding-bottom: max(env(safe-area-inset-bottom,0px), 1rem) !important;
    }

    .player-detail-info {
        display: flex;
        align-items: center;
        gap: 0.85rem;
        padding: 0.75rem 0 1rem;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        margin-bottom: 1rem;
    }

    .player-detail-avatar {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: rgba(100,181,246,0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #64b5f6;
        font-size: 1.5rem;
        flex-shrink: 0;
    }

    .player-detail-main h4 {
        font-size: 1.05rem;
        font-weight: 700;
        color: #fff;
        margin: 0 0 6px;
    }

    .player-detail-stats {
        display: none;
    }

    .stat-item {
        display: none;
        align-items: center;
        gap: 0.3rem;
        font-size: 0.75rem;
        color: #888;
    }

    .stat-item i { color: #64b5f6; font-size: 0.7rem; }
    .stat-item .stat-value { color: #fff; font-weight: 600; }

    /* Action buttons inside modal */
    .player-detail-actions h5 {
        font-size: 0.78rem;
        font-weight: 700;
        color: #888;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin: 0 0 0.75rem;
    }

    .action-buttons {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6rem;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    .action-buttons .btn {
        width: 100%;
        min-width: 0;
        min-height: 48px;
        font-size: 0.82rem;
        border-radius: 10px;
        justify-content: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        box-sizing: border-box;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* ─────────────────────────────────────────
       BANS — card list
    ───────────────────────────────────────── */
    .bans-table-wrapper { display: none !important; }

    /* Keep bans-table visible inside archived reports modal */
    #archivedReportsModal .bans-table-wrapper {
        display: block !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 10px;
        border: 1px solid rgba(59,130,246,0.12);
    }
    #archivedReportsModal .bans-table th,
    #archivedReportsModal .bans-table td {
        padding: 10px 12px;
        font-size: 0.78rem;
        white-space: nowrap;
    }
    #archivedReportsModal .modal-content {
        width: 95%;
        max-width: 95vw;
        max-height: 85vh;
    }
    #archivedReportsModal .modal-body {
        max-height: 65vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 0.75rem;
    }

    .mobile-bans-list {
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
    }

    .mobile-ban-card {
        background: #1a1a2e;
        border: 1px solid rgba(239,68,68,0.2);
        border-radius: 12px;
        padding: 0.9rem 1rem;
    }

    .mobile-ban-card .ban-card-name {
        font-size: 0.95rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: 4px;
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    .mobile-ban-card .ban-card-name i { color: #ef4444; font-size: 0.85rem; }

    .mobile-ban-card .ban-card-reason {
        font-size: 0.8rem;
        color: #aaa;
        margin-bottom: 0.65rem;
    }

    .mobile-ban-card .ban-card-unban {
        width: 100%;
        min-height: 40px;
        font-size: 0.85rem;
    }

    /* ─────────────────────────────────────────
       WHITELIST — card list
    ───────────────────────────────────────── */
    .whitelist-table-wrapper { display: none !important; }

    .whitelist-status {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 0.75rem;
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 10px;
        margin-bottom: 0.75rem;
        font-size: 0.78rem;
        color: #ccc;
    }

    .whitelist-status i { font-size: 0.95rem; color: #64b5f6; flex-shrink: 0; }

    /* Compact the status text content */
    .whitelist-status > div { flex: 1; min-width: 0; }
    .whitelist-status strong { font-size: 0.82rem; }
    .whitelist-status p { font-size: 0.72rem; margin: 0; color: #888; }

    .whitelist-controls {
        display: flex;
        gap: 0.4rem;
        flex-wrap: wrap;
        margin-bottom: 0.75rem;
    }

    .whitelist-controls .btn {
        flex: 1;
        min-height: 36px;
        font-size: 0.78rem;
        padding: 0.35rem 0.65rem;
    }

    .whitelist-add-form {
        background: rgba(255,255,255,0.03);
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 10px;
        padding: 0.9rem;
        margin-bottom: 1rem;
    }

    .whitelist-add-form h4 {
        font-size: 0.88rem;
        font-weight: 600;
        color: #fff;
        margin: 0 0 0.75rem;
    }

    .whitelist-form-grid {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
    }

    .whitelist-form-grid input,
    .whitelist-form-grid select,
    .whitelist-tag-select {
        width: 100%;
        padding: 0.75rem;
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 8px;
        color: #fff;
        font-size: 16px;
        min-height: 44px;
        box-sizing: border-box;
        -webkit-appearance: none;
        appearance: none;
    }

    .whitelist-form-grid .btn {
        width: 100%;
        min-height: 46px;
    }

    .mobile-whitelist-list {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
    }

    .mobile-whitelist-card {
        background: #1a1a2e;
        border: 1px solid rgba(34,197,94,0.2);
        border-radius: 12px;
        padding: 0.85rem 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
    }

    .mobile-whitelist-card .whitelist-card-info {
        flex: 1;
        min-width: 0;
    }

    .mobile-whitelist-card .whitelist-card-name {
        font-size: 0.9rem;
        font-weight: 700;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-whitelist-card .whitelist-card-tag {
        font-size: 0.72rem;
        color: #22c55e;
        margin-top: 2px;
    }

    .mobile-whitelist-card .btn {
        flex-shrink: 0;
        min-height: 38px;
        font-size: 0.8rem;
        padding: 0.45rem 0.75rem;
    }

    /* ─────────────────────────────────────────
       BROADCAST
    ───────────────────────────────────────── */
    .broadcast-card {
        background: #1a1a2e;
        border: 1px solid rgba(59,130,246,0.15);
        border-radius: 12px;
        padding: 1rem;
    }

    .broadcast-card h3 {
        font-size: 1rem;
        font-weight: 600;
        color: #fff;
        margin: 0 0 1rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .broadcast-form .form-group { margin-bottom: 0.85rem; }

    .broadcast-form label {
        display: block;
        font-size: 0.82rem;
        font-weight: 600;
        color: #aaa;
        margin-bottom: 0.4rem;
    }

    .broadcast-form select,
    .broadcast-form textarea,
    .form-select,
    .form-textarea {
        width: 100%;
        padding: 0.75rem;
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 8px;
        color: #fff;
        font-size: 16px;
        box-sizing: border-box;
        -webkit-appearance: none;
        appearance: none;
        min-height: 44px;
    }

    .broadcast-form textarea, .form-textarea {
        min-height: 110px;
        resize: vertical;
    }

    .broadcast-form .btn-primary,
    .broadcast-form .btn {
        width: 100%;
        min-height: 48px;
        font-size: 1rem;
        margin-top: 0.25rem;
    }

    /* ─────────────────────────────────────────
       CHAT VIEWER
    ───────────────────────────────────────── */
    .chat-viewer {
        margin-top: 1.5rem;
    }

    .chat-messages {
        max-height: 320px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: rgba(255,255,255,0.02);
        border: 1px solid rgba(255,255,255,0.07);
        border-radius: 10px;
        padding: 0.75rem;
    }

    .chat-message {
        padding: 0.6rem 0.75rem;
        margin-bottom: 0.5rem;
        border-radius: 8px;
        background: rgba(255,255,255,0.03);
        border: 1px solid rgba(255,255,255,0.06);
    }

    .chat-message-header {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.4rem;
        margin-bottom: 0.3rem;
    }

    .chat-message-player { font-size: 0.82rem; font-weight: 700; color: #64b5f6; }
    .chat-message-time   { font-size: 0.7rem; color: #555; }
    .chat-message-text   { font-size: 0.82rem; color: #ccc; line-height: 1.45; }

    .chat-controls .btn { min-height: 36px; font-size: 0.8rem; }

    .chat-empty {
        display: flex; flex-direction: column; align-items: center;
        gap: 0.5rem; padding: 1.5rem; color: #444;
        font-size: 0.85rem;
    }
    .chat-empty i { font-size: 1.8rem; }

    /* ─────────────────────────────────────────
       BAN / MUTE / VEHICLE MODALS
    ───────────────────────────────────────── */
    #banDurationModal .modal-body,
    #muteDurationModal .modal-body,
    #vehicleDeleteModal .modal-body {
        padding: 1rem 1.25rem;
    }

    #banDurationModal .modal-body p,
    #muteDurationModal .modal-body p,
    #vehicleDeleteModal .modal-body p {
        font-size: 0.9rem;
        color: #ccc;
        margin-bottom: 1rem;
    }

    .duration-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    .duration-row label {
        display: block;
        font-size: 0.82rem;
        font-weight: 600;
        color: #aaa;
        margin-bottom: 0.35rem;
    }

    .duration-row input,
    .duration-row select {
        width: 100%;
        padding: 0.75rem;
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 8px;
        color: #fff;
        font-size: 16px;
        min-height: 44px;
        box-sizing: border-box;
        -webkit-appearance: none;
        appearance: none;
    }

    /* Inline action-buttons inside ban/mute modals */
    #banDurationModal .action-buttons,
    #muteDurationModal .action-buttons,
    #vehicleDeleteModal .action-buttons {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
    }

    #banDurationModal .action-buttons .btn,
    #muteDurationModal .action-buttons .btn,
    #vehicleDeleteModal .action-buttons .btn {
        width: 100%;
        min-height: 48px;
        font-size: 0.95rem;
        border-radius: 10px;
    }

    #vehicleSelector {
        margin-top: 1rem;
    }

    #vehicleSelector label {
        display: block;
        font-size: 0.82rem;
        font-weight: 600;
        color: #aaa;
        margin-bottom: 0.4rem;
    }

    #vehicleDropdown {
        width: 100%;
        padding: 0.75rem;
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 8px;
        color: #fff;
        font-size: 16px;
        min-height: 44px;
        box-sizing: border-box;
        -webkit-appearance: none;
        appearance: none;
        margin-bottom: 0.75rem;
    }

    /* IP ban checkbox */
    #banDurationModal label[for] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.85rem;
        color: #ccc;
        cursor: pointer;
        padding: 0.5rem 0;
    }

    #ipBanCheckbox {
        width: 20px !important;
        height: 20px;
        min-height: unset;
        flex-shrink: 0;
    }

    /* ─────────────────────────────────────────
       GENERAL TOUCH IMPROVEMENTS
    ───────────────────────────────────────── */
    button, .btn, a.btn {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        -webkit-user-select: none;
        user-select: none;
    }

    input, select, textarea { font-size: 16px !important; }

}

/* ── <= 360px ── */
@media (max-width: 360px) {
    .mobile-players-grid { grid-template-columns: 1fr; }
    .action-buttons { grid-template-columns: 1fr; }
    .beammp-tab { padding: 0.55rem 0.7rem; font-size: 0.78rem; }
    .duration-row { grid-template-columns: 1fr; }
}