/* ==========================================================================
   Responsive layout — desktop → tablet → mobile
   ========================================================================== */
@media (max-width: 1360px) {
  .global-search { width: 220px; }
  .user-chip .uc-text { display: none; }
}
@media (max-width: 1200px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-2-1, .grid-3-2 { grid-template-columns: minmax(0, 1fr); }
  .grid-1-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1024px) {
  :root { --content-pad: 18px; }
  .app, .app.sidebar-collapsed { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar-w);
    transform: translateX(-100%); transition: transform 220ms ease; box-shadow: var(--shadow-lg);
  }
  .app.mobile-nav-open .sidebar { transform: none; }
  .app.sidebar-collapsed .brand-text, .app.sidebar-collapsed .nav-section-title,
  .app.sidebar-collapsed .nav-link span, .app.sidebar-collapsed .nav-link .nav-badge { display: revert; }
  .app.sidebar-collapsed .nav-link { justify-content: flex-start; padding: 0 10px; }
  .sidebar-backdrop { position: fixed; inset: 0; background: var(--overlay); z-index: 35; display: none; }
  .app.mobile-nav-open .sidebar-backdrop { display: block; }
  .sidebar-collapse-btn { display: none; }
  .mobile-menu-btn { display: inline-flex; }
  .global-search { display: none; }
  .header-search-btn { display: inline-flex !important; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1025px) { .header-search-btn { display: none !important; } .sidebar-backdrop { display: none; } }
@media (max-width: 760px) {
  :root { --content-pad: 16px; --header-h: 58px; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 12px 14px; }
  .kpi-value { font-size: 19px; }
  .kpi .spark { display: none; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .span-2, .span-3 { grid-column: auto; }
  .form-grid, .form-grid.cols-3 { grid-template-columns: minmax(0, 1fr); }
  .page-header h2 { font-size: 19px; }
  .page-actions { width: 100%; }
  .header { gap: 8px; }
  .header-title .breadcrumb { display: none; }
  .header-title h1 { font-size: 15.5px; }
  .outlet-switcher select { max-width: 150px; font-size: 12px; padding-left: 30px; }
  .outlet-locked span { display: none; }
  .header-right { gap: 2px; }
  .header-hide-sm { display: none !important; }
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal { max-height: 94vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .toolbar .input-group { max-width: none; min-width: 0; width: 100%; }
  .toolbar .select { flex: 1; }
  .dl.cols-2 { grid-template-columns: max-content 1fr; }
  .donut-wrap { flex-direction: column; align-items: stretch; }
  .donut-wrap .chart { margin: 0 auto; }
  .toast-stack { left: 12px; right: 12px; bottom: 12px; }
  .toast { min-width: 0; max-width: none; }
  .calendar .cal-day { min-height: 64px; padding: 3px; }
  .cal-event { font-size: 9.5px; padding: 1px 3px; }
  .hbar-row { grid-template-columns: 90px 1fr auto; }
}
@media (max-width: 420px) {
  .kpi-grid { grid-template-columns: minmax(0, 1fr); }
}
@media print {
  .sidebar, .header, .toast-stack, .demo-ribbon, .page-actions, .toolbar, .pagination, .no-print { display: none !important; }
  .app { display: block; }
  body { background: #fff; }
  .card { box-shadow: none; break-inside: avoid; }
  .content { padding: 0; }
}