/* ===== ABA CRM — Mobile Responsive Styles ===== */
/* Pure CSS overlay — does NOT alter the desktop experience. */

/* ===== HAMBURGER BUTTON (hidden on desktop) ===== */
.mobile-hamburger {
  display: none;
  width: 44px; height: 44px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface);
  align-items: center; justify-content: center; cursor: pointer;
  font-size: 22px; flex-shrink: 0; transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
}
.mobile-hamburger:active { background: rgba(0,0,0,0.1); }

/* Mobile brand header — hidden on desktop, shown on mobile via media query */
.auth-mobile-brand { display: none; }

/* ===== MOBILE OVERLAY for sidebar ===== */
.sidebar-overlay {
  display: none; position: fixed; inset: 0; z-index: 9998;
  background: rgba(0,0,0,0.35); backdrop-filter: blur(2px);
  -webkit-tap-highlight-color: transparent;
}

/* ================================================================
   TABLET  (≤ 1100px)
   ================================================================ */
@media (max-width: 1100px) {
  .topbar-search { min-width: 140px; }
}

/* ================================================================
   AUTH MOBILE  (≤ 900px) — brand panel → compact inline header
   ================================================================ */
@media (max-width: 900px) {
  .auth-screen { position: fixed; inset: 0; overflow: hidden; }
  .auth-split { flex-direction: column; height: 100vh; height: 100dvh; }
  .auth-brand { display: none !important; }
  .auth-mobile-brand {
    display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    width: 100%; padding: 24px 20px 20px; z-index: 1; box-sizing: border-box;
    background: linear-gradient(160deg, #2C1810 0%, #3D2317 40%, #4A2C1A 70%, #5C3625 100%);
  }
  .auth-mobile-brand svg { width: 36px; height: 36px; }
  .auth-mobile-brand strong { display: block; font-size: 20px; color: #fff; letter-spacing: -0.3px; }
  .auth-mobile-brand span { display: block; font-size: 11px; color: rgba(255,255,255,0.55); margin-top: 2px; }
  .auth-form-panel { flex: 1; padding: 0 16px env(safe-area-inset-bottom, 12px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; overflow: hidden; }
  .auth-form-panel::before { display: none !important; }
  .auth-card { width: 100% !important; max-width: 400px; padding: 20px 18px; box-sizing: border-box; border-radius: 12px; }
  .auth-card.auth-card-webmail { width: 100% !important; max-width: 400px; padding: 10px 16px; box-sizing: border-box; border-radius: 10px; }
}

/* ================================================================
   MOBILE  (≤ 768px)
   ================================================================ */
@media (max-width: 768px) {

  /* --- Auth styles inherited from 900px block, phone-specific overrides only --- */
  .auth-card { max-width: 100% !important; }
  .auth-card.auth-card-webmail { max-width: 100% !important; }
  .auth-card-webmail span { font-size: 13px; }
  .auth-logo { margin-bottom: 10px; }
  .auth-logo h1 { font-size: 20px; }
  .auth-logo p { font-size: 12px; margin-top: 2px; }
  .auth-field { margin-bottom: 10px; }
  .auth-field label { font-size: 12px; margin-bottom: 3px; }
  .auth-field input { font-size: 16px; padding: 9px 10px; border-radius: 8px; }
  .auth-btn { font-size: 15px; padding: 11px; margin-top: 2px; touch-action: manipulation; border-radius: 8px; }
  .auth-link { margin-top: 10px; font-size: 12px; }
  .auth-error, .auth-ok { padding: 8px 10px; font-size: 12px; margin-bottom: 8px; }

  /* --- Hamburger visible --- */
  .mobile-hamburger { display: flex; position: relative; z-index: 10; isolation: isolate; }

  /* --- Traffic lights: hide on mobile (macOS decoration) --- */
  .traffic-lights { display: none; }

  /* --- Topbar adjustments --- */
  .topbar { padding: 0 10px; gap: 8px; height: 48px; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: #ebebf0; }
  .topbar-title { position: static !important; transform: none !important; font-size: 12px; flex: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
  .topbar-search { display: none; }
  .topbar-right { gap: 6px; }
  .user-name, .user-badge { display: none; }
  .user-pill { padding: 4px; }
  .user-avatar { width: 30px; height: 30px; font-size: 13px; }
  .notif-btn { width: 30px; height: 30px; font-size: 14px; }

  /* --- Break #app overflow so fixed sidebar isn't clipped --- */
  #app { overflow: visible; }

  /* --- Sidebar: slide-in drawer --- */
  .sidebar {
    display: flex !important;
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 260px; z-index: 9999;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(245,245,250,0.97);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: none;
    padding-top: 16px;
  }
  .sidebar.mobile-open {
    transform: translateX(0);
    box-shadow: 8px 0 30px rgba(0,0,0,0.15);
  }
  .sidebar-overlay.visible { display: block; }

  /* --- App shell --- */
  #app.active { height: 100vh; height: 100dvh; overflow: visible; }
  .app-body { overflow: hidden; flex: 1; min-height: 0; position: relative; }

  /* --- Content area --- */
  .content { padding: 16px 12px; -webkit-overflow-scrolling: touch; overflow-y: auto; flex: 1; height: 100%; }

  /* --- Page header --- */
  .page-header { flex-direction: column; gap: 10px; align-items: flex-start; margin-bottom: 16px; }
  .page-title { font-size: 20px; }
  .header-actions { width: 100%; flex-wrap: wrap; }

  /* --- Stat cards --- */
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
  .stat-card { padding: 14px; }
  .stat-value { font-size: 22px; }
  .stat-icon { width: 34px; height: 34px; font-size: 16px; margin-bottom: 10px; }

  /* --- Dashboard grid --- */
  .dash-grid { grid-template-columns: 1fr; gap: 12px; }

  /* --- Calendar --- */
  .calendar-grid { grid-template-columns: 1fr; }
  .cal-day { font-size: 12px; padding: 4px 2px; }

  /* --- Performance --- */
  .perf-grid { grid-template-columns: 1fr; }
  .perf-stats-grid { grid-template-columns: 1fr; }
  .perf-card { padding: 18px 16px; }
  .perf-card-body .perf-big { font-size: 26px; }
  .perf-card-body .perf-row { font-size: 14px; }

  /* --- Tables --- */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -12px; padding: 0 12px; }
  table { min-width: 600px; }
  thead th { padding: 8px 10px; font-size: 10px; }
  tbody td { padding: 10px; font-size: 12.5px; }

  /* --- Cards --- */
  .card { border-radius: 12px; }
  .card-header { padding: 12px 14px; }
  .card-body { padding: 14px; }
  .card-title { font-size: 14px; }

  /* --- Modals --- */
  .modal { width: 100%; max-width: 100vw; margin: 0; border-radius: 16px 16px 0 0; max-height: 92vh; position: fixed; bottom: 0; left: 0; right: 0; animation: slideUpMobile 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
  .modal-lg, .modal-xl { width: 100%; }
  .modal-header { padding: 16px; border-radius: 16px 16px 0 0; }
  .modal-body { padding: 16px; }
  .modal-footer { padding: 12px 16px; }
  @keyframes slideUpMobile { from { opacity: 0; transform: translateY(40%); } to { opacity: 1; transform: translateY(0); } }

  /* --- Forms --- */
  .form-grid { grid-template-columns: 1fr; gap: 12px; }
  .form-grid-3 { grid-template-columns: 1fr; }
  .form-field input, .form-field select, .form-field textarea { font-size: 16px; padding: 10px 12px; }
  /* 16px font prevents iOS Safari zoom on focus */

  /* --- Buttons --- */
  .btn { padding: 10px 16px; font-size: 13px; -webkit-tap-highlight-color: transparent; }
  .btn-sm { padding: 7px 12px; }

  /* --- Tab bar --- */
  .tab-bar { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; scrollbar-width: none; -ms-overflow-style: none; }
  .tab-bar::-webkit-scrollbar { display: none; }
  .tab-btn { white-space: nowrap; flex-shrink: 0; }

  /* --- Search bars --- */
  .search-bar { margin-bottom: 12px; }
  .search-bar input { font-size: 16px; }

  /* --- Report filter bar --- */
  .report-filter-bar { flex-direction: column; gap: 8px; align-items: stretch; }
  .report-filter-group { flex-wrap: wrap; }
  .report-filter-search { min-width: 0; width: 100%; }

  /* --- Report accordion --- */
  .report-accordion-header { padding: 12px 14px; gap: 10px; flex-wrap: wrap; }
  .report-accordion-name { font-size: 13px; }
  .report-accordion-summary { gap: 12px; margin-left: 0; width: 100%; justify-content: flex-start; }
  .report-accordion-stat-label { font-size: 9px; }
  .report-accordion-stat-value { font-size: 12px; }

  /* --- Upload zone --- */
  .upload-zone { padding: 32px 16px; }
  .upload-zone-icon { font-size: 36px; }
  .upload-zone-title { font-size: 14px; }

  /* --- Coverage table --- */
  .cov-table-wrap { margin: 0 -12px; padding: 0; border-radius: 0; border-left: none; border-right: none; }
  .cov-card-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }

  /* --- Reminder panel --- */
  #reminderPanel { width: calc(100vw - 20px) !important; max-width: 380px; right: -10px !important; }
  .reminder-settings-card { width: calc(100vw - 32px); }

  /* --- Dropdown menus --- */
  .dropdown-menu { min-width: 160px; }
  .dropdown-item { padding: 11px 14px; font-size: 14px; }

  /* --- Leaderboard --- */
  .leader-row:hover { margin: 0; padding-left: 0; padding-right: 0; }

  /* --- Segment control --- */
  .segment-control { flex-wrap: wrap; }

  /* --- Settings --- */
  .settings-card { max-width: 100%; }

  /* --- Tooltips: disable on touch --- */
  .tooltip::after { display: none; }

  /* --- WhatsApp dropdown positioning --- */
  .wa-hover-dd { min-width: 200px; }

  /* --- Security banner --- */
  .security-banner { font-size: 11px; padding: 8px 10px; }

  /* --- Empty states --- */
  .empty-state { padding: 32px 16px; }

  /* --- Mini stats --- */
  .mini-stat-value { font-size: 14px; }

  /* --- Column actions (edit/delete buttons in tables) --- */
  .col-actions { gap: 2px; }
  .col-actions .btn-sm { padding: 6px 8px; font-size: 11px; }

  /* --- Prevent body scroll when sidebar is open --- */
  body.mobile-sidebar-open { overflow: hidden; }

  /* --- Safe area insets for notched phones --- */
  .topbar { padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
  .content { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .sidebar { padding-left: max(8px, env(safe-area-inset-left)); }
}

/* ================================================================
   SMALL MOBILE  (≤ 420px)
   ================================================================ */
@media (max-width: 420px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat-card { padding: 12px; }
  .cov-card-grid { grid-template-columns: 1fr; }
  .auth-card { padding: 24px 20px; }
  .auth-brand { padding: 24px 16px; }
  .page-title { font-size: 18px; }
  .header-actions .btn span { display: none; }
}