/* ============================================================================
 * global-sidebar.css — SLICE5-SIDEBAR-SHELL (Phase C, Slice 5)
 * App-wide sidebar for the main staff app, promoted from the mgmt-shell NAV
 * pattern. Scoped entirely under #globalSidebar / .gs-* — no other surface
 * is restyled. Phase B tokens: light surfaces #EEF0F3, white cards, flat
 * charcoal chrome, gold #C9A53F accent-only, Inter.
 * ========================================================================== */
#globalSidebar {
  --gs-bg: #EEF0F3;
  --gs-surface: #FFFFFF;
  --gs-surface-2: #F6F7F9;
  --gs-border: #DFE3E8;
  --gs-border-strong: #C9D1D9;
  --gs-text: #1D2733;
  --gs-muted: #5D6B78;
  --gs-faint: #8B96A1;
  --gs-charcoal: #14161A;
  --gs-charcoal-2: #1B1E24;
  --gs-gold: #C9A53F;
  --gs-gold-tint: #FAF3DD;
  --gs-blue: #1F6FD6;

  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  /* SIDEBAR-WIDEN-20261024: width is a per-device var (drag the right edge);
     232px is the built-in default the var falls back to. */
  width: var(--gs-w, 232px);
  z-index: 120;
  display: none; /* shown by global-sidebar.js only while signed in (#app visible) */
  flex-direction: column;
  flex-direction: column;
  background: var(--gs-surface);
  border-right: 1px solid var(--gs-border);
  color: var(--gs-text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  transform: translateX(0);
  transition: transform 0.18s ease;
}
body.gs-app-visible #globalSidebar { display: flex; }

/* Desktop: reserve room for the sidebar in the main app column only.
   Overlays (.overlay, position:fixed) are unaffected. */
/* SIDEBAR-PUSH-20261030 — Donny (2026-10-30): "I am able to open and close
   it, but when I do open the bar, everything needs to move to the right —
   the bar should not overlap the page." Three gaps in the rules above are
   closed here, CSS-only (the toggle, its localStorage persistence and every
   sidebar item are untouched):
   1. The #app margin now ANIMATES at the sidebar's own 0.18s ease, so the
      content slides with the bar instead of jumping while the bar slides.
   2. Full-page surfaces (.overlay.page-mode — Shop Management, Parts,
      Maintenance, Manager Board and every routed "page") are position:fixed
      at inset:0 and sit UNDER the sidebar (z 90 < 120): opening one left
      its left edge covered by the bar. A page now starts at the sidebar's
      right edge while the bar is open and returns to the full width when
      it is collapsed. Centered dialog overlays stay modal by design.
   3. The phone rules below get the same push (previously the phone
      sidebar was a pure overlap drawer). */
body.gs-has-sidebar #app { transition: margin-left 0.18s ease; }
body.gs-has-sidebar .overlay.page-mode { transition: left 0.18s ease; }
@media (min-width: 861px) {
  body.gs-has-sidebar.gs-app-visible #app { margin-left: var(--gs-w, 232px); }
  body.gs-has-sidebar.gs-sidebar-collapsed #app { margin-left: 0; }
  body.gs-has-sidebar.gs-sidebar-collapsed #globalSidebar { transform: translateX(-100%); }
  body.gs-has-sidebar.gs-app-visible .overlay.page-mode { left: var(--gs-w, 232px); }
  body.gs-has-sidebar.gs-sidebar-collapsed .overlay.page-mode { left: 0; }
}

/* Sidebar's own flat charcoal chrome strip (brand + collapse) */
#globalSidebar .gs-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 12px;
  background: var(--gs-charcoal);
  color: #fff;
}
#globalSidebar .gs-brand-tile {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--gs-gold);
  color: var(--gs-charcoal);
  font-weight: 700;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#globalSidebar .gs-brand-name { font-weight: 650; font-size: 14.5px; line-height: 1.15; }
#globalSidebar .gs-brand-sub { color: #B9C2CC; font-size: 11px; line-height: 1.2; }

#globalSidebar .gs-toggle {
  margin-left: auto;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid #343A43;
  border-radius: 8px;
  background: var(--gs-charcoal-2);
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
#globalSidebar .gs-toggle:focus-visible,
#globalSidebar .gs-item:focus-visible,
.gs-header-toggle:focus-visible,
#globalSidebarOpen:focus-visible {
  outline: 2px solid var(--gs-gold);
  outline-offset: 1px;
}

#globalSidebar .gs-nav { flex: 1 1 auto; overflow-y: auto; padding: 10px 10px 16px; background: var(--gs-bg); }
#globalSidebar .gs-sec { margin-top: 14px; }
#globalSidebar .gs-sec:first-child { margin-top: 2px; }
#globalSidebar .gs-sec-head {
  padding: 0 8px 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  /* FULL-AUDIT-20261028: was var(--gs-faint) #8B96A1 = 2.6:1 on the light
     sidebar at 11px. Section heads now use the muted tone (5.9:1). */
  color: var(--gs-muted);
}
#globalSidebar .gs-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 9px 10px;
  margin: 0 0 2px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--gs-text);
  font: inherit;
  font-size: 13.5px;
  font-weight: 550;
  text-align: left;
  cursor: pointer;
}
#globalSidebar .gs-item:hover { background: var(--gs-surface); border-color: var(--gs-border); }
#globalSidebar .gs-item.is-active {
  background: var(--gs-surface);
  border-color: var(--gs-border-strong);
  box-shadow: inset 3px 0 0 var(--gs-gold);
}
#globalSidebar .gs-item svg { flex: 0 0 auto; width: 19px; height: 19px; color: var(--gs-muted); }
#globalSidebar .gs-item.is-active svg { color: var(--gs-text); }
#globalSidebar .gs-label { flex: 1 1 auto; }
#globalSidebar .gs-soon {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gs-muted);
  background: var(--gs-gold-tint);
  border: 1px solid var(--gs-border);
  border-radius: 999px;
  padding: 2px 7px;
}

/* Honest "soon" notice (mgmt-shell soon style: says what is missing, no
   fake destination is opened). */
#globalSidebar .gs-soon-note {
  margin: 10px 2px 0;
  padding: 12px;
  background: var(--gs-surface);
  border: 1px solid var(--gs-border);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  font-size: 12.5px;
  color: var(--gs-muted);
  line-height: 1.45;
}
#globalSidebar .gs-soon-note strong { display: block; color: var(--gs-text); font-size: 13px; margin-bottom: 4px; }
#globalSidebar .gs-foot {
  padding: 10px 14px;
  border-top: 1px solid var(--gs-border);
  background: var(--gs-surface);
  /* FULL-AUDIT-20261028: was var(--gs-faint) #8B96A1 = 3.0:1 at 11.5px. */
  color: var(--gs-muted);
  font-size: 11.5px;
  line-height: 1.4;
}
/* DARKMODE-20261024: theme switch sits between the nav and the foot note,
   outside .gs-nav — give it the nav's inset so it lines up with the items. */
#globalSidebar #themeToggleBtnSide {
  margin: 10px 10px 2px;
  width: calc(100% - 20px);
  border-color: var(--gs-border);
  background: var(--gs-surface-2);
  font-weight: 600;
}

/* Re-open tab — visible only while the desktop sidebar is collapsed. */
#globalSidebarOpen {
  display: none;
  position: fixed;
  top: 64px;
  left: 0;
  z-index: 119;
  min-width: 44px;
  min-height: 44px;
  padding: 10px 8px;
  border: 1px solid var(--gs-border-strong, #C9D1D9);
  border-left: none;
  border-radius: 0 8px 8px 0;
  background: #14161A;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
}
@media (min-width: 861px) {
  body.gs-has-sidebar.gs-app-visible.gs-sidebar-collapsed #globalSidebarOpen { display: block; }
}

/* Header toggle injected by global-sidebar.js (first header control).
   ≥44px on every viewport. */
.gs-header-toggle {
  min-width: 44px;
  min-height: 44px;
  font-size: 15px;
}

/* Phone: sidebar is an off-canvas drawer behind the same toggle. */
.gs-scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 119;
  background: rgba(20, 22, 26, 0.45);
}
@media (max-width: 860px) {
  #globalSidebar { transform: translateX(-105%); width: min(300px, 86vw); z-index: 400; }
  body.gs-sidebar-open #globalSidebar { transform: translateX(0); }
  body.gs-sidebar-open .gs-scrim { display: block; }
  #globalSidebar .gs-item { min-height: 48px; }
  /* SIDEBAR-PUSH-20261030 (phone half): while the drawer is open the page
     shifts right by the drawer's own width — the bar never sits on top of
     the content, and closing it gives the space back. The scrim and the
     phone tab bar start at the drawer's right edge too, so the strip the
     content moved into stays tappable-to-close and the tab bar is not
     covered. The drawer's width formula is repeated verbatim so the push
     can never drift from the bar's real width. */
  body.gs-sidebar-open #app { margin-left: min(300px, 86vw); }
  body.gs-sidebar-open .overlay.page-mode { left: min(300px, 86vw); }
  body.gs-sidebar-open .gs-scrim { left: min(300px, 86vw); }
  body.gs-sidebar-open #mobileTabBar { left: min(300px, 86vw); }
}

/* ============================================================================
 * SIDEBAR-WIDEN-20261024 — drag-to-widen for the desktop sidebar.
 * Donny (2026-10-24): "my sidebar to like widen it and stuff doesn't work" —
 * the parity sidebar shipped with NO width control at all (fixed 232px
 * literal, no grip, no handler), while every other panel in the app (the
 * ☰ Menu, popups, the RO slide-over) already had a drag grip. This adds the
 * missing one, same pattern as the menu grip: a 14px strip on the sidebar's
 * FREE (right) edge — the sidebar docks left, so widening means dragging
 * RIGHT. Width rides the --gs-w var consumed by the #globalSidebar width
 * and the #app margin-left above; global-sidebar.js owns the drag, the
 * 200–420px clamp and the per-device persistence (localStorage
 * 'gsSidebarWidth'). Double-click the grip resets to the 232px default.
 * Desktop only: at phone widths the sidebar is an off-canvas drawer whose
 * width the ≤860px rules above own (min(300px, 86vw)).
 * ========================================================================== */
#globalSidebar .gs-grip { display: none; }
@media (min-width: 861px) {
  #globalSidebar .gs-grip {
    display: block; position: absolute; right: 0; top: 0; bottom: 0; width: 14px;
    cursor: ew-resize; z-index: 6; touch-action: none;
  }
  #globalSidebar .gs-grip::after {
    content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 2px;
    border-radius: 2px; background: transparent; transition: background 0.12s ease;
  }
  /* Grab pill mid-edge so the handle is discoverable, not a hover secret. */
  #globalSidebar .gs-grip::before {
    content: ''; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    width: 4px; height: 44px; border-radius: 3px;
    background: var(--gs-border-strong); opacity: 0.55; transition: opacity 0.12s ease, background 0.12s ease;
  }
  #globalSidebar .gs-grip:hover::after,
  #globalSidebar .gs-grip.dragging::after { background: var(--gs-gold); }
  #globalSidebar .gs-grip:hover::before,
  #globalSidebar .gs-grip.dragging::before { background: var(--gs-gold); opacity: 1; }
  /* Collapsed: the sidebar is off-canvas — its grip goes with it. */
  body.gs-sidebar-collapsed #globalSidebar .gs-grip { display: none; }
}