/*
 * ГАРАЖ 211 — Design System · responsive.css
 */

/* Tablets ≤1200px */
@media (max-width:1200px) {
  html, body { overflow-x:clip; }
  .sidebar-right { right:0; width:300px; max-width:100vw; transform:translateX(100%); }
  .sidebar-right.active { transform:translateX(0); box-shadow:-2px 0 20px rgba(0,0,0,.15); }
  .main-content { margin-right:0; }
  .flash-messages { right:var(--sp-5); }
  .mobile-menu-btn-right { display:block; }
}

/* Mobile ≤768px */
@media (max-width:768px) {
  .unified-legacy-page { overflow-x:hidden; }
  .sidebar-left { width:var(--sidebar-w); transform:translateX(-100%); }
  .sidebar-left.active { transform:translateX(0); box-shadow:2px 0 20px rgba(0,0,0,.15); }
  .main-content { margin-left:0; margin-right:0; padding:var(--sp-5) var(--sp-4); }
  .topbar { padding:0 var(--sp-4); }
  .topbar-brand { font-size:var(--fs-lg); }
  body.logged-in .topbar-brand,
  body.auth-page .topbar-brand { display:none; }
  .topbar-center { display:none; }
  .topbar-user { gap: 8px; margin-left: auto; min-width: 0; }
  .topbar-user .user-info { display: flex !important; max-width: 220px; padding: 4px 8px; }
  .user-info > div { display:block; min-width:0; }
  .user-info > div > div:first-child { font-size: 12px !important; }
  .user-info > div > div:last-child  { font-size: 10px !important; }
  body.logged-in .topbar-user .user-info {
    max-width: 220px;
    flex: 0 1 220px;
  }
  body.logged-in .topbar-user .user-avatar {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    flex-shrink: 0;
  }
  .topbar-chat-btn,
  .topbar-bell-btn { display:inline-flex !important; }
  .flash-messages { max-width:calc(100vw - 32px); }
  .mobile-menu-btn-left,
  .mobile-menu-btn-right { display:block; }
  .page-header { padding:var(--sp-5); }
  .page-header h1 { font-size:var(--fs-xl); }
  .page-cards-grid { grid-template-columns:1fr; }
  .data-table th,
  .data-table td { padding:8px var(--sp-3); font-size:var(--fs-sm); }
}

/* Small mobile ≤480px */
@media (max-width:480px) {
  .topbar { padding:0 var(--sp-3); }
  .topbar-brand { font-size:var(--fs-base); gap:var(--sp-2); }
  .topbar-user .user-info { max-width: 160px; padding: 2px 6px; }
  .user-avatar { width: 30px; height: 30px; }
  body.logged-in .topbar-user .user-info {
    max-width: 160px;
    flex: 0 1 160px;
  }
  body.logged-in .topbar-user .user-avatar {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
  }
  .widget { padding:var(--sp-4); }
  .menu-item { padding:12px var(--sp-5); font-size:var(--fs-md); }
  .alert { padding:12px var(--sp-5); font-size:var(--fs-base); }
  .btn-lg { padding:11px var(--sp-6); font-size:var(--fs-base); }
  .actions-cell { gap:var(--sp-1); }
  .btn-action {
    width:var(--btn-icon-sm);
    height:var(--btn-icon-sm);
    min-width:var(--btn-icon-sm);
    min-height:var(--btn-icon-sm);
  }
}