/* ============================================================
   Aurelia demo — shared mobile / responsive layer
   Linked on every page. Only affects screens ≤ 820px.
   Strategy: unlock the desktop 100vh app-shell so the page
   scrolls naturally; stack two-pane layouts; turn the CRM
   sidebars into a top bar and let wide tables scroll sideways.
   ============================================================ */
@media (max-width:820px){

  /* --- unlock natural page scrolling everywhere --- */
  html, body{
    height:auto !important;
    min-height:100% !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }

  /* ===================================================
     Two-pane workflow pages
     page 2 & 3  -> .main (.left / .right)
     page 4 & 5  -> .app  (.assistant / .quote)
     =================================================== */
  .main, .app{
    display:flex !important;
    flex-direction:column !important;
    height:auto !important;
    grid-template-columns:none !important;
  }
  .main > *, .app > *{ width:100% !important; min-width:0 !important; }

  .left, .right, .assistant, .quote{
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    border-left:none !important;
    border-right:none !important;
  }
  .right, .assistant{ border-top:1px solid #e6ddcb; }

  /* on the immersive quote pages, show the quote first, assistant after */
  .quote{ order:-1; }
  .assistant{ order:1; }

  /* top bars / control rows wrap instead of overflowing */
  .topbar, .controls, .q-top, .q-top-right, .as-head, .composer, .as-composer{
    flex-wrap:wrap !important;
    height:auto !important;
    row-gap:10px;
  }
  .select{ max-width:48vw; }

  /* inner scroll regions flow with the page */
  .quote-scroll, .chat, .left, .right{ flex:none !important; }

  /* pages 2 & 3: the preview is pre-built but kept hidden for the desktop
     "fill-in" animation; on mobile just reveal it so the pane isn't blank */
  .slides-bar, .slides-note, .pills, .slide-ph, .slide-gallery,
  .collapse-row, .cover-ph, .cover-text{ visibility:visible !important; }

  /* keep fixed action bars from hiding the last bit of content */
  .quote-scroll{ padding-bottom:24px !important; }

  /* client preview (Aperçu) mode: the desktop 340px left-pad squashes the quote
     into a sliver on mobile (looks blank). Reset it; let the quote flow full-width. */
  body.client-view .quote, body.client-view .quote-scroll{ height:auto !important; max-height:none !important; overflow:visible !important; }
  body.client-view .quote-scroll{ padding:64px 12px 28px !important; }
  body.client-view .client-bar{ left:0 !important; right:0 !important; }

  /* quote pages: unpin the desktop fixed footer (left:440px is off-screen on mobile)
     so Save/Preview flow at the end of the quote instead of overlapping the chat */
  .q-foot{ position:static !important; left:auto !important; right:auto !important;
    box-shadow:none !important; border-top:1px solid #e6ddcb; }
  .client-bar{ padding:10px 14px !important; }
  /* client-view comments panel is a left sidebar on desktop; on mobile it was
     covering the whole quote as a white sheet. Hide it unless actively composing,
     then show as a bottom sheet so the quote stays visible. */
  body.client-view .cv-comments{ display:none !important; }
  body.client-view .cv-comments.compose{ display:block !important; left:0 !important; right:0 !important; top:auto !important; bottom:0 !important; width:100% !important; max-height:72vh; border-right:none; border-top:1px solid var(--line); box-shadow:0 -8px 30px rgba(0,0,0,.22); z-index:120; }
  /* floating back-arrow (pages 2/3) -> out of the content's way */
  .arrow.l{ top:auto !important; bottom:84px !important; left:12px !important; }

  /* ---- quote page inner layouts ---- */
  .present, .two-col{ grid-template-columns:1fr !important; }
  .quote-scroll{ padding-left:12px !important; padding-right:12px !important; }
  .qcol{ max-width:none !important; }

  /* compact header card + smaller logo (pin height; titles are short single lines) */
  .header-card{ padding:0 15px !important; gap:13px !important; align-items:center !important; align-self:stretch !important; min-height:0 !important; height:76px !important; overflow:visible; }
  .header-card > div{ min-width:0; }
  .header-card .logo-wrap{ width:44px !important; height:44px !important; flex:0 0 44px !important; }
  .header-card h2{ font-size:18px !important; line-height:1.15 !important; }
  .header-card .ref{ margin-top:3px !important; }

  /* sales + customer cards: one flush white block, hairline divider, no sand gap */
  .tworow{ grid-template-columns:1fr 1fr !important; gap:0 !important; align-items:stretch !important;
    background:#fff; border:1px solid var(--line,#ececec); border-radius:14px; overflow:hidden; box-shadow:0 2px 14px rgba(0,0,0,.05); }
  .tworow > *{ min-width:0 !important; }
  .tworow > .card{ border-radius:0 !important; box-shadow:none !important; border:0 !important; background:#fff !important; }
  .tworow > * + *{ border-left:1px solid var(--line,#ececec) !important; }
  .person-card .meta, .cust-card p, .person-card .nm, .cust-card .nm, .cust-card h4{ overflow-wrap:anywhere; word-break:break-word; }
  .person-card, .cust-card{ padding:13px !important; }
  .person-card .lbl, .cust-card h4{ font-size:11px !important; margin-bottom:8px !important; }
  .person-card .nm, .cust-card .nm{ font-size:13px !important; }
  .person-card .meta, .cust-card p{ font-size:11px !important; line-height:1.5 !important; word-break:break-word; overflow-wrap:anywhere; }
  .sales-person{ gap:8px !important; }
  .av{ width:38px !important; height:38px !important; }
  .add-sales{ font-size:12px !important; }

  /* pricing table: scroll sideways, keep columns aligned & prices on one line */
  #pricingBody{ overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
  #pricingBody table{ min-width:600px; }
  .pricing td.num, .pricing th.num, .totals .row span{ white-space:nowrap !important; }
  .totals{ max-width:none !important; margin-left:0 !important; }

  /* stats-modal table scrolls inside the modal */
  .dl-row{ min-width:560px; }
  .modal{ overflow-x:auto; }

  /* banner hero + present row: keep media at a consistent, sane height */
  .banner-img{ height:auto !important; }
  .banner-img img, .banner-img .rimg{ height:190px !important; }
  .present .vid, .present .carousel{ height:190px !important; }

  /* page 2 form: 3 fields per row (wider, shorter) instead of chunky 2-col */
  .form-card{ padding:18px 18px 20px !important; }
  .form-card .grid{ grid-template-columns:repeat(3,1fr) !important; gap:10px 12px !important; }
  .form-card .field label{ font-size:11px !important; margin-bottom:4px !important; }
  .form-card .field input{ padding:9px 10px !important; font-size:12.5px !important; }
  .form-card .field.with-icon .ic{ top:24px !important; height:28px !important; width:28px !important; }

  /* ===================================================
     CRM pages (6,7,8) -> .layout (.side / .main) + tables
     =================================================== */
  .layout{
    display:flex !important;
    flex-direction:column !important;
    height:auto !important;
    grid-template-columns:none !important;
  }
  .side{
    flex-direction:row !important;
    flex-wrap:wrap;
    align-items:center;
    gap:8px !important;
    border-right:none !important;
    border-bottom:1px solid var(--line,#efe7d6);
    padding:12px 14px !important;
  }
  .side .logo{ width:auto; padding:0 6px 0 0 !important; }
  .side-new{ padding:10px 16px !important; font-size:14px !important; }
  .nav{ padding:9px 13px !important; font-size:13px !important; }
  .nav svg{ width:18px; height:18px; }

  .main{ padding:16px !important; height:auto !important; overflow:visible !important; }
  .top{ flex-wrap:wrap; row-gap:10px; }
  .search{ max-width:none !important; width:100%; order:2; }

  /* wide data tables: keep columns + headers, swipe horizontally */
  #table, .table{ overflow-x:auto !important; overflow-y:visible !important; -webkit-overflow-scrolling:touch; }
  .table .row, #table .row{ min-width:760px; }
  .subtabs{ overflow-x:auto; }

  /* modals fit small screens */
  .ov{ padding:16px 10px !important; align-items:flex-start !important; }
  .modal{ max-width:100% !important; padding:22px 18px !important; }
  .grid2{ grid-template-columns:1fr !important; }

  /* ===================================================
     Page 1 — venue picker
     =================================================== */
  .grid{ grid-template-columns:repeat(2,1fr) !important; margin-top:22px !important; }
  /* Match .grid.margin-top so the cards sit centred between
     the "Select a venue to create a deal" headline above and
     the Start button below on phones. */
  .start{ margin-top:22px !important; }
  .langtoggle{ top:10px !important; right:10px !important; }
  .wrap{ gap:0; }
  .intro .pick{ margin-top:14px !important; }

  /* ===================================================
     Page 3 — quote generator preview
     Cap the imported-doc iframes (meeting notes + pricing
     catalogue) so they don't stretch the chat panel
     vertically on mobile. The page's fit() JS sets an
     inline height matching the inner document; this
     !important rule overrides that. Users can still tap
     the "Open ↗" link in the doc head to see the full
     document.
     =================================================== */
  .docframe{ max-height:280px !important; }
}

/* very small phones — single-column venue cards */
@media (max-width:460px){
  .grid{ grid-template-columns:1fr !important; }
  .card{ aspect-ratio:16/10 !important; }
}