/* Mobile responsive overrides.
   Loaded after style.css and integro-modern.css so these rules take
   priority only inside the mobile breakpoint, without touching the
   desktop layout at all. */

/* Hamburger button: hidden on desktop, shown only on mobile (see below). */
.mobile-menu-btn {
  display: none;
  background: transparent;
  border: 0;
  color: inherit;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mobile-menu-btn svg { width: 24px; height: 24px; }
.mobile-menu-btn:hover { background: rgba(0,0,0,0.06); }

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 40;
}
.sidebar-backdrop.open { display: block; }

@media (max-width: 900px) {
  .app-shell { display: block; }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 260px;
    max-width: 82vw;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform .22s ease;
    overflow-y: auto;
  }
  .sidebar.open { transform: translateX(0); }

  .main { margin-left: 0 !important; width: 100%; }

  .mobile-menu-btn { display: inline-flex; }

  .topbar {
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px;
  }
  .topbar-title { min-width: 0; }
  .topbar-title h1 { font-size: 17px; }
  .topbar-logo { display: none; }

  .user-chip { font-size: 13px; gap: 6px; }
  .user-chip .avatar { width: 26px; height: 26px; font-size: 11px; }

  .content { padding: 12px !important; }

  /* Any card/table content wider than the screen scrolls horizontally
     instead of breaking the whole page layout. */
  .card { overflow-x: auto; }
  table { min-width: 560px; }

  /* Form grids that are normally multi-column stack to one column. */
  .form-grid { grid-template-columns: 1fr !important; }

  /* Toolbars with several buttons wrap and go full width so nothing
     gets clipped off-screen. */
  .toolbar, .filter-row { flex-direction: column; align-items: stretch !important; }
  .toolbar > *, .filter-row > * { width: 100%; }

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

  /* Buttons and inputs get a slightly larger tap target on touch screens. */
  .btn, input, select, textarea, button { min-height: 40px; }

  /* Dropdown export menus and import forms (bulk import/export feature)
     stay usable at narrow widths. */
  .export-menu { left: 0; right: auto; min-width: 100%; }
  .import-form { flex-direction: column; align-items: stretch; }
  .import-form > * { width: 100%; }
}

@media (max-width: 480px) {
  .topbar-title h1 { font-size: 15px; }
  .brand-tagline { display: none; }
}