/* NuCedar Inventory Portal — Redesign v8
   ===========================================
   Replacement for the original style.css.
   This applies the editorial-catalog redesign with:
     - Black gradient hero "Quick Ship Health" card
     - Pair-grouped product cards (color pairs, 13" left / 18" right)
     - Vertical health meters with polished instrument styling
     - Centered On Hand / Target boxes with dynamic color tiers
     - Deficit line under each card
     - IBM Plex Mono → Roboto Mono swap for clearer 1/I distinction

   The CSS variables at the top control the entire palette — change those
   to retune the look globally without touching anything else.
*/

:root {
  --ink: #1a1a1a;
  --ink-deep: #0d0d0d;
  --ink-soft: #3a3a3a;
  --bone: #f4f1ea;
  --paper: #faf8f3;
  --line: #d8d2c4;
  --line-soft: #e8e3d6;
  --gold: #b8924a;
  --gold-soft: #d4b577;
  --gold-bright: #e8c789;
  --green: #2d5440;
  --green-mid: #639922;
  --red: #a8332b;
  --red-bright: #e85d52;
  --amber-bright: #f4a83a;

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'DM Sans', -apple-system, sans-serif;
  --mono: 'Roboto Mono', monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
body::before { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); pointer-events: none; z-index: 1; }

.hdr { background: var(--ink); color: var(--bone); position: relative; z-index: 10; }
.hdr-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; max-width: 1400px; margin: 0 auto; padding: 1.25rem 2.5rem; }
.hdr-brand { font-family: var(--serif); font-size: 1.5rem; letter-spacing: 0.04em; color: var(--bone); }
.hdr-brand em { font-style: italic; color: var(--gold-soft); font-weight: 300; }
.hdr-title { text-align: center; font-family: var(--serif); font-weight: 400; font-size: 1.65rem; letter-spacing: 0.04em; color: var(--bone); }
.hdr-title em { font-style: italic; color: var(--gold-soft); font-weight: 300; }
.hdr-user { display: flex; align-items: center; gap: 0.85rem; justify-self: end; font-size: 0.82rem; }
.hdr-user-meta { display: flex; flex-direction: column; line-height: 1.3; text-align: right; }
.hdr-user-meta .name { color: var(--bone); font-weight: 500; }
.hdr-user-meta .role { color: #888; font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; }
.hdr-user-meta a { color: var(--gold-soft); font-size: 0.72rem; text-decoration: none; }

.nav { background: var(--bone); border-bottom: 1px solid var(--line); position: relative; z-index: 9; }
.nav-inner { max-width: 1400px; margin: 0 auto; padding: 0 2.5rem; display: flex; }
.nav a { padding: 1rem 1.5rem; font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft); border-bottom: 2px solid transparent; text-decoration: none; }
.nav a.active { color: var(--ink); border-bottom-color: var(--gold); }

main { max-width: 1400px; margin: 0 auto; padding: 3rem 2.5rem 5rem; position: relative; z-index: 2; }

.intro { margin-bottom: 2rem; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.intro-eyebrow { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--gold); margin-bottom: 0.75rem; }
.intro h1 { font-family: var(--serif); font-weight: 400; font-size: 3.2rem; line-height: 1.05; letter-spacing: -0.01em; }
.intro h1 em { font-style: italic; color: var(--gold); font-weight: 300; }
.intro-meta { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-soft); text-align: right; line-height: 1.7; }
.intro-meta .label { text-transform: uppercase; letter-spacing: 0.1em; color: #888; font-size: 0.7rem; }

.total-health {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2a2520 100%);
  border: 1px solid var(--ink);
  padding: 2.25rem 2.5rem 1.75rem;
  margin-bottom: 3rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2.5rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 50px -12px rgba(0,0,0,0.45), 0 8px 16px -6px rgba(0,0,0,0.3);
}
.total-health::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 40%; height: 100%;
  background: radial-gradient(ellipse at top right, rgba(184,146,74,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.total-health > * { position: relative; z-index: 1; }
.total-health-label { font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--gold-bright); margin-bottom: 0.5rem; }
.total-health-title { font-family: var(--serif); font-size: 2rem; font-weight: 400; line-height: 1.1; color: var(--bone); }
.total-health-title em { font-style: italic; color: var(--gold-soft); font-weight: 300; }
.total-bar-wrap { display: flex; flex-direction: column; gap: 0.85rem; }
.total-bar-track {
  width: 100%;
  height: 32px;
  background: linear-gradient(to right, #a8332b 0%, #d85a30 25%, #ef9f27 50%, #c0dd97 75%, #2d5440 100%);
  border: 1px solid #000;
  position: relative;
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,0.4),
    0 0 0 2px rgba(232, 199, 137, 0.12),
    0 0 12px 2px rgba(244, 168, 58, 0.35),
    0 0 24px 4px rgba(232, 199, 137, 0.18);
}
.total-bar-mask {
  position: absolute; top: 0; bottom: 0; right: 0;
  background: rgba(0,0,0,0.82);
  border-left: 2px solid var(--gold-bright);
  box-shadow: -2px 0 8px rgba(232, 199, 137, 0.35);
}
.total-bar-scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--bone);
  letter-spacing: 0.08em;
  font-weight: 600;
}
.total-stats { display: flex; gap: 2rem; }
.total-stat { text-align: center; border-left: 1px solid rgba(255,255,255,0.12); padding-left: 2rem; }
.total-stat:first-child { border-left: none; padding-left: 0; }
.total-stat .label { font-family: var(--mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--bone); margin-bottom: 0.5rem; font-weight: 600; }
.total-stat .num { font-family: var(--serif); font-size: 2.6rem; font-weight: 500; line-height: 1; color: var(--bone); }
.total-stat .unit { font-family: var(--mono); font-size: 0.78rem; color: var(--bone); text-transform: uppercase; letter-spacing: 0.12em; margin-top: 0.5rem; font-weight: 600; }

.pair-section { margin-bottom: 2.5rem; }
.pair-header { margin-bottom: 1rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--line-soft); }
.pair-title { font-family: var(--serif); font-weight: 400; font-size: 2rem; line-height: 1.1; letter-spacing: -0.005em; }
.pair-title em { font-style: italic; color: var(--gold); font-weight: 300; }
.pair-title.solo { color: var(--ink); }
.pair-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }

.card {
  background: var(--paper);
  border: 1px solid var(--ink);
  display: grid;
  grid-template-columns: 100px 180px minmax(0, 1fr);
  min-height: 320px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px -2px rgba(0,0,0,0.08);
}
.card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(0,0,0,0.18); }

.meter-col {
  background: var(--bone);
  border-right: 1px solid var(--line);
  padding: 1.1rem 0.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
}
.meter-label { font-family: var(--mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-soft); }
.meter-track {
  width: 26px;
  flex: 1;
  background: linear-gradient(to top, #a8332b 0%, #d85a30 25%, #ef9f27 50%, #c0dd97 75%, #2d5440 100%);
  border: 1px solid var(--ink);
  position: relative;
  min-height: 150px;
  box-shadow:
    inset 0 0 4px rgba(0,0,0,0.3),
    0 2px 6px rgba(0,0,0,0.18),
    0 0 0 1px rgba(255,255,255,0.4);
}
.meter-track::after {
  content: '';
  position: absolute;
  top: 1px; left: 1px; right: 1px;
  height: 30%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.25), transparent);
  pointer-events: none;
}
.meter-mask {
  position: absolute; left: 0; right: 0; top: 0;
  background: var(--bone);
  border-bottom: 2px solid var(--ink);
  box-shadow: 0 2px 4px rgba(0,0,0,0.18);
}
.meter-pct { font-family: var(--serif); font-size: 1.7rem; font-weight: 500; line-height: 1; }

.card-img {
  background: var(--paper);
  border-right: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  position: relative;
}
.card-img img {
  max-width: 100%;
  max-height: 280px;
  object-fit: contain;
  display: block;
  mix-blend-mode: multiply;
}

.card-body {
  padding: 1.5rem 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-width: 0;
}
.card-head .size { font-family: var(--sans); font-size: 0.95rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.1em; }

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.stat {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 1rem;
  min-width: 0;
  text-align: center;
  position: relative;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.stat .label {
  font-family: var(--mono);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold);
  margin-bottom: 0.6rem;
  font-weight: 600;
}
.stat .num {
  font-family: var(--serif);
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
}
.stat .unit {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-top: 0.4rem;
}
.stat.target .num { color: var(--green); }
.stat.target .label { color: var(--green); opacity: 0.85; }

.deficit-line {
  text-align: center;
  font-family: var(--mono);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.5rem 0;
  font-weight: 500;
}
.deficit-line .num { font-family: var(--serif); font-size: 1.9rem; letter-spacing: 0; text-transform: none; font-weight: 500; }
.deficit-line.short { color: var(--red); }
.deficit-line.short .num { color: var(--red); }
.deficit-line.healthy { color: var(--green); }
.deficit-line.healthy .num { color: var(--green); }
.deficit-line.over { color: var(--green-mid); }
.deficit-line.over .num { color: var(--green-mid); }

.card-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 0.75rem; border-top: 1px dashed var(--line-soft); font-family: var(--mono); font-size: 0.7rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.1em; margin-top: auto; }

@media (max-width: 1100px) {
  .pair-grid { grid-template-columns: 1fr; }
  .total-health { grid-template-columns: 1fr; gap: 1.5rem; }
  .total-stats { justify-content: space-around; }
}

/* ==========================================================================
   Shared utilities & form styles — ported from v3b for non-dashboard pages.
   These were missing from the redesign. Palette and typography follow the
   new design tokens defined above (Roboto Mono, Cormorant, DM Sans).
   ========================================================================== */

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--gold); }

/* Header connection indicator (lives in render_head) */
.conn { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.7rem; color: #888; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em; }
.conn-dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74,222,128,0.6); animation: connPulse 2.4s ease-in-out infinite; }
.conn.offline .conn-dot { background: #ef4444; animation: none; }
@keyframes connPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(74,222,128,0); }
}

/* Header logo sizing — bootstrap.php renders <img class="nc"> and <img class="gl"> */
.hdr-brand img.nc { height: 38px !important; width: auto !important; max-height: 38px !important; }
.hdr-user img.gl { height: 44px !important; width: 44px !important; max-height: 44px !important; max-width: 44px !important; flex-shrink: 0; border-radius: 50%; border: 1px solid #2a2a2a; }

/* Flash messages */
.flash {
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  border-left: 3px solid;
  font-family: var(--sans);
  font-size: 0.92rem;
}
.flash.ok   { background: #f0f7f1; border-color: var(--green); color: var(--green); }
.flash.err  { background: #fde8e6; border-color: var(--red); color: var(--red); }
.flash.info { background: #f5f1e6; border-color: var(--gold); color: #6e571f; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  background: var(--ink);
  color: var(--bone);
  border: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}
.btn:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--bone); }

/* Forms */
input[type=text], input[type=number], input[type=email], input[type=password], input[type=date], select {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--line);
  background: white;
  font-family: var(--mono);
  font-size: 0.9rem;
  color: var(--ink);
  transition: border-color 0.2s ease;
}
input:focus, select:focus { outline: none; border-color: var(--gold); }

.form-page { max-width: 880px; margin: 0 auto; }

.form-section {
  background: var(--paper);
  border: 1px solid var(--line);
  margin-bottom: 1.5rem;
}
.form-section-head {
  background: var(--bone);
  border-bottom: 1px solid var(--line);
  padding: 1rem 1.5rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 130px 130px;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--line-soft);
}
.form-row:last-child { border-bottom: none; }
.form-row-label .sku-tag {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--gold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.form-row-label .name {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--ink);
  line-height: 1.2;
}
.form-row-label .name small { font-family: var(--sans); font-size: 0.78rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.08em; margin-left: 0.4rem; }

.input-with-label { position: relative; }
.input-with-label .ilabel {
  position: absolute;
  top: -0.55rem; left: 0.6rem;
  background: var(--paper);
  padding: 0 0.35rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* Tables (audit log, users) */
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  border: 1px solid var(--line);
}
th {
  text-align: left;
  padding: 0.85rem 1rem;
  background: var(--bone);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
}
td {
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.9rem;
}
tr:last-child td { border-bottom: none; }
td.mono { font-family: var(--mono); font-size: 0.82rem; }

/* Login page */
.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--bone);
  padding: 2rem;
}
.login-card {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 3rem;
  max-width: 420px;
  width: 100%;
  text-align: center;
}
.login-card .brand-line {
  display: flex; justify-content: center; align-items: center; gap: 0.75rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}
.login-card h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.8rem;
  margin-bottom: 0.25rem;
}
.login-card .sub {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-soft);
  margin-bottom: 2rem;
}
.login-card .form-field { text-align: left; margin-bottom: 1.25rem; }
.login-card label {
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
}
.login-card .btn { width: 100%; justify-content: center; }

/* Utilities */
.muted { color: var(--ink-soft); }
.center { text-align: center; }
.right { text-align: right; }
.mono { font-family: var(--mono); }

/* ==========================================================================
   v5: Click-to-edit On Hand stat box (NuCedar + GSL admin)
   ========================================================================== */

/* The editable stat is a form, looks just like the read-only one */
.stat.onhand.editable {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 1rem;
  text-align: center;
  position: relative;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  /* override default form/button styles */
  margin: 0;
  display: block;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.stat.onhand.editable:hover {
  border-color: var(--gold);
  box-shadow: 0 2px 8px -2px rgba(184, 146, 74, 0.25);
}
.stat.onhand.editable.editing {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184, 146, 74, 0.18);
  cursor: default;
}
.stat.onhand.editable .edit-hint {
  font-family: var(--mono);
  font-size: 0.55rem;
  color: var(--ink-soft);
  font-weight: 400;
  letter-spacing: 0.08em;
  opacity: 0;
  transition: opacity 0.18s ease;
  display: inline-block;
  margin-left: 0.35em;
}
.stat.onhand.editable:hover .edit-hint { opacity: 0.7; }
.stat.onhand.editable.editing .edit-hint { display: none; }

/* The displayed number IS a button so it's keyboard-focusable */
.stat.onhand.editable .num-display {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  text-align: center;
}
.stat.onhand.editable .num-display[hidden] { display: none !important; }
.stat.onhand.editable .num-display:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

/* Edit controls — input + save/cancel buttons. Hidden until .editing toggled */
.stat.onhand.editable .edit-controls {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.35rem 0;
}
.stat.onhand.editable .edit-controls[hidden] { display: none; }

.stat.onhand.editable .onhand-input {
  width: 100%;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--line);
  background: white;
  font-family: var(--serif);
  font-size: 1.55rem;
  font-weight: 500;
  text-align: center;
  color: var(--ink);
  -moz-appearance: textfield;
}
.stat.onhand.editable .onhand-input::-webkit-outer-spin-button,
.stat.onhand.editable .onhand-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.stat.onhand.editable .onhand-input:focus { outline: none; border-color: var(--gold); }

.stat.onhand.editable .edit-actions {
  display: flex;
  gap: 0.4rem;
  justify-content: center;
}
.btn-tiny {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-weight: 600;
  transition: all 0.15s ease;
}
.btn-tiny:hover { background: var(--ink); color: var(--bone); }
.btn-tiny.save  { background: var(--ink); color: var(--bone); }
.btn-tiny.save:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn-tiny.cancel:hover { background: var(--paper); color: var(--ink); border-color: var(--line); }

/* Brief gold pulse on save success */
.card.just-saved {
  animation: justSaved 1.2s ease;
}
@keyframes justSaved {
  0%   { box-shadow: 0 0 0 0 rgba(184, 146, 74, 0); }
  20%  { box-shadow: 0 0 0 3px rgba(184, 146, 74, 0.55); }
  100% { box-shadow: 0 0 0 0 rgba(184, 146, 74, 0); }
}

/* Transitions for the values that change during save so the patch feels organic */
.meter-mask { transition: height 0.4s ease; }
.total-bar-mask { transition: width 0.4s ease; }
.meter-pct, .num-display, [data-agg="health-pct"], [data-agg="deficit"] {
  transition: color 0.3s ease;
}