/* ============================================================
   BAGANI RMS — TABLET VIEW (769px – 1024px)
   Loaded after style.css. Colors come from the same theme variables, so the
   Bagani gradients, color schemes and dark mode carry over unchanged.
   Desktop (above 1024px) uses style.css alone.
   ============================================================ */
@media (min-width: 769px) and (max-width: 1024px) {

  body { font-size: 14.5px; }

  /* ---------- Adjusted sidebar: narrower, still collapsible to the icon rail ---------- */
  .sidebar { width: 220px; min-width: 220px; }
  .main { margin-left: 220px; width: calc(100% - 220px); max-width: calc(100% - 220px); }
  .desktop-toggle-btn { left: calc(220px - 18px); width: 40px; height: 40px; }
  html.sidebar-collapsed .desktop-toggle-btn { left: calc(76px - 20px); }
  .sidebar-logo { padding: 20px 14px 16px; }
  .logo-text { font-size: 17px; }
  .sidebar-user { margin: 12px 10px; padding: 12px; }
  .sidebar-user .user-role { font-size: 10px; padding: 3px 7px; white-space: nowrap; }
  .sidebar-nav { padding: 8px 10px; }
  .nav-item { font-size: 15px; gap: 11px; padding: 12px; min-height: 46px; }
  .logout-btn { font-size: 15px; padding: 12px; min-height: 46px; }

  /* ---------- Topbar & spacing ---------- */
  .topbar { padding: 0 20px 0 32px; height: 64px; }
  .page-title { font-size: 21px; }
  .page-subtitle { font-size: 13px; }
  .content { padding: 20px; }
  .card-header { padding: 16px 18px 0; }
  .card-body { padding: 16px 18px; }
  .content .an-card .card-body { padding: 0 18px 18px; }

  /* ---------- Two-column layout ---------- */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 20px; }
  .grid-2, .grid-3, .form-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .content .an-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .content div[style*="grid-template-columns:repeat(3"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .codes-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .lp-hero { padding: 48px 24px 56px; }
  .lp-hero-inner { gap: 28px; }
  .lp-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-steps { gap: 12px; }
  .lp-step { padding: 16px; }

  /* ---------- Medium font sizes ---------- */
  .card-title { font-size: 17px; }
  .content .an-card .card-title { font-size: 15px; }
  .stat-card { padding: 18px; gap: 14px; }
  .stat-value { font-size: 26px; }
  .stat-label { font-size: 13px; }
  th { padding: 12px; font-size: 12px; }
  td { padding: 12px; font-size: 14px; }
  .content .an-chart { height: 240px; }
  .lp-title { font-size: 42px; }
  .lp-lead { font-size: 16px; }
  .lp-phone { width: 240px; }
  .lp-hero-mural { min-height: 480px; }
  .lp-mural img { object-position: 70% 50%; }
  .lp-glass { max-width: 440px; }
  .lp-phone-split { gap: 28px; }

  /* ---------- Touch-friendly controls ---------- */
  .btn { min-height: 44px; padding: 10px 16px; font-size: 14.5px; }
  .btn-sm { min-height: 40px; padding: 8px 12px; font-size: 13px; }
  .btn-icon { min-width: 44px; min-height: 44px; justify-content: center; }
  .back-btn { width: 42px; height: 42px; }
  .form-control { min-height: 44px; font-size: 15px; }
  .content .an-controls .form-control { height: 42px; }
  input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; }
  .tab-item { padding: 12px 18px; }
  .search-bar { min-height: 44px; }
  .search-bar input { width: 200px; }
  .dark-toggle-btn { min-height: 42px; }

  /* ---------- My Profile: narrower photo column ---------- */
  .profile-grid { grid-template-columns: 200px minmax(0, 1fr); gap: 22px; }

  /* ---------- Modals ---------- */
  .modal { max-width: min(600px, 90vw); }
  .modal-lg { max-width: min(740px, 92vw); }
}