/* ============================================
   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) {
    :root {
        /* Tighter edge gutter on phones to reclaim wasted side space */
        --st-gutter: 0.15rem;
    }

    .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 icons: mobile-only --- */
/* Icons are only shown alongside labels on mobile (icon-only tab bar);
   on desktop/tablet the tabs show the text label only, as before. */
@media (min-width: 768px) {
    .organisation-details-tabs .tab-title-icon,
    .group-details-tabs .tab-title-icon,
    .project-details-tabs .tab-title-icon {
        display: none;
    }
}

/* --- Tab bar horizontal scroll on mobile --- */
@media (max-width: 767.98px) {
    /* Contain the scrollable nav within the viewport width so the tab bar
       scrolls internally instead of the whole page overflowing sideways
       (which made later tabs unreachable — e.g. on the Organisation page,
       which has many more tabs than most other tabbed pages). */
    .organisation-details-tabs,
    .group-details-tabs,
    .project-details-tabs {
        max-width: 100%;
        overflow-x: hidden;
    }

    .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;
        max-width: 100%;
        min-width: 0;
    }

    .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;
    }

    /* Icon-only tabs on mobile: hide the text label, keep the icon,
       so the whole tab bar is compact and every tab fits on screen
       without needing to scroll (labels are still available via the
       title attribute for accessibility/tooltips). */
    .organisation-details-tabs .tab-title-label,
    .project-details-tabs .tab-title-label {
        display: none;
    }

    .group-details-tabs .nav-link,
    .project-details-tabs .nav-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.1rem;
    }

    .group-details-tabs .tab-title-label,
    .project-details-tabs .tab-title-label {
        display: block;
        padding-top: 4px;
        font-size: 0.45rem;
        line-height: 1;
    }

    .organisation-details-tabs .tab-title-icon,
    .group-details-tabs .tab-title-icon,
    .project-details-tabs .tab-title-icon {
        font-size: 1.1rem;
    }

    .organisation-details-tabs .nav-underline .nav-link,
    .organisation-details-tabs .nav-tabs .nav-link {
        padding: 0.5rem 0.6rem;
    }

    .group-details-tabs .nav-underline .nav-link,
    .group-details-tabs .nav-tabs .nav-link,
    .project-details-tabs .nav-underline .nav-link,
    .project-details-tabs .nav-tabs .nav-link {
        padding: 0.5rem 0.2rem;
    }

    /* Icon-only tab bars should never scroll off-screen: wrap onto
       additional rows instead of relying on horizontal scrolling. */
    .organisation-details-tabs .nav-underline,
    .organisation-details-tabs .nav-tabs,
    .group-details-tabs .nav-underline,
    .group-details-tabs .nav-tabs,
    .project-details-tabs .nav-underline,
    .project-details-tabs .nav-tabs {
        flex-wrap: wrap !important;
        overflow-x: visible;
        justify-content: center;
        white-space: normal;
    }

    .organisation-details-tabs .nav-underline .nav-item,
    .organisation-details-tabs .nav-tabs .nav-item,
    .group-details-tabs .nav-underline .nav-item,
    .group-details-tabs .nav-tabs .nav-item,
    .project-details-tabs .nav-underline .nav-item,
    .project-details-tabs .nav-tabs .nav-item {
        flex-shrink: 0;
    }

    /* Group details page: lay the tab icons out in a true grid so every
       cell is the same size (instead of ragged, content-sized flex-wrap
       items). Once "More" is expanded, the secondary tabs render in the
       same unified nav, so the grid naturally continues from the sixth
       cell onward. */
    .group-details-tabs .nav-underline,
    .group-details-tabs .nav-tabs,
    .project-details-tabs .nav-underline,
    .project-details-tabs .nav-tabs {
        display: grid !important;
        grid-template-columns: repeat(6, 1fr);
        gap: 0.15rem;
    }

    .group-details-tabs .nav-underline .nav-item,
    .group-details-tabs .nav-tabs .nav-item,
    .project-details-tabs .nav-underline .nav-item,
    .project-details-tabs .nav-tabs .nav-item {
        flex-shrink: initial;
        width: 100%;
    }

    .group-details-tabs .nav-underline .nav-link,
    .group-details-tabs .nav-tabs .nav-link,
    .project-details-tabs .nav-underline .nav-link,
    .project-details-tabs .nav-tabs .nav-link {
        width: 100%;
    }

    /* Fixture action buttons: equal-width tiles with icon above label,
       laid out in a tidy grid instead of ragged wrapped pills. */
    .agenda-actions {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
        gap: 0.5rem !important;
    }

    .agenda-actions .btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.15rem;
        padding: 0.45rem 0.25rem;
        font-size: 0.72rem;
        line-height: 1.1;
        border-radius: 0.6rem;
        white-space: nowrap;
    }

    .agenda-actions .btn .ti {
        margin: 0 !important;
        font-size: 1.25rem;
    }
}

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

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