/* ═══════════════════════════════════════════════════════════════
   FIXEFY DEMO — AGENTIC-FIRST MOBILE UX
   All rules scoped to ≤768px / ≤480px.
   Desktop (>768px) is unchanged — zero existing files modified.
   ═══════════════════════════════════════════════════════════════ */

/* Bottom nav hidden by default; shown only via .mob-visible on ≤768px */
#mobile-nav-bar { display: none; }

@media (max-width: 768px) {

/* ────────────────────────────────────────────────────────────────
   1.  LAYOUT FOUNDATION — break the desktop viewport-lock
   ──────────────────────────────────────────────────────────────── */

  html { height: auto !important; }
  body {
    height: auto !important;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    /* Prevent rubber-band bounce revealing grey behind the nav */
    background: var(--fx-page-bg);
  }
  #app { overflow: visible !important; height: auto !important; flex: none !important; }
  .app-shell {
    grid-template-columns: 1fr;
    overflow: visible !important;
    height: auto !important;
    grid-template-rows: auto !important;
  }
  .shell-main { overflow: visible !important; height: auto !important; }

  /* Sidebar: hidden on mobile (replaced by bottom nav) */
  #sidebar-root { display: none !important; }

  /* Content: natural height, bottom padding clears the fixed nav */
  #content-root {
    overflow: visible !important;
    height: auto !important;
    flex: none !important;
    padding: 0 0 88px !important;
  }
  /* Home was viewport-locked on desktop — unlock */
  #content-root.content-home {
    overflow: visible !important;
    height: auto !important;
    display: block !important;
    flex: none !important;
    padding: 0 0 88px !important;
  }
  /* Override 900px rule that caps hmc-left to 60vh */
  .hmc-left { max-height: none !important; overflow-y: visible !important; }

/* ────────────────────────────────────────────────────────────────
   2.  HEADER — compact & sticky
   ──────────────────────────────────────────────────────────────── */

  .app-header {
    position: sticky;
    top: 0;
    z-index: 200;
    height: 52px;
    min-height: 52px;
    padding: 0 16px;
    box-shadow: 0 1px 0 var(--fx-divider);
    background: var(--fx-white);
  }
  /* Show only the deepest crumb (current page name) */
  .header-breadcrumb a,
  .header-breadcrumb .crumb-sep { display: none; }
  .header-breadcrumb .current   { display: inline; font-size: 16px; font-weight: 600; }

/* ────────────────────────────────────────────────────────────────
   3.  AGENTIC BOTTOM NAVIGATION
   ──────────────────────────────────────────────────────────────── */

  #mobile-nav-bar.mob-visible {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 56px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--fx-white);
    border-top: 1px solid var(--fx-divider);
    align-items: flex-start;
    z-index: 500;
    box-shadow: 0 -1px 0 rgba(0,0,0,.05), 0 -6px 24px rgba(15,30,38,.08);
  }

  .mob-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    color: var(--fx-greyscale-400);
    font-size: 10px;
    font-family: var(--fx-font);
    font-weight: 500;
    letter-spacing: 0.2px;
    padding: 8px 4px 6px;
    min-height: 56px;
    transition: color .15s;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-nav-item img {
    width: 22px; height: 22px;
    filter: brightness(0) opacity(0.38);
    transition: filter .15s;
    display: block;
  }
  .mob-nav-item.active { color: var(--fx-primary-500); }
  .mob-nav-item.active img { filter: none; opacity: 1; }
  .mob-nav-item.active span:last-child { font-weight: 600; }

  /* ✦ Ask — the agentic-first centrepiece */
  .mob-nav-ask {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0 4px 6px;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: var(--fx-font);
    -webkit-tap-highlight-color: transparent;
    min-height: 56px;
  }
  .mob-nav-ask-btn {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #568793 0%, #2F4F57 100%);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 20px rgba(86,135,147,.45), 0 0 0 4px #fff;
    transform: translateY(-14px);
    transition: transform .15s, box-shadow .15s;
    flex-shrink: 0;
  }
  .mob-nav-ask-btn:active {
    transform: translateY(-11px) scale(.93);
    box-shadow: 0 2px 10px rgba(86,135,147,.28), 0 0 0 4px #fff;
  }
  .mob-nav-ask-star { font-size: 22px; color: #fff; line-height: 1; font-style: normal; display: block; }
  .mob-nav-ask-label {
    font-size: 10px; color: var(--fx-primary-500);
    font-weight: 600; letter-spacing: 0.2px;
    margin-top: 1px; font-family: var(--fx-font);
  }

/* ────────────────────────────────────────────────────────────────
   4.  TOASTS — appear at bottom above the nav bar
   ──────────────────────────────────────────────────────────────── */

  .fx-toast {
    left: 12px !important;
    right: 12px !important;
    top: auto !important;
    bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    max-width: none !important;
    min-width: 0 !important;
    border-radius: 12px !important;
    font-size: 13px;
    transform: translateY(12px) !important;
    opacity: 0;
    transition: transform .3s cubic-bezier(.2,.7,.2,1), opacity .22s ease !important;
  }
  .fx-toast.show { transform: translateY(0) !important; opacity: 1; }
  /* Stack additional toasts higher up */
  .fx-toast:nth-of-type(2) { bottom: calc(124px + env(safe-area-inset-bottom, 0px)) !important; }
  .fx-toast:nth-of-type(3) { bottom: calc(180px + env(safe-area-inset-bottom, 0px)) !important; }

/* ────────────────────────────────────────────────────────────────
   5.  HOME / DASHBOARD
   ──────────────────────────────────────────────────────────────── */

  .hmc-float-ask { display: none !important; }

  /* Hero: taller, more visual weight */
  .hmc-hero {
    height: auto !important;
    min-height: 180px !important;
    padding: 24px 20px !important;
    gap: 16px !important;
  }
  .hmc-hero-left { width: 100%; gap: 12px; }
  .hmc-hero-greeting { font-size: 26px !important; line-height: 34px !important; }
  .hmc-hero-sub      { font-size: 13px !important; opacity: 0.75; }
  /* KPIs and right panel already hidden by 900px rule */

  /* Home decision columns: single stack */
  .hmc-grid { flex-direction: column; height: auto; overflow: visible; }
  .hmc-left, .hmc-center, .hmc-right {
    width: 100%; min-width: 0;
    max-height: none !important;
    overflow: visible !important;
    border-right: none;
  }
  .hmc-left { border-bottom: 1px solid var(--fx-divider); padding-bottom: 8px; }

  /* Decision cards: full-width, 2×2 action buttons */
  .hmc-card { padding: 14px 14px 12px; }
  .hmc-card-actions-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 10px;
  }
  .hmc-act-approve, .hmc-act-send,
  .hmc-act-dispute, .hmc-act-decline { width: 100%; justify-content: center; }

  /* Briefing card */
  .fx-briefing { border-radius: 10px !important; }
  .fx-briefing-body { grid-template-columns: 1fr !important; }
  .fx-briefing-cta-col {
    border-left: none !important;
    border-top: 1px solid rgba(255,255,255,.1);
    padding: 12px 0 0 !important;
  }
  .fx-briefing-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  /* Briefing header: ✦ Fixenator on its own line */
  .fx-briefing-cron-time { display: none !important; }
  .fx-briefing-header { align-items: flex-start; gap: 6px; }
  .fx-briefing-header-left {
    flex: 1; flex-direction: column; gap: 4px; align-items: flex-start;
  }
  .fx-briefing-title { font-size: 13px !important; line-height: 1.45 !important; opacity: 0.85; }
  .fx-briefing-close { flex-shrink: 0; margin-top: 2px; }

  /* KPI grid: 2 columns */
  .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; align-items: stretch; }
  .kpi-card { min-height: 80px; }
  /* Scale down very large KPI values so they don't overflow */
  .kpi-value {
    font-size: clamp(14px, 4vw, 18px) !important;
    word-break: break-all;
  }

  /* Fixenator Impact counter: override grid → flex column */
  .kpi-fixenator { padding: 16px 20px !important; border-radius: 10px !important; }
  .kpi-fx-head { margin-bottom: 12px; }
  .kpi-fx-metrics {
    display: flex !important;           /* override display:grid */
    flex-direction: column !important;
    gap: 12px !important;
    align-items: flex-start !important;
  }
  .kpi-fx-divider { display: none !important; }
  .kpi-fx-metric {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 10px !important;
    padding: 0 !important;
  }
  .kpi-fx-val { font-size: 20px !important; }
  .kpi-fx-label { font-size: 11px !important; text-transform: uppercase; letter-spacing: 0.3px; }
  .kpi-fx-cta { margin-top: 4px; padding-left: 0 !important; }

  /* Spotlight KPI grid */
  .kpi-grid-3 { grid-template-columns: 1fr !important; }

/* ────────────────────────────────────────────────────────────────
   6.  AUDITFLOW — horizontal snap kanban
   ──────────────────────────────────────────────────────────────── */

  /* Column selector chips (injected by mobile-nav.js) */
  #audit-col-chips {
    display: flex;
    overflow-x: auto; gap: 8px;
    padding: 10px 16px 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-bottom: 1px solid var(--fx-divider);
    background: var(--fx-page-bg);
    position: sticky;
    top: 52px; /* below the sticky header */
    z-index: 10;
  }
  #audit-col-chips::-webkit-scrollbar { display: none; }
  .audit-col-chip {
    flex-shrink: 0;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 12px; font-weight: 500;
    font-family: var(--fx-font);
    border: 1px solid var(--fx-greyscale-300);
    background: var(--fx-white);
    cursor: pointer; color: var(--fx-body);
    white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s;
    -webkit-tap-highlight-color: transparent;
  }
  .audit-col-chip.active { background: var(--fx-primary-500); border-color: var(--fx-primary-500); color: #fff; }

  /* Board: horizontal snap-scroll */
  .audit-board {
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
    padding: 0 16px 24px !important;
    overflow-x: scroll !important;
    overflow-y: visible !important;
  }
  .audit-board::-webkit-scrollbar { display: none !important; }
  .audit-columns { padding: 16px 0 0; gap: 16px; }
  .audit-column,
  .audit-column-fxn {
    width: 88vw !important;
    min-width: 88vw !important;
    scroll-snap-align: start;
  }

  /* Aggregation strip */
  .agg-strip {
    overflow-x: auto !important; flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch; scrollbar-width: none !important;
    padding: 0 16px !important; margin-top: 12px; width: auto !important;
    position: static !important;
  }
  .agg-strip::-webkit-scrollbar { display: none !important; }
  .agg-cell { padding: 6px 14px !important; }
  .agg-cell .agg-value { font-size: 17px !important; line-height: 24px !important; }
  .agg-cell .agg-label { font-size: 10px !important; }

  /* Filter bar */
  .audit-filter-row,
  .audit-top-controls { flex-wrap: wrap; gap: 8px; padding: 10px 16px; }
  .audit-search-wrap { width: 100% !important; max-width: 100% !important; }
  .audit-filter-chips { flex-wrap: wrap; gap: 6px; }

/* ────────────────────────────────────────────────────────────────
   7.  INVOICE DETAIL
   ──────────────────────────────────────────────────────────────── */

  .inv-info-charges, .inv-info-reco, .inv-info-approved {
    min-width: 0 !important; width: 100%;
  }
  .inv-info-cards { gap: 10px; }
  .inv-title-left { flex-wrap: wrap; gap: 6px; }

  /* Invoice lines table: enable horizontal scroll */
  .inv-lines-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px;              /* bleed to screen edges */
    padding: 0 16px;
    width: calc(100% + 32px);
  }
  .inv-lines-table { min-width: 520px; font-size: 12px; }
  .inv-lines-table thead th,
  .inv-lines-table tbody td { padding: 8px 8px; white-space: nowrap; }

  /* Generic data tables in cards */
  .fx-card { overflow-x: auto !important; }
  .data-table { font-size: 12px; width: 100%; }
  .data-table th, .data-table td { padding: 8px 8px; white-space: nowrap; }

/* ────────────────────────────────────────────────────────────────
   8.  CONTRACTS
   ──────────────────────────────────────────────────────────────── */

  .contracts-grid { grid-template-columns: 1fr !important; gap: 16px; }
  .contract-tile  { max-height: none !important; } /* let cards expand fully */

  .ct-dashboard { flex-direction: column; min-height: unset; gap: 16px; }
  .ct-dashboard-map { width: 100% !important; flex-shrink: unset; }
  .ct-dashboard-right { width: 100%; }
  .ct-dash-metrics { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }

  /* Tab bar: scrollable */
  .ct-tabs-bar {
    overflow-x: auto; flex-wrap: nowrap;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    padding: 0 16px; background: var(--fx-white);
  }
  .ct-tabs-bar::-webkit-scrollbar { display: none; }
  .ct-tab { flex-shrink: 0; }

  /* Locations + BU grids: 1 col */
  .ct-locations-grid { grid-template-columns: 1fr !important; }
  .ct-bu-grid        { grid-template-columns: 1fr !important; }

  /* Contract map canvas: full width */
  .ct-detail-map-canvas { width: 100% !important; height: auto !important; }

/* ────────────────────────────────────────────────────────────────
   9.  REPORTS
   ──────────────────────────────────────────────────────────────── */

  .rd-list-header { flex-wrap: wrap; gap: 8px; }
  /* Dashboard card thumbnails: slightly taller */
  .rd-thumb-cell { min-height: 56px; }
  /* KPI cards in report detail */
  .rd-col-4, .rd-col-3 { grid-column: span 2 !important; }
  .rd-kpi-card { min-width: 0; }

/* ────────────────────────────────────────────────────────────────
   10. WORKSPACE PICKER
   ──────────────────────────────────────────────────────────────── */

  .ws-picker-hero { padding-top: 48px !important; padding-bottom: 32px !important; }
  .ws-picker-logo { margin-bottom: 8px; }
  .ws-picker-logo img { width: 44px !important; height: 50px !important; }
  .ws-picker-title { font-size: 26px !important; }
  .ws-picker-body { padding: 16px !important; }
  .ws-picker-search-wrap { border-radius: 12px !important; }
  .ws-card-modern { border-radius: 12px !important; }

/* ────────────────────────────────────────────────────────────────
   11. MODALS → BOTTOM SHEETS
   ──────────────────────────────────────────────────────────────── */

  .modal-card {
    position: fixed !important;
    inset: auto 0 0 !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    max-width: 100% !important;
    width: 100% !important;
    animation: mobSheetUp .28s cubic-bezier(.32,.72,0,1) !important;
  }
  @keyframes mobSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

  /* Header popovers → bottom sheets */
  .hdr-popover.open {
    position: fixed !important;
    top: auto !important;
    left: 0 !important; right: 0 !important;
    bottom: 60px !important;
    border-radius: 20px 20px 0 0 !important;
    max-width: 100% !important; width: 100% !important;
    max-height: 70vh; overflow-y: auto;
    box-shadow: 0 -4px 32px rgba(15,30,38,.14);
  }
  .hdr-popover.open .hdr-popover-arrow { display: none !important; }

/* ────────────────────────────────────────────────────────────────
   12. ASK FIXENATOR FULL-SCREEN CHAT
   ──────────────────────────────────────────────────────────────── */

  .fxaf-sidebar { display: none !important; }

  .fxaf-header { padding: 0 16px !important; height: 56px; }

  .fxaf-welcome { padding: 28px 20px 20px !important; }
  .fxaf-welcome-title { font-size: 26px !important; line-height: 1.2 !important; }
  .fxaf-welcome-sub   { font-size: 14px !important; margin-bottom: 16px; }

  /* Suggestion chips: full-width stacked cards */
  .fxaf-chips { flex-direction: column !important; gap: 10px !important; }
  .fxaf-chip {
    width: 100% !important;
    text-align: left !important;
    padding: 13px 16px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .fxaf-chip-icon { flex-shrink: 0; }

  /* Input bar */
  .fxaf-input-hints { display: none !important; }
  .fxaf-input-bar  { padding: 10px 16px 20px !important; }
  .fxaf-input-wrap { border-radius: 14px !important; }
  .fxaf-input      { font-size: 16px !important; } /* prevent iOS zoom */
  .fxaf-thread     { padding: 16px !important; }

/* ────────────────────────────────────────────────────────────────
   13. LIST PAGE HEADERS & GLOBAL SPACING
   ──────────────────────────────────────────────────────────────── */

  .list-page-header {
    flex-wrap: wrap; gap: 8px;
    padding: 12px 16px 8px;
  }
  /* Sticky header already shows the page name — hide the redundant h2 */
  .list-page-title { display: none !important; }
  /* Keep the agent bar and actions that sit alongside the title */
  .list-page-header .fx-agent-bar,
  .list-page-header .list-page-actions { width: 100%; }

  /* Agent bar */
  .fx-agent-bar { flex-wrap: wrap; gap: 4px; }
  .fx-agent-chip { font-size: 11px; }

  /* Cards: consistent border-radius */
  .fx-card { border-radius: 10px !important; }

  /* Demo bar compact */
  #demo-bar { font-size: 12px !important; padding: 5px 12px !important; }

/* ────────────────────────────────────────────────────────────────
   14. CONTENT PADDING — pages that render raw content
   ──────────────────────────────────────────────────────────────── */

  /* Give list/detail pages horizontal breathing room */
  .contracts-page,
  .reports-page,
  .rd-list-page { padding: 0 16px !important; }

  /* Auditflow top area */
  .audit-page-top { padding: 0 16px; }

} /* end @media (max-width: 768px) */


/* ────────────────────────────────────────────────────────────────
   NARROW PHONE (≤480px)
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {

  .kpi-grid  { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
  .kpi-value { font-size: clamp(13px, 3.8vw, 16px) !important; }

  .fx-briefing-stats { grid-template-columns: 1fr !important; }

  .hmc-hero-greeting { font-size: 22px !important; line-height: 30px !important; }

  .hmc-card { padding: 12px; }
  .fx-card  { padding: 12px; }

  .inv-info-strip { grid-template-columns: 1fr !important; }

  /* Very small: reduce header font */
  .header-breadcrumb .current { font-size: 14px; }

}