/* Voys responsive overrides extracted from app.css to keep app.css drift clean. */

/* ---- Tablet (768px) ---- */
@media (max-width: 768px) {
    /* Sidebar: slide-in from left instead of display toggle */
    .sidebar {
        position: fixed;
        width: 280px;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex !important;
        padding-top: max(16px, env(safe-area-inset-top, 16px));
    }
    .sidebar.collapsed { width: 280px; padding: 16px; align-items: stretch; }
    .sidebar.collapsed .nav-label,
    .sidebar.collapsed .sidebar-user-name { display: inline !important; }
    .sidebar.collapsed .nav-item { width: auto; height: auto; padding: 14px 16px; justify-content: flex-start; }
    .sidebar.collapsed .sidebar-logo { justify-content: space-between; }
    .sidebar.collapsed .sidebar-logo span:not(.sidebar-toggle) { display: inline !important; }

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

    /* Larger touch targets for mobile nav */
    .sidebar .nav-item {
        padding: 14px 16px;
        font-size: 15px;
        gap: 12px;
        min-height: 48px;
    }
    .sidebar .nav-icon { font-size: 18px; }
    .sidebar .sidebar-user { padding: 14px 16px; }

    /* Show close button on mobile sidebar */
    .sidebar-close { display: flex; }
    .sidebar-toggle { display: none; }

    .app-layout { flex-direction: column; }
    .detail-grid-2col { grid-template-columns: 1fr !important; }
    .search-input { width: 100%; min-height: 44px; }
    .info-row { flex-direction: column; gap: 2px; }
    .info-row .label { min-width: 0; }

    /* Tables to cards — project-specific styling */
    .responsive-table tbody tr { background: var(--surface); }
    .responsive-table tbody td::before { color: var(--color-primary); }
}

/* ---- Small phones (480px) ---- */
@media (max-width: 480px) {
    .stats-grid .stat-card { padding: 12px 8px; }
    .stats-grid .stat-card div:first-child { font-size: 24px !important; }
    .page-title { font-size: 18px; }
    .chart-card { padding: 12px; }
    .chart-card h4 { font-size: 14px; }
}