/* Shared responsive rules for public site, academy, scout, and admin */

html {
    max-width: 100%;
}

body {
    overflow-x: hidden;
}

img,
video,
canvas,
svg,
iframe {
    max-width: 100%;
}

video,
iframe {
    height: auto;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

.container,
.nav-container {
    width: 100%;
    max-width: 100%;
}

main,
.main-content,
.content-area {
    min-width: 0;
    max-width: 100%;
}

table {
    max-width: 100%;
}

.data-table,
.table,
table.table {
    width: 100%;
}

@media (max-width: 1024px) {
    .grid-4,
    .grid-5,
    .stats-grid-enhanced {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .content-grid,
    .dashboard-grid,
    .chart-section,
    .bottom-section,
    .form-grid {
        grid-template-columns: 1fr !important;
    }

    .nav-more-menu,
    .nav-more-menu--coach,
    .join-dropdown-menu {
        width: min(420px, calc(100vw - 1.5rem)) !important;
        inset-inline-end: 0 !important;
        left: auto !important;
        right: auto !important;
    }
}

@media (max-width: 768px) {
    .grid-2,
    .grid-3,
    .grid-4,
    .grid-5,
    .form-row,
    .form-grid,
    .quick-actions-grid,
    .stats-grid,
    .stats-grid-enhanced,
    .today-stats-bar,
    .welcome-content,
    .page-header,
    .section-header,
    .toolbar,
    .filter-bar,
    .search-bar,
    .hero-actions {
        grid-template-columns: 1fr !important;
        flex-wrap: wrap;
    }

    .table-container,
    .table-wrap,
    .data-table-wrap,
    .content-card,
    .section-card {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .content-card,
    .section-card,
    .chart-card,
    .stat-card,
    .stat-card-enhanced {
        min-width: 0;
        max-width: 100%;
    }

    .btn,
    .btn-primary,
    .btn-outline,
    .filter-submit {
        white-space: normal;
    }

    .modal,
    .confirm-box,
    .new-chat-modal {
        width: calc(100vw - 1.5rem) !important;
        max-width: 100% !important;
    }
}

@media (max-width: 480px) {
    .grid-2,
    .grid-3,
    .grid-4,
    .grid-5,
    .stats-row,
    .stats-grid,
    .today-stats-bar {
        grid-template-columns: 1fr !important;
    }

    h1,
    .page-title,
    .welcome-title,
    .hero-title {
        font-size: clamp(1.25rem, 6vw, 1.75rem) !important;
        word-break: break-word;
    }

    .nav-container,
    .topbar,
    .admin-header {
        padding-inline: 0.75rem !important;
        gap: 0.5rem;
    }
}