/* ============================================================
   BAGANI RMS — MOBILE VIEW (max-width: 768px)
   Loaded after style.css. Colors come from the same theme variables, so the
   Bagani gradients, color schemes and dark mode carry over unchanged.
   ============================================================ */
@media (max-width: 768px) {

  /* ---------- Utilities ---------- */
  .desktop-only, .hide-mobile { display: none !important; }
  .mobile-only { display: block !important; }
  span.mobile-only, div.mobile-only { display: inline-flex !important; }


  /* ---------- No sidebar on phones: the bottom bar and the "More" sheet replace it ---------- */
  .sidebar, .sidebar-backdrop, .desktop-toggle-btn, .mobile-menu-btn { display: none !important; }
  html.sidebar-collapsed .main { margin-left: 0; width: 100%; max-width: 100%; }
  body.nav-open { overflow: hidden; }

  /* ---------- Layout ---------- */
  .main { margin-left: 0; width: 100%; max-width: 100%; }
  .content { padding: 12px 12px calc(150px + env(safe-area-inset-bottom)); background: transparent; } /* body sets the page color per theme */

  /* ---------- Header: one 60px row (greeting or ← title, then bell + avatar) ---------- */
  .topbar-left-desktop, .topbar-right-desktop { display: none !important; }
  .mobile-header-top { display: flex !important; gap: 10px; }
  .topbar { padding: 8px 12px 8px 14px; height: auto; min-height: 60px; flex-direction: row; background: var(--white); border-bottom: 1px solid var(--border); box-shadow: 0 2px 10px rgba(0,0,0,0.03); }
  .page-title { font-size: 18px; }
  .page-subtitle { display: none; }
  .mobile-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
  .mobile-avatar-btn {
    width: 42px; height: 42px; padding: 0; border-radius: 50%; border: 2px solid var(--teal); cursor: pointer; overflow: hidden;
    background: linear-gradient(135deg, var(--gold), var(--coral)); color: #fff; font: 700 14px var(--font);
    display: flex; align-items: center; justify-content: center;
  }
  .mobile-avatar-btn img { width: 100%; height: 100%; object-fit: cover; }
  .mobile-greeting { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
  .mobile-greeting-sub { font-size: 12px; font-weight: 600; color: var(--slate); }
  .mobile-greeting-name { font-size: 20px; font-weight: 800; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-title-wrap { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .mobile-back {
    display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: -8px; flex-shrink: 0;
    border-radius: 50%; color: var(--navy); text-decoration: none;
  }
  .mobile-back:active { background: var(--off-white); }
  .mobile-page-title { font-size: 20px; font-weight: 800; color: var(--navy); line-height: 1.25; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }  .mobile-bell {
    position: relative; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%;
    background: var(--off-white); border: 1px solid var(--border); color: var(--navy); text-decoration: none;
  }
  .mobile-bell-count {
    position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px; padding: 0 4px; border-radius: 10px;
    background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--white);
  }
  [data-theme="dark"] .mobile-bell { background: #0d1918; border-color: #182a29; color: #e2f0ef; }


  /* ---------- Floating bottom bar: Home, Inventory, Dispense, Deliveries, More ---------- */
  .mobile-nav-panel {
    display: block !important; position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 1080; background: var(--white); border: 1px solid var(--border); border-radius: 22px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
  }
  .mobile-nav-grid { display: flex; align-items: stretch; justify-content: space-around; padding: 6px 4px; }
  .mobile-nav-grid-item {
    flex: 1; min-width: 0; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 4px 0; border: none; background: none; border-radius: 14px; text-decoration: none; color: var(--slate);
    font-family: var(--font); cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .mobile-nav-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 32px; border-radius: 12px; transition: transform .2s, background .2s, box-shadow .2s; }
  .mobile-nav-icon svg { stroke: currentColor; }
  .mobile-nav-icon { position: relative; }
  .mobile-nav-badge {
    position: absolute; top: -4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: var(--danger); color: #fff; font: 700 10.5px/18px var(--font); text-align: center; border: 2px solid var(--white); box-sizing: content-box;
  }
  [data-theme="dark"] .mobile-nav-badge { border-color: #111e1d; }
  .mobile-nav-label { font-size: 11.5px; font-weight: 600; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .mobile-nav-grid-item.active { color: var(--navy); }
  .mobile-nav-grid-item.active .mobile-nav-label { font-weight: 700; }
  .mobile-nav-grid-item.active .mobile-nav-icon {
    color: #fff; background: linear-gradient(135deg, var(--gold), var(--coral)); transform: translateY(-3px);
    box-shadow: 0 6px 14px color-mix(in srgb, var(--coral) 40%, transparent);
  }
  [data-theme="dark"] .mobile-nav-panel { background: #111e1d; border-color: #182a29; box-shadow: 0 8px 24px rgba(0,0,0,.5); }

  /* ---------- "More" sheet: slides up from the bottom ---------- */
  .mobile-sheet-backdrop {
    display: block; position: fixed; inset: 0; z-index: 1190; background: rgba(15,15,25,.45);
    opacity: 0; pointer-events: none; transition: opacity .25s;
  }
  .mobile-sheet-backdrop.open { opacity: 1; pointer-events: auto; }
  .mobile-sheet {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
    max-height: 88vh; overflow-y: auto; overscroll-behavior: contain;
    background: var(--white); border-radius: 24px 24px 0 0; box-shadow: 0 -10px 40px rgba(0,0,0,.2);
    padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
    transform: translateY(105%); visibility: hidden; transition: transform .3s cubic-bezier(.4,0,.2,1), visibility 0s .3s;
  }
  .mobile-sheet.open { transform: translateY(0); visibility: visible; transition: transform .3s cubic-bezier(.4,0,.2,1); }
  .mobile-sheet:focus { outline: none; }
  .mobile-sheet-handle { width: 42px; height: 5px; border-radius: 3px; background: var(--border); margin: 2px auto 12px; }

  .mobile-sheet-user {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 14px; border-radius: 16px;
    background: var(--off-white); border: 1px solid var(--border); text-decoration: none; color: var(--navy);
  }
  .mobile-sheet-avatar {
    width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; object-fit: cover; border: 2px solid var(--teal);
    background: linear-gradient(135deg, var(--gold), var(--coral)); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center;
  }
  .mobile-sheet-user-text { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
  .mobile-sheet-user-text strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  .mobile-sheet-user-text .user-role { margin-top: 0; }
  .mobile-sheet-user-link { font-size: 13px; font-weight: 700; color: var(--teal-dark); white-space: nowrap; }

  /* Page tiles: 4 per row, label up to 2 lines */
  .mobile-sheet-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 4px; margin-bottom: 12px; }
  .mobile-sheet-tile {
    display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 2px; border-radius: 14px;
    text-decoration: none; color: var(--navy); -webkit-tap-highlight-color: transparent;
  }
  .mobile-sheet-tile:active { background: var(--off-white); }
  .mobile-sheet-tile-icon {
    position: relative; width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 8px rgba(0,0,0,.06);
  }
  .mobile-sheet-tile.active .mobile-sheet-tile-icon { color: #fff !important; background: linear-gradient(135deg, var(--gold), var(--coral)) !important; }
  .mobile-sheet-tile.active .mobile-sheet-tile-label { font-weight: 800; }
  .mobile-sheet-tile-label {
    font-size: 12px; font-weight: 600; text-align: center; line-height: 1.2; max-width: 100%;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .mobile-sheet-badge {
    position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
    background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid var(--white);
  }

  .mobile-sheet-footer { border-top: 1px solid var(--border); padding-top: 4px; }
  .mobile-sheet-row {
    display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 46px; padding: 0 6px;
    background: none; border: none; border-radius: 12px; text-decoration: none; color: var(--navy); font: 600 14.5px var(--font); cursor: pointer;
  }
  .mobile-sheet-row:active { background: var(--off-white); }
  .mobile-sheet-row.danger { color: var(--danger); }
  .mobile-sheet-row-label { display: flex; align-items: center; gap: 12px; }
  .mobile-dark-toggle { width: 50px; height: 28px; border-radius: 20px; background: var(--border); position: relative; transition: background .3s; flex-shrink: 0; }
  .mobile-toggle-thumb { width: 22px; height: 22px; background: #fff; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,.15); position: absolute; top: 3px; left: 3px; transition: transform .3s; }
  [data-theme="dark"] .mobile-dark-toggle { background: var(--teal); }
  [data-theme="dark"] .mobile-toggle-thumb { transform: translateX(22px); }

  [data-theme="dark"] .mobile-sheet { background: #111e1d; }
  [data-theme="dark"] .mobile-sheet-tile-icon { background: color-mix(in srgb, currentColor 18%, transparent) !important; box-shadow: none; }
  [data-theme="dark"] .mobile-sheet-user { background: #0d1918; border-color: #182a29; }
  [data-theme="dark"] .mobile-sheet-footer { border-color: #182a29; }
  [data-theme="dark"] .mobile-sheet-handle { background: #2a4240; }
  [data-theme="dark"] .mobile-sheet-user-link { color: var(--teal); }

  /* ---------- Phone Dashboard (includes/mobile_dashboard.php) ---------- */
  .dash-stack { display: flex; flex-direction: column; }
  .dash-stack > .phone-dash { order: 0; }
  .dash-stack > .dash-lists { order: 1; }
  .dash-stack > .dash-charts { order: 2; }
  .dash-stack > .dash-expiring { order: 3; }
  .phone-dash { display: block; margin-bottom: 18px; }

  .pd-hero {
    position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 2px; padding: 20px 20px 18px;
    border-radius: 20px; color: #fff; text-decoration: none;
    background: linear-gradient(135deg, var(--gold) 0%, var(--coral) 100%);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--coral) 35%, transparent);
  }
  .pd-hero::before, .pd-hero::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255,255,255,.14); pointer-events: none; }
  .pd-hero::before { width: 180px; height: 180px; right: -60px; top: -80px; }
  .pd-hero::after { width: 110px; height: 110px; right: 40px; bottom: -70px; }
  .pd-hero-label { font-size: 12.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; opacity: .9; }
  .pd-hero-value { font-size: 40px; font-weight: 800; line-height: 1.1; font-family: var(--mono); letter-spacing: -1px; }
  .pd-hero-sub { font-size: 13.5px; opacity: .92; }
  .pd-hero-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; position: relative; z-index: 1; }
  .pd-chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.3); }

  .pd-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
  .pd-tile {
    display: flex; flex-direction: column; gap: 4px; padding: 12px 10px; border-radius: 16px; text-decoration: none;
    background: var(--tile-bg); border: 1px solid color-mix(in srgb, var(--tile-color) 25%, transparent); min-height: 76px;
  }
  .pd-tile-value { font-size: 22px; font-weight: 800; font-family: var(--mono); color: var(--tile-color); line-height: 1.1; }
  .pd-tile-label { font-size: 12px; font-weight: 600; color: var(--navy); line-height: 1.25; }
  [data-theme="dark"] .pd-tile { background: color-mix(in srgb, var(--tile-color) 14%, transparent); }

  .pd-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 20px 2px 10px; }
  .pd-section-title { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 800; color: var(--navy); }
  .pd-section-title::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--coral)); }
  .pd-view-all {
    display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 16px; font-size: 12.5px; font-weight: 700;
    color: var(--teal-dark); background: var(--teal-light); text-decoration: none;
  }
  [data-theme="dark"] .pd-view-all { color: var(--teal); }

  .pd-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .pd-action { display: flex; flex-direction: column; align-items: center; gap: 7px; text-decoration: none; color: var(--navy); padding: 4px 0; -webkit-tap-highlight-color: transparent; }
  .pd-action-icon { position: relative; width: 58px; height: 58px; border-radius: 18px; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px rgba(0,0,0,.07); transition: transform .15s; }
  .pd-action:active .pd-action-icon { transform: scale(.94); }
  .pd-action-label { font-size: 12.5px; font-weight: 600; text-align: center; line-height: 1.2; }
  [data-theme="dark"] .pd-action-icon { background: color-mix(in srgb, currentColor 18%, transparent) !important; box-shadow: none; }

  .pd-list { overflow: hidden; border-radius: 16px; }
  .pd-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
  .pd-row:last-child { border-bottom: none; }
  .pd-row-icon { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--teal-light); color: var(--teal); }
  .pd-row.voided .pd-row-icon, .pd-row.overdue .pd-row-icon { background: var(--danger-light); color: var(--danger); }
  a.pd-row { text-decoration: none; color: inherit; }
  a.pd-row:active { background: var(--off-white); }
  .pd-row .badge { flex-shrink: 0; }
  .pd-overdue { font: 700 12px var(--font); color: var(--danger); background: var(--danger-light); padding: 2px 8px; border-radius: 10px; }
  .pd-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .pd-row-title { font-size: 14.5px; font-weight: 700; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pd-row-sub { font-size: 12.5px; color: var(--slate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pd-row-qty { font-size: 15px; font-weight: 800; color: var(--teal-dark); font-family: var(--mono); }
  [data-theme="dark"] .pd-row-qty { color: var(--teal); }
  .pd-empty { padding: 24px; text-align: center; color: var(--slate); font-size: 14px; }

  /* Floating AI Companion button: small round icon above the bottom bar */
  #aiCompanionBtn {
    bottom: calc(92px + env(safe-area-inset-bottom)) !important; right: 14px !important; width: 48px; height: 48px; min-height: 48px;
    padding: 0 !important; justify-content: center; border-radius: 50% !important; opacity: 1 !important; margin: 0; z-index: 1070 !important;
  }
  #aiCompanionBtn svg { width: 22px; height: 22px; }
  #aiCompanionBtn .ai-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

  /* ---------- Hide non-essential elements ---------- */
  .topbar-date, .inv-scroll-hint { display: none !important; }
  .content [onclick*="window.print"] { display: none !important; }
  .topbar-actions .btn span:not(.icon) { display: none; }

  /* ---------- Single-column layout (number cards: compact 2×2 tiles) ---------- */
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
  .form-grid, .form-grid-2, .form-grid-3, .grid-2, .grid-3 { grid-template-columns: 1fr !important; gap: 12px; }
  .content div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .an-grid, .scheme-grid { grid-template-columns: 1fr !important; }
  .codes-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* ---------- Cards (smaller paddings) ---------- */
  .card-header { padding: 14px 14px 0; flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; }
  .card-body { padding: 14px; }
  .card-title { font-size: 16.5px; line-height: 1.25; }
  .card-subtitle { font-size: 12.5px; margin-top: 2px; line-height: 1.4; }
  .content .an-card .card-body { padding: 0 14px 16px; }
  .content .an-chart { height: 220px; }
  .content .an-chart.tall { height: 260px; }
  .responsive-card-header { flex-direction: column !important; align-items: stretch !important; gap: 16px !important; padding: 16px !important; }

  .card-accordion .card-header { padding: 14px 16px; cursor: pointer; flex-direction: row; justify-content: space-between; align-items: center; }
  .card-accordion .card-title { display: flex; align-items: center; gap: 8px; font-size: 16px; }
  .card-accordion .card-title svg { stroke: var(--slate); }
  .card-accordion .card-body { padding: 14px 16px; }
  .card-accordion .accordion-icon { transition: transform 0.3s; }
  .card-accordion.collapsed .accordion-icon { transform: rotate(180deg); }
  .card-accordion.collapsed .card-body { display: none; }
  .card-accordion.collapsed .card-subtitle { display: none; }

  .stat-card { padding: 12px; gap: 10px; flex-direction: row; align-items: center; min-width: 0; }
  .stat-card > div:last-child { min-width: 0; }
  .stat-icon { width: 36px; height: 36px; border-radius: 10px; }
  .stat-value { font-size: 22px; overflow-wrap: anywhere; }
  .stat-label { margin-top: 2px; font-size: 12px; line-height: 1.3; }

  /* ---------- Phone type and spacing scale ----------
     Text: header 18 · section/card titles 15 · body 14 · labels 12.5 · numbers 22–28.
     Space: 12 between cards/sections · 14 inside cards · 8 between related items.
     The attribute rules below override desktop spacing written inline in the pages. */
  body { font-size: 14px; line-height: 1.4; }
  .content [style*="margin-bottom:20px"], .content [style*="margin-bottom: 20px"],
  .content [style*="margin-bottom:24px"], .content [style*="margin-bottom: 24px"],
  .content [style*="margin-bottom:28px"], .content [style*="margin-bottom: 28px"],
  .content [style*="margin-bottom:32px"], .content [style*="margin-bottom: 32px"] { margin-bottom: 12px !important; }
  .content [style*="margin: 40px auto"], .content [style*="margin:40px auto"] { margin: 0 auto 12px !important; }
  .content .grid-2, .content .grid-3, .content .card { margin-bottom: 12px; }
  .content :is(.grid-2, .grid-3, .stats-grid) > .card { margin-bottom: 0; } /* the grid gap already spaces these */
  .content .card-body[style*="padding:20px"], .content .card-body[style*="padding: 20px"],
  .content .card-body[style*="padding:24px"], .content .card-body[style*="padding: 24px"],
  .content .card-body[style*="padding:12px 22px"], .content .card-body[style*="padding: 12px 22px"],
  .content .card[style*="padding:24px"], .content .card[style*="padding: 24px"],
  .content .card[style*="padding:16px 20px"], .content .card[style*="padding: 16px 20px"] { padding: 14px !important; }
  .content .card .card { box-shadow: none; } /* a card inside a card only needs its border */

  /* Flatter buttons: same 44px tap height, lighter shadow, no gap underneath */
  .btn { box-shadow: 0 2px 0 rgba(0,0,0,.16), 0 3px 8px rgba(0,0,0,.08); margin-bottom: 0; }
  .btn:active { transform: translateY(2px); box-shadow: 0 0 0 rgba(0,0,0,.16), 0 1px 3px rgba(0,0,0,.08); }

  /* Long helper text: one line + "More info" (see app.js) */
  .ph-clamp { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .ph-clamp.expanded { display: block; -webkit-line-clamp: unset; }
  .ph-more { display: inline-flex; align-items: center; min-height: 32px; padding: 0; border: none; background: none; color: var(--teal-dark); font: 700 12.5px var(--font); cursor: pointer; }
  [data-theme="dark"] .ph-more { color: var(--teal); }

  /* ---------- Larger touch targets ---------- */
  .btn { padding: 10px 14px; font-size: 14px; min-height: 44px; }
  .btn-sm { padding: 7px 10px; font-size: 12px; min-height: 40px; }
  .btn-icon { min-width: 44px; min-height: 44px; justify-content: center; }
  .back-btn { width: 44px; height: 44px; }
  .form-control { font-size: 16px; min-height: 44px; } /* 16px stops iOS from zooming into inputs */
  .content .an-controls { width: 100%; }
  .content .an-controls .form-control { height: 44px; font-size: 14px; flex: 1 1 140px; width: auto; min-width: 0; max-width: 100%; }
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }
  .tab-item { padding: 12px 16px; }
  .search-bar { flex: 1; min-width: 0; min-height: 44px; padding-top: 0; padding-bottom: 0; }
  .search-bar input { width: 100%; font-size: 16px; min-height: 42px; }
  .back-link { display: inline-flex; align-items: center; min-height: 44px; }
  .inv-scroll-btn { width: 44px !important; height: 40px !important; }
  body .inv-scroll-range { height: 32px; }
  body .ai-prompt-btn { min-height: 40px; }
  #togglePromptsBtn { min-height: 36px; padding: 0 10px !important; font-size: 13px !important; }

  /* ---------- Tables scroll sideways instead of squashing ---------- */
  .table-wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-sm); }
  table { width: 100%; min-width: 640px; table-layout: auto; }
  table.scan-batch-table { min-width: 0; } /* scanner delivery list fits the screen */
  .scan-batch-table th, .scan-batch-table td { white-space: normal !important; }
  th, td { padding: 10px 12px !important; font-size: 13px !important; white-space: nowrap !important; }
  .badge { padding: 3px 9px; font-size: 12px; }

  /* ---------- Reports (pages/report_hub.php) ----------
     On phones, Analytics has its own tile in the "More" sheet (owner's request, 2026-11-06),
     so this page shows only the General Reports panel (no General/Predictive switch, swipe or dots).
     Tablet and desktop still show both panels side by side. The panel's text wraps to fit the screen
     (the 640px table rule above would otherwise make it wider than the phone). */
  .rh-tabs, .rh-dots, .content .rh-slider > #rhPredictive { display: none !important; }
  .content .rh-slider { display: block !important; }
  .content .rh-slider > .rh-panel { height: auto !important; margin-bottom: 0; }
  .rh-panel .card-body { padding: 14px !important; }
  .rh-panel table { min-width: 0; }
  .rh-panel td { white-space: normal !important; vertical-align: top; }
  .rh-panel td:first-child[style*="nowrap"] { white-space: nowrap !important; } /* keep "Nov 05" on one line */

  /* General Reports: tables with 3 columns or fewer fit the screen (wider ones keep sideways scrolling) */
  .rp-table-narrow { min-width: 0; }
  .rp-table-narrow th, .rp-table-narrow td { white-space: normal !important; }
  .rp-table-narrow td:not(:first-child), .rp-table-narrow th:not(:first-child) { white-space: nowrap !important; }

  /* ---------- Modals ---------- */
  .modal-overlay { padding: 12px; align-items: center; }
  .modal { max-width: 100%; width: 100%; max-height: 92vh; border-radius: 16px; margin: 0; }
  .modal-body { padding: 16px; max-height: 65vh; overflow-y: auto; }
  /* A stock's QR label: big like a GCash "My QR" screen, easy to scan straight from the phone */
  #codeModalOverlay .modal-body { max-height: none; padding: 12px; }
  #codeModalQr .code-label-qr { width: min(82vw, 380px); height: min(82vw, 380px); }
  .modal-header { padding: 14px 16px; }
  .modal-footer { padding: 12px 16px; flex-wrap: wrap; }
  .modal-footer .btn, .modal-footer form { flex: 1; }
  .modal-footer .btn { justify-content: center; width: 100%; }

  .toast-container { left: 12px; right: 12px; bottom: calc(90px + env(safe-area-inset-bottom)); }
  .toast { min-width: 0; }

  .code-card { padding: 12px; gap: 8px; }

  /* ---------- Landing page ---------- */
  /* Landing page: headline and both buttons fit on the first screen; preview, then 2×2 features */
  .landing-nav-container { padding: 10px 14px; }
  .landing-nav-links { gap: 8px; }
  .landing-brand { font-size: 17px; letter-spacing: -.2px; }
  .landing-logo { gap: 8px; }
  .lp-theme-btn { width: 40px; height: 40px; font-size: 16px; }
  .lp-btn-nav { min-height: 40px; padding: 0 12px; } /* Sign in + Sign up side by side must fit at 360px */
  .lp-hero { padding: 28px 16px 36px; }
  .lp-hero-inner { grid-template-columns: 1fr; gap: 28px; }
  .lp-tag { font-size: 12px; margin-bottom: 12px; }
  .lp-title { font-size: 34px; margin-bottom: 12px; }
  .lp-lead { font-size: 15.5px; margin-bottom: 20px; }
  .lp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .lp-actions .lp-btn { padding: 0 12px; }
  .lp-hint { font-size: 12.5px; margin-top: 10px; }
  .lp-phone { width: 230px; transform: none; animation: none; border-width: 7px; border-radius: 32px; }
  /* Mural hero on phones: banner cropped to the mask, glass card overlapping its bottom edge */
  .lp-hero-mural { display: block; min-height: 0; padding: 0; overflow: visible; }
  .lp-mural { position: relative; inset: auto; display: block; height: 270px; overflow: hidden; }
  .lp-mural img { object-position: 80% 40%; animation: none; }
  .lp-hero-mural .lp-hero-inner { padding: 0 12px 20px; margin-top: -32px; }
  .lp-glass { max-width: none; padding: 20px 18px 18px; border-radius: 20px; background: rgba(255,255,255,.82); }
  [data-theme="dark"] .lp-glass { background: rgba(17,30,29,.85); }
  .lp-subtitle { font-size: 15px; margin-bottom: 6px; }
  .lp-glass-top { gap: 10px; margin-bottom: 8px; }
  .lp-card-logo { width: 72px; height: 72px; }
  .lp-hero-mural .lp-lead { font-size: 14.5px; margin-bottom: 16px; }
  .lp-feather-line { height: 5px; }
  .lp-phone-split { grid-template-columns: 1fr; gap: 20px; justify-items: center; }
  .lp-phone-text .lp-section-title { text-align: center; }
  .lp-phone-text p { font-size: 14px; text-align: center; }
  .lp-section { padding: 36px 14px; }
  .lp-section-title { font-size: 24px; margin-bottom: 16px; }
  .lp-features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .lp-feature { padding: 14px; border-radius: 16px; }
  .lp-feature:hover { transform: none; }
  .lp-feature-icon { width: 40px; height: 40px; border-radius: 12px; margin-bottom: 10px; }
  .lp-feature h3 { font-size: 14.5px; margin-bottom: 4px; }
  .lp-feature p { font-size: 12.5px; line-height: 1.45; }
  .lp-steps { grid-template-columns: 1fr; gap: 10px; }
  .lp-step { padding: 14px; border-radius: 14px; }
  .lp-step-num { width: 34px; height: 34px; }
  .lp-step h3 { font-size: 15px; }
  .lp-step p { font-size: 13.5px; }
  .lp-note { font-size: 13px; }
  .lp-trust { margin-top: 18px; padding: 14px; }
  .lp-trust p { font-size: 13px; }
  /* ---------- Landing footer (phones): one left-aligned column (owner's request, 2026-11-06) ----------
     1 Feature Overview · 2 Privacy Notice · 3 Terms of Use
     · 4 "BaganiStock© year • Bagani Community Center" with "All Rights Reserved" beside it
     (not bold, 50% opacity; style.css .footer-rights-inline). */
  .landing-footer { padding: 22px 16px calc(22px + env(safe-area-inset-bottom)); }
  .footer-container { align-items: flex-start; text-align: left; gap: 14px; }
  .footer-links { flex-direction: column; align-items: flex-start; gap: 12px; }
  .footer-links a { font-size: 14px; min-height: 24px; display: block; }
  .footer-links a[href="#features"] { order: -1; } /* Feature Overview first */
  .footer-brand { justify-content: flex-start; align-items: center; font-size: 13px; opacity: 1; max-width: 100%; }
  .footer-brand > span { min-width: 0; } /* the text wraps inside the screen instead of running off it */

  /* ---------- My Profile (phones): one column, full-width save button ---------- */
  .profile-card { margin: 0 auto 16px; }
  .profile-grid { grid-template-columns: 1fr; gap: 18px; }
  .profile-side { padding: 14px; }
  .profile-side #avatarPreviewWrap, .profile-side #avatarPreviewWrap img, .profile-side #avatarPlaceholder { width: 100px !important; height: 100px !important; }
  .profile-row { grid-template-columns: 1fr; gap: 0; }
  .profile-actions .btn { width: 100%; min-width: 0; }
}

/* Small phones */
@media (max-width: 480px) {
  .codes-grid { grid-template-columns: 1fr; }
  .tab-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
  .tab-item { white-space: nowrap; }
}