/* ═══════════════════════════════════════════════════════════════
   ERPAMA Framework - Responsive Design
   Mobile-first breakpoints:
     xs: <576px   sm: ≥576px   md: ≥768px
     lg: ≥992px   xl: ≥1200px  xxl: ≥1400px
   ═══════════════════════════════════════════════════════════════ */

/* ── LARGE TABLETS / SMALL DESKTOPS (≤1280px) ──────────────── */
@media (max-width: 1280px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .charts-grid { grid-template-columns: 1fr 1fr; }
}

/* ── TABLETS (≤1024px / lg breakpoint) ─────────────────────── */
@media (max-width: 1024px) {
    /* Sidebar: hidden by default, slide-in on toggle */
    .sidebar {
        transform: translateX(-100%);
        box-shadow: none;
    }
    .sidebar.open, .sidebar.show {
        transform: translateX(0);
        box-shadow: 4px 0 20px rgba(0,0,0,0.25);
    }

    /* Main content: full width */
    .main-content { margin-left: 0 !important; }

    /* Show mobile menu button */
    .mobile-menu-btn { display: flex; }

    /* Show overlay when sidebar open */
    .mobile-overlay.active { display: block; }

    /* Grid: 2 columns or single */
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .charts-grid,
    .analytics-grid,
    .settings-grid { grid-template-columns: 1fr; }

    /* Header: tighter padding */
    .header-content { padding: 0 1rem; }

    /* Page content: less padding */
    .page-content { padding: 1.25rem; }

    /* Form grid: 2 cols max */
    .form-row-3 { grid-template-columns: repeat(2, 1fr); }

    /* User info hidden */
    .user-info { display: none; }
    .user-section { border-left: none; padding-left: 0; }
}

/* ── MOBILE (≤768px / md breakpoint) ───────────────────────── */
@media (max-width: 768px) {
    /* Stats: 2 cols with smaller gap */
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }

    /* Filter bar: stack vertically */
    .filter-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    .filter-group { width: 100%; }
    .filter-input, .filter-select {
        flex: 1;
        min-width: 0;
        max-width: none;
    }

    /* Form grids: single column */
    .form-row-2, .form-row-3 { grid-template-columns: 1fr; }

    /* Modal: full width */
    .modal { width: 100%; max-width: none; border-radius: var(--radius-lg); }
    .modal-body { padding: 1.25rem; }

    /* Cards: less padding */
    .card-body, .stat-card { padding: 1rem; }
    .stat-card-icon { width: 40px; height: 40px; font-size: 1.25rem; }
    .stat-card-value { font-size: 1.5rem; }

    /* Section header: stack */
    .section-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    .section-header .btn { width: 100%; }

    /* Hidden on mobile */
    .hidden-mobile { display: none !important; }
    .show-mobile { display: block !important; }

    /* Table: smaller cells */
    .table th, .table td {
        padding: 0.625rem 0.5rem;
        font-size: 0.8125rem;
    }

    /* Table hidden columns */
    .table th.mobile-hide, .table td.mobile-hide { display: none !important; }

    /* Show mobile card view */
    .mobile-cards-show .table-container { display: none; }
    .mobile-cards-show .mobile-cards { display: block !important; }

    /* Tenant avatar smaller */
    .avatar { width: 32px; height: 32px; font-size: 0.75rem; }

    /* Toast: full width on small screens */
    .toast-container {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
        max-width: none;
    }

    /* Header */
    .header-title { font-size: 1.1rem; }
    .header-right { gap: 0.5rem; }
    .header-btn { width: 34px; height: 34px; }

    /* Page content */
    .page-content { padding: 1rem; }

    /* Pagination smaller */
    .pagination-btn { min-width: 32px; height: 32px; font-size: 0.8125rem; }
}

/* ── SMALL MOBILE (≤576px / sm breakpoint) ─────────────────── */
@media (max-width: 576px) {
    /* Sidebar: full width */
    .sidebar { width: 100%; }

    /* Stats: single column */
    .stats-grid { grid-template-columns: 1fr; }

    /* Smaller page title */
    .header-title { font-size: 1rem; }
    .header-subtitle { font-size: 0.75rem; }

    /* Page content: minimal padding */
    .page-content { padding: 0.75rem; }

    /* Cards: smaller radius */
    .card { border-radius: var(--radius-md); }

    /* Buttons: full width in forms */
    .form-actions { flex-direction: column; }
    .form-actions .btn { width: 100%; }

    /* Filter group: stack */
    .filter-group { flex-direction: column; gap: 0.5rem; }
    .filter-input, .filter-select, .input { width: 100%; min-width: 0; max-width: none; }

    /* Settings: full width items */
    .settings-option { flex-direction: column; align-items: flex-start; gap: 0.5rem; }

    /* Stat text */
    .stat-card-value { font-size: 1.25rem; }

    /* Modal: less padding */
    .modal-header { padding: 1rem; }
    .modal-body { padding: 1rem; }
    .modal-footer { padding: 0.75rem 1rem; }

    /* Tabs: scrollable */
    .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tab { white-space: nowrap; padding: 0.625rem 1rem; font-size: 0.8125rem; }

    /* Bottom nav item text */
    .bottom-nav-item { font-size: 0.6rem; min-width: 48px; }
    .bottom-nav-item i { font-size: 1.125rem; }
}

/* ── EXTRA SMALL (≤400px) ──────────────────────────────────── */
@media (max-width: 400px) {
    .header-content { padding: 0 0.75rem; }
    .page-content { padding: 0.5rem; }

    .badge { font-size: 0.65rem; padding: 0.2rem 0.5rem; }
    .btn-sm { padding: 0.25rem 0.5rem; font-size: 0.75rem; }

    .mobile-more-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── MOBILE BOTTOM NAV ACTIVATION ──────────────────────────── */
@media (max-width: 1024px) {
    .has-bottom-nav .mobile-bottom-nav { display: block; }
    .has-bottom-nav .main-content { padding-bottom: 70px; }
    .has-bottom-nav .footer { margin-bottom: 60px; }
    .has-bottom-nav .toast-container { bottom: 80px; }
}

/* ── DESKTOP: HIDE MOBILE ELEMENTS ─────────────────────────── */
@media (min-width: 1025px) {
    .mobile-menu-btn { display: none !important; }
    .mobile-overlay { display: none !important; }
    .mobile-bottom-nav { display: none !important; }
    .mobile-more-menu { display: none !important; }
    .mobile-cards { display: none !important; }
    .show-mobile { display: none !important; }
    .hidden-desktop { display: none !important; }
}

/* ── LARGE DESKTOP (≥1400px) ───────────────────────────────── */
@media (min-width: 1400px) {
    .page-content { padding: 2.5rem; }
    .stats-grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
}

/* ── PRINT ─────────────────────────────────────────────────── */
@media print {
    .sidebar, .header, .footer,
    .mobile-menu-btn, .mobile-overlay, .mobile-bottom-nav,
    .mobile-more-menu, .filter-bar, .form-actions,
    .btn, .modal-overlay, .toast-container { display: none !important; }

    .main-content { margin-left: 0 !important; }
    .page-content { padding: 0; }

    .card { break-inside: avoid; border: 1px solid #ccc; box-shadow: none; }
    .page { display: block !important; }

    body { background: #fff; color: #000; }
    .table { font-size: 0.8rem; }
}

/* ── LANDSCAPE PHONE ───────────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
    .sidebar { padding-bottom: 0; }
    .sidebar-footer { padding: 0.5rem; }
    .modal { max-height: 95vh; }
    .modal-body { max-height: calc(95vh - 120px); }
}

/* ── SAFE AREA (notch devices) ─────────────────────────────── */
@supports (padding: env(safe-area-inset-bottom)) {
    .mobile-bottom-nav {
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
    }
    .sidebar {
        padding-top: env(safe-area-inset-top);
    }
}