/* ============================================================
   IZZAT — Responsive layer
   Breakpoints:
   - >=1280px: layout default (sidebar 260px expandida)
   - 1024-1279px: sidebar permanece expandida; main usa toda largura
   - 768-1023px: sidebar colapsa pra 60px (icones-only)
   - <768px:  sidebar vira off-canvas (drawer); topbar workspace switcher vira dropdown
   ============================================================ */

/* ─── Sidebar collapse (1024-1279px desktop pequeno) ─────── */
@media (max-width: 1279px) and (min-width: 1024px) {
  .app {
    /* Mantém sidebar expandida; apenas reduz padding/maxes */
  }
  .page { padding: 20px; }
}

/* ─── Tablet: 768-1023px — sidebar collapses to icons-only ── */
@media (max-width: 1023px) and (min-width: 768px) {
  :root { --sidebar-w: var(--sidebar-collapsed-w, 60px); }
  .sidebar .nav-item span:not(.nav-ico):not(.material-symbols-rounded),
  .sidebar .ws-label,
  .sidebar .sidebar-section,
  .sidebar .nav-count {
    display: none !important;
  }
  .sidebar .nav-item {
    justify-content: center;
    padding: 10px;
  }
  .topbar-nav .ws-btn span { display: none; }
  .topbar-nav .ws-btn { padding: 6px 10px; }
}

/* ─── Mobile: <768px — sidebar off-canvas ─────────────────── */
@media (max-width: 767px) {
  body { overflow-x: hidden; }

  .app {
    grid-template-columns: 1fr !important;
  }

  .sidebar {
    position: fixed !important;
    top: var(--topbar-h, 56px);
    left: 0;
    bottom: 0;
    width: 280px !important;
    z-index: 999;
    transform: translateX(-100%);
    transition: transform var(--dur) var(--ease);
    box-shadow: var(--shadow-3);
  }
  body[data-sidebar="open"] .sidebar { transform: translateX(0); }
  body[data-sidebar="open"]::after {
    content: '';
    position: fixed;
    inset: var(--topbar-h, 56px) 0 0 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 998;
  }

  .topbar-nav { display: none !important; }
  .ws-mobile-toggle { display: inline-flex !important; }
  .ws-mobile-dropdown { display: none; }
  .ws-mobile-dropdown.open { display: block; }

  .main { padding: 12px; }
  .page { padding: 12px; }

  .page__header { flex-direction: column; align-items: stretch; }
  .page__actions { width: 100%; }

  .kpi-grid,
  .hub-kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  }
}

/* ─── Hambúrguer button (visível só em mobile) ──────────── */
.ws-mobile-toggle { display: none; }

/* ─── Print ─────────────────────────────────────────────── */
@media print {
  .sidebar, .topbar, .drawer, .modal-overlay, .toast-stack { display: none !important; }
  .main { margin: 0 !important; padding: 0 !important; }
}