/* ============================================================
   28-r237-phone.css (v1.19.237) — phone mode
   html.phone is set by js/src/98j-r237-phone.js while the screen is 768px wide or less.
   Same pages and features; only the layout changes: a fixed top bar, a bottom navigation bar,
   products / invoice tabs on the sale page, and floating buttons that do not cover each other.
   ============================================================ */
html.phone{
  --ph-mb:56px;
  --ph-top:calc(var(--ph-mb) + var(--ph-ws, 0px));
  --ph-nav:calc(60px + env(safe-area-inset-bottom, 0px));
}
html.phone.ws-embed{ --ph-mb:0px; }

/* ── top bar: fixed, always fully visible ── */
html.phone .mobile-bar{ position:fixed !important; top:0; left:0; right:0; height:var(--ph-mb); box-sizing:border-box; padding:0 12px !important; z-index:150; isolation:auto; }
html.phone .mobile-bar-title img{ height:28px !important; }
html.phone.ws-embed .mobile-bar{ display:none !important; }
html.phone #ws-bar{ top:var(--ph-mb); z-index:140; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
html.phone #ws-bar::-webkit-scrollbar{ display:none; }
html.phone #ws-bar .ws-tab{ flex-shrink:0; max-width:150px; }
html.phone #ws-bar .ws-ib:nth-of-type(2){ display:none; }
html.phone #ws-log{ top:calc(var(--ph-top) + 4px); left:8px; right:8px; width:auto; }

/* ── the page area scrolls between the two bars ── */
/* v1.19.238: Max (html.silk) makes .app position:relative; z-index:1. On a phone that pushed the page down by the
   pages bar's top:34px and trapped the side menu and the windows under the overlay and the bottom bar, so no tap
   reached them. The field is earlier in the page, so the app still paints above it without its own layer. */
html.phone #app{ top:0 !important; z-index:auto !important; }
html.phone #app{ margin-top:var(--ph-top) !important;height:calc(100dvh - var(--ph-top) - var(--ph-nav)) !important; min-height:0 !important; overflow:hidden; }
html.phone #app .main{ height:100% !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
html.phone .page{ padding:12px 12px 84px !important; }
html.phone .pg-title{ font-size:20px !important; margin:2px 0 12px !important; }
html.phone #pg-dashboard .pg-title{ font-size:22px !important; }
/* v1.19.238: the home page lists (low stock, debts) were as wide as their table and ran off the screen; now the table scrolls inside its card */
html.phone .qa-panel-grid{ grid-template-columns:minmax(0, 1fr) !important; }
html.phone .qa-subcard{ min-width:0; overflow-x:auto; }

/* ── side menu: a full-height drawer above both bars ── */
html.phone #sidebar{ position:fixed !important; top:0 !important; height:100dvh !important; width:min(300px, 84vw) !important; right:calc(-1 * min(300px, 84vw) - 30px); z-index:9600; padding-bottom:env(safe-area-inset-bottom, 0px); overflow-y:auto !important; }
html.phone #sidebar.open{ right:0; }
html.phone[dir="ltr"] #sidebar{ right:auto; left:calc(-1 * min(300px, 84vw) - 30px); transition:left .25s ease; }
html.phone[dir="ltr"] #sidebar.open{ left:0; }
html.phone #sidebar .ni{ min-height:44px; }
html.phone #sidebar-overlay{ z-index:9550; }

/* ── bottom navigation bar ── */
#ph-nav{ display:none; }
html.phone #ph-nav{ display:grid; grid-template-columns:repeat(5, 1fr); position:fixed; left:0; right:0; bottom:0; height:var(--ph-nav); padding-bottom:env(safe-area-inset-bottom, 0px); box-sizing:border-box; z-index:145; background:var(--bg2); border-top:1px solid var(--border); box-shadow:0 -6px 22px rgba(0,0,0,.28); }
html.light.phone #ph-nav{ box-shadow:0 -4px 16px rgba(10,60,40,.08); }
html.phone body.ws-hide-main #ph-nav{ display:none; }
/* no bar before sign-in or while the app is still loading */
html.phone body:has(#app[style*="display:none"]) #ph-nav, html.phone body:has(#app[style*="display: none"]) #ph-nav{ display:none; }
.ph-tab{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border:0; background:transparent; color:var(--muted); font:inherit; font-size:10.5px; font-weight:700; cursor:pointer; padding:6px 2px 4px; -webkit-tap-highlight-color:transparent; min-width:0; }
.ph-tab svg{ width:22px; height:22px; flex-shrink:0; stroke:currentColor; fill:none; }
.ph-tab span{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ph-tab.on{ color:var(--gold2); }
.ph-tab.on::before{ content:""; position:absolute; top:0; left:28%; right:28%; height:3px; border-radius:0 0 3px 3px; background:var(--gold2); }
.ph-tab:active svg{ transform:scale(.9); }
.ph-badge{ position:absolute; top:4px; left:calc(50% + 4px); min-width:17px; height:17px; padding:0 4px; box-sizing:border-box; border-radius:9px; background:var(--gold); color:#05120d; font-size:10px; font-weight:900; line-height:17px; text-align:center; display:none; }
.ph-badge.on{ display:block; }

/* ── sale page: products / invoice tabs ── */
.ph-seg{ display:none; }
html.phone .ph-seg{ display:flex; gap:4px; padding:4px; margin:0 0 10px; border-radius:12px; background:var(--bg3); border:1px solid var(--border); }
.ph-seg button{ flex:1; display:flex; align-items:center; justify-content:center; gap:6px; height:38px; border:0; border-radius:9px; background:transparent; color:var(--muted); font:inherit; font-size:14px; font-weight:800; cursor:pointer; }
.ph-seg button.on{ background:var(--gold); color:#05120d; }
.ph-seg-n{ display:none; min-width:20px; height:20px; padding:0 5px; box-sizing:border-box; border-radius:10px; background:var(--gold2); color:#05120d; font-size:11px; line-height:20px; }
.ph-seg-n.on{ display:inline-block; }
.ph-seg button.on .ph-seg-n{ background:#05120d; color:var(--gold2); }
html.phone #pg-pos .pos-wrap{ display:block !important; height:auto !important; }
html.phone #pg-pos .pos-left{ height:auto !important; min-height:0 !important; max-height:none !important; overflow:visible !important; }
html.phone #pg-pos .pos-list{ overflow:visible !important; flex:none; }
html.phone #pg-pos .inv-panel{ min-height:0 !important; overflow:visible !important; }
html.phone #pg-pos .inv-body{ max-height:none !important; overflow:visible !important; }
html.phone #pg-pos:not(.ph-cart) .inv-panel{ display:none !important; }
html.phone #pg-pos.ph-cart .pos-left{ display:none !important; }
html.phone body.ph-pos-items .page#pg-pos{ padding-bottom:84px !important; }

/* the cart bar over the bottom bar, while browsing products with something in the invoice */
#ph-cart{ display:none; }
html.phone body.ph-pos-items.ph-has-cart:not(.ws-hide-main) #ph-cart{ display:flex; }
#ph-cart{ position:fixed; left:12px; right:12px; bottom:calc(var(--ph-nav) + 10px); z-index:146; align-items:center; gap:10px; height:52px; padding:0 14px; border:0; border-radius:16px; background:var(--gold); color:#05120d; font:inherit; font-weight:800; box-shadow:0 10px 28px rgba(0,0,0,.4); cursor:pointer; }
.ph-cart-ico{ position:relative; display:flex; }
.ph-cart-ico b{ position:absolute; top:-8px; right:-10px; min-width:17px; height:17px; padding:0 4px; box-sizing:border-box; border-radius:9px; background:#05120d; color:var(--gold2); font-size:10px; line-height:17px; text-align:center; }
.ph-cart-tot{ flex:1; font-size:16px; direction:ltr; text-align:center; }
.ph-cart-go{ display:flex; align-items:center; gap:4px; font-size:13px; }
html[dir="ltr"] .ph-cart-go svg{ transform:rotate(180deg); }

/* ── floating buttons: kept off the bars and off each other ── */
html.phone #theme-fab{ top:11px !important; bottom:auto !important; left:96px !important; right:auto !important; width:34px !important; height:34px !important; z-index:160 !important; box-shadow:none !important; position:fixed !important; }
html.phone[dir="ltr"] #theme-fab{ left:auto !important; right:96px !important; }
html.phone.ws-embed #theme-fab{ display:none !important; }
html.phone #theme-fab svg{ width:16px; height:16px; }
html.phone .net-bar{ top:16px !important; bottom:auto !important; left:auto !important; right:54px !important; z-index:160 !important; padding:3px 8px !important; font-size:11px !important; }
html.phone .net-bar .net-bar-ver{ display:none !important; }
html.phone[dir="ltr"] .net-bar{ right:auto !important; left:54px !important; }
html.phone .net-note{ top:calc(var(--ph-top) + 8px) !important; }
html.phone .ax-qc-btn{ left:16px !important; right:auto !important; bottom:calc(var(--ph-nav) + 14px) !important; width:46px; height:46px; }
html.phone .ax-qc-menu{ left:16px !important; right:auto !important; bottom:calc(var(--ph-nav) + 68px) !important; max-height:calc(100dvh - var(--ph-top) - var(--ph-nav) - 90px); overflow-y:auto; }
html.phone body.ph-pos-items.ph-has-cart .ax-qc-btn{ bottom:calc(var(--ph-nav) + 74px) !important; }
html.phone body.ph-pos-items.ph-has-cart .ax-qc-menu{ bottom:calc(var(--ph-nav) + 128px) !important; }
html.phone #dft-chip{ top:auto !important; bottom:calc(var(--ph-nav) + 24px) !important; left:72px !important; right:auto !important; }
html.phone body.ph-pos-items.ph-has-cart #dft-chip{ bottom:calc(var(--ph-nav) + 84px) !important; }
html.phone #upd-banner{ bottom:calc(var(--ph-nav) + 10px) !important; z-index:100003 !important; }
html.phone .toast-container{ bottom:calc(var(--ph-nav) + 16px); }
/* the side menu or a window on top hides the floating buttons, so they never cover them */
html.phone body:has(#sidebar.open) .ax-qc-btn, html.phone body:has(#sidebar.open) #dft-chip, html.phone body:has(#sidebar.open) #ph-cart,
html.phone body:has(.ov.on) .ax-qc-btn, html.phone body:has(.ov.on) #dft-chip, html.phone body:has(.ov.on) #ph-cart{ display:none !important; }
html.phone .tour-skip-btn{ top:calc(var(--ph-top) + 8px) !important; }

/* ── touch-friendly controls ── */
html.phone .sh-badge, html.phone .gs-trigger-kbd{ display:none !important; }
html.phone .btn{ min-height:38px; }
html.phone .fc, html.phone input.fc, html.phone textarea.fc{ font-size:16px; }
html.phone .modal{ max-height:92dvh !important; padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px)) !important; }
@media (pointer:coarse){
  html.phone *{ scrollbar-width:none; }
  html.phone *::-webkit-scrollbar{ width:0; height:0; }
}