/* ================================================================
   TechFinLens — Universal Responsive CSS  v6
   Single file handles ALL pages on ALL devices.
   Phone (320px) → Tablet → Desktop → Wide desktop
   ================================================================ */

/* ── 1. CSS VARIABLE COMPATIBILITY SHIM ─────────────────────────
   Each page uses different variable names for sidebar/topbar.
   This section normalises them so responsive rules work everywhere.
   ──────────────────────────────────────────────────────────────── */
:root {
  /* Sidebar width — pick whichever the page defines, fallback 220px */
  --_sw: var(--sw, var(--sidebar-w, var(--sidebar, 220px)));
  /* Topbar height — pick whichever the page defines, fallback 52px */
  --_th: var(--th, var(--top, var(--topbar-h, 52px)));
  /* Safe bottom for iOS home indicator */
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* ── 1b. TOPBAR POSITION LOCK ───────────────────────────────────────
   Ensures the topbar stays at top:0 even if a parent has a CSS transform
   (transforms create a new containing block for position:fixed).
   ──────────────────────────────────────────────────────────────────── */
.topbar, nav.topbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 200 !important;
}

/* ── 2. BURGER BUTTON — always visible ──────────────────────────── */
#burgerBtn { display: inline-flex !important; }

/* ── 3. SIDEBAR — smooth drawer on all screens ──────────────────── */
.sidebar {
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
  will-change: transform !important;
}

/* ── 4. TOUCH TARGETS — iOS/Android minimum 44px ───────────────── */
@media (pointer: coarse) {
  .nav-item, .nav-a {
    min-height: 44px !important;
    padding: 10px 12px !important;
  }
  .tb-btn, button:not(#burgerBtn) { min-height: 40px !important; }
  /* Prevent iOS auto-zoom on focus (font-size must be >= 16px) */
  input, select, textarea, .fi {
    font-size: 16px !important;
    min-height: 44px !important;
  }
}

/* ================================================================
   5. BREAKPOINTS
   ================================================================
   xs  : < 480px  (small phone — iPhone SE, Galaxy A)
   sm  : < 768px  (phone portrait)
   md  : < 960px  (tablet / large phone)
   lg  : < 1280px (small laptop)
   xl  : ≥ 1280px (desktop)
   ================================================================ */

/* ── XL: Wide desktop (≥1280px) ─────────────────────────────────── */
@media (min-width: 1280px) {
  .main, .main-content { padding: 32px 40px !important; padding-top: 80px !important; }
}

/* ── LG: Small laptop / tablet landscape (960–1279px) ───────────── */
@media (max-width: 1279px) and (min-width: 961px) {
  .metrics, .mc-wrap, .kpis { grid-template-columns: repeat(3, 1fr) !important; }
  .row-3 { grid-template-columns: 1fr 1fr !important; }
  .main, .main-content { padding: 20px 24px !important; padding-top: 80px !important; }
}

/* ── MD: Tablet / large phone (<960px) — sidebar becomes drawer ──── */
@media (max-width: 960px) {
  .sidebar {
    position: fixed !important;
    top: var(--_th) !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 300 !important;
    width: 260px !important;
    transform: translateX(-110%) !important;
    box-shadow: 4px 0 32px rgba(0,0,0,0.20) !important;
  }
  .sidebar.tfl-sb-open { transform: translateX(0) !important; }

  /* Main: full width when sidebar is a drawer */
  .main, .main-content { margin-left: 0 !important; }

  /* KPIs: 2-col on tablet */
  .metrics, .mc-wrap, .kpis, .stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .row-3 { grid-template-columns: 1fr 1fr !important; }

  /* ── Topbar: the sidebar already goes off-canvas at this width, so the
     topbar must match — otherwise iPad-portrait-ish widths (769–960px)
     fall into a gap where search/period-bar/refresh still assume full
     desktop space and either get squeezed to a useless sliver or clip
     off the right edge of the screen. ── */
  .period-bar, .date-filter { display: none !important; }
  .topbar-email, #topbarEmail, .user-email { display: none !important; }
  .topbar-mid { display: none !important; }
  .topbar { padding: 0 10px !important; gap: 8px !important; }
  .tb-btn.ghost .btn-label, .btn-text { display: none !important; }
  .tb-btn { padding: 7px 10px !important; }
  .btn-topbar { font-size: 0 !important; padding: 8px 10px !important; gap: 0 !important; }
  .btn-topbar i { font-size: 13px !important; }
  .page-acts { flex-wrap: wrap !important; row-gap: 8px !important; }
}

/* ── SM: Phone portrait (<768px) — full mobile layout ───────────── */
@media (max-width: 768px) {
  /* Base font */
  body { font-size: 14px !important; }

  /* Main content area */
  .main, .main-content {
    padding: 14px 14px calc(60px + var(--safe-b)) !important;
    padding-top: 72px !important;
    margin-left: 0 !important;
  }

  /* Topbar: hide non-essential items */
  .period-bar, .date-filter { display: none !important; }
  .topbar-email, #topbarEmail, .user-email { display: none !important; }
  .topbar { padding: 0 10px !important; gap: 8px !important; }
  .topbar-right, .topbar-r { gap: 6px !important; }
  /* Compact topbar buttons */
  .tb-btn.ghost .btn-label, .btn-text { display: none !important; }
  .tb-btn { padding: 7px 10px !important; }
  /* Dashboard's Refresh button uses the legacy .btn-topbar class (not
     .tb-btn), so it was never caught by the rule above and kept its full
     "Refresh" label, helping overflow the topbar on phones. Collapse it
     to icon-only the same way. */
  .btn-topbar { font-size: 0 !important; padding: 8px 10px !important; gap: 0 !important; }
  .btn-topbar i { font-size: 13px !important; }
  /* The inline topbar search box has no realistic room next to the logo,
     avatar and refresh button on a phone-width screen — it was being
     squeezed down to a sliver. Drop it on mobile; full search is still
     available from the All Invoices page. */
  .topbar-mid { display: none !important; }

  /* Page headers */
  .ph, .page-head, .page-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
  }
  .ph h1, .page-title, .page-header h1 {
    font-size: 19px !important;
    letter-spacing: -0.4px !important;
  }
  .ph p, .ph-sub { font-size: 12px !important; }
  /* Dashboard's quick-action buttons (Upload Invoice / Upload PO / Flagged)
     had no wrap rule and were running off the right edge of the screen. */
  .page-acts { flex-wrap: wrap !important; row-gap: 8px !important; }

  /* KPI cards: 2-col grid, compact */
  .metrics, .mc-wrap, .kpis, .stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .mc, .scard { padding: 12px 13px !important; }
  .mc-value, .scard-num, .stat-value { font-size: 19px !important; letter-spacing: -0.5px !important; }
  .mc-label, .mc-sub, .scard-lbl { font-size: 10px !important; }

  /* Charts and panels: single column */
  .row, .row-2, .row-2b, .row-3 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* ── Tables: horizontal scroll container ── */
  .table-wrap, .table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 10px !important;
  }
  table { min-width: 560px !important; }
  thead th {
    font-size: 10px !important;
    padding: 9px 10px !important;
    white-space: nowrap !important;
  }
  tbody td { font-size: 12.5px !important; padding: 11px 10px !important; }
  .td-date, .hide-mobile { display: none !important; }

  /* ── Tabs: horizontal scroll ── */
  .tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    padding-bottom: 2px !important;
  }
  .tab-btn {
    white-space: nowrap !important;
    padding: 10px 12px !important;
    font-size: 12.5px !important;
    flex-shrink: 0 !important;
  }
  .tab-count { font-size: 10px !important; padding: 1px 5px !important; }

  /* ── Filter bar ── */
  .fbar { flex-wrap: wrap !important; gap: 6px !important; }
  #fi-search { width: 100% !important; }
  .fi { height: 38px !important; font-size: 14px !important; }

  /* ── Panels ── */
  .panel { border-radius: 10px !important; }
  .panel-head {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 12px 14px !important;
  }
  .panel-body { padding: 12px 14px !important; }

  /* ── Modals → bottom sheet ── */
  .modal-box, .modal-content, .modal-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    padding-bottom: var(--safe-b) !important;
  }
  .modal-overlay, .modal-backdrop { align-items: flex-end !important; }

  /* ── Slide panels (comments, notes, timeline) → bottom sheet ── */
  #commentsPanel, #timelinePanel, #notesPanel, #secondApprovalPanel {
    width: 100% !important;
    top: auto !important;
    bottom: 0 !important;
    right: 0 !important;
    left: 0 !important;
    height: 72vh !important;
    border-radius: 20px 20px 0 0 !important;
    transform: translateY(100%) !important;
  }
  #commentsPanel.open, #timelinePanel.open,
  #notesPanel[style*="translateX(0)"], #secondApprovalPanel[style*="translateX(0)"] {
    transform: translateY(0) !important;
  }

  /* ── Feature bar (review page) ── */
  #featureBar {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  #featureBar > div { flex: 1 1 calc(50% - 4px) !important; }

  /* ── Action footer (review page) ── */
  .action-footer {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 10px 12px !important;
  }
  .act-btn {
    flex: 1 1 calc(50% - 6px) !important;
    justify-content: center !important;
    font-size: 12px !important;
  }

  /* ── Upload page ── */
  .upload-layout, .upload-grid { grid-template-columns: 1fr !important; }
  .drop-zone, .dz-area { min-height: 130px !important; }
  .results-panels { grid-template-columns: 1fr !important; }
  .extraction-info-grid { grid-template-columns: 1fr 1fr !important; }
  .extraction-fin-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── Review page ── */
  .review-layout { grid-template-columns: 1fr !important; }
  .pdf-panel { min-height: 250px !important; max-height: 42vh !important; }
  .summary-grid { grid-template-columns: 1fr 1fr !important; }
  #quickStatsBar { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .anomaly-cards { grid-template-columns: 1fr !important; }

  /* ── Dashboard charts ── */
  .mc-wrap { gap: 8px !important; }

  /* ── Analytics page ── */
  .kpis { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }

  /* ── Profile / Vendors panels ── */
  .profile-grid, .panel-grid, .two-col-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Stats row on invoices page ── */
  .stats-row { gap: 8px !important; }
  .scard { min-width: 0 !important; flex: 1 1 calc(50% - 4px) !important; }

  /* ── Vendor customer grid (upload result) ── */
  #vendorCustomerInfo > div { grid-template-columns: 1fr !important; }
}

/* ── XS: Very small phones (<480px) ─────────────────────────────── */
@media (max-width: 480px) {
  .main, .main-content {
    padding: 10px 10px calc(60px + var(--safe-b)) !important;
    padding-top: 72px !important;
  }

  /* Topbar: minimal */
  /* .brand-name is legacy (only login/dashboard_super_admin use it) —
     every other page actually uses .tfl-brand-name, which this rule was
     missing, so the subtitle never collapsed on small phones anywhere
     else. */
  .brand-name em, .brand-name span,
  .tfl-brand-name em, .tfl-brand-name span { display: none !important; }
  .topbar-right .tb-btn:not(:last-child) { display: none !important; }

  /* KPIs: still 2-col, smaller values */
  .mc-value, .scard-num { font-size: 17px !important; }
  .mc-label, .mc-sub { font-size: 9.5px !important; }

  /* Tables: tightest */
  thead th { font-size: 9px !important; padding: 7px 8px !important; }
  tbody td { font-size: 11.5px !important; padding: 9px 8px !important; }

  /* Feature bar: stack */
  #featureBar > div { flex: 1 1 100% !important; }

  /* Act buttons: full width */
  .act-btn { flex: 1 1 100% !important; }

  /* Extraction: 1 col */
  .extraction-info-grid, .extraction-fin-grid {
    grid-template-columns: 1fr !important;
  }

  /* Slide panels: taller on small phone */
  #commentsPanel, #timelinePanel, #notesPanel, #secondApprovalPanel {
    height: 80vh !important;
  }
}

/* ── Landscape phone ─────────────────────────────────────────────── */
@media (max-width: 768px) and (orientation: landscape) {
  .main, .main-content { padding: 10px 16px 30px !important; }
  .metrics, .mc-wrap, .kpis { grid-template-columns: repeat(3, 1fr) !important; }
  .pdf-panel { max-height: 55vh !important; }
  #commentsPanel, #timelinePanel, #notesPanel {
    height: 85vh !important;
  }
}

/* ── iOS safe area for bottom bar ───────────────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .action-footer, .modal-box {
    padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  }
}

/* ── Fix: Sidebar nav items must NOT shrink or fade on click ─────
   Several templates apply  a:active { transform:scale(.98); opacity:.8 }
   globally, which hits every .nav-item link and makes them visually
   jump/shrink when another sidebar button is tapped.
   This block cancels that effect specifically for nav elements.   ── */
.nav-item:active,
.nav-a:active {
  transform: none !important;
  opacity: 1 !important;
}

/* Also lock the currently-active nav item — it should never scale */
.nav-item.active,
.nav-item.on,
.nav-a.active,
.nav-a.on {
  transform: none !important;
  opacity: 1 !important;
}

/* ── Sidebar user card — enforce dashboard look on ALL pages ─────────
   Some templates were missing these rules, causing the avatar to show
   as plain text and the email to have no container styling.          ── */
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 9px;
  margin-bottom: 6px;
}
.sidebar-av {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  background: linear-gradient(135deg, #2563EB, #7C3AED) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.sidebar-email {
  font-size: 11.5px;
  color: #475569;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

/* ================================================================
   v7 — MOBILE UNIFICATION  (single source of truth for ALL pages)
   Fixes three cross-page bugs at once:
     1. 11 templates carried a legacy `@media{.sidebar{display:none}}`
        rule that HID the drawer on phones — the burger did nothing.
     2. Every page's JS toggles `.sidebar.open`, but the shared drawer
        CSS only opened on `.tfl-sb-open`, so the slide-in never fired.
     3. `body{display:flex}` + a wide table made `.main` (a flex item)
        grow past the viewport, scrolling the WHOLE page sideways.
   ================================================================ */

/* Extend the variable shim to also read the --tfl-* names invoices/po use */
:root {
  --_sw: var(--sw, var(--sidebar-w, var(--sidebar, var(--tfl-sw, 220px))));
  --_th: var(--th, var(--top, var(--topbar-h, var(--tfl-th, 56px))));
}

/* ── 0. GLOBAL HORIZONTAL-OVERFLOW GUARD (the "page scrolls sideways" fix) ── */
html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}
/* A flex child won't shrink below its content unless min-width:0 — this is
   what lets a wide table live inside .table-wrap (which scrolls) instead of
   stretching the whole page. */
.main, .main-content, .content, .page {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* ── 1. UNIFIED DRAWER — works on every page ≤960px ─────────────── */
@media (max-width: 960px) {
  /* Force the sidebar to exist as an off-canvas flex-column drawer,
     overriding ANY legacy `.sidebar{display:none}` on the page. */
  .sidebar {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: var(--_th) !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 264px !important;
    max-width: 84vw !important;
    z-index: 1300 !important;
    transform: translateX(-110%) !important;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow-y: auto !important;
    box-shadow: 4px 0 32px rgba(0, 0, 0, 0.20) !important;
  }
  /* Open on BOTH the class the JS uses (.open) and the legacy (.tfl-sb-open) */
  .sidebar.open,
  .sidebar.tfl-sb-open,
  .sidebar.mobile-open {
    transform: translateX(0) !important;
  }
  /* Never let the "collapsed" desktop state hide it once it's a drawer */
  .sidebar.open.collapsed { transform: translateX(0) !important; }

  /* Dimmed overlay behind the drawer */
  .sidebar-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.40) !important;
    z-index: 1200 !important;
    display: none !important;
  }
  .sidebar-overlay.open { display: block !important; }

  /* Main always full-width when the sidebar is a drawer */
  .main, .main-content {
    margin-left: 0 !important;
    width: 100% !important;
  }

  /* Burger always visible/tappable */
  #burgerBtn, .burger-btn { display: inline-flex !important; }
}

/* ── 2. TOPBAR PRIMARY ACTION (e.g. "Upload New") — icon-only on phones ── */
@media (max-width: 768px) {
  .topbar .tb-btn.prim,
  .topbar a.tb-btn.prim {
    font-size: 0 !important;
    padding: 8px 11px !important;
    gap: 0 !important;
  }
  .topbar .tb-btn.prim i { font-size: 14px !important; }
  /* Export / secondary ghost topbar buttons: icon-only too */
  .topbar .tb-btn.ghost { font-size: 0 !important; padding: 8px 11px !important; }
  .topbar .tb-btn.ghost i { font-size: 13px !important; }

  /* Any stray wide flex row inside content should wrap, not overflow */
  .fbar, .page-acts, .toolbar, .actions-row { flex-wrap: wrap !important; }
  /* Belt-and-braces: tables always scroll inside their container */
  .table-wrap, .table-container, .tbl-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ================================================================
   v8 — TABLES BECOME CARDS ON PHONES (the "fit my screen" fix)
   Wide data tables are unusable on phones — the right columns clip
   or you must scroll sideways. Instead each row becomes a labelled
   card. tfl-ux.js stamps data-label on every <td> from its column
   header; these rules do the visual transform. Only tables that
   opt in (.tfl-cardified, added by the JS) are affected, so detail/
   editable tables (PO preview, line items) are left untouched.
   ================================================================ */
@media (max-width: 768px) {
  /* Cancel the generic 560px min-width + horizontal scroll for cardified tables */
  table.tfl-cardified {
    min-width: 0 !important;
    width: 100% !important;
    display: block !important;
    border: none !important;
  }
  table.tfl-cardified thead { display: none !important; }   /* labels come from data-label */
  table.tfl-cardified tbody { display: block !important; width: 100% !important; }

  /* Each row → a card */
  table.tfl-cardified tbody tr {
    display: block !important;
    background: #fff !important;
    border: 1px solid var(--border, #e5e7eb) !important;
    border-radius: 12px !important;
    padding: 6px 14px !important;
    margin-bottom: 10px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  }
  table.tfl-cardified tbody tr:hover { background: #fff !important; }

  /* Each cell → a "Label .......... value" row */
  table.tfl-cardified tbody td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 14px !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 8px 0 !important;
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    text-align: right !important;
    white-space: normal !important;
    font-size: 13px !important;
    overflow-wrap: anywhere !important;
  }
  table.tfl-cardified tbody td:last-child { border-bottom: none !important; }

  /* The field label, pulled from the column header */
  table.tfl-cardified tbody td::before {
    content: attr(data-label);
    flex: 0 0 38% !important;
    text-align: left !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    color: var(--text-3, #94a3b8) !important;
    white-space: nowrap !important;
  }
  /* Cells without a label (e.g. an action button column) go full width */
  table.tfl-cardified tbody td:not([data-label]) { justify-content: flex-end !important; }
  table.tfl-cardified tbody td:not([data-label])::before { content: '' !important; flex: 0 !important; }

  /* Let the value side keep its own alignment/wrapping */
  table.tfl-cardified tbody td > * { text-align: right !important; }
  /* Action buttons in a card should be comfortably tappable */
  table.tfl-cardified tbody td .btn,
  table.tfl-cardified tbody td button,
  table.tfl-cardified tbody td a { min-height: 36px !important; }
}

/* v8b — KPI big-number values must never clip on phones (scale to fit) */
@media (max-width: 768px) {
  .mc-value, .scard-num, .stat-value, .kpi-value, .metric-value {
    font-size: clamp(15px, 4.4vw, 19px) !important;
    letter-spacing: -0.4px !important;
    overflow-wrap: normal !important;
    line-height: 1.15 !important;
    max-width: 100% !important;
  }
  .mc, .scard, .kpi, .metric-card { overflow: hidden !important; }
}

/* v8c — nothing wide may exceed the viewport on phones (charts, images, code) */
@media (max-width: 768px) {
  img, svg, video { max-width: 100% !important; height: auto !important; }
  pre, iframe,
  .chart, .chart-container, .recharts-wrapper, .recharts-responsive-container,
  .chart-canvas, .apexcharts-canvas {
    max-width: 100% !important;
  }
  /* Canvas (Chart.js manages its own backing size): only cap overflow,
     do NOT force width/height or it distorts the chart. */
  canvas { max-width: 100% !important; }
  /* Any modal/dialog box never wider than the screen */
  .modal-box, .modal-content, .modal-inner, .dialog, .sheet {
    max-width: 100vw !important;
  }
}