/* ============================================================
   mobile.css — shared responsive layer for the Abzorb record pages.

   Loaded on every record page. All rules live behind @media(max-width:640px)
   so the desktop layout is untouched. Two things trigger it:
     1. The record page opened inside "Mobile Record.html" (the iframe is
        393px wide → the query fires inside the embedded document).
     2. The record page opened directly on a real phone.

   The mobile SHELL hides its own chrome copies via .in-shell (page-transitions
   .css). These rules only reflow the .body content + degrade the standalone
   chrome (sidebar/topbar) for the real-phone case.
   ============================================================ */

/* ---- Phone chrome for the customer header + tab row (≤768px) ----
   Ported from the retired iframe shell (Customer Record.html), which drew this itself.
   There is no shell any more, so the REAL pages own their phone chrome: compact header,
   pill tabstrip, and the header buttons collapsed into one magenta "Actions" dropdown
   (markup injected by mobile-actions.js, which proxies each item to the real button). */
@media (max-width:768px){
  .chead{position:relative;z-index:60;flex-wrap:wrap;gap:10px;padding:13px 16px 12px;}
  .chead .ava{display:none;}
  .chead .acttrackbtn{display:none;}
  .chead>div:not(.cactions){flex:1;min-width:0;}
  .cname{flex-wrap:wrap;gap:8px;align-items:center;}
  .cname h1{flex:1 1 100%;font-size:16px;letter-spacing:-.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.15;}
  /* KPI + card titles: one size, 13px/700 ITC (phones/tablets only — desktop keeps 12px
     KPI labels and 14px card titles). The html prefix is REQUIRED: each page's own
     <style> block loads after mobile.css, so a plain `.kpi .top .lbl` ties and loses. */
  html .kpi .top .lbl,html .kpi .ktitle,
  html .card>.ch h2,html .card>.ch h3,html .sumcard>.ch h3,html .ch.chrow h3{font-family:"ITC Avant Garde Gothic","Nunito",sans-serif;font-size:13px;font-weight:700;}

  .cmeta{gap:4px 12px;margin-top:6px;}
  .cmeta span{font-size:11.5px;color:var(--ink-3);}
  .cmeta .icon{display:none;}
  .cactions{margin-left:auto;width:auto;flex:0 0 auto;align-self:flex-start;gap:8px;position:relative;}
  .cactions>.btn{display:none;}
  .cactions .actdrop{display:inline-block;width:auto;position:relative;vertical-align:top;}
  /* icon-only trigger: a 36× 36 white square with the same 1.5px --line chrome as the
     desktop .btn, holding a cyan ⋯ glyph (no label, no rotating chevron) */
  .actdrop-btn{width:36px;height:36px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--line);border-radius:5px;background:#fff;color:var(--ink);cursor:pointer;}
  .actdrop-btn:hover{border-color:#cfd5df;background:var(--fill);}
  .actdrop-btn>.icon{width:18px;height:18px;color:#8E909A;flex:0 0 auto;}
  /* rows read exactly like the table-actions dropdown (.mtb-menu): ITC 13px/500,
     11/12px padding, grey 18px glyph, hover-highlighted row, 5px corners */
  .actdrop-menu{display:none;position:absolute;top:calc(100% + 6px);right:0;left:auto;min-width:220px;background:var(--card,#fff);border:1px solid var(--line);border-radius:5px;box-shadow:0 12px 34px rgba(16,24,40,.18);z-index:200;padding:5px;}
  .actdrop.open .actdrop-menu{display:block;}
  .actdrop-menu button{display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;text-align:left;padding:11px 12px;border:none;border-bottom:1px solid var(--line-2);border-radius:5px;background:none;font-family:"ITC Avant Garde Gothic",sans-serif;font-size:13px;font-weight:500;color:var(--ink);cursor:pointer;}
  .actdrop-menu button:last-child{border-bottom:none;}
  .actdrop-menu button .icon,.actdrop-menu button .uic{width:18px;height:18px;color:#8E909A;flex:0 0 auto;}
  .actdrop-menu button:hover,.actdrop-menu button:active{background:var(--fill);}
  html.dark .actdrop-menu button:hover,html.dark .actdrop-menu button:active{background:#2E2C42;}
  .tabs{gap:7px;margin:0;padding:0 16px 12px;background:none;border:none;border-radius:0;overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;scrollbar-width:none;}
  .tabs::-webkit-scrollbar{display:none;}
  .tabs .tab{flex:0 0 auto;padding:7px 12px;border-radius:999px;background:var(--fill);border:1px solid var(--line);font-size:11.5px;}
  .tabs .tab.active{background:var(--magenta);border-color:var(--magenta);color:#fff;}
  .tabs .tab.active .icon,.tabs .tab.active svg{color:#fff;stroke:#fff;}
  .tabs .tab.active .cnt{background:rgba(255,255,255,.24);color:#fff;}
}
/* above the phone breakpoint the injected dropdown never shows, and the mobile-only
   top-rail search icon stays hidden (desktop chrome is unchanged) */
@media (min-width:769px){ .cactions .actdrop{display:none;} }
@media (min-width:641px){ .topbar .right .tb-search{display:none;} }
/* Abzorb wordmark sits between the hamburger and the home icon in the top rail —
   PHONE ONLY (the desktop sidebar already carries the brand). Base rule is
   unconditional so no page needs its own style block. */
.topbar .tblogo{display:none;}
@media (max-width:640px){
  html:not(.in-shell) .topbar .tblogo{display:block;height:24px;width:auto;flex:0 0 auto;}
  /* NO filter in dark mode — `brightness(0) invert(1)` flattened the gradient `z` to
     flat white. dark-mode.js src-swaps in abzorb-logo-white.svg instead (white
     lettering + the gradient z). */
}

@media (max-width:640px){

  /* hide the document's own vertical scrollbar (the iframe scroller in the
     mobile shell + the root scroller on a real phone). Descendant scrollers
     like table wrappers keep theirs since scrollbar-width isn't inherited. */
  html,body{scrollbar-width:none;-ms-overflow-style:none;}
  html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0;}

  /* ---- standalone chrome degrade (real phone hitting a desktop page directly) ---- */
  /* When NOT embedded in the mobile shell, collapse the desktop sidebar so the
     record fills the screen. .in-shell already hides these, so guard on :not. */
  html:not(.in-shell) .app{height:auto;min-height:100vh;overflow:visible;}
  html:not(.in-shell) .side{display:none;}
  html:not(.in-shell) .main{min-height:100vh;}
  /* Two deterministic rows via GRID (flex wrapping can't guarantee where the break
     falls — a min-width hack made .right itself wrap and crushed the crumb):
       row 1: hamburger · logo · icon cluster (right-aligned)
       row 2: home · full-width breadcrumb
     .tb-ico:nth-of-type(2) is the home icon (the two rail icons are the only
     direct .tb-ico children; the rest live inside .right). */
  html:not(.in-shell) .topbar{display:grid;grid-template-columns:auto auto minmax(0,1fr);height:auto;flex-basis:auto;row-gap:9px;column-gap:11px;padding:10px 14px 11px;align-items:center;}
  html:not(.in-shell) .topbar>.tb-ico:first-child{grid-area:1/1;margin-right:0;}
  html:not(.in-shell) .topbar .tblogo{grid-area:1/2;}
  html:not(.in-shell) .topbar .right{grid-area:1/3;justify-self:end;margin-left:0;}
  html:not(.in-shell) .topbar>.tb-ico:nth-of-type(2){grid-area:2/1;}
  html:not(.in-shell) .topbar .crumb{grid-area:2/2/3/4;min-width:0;font-size:12.5px;font-weight:600;gap:7px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
  html:not(.in-shell) .topbar .crumb .cur{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
  html:not(.in-shell) .topbar .right{gap:14px;}
  /* right rail keeps only SEARCH + ALERTS (bell) + DARK MODE (moon);
     gear (child 3) and expand (child 5) go — .right children are
     1 bell · 2 search · 3 gear · 4 moon · 5 expand · 6 divider · 7 acct.
     My Account keeps the DESKTOP user icon and drops its label — the label is a bare
     text node, so font-size:0 on .acct is the only way to hide it; the avatar carries
     inline width/height so it is unaffected. */
  html:not(.in-shell) .topbar .right .tb-ico:nth-child(3),
  html:not(.in-shell) .topbar .right .tb-ico:nth-child(5){display:none;}
  /* visible order: search · alerts · dark mode · My Account (DOM order is
     bell · search · gear · moon · expand, so reorder with flex `order` rather
     than re-shuffling markup on nine pages — .divider/.acct keep the default 0) */
  html:not(.in-shell) .topbar .right .tb-ico:nth-child(2){order:-3;}
  html:not(.in-shell) .topbar .right .tb-ico:nth-child(1){order:-2;}
  html:not(.in-shell) .topbar .right .tb-ico:nth-child(4){order:-1;}
  /* breathing room between the hamburger and the logo */
  html:not(.in-shell) .topbar>.tb-ico:first-child{margin-right:0;}
  html:not(.in-shell) .topbar .acct{font-size:0;gap:0;}
  html:not(.in-shell) .topbar .acct .avatar{display:flex;}
  html:not(.in-shell) .scroll{padding:0;}
  html:not(.in-shell) .sheet{border:none;border-radius:0;box-shadow:none;margin:0;min-height:0;}
  /* the Actions ⋯ button is pinned TOP-RIGHT of the customer name (never its own
     row), so .chead must NOT wrap and the name is free to run to two lines */
  html:not(.in-shell) .chead{flex-wrap:nowrap;align-items:flex-start;padding:16px 16px 14px;gap:12px;}
  html:not(.in-shell) .chead>div:not(.cactions){flex:1 1 auto;min-width:0;}
  html:not(.in-shell) .chead .cactions{margin-left:auto;width:auto;flex:0 0 auto;align-self:flex-start;justify-content:flex-end;}
  html:not(.in-shell) .chead .cactions .actdrop{display:inline-block;}
  html:not(.in-shell) .cname{flex-wrap:wrap;}
  /* 16px on phones, WRAPPING onto a second line instead of ellipsising. This rule is
     (0,2,2) and sits in the LATER ≤640 block, so it is the one that actually renders
     — the ≤768 `.cname h1` above only reaches 641–768px. */
  html:not(.in-shell) .cname h1{font-size:16px;letter-spacing:-.2px;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:break-word;text-wrap:pretty;padding-top:9px;}
  /* Partner + Account Manager share ONE line. The meta stays plain wrapped flex at
     its NATURAL column width (no -48px overhang — that clipped "Dysonian" at 360px):
     row 1 = location + since (160px), which leaves no room for Partner (149px), so
     Partner starts row 2 and the phone-shortened "AM: Jason Dysonian" (~105px, swapped
     in by mobile-actions.js) sits beside it 8px away. Grid was worse: row 2's boxes
     inherited row 1's tracks, parking 50px of slack inside Partner's cell. */
  html:not(.in-shell) .cmeta{gap:4px 8px;}
  html:not(.in-shell) .cmeta span{font-size:11px;white-space:nowrap;}
  /* location + since keep their pin/calendar glyphs (row 2's Partner / Account
     Manager stay text-only — they need the width) */
  html:not(.in-shell) .cmeta span:nth-child(1) .icon,
  html:not(.in-shell) .cmeta span:nth-child(2) .icon{display:inline-block;width:13px;height:13px;}
  html:not(.in-shell) .tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;}
  html:not(.in-shell) .tabs::-webkit-scrollbar{display:none;}
  html:not(.in-shell) .tabs .tab{flex:0 0 auto;padding:11px 14px;}

  /* ---- body reflow (applies whether embedded or standalone) ---- */
  /* Tight vertical run on phones: main nav rail → sub-tab rail → first card.
     `.sheet>` beats the plain `.tabs` rule in the ≤768 block above. */
  .sheet>.tabs{padding-bottom:6px !important;}
  .body{padding:8px 14px 26px !important;}
  .sheet>.subtabs{margin-top:6px !important;}
  .body .subtabs{margin:0 0 10px !important;}
  /* account-status banner showing as the first body child: tighten the gap under
     the tab rail to match desktop (account-status.js's 6px rule can't beat the
     !important above). */
  .body:has(>[data-acct-banner]:first-child>.acctbanner){padding-top:6px !important;}

  /* KPI tiles: two per row, tighter. grid-auto-rows:1fr + stretch keeps the row even when
     one label wraps — otherwise a 2-line label leaves a ragged 14px height mismatch. */
  .kpis{grid-template-columns:1fr 1fr !important;grid-auto-rows:1fr;align-items:stretch;gap:11px !important;margin-bottom:14px !important;}
  .kpi{padding:13px 14px !important;height:100%;}
  .kpi .val{font-size:21px !important;}
  /* .top holds label + a pill/badge. The pills/badges are DROPPED on phones (the label is
     the whole header row), so the 13px label always fits on ONE line in a 174px tile. */
  .kpi .top{align-items:flex-start;flex-wrap:wrap;gap:8px;row-gap:6px;}
  .kpi .top .lbl{flex:1 1 100%;min-width:0;}
  .kpi .top .pill,.kpi .top .statuspill,.kpi .top .kbadge{display:none !important;}
  .kpi .lbl{font-size:13px !important;white-space:normal !important;}
  /* the 290px hover tip can't fit beside a 174px tile at any anchor (it overhung the
     viewport left or right), and phones have no hover — so it is simply not shown here */
  .kpi .statustip{display:none !important;}
  .kpi .ico-tile{width:30px;height:30px;}
  /* a tile whose header carries an icon keeps it on the SAME line, pinned top-right
     (the flex:1 1 100% label above would otherwise push it onto a second row) */
  .kpi .top:has(.ico-tile){flex-wrap:nowrap;align-items:flex-start;}
  .kpi .top:has(.ico-tile) .lbl{flex:1 1 auto;}
  .kpi .top .ico-tile{flex:0 0 auto;margin-left:auto;align-self:flex-start;}

  /* pages that hide their KPI strip entirely on mobile (Connections / Hardware / Orders /
     Invoices & Credits — there the strip is the Invoice Contact, Outstanding and Payment
     Terms cards) */
  body.mobile-nokpi .kpis{display:none !important;}
  /* Usage (Account Overview + Account): each tile carries a multi-line cost breakdown,
     so at 2-up on a phone it squashes — give every tile the full width. */
  .upane .kpis{grid-template-columns:minmax(0,1fr) !important;}

  /* second nav (sub-tab row) becomes a horizontal carousel like the main tabs */
  .subtabs{
    flex-wrap:nowrap !important;
    overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin-left:0 !important;margin-right:0 !important;
  }
  .subtabs::-webkit-scrollbar{display:none;}
  .subtabs .subtab{flex:0 0 auto;white-space:nowrap;font-size:12px !important;padding:10px 12px !important;gap:6px !important;}
  .subtabs .subtab .cnt{font-size:10.5px !important;}

  /* every multi-column content grid → single column */
  .grid,
  .dualrow,
  .urow,
  .obtfull,
  .orders-row{grid-template-columns:1fr !important;}
  .orders-row{flex-direction:column !important;align-items:stretch !important;gap:18px !important;}

  /* rails: products list one per row when stacked */
  .rail .prods{grid-template-columns:1fr !important;}

  /* order-stage strips: 2-up */
  .ostages{grid-template-columns:1fr 1fr !important;}
  .pv-stats,.dstats{grid-template-columns:1fr 1fr !important;}

  /* card chrome — allow header to wrap and shrink padding */
  .card .ch{padding:13px 15px;flex-wrap:wrap;gap:8px;row-gap:6px;}
  .cb{padding:14px 15px;}
  .cb:has(.table){padding-left:0;padding-right:0;}
  /* Table title rail (title + actions + search) spans exactly the same width as the
     column-header band: any card that holds a table drops the 15px side padding on
     its header row too, so nothing is inset relative to the table. */
  .body .card:has(.table)>.ch,.body .card:has(.dtable)>.ch,.body .card:has(.sumtbl)>.ch{padding-left:0 !important;padding-right:0 !important;}
  .body .cb:has(.table)>.sectoolbar,.body .cb:has(.table)>.toolrow,.body .cb:has(.table)>.tbar,.body .cb:has(.table)>.filtertags,
  .body .cb:has(.dtable)>.sectoolbar,.body .cb:has(.sumtbl)>.sectoolbar,
  .body .cb:has(.sumtbl)>.sumtoolbar,.body .cb:has(.sumtbl)>.filtertags{padding-left:0 !important;padding-right:0 !important;}
  .stack{gap:14px;}
  .grid{gap:14px !important;}

  /* toolbars above tables: ONE header line = title + entries selector + ⋯
     dropdown; the search field drops to a full-width line of its own below.
     .toolrow (Connections) uses display:contents so its children join the
     title's flex row. mobile-toolbar.js consolidates the actions into ⋯. */
  .sectoolbar,.toolrow,.tbar,.ch.chrow,.sumtoolbar{flex-wrap:wrap !important;gap:8px !important;row-gap:10px !important;align-items:center !important;justify-content:flex-start !important;}
  /* nested wrappers dissolve so their controls join the title's flex row */
  .ch.chrow>.toolrow,.ch.chrow>.tbar,.sumtoolbar>.sumtools{display:contents !important;}

  .sectoolbar>h2,.tbar>h2,.ch.chrow>h3,.ch.chrow>h2,.sectoolbar>h3,.sumtoolbar>h2{
    order:0 !important;flex:1 1 0 !important;min-width:40px !important;font-size:14px !important;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .sectoolbar .entgrp,.toolrow .entgrp,.tbar .entgrp,.ch.chrow .entgrp,.sumtoolbar .entgrp{order:1 !important;flex:0 0 auto !important;margin:0 !important;}
  /* the list-count chip follows its title, never precedes it. Where the rail has its
     own .grow spacer the title doesn't need to flex, so the chip can hug it. */
  .sectoolbar>.scount,.tbar>.scount,.sectoolbar>.tcount,.ch.chrow>.tcount{order:0 !important;}
  .sectoolbar:has(>.grow)>h2,.tbar:has(>.grow)>h2{flex:0 1 auto !important;max-width:58% !important;}
  .mtb-more{order:1 !important;flex:0 0 auto !important;margin-left:auto !important;}
  /* Filter is its own button in the rail (never inside the actions dropdown) — icon-only,
     same footprint as the actions trigger, sitting just left of it on the title row */
  .sectoolbar .fbtn,.toolrow .fbtn,.tbar .fbtn,.ch.chrow .fbtn,.sumtoolbar .fbtn{
    order:1 !important;flex:0 0 auto !important;margin:0 !important;
    font-size:0 !important;gap:0 !important;padding:9px 11px !important;line-height:0 !important;
  }
  .sectoolbar .fbtn .icon,.toolrow .fbtn .icon,.tbar .fbtn .icon,.ch.chrow .fbtn .icon,.sumtoolbar .fbtn .icon,
  .sectoolbar .fbtn .tf-fn,.toolrow .fbtn .tf-fn,.tbar .fbtn .tf-fn,.ch.chrow .fbtn .tf-fn,.sumtoolbar .fbtn .tf-fn{width:18px !important;height:18px !important;}
  /* the active-filter count stays visible (the label doesn't): "(1)" beside the funnel */
  .sectoolbar .fbtn .ffcount,.toolrow .fbtn .ffcount,.tbar .fbtn .ffcount,.ch.chrow .fbtn .ffcount,.sumtoolbar .fbtn .ffcount{
    font-size:11.5px !important;font-weight:700 !important;line-height:1 !important;margin-left:4px !important;color:var(--cyan-d,#0091c4) !important;
  }
  /* Usage Summary's chargeable-items toggle gets its own row above the search */
  .sumtoolbar .inclpay{order:2 !important;flex:1 1 100% !important;}
  .sectoolbar .search,.toolrow .search,.tbar .search,.ch.chrow .search,.sumtoolbar .search{order:3 !important;flex:1 1 100% !important;width:100% !important;min-width:0 !important;margin:0 !important;}
  .actiongroup{display:none !important;}
  .toolspacer{display:none !important;}

  /* entries selector → just the number + chevron */
  .entbtn{font-size:0 !important;gap:4px !important;padding:8px 10px !important;}
  .entbtn .entval{font-size:12px !important;}

  /* compress/expand-rows toggle is hidden on mobile (mobile-toolbar.js also
     skips it, this covers any that render before the script runs) */
  .rd-btn{display:none !important;}

  /* tables — horizontal scroll (user confirmed acceptable).
     table-responsive.js already sets overflow-x:auto on the parent; reinforce. */
  .table,.dtable,.sumtbl{min-width:640px;}
  .invtblwrap,.ctblscroll,#connTable{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  /* table sections run EDGE-TO-EDGE on phones — the grey card frame around a
     horizontally scrolling table only boxed it in (and the right border sat on top of
     the scroll affordance). Cell rules inside the table are untouched. */
  .body .card:has(.table),.body .card:has(.dtable),.body .card:has(.sumtbl),
  .body .invtblwrap,.body .ctblscroll,.body #connTable,.body .tblwrap{border:none !important;border-radius:0 !important;box-shadow:none !important;}

  /* charts — trim to fit the narrow column */
  .chart{padding:16px 14px 10px;}
  .yaxis,.plotarea,.bars{height:190px !important;}
  .xlabels{padding-left:40px;}
  .chart-legend{flex-wrap:wrap;gap:10px 14px;}

  /* Usage Costs (trend) chart — reclaim width so the plot fills the card:
     tighten the wrapper/chart side padding, narrow the y-axis + gap. */
  .costcard .chartwrap{padding-left:8px !important;padding-right:12px !important;}
  .costcard .chart.trendchart{padding-left:4px !important;padding-right:4px !important;}
  .trendchart .plot{gap:6px !important;}
  .trendchart .yaxis{width:32px !important;}
  .trendchart .xlabels{padding-left:38px !important;}

  /* filter off-canvas panel — full width on phone */
  .fcpanel{width:100% !important;max-width:100% !important;}

  /* modals: fit the 393px frame */
  .tkmodal,.tkmodal.wide{width:auto !important;max-width:94vw !important;}
  .eform,.frow2{grid-template-columns:1fr !important;}
  .echecks{grid-template-columns:1fr !important;}
  .tkov{padding:16px !important;}

  /* toast: span the width so it reads on a phone */
  .toastwrap{left:14px;right:14px;bottom:16px;align-items:stretch;}
  .toast{min-width:0;max-width:none;width:100%;}
}

/* ---- pagination bar: ONE line on phone ----
   The count and the page buttons must never wrap onto separate rows, so the bar
   is nowrap and the word "Showing" (span.pgw, emitted by pagination.js + the
   Invoices ledger pager) is dropped — "1–10 of 179" carries the meaning. */
@media (max-width:640px){
  .pgbar,.lpgbar{flex-wrap:nowrap !important;gap:8px;padding:11px 14px;}
  .pgbar .pginfo,.lpgbar .pginfo{font-size:11.5px;white-space:nowrap;flex:0 0 auto;}
  .pgw{display:none;}
  .pgnav{flex-wrap:nowrap;gap:3px;flex:0 1 auto;justify-content:flex-end;}
  .pgb,.pgbtn{min-width:27px !important;height:28px !important;padding:0 5px !important;font-size:12px !important;}
  .pgdots{padding:0 1px;font-size:12px;}
}