/* ════════════════════════════════════════════════════════════
   SHELL — framed SaaS look (user's request 2026-11-05, reference: a settings
   screen with an icon rail, big title + breadcrumb, soft grey cards and
   status pills). Colours stay GarmentOS denim + gold (user's choice).
   Loaded after portal.css / lotview.css, before motion.css. js/shell.js
   adds the rail behaviour, breadcrumb and the Settings side menu.
   ════════════════════════════════════════════════════════════ */
:root {
  --frame-bg: #e8eaee;          /* outside the app frame */
  --soft: #f6f7f9;              /* grey cards on the white frame */
  --soft-line: #eceef2;
  --rail-w: 68px;
}
[data-theme="dark"] { --frame-bg: #08090b; --soft: #1d1d22; --soft-line: #2a2a31; }

/* ── status pills: dot + word (Connected / Needs attention style) ── */
.badge, .tag { border-radius: 99px; gap: 6px; font-weight: 600; letter-spacing: 0; }
.badge-green::before, .badge-amber::before, .badge-red::before, .badge-blue::before, .tag.ok::before, .tag.due::before, .tag.risk::before, .tag.info::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; display: inline-block; margin-right: 1px; vertical-align: middle;
}
.tag { display: inline-flex; align-items: center; }

/* ── buttons: pills ── */
.btn { border-radius: 99px; padding-left: 16px; padding-right: 16px; }
.btn:not(.btn-primary):not(.btn-danger):not(.btn-black) { background: var(--card); }
.btn:not(.btn-primary):not(.btn-danger):not(.btn-black):hover { background: var(--z-100); }
.btn-sm { padding-left: 12px; padding-right: 12px; }
.btn-primary { box-shadow: 0 1px 0 rgba(255,255,255,.12) inset; }
.btn-soft, .btn-black { border-radius: 99px; }
.form-input { background: var(--card); }

/* ══════════════ COMPUTERS / TABLETS (phones keep the old menu) ══════════════ */
@media (min-width: 769px) {
  /* full screen (user's rule 2026-11-05: no outer frame / grey border around the app) */
  body { background: var(--card); }
  #app { height: 100vh; margin: 0; border-radius: 0; border: none; box-shadow: none; background: var(--card); overflow: hidden; }
  .main { background: var(--card); }

  /* top bar: breadcrumb + big title left, search + icons right */
  .topbar { margin: 0; height: auto; min-height: 92px; padding: 22px 28px 12px; background: transparent; box-shadow: none; border: none; border-radius: 0; align-items: flex-end; }
  .topbar-head { flex: 1 1 auto; min-width: 0; margin-right: auto; }
  .tb-crumb { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--z-400); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar-title { display: block !important; font-size: 31px; font-weight: 600; letter-spacing: -.035em; line-height: 1.1; color: var(--z-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar-search { flex: 0 1 300px; }
  .topbar-search input { background: var(--card); border: 1px solid var(--z-200); padding-top: 9px; padding-bottom: 9px; }
  .topbar > .icon-btn, .topbar-right .icon-btn { border: 1px solid var(--z-200); background: var(--card); width: 36px; height: 36px; }
  .topbar-right .icon-btn:hover, .topbar > .icon-btn:hover { background: var(--z-100); }
  .user-chip { border-left: none; padding-left: 4px; }
  .content { padding: 10px 28px 48px; }
  .page-head h1.dup-title { display: none; }
  .page-head h1 { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }

  /* soft grey cards on the white frame; tables stay on white */
  .fx-card, .card, .metric-card, .tile, .lv-kpis > div, .lot-row, .prog-card, .stagebar-card { background: var(--soft); border: 1px solid var(--soft-line); border-radius: 16px; box-shadow: none; }
  .fx-card.flush, .card:has(> .table-wrap), .card:has(> div > .table-wrap), .card:has(table) { background: var(--card); border-color: var(--z-200); }
  .card-header { border-bottom-color: var(--soft-line); }
  .card .card-title, .fx-h2 { text-transform: none; letter-spacing: -.01em; font-size: 15px; font-weight: 600; color: var(--z-900); }
  .metric-label { font-size: 11px; color: var(--z-500); }
  .lot-master { background: var(--card); border-color: var(--z-200); border-radius: 18px; }
  .lm-cuts .lot-row { background: var(--soft); }
  .pill-tabs { background: var(--soft); border-color: var(--soft-line); }
  .pm-card { border-radius: 20px; }
  .pm-card .card, .pm-card .fx-card { background: var(--soft); }

  /* ── ICON RAIL (default) ── */
  html:not(.sb-wide) .sidebar { width: var(--rail-w); border-right: 1px solid var(--soft-line); overflow-x: hidden; align-items: center; padding-top: 10px; }
  html:not(.sb-wide) .sidebar .sb-brand { background: none; margin: 4px 0 10px; padding: 0; justify-content: center; }
  html:not(.sb-wide) .sidebar .sb-brand .gos-mark { width: 38px; height: 38px; }
  html:not(.sb-wide) .sidebar .sb-brand .name, html:not(.sb-wide) .sb-org { display: none; }
  html:not(.sb-wide) .nav-section-label { font-size: 0; padding: 0; margin: 8px auto; width: 26px; height: 1px; background: var(--z-200); }
  .sidebar-bottom { position: sticky; bottom: 0; background: var(--card); z-index: 2; }
  html:not(.sb-wide) .sidebar > .nav-item, html:not(.sb-wide) .nav-group-head { width: 40px; height: 40px; margin: 2px auto; padding: 0; justify-content: center; font-size: 0; border-radius: 12px; gap: 0; flex-shrink: 0; }
  html:not(.sb-wide) .sidebar .nav-item svg { width: 19px; height: 19px; opacity: .75; }
  html:not(.sb-wide) .nav-group-head .chev { display: none; }
  html:not(.sb-wide) .sidebar > .nav-item.active, html:not(.sb-wide) .nav-group.has-active > .nav-group-head { background: var(--brand-lt); color: var(--brand); }
  html[data-theme="dark"]:not(.sb-wide) .sidebar > .nav-item.active, html[data-theme="dark"]:not(.sb-wide) .nav-group.has-active > .nav-group-head { color: var(--z-900); }
  html:not(.sb-wide) .sidebar .nav-item.active svg, html:not(.sb-wide) .nav-group.has-active > .nav-group-head svg { opacity: 1; }
  html:not(.sb-wide) .nav-group { width: 100%; }
  html:not(.sb-wide) .nav-group-body { display: none !important; }
  /* group flyout (Inventory, Sell) */
  html:not(.sb-wide) .nav-group.fly .nav-group-body { display: block !important; position: fixed; z-index: 600; width: 220px; margin: 0; padding: 8px; border: 1px solid var(--z-200); border-left: 1px solid var(--z-200); border-radius: 14px; background: var(--card); box-shadow: 0 18px 40px -12px rgba(15,20,35,.28); animation: moMenu .18s var(--mo-ease, ease) both; transform-origin: left top; }
  html:not(.sb-wide) .nav-group.fly .nav-group-body::before { content: attr(data-title); display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--z-400); padding: 4px 10px 6px; }
  html:not(.sb-wide) .nav-group.fly .nav-group-body .nav-item { margin: 1px 0; padding: 8px 10px; font-size: 13.5px; border-radius: 9px; }
  /* bottom: expand button, avatar, sign out — stacked */
  html:not(.sb-wide) .sidebar-bottom { flex-direction: column; gap: 8px; padding: 12px 0 14px; width: 100%; border-top: 1px solid var(--soft-line); }
  html:not(.sb-wide) .sidebar-bottom .side-user { display: none; }
  html:not(.sb-wide) .sidebar-bottom .icon-btn { margin: 0; }
  .sb-toggle svg .sbt-arrow { transition: transform .25s var(--mo-ease, ease); transform-origin: 14px 12px; }
  html.sb-wide .sb-toggle svg .sbt-arrow { transform: rotate(180deg); }
  html.sb-wide .sidebar-bottom .sb-toggle { order: 9; margin-left: 0; }
  .sidebar { transition: width .28s var(--mo-ease, ease); }
  html.sb-wide .sidebar { width: 236px; }

  /* name tooltip next to a rail icon */
  .rail-tip { position: fixed; z-index: 700; transform: translate(-4px, -50%); opacity: 0; pointer-events: none; background: var(--z-900); color: var(--card); font-size: 12.5px; font-weight: 600; padding: 6px 10px; border-radius: 8px; white-space: nowrap; transition: opacity .14s ease, transform .18s var(--mo-ease, ease); box-shadow: 0 8px 20px -8px rgba(0,0,0,.35); }
  .rail-tip.on { opacity: 1; transform: translate(0, -50%); }

  /* ── Settings: side menu + cards (like the reference) ── */
  #screen-settings.set-grid.active { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 22px; align-items: start; }
  #screen-settings.set-grid > * { grid-column: 2; }
  #screen-settings.set-grid > .set-nav { grid-column: 1; grid-row: 1 / span 60; position: sticky; top: 0; background: var(--soft); border: 1px solid var(--soft-line); border-radius: 16px; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
  .set-nav a { display: block; padding: 9px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 500; color: var(--z-600); cursor: pointer; transition: background-color .18s ease, color .18s ease; }
  .set-nav a:hover { color: var(--z-900); background: var(--card); }
  .set-nav a.on { background: var(--card); color: var(--z-900); font-weight: 600; box-shadow: 0 1px 2px rgba(15,20,35,.06); }
  .set-nav-sep { height: 1px; background: var(--soft-line); margin: 6px 8px; }
  #screen-settings.set-grid > .card { scroll-margin-top: 10px; }
}

/* phones: title lives in the phone header */
@media (max-width: 768px) {
  .topbar-head { display: none; }
}