/* ============================================================
   PrairieOps HUB — hub.css
   History: W0-A dark sidebar → UI-1 light top-nav trial →
   UI-1b DARK top-nav (final, 2026-06-09): Isaiah kept the
   JD-Ops-style top bar, reverted to the dark palette.
   Self-contained. Does NOT import the mobile app CSS.

   Gold usage rule: #C8953D (brand) for borders/buttons/fills;
   --hub-accent-text (lighter gold) for gold TEXT on dark.
   ============================================================ */

:root {
  /* UI-1b (2026-06-09): back to dark after a light-theme trial —
     Isaiah kept the top-nav layout, reverted the palette. */
  --hub-bg:        #0b0b0c;
  --hub-panel:     #161618;
  --hub-panel-2:   #1f1f23;
  --hub-border:    #2a2a2e;
  --hub-text:      #f4f4f5;
  --hub-text-dim:  #a1a1aa;
  --hub-text-mut:  #71717a;
  /* UI-1d (2026-06-09): MONOCHROME, Linear-style (Isaiah) — black/
     white/greys only; color is reserved for STATUS (amber low-stock,
     red errors). Accent history: green → gold trials → green → mono. */
  --hub-accent:      #f4f4f5;
  --hub-accent-text: #f4f4f5;
  --hub-accent-dim:  rgba(255, 255, 255, 0.08);
  --hub-amber:     #fbbf24;
  --hub-amber-bg:  rgba(251, 191, 36, 0.12);
  --hub-error:     #f87171;
  --hub-radius:    12px;
  --hub-radius-sm: 8px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--hub-bg);
  color: var(--hub-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

#hub-root { min-height: 100vh; }

/* ── Frame: sidebar + content (UI-1f — original W0 layout) ── */
.hub-frame { display: flex; min-height: 100vh; }

.hub-sidebar {
  width: 240px;
  flex: 0 0 240px;
  background: var(--hub-panel);
  border-right: 1px solid var(--hub-border);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hub-brand { display: flex; align-items: center; gap: 7px; padding: 4px 8px 10px; }
.hub-brand-img { height: 24px; width: auto; display: block; }
.hub-brand-sub {
  font-size: 12px; font-weight: 700; color: var(--hub-text);
  text-transform: uppercase; letter-spacing: 1px;
}

.hub-nav { display: flex; flex-direction: column; gap: 2px; }
.hub-nav-item {
  display: flex; align-items: center;
  padding: 9px 12px;
  border-radius: var(--hub-radius-sm);
  color: var(--hub-text-dim);
  text-decoration: none;
  font-size: 14px; font-weight: 500;
  transition: background 0.12s ease, color 0.12s ease;
}
.hub-nav-item:hover { background: var(--hub-panel-2); color: var(--hub-text); }
.hub-nav-item.active {
  background: var(--hub-accent-dim);
  color: var(--hub-text);
  font-weight: 600;
}

/* ── Content column ───────────────────────────────────────── */
.hub-content { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }

.hub-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 28px;
  border-bottom: 1px solid var(--hub-border);
  background: var(--hub-bg);
}
.hub-header-title { font-size: 18px; font-weight: 700; }
.hub-header-user { display: flex; align-items: center; gap: 10px; }
.hub-user-name { font-size: 13px; color: var(--hub-text-dim); }
.hub-user-role {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--hub-accent-text);
  background: var(--hub-accent-dim);
  padding: 3px 8px; border-radius: 999px;
}
.hub-signout, .hub-gate-signout {
  font: inherit; font-size: 13px; cursor: pointer;
  color: var(--hub-text-dim);
  background: var(--hub-panel-2);
  border: 1px solid var(--hub-border);
  border-radius: var(--hub-radius-sm);
  padding: 6px 12px;
}
.hub-signout:hover, .hub-gate-signout:hover { color: var(--hub-text); border-color: #f4f4f5; }

.hub-main { flex: 1 1 auto; padding: 28px; overflow-y: auto; }

/* ── Placeholder module panel ─────────────────────────────── */
.hub-placeholder {
  max-width: 640px;
  background: var(--hub-panel);
  border: 1px solid var(--hub-border);
  border-radius: var(--hub-radius);
  padding: 28px;
}
.hub-ph-badge {
  display: inline-block;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--hub-text-mut);
  background: var(--hub-panel-2);
  border: 1px solid var(--hub-border);
  padding: 3px 9px; border-radius: 999px;
  margin-bottom: 14px;
}
.hub-ph-title { margin: 0 0 8px; font-size: 24px; font-weight: 800; }
.hub-ph-copy { margin: 0 0 14px; color: var(--hub-text-dim); }
.hub-ph-param {
  font-size: 13px; color: var(--hub-text-dim);
  background: var(--hub-panel-2); border: 1px solid var(--hub-border);
  border-radius: var(--hub-radius-sm); padding: 10px 12px; margin-bottom: 12px;
}
.hub-ph-param code { color: var(--hub-accent-text); font-size: 12px; }
.hub-ph-hint { font-size: 12px; color: var(--hub-text-mut); }

/* ── Gate screens (signed-out / limited) ──────────────────── */
.hub-gate-screen {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.hub-gate-card {
  max-width: 460px; width: 100%;
  background: var(--hub-panel);
  border: 1px solid var(--hub-border);
  border-radius: var(--hub-radius);
  padding: 32px;
  text-align: center;
}
.hub-gate-brand { font-size: 20px; font-weight: 800; margin-bottom: 20px; }
.hub-gate-brand span { color: var(--hub-accent-text); text-transform: uppercase; font-size: 13px; letter-spacing: 1px; }
.hub-gate-title { margin: 0 0 10px; font-size: 22px; font-weight: 700; }
.hub-gate-copy { margin: 0 0 10px; color: var(--hub-text-dim); }
.hub-gate-sub { margin: 0 0 4px; color: var(--hub-text-mut); font-size: 13px; }
.hub-gate-signout { margin-top: 18px; }

/* ── Login card (W0-C) ────────────────────────────────────── */
.hub-login-card {
  max-width: 400px; width: 100%;
  background: var(--hub-panel);
  border: 1px solid var(--hub-border);
  border-radius: var(--hub-radius);
  padding: 30px 28px;
  text-align: center;
}
.hub-login-sub { margin: 0 0 20px; color: var(--hub-text-dim); font-size: 13px; }
.hub-login-brand {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-bottom: 18px;
}
.hub-login-logo { height: 34px; width: auto; display: block; }

.hub-login-tabs {
  display: flex; gap: 4px;
  background: var(--hub-bg);
  border: 1px solid var(--hub-border);
  border-radius: var(--hub-radius-sm);
  padding: 4px; margin-bottom: 18px;
}
.hub-login-tab {
  flex: 1; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  color: var(--hub-text-dim);
  background: transparent; border: none;
  border-radius: 6px; padding: 8px 10px;
}
.hub-login-tab.active { background: var(--hub-panel-2); color: var(--hub-text); }

.hub-login-panel { display: flex; flex-direction: column; gap: 14px; text-align: left; }
.hub-field { display: flex; flex-direction: column; gap: 6px; }
.hub-field span { font-size: 12px; font-weight: 600; color: var(--hub-text-dim); }
.hub-field input {
  font: inherit; font-size: 15px;
  color: var(--hub-text);
  background: var(--hub-bg);
  border: 1px solid var(--hub-border);
  border-radius: var(--hub-radius-sm);
  padding: 11px 12px;
}
.hub-field input:focus { outline: none; border-color: var(--hub-accent); }

.hub-login-submit {
  margin-top: 4px;
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  color: var(--hub-text-dim);
  background: var(--hub-panel-2);
  border: 1px solid var(--hub-border);
  border-radius: var(--hub-radius-sm);
  padding: 12px 14px;
  transition: background 0.12s ease;
}
.hub-login-submit:hover { border-color: #f4f4f5; color: var(--hub-text); }
.hub-login-submit:disabled { opacity: 0.6; cursor: default; }

.hub-login-error {
  min-height: 18px; margin-top: 14px;
  font-size: 13px; color: var(--hub-error); text-align: center;
}

/* ── Equipment registry (W1-A) ────────────────────────────── */
.hub-eq { width: 100%; }

.hub-eq-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 16px;
}
.hub-eq-input, .hub-eq-select {
  font: inherit; font-size: 14px;
  color: var(--hub-text);
  background: var(--hub-panel);
  border: 1px solid var(--hub-border);
  border-radius: var(--hub-radius-sm);
  padding: 9px 12px;
}
.hub-eq-input { flex: 1 1 220px; min-width: 180px; }
.hub-eq-input:focus, .hub-eq-select:focus { outline: none; border-color: var(--hub-accent); }
.hub-eq-count { margin-left: auto; font-size: 13px; color: var(--hub-text-mut); white-space: nowrap; }

.hub-eq-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--hub-panel);
  border: 1px solid var(--hub-border);
  border-radius: var(--hub-radius);
  overflow: hidden;
}
.hub-eq-table thead th {
  text-align: left;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--hub-text-mut);
  background: var(--hub-panel-2);
  padding: 10px 14px;
  border-bottom: 1px solid var(--hub-border);
  white-space: nowrap;
}
.hub-eq-th.sortable { cursor: pointer; user-select: none; }
.hub-eq-th.sortable:hover { color: var(--hub-text); }
.hub-eq-table tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--hub-border);
  font-size: 14px;
  color: var(--hub-text-dim);
  vertical-align: middle;
}
.hub-eq-table tbody tr:last-child td { border-bottom: none; }
.hub-eq-row { cursor: pointer; transition: background 0.1s ease; }
.hub-eq-row:hover { background: var(--hub-panel-2); }
.hub-eq-row.inactive td { color: var(--hub-text-mut); }
.hub-eq-name { color: var(--hub-text); font-weight: 600; }
.hub-eq-row.inactive .hub-eq-name { color: var(--hub-text-mut); }
.hub-eq-badge {
  margin-left: 8px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--hub-text-mut);
  background: var(--hub-panel-2);
  border: 1px solid var(--hub-border);
  padding: 2px 7px; border-radius: 999px;
}
.hub-eq-cat {
  margin-left: 8px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--hub-accent-text);
  background: var(--hub-accent-dim);
  padding: 2px 7px; border-radius: 999px;
}
.hub-eq-empty {
  background: var(--hub-panel);
  border: 1px solid var(--hub-border);
  border-radius: var(--hub-radius);
  padding: 32px;
  color: var(--hub-text-mut);
  text-align: center;
}
.hub-eq-backwrap { margin-top: 14px; }
.hub-eq-back { color: var(--hub-accent-text); text-decoration: none; font-size: 14px; }
.hub-eq-back:hover { text-decoration: underline; }

/* ── Equipment profile (W1-B) ─────────────────────────────── */
.hub-eq-inactive-banner {
  background: var(--hub-amber-bg);
  color: var(--hub-amber);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: var(--hub-radius-sm);
  font-size: 13px; font-weight: 600;
  padding: 10px 14px; margin-bottom: 16px;
}
.hub-eq-profile-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px; margin-bottom: 18px;
}
.hub-eq-head-back { justify-self: start; }
.hub-eq-head-center { text-align: center; }
.hub-eq-profile-actions { justify-self: end; }
@media (max-width: 900px) {
  .hub-eq-profile-head { grid-template-columns: 1fr; }
  .hub-eq-head-back, .hub-eq-profile-actions { justify-self: center; }
}
.hub-eq-profile-title { margin: 0 0 4px; font-size: 24px; font-weight: 800; }
.hub-eq-profile-sub { color: var(--hub-text-dim); font-size: 14px; }
.hub-eq-profile-actions { display: flex; gap: 8px; }

.hub-eq-cta {
  /* UI-1e (2026-06-09): identical to .hub-eq-btn; hover = white outline. */
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  color: var(--hub-text-dim);
  background: var(--hub-panel-2);
  border: 1px solid var(--hub-border);
  border-radius: var(--hub-radius-sm);
  padding: 9px 16px;
  transition: background 0.12s ease;
}
.hub-eq-cta:hover { border-color: #f4f4f5; color: var(--hub-text); }
.hub-eq-cta:disabled { opacity: 0.6; cursor: default; }
.hub-eq-btn {
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  color: var(--hub-text-dim);
  background: var(--hub-panel-2);
  border: 1px solid var(--hub-border);
  border-radius: var(--hub-radius-sm);
  padding: 9px 16px;
}
.hub-eq-btn:hover { color: var(--hub-text); border-color: #f4f4f5; }
.hub-eq-btn:disabled { opacity: 0.6; cursor: default; }

.hub-eq-card {
  background: var(--hub-panel);
  border: 1px solid var(--hub-border);
  border-radius: var(--hub-radius);
  padding: 20px 22px;
  margin: 0 0 14px;
}

/* Detail views: cards flow into responsive columns on wide screens. */
.hub-eq-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 14px;
  align-items: start;
}
.hub-eq-cards .hub-eq-card { margin: 0; }
.hub-eq-card-title {
  margin: 0 0 12px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--hub-text-mut);
}
.hub-eq-card-empty { font-size: 13px; color: var(--hub-text-mut); }
.hub-eq-detail {
  display: flex; gap: 14px;
  padding: 7px 0;
  border-bottom: 1px solid var(--hub-border);
  font-size: 14px;
}
.hub-eq-detail:last-child { border-bottom: none; }
.hub-eq-detail-label { flex: 0 0 140px; color: var(--hub-text-mut); }
.hub-eq-detail-value { color: var(--hub-text); white-space: pre-wrap; word-break: break-word; }

/* ── Equipment form (W1-C) ────────────────────────────────── */
.hub-eq-form { max-width: 1280px; margin: 0 auto; }
.hub-eq-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.hub-eq-field { margin-bottom: 0; }
.hub-eq-field input, .hub-eq-field select, .hub-eq-field textarea {
  font: inherit; font-size: 14px;
  color: var(--hub-text);
  background: var(--hub-bg);
  border: 1px solid var(--hub-border);
  border-radius: var(--hub-radius-sm);
  padding: 10px 12px;
  width: 100%;
  resize: vertical;
}
.hub-eq-field input:focus, .hub-eq-field select:focus, .hub-eq-field textarea:focus {
  outline: none; border-color: var(--hub-accent);
}
.hub-eq-form > .hub-eq-card > .hub-eq-field { display: flex; margin-top: 14px; }
.hub-eq-form-actions {
  display: flex; align-items: center; gap: 10px;
  margin-top: 4px;
}
.hub-eq-form-error { font-size: 13px; color: var(--hub-error); }

/* ── Maintenance (W2-B/W2-C) ──────────────────────────────── */
.hub-mnt-note { font-size: 13px; color: var(--hub-text-mut); }
.hub-mnt-toggle {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--hub-text-dim);
  cursor: pointer; white-space: nowrap;
}
.hub-mnt-row { cursor: pointer; transition: background 0.1s ease; }
.hub-mnt-row:hover { background: var(--hub-panel-2); }

/* ── Fluids rows (W2-D · W2-E +grade/brand +collapse) ─────── */
.hub-mnt-fluid {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) 120px 130px 90px 100px 38px;
  gap: 8px;
  margin-bottom: 8px;
}
.hub-mnt-fluids-toggle {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  font: inherit; cursor: pointer; text-align: left;
  color: inherit;
  background: transparent; border: none; padding: 0;
}
.hub-mnt-fluids-toggle .hub-eq-card-title { margin: 0; }
.hub-mnt-fluids-arrow { color: var(--hub-text-mut); font-size: 12px; }
#mnt-fluids-body { margin-top: 12px; }
.hub-mnt-fluid input, .hub-mnt-fluid select {
  font: inherit; font-size: 14px;
  color: var(--hub-text);
  background: var(--hub-bg);
  border: 1px solid var(--hub-border);
  border-radius: var(--hub-radius-sm);
  padding: 8px 10px;
  width: 100%;
}
.hub-mnt-fluid input:focus, .hub-mnt-fluid select:focus { outline: none; border-color: var(--hub-accent); }
.mnt-fluid-remove { padding: 4px 8px; }

/* ── Hub Settings (W2-D) ──────────────────────────────────── */
.hub-set-typerow {
  display: grid;
  grid-template-columns: minmax(200px, 340px) 38px;
  gap: 8px;
  margin-bottom: 8px;
}
.hub-set-typerow input {
  font: inherit; font-size: 14px;
  color: var(--hub-text);
  background: var(--hub-bg);
  border: 1px solid var(--hub-border);
  border-radius: var(--hub-radius-sm);
  padding: 8px 10px;
  width: 100%;
}
.hub-set-typerow input:focus { outline: none; border-color: var(--hub-accent); }
.set-fluid-remove, .hub-set-row-remove { padding: 4px 8px; }
.hub-set-saved { font-size: 13px; color: var(--hub-accent-text); }

/* ── Storage locations + location QR (W4-B) ───────────────── */
.hub-set-locrow { margin-bottom: 4px; }
.hub-set-loc-qrblock {
  margin: 6px 0 14px;
  padding: 14px;
  background: var(--hub-bg);
  border: 1px solid var(--hub-border);
  border-radius: var(--hub-radius-sm);
}
.set-loc-canvas {
  background: #fff;
  border: 1px solid var(--hub-border);
  border-radius: var(--hub-radius-sm);
  width: 132px; height: 132px;
  image-rendering: pixelated;
}
.hub-inv-locbanner {
  background: var(--hub-panel);
  border: 1px solid var(--hub-border);
  border-radius: var(--hub-radius-sm);
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 14px; color: var(--hub-text-dim);
}
.hub-inv-locbanner strong { color: var(--hub-text); }
.hub-inv-locbanner a { margin-left: 10px; }

/* ── Inventory (W3-B) ─────────────────────────────────────── */
.hub-inv-low {
  margin-left: 8px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--hub-amber);
  background: var(--hub-amber-bg);
  border: 1px solid rgba(251, 191, 36, 0.3);
  padding: 2px 7px; border-radius: 999px;
}
.hub-inv-min { color: var(--hub-text-mut); font-size: 12px; }
.hub-inv-ordered {
  margin-left: 8px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--hub-text-dim);
  background: var(--hub-panel-2);
  border: 1px solid var(--hub-border);
  padding: 2px 7px; border-radius: 999px;
}
.hub-inv-status-actions { margin-top: 10px; display: flex; gap: 8px; }

/* ── Equipment QR card (W4-A) ─────────────────────────────── */
.hub-eq-qr-wrap { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
#eq-qr-canvas {
  background: #fff;
  border: 1px solid var(--hub-border);
  border-radius: var(--hub-radius-sm);
  image-rendering: pixelated;
  width: 148px; height: 148px;
}
.hub-eq-qr-meta { display: flex; flex-direction: column; gap: 10px; min-width: 220px; flex: 1; }
.hub-eq-qr-url {
  font-size: 13px; color: var(--hub-text-dim);
  word-break: break-all;
  background: var(--hub-bg);
  border: 1px solid var(--hub-border);
  border-radius: var(--hub-radius-sm);
  padding: 8px 10px;
}
.hub-eq-qr-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* breathing room when the actions sit directly under helper text */
.hub-eq-card-empty + .hub-eq-qr-actions { margin-top: 14px; }
.hub-eq-qr-actions a.hub-eq-btn { text-decoration: none; display: inline-block; }
.hub-inv-compat {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px;
  max-height: 220px; overflow-y: auto;
}
.hub-mnt-row.voided td { color: var(--hub-text-mut); text-decoration: line-through; }
.hub-mnt-row.voided td:last-child,
.hub-mnt-row.voided .hub-eq-badge { text-decoration: none; }
.hub-mnt-part {
  display: grid;
  grid-template-columns: 110px 1fr 70px 1fr 38px;
  gap: 8px;
  margin-bottom: 8px;
}
.hub-mnt-part input {
  font: inherit; font-size: 14px;
  color: var(--hub-text);
  background: var(--hub-bg);
  border: 1px solid var(--hub-border);
  border-radius: var(--hub-radius-sm);
  padding: 8px 10px;
  width: 100%;
}
.hub-mnt-part input:focus { outline: none; border-color: var(--hub-accent); }
.mnt-part-remove { padding: 4px 8px; }

/* ── Preview banner (W0 smoke only) ───────────────────────── */
.hub-preview-banner {
  background: var(--hub-amber-bg);
  color: var(--hub-amber);
  border-bottom: 1px solid rgba(251, 191, 36, 0.3);
  font-size: 12px; font-weight: 700; text-align: center;
  padding: 7px 14px; letter-spacing: 0.3px;
}

/* ── Narrow screens: stack the sidebar on top (original) ──── */
@media (max-width: 720px) {
  .hub-frame { flex-direction: column; }
  .hub-sidebar { width: 100%; flex-basis: auto; border-right: none; border-bottom: 1px solid var(--hub-border); }
  .hub-nav { flex-direction: row; flex-wrap: wrap; }
  .hub-main { padding: 18px; }
}