/* ============================================
   Mobile Polish — Card layouts & tap targets
   ============================================ */

/* --- App shell (phones) --- */
/* Hide the desktop sidebar entirely; the bottom nav + More sheet
   own navigation on phones. Clear the fixed topbar and bottom nav. */
@media (max-width: 767.98px) {
    .left-sidebar {
        display: none !important;
    }

    body .page-wrapper {
        margin-left: 0 !important;
    }

    .body-wrapper {
        padding-top: calc(var(--st-topbar-height-mobile, 56px) + var(--st-safe-top, 0px) + 8px) !important;
        padding-bottom: calc(var(--st-bottom-nav-height, 60px) + var(--st-safe-bottom, 0px) + 12px);
    }

    .body-wrapper > .container-fluid {
        padding: 0 var(--st-gutter, 0.75rem);
    }

    /* Let our custom pull-to-refresh own the top-overscroll instead of the
       browser's native gesture (Chrome Android). */
    html,
    body {
        overscroll-behavior-y: contain;
    }
}

/* --- Tap target sizing --- */
/* Minimum 44px touch targets on mobile */
@media (max-width: 767.98px) {
    .btn-sm {
        min-height: 38px;
        min-width: 38px;
        padding: 0.4rem 0.65rem;
        font-size: 0.82rem;
    }

    .btn-group-sm > .btn {
        min-height: 38px;
        min-width: 38px;
        padding: 0.4rem 0.5rem;
    }

    .form-select-sm {
        min-height: 38px;
        font-size: 0.85rem;
    }

    .form-control-sm {
        min-height: 38px;
        font-size: 0.85rem;
    }

    .btn-link {
        min-height: 38px;
        min-width: 38px;
    }
}

/* --- Mobile card view for tables --- */
/* Hide table on mobile, show cards */
@media (max-width: 767.98px) {
    .mobile-cards-table {
        display: none !important;
    }
}

/* Hide cards on desktop, show table */
@media (min-width: 768px) {
    .mobile-cards-only {
        display: none !important;
    }
}

/* Standard mobile card styling */
.mobile-card {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    background: #fff;
}

.mobile-card:last-child {
    margin-bottom: 0;
}

.mobile-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.15rem 0;
}

.mobile-card-label {
    font-size: 0.75rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.mobile-card-value {
    font-size: 0.85rem;
}

.mobile-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f0f0f0;
}

.mobile-card-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #f0f0f0;
}

/* ============================================
   Group Details Page — Mobile Improvements
   ============================================ */

/* --- Chat tab: mobile-only --- */
/* Chat is the first tab — hide it on desktop where the feed is inline on Overview */
@media (min-width: 768px) {
    .group-details-tabs .nav-item:first-child {
        display: none !important;
    }
}

/* --- Tab bar horizontal scroll on mobile --- */
@media (max-width: 767.98px) {
    .nav-underline,
    .nav-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE */
        white-space: nowrap;
        padding-bottom: 2px;
    }

    .nav-underline::-webkit-scrollbar,
    .nav-tabs::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

    .nav-underline .nav-item,
    .nav-tabs .nav-item {
        flex-shrink: 0;
    }

    .nav-underline .nav-link,
    .nav-tabs .nav-link {
        font-size: 0.82rem;
        padding: 0.5rem 0.75rem;
        white-space: nowrap;
    }
}

/* --- Page header --- */
/* Compact sizing now lives in PageHeaderComponent.razor.css (scoped). */

/* --- Schedule card header stacking --- */
@media (max-width: 575.98px) {
    .card-header .d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .card-header .d-flex.align-items-center.gap-2 {
        width: 100%;
        justify-content: flex-end;
    }
}

/* --- Schedule event items compact on mobile --- */
@media (max-width: 575.98px) {
    .hover-shadow-sm.border.rounded.p-3 {
        padding: 0.6rem 0.75rem !important;
    }

    /* Smaller type icon on mobile */
    .hover-shadow-sm .rounded-circle.flex-shrink-0 {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px;
    }

    .hover-shadow-sm .rounded-circle.flex-shrink-0 i {
        font-size: 0.85rem;
    }

    /* Tighten the details text */
    .hover-shadow-sm .flex-grow-1 .fw-semibold {
        font-size: 0.88rem;
    }

    .hover-shadow-sm .flex-grow-1 .small {
        font-size: 0.75rem;
    }

    /* Compact time column */
    .hover-shadow-sm .text-end.flex-shrink-0 {
        margin-left: 0.35rem !important;
    }

    .hover-shadow-sm .text-end .fw-semibold {
        font-size: 0.82rem;
    }

    .hover-shadow-sm .text-end .badge {
        font-size: 0.65rem;
        padding: 0.15rem 0.35rem;
    }

    /* Hide chevron on mobile — the whole row is tappable */
    .hover-shadow-sm .ms-2.text-muted:last-child {
        display: none;
    }
}

/* --- Filter row alignment fix --- */
@media (max-width: 575.98px) {
    .form-check.mt-4 {
        margin-top: 0 !important;
        padding-top: 0.35rem;
    }
}

/* --- Group stats compact grid on mobile --- */
@media (max-width: 575.98px) {
    .card .row.g-3 .col-6 .text-center .fs-4 {
        font-size: 1.2rem !important;
    }

    .card .row.g-3 .col-6 .text-center small {
        font-size: 0.7rem;
    }
}

/* --- Settings image column responsive --- */
@media (max-width: 575.98px) {
    .col-2 img.img-fluid {
        margin-left: 0 !important;
        margin-top: 0 !important;
        max-width: 64px;
    }
}

/* --- Clash/warning alerts compact --- */
@media (max-width: 575.98px) {
    .alert.d-flex.align-items-center {
        font-size: 0.82rem;
        padding: 0.5rem 0.75rem;
    }

    .alert .fs-5 {
        font-size: 1rem !important;
    }
}

/* --- Undated fixture items compact --- */
@media (max-width: 575.98px) {
    .bg-warning-subtle.bg-opacity-10.border.rounded.p-3 {
        padding: 0.6rem 0.75rem !important;
    }
}