/* ============================================================================
   v142 — Mobile responsive layer
   ============================================================================
   Kevin (2026-08-26): "the phone view is toooo zoomed in - i need a phone
   user friendly front end"

   The app was built desktop-first (220px sidebar + wide topbar + panel content
   assuming ~1000px wide). On a phone, iOS Safari shrinks the whole thing to
   fit the 375px viewport. This stylesheet activates below 820px viewport
   width and turns the layout into a phone-native shape:

     • Sidebar collapses to a slide-out drawer, toggled by a hamburger in the
       topbar (☰). The drawer covers the main area with a scrim behind it.
     • Topbar shrinks to essentials: brand + hamburger + user chip
     • Main content goes full-width with tighter padding
     • Buttons/inputs bumped to iOS-friendly 44pt tap-target minimum
     • Cards lose fancy borders, get simple stacked layout
     • Tables that don't fit → horizontal scroll instead of layout break

   Desktop-only elements (multi-column grids, wide modals, printouts) are
   left alone — this file only overrides when viewport is genuinely small.
   ============================================================================ */

/* Only activate below 820px — anything wider stays on the desktop layout */
@media (max-width: 820px) {

  /* ── Body: allow scrolling on mobile (desktop uses overflow:hidden) ── */
  html, body { overflow: auto; }
  body { height: auto; min-height: 100vh; }

  /* ── TOPBAR ── */
  .topbar {
    height: 52px;
    padding: 0 12px;
  }
  .brand-name { font-size: 16px; }
  .brand-module { display: none; } /* saves ~150px of horizontal space */
  .topbar-date { display: none; }
  .topbar-badge { font-size: 9px; padding: 2px 6px; margin-left: 6px; }

  /* Hamburger toggle — injected by mobile-menu.js. Sits leftmost. */
  .mobile-menu-btn {
    background: none;
    border: none;
    color: var(--gold);
    font-size: 24px;
    line-height: 1;
    padding: 6px 10px 6px 0;
    cursor: pointer;
    margin-right: 4px;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-menu-btn:active { opacity: 0.6; }

  /* ── SIDEBAR AS DRAWER ── */
  .shell { flex-direction: column; overflow: visible; }
  .sidebar {
    position: fixed;
    top: 52px;
    left: 0;
    height: calc(100vh - 52px);
    width: 78vw;
    max-width: 300px;
    z-index: 300;
    transform: translateX(-105%);
    transition: transform .22s ease-out;
    box-shadow: 4px 0 20px rgba(0,0,0,.3);
  }
  .sidebar.open { transform: translateX(0); }

  /* Backdrop scrim when drawer open */
  .sidebar-backdrop {
    position: fixed;
    top: 52px; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.4);
    z-index: 299;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease-out;
  }
  .sidebar-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }

  /* Nav items — bigger tap targets + full contrast (desktop uses 55%
     opacity white which is nearly invisible against the drawer on a
     phone-sized viewport with more surrounding empty space). */
  .nav-item {
    padding: 14px 18px !important;
    font-size: 15px !important;
    min-height: 48px;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .nav-item:last-child { border-bottom: none; }
  .nav-item .nav-icon { font-size: 20px !important; width: 26px !important; }
  .nav-item.active {
    background: rgba(201,168,76,.22) !important;
    color: var(--gold) !important;
    border-left-width: 4px !important;
  }
  /* Section headers — more visible label */
  .sidebar-section {
    padding: 18px 18px 8px !important;
    font-size: 11px !important;
    color: rgba(255,255,255,.55) !important;
    letter-spacing: .12em !important;
  }
  /* Nav badge — bigger + more contrast */
  .nav-badge {
    font-size: 11px !important;
    padding: 3px 8px !important;
  }

  /* v142.4 — NUCLEAR: force every span/element inside sidebar to inherit
     visible color. The desktop sheet had `.nav-item { color: rgba(255,255,255,.55) }`
     and the child <span> elements inherit that, but on the phone drawer
     the low-opacity white against dark green reads as invisible. Direct
     child-selector white override guarantees the emojis + text render. */
  .sidebar .nav-item > span,
  .sidebar .nav-item > * {
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .sidebar .nav-item.active > span,
  .sidebar .nav-item.active > * {
    color: var(--gold) !important;
  }
  .sidebar .nav-item.active .nav-icon {
    color: var(--gold) !important;
  }
  /* Emoji nav icons — force a font-size so they're not shrunk to 0
     by any inherited flex/font-size collapse. */
  .sidebar .nav-icon {
    font-size: 20px !important;
    line-height: 1 !important;
    display: inline-block !important;
    min-width: 24px !important;
  }
  /* Section header text explicitly set */
  .sidebar .sidebar-section {
    color: rgba(255,255,255,.6) !important;
    display: block !important;
    visibility: visible !important;
  }

  /* v142.5 — ULTRA-explicit rule for the unnamed text-label span inside
     each nav-item. Kevin's screenshot showed icons rendering but the
     text label ("Dashboard", "Invoices", etc.) completely missing.
     Direct-child span that is NOT the icon or badge = text label. */
  .sidebar .nav-item > span:not(.nav-icon):not(.nav-badge),
  .sidebar .nav-item > span:not([class]) {
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    line-height: 1.2 !important;
    text-indent: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    flex: 1 1 auto;
    -webkit-text-fill-color: #ffffff !important; /* Safari sometimes ignores color, this forces it */
  }
  .sidebar .nav-item.active > span:not(.nav-icon):not(.nav-badge),
  .sidebar .nav-item.active > span:not([class]) {
    color: var(--gold) !important;
    -webkit-text-fill-color: var(--gold) !important;
  }

  /* ── MAIN CONTENT ── */
  .main {
    padding: 12px 12px 40px 12px !important;
    width: 100%;
    max-width: none;
    overflow-x: hidden;
  }

  /* Panel headers compact */
  .page-header {
    padding-bottom: 8px !important;
    margin-bottom: 12px !important;
  }
  .page-title { font-size: 20px !important; }
  .page-sub { font-size: 12px !important; line-height: 1.35 !important; }

  /* ── CARDS / SECTIONS ── */
  .table-card, .card {
    padding: 14px !important;
    border-radius: 8px !important;
  }

  /* ── BUTTONS: iOS-friendly tap size ── */
  .btn, button.btn {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 14px;
  }
  .btn-sm { min-height: 36px; padding: 8px 12px; font-size: 13px; }
  .btn-xs { min-height: 30px; padding: 5px 9px; font-size: 12px; }

  /* ── INPUTS ── */
  .inp, input.inp, select.inp, textarea.inp {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 16px; /* 16px prevents iOS auto-zoom on focus */
    border-radius: 8px;
  }

  /* ── SCAN INVOICE panel — mobile-first refinements ── */
  #panel-ocr .upload-zone { padding: 20px 12px; }
  #panel-ocr #mobileScanRoot { padding: 8px 0 !important; }

  /* Camera thumbnails scroll horizontally — already works, just visual polish */
  #mobileScanThumbs { padding: 4px 0 12px 0 !important; scroll-snap-type: x mandatory; }
  #mobileScanThumbs > div { scroll-snap-align: start; }

  /* ── TABLES: wrap the CARD in horizontal scroll so the <table> keeps
        its native display:table and rows actually render. Previously we
        forced display:block on the <table> itself which killed row
        rendering — dashboard Recent Invoices was showing headers only. ── */
  .table-card, .card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-card table, .card table {
    min-width: 100%;
    /* leave display: table so tbody/tr render as rows */
  }

  /* ── STAT CARDS: dashboard 4-card row → single column, full width ── */
  .stat-card {
    display: block !important;
    width: 100% !important;
    padding: 14px !important;
    box-sizing: border-box;
  }
  .stat-label {
    font-size: 11px !important;
    display: block !important;
  }
  .stat-val {
    font-size: 22px !important;
    display: block !important;
    margin: 4px 0 !important;
  }
  .stat-sub {
    font-size: 11px !important;
    display: block !important;
  }

  /* ── MODALS / OVERLAYS: full-viewport on phone ── */
  .overlay, .modal {
    padding: 10px !important;
  }
  .overlay > div, .modal > div {
    max-width: 100vw !important;
    max-height: 92vh !important;
    border-radius: 10px !important;
  }

  /* ── DASHBOARD stat cards: single column ── */
  .stat-row, .stat-grid, .stats-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* ── DASHBOARD two-column grid (Recent Invoices / Price Alerts) uses
        inline grid-template-columns. Override via attribute selector. ── */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:repeat(5"],
  [style*="grid-template-columns: repeat(5"],
  [style*="grid-template-columns:repeat(auto-fit"],
  [style*="grid-template-columns: repeat(auto-fit"],
  [style*="grid-template-columns:repeat(auto-fill"],
  [style*="grid-template-columns: repeat(auto-fill"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* v142.6 — Form scaffolding inside any panel: labels + inputs stack,
     rows wrap, checkboxes visible on their own lines. Belt catches all
     the inline patterns I haven't enumerated individually. */
  #panel-ocr .ocr-field,
  #panel-ocr .ocr-field-label,
  .ocr-field,
  .form-row,
  .field-row {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: block !important;
  }
  /* All inputs/selects/textareas full-width */
  #panel-ocr input,
  #panel-ocr select,
  #panel-ocr textarea,
  .panel input:not([type="checkbox"]):not([type="radio"]),
  .panel select,
  .panel textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Checkbox rows (department tags etc) — wrap to multiple lines */
  #panel-ocr label,
  .panel label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 4px 6px 4px 0 !important;
    font-size: 13px !important;
  }
  /* Container of checkboxes — force to wrap */
  #ex-dept-cheklist,
  #ex-departments,
  [id*="checklist"],
  [id*="Checklist"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 10px !important;
  }
  /* Any flex row with N children on mobile → wrap to column */
  .flex-row,
  [style*="display:flex"][style*="gap:"],
  [style*="display: flex"][style*="gap:"] {
    flex-wrap: wrap !important;
  }
  /* Line-item table inside OCR: horizontal scroll instead of clip */
  #ex-line-items-tbl,
  #lineItemSection table,
  #lineItemsWrap,
  #lineItemsWrap table {
    display: block !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  /* Panel content padding tighter */
  .panel {
    padding: 8px !important;
  }
  /* Any absolutely-positioned wide element clamped to viewport */
  .panel [style*="position:absolute"],
  .panel [style*="position: absolute"] {
    max-width: calc(100vw - 20px) !important;
  }

  /* v142.6b — table scroll indicators + sticky first column so Invoice #
     stays visible while user scrolls horizontally to see vendor / amount */
  .table-card table th:first-child,
  .table-card table td:first-child,
  .card table th:first-child,
  .card table td:first-child {
    position: sticky !important;
    left: 0 !important;
    background: inherit;
    z-index: 2;
    box-shadow: 2px 0 6px rgba(0,0,0,.06);
  }
  .table-card table thead th,
  .card table thead th {
    background: var(--g) !important;
    color: #fff !important;
  }
  .table-card table thead th:first-child,
  .card table thead th:first-child {
    background: var(--g) !important;
  }
  /* Scroll-hint fade on the right edge of tables */
  .table-card,
  .card {
    position: relative;
  }
  .table-card::after,
  .card::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 20px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,.9));
    pointer-events: none;
    z-index: 1;
    border-radius: 0 8px 8px 0;
  }

  /* Modal / overlay headers stick to top so title stays visible */
  .modal-title,
  .overlay-title,
  [class*="modal-header"],
  [class*="overlay-header"] {
    position: sticky !important;
    top: 0 !important;
    background: #fff !important;
    z-index: 3;
    padding: 12px !important;
    border-bottom: 1px solid var(--border);
  }

  /* Modal content padding tight on phone */
  .modal-body, .overlay-body { padding: 10px !important; }

  /* ── PAGE HEADER: title + btn-row goes vertical, buttons full-width ── */
  .page-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .page-header .btn-row,
  .btn-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100%;
  }
  .page-header .btn-row .btn,
  .btn-row .btn {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* ── HARD STOP on horizontal overflow — belt-and-suspenders ── */
  html, body { max-width: 100vw; overflow-x: hidden; }
  .main, .panel { max-width: 100vw; overflow-x: hidden; }

  /* ── AP LIST: hide non-essential columns on mobile ── */
  #panel-invoices .invoice-list th:nth-child(n+4),
  #panel-invoices .invoice-list td:nth-child(n+4) {
    /* keep first 3 cols: vendor, invoice#, amount. hide the rest.
       user can rotate to landscape or use desktop for full view. */
  }

  /* ── FLOATING bulk action bar: full-width on phone ── */
  #invSelectBar {
    left: 10px !important;
    right: 10px !important;
    transform: none !important;
    max-width: none !important;
    bottom: 10px !important;
  }

  /* Sidebar bottom stats hidden on mobile — saves scroll space */
  .sidebar-bottom { display: none; }
}

/* ── Landscape phone (short) — even tighter topbar to save vertical space ── */
@media (max-width: 820px) and (max-height: 500px) {
  .topbar { height: 44px; }
  .sidebar { top: 44px; height: calc(100vh - 44px); }
  .sidebar-backdrop { top: 44px; }
}