/* ==========================================================================
   Shared sidebar navigation — Warehouse OS (light, graphite design system)
   ========================================================================== */

/* ── Sidebar ────────────────────────────────────────────────────────────── */
#wh-sidebar {
  position: fixed;
  top: 0; left: 0;
  width: 240px;
  height: 100vh;
  background: var(--card);
  color: var(--muted);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  border-right: 1px solid var(--border);
  box-shadow: none;
  transition: transform .25s ease;
}

/* Collapsed state on small screens */
#wh-sidebar.collapsed { transform: translateX(-240px); }

#wh-sidebar .nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  text-decoration: none;
  cursor: pointer;
}
#wh-sidebar .nav-logo-mark {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: var(--primary);
  color: var(--primary-fg);
  display: grid; place-items: center;
  font-weight: 800; font-size: .82rem;
  flex: none;
}
#wh-sidebar .nav-logo-text { display: flex; flex-direction: column; line-height: 1.2; }
#wh-sidebar .nav-logo .logo-title {
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text);
}
#wh-sidebar .nav-logo .logo-sub {
  font-size: .68rem;
  font-weight: 500;
  color: var(--faint);
  margin-top: 1px;
}

/* ── Shared field block (warehouse picker / api / operator) ─────────────── */
#wh-sidebar .nav-warehouse-picker,
#wh-sidebar .nav-api-base,
#wh-sidebar .nav-operator {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
#wh-sidebar .nav-operator { display: flex; flex-direction: column; gap: 6px; }
#wh-sidebar .nav-warehouse-picker label,
#wh-sidebar .nav-api-base label,
#wh-sidebar .nav-operator label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 5px;
}
#wh-sidebar .nav-operator label { margin-bottom: 0; }
#wh-sidebar .nav-warehouse-picker select,
#wh-sidebar .nav-api-base input,
#wh-sidebar .nav-operator input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 9px;
  font-size: .82rem;
  font-weight: 500;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
#wh-sidebar .nav-api-base input { font-family: var(--wh-mono); font-size: .78rem; }
#wh-sidebar .nav-warehouse-picker select {
  cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23737373' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 8px;
  padding-right: 22px;
}
#wh-sidebar .nav-warehouse-picker select:hover:not(:disabled),
#wh-sidebar .nav-api-base input:hover,
#wh-sidebar .nav-operator input:hover { border-color: var(--border-strong); }
#wh-sidebar .nav-warehouse-picker select:focus,
#wh-sidebar .nav-api-base input:focus,
#wh-sidebar .nav-operator input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--wh-ring);
}
#wh-sidebar .nav-warehouse-picker select:disabled { opacity: .55; cursor: not-allowed; }
#wh-sidebar .nav-warehouse-picker select::placeholder,
#wh-sidebar .nav-api-base input::placeholder,
#wh-sidebar .nav-operator input::placeholder { color: var(--faint); }
#wh-sidebar .nav-warehouse-id {
  margin-top: 5px;
  font-family: var(--wh-mono);
  font-size: .66rem;
  color: var(--faint);
  word-break: break-all;
  line-height: 1.35;
}
#wh-sidebar .nav-api-hint {
  margin-top: 5px;
  font-size: .64rem;
  color: var(--faint);
  line-height: 1.35;
}

/* The per-page #warehouseId / operator inputs are redundant — the sidebar is
   the single source of truth. Keep the DOM nodes (JS handlers find them) but
   hide the wrapping groups. */
body.has-sidebar #warehouseId { display: none; }
body.has-sidebar .form-group:has(#warehouseId),
body.has-sidebar .form-group:has(#operatorId),
body.has-sidebar .form-group:has(#operatorName) { display: none !important; }

/* The sidebar owns warehouse selection, so an otherwise-empty config-strip
   holding only the hidden #warehouseId renders blank — drop it. */
body.has-sidebar .config-strip:has(#warehouseId):not(:has(button, select, textarea, input:not(#warehouseId))) {
  display: none;
}

/* ── Nav list ───────────────────────────────────────────────────────────── */
#wh-sidebar nav { flex: 1; overflow-y: auto; padding: 8px 0 10px; }

#wh-sidebar .nav-section-label {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 12px 18px 5px;
}
#wh-sidebar .nav-section-label:first-child { padding-top: 6px; }

#wh-sidebar .nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 1px 10px;
  padding: 7px 10px;
  font-size: .84rem;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--muted);
  text-decoration: none;
  border-radius: var(--radius);
  transition: background .14s ease, color .14s ease;
  cursor: pointer;
}
#wh-sidebar .nav-item:hover { background: var(--wh-surface-2); color: var(--text); }
#wh-sidebar .nav-item.active {
  background: var(--primary);
  color: var(--primary-fg);
  font-weight: 600;
}
#wh-sidebar .nav-item.active:hover { background: var(--primary-dark); }

.nav-icon { display: grid; place-items: center; width: 18px; height: 18px; flex: none; color: inherit; }

#wh-sidebar .nav-footer {
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  font-size: .68rem;
  color: var(--faint);
  flex-shrink: 0;
}

/* ── Toggle button (mobile / collapse) ─────────────────────────────────── */
#wh-nav-toggle {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 1100;
  width: 38px;
  height: 38px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--border);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--text);
  font-size: 1.1rem;
  box-shadow: var(--wh-shadow-1);
}
#wh-nav-toggle:hover { background: var(--wh-surface-2); }

/* ── Overlay (mobile) ───────────────────────────────────────────────────── */
#wh-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .35);
  z-index: 999;
}
#wh-overlay.visible { display: block; }

/* ── Body offset — push page content right of the sidebar ──────────────── */
body.has-sidebar { padding-left: 240px; }

@media (max-width: 768px) {
  body.has-sidebar { padding-left: 0; }
  #wh-nav-toggle { display: flex; }
  #wh-sidebar { transform: translateX(-240px); }
  #wh-sidebar.open { transform: translateX(0); }
}