/* LaunchpadOS — Design System v2 (warm light theme) */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --brand:     #534AB7;
  --brand-d:   #3C3489;
  --brand-l:   #EEEDFE;
  --brand-m:   #AFA9EC;

  --bg:        #F7F6F2;
  --surface:   #ffffff;
  --surface2:  #F1EFE8;
  --surface3:  #ECEAE3;

  --border:    rgba(0,0,0,0.07);
  --border-m:  rgba(0,0,0,0.12);

  --text:      #1A1917;
  --text2:     #6B6963;
  /* WCAG AA: was #9E9B94 (~2.8:1 on --bg) — darkened to reach ≥4.5:1 while
     staying visually lighter than --text2. Used widely for 10–11px meta text,
     which counts as "normal" size and needs the full 4.5:1. */
  --text3:     #72706A;

  --green:     #1D9E75;
  --gbg:       #E1F5EE;
  --amber:     #BA7517;
  --abg:       #FAEEDA;
  --red:       #C0392B;
  --rbg:       #FAECE7;
  --blue:      #185FA5;
  --bbg:       #E6F1FB;

  --radius:    10px;
  --sidebar-w: 212px;
}

html, body {
  height: 100%;
  font-family: 'DM Sans', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
input, select, textarea, button { font: inherit; border: none; outline: none; }
button { cursor: pointer; background: none; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-m); border-radius: 2px; }

/* ── App shell ── */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  height: 100vh;
  overflow: hidden;
}

/* ── Sidebar ── */
.sidebar {
  background: var(--surface);
  border-right: 1px solid rgba(0,0,0,0.09);
  display: flex;
  flex-direction: column;
  height: 100vh;
  flex-shrink: 0;
}
.sidebar-top {
  padding: 18px 14px 14px;
  border-bottom: 0.5px solid var(--border);
}
.logo {
  display: flex;
  align-items: center;
  gap: 9px;
}
.logo-mark {
  width: 30px; height: 30px;
  background: var(--brand);
  border-radius: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px; padding: 6px;
  flex-shrink: 0;
}
.logo-mark span { background: white; border-radius: 1.5px; }
.logo-mark span:nth-child(2) { opacity: .6; }
.logo-mark span:nth-child(3) { opacity: .6; }
.logo-mark span:nth-child(4) { opacity: .3; }
.logo-text { font-size: 14px; font-weight: 600; letter-spacing: -.3px; }
.logo-text em { color: var(--brand); font-style: normal; }

.sidebar-nav { flex: 1; padding: 10px 8px; overflow-y: auto; }
.nav-group-label {
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .6px;
  color: var(--text3); padding: 10px 8px 5px;
}
.nav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 8px;
  cursor: pointer; color: var(--text2);
  transition: all .12s; margin-bottom: 1px;
  width: 100%; font-size: 13px; text-align: left;
}
.nav-item:hover { background: var(--surface2); color: var(--text); }
.nav-item.active { background: var(--brand-l); color: var(--brand); font-weight: 500; }
.nav-item svg { width: 15px; height: 15px; flex-shrink: 0; opacity: .65; }
.nav-item.active svg { opacity: 1; }
.nav-item.soon { opacity: .38; cursor: default; pointer-events: none; }
.nav-badge {
  margin-left: auto; background: var(--red); color: white;
  font-size: 10px; font-weight: 600;
  padding: 1px 6px; border-radius: 20px; min-width: 18px; text-align: center;
}
.nav-badge-a {
  margin-left: auto; background: var(--abg); color: var(--amber);
  font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 20px;
}

.sidebar-foot { padding: 12px 8px; border-top: 0.5px solid var(--border); }
.brand-pill {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; background: var(--surface2);
  border-radius: 8px; cursor: pointer;
}
.brand-pill:hover { background: var(--surface3); }
.b-avatar {
  width: 28px; height: 28px; background: var(--brand);
  border-radius: 7px; display: flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: 700;
  color: white; flex-shrink: 0;
}
.b-name  { font-size: 12px; font-weight: 500; }
.b-plan  { font-size: 10px; color: var(--text3); }
.live-bar {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 10px 0; font-size: 10px; color: var(--text3);
}
.live-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--green); animation: blink 2s infinite;
  display: inline-block;
}
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* ── Main content ── */
.main-content { display: flex; flex-direction: column; overflow: hidden; min-width: 0; }

/* ── Topbar ── */
.topbar {
  height: 52px;
  background: var(--surface);
  border-bottom: 1px solid rgba(0,0,0,0.09);
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 0 24px; flex-shrink: 0;
}
.topbar-left { display: flex; align-items: center; gap: 12px; }
.page-title  { font-size: 16px; font-weight: 600; letter-spacing: -.3px; }
.page-sub    { font-size: 12px; color: var(--text3); display: flex; align-items: center; gap: 5px; }
.topbar-right { display: flex; align-items: center; gap: 8px; }

/* ── Page ── */
.page { flex: 1; overflow-y: auto; padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; }
.page-header { display: flex; align-items: center; justify-content: space-between; }
.page-title-lg { font-size: 16px; font-weight: 600; letter-spacing: -.3px; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 14px; border-radius: 7px;
  font-size: 12px; font-weight: 500;
  cursor: pointer; transition: all .12s; border: none;
}
.btn-primary { background: var(--brand); color: white; }
.btn-primary:hover { background: var(--brand-d); }
.btn-ghost {
  background: transparent; color: var(--text2);
  border: 0.5px solid var(--border-m);
}
.btn-ghost:hover { background: var(--surface2); }
.btn:disabled { opacity: .45; cursor: default; }

/* ── Metrics grid ── */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.metric {
  background: var(--surface);
  border: 1px solid rgba(0,0,0,0.09);
  border-radius: 11px;
  padding: 16px 18px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.metric-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--text3); margin-bottom: 8px; }
.metric-val   { font-size: 24px; font-weight: 600; letter-spacing: -.5px; line-height: 1; margin-bottom: 5px; }
.metric-delta { font-size: 11px; display: flex; align-items: center; gap: 3px; }
.dg { color: var(--green); }
.dr { color: var(--red); }
.da { color: var(--amber); }
.db { color: var(--text3); }

/* ── Panel ── */
.panel {
  background: var(--surface);
  border: 1px solid rgba(0,0,0,0.09);
  border-radius: 11px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.panel-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px; border-bottom: 0.5px solid var(--border);
}
.panel-title { font-size: 13px; font-weight: 600; }
.panel-sub   { font-size: 11px; color: var(--text3); margin-top: 1px; }
.panel-body     { padding: 0 16px; }
.panel-body-pad { padding: 16px; }
.row { display: grid; gap: 12px; }

/* ── Table ── */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--text3); padding: 9px 12px;
  text-align: left; border-bottom: 0.5px solid var(--border);
}
.tbl td {
  padding: 10px 12px;
  border-bottom: 0.5px solid var(--border);
  color: var(--text);
}
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr { cursor: pointer; transition: background .1s; }
.tbl tbody tr:hover td { background: var(--surface2); }

/* ── Badges ── */
.badge {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 500;
  padding: 2px 8px; border-radius: 20px; white-space: nowrap;
}
.bg  { background: var(--gbg);    color: var(--green); }
.ba  { background: var(--abg);    color: var(--amber); }
.br  { background: var(--rbg);    color: var(--red);   }
.bp  { background: var(--brand-l);color: var(--brand-d); }
.bgr { background: var(--surface2); color: var(--text2); }
.bb  { background: var(--bbg);    color: var(--blue);  }

/* ── Mono ── */
.mono { font-family: 'DM Mono', monospace; font-size: 12px; }

/* ── Filter bar ── */
.filter-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-bottom: 0.5px solid var(--border);
  flex-wrap: wrap;
}
.filter-select {
  padding: 6px 10px; border: 0.5px solid var(--border-m);
  border-radius: 7px; font-size: 12px;
  background: var(--surface); color: var(--text);
  cursor: pointer;
}
.filter-select:focus { border-color: var(--brand); outline: none; }
.filter-label { font-size: 11px; font-weight: 500; color: var(--text3); }
.filter-input {
  padding: 6px 10px; border: 0.5px solid var(--border-m);
  border-radius: 7px; font-size: 12px;
  background: var(--surface); color: var(--text);
  flex: 1; min-width: 180px;
}
.filter-input:focus { border-color: var(--brand); outline: none; }
.filter-spacer { flex: 1; }

/* ── Form ── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group.full { grid-column: 1 / -1; }
.form-label { font-size: 11px; font-weight: 500; color: var(--text2); }
.form-input {
  padding: 8px 11px; border: 0.5px solid var(--border-m);
  border-radius: 7px; font-size: 13px;
  background: var(--surface); color: var(--text);
  transition: border-color .12s; width: 100%;
}
.form-input:focus { border-color: var(--brand); outline: none; }
.form-select {
  padding: 8px 11px; border: 0.5px solid var(--border-m);
  border-radius: 7px; font-size: 13px;
  background: var(--surface); color: var(--text);
  cursor: pointer; width: 100%;
}
.form-footer {
  padding: 12px 16px; border-top: 0.5px solid var(--border);
  display: flex; gap: 8px; justify-content: flex-end;
}

/* ── Modal ── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.25);
  z-index: 1000; display: flex; align-items: center;
  justify-content: center; opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal {
  background: var(--surface); border-radius: 14px;
  width: 480px; max-height: 80vh; overflow-y: auto;
  border: 0.5px solid var(--border-m);
}
.modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; border-bottom: 0.5px solid var(--border);
}
.modal-title  { font-size: 14px; font-weight: 600; }
.modal-close {
  width: 28px; height: 28px; border-radius: 6px;
  border: 0.5px solid var(--border-m); background: transparent;
  cursor: pointer; display: flex; align-items: center;
  justify-content: center; color: var(--text2);
}
.modal-close:hover { background: var(--surface2); }
.modal-body { padding: 20px; }
.modal-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 0.5px solid var(--border); font-size: 13px;
}
.modal-row:last-child { border-bottom: none; }
.modal-key { color: var(--text3); font-size: 12px; }
.modal-val { font-weight: 500; }

/* ── Toast ── */
.toast {
  position: fixed; bottom: 24px; right: 24px;
  background: var(--text); color: white;
  padding: 10px 18px; border-radius: 9px;
  font-size: 13px; font-weight: 500; z-index: 2000;
  transform: translateY(80px); opacity: 0;
  transition: all .25s; pointer-events: none;
}
.toast.show { transform: translateY(0); opacity: 1; }

/* ── Pagination ── */
.pagination {
  display: flex; gap: 8px; align-items: center;
  justify-content: flex-end; padding: 12px 16px;
  border-top: 0.5px solid var(--border);
}
.pagination button {
  padding: 5px 12px; border: 0.5px solid var(--border-m);
  border-radius: 6px; font-size: 12px; color: var(--text2);
  background: var(--surface); cursor: pointer;
}
.pagination button:hover { background: var(--surface2); }
.pagination button:disabled { opacity: .4; cursor: default; }
.pagination .page-info { font-size: 11px; color: var(--text3); }

/* ── Utilities ── */
.text-muted { color: var(--text3); }
.text-right { text-align: right; }
.empty { text-align: center; padding: 40px; color: var(--text3); font-size: 13px; }

/* ════════════════════════════════════════════════════════════
   MOBILE / APP-LIKE RESPONSIVE LAYER
   ════════════════════════════════════════════════════════════ */
.lp-hamburger { display:none; }
.lp-bottom-nav { display:none; }
.sb-backdrop { display:none; }

@media (max-width: 860px) {
  /* Single column shell */
  .app-shell { grid-template-columns: 1fr !important; }

  /* Sidebar becomes off-canvas drawer */
  #sidebar {
    position: fixed !important; left: 0; top: 0; bottom: 0;
    width: 264px !important; z-index: 300;
    transform: translateX(-100%); transition: transform .25s ease;
    box-shadow: 4px 0 28px rgba(0,0,0,.18);
  }
  body.sb-open #sidebar { transform: translateX(0); }
  .sb-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 299; }
  body.sb-open .sb-backdrop { display: block; }

  /* Floating hamburger */
  .lp-hamburger {
    display: flex; position: fixed; top: 9px; left: 12px; z-index: 120;
    width: 36px; height: 36px; border-radius: 9px; border: 1px solid rgba(0,0,0,.1);
    background: var(--surface); align-items: center; justify-content: center;
    cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.08);
  }
  .lp-hamburger svg { width: 18px; height: 18px; }

  /* Make room for hamburger in page topbars */
  .topbar { padding-left: 56px !important; }

  /* Content breathing room for bottom nav */
  .main-content { padding-bottom: 64px; }

  /* Responsive grids — collapse multi-column layouts */
  .metrics, .kpi-grid, .quad-grid, .score-grid, .num-grid,
  .features-grid, .feat-grid, .channels-grid, .cat-grid,
  .scenarios, .quad-grid, .recon-summary { grid-template-columns: 1fr 1fr !important; }
  .sim-grid, .builder, .comm-layout, .overview-grid { grid-template-columns: 1fr !important; }
  .row, .quad-grid[style], [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(4"], [style*="grid-template-columns:repeat(5"],
  [style*="grid-template-columns:repeat(6"] { grid-template-columns: 1fr 1fr !important; }

  /* Dense grid-row "tables" — per-page row classes whose column tracks are
     fixed px widths (mobile-optimization sweep, 2026-07-23). Keep the
     authored columns and let the list scroll sideways inside its .panel
     (overflow-x:auto above), instead of crushing the fr columns to nothing
     on a phone. Class names are unique per page (verified). */
  .noos-row, .sched-row, .sku-row, .var-row, .cust-row, .exp-row, .inv-row,
  .li-row, .camp-row, .kw-row, .po-row, .qc-row, .sub-row, .user-row,
  .perm-grid, .ocard-body, .ndr-body, .rrx-body { min-width: 620px; }

  /* Wide tables scroll horizontally */
  .panel, .table-wrap { overflow-x: auto; }
  table { min-width: 560px; }

  /* Slide-in panels go full width */
  .detail-panel, .drawer { width: 100% !important; }

  /* Modals fit screen */
  .modal { width: 94vw !important; max-width: 94vw !important; }

  /* Segment / page tabs scroll */
  .seg-tabs, .page-tabs, .fin-tabs, .status-tabs, .journey-bar, .source-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Hide desktop sidebar footer chevron noise */
  .topbar-right { gap: 6px; flex-wrap: wrap; }
}

@media (max-width: 560px) {
  .metrics, .kpi-grid, .quad-grid, .score-grid, .num-grid,
  .features-grid, .feat-grid, .channels-grid, .scenarios { grid-template-columns: 1fr !important; }
  .page-title { font-size: 15px; }
  .topbar-right .btn { font-size: 11px; padding: 6px 10px; }
}

/* App-like bottom tab bar — visible on narrow web viewports (≤560px, the
   old behaviour) AND always inside the native app regardless of device
   width. It used to be gated purely by the 560px media query, which meant
   a tablet running the native app (e.g. an iPad in portrait, ~744px CSS
   width) got NO bottom nav at all — wrong for a native app, where the
   chrome should be there no matter the screen size. Safe-area-bottom is
   baked into the bar's own height (not just main-content's padding) so the
   bar's background actually covers the home-indicator strip instead of
   leaving it transparent. */
.lp-bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 130;
  background: var(--surface); border-top: 1px solid rgba(0,0,0,.1);
  height: calc(58px + var(--safe-bottom, 0px));
  padding-bottom: var(--safe-bottom, 0px);
  box-shadow: 0 -2px 12px rgba(0,0,0,.06);
}
@media (max-width: 560px) { .lp-bottom-nav { display: flex; } }
html.lp-app .lp-bottom-nav { display: flex; }

.lp-bn-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; color: var(--text3); text-decoration: none; font-size: 9px; font-weight: 600;
}
.lp-bn-item.active { color: var(--brand); }
.lp-bn-item svg { width: 19px; height: 19px; }

/* Tablet variant — inside the native app on a wider screen, a row of
   bare 19px icons stretched edge-to-edge looks sparse and the touch
   targets read as an afterthought. Center the bar at a max width and
   scale icons/labels up, matching how the rest of this app already caps
   tile-grid growth on tablets (see shared/css/tiles.css) instead of just
   letting things stretch. */
@media (min-width: 561px) {
  html.lp-app .lp-bottom-nav {
    justify-content: center;
  }
  html.lp-app .lp-bottom-nav > * { max-width: 90px; }
  html.lp-app .lp-bn-item { font-size: 11px; }
  html.lp-app .lp-bn-item svg { width: 23px; height: 23px; }
}

/* Reserve space for the bottom nav whenever it's actually showing —
   previously this only happened under the 860px "mobile shell" media
   query, so a tablet-width native app had its last row of content
   sitting underneath the (now always-visible) bottom bar. */
html.lp-app .main-content {
  padding-bottom: calc(58px + var(--safe-bottom, 0px) + 16px);
}

/* ── App-mode touch ergonomics ─────────────────────────────────────────────
   Applies wherever <html> carries the `lp-app` class — added by the Capacitor
   native shell (shared/js/native-bridge.js) AND by mobile-web detection in
   shared/js/supabase-client.js, so a phone browser gets the same app-like
   chrome (tile home, bottom nav, drawer, card system, bottom-sheet modals)
   as the installed app. Keeps desktop/web density unaffected. */
html.lp-app {
  /* iOS notch / home-indicator clearance */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}
html.lp-app body {
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  /* Kills the iOS/Android "rubber-band" overscroll bounce at the page edges
     — a webpage tell that's absent in every native app. Page-level only;
     individual scrollable panels (sidebar, modals) keep their own scroll. */
  overscroll-behavior: none;
  /* Removes the gray tap-flash WebKit/Chrome show on every touch by
     default (a leftover from treating this as a generic webpage). */
  -webkit-tap-highlight-color: transparent;
}
html.lp-app * {
  /* Removes the ~150ms delay browsers use to detect double-tap-to-zoom —
     buttons feel instant instead of slightly laggy. Safe globally since
     zoom itself is already disabled in the native shell (native-bridge.js). */
  touch-action: manipulation;
}
html.lp-app ::selection {
  /* Native UI chrome doesn't support text selection (long-press menus on
     buttons/labels read as a bug, not a feature); inputs/textareas are
     exempted below since users still need to select/copy typed text. */
  background: transparent;
}
html.lp-app body,
html.lp-app button,
html.lp-app .btn,
html.lp-app .nav-item,
html.lp-app label {
  -webkit-user-select: none;
  user-select: none;
}
html.lp-app input,
html.lp-app textarea {
  -webkit-user-select: text;
  user-select: text;
}
html.lp-app input,
html.lp-app select,
html.lp-app textarea {
  /* iOS Safari/WebView auto-zooms on focus for inputs with font-size < 16px */
  font-size: 16px !important;
}
html.lp-app button,
html.lp-app .btn,
html.lp-app input[type="checkbox"],
html.lp-app input[type="radio"],
html.lp-app .qbtn,
html.lp-app .res,
html.lp-app .nav-item,
html.lp-app .tab,
html.lp-app th[onclick],
html.lp-app td[onclick],
html.lp-app a.btn,
html.lp-app a[onclick] {
  min-height: 44px; /* Apple HIG / Material minimum touch target */
}
html.lp-app .qbtn {
  min-width: 44px;
}
html.lp-app .nav-item {
  display: flex;
  align-items: center;
}
/* Hover-only affordances (table-row reveal-on-hover actions etc.) don't exist
   on touch — make them always visible instead of permanently hidden. */
html.lp-app tr:hover td,
html.lp-app .res:hover {
  background: var(--surface2);
}

/* ── App-mode mobile-optimization sweep (2026-07-23) ─────────────────────
   Global touch/clearance layer, applied wherever the bottom tab bar shows:
   app mode (html.lp-app, any width) and narrow web (≤560px). */

/* --lp-bn-h = bottom tab bar height when it is actually visible, else 0.
   Floating elements (toasts, FABs, banners) add it to their bottom offset
   so they never hide behind the bar. */
:root { --lp-bn-h: 0px; }
html.lp-app { --lp-bn-h: calc(58px + var(--safe-bottom, 0px)); }
@media (max-width: 560px) { :root { --lp-bn-h: calc(58px + var(--safe-bottom, 0px)); } }

/* Shared .toast + the known page-local floaters (#lp-t security toast,
   #toast brand-health/returns toast, .fab finance quick-actions,
   .dash-edit-banner dashboard edit bar). !important beats their inline
   cssText positioning. */
html.lp-app .toast, html.lp-app #lp-t, html.lp-app #toast,
html.lp-app .fab, html.lp-app .dash-edit-banner, html.lp-app .ip-toast {
  bottom: calc(14px + var(--lp-bn-h)) !important;
}
@media (max-width: 560px) {
  .toast, #lp-t, #toast, .fab, .dash-edit-banner, .ip-toast {
    bottom: calc(14px + var(--lp-bn-h)) !important;
  }
}

/* Touch targets beyond buttons: tab strips, pagination, form controls.
   44px is the Apple HIG / Material minimum; tab-strip items get 40px
   (they sit in a row with generous horizontal padding already). */
html.lp-app .seg-tabs > *, html.lp-app .page-tabs > *,
html.lp-app .status-tabs > *, html.lp-app .fin-tabs > *,
html.lp-app .source-tabs > *, html.lp-app .journey-bar > * {
  min-height: 40px;
}
html.lp-app .pagination button { min-width: 44px; min-height: 40px; padding: 8px 12px; }
html.lp-app .btn-sm, html.lp-app .btn-xs, html.lp-app .rrx-btn,
html.lp-app .contact-btn, html.lp-app .topbar-icon-btn, html.lp-app .link {
  min-height: 40px; display: inline-flex; align-items: center; justify-content: center;
}
html.lp-app input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
html.lp-app select {
  min-height: 44px;
}
html.lp-app textarea { min-height: 64px; }

/* The off-canvas nav drawer (shared/js/sidebar.js's #sidebar, opened via
   .lp-hamburger on every module page — Orders, Inventory, etc.) is the
   same drawer used on desktop, just slid in as a panel. Inside the native
   app that reads as "this is just the website" the moment you open it —
   a ⌘K search trigger that doesn't apply without a keyboard, and nav rows
   sized/spaced for a mouse. This doesn't replace that drawer; it makes
   the SAME one feel native, consistent with the dedicated drawer built
   for the mobile home screen (mobile/index.html). */
html.lp-app .sb-search { display: none; }
html.lp-app #sidebar .nav-item,
html.lp-app #ip-nav .nav-item {
  font-size: 15px;
  padding: 13px 14px;
  gap: 12px;
}
html.lp-app #sidebar .nav-item svg,
html.lp-app #ip-nav .nav-item svg { width: 18px; height: 18px; }
html.lp-app #sidebar .nav-item:active,
html.lp-app #ip-nav .nav-item:active { background: var(--surface2); }
html.lp-app .section-label,
html.lp-app #sidebar [class*="sb-group"] {
  font-size: 12px;
  padding: 14px 14px 6px;
}
@media (max-width: 860px) {
  html.lp-app #sidebar { width: 82vw !important; max-width: 320px !important; }
  html.lp-app .sb-logo { padding: calc(16px + var(--safe-top, 0px)) 16px 14px; }

  /* Page headers (Inventory, Products, etc.) carry desktop bulk-action
     buttons — Bulk Upload / Sample CSV / similar — that assume a mouse and
     a file picker workflow; they just crowd the header on a phone where
     bulk CSV operations aren't a realistic flow anyway. Tag any such
     button .bulk-action-btn to hide it here, page by page, rather than
     trying to guess every page's exact button set from one global rule. */
  html.lp-app .bulk-action-btn { display: none !important; }

  /* Topbar: with bulk-action buttons hidden above, most pages are left
     with just a title and one button — a flat 1px-bordered bar with tiny
     text reads as bare/unfinished at that point. Bigger bolder title, a
     colored accent mark (the one consistent "this is a LaunchpadOS app
     screen" visual cue, not a per-page icon set), and a soft shadow
     instead of a hard border for actual depth. Safe-area gets its own
     top padding here since the topbar sits inside the scrollable shell,
     not at the true top of the viewport like body. */
  html.lp-app .topbar {
    height: auto; min-height: 60px; flex-wrap: wrap; row-gap: 8px;
    padding: 12px 16px 12px;
    box-shadow: 0 1px 8px rgba(0,0,0,.06);
    border-bottom: none;
  }
  /* .lp-hamburger is position:fixed, so it ignores body's safe-area
     padding-top entirely — on a notched/status-bar device it was pinned
     9px from the true top of the physical screen, under the status bar.
     Push it down by the safe-area inset instead of a fixed 9px. */
  html.lp-app .lp-hamburger {
    top: calc(9px + var(--safe-top, 0px));
  }
  html.lp-app .topbar-left { gap: 10px; }
  html.lp-app .topbar-left::before {
    content: ''; width: 4px; height: 26px; border-radius: 2px; flex-shrink: 0;
    background: linear-gradient(180deg, var(--brand, #6C47FF), var(--brand-d, #4B2FBF));
  }
  html.lp-app .page-title { font-size: 19px; font-weight: 800; letter-spacing: -.3px; }
  html.lp-app .page-sub { font-size: 12.5px; margin-top: 1px; }

  /* ── Native card system ──────────────────────────────────────────
     Every boxed container (.metric, .panel, and similar one-off
     surfaces) currently reads as a "desktop box" — flat 1px border,
     barely-there shadow, tight padding. The same containers as soft
     floating cards (no hard border, real elevation, more breathing
     room) is the single biggest lever for the whole app feeling
     designed for a phone instead of squeezed onto one — this is the
     same visual language Stripe's and Linear's mobile surfaces use. */
  html.lp-app .metric,
  html.lp-app .panel {
    border: none;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
  }
  html.lp-app .metric { padding: 16px 18px; }
  html.lp-app .metric-val { font-size: 26px; }
  html.lp-app .panel-head { padding: 16px 18px; border-bottom: 1px solid rgba(0,0,0,.05); }
  html.lp-app .panel-body-pad { padding: 18px; }

  /* ── Native bottom-sheet modals ──────────────────────────────────
     A centered desktop dialog box is itself a "this is a website"
     tell on a phone — every native mobile pattern (iOS sheets,
     Material bottom sheets) slides contextual content up from the
     bottom edge instead. Re-anchoring the existing .modal-overlay/
     .modal here reuses every page's existing modal markup/JS
     untouched — only the positioning and shape change. */
  html.lp-app .modal-overlay { align-items: flex-end; }
  html.lp-app .modal {
    width: 100% !important; max-width: 100% !important;
    border-radius: 18px 18px 0 0; border: none;
    max-height: 86vh;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -4px 24px rgba(0,0,0,.12);
  }
  html.lp-app .modal::before {
    content: ''; display: block; width: 36px; height: 4px; border-radius: 2px;
    background: rgba(0,0,0,.15); margin: 10px auto 0;
  }
  html.lp-app .modal-head { padding: 14px 18px; }
  html.lp-app .modal-body { padding: 18px; }
  html.lp-app .modal-close { width: 36px; height: 36px; }
}