/* ══════════════════════════════════════════════════════════════
   DevisVox v3 — css/mobile/layout.css
   MOBILE LAYOUT: page system, bottom nav, FAB, headers
   Production version (phone frame excluded)
   ══════════════════════════════════════════════════════════════ */

#app-scroll{flex:1;overflow-y:auto;overflow-x:hidden;position:relative;z-index:1;isolation:isolate}
#app-scroll::-webkit-scrollbar{display:none}

/* ═══ PAGE SYSTEM ════════════════════════════════════════════ */
.page{display:none;flex-direction:column;min-height:100%}
.page.active{display:flex}
/* devis-form overrides — gets fixed inner layout */
#p-df{display:none;flex-direction:column;height:calc(100vh - 79px)}
#p-df.active{display:flex}

/* ═══ BOTTOM NAV ═════════════════════════════════════════════ */
.bnav{height:79px;background:var(--card);border-top:1px solid var(--b2);display:flex;align-items:center;padding:0 4px;flex-shrink:0;z-index:900;overflow:visible}
.ntab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;background:transparent;padding:4px 2px;transition:var(--tr)}
.ntab svg{width:22px;height:22px;stroke:#94A3B8;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:var(--tr)}
.ntab span{font-size:10px;font-weight:500;color:var(--text3);transition:var(--tr)}
.ntab.on svg{stroke:var(--accent)!important}
.ntab.on span{color:var(--accent)!important;font-weight:700}
.nmic{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;background:transparent;cursor:pointer;padding:4px 2px;position:relative;overflow:visible}
.nmic-disk{width:44px;height:44px;display:flex;align-items:center;justify-content:center;position:relative;top:-6px;transition:.18s}
.nmic-disk svg{width:22px;height:22px;stroke:#94A3B8;stroke-width:2.5;fill:none;transition:.18s}
.nmic.on .nmic-disk svg{stroke:var(--accent)}
.nmic span{font-size:10px;font-weight:600;color:var(--text2);margin-top:-4px;transition:var(--tr)}
.nmic.on span{color:var(--accent)!important;font-weight:700}
.home-bar{height:8px;background:var(--card);flex-shrink:0;display:flex;align-items:center;justify-content:center}
.bar-pill{width:120px;height:4px;background:rgba(0,0,0,.16);border-radius:3px}

/* ─── FAB ─────────────────────────────────────────────────── */
.fab{position:absolute;bottom:20px;right:20px;width:50px;height:50px;
  border-radius:50%;background:var(--accent);border:none;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 18px rgba(255,107,0,.44);font-size:24px;z-index:10;
  transition:var(--tr);cursor:pointer}
.fab:active{transform:scale(.93)}

/* ─── PAGE HEADERS ────────────────────────────────────────── */
.ph{padding:16px 20px 10px;flex-shrink:0}
.ph h1,.ph-title{font-size:24px;font-weight:900;color:var(--text);
  letter-spacing:-.5px;line-height:1.2}
.ph-sub{font-size:13px;color:var(--text3);font-weight:500;margin-top:2px}
.ph-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.s-lbl{padding:12px 20px 6px;font-size:11px;font-weight:700;
  color:var(--text3);text-transform:uppercase;letter-spacing:.07em}
.pb{flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:16px}
.pb::-webkit-scrollbar{display:none}

/* ─── .nav-hidden (hide footer on scroll down) ────────────── */
#bottom-nav{transition:transform .3s ease}
#bottom-nav.nav-hidden{transform:translateY(100%)}

/* ─── SIDEBAR + HEADER (hidden on mobile) ─────────────────── */
#sidebar,#tablet-sidebar{display:none!important;position:absolute;top:0;left:0;bottom:0;
  width:200px;background:var(--card);border-right:1px solid var(--b2);
  flex-direction:column;z-index:600;box-shadow:var(--sh)}
#tablet-header,#app-header{display:none!important;position:absolute;top:0;left:0;right:0;
  height:70px;background:var(--card);border-bottom:1px solid var(--b2);
  align-items:center;padding:0 24px;z-index:599;box-shadow:var(--sh)}
.ts-logo{font-size:18px;font-weight:900;letter-spacing:-.4px}
.ts-logo-d{color:var(--text)}.ts-logo-v{color:var(--accent)}
.ts-nav{flex:1;overflow-y:auto;padding:12px 10px}
.ts-nav::-webkit-scrollbar{display:none}
.ts-item{display:flex;align-items:center;gap:10px;padding:9px 12px;
  border-radius:var(--r-sm);font-size:14px;font-weight:600;color:var(--text2);
  cursor:pointer;border:none;background:transparent;font-family:inherit;
  width:100%;text-align:left;transition:var(--tr)}
.ts-item.on{background:var(--accent-wash);color:var(--accent)}
.ts-item.on svg{stroke:var(--accent)}
.ts-item svg{width:16px;height:16px;stroke:var(--text3);stroke-width:1.8;
  fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.ts-sep{height:1px;background:var(--b);margin:8px 10px}
.ts-foot{padding:12px 10px;border-top:1px solid var(--b)}