/* Momentran V2 — Responsive Breakpoints */

/* Tablet */
@media (max-width: 1024px) {
    .grid-5 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .result-cards { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile landscape / small tablet */
@media (max-width: 768px) {
    .app-layout {
        grid-template-columns: 1fr;
        grid-template-areas: "topbar" "main";
    }

    .topbar {
        padding: 0 12px;
    }

    .mobile-menu-btn { display: flex; }

    .topbar-divider { display: none; }
    .topbar-user-info { display: none; }

    /* Brand: Keep "Momentran" visible but make smaller */
    .topbar-brand { font-size: 0.95rem; gap: 6px; }
    .topbar-brand-icon { width: 28px; height: 28px; border-radius: 6px; }
    .topbar-brand-icon svg { width: 14px; height: 14px; }

    /* Hide dropdown arrow on mobile (no user info shown) */
    .topbar-user > svg { display: none; }

    /* Sidebar becomes slide-over */
    .sidebar {
        position: fixed;
        top: 56px;
        left: 0;
        bottom: 0;
        width: 280px;
        z-index: 90;
        transform: translateX(-100%);
        transition: transform var(--duration-normal) var(--ease-out);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar-overlay.show {
        display: block;
    }

    .main-content {
        padding: 16px;
        max-height: none;
    }

    .grid-5, .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-2 { grid-template-columns: 1fr; }

    .result-cards { grid-template-columns: 1fr; }

    .content-header { flex-direction: column; gap: 10px; }
    .content-title { font-size: 1.15rem; }
    .date-filter { align-self: flex-start; }

    .chart-container { height: 200px; }
    .chart-container.tall { height: 260px; }

    .data-table-wrap { overflow-x: auto; }
    .data-table { min-width: 600px; }

    .pill-tabs { overflow-x: auto; }

    /* User dropdown position fix for mobile */
    .user-dropdown { right: -8px; min-width: 160px; }

    /* Modal responsive */
    #app-modal .modal-content {
        width: 95vw;
        max-width: 95vw;
        max-height: 90vh;
    }
}

/* Mobile portrait */
@media (max-width: 480px) {
    .topbar-sync-btn span { display: none; }

    /* Keep Momentran brand text visible even on small screens */
    .topbar-brand { font-size: 0.85rem; }

    .grid-5, .grid-4, .grid-3, .grid-2 {
        grid-template-columns: 1fr;
    }

    .main-content { padding: 12px; }

    .metric-card { padding: 14px; }
    .metric-card-value { font-size: 1.3rem; }

    .score-card { padding: 16px; }
    .gauge-svg { width: 110px; height: 110px; }

    .collapsible-header { padding: 12px 14px; }
    .collapsible-content { padding: 0 14px 14px; }

    .modal { padding: 20px; }

    .app-switcher-btn { max-width: 140px; font-size: 0.8rem; }

    /* Topbar compact spacing */
    .topbar-right { gap: 4px; }
    .topbar-btn { width: 32px; height: 32px; }
    .topbar-btn svg { width: 14px; height: 14px; }
    .topbar-avatar { width: 28px; height: 28px; font-size: 0.7rem; }

    /* Date filter scrollable on mobile */
    .date-filter {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .date-btn { font-size: 0.72rem; padding: 4px 10px; }

    /* Simulator sliders stack */
    .sim-sliders .grid-2 {
        grid-template-columns: 1fr !important;
    }

    /* Result cards single column */
    .result-cards { grid-template-columns: 1fr !important; }

    /* Info boxes wrap */
    .info-box { font-size: 0.75rem; }

    /* Modal full screen on small mobile */
    #app-modal .modal-content {
        width: 100vw;
        max-width: 100vw;
        max-height: 95vh;
        border-radius: var(--radius-md) var(--radius-md) 0 0;
    }
}

/* Admin layout responsive */
@media (max-width: 768px) {
    .admin-layout {
        grid-template-columns: 1fr;
    }

    .admin-sidebar {
        position: fixed;
        top: 56px;
        left: 0;
        bottom: 0;
        width: 220px;
        z-index: 90;
        transform: translateX(-100%);
        transition: transform var(--duration-normal) var(--ease-out);
    }

    .admin-sidebar.open {
        transform: translateX(0);
    }

    /* Admin table scrollable */
    .admin-table { min-width: 700px; }
    .admin-table th, .admin-table td { font-size: 0.75rem; padding: 6px 8px; }
}