/* Phone and tablet layout. Works with Tailwind utilities (prefix tw-). */

@media (max-width: 1024px) {
  .admin-sidebar {
    transform: translateX(-100%);
    width: min(280px, 86vw);
  }
  .admin-sidebar.open { transform: none; }
  .admin-main { margin-left: 0; }
  .overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 99; display: none; }
  .overlay.show { display: block; }
  .admin-content { padding: 16px; }
  .admin-topbar {
    padding: 8px 12px;
    height: auto;
    min-height: 56px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .topbar-title { font-size: 1.05rem; }
  .topbar-branch-label { display: none; }
  .admin-live-clock { display: none; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-bar .form-control,
  .filter-bar input[type="search"] { max-width: 100%; width: 100%; }
  .branch-switcher-select { max-width: 160px; }
  .modal { max-width: calc(100vw - 16px); }
  .modal--wide { width: calc(100vw - 16px); }
  .portal-sidebar { transform: translateX(-100%); }
  .portal-sidebar.open { transform: none; }
  .portal-main { margin-left: 0; }
  .portal-content { padding: 14px; }
  .portal-live-clock { display: none; }
}

@media (max-width: 768px) {
  .stats-grid,
  .dashboard-grid,
  .grid-2,
  .grid-3,
  .grid-4,
  .features-grid,
  .contact-grid,
  .footer-grid,
  .sk-stat-grid,
  .sk-card-grid { grid-template-columns: 1fr !important; }
  .form-row { grid-template-columns: 1fr !important; }
  .admin-table { min-width: 640px; }
  .admin-content { padding: 12px; }
  .table-card-header { flex-wrap: wrap; gap: 8px; }
  .access-header { flex-direction: column; }
  .access-inline-form { flex-direction: column; align-items: stretch; }
  .access-inline-form .form-control { max-width: none; }
  .hero { padding: 36px 5%; }
  .hero-title { font-size: clamp(1.8rem, 8vw, 2.6rem); }
  .hero-buttons { flex-direction: column; align-items: stretch; }
  .navbar-links {
    display: none;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: var(--navbar-height, 96px);
    left: 0;
    right: 0;
    background: var(--site-nav-bg, #0F172A);
    padding: 16px;
    border-bottom: 1px solid rgba(245, 166, 35, 0.35);
    z-index: 999;
  }
  .navbar-links.open { display: flex; }
  .navbar-toggle { display: block; }
  .navbar-links a,
  .navbar-links .nav-cta { width: 100%; }
  .site-panel { padding: 16px; }
  .register-step { flex-wrap: wrap; }
  .register-step-pill { white-space: normal; text-align: center; }
  .portal-topbar { padding: 0 12px; flex-wrap: wrap; height: auto; min-height: 56px; }
  .portal-topbar-right { flex-wrap: wrap; }
}

@media (max-width: 900px) {
  :root { --navbar-height: 96px; }
  .navbar-toggle { display: block; }
  .navbar-links { display: none; flex-direction: column; position: absolute; top: var(--navbar-height); left: 0; right: 0; padding: 16px; z-index: 999; }
  .navbar-links.open { display: flex; }
  .form-row { grid-template-columns: 1fr; }
}