/* JEM Warehouse Logistics Hub v2 — shell: app frame, sidebar, topbar, bottom nav, hero.
   Split verbatim from public/styles.css (V2-SPEC §2.3): rules are copied unchanged and in their
   original relative order, so the cascade (and the look) is identical to v1. Load order on every
   page: base.css -> shell.css -> components.css -> pages/<name>.css. */

/* v2 page frame. Replaces v1's #appView (same rule). */
.app{display:flex;min-height:100vh}

    /* ---------- App shell ---------- */
    .shell { display:flex; min-height:100vh; }
    .sidebar {
      width:var(--side); flex:0 0 var(--side); background:var(--navy);
      color:#CBD5E1; position:fixed; inset:0 auto 0 0; padding:18px 14px; display:none;
      flex-direction:column; gap:4px; z-index:30; overflow-y:auto;
    }
    .brand { display:flex; align-items:center; gap:11px; padding:6px 8px 16px; }
    .brand .mark { width:40px; height:40px; border-radius:11px; background:linear-gradient(135deg,var(--jem),var(--jem2)); display:grid; place-items:center; color:var(--mark-ink); font-size:20px; flex:0 0 auto; box-shadow:0 6px 16px rgba(var(--accent-rgb),.35); }
    .brand b { color:#fff; font-size:15px; display:block; line-height:1.15; }
    .brand span { font-size:11px; color:var(--accent-muted); font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
    .nav-group-label { font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:#5B7186; font-weight:800; padding:14px 10px 6px; }
    .navlink { display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:transparent; color:#AEC0D2; padding:11px 12px; border-radius:11px; font-weight:700; font-size:14px; min-height:46px; transition:background .15s,color .15s; }
    .navlink .ico { font-size:19px; flex:0 0 auto; color:var(--accent-muted); }
    .navlink:hover { background:#1B2C45; color:#fff; }
    .navlink.active { background:linear-gradient(90deg,rgba(var(--accent-rgb),.22),rgba(var(--accent-rgb),.05)); color:#fff; box-shadow:inset 3px 0 0 var(--jem); }
    .navlink.active .ico { color:var(--jem); }
    .side-foot { margin-top:auto; padding:14px 10px 4px; font-size:11px; color:#5B7186; }
    .side-foot b { color:var(--accent-soft-text); font-weight:800; }

    .content { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
    .mobiletop { background:var(--navy); color:#fff; padding:14px 16px calc(14px + env(safe-area-inset-bottom,0)); position:sticky; top:0; z-index:20; }
    .mobiletop .row1 { display:flex; align-items:center; gap:11px; }
    .mobiletop .mark { width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg,var(--jem),var(--jem2)); display:grid; place-items:center; color:var(--mark-ink); font-size:18px; flex:0 0 auto; }
    .mobiletop b { font-size:15px; line-height:1.1; }
    .mobiletop .sub { color:var(--accent-soft-text); font-size:11px; font-weight:700; }
    main { flex:1 1 auto; padding:16px; padding-bottom:96px; max-width:1180px; width:100%; margin:0 auto; }

    /* ---------- Bottom nav (mobile) ---------- */
    .bottomnav {
      position:fixed; left:0; right:0; bottom:0; z-index:40; background:rgba(255,255,255,.94);
      backdrop-filter:saturate(160%) blur(10px); border-top:1px solid var(--line);
      display:grid; grid-template-columns:repeat(5,1fr); padding-bottom:env(safe-area-inset-bottom,0);
    }
    .bnav { background:transparent; border-radius:0; min-height:60px; display:grid; place-items:center; gap:2px; color:var(--ink3); font-size:10.5px; font-weight:700; padding:7px 2px; }
    .bnav .ico { font-size:21px; }
    .bnav.active { color:var(--jem2); }
    .bnav.active .ico { transform:translateY(-1px); }
    .bnav.newbtn { color:#fff; }
    .bnav.newbtn .ico { width:42px; height:42px; border-radius:13px; background:linear-gradient(135deg,var(--jem),var(--jem2)); color:#fff; font-size:22px; box-shadow:0 6px 16px rgba(var(--accent-rgb),.4); margin-top:-10px; }
    .bnav.newbtn span { color:var(--ink3); }

/* v1 widened the bottom nav from 5 to 6 columns for the Dashboard tab; v2 adds On Review, so the
   grid now takes as many equal columns as there are tabs instead of a hard-coded count. */
.bottomnav { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); }
.bnav { padding:7px 1px; }

    /* ---------- Hero ---------- */
    .hero { position:relative; overflow:hidden; border-radius:var(--r18); padding:22px; color:#fff;
      background:radial-gradient(120% 140% at 100% 0%, var(--hero-stop) 0%, var(--navy) 55%); box-shadow:var(--shadow); margin-bottom:16px; }
    .hero::after { content:""; position:absolute; right:-40px; top:-40px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle,rgba(var(--accent-rgb),.35),transparent 65%); pointer-events:none; }
    .hero .eyebrow { display:inline-flex; align-items:center; gap:7px; background:rgba(var(--accent-rgb),.18); color:var(--accent-soft-text); font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:5px 11px; border-radius:999px; }
    .hero h1 { font-size:23px; margin:11px 0 4px; }
    .hero .lede { color:#C6D6E6; font-size:13.5px; max-width:560px; }
    .hero-bar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:16px; position:relative; z-index:1; }
    .hero-loc { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); border-radius:11px; padding:4px 6px 4px 12px; }
    .hero-loc .ico { color:var(--jem); font-size:17px; }
    .hero-loc select { min-height:36px; background:transparent; border:0; color:#fff; font-weight:800; width:auto; padding:6px 8px; }
    .hero-loc select:focus { box-shadow:none; }
    .hero-loc option { color:var(--ink1); }
    .hero-date { display:inline-flex; align-items:center; gap:8px; color:#C6D6E6; font-size:13px; font-weight:700; }
    .hero-date .ico { color:var(--jem); font-size:16px; }

/* hub theme overrides for shell elements */
    body[data-theme="fast"] .bnav.newbtn .ico { color:#16203F; }

    /* The eyebrow chip is ALWAYS translucent — rgba(var(--accent-rgb),.18) over the dark hero —
       in every hub, so it needs the LIGHT ink, not the dark one used on solid gold buttons.
       The old #5A4410 measured ~1.1:1 against it: brown on navy, effectively invisible. */
    body[data-theme="fast"] .hero .eyebrow { color:var(--accent-soft-text); }

    /* smooth recolor when hub changes */
    .sidebar, .mobiletop, .hero, .btn.primary, .bnav.newbtn .ico, .brand .mark, .navlink.active { transition:background .25s ease, color .25s ease, box-shadow .25s ease; }

.topbar{background:#fff;border-bottom:1px solid var(--line);padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;position:sticky;top:0;z-index:10}
.tb-title{font-weight:800;font-size:16px}
.tb-right{display:flex;align-items:center;gap:8px}
.hub{min-height:36px;width:auto;padding:6px 10px;font-weight:700}
.who{font-size:12px;color:var(--ink3);font-weight:700}

/* --- topbar: the account button has to survive a 360px phone --- */
.topbar{flex-wrap:wrap}
.tb-right{flex-wrap:wrap;justify-content:flex-end}
.hub-static{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:4px 11px;border-radius:999px;font-size:12px;font-weight:800;background:var(--jemSoft);color:var(--jem2);border:1px solid #A7E8EF}
.hub-static.unassigned{background:var(--negSoft);color:#B91C1C;border-color:#FECACA}
@media (max-width:520px){ .who{display:none} }

/* ---------- v2: navigation entries are real links ----------
   v1 rendered the sidebar and bottom-nav entries as <button>s and inherited the button reset
   (no underline, inherited font). As <a href> they need the same reset to look identical. */
a.navlink, a.bnav { text-decoration:none; }
a.navlink:focus-visible, a.bnav:focus-visible { outline:2px solid var(--jem); outline-offset:-2px; }

/* On Review count badge (new in v2) */
.nav-count { margin-left:auto; min-width:22px; height:22px; padding:0 7px; border-radius:999px; background:var(--warn); color:#fff; font-size:11.5px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; }
.bnav { position:relative; }
.bnav .nav-count { position:absolute; top:5px; left:calc(50% + 6px); margin-left:0; min-width:18px; height:18px; padding:0 5px; font-size:10px; }

/* ---------- Desktop (shell part of the v1 desktop block) ---------- */
@media (min-width:900px) {
  .sidebar { display:flex; }
  .content { margin-left:var(--side); }
  .mobiletop { display:none; }
  .bottomnav { display:none; }
  main { padding:26px 30px 40px; }
  .hero h1 { font-size:27px; }
}