/* ============================================================================
   WEB-1 · Responsive Web Shell (chrome only — no business logic)
   Reuses existing Design System tokens from index.html :root
   (--bg --surface --surface-2 --text --text-muted --border
    --accent(blue) --success(green) --warning(amber) --danger(red)
    --sp-1..6 --r-card --r-control). Adds only a teal action accent.
   Layout contract:
     desktop >=1024  : fixed left sidebar + fixed top bar, content <=1440
     mobile  <1024   : fixed bottom nav (5 slots) + "Ещё" sheet
   The legacy nav.tabs is hidden; the shell drives switchView() via web_shell.js.
   ========================================================================== */

:root {
  --teal: #14b8a6;                 /* action accent (teal/blue family) */
  --shell-sidebar-w: 240px;
  --shell-topbar-h: 60px;
  --shell-mobnav-h: 60px;
  --shell-content-max: 1440px;
}

/* ── shared status/freshness helpers (restrained, token-driven) ───────────── */
.shell-state { padding: var(--sp-6) var(--sp-4); text-align: center;
  color: var(--text-muted); font-size: var(--fs-body, 15px); }
.shell-state .shell-state-ico { font-size: 34px; line-height: 1; display: block;
  margin-bottom: var(--sp-3); opacity: .8; }
.shell-state .shell-state-title { color: var(--text); font-weight: 700;
  font-size: var(--fs-h2, 17px); margin-bottom: var(--sp-2); }
.shell-state.loading { color: var(--text-muted); }
.shell-state.error   { color: var(--danger); }
.shell-freshness { font-size: var(--fs-meta, 11px); color: var(--text-muted); }
.shell-freshness.stale { color: var(--warning); }
.shell-freshness.na    { color: var(--text-muted); }

/* ── legacy bottom nav retired; shell owns navigation ─────────────────────── */
nav.tabs { display: none !important; }

/* ============================ MOBILE-FIRST ================================= */
/* bottom navigation: exactly 5 slots, 44px+ touch targets, no h-overflow */
.shell-mobnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  display: flex; background: var(--surface); border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
  min-height: var(--shell-mobnav-h);
}
.shell-mobnav .shell-navbtn {
  flex: 1 1 0; min-width: 0; background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 10px; font-weight: 600;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: var(--sp-2) 2px; min-height: 44px;
}
.shell-mobnav .shell-navbtn .shell-ico { font-size: 20px; line-height: 1; }
.shell-mobnav .shell-navbtn .shell-lbl { overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; max-width: 100%; }
.shell-mobnav .shell-navbtn.active { color: var(--accent); }

/* sidebar + topbar hidden on mobile */
.shell-sidebar, .shell-topbar { display: none; }

/* "Ещё" sheet: remaining sections, honest overlay */
.shell-more-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 109;
}
.shell-more-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 110;
  background: var(--surface); border-top-left-radius: var(--r-card);
  border-top-right-radius: var(--r-card); border-top: 1px solid var(--border);
  padding: var(--sp-4) var(--sp-3) calc(var(--sp-4) + env(safe-area-inset-bottom));
  max-height: 70vh; overflow-y: auto;
}
.shell-more-sheet[hidden], .shell-more-backdrop[hidden] { display: none; }
.shell-more-sheet .shell-more-title { font-size: var(--fs-h2, 17px); font-weight: 700;
  margin: 0 var(--sp-1) var(--sp-3); }
.shell-more-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
.shell-more-grid .shell-navbtn {
  display: flex; align-items: center; gap: var(--sp-3); min-height: 48px;
  padding: var(--sp-3) var(--sp-3); border: 1px solid var(--border);
  border-radius: var(--r-control); background: var(--surface-2); color: var(--text);
  font-size: var(--fs-card, 14px); font-weight: 600; cursor: pointer; text-align: left;
}
.shell-more-grid .shell-navbtn .shell-ico { font-size: 18px; }
.shell-more-grid .shell-navbtn.active {
  border-color: var(--accent); color: var(--accent); }

/* ============================ DESKTOP >=1024 ============================== */
@media (min-width: 1024px) {
  /* make room for fixed chrome; override inline body padding */
  body {
    padding: calc(var(--shell-topbar-h) + var(--sp-5)) var(--sp-6) var(--sp-6)
             calc(var(--shell-sidebar-w) + var(--sp-6)) !important;
  }
  /* hide mobile chrome */
  .shell-mobnav, .shell-more-sheet, .shell-more-backdrop { display: none !important; }

  /* left sidebar */
  .shell-sidebar {
    display: flex; flex-direction: column;
    position: fixed; top: 0; left: 0; bottom: 0; width: var(--shell-sidebar-w);
    background: var(--surface); border-right: 1px solid var(--border);
    z-index: 95; overflow-y: auto;
  }
  .shell-brand {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-5) var(--sp-4) var(--sp-4);
    font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: var(--text);
  }
  .shell-brand .shell-brand-dot { width: 10px; height: 10px; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
  .shell-nav { display: flex; flex-direction: column; gap: 2px;
    padding: var(--sp-2) var(--sp-3) var(--sp-5); }
  .shell-nav .shell-navbtn {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-3); min-height: 44px;
    border: none; border-radius: var(--r-control); background: none;
    color: var(--text-muted); font-size: var(--fs-card, 14px); font-weight: 600;
    cursor: pointer; text-align: left; width: 100%;
  }
  .shell-nav .shell-navbtn .shell-ico { font-size: 18px; width: 22px; text-align: center; }
  .shell-nav .shell-navbtn:hover { background: var(--surface-2); color: var(--text); }
  .shell-nav .shell-navbtn.active {
    background: var(--accent-bg); color: var(--accent); }

  /* top bar */
  .shell-topbar {
    display: flex; align-items: center; gap: var(--sp-4);
    position: fixed; top: 0; right: 0; left: var(--shell-sidebar-w);
    height: var(--shell-topbar-h); z-index: 94;
    background: var(--surface); border-bottom: 1px solid var(--border);
    padding: 0 var(--sp-6);
  }
  .shell-top-chip {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border);
    border-radius: var(--r-control); background: var(--surface-2);
    color: var(--text-muted); font-size: var(--fs-sub, 13px); font-weight: 600;
    white-space: nowrap;
  }
  .shell-top-chip .shell-top-k { color: var(--text-muted); font-weight: 500; }
  .shell-top-chip .shell-top-v { color: var(--text); }
  .shell-top-spacer { flex: 1 1 auto; }
  .shell-top-actions { display: flex; align-items: center; gap: var(--sp-2); }
  .shell-top-actions .shell-top-btn {
    width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border);
    background: var(--surface-2); color: var(--text-muted); cursor: pointer;
    font-size: 16px; display: inline-flex; align-items: center; justify-content: center;
  }

  /* cap + centre content, keep the "Товары" sticky header aligned to content col */
  body > .view { max-width: var(--shell-content-max); margin-left: auto; margin-right: auto; }
  #tovary-topnav {
    max-width: var(--shell-content-max); margin-left: auto; margin-right: auto;
    top: var(--shell-topbar-h);
  }
}

/* wide desktop: keep the "Товары" sticky header clear of the fixed top bar too */
@media (min-width: 1024px) {
  #tovary-topnav { background: var(--bg); }
}