/* ==========================================================================
   CRIC SQUAD — Responsive layer
   Breakpoints: Laptop ≤1200 · Tablet ≤992 · Small tablet ≤768 · Mobile ≤576
   ========================================================================== */

/* Wide-but-not-huge: header live pill would crowd the 9-item nav */
@media (max-width: 1500px) {
    .site-header .header-actions .live-indicator { display: none; }
}
@media (max-width: 1320px) {
    .header-actions .btn-subscribe { display: none; }
}

/* Nav collapses to drawer before it can crowd the header actions */
@media (max-width: 1180px) {
    .main-nav { display: none; }
    .menu-toggle { display: inline-grid; }
    .header-actions .btn-login { display: none; }
}

/* Laptop */
@media (max-width: 1200px) {
    .main-nav a { padding: 8px 8px; font-size: 13.5px; }
    .main-nav a.is-active::after { left: 8px; right: 8px; }
    .site-header .container { gap: 18px; }
    .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .footer-grid { grid-template-columns: repeat(4, 1fr); }
    .footer-grid .footer-brand, .footer-grid .footer-news { grid-column: span 2; }
    .header-actions .btn-subscribe { display: none; }
}

/* Tablet */
@media (max-width: 992px) {
    :root { --gutter: 20px; }
    .main-nav { display: none; }
    .menu-toggle { display: inline-grid; }
    .header-actions .btn-login { display: none; }
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-sidebar, .grid-sidebar-left { grid-template-columns: minmax(0, 1fr); }
    .sticky-aside { position: static; }
    .hero .container { grid-template-columns: 1fr; padding-block: 64px 48px; }
    .section { padding-block: 52px; }

    /* Dashboard: sidebar becomes off-canvas */
    .dash-layout, .sidebar-collapsed .dash-layout { grid-template-columns: minmax(0, 1fr); }
    .dash-sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 280px; z-index: 350; transform: translateX(-100%); transition: transform var(--t-med); box-shadow: var(--shadow-lg); }
    .dash-open .dash-sidebar { transform: none; }
    .dash-open .dash-scrim { display: block; }
    .dash-scrim { display: none; position: fixed; inset: 0; z-index: 340; background: rgba(0, 0, 0, .55); }
    .sidebar-collapsed .dash-sidebar .brand-name, .sidebar-collapsed .ds-nav span, .sidebar-collapsed .ds-nav .ds-label, .sidebar-collapsed .ds-role > div, .sidebar-collapsed .ds-nav .ds-count { display: revert; }
    .dash-topbar { padding: 0 16px; }
    .dash-content { padding: 20px 16px 100px; }

    .auth-layout { grid-template-columns: 1fr; }
    .auth-visual { display: none; }
}
@media (min-width: 993px) {
    .dash-menu-btn { display: none; }
    .dash-scrim { display: none !important; }
}

/* Small tablet */
@media (max-width: 768px) {
    body { font-size: 14.5px; padding-bottom: 72px; } /* space for bottom nav */
    body.no-bottom-nav { padding-bottom: 0; }
    .grid-2, .form-grid { grid-template-columns: minmax(0, 1fr); }
    .grid-5, .grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .span-2 { grid-column: auto; }
    .section { padding-block: 44px; }
    .section-sm { padding-block: 28px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
    .footer-grid .footer-brand, .footer-grid .footer-news { grid-column: 1 / -1; }
    .cta-band { padding: 44px 26px; border-radius: 18px; }
    .filter-bar .select { flex: 1 1 calc(50% - 6px); min-width: 0; }
    .profile-head { gap: 18px; align-items: flex-start; }
    .profile-head .ph-photo { width: 104px; height: 104px; border-radius: 18px; }
    .news-card.horizontal { flex-direction: column; }
    .news-card.horizontal .nc-media { width: 100%; aspect-ratio: 16 / 9; }
    .scoreboard { padding: 20px; border-radius: 18px; }
    .scoreboard .sb-teams { grid-template-columns: 1fr; gap: 14px; }
    .scoreboard .sb-team.right { flex-direction: row; text-align: left; }
    .scoreboard .sb-vs { display: none; }
    .stat-strip > div { border-right: 0; border-bottom: 1px solid var(--border); }
    .stat-strip { grid-template-columns: repeat(2, 1fr); }
    .stat-strip > div:nth-child(odd) { border-right: 1px solid var(--border); }
    .toast-stack { left: 12px; right: 12px; bottom: 84px; }
    .toast { min-width: 0; max-width: none; }

    /* Mobile bottom navigation */
    .bottom-nav {
        display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
        height: 64px; padding-bottom: env(safe-area-inset-bottom); background: var(--header-bg); backdrop-filter: blur(14px);
        border-top: 1px solid var(--border);
    }
    .bottom-nav a, .bottom-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--muted); position: relative; }
    .bottom-nav i { font-size: 20px; line-height: 1; }
    .bottom-nav .is-active { color: var(--primary-light); }
    .bottom-nav .is-active::before { content: ""; position: absolute; top: 0; width: 28px; height: 2px; border-radius: 2px; background: var(--primary-light); }
    .bottom-nav .bn-live { position: absolute; top: 9px; right: calc(50% - 16px); width: 8px; height: 8px; border-radius: 50%; background: var(--primary-light); border: 2px solid var(--bg); }

    /* Responsive tables → stacked cards where opted in */
    .table-cards { min-width: 0; }
    .table-cards thead { display: none; }
    .table-cards tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
    .table-cards td { padding: 0; border: 0; white-space: normal; text-align: left !important; display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
    .table-cards td::before { content: attr(data-label); color: var(--muted); font-size: 12px; font-weight: 600; }
    .table-cards td.tc-main { grid-column: 1 / -1; font-size: 14px; }
    .table-cards td.tc-main::before { display: none; }
}

/* Mobile */
@media (max-width: 576px) {
    :root { --gutter: 16px; --header-h: 60px; }
    h1 { font-size: 1.9rem; }
    .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
    .grid-4.keep-2, .grid-3.keep-2, .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-auto { grid-template-columns: minmax(0, 1fr); }
    .brand-name { font-size: 19px; }
    .brand img { width: 30px; height: 30px; }
    .header-actions .theme-toggle, .header-actions .notif-trigger { display: none; }
    .hero .container { padding-block: 48px 40px; }
    .hero-stats { gap: 22px; }
    .hero-stats .v { font-size: 1.8rem; }
    .hero-ctas .btn { flex: 1 1 100%; }
    .page-hero { padding: 28px 0 24px; }
    .card-body { padding: 18px; }
    .card-header { padding: 14px 18px; }
    .list-item { padding: 12px 16px; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-bottom { flex-direction: column; }
    .filter-bar { padding: 10px; }
    .filter-bar .select { flex: 1 1 100%; }
    .tour-card .tr-meta { grid-template-columns: 1fr; }
    .comm-item { grid-template-columns: 48px 1fr; gap: 12px; }
    .stat-card .stat-value { font-size: 2rem; }
    .record-card .rc-value { font-size: 2.8rem; }
    .score-btn { height: 60px; }
    .modal { align-items: flex-end; padding: 0; }
    .modal-dialog { width: 100%; border-radius: 18px 18px 0 0; max-height: 90vh; }
    .dash-title h1 { font-size: 1.4rem; }
    .user-chip .name, .user-chip .role { display: none; }
    .user-chip { padding: 2px; }
    .profile-head .ph-actions { width: 100%; }
    .profile-head .ph-actions .btn { flex: 1; }
}