/* addback-overview-skin.css — reskins the shared Add Back form to the Overview
   department aesthetic (glassmorphism · cosmic palette · Space Grotesk · gradient
   actions). SCOPED to .ovx-addback-skin, which app.js adds to the overlay only when
   the form is opened from the Overview dept — so Cultivation's forms are untouched.
   Theme-only: colours/borders/radius/fonts/buttons. Layout is left as-is. */

/* ── overlay + modal shell ─────────────────────────────────────────────────── */
.ovx-addback-skin.ftest-overlay { background: rgba(2,4,14,0.66); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.ovx-addback-skin .ftest-modal {
  background: var(--col-indigo, #0f1535) !important;
  border: 1px solid var(--glass-border-2, rgba(255,255,255,.15)) !important;
  border-radius: 24px !important;
  box-shadow: 0 44px 110px rgba(2,4,14,.62) !important;
  overflow: hidden;
}
html[data-theme="light"] .ovx-addback-skin .ftest-modal { background: #fff !important; }

/* ── titlebar: drop the macOS traffic lights, clean centred header + X close ── */
.ovx-addback-skin .ftest-titlebar {
  position: relative; background: transparent !important;
  border-bottom: 1px solid var(--glass-border, rgba(255,255,255,.08)) !important;
  padding: 18px 24px !important; justify-content: center;
}
.ovx-addback-skin .ftest-lights { position: static; }
.ovx-addback-skin .ftest-light.yellow,
.ovx-addback-skin .ftest-light.green { display: none !important; }
.ovx-addback-skin .ftest-light.red {
  position: absolute; top: 13px; right: 16px; width: 32px; height: 32px;
  border-radius: 50% !important; background: var(--glass-2) !important; border: 0 !important;
  display: grid; place-items: center; cursor: pointer; transition: background .15s ease, color .15s ease;
  color: var(--text-muted);
}
.ovx-addback-skin .ftest-light.red::before { content: "✕"; font-size: 13px; line-height: 1; }
.ovx-addback-skin .ftest-light.red:hover { background: var(--glass-3) !important; color: var(--text-primary); }
.ovx-addback-skin .ftest-win-title {
  font-family: var(--font-display) !important; font-weight: 700 !important;
  font-size: 15px !important; color: var(--text-primary) !important; letter-spacing: .01em;
}

/* ── BETA disclaimer → amber info card ─────────────────────────────────────── */
.ovx-addback-skin .ftest-disclaimer {
  background: rgba(251,191,36,.1) !important; border: 1px solid rgba(251,191,36,.32) !important;
  border-radius: 14px !important;
}
.ovx-addback-skin .ftest-disclaimer-icon { color: var(--accent-amber) !important; }
.ovx-addback-skin .ftest-disclaimer-tag {
  background: rgba(251,191,36,.18) !important; color: var(--accent-amber) !important;
  border-radius: 6px !important; font-family: var(--font-display) !important;
}
.ovx-addback-skin .ftest-disclaimer-headline { color: var(--text-primary) !important; }
.ovx-addback-skin .ftest-disclaimer-sub { color: var(--text-muted) !important; }

/* ── the "use this to…" hint + meta chips ──────────────────────────────────── */
.ovx-addback-skin .addback-banner {
  background: radial-gradient(120% 120% at 0% 0%, var(--glass-1), transparent 70%) !important;
  border: 1px solid var(--glass-border) !important; border-radius: 14px !important; color: var(--text-muted) !important;
}
.ovx-addback-skin .ftest-meta-chip {
  background: var(--glass-2) !important; border: 1px solid var(--glass-border) !important; border-radius: 100px !important;
}
.ovx-addback-skin .ftest-meta-label { color: var(--text-dim) !important; }
.ovx-addback-skin .ftest-meta-val { color: var(--text-secondary) !important; }

/* ── section headers ───────────────────────────────────────────────────────── */
.ovx-addback-skin .ftest-section-title {
  font-family: var(--font-display) !important; font-weight: 700 !important; color: var(--text-primary) !important;
  letter-spacing: .04em;
}
.ovx-addback-skin .ftest-section-desc { color: var(--text-dim) !important; }
.ovx-addback-skin .ftest-field-label { color: var(--text-muted) !important; font-weight: 600; letter-spacing: .04em; }
.ovx-addback-skin .ftest-required { color: var(--accent-rose) !important; }

/* ── inputs / selects / textarea → glass ───────────────────────────────────── */
.ovx-addback-skin .ftest-input,
.ovx-addback-skin .ftest-select,
.ovx-addback-skin .ftest-textarea {
  background: var(--glass-1) !important; border: 1px solid var(--glass-border) !important;
  border-radius: 10px !important; color: var(--text-primary) !important;
}
.ovx-addback-skin .ftest-input:focus,
.ovx-addback-skin .ftest-select:focus,
.ovx-addback-skin .ftest-textarea:focus {
  border-color: var(--accent-cyan) !important; outline: none !important;
  box-shadow: 0 0 0 3px rgba(56,189,248,.14) !important;
}

/* ── recipe grid cells ─────────────────────────────────────────────────────── */
.ovx-addback-skin .addback-recipe-cell {
  background: var(--glass-1) !important; border: 1px solid var(--glass-border) !important; border-radius: 12px !important;
}
.ovx-addback-skin .addback-recipe-name { color: var(--text-secondary) !important; font-weight: 600; }
.ovx-addback-skin .addback-recipe-unit { color: var(--accent-cyan) !important; }

/* ── severity pills ────────────────────────────────────────────────────────── */
.ovx-addback-skin .addback-sev-pill {
  background: var(--glass-2) !important; border: 1px solid var(--glass-border-2) !important; border-radius: 100px !important;
  color: var(--text-secondary) !important;
}
.ovx-addback-skin .addback-sev-pill.active { border-color: var(--accent-cyan) !important; color: var(--accent-cyan) !important; }

/* ── footer buttons ────────────────────────────────────────────────────────── */
.ovx-addback-skin .ftest-footer { background: transparent !important; border-top: 1px solid var(--glass-border) !important; }
.ovx-addback-skin .addback-send-btn {
  background: linear-gradient(100deg, var(--accent-cyan), var(--accent-violet)) !important;
  color: #04050f !important; border: 0 !important; border-radius: 100px !important; font-weight: 700 !important;
  box-shadow: 0 4px 18px rgba(56,189,248,.28);
}
.ovx-addback-skin .addback-send-btn:hover { filter: brightness(1.08); }
.ovx-addback-skin .addback-keepopen-pill {
  background: var(--glass-2) !important; border: 1px solid var(--glass-border-2) !important; border-radius: 100px !important;
  color: var(--text-secondary) !important;
}

/* ── side panels (Log History · Recent Submissions) ────────────────────────── */
.ovx-addback-skin .addback-histpanel,
.ovx-addback-skin .addback-sidepanel {
  background: var(--col-indigo, #0f1535) !important; border: 1px solid var(--glass-border-2) !important;
  border-radius: 20px !important; box-shadow: 0 30px 70px rgba(2,4,14,.5) !important;
}
.ovx-addback-skin .addback-side-eyebrow { color: var(--accent-cyan) !important; font-family: var(--font-display) !important; letter-spacing: .14em; }
.ovx-addback-skin .addback-side-h { font-family: var(--font-display) !important; color: var(--text-primary) !important; }
.ovx-addback-skin .addback-side-select {
  background: var(--glass-1) !important; border: 1px solid var(--glass-border) !important; border-radius: 10px !important; color: var(--text-secondary) !important;
}
.ovx-addback-skin .addback-side-list { border-radius: 12px; }
.ovx-addback-skin .addback-side-empty { color: var(--text-dim) !important; }

/* ── Light mode ─────────────────────────────────────────────────────────────
   Most of this skin already consumes tokens (--glass-*, --text-*, --accent-*)
   that auto-invert, and .ftest-modal is re-skinned to #fff above. Two leaks
   remain: --col-indigo doesn't invert (stays dark), so the History / Recent-
   Submissions side panels stay a dark slab on light; and the panel + modal
   drop shadows are near-black. The overlay backdrop scrim is left dark (correct
   on both themes). !important is required to beat the base !important rules. */
html[data-theme="light"] .ovx-addback-skin .ftest-modal {
  box-shadow: 0 44px 110px rgba(80,90,160,0.18) !important;
}
html[data-theme="light"] .ovx-addback-skin .addback-histpanel,
html[data-theme="light"] .ovx-addback-skin .addback-sidepanel {
  background: #fff !important;
  box-shadow: 0 30px 70px rgba(80,90,160,0.16) !important;
}