/* Layout v2 — loaded last. Same palette/tokens as before; changes layout only. */

/* 1. Cleaner canvas: no dot-grid, no corner watermark behind data */
body{background-image:none;}

/* 2. Mobile bottom bar: theme-aware, 48px+ targets, pill active state */
@media(max-width:860px){
  .bnav{background:color-mix(in srgb,var(--surface) 94%,transparent);border-top:1px solid var(--border);box-shadow:0 -4px 20px -8px rgba(21,29,58,.18);padding-top:4px;}
  .bnav-item{min-height:48px;position:relative;border-radius:var(--r-md);}
  .bnav-item .blabel{font-size:11px;font-weight:600;}
  .bnav-item.active{background:transparent;color:var(--accent);}
  .bnav-item.active::before{content:"";position:absolute;top:2px;width:40px;height:26px;border-radius:var(--r-pill);background:var(--alt);z-index:0;}
  .bnav-item .bicon,.bnav-item .blabel{position:relative;z-index:1;}
  .page{padding:var(--sp-4) var(--sp-3) calc(84px + env(safe-area-inset-bottom));}
}

/* 3. Dark mode: top nav + controls were hardcoded light (brand text vanished) */
:root[data-theme="dark"] nav{
  background:radial-gradient(130% 220% at 92% -60%,rgba(91,130,255,.14),transparent 55%),linear-gradient(120deg,#131a2b 0%,#161c2c 55%,#1a2236 100%);
}
:root[data-theme="dark"] .syncbadge,
:root[data-theme="dark"] .lockbtn,
:root[data-theme="dark"] .takectrlbtn:not(:disabled){background:var(--s2);}
:root[data-theme="dark"] .syncbadge.ok{border-color:color-mix(in srgb,var(--green) 40%,transparent);}
:root[data-theme="dark"] .syncbadge.err{border-color:color-mix(in srgb,var(--red) 40%,transparent);}
:root[data-theme="dark"] .syncbadge.syncing{border-color:color-mix(in srgb,var(--amber) 40%,transparent);}

/* 5. Mobile: all five tabs always visible (Menu, Cover, Sales, Manager, Inventory) */
#bnav .bnav-item[data-domain-group]{display:flex !important;}

/* 6. Mobile drawer: tighter rows so ~2x more sections fit on screen */
@media(max-width:860px){
  #sections-list > .sections-group{padding:0;margin-bottom:var(--sp-2);}
  #sections-list > .sections-group > .sections-row{padding:2px 4px;min-height:0;}
  #sections-list > .sections-group > .sections-row .sections-nav-hit{padding:6px 6px;}
  #sections-list > .sections-group > .sections-row .recents-icon,
  #sections-list > .sections-group > .sections-row .recents-icon-svg{width:34px;height:34px;}
  .sections-toggle{min-width:44px;min-height:44px;}
}