/* ==========================================================================
   NEXIFY STUDIO: staff area in the brand system (sign-in + dashboard)
   Loaded after css/staff.css; draws only from css/brand.css. The dashboard
   keeps its denser working layout, but every surface, control and state now
   carries the same type, gold and light as the website.
   ========================================================================== */
:root {
  --font-head: var(--font-bogle);
  --font-ui: var(--font-body);
  --font-mono: var(--font-bogle);          /* labels, counters, statuses (mono before) */
  --line: var(--gold-line);
  --line-strong: var(--gold-line-strong);
  --grey: #d4cfc6;
  --grey-2: var(--gold-ink);
  --offwhite: #f3eee4;
}
/* code, ids and placeholders stay in a code face so they read as data */
code, .mono, .ph { font-family: var(--font-code); }
.ph { border-bottom-color: rgba(220, 180, 102, 0.38); }
:focus-visible { outline-color: var(--gold-1); }

/* ---- brand, labels, titles ------------------------------------------------------ */
.brand { font-family: var(--font-bogle); font-weight: 400; font-size: 1rem; letter-spacing: 0.16em; }
.brand span { color: transparent; background-image: var(--gold-text); -webkit-background-clip: text; background-clip: text; }
.brand line { stroke: var(--gold-ink); }
.label { font-weight: 400; font-size: 0.76rem; letter-spacing: 0.18em; color: var(--gold-ink); }
.label--warn { color: var(--gold-1); }
.t-light { font-weight: 400; color: transparent; background-image: var(--gold-text); -webkit-background-clip: text; background-clip: text; }
.t-bold { font-weight: 400; color: #fff; }
.auth__title { font-weight: 400; font-size: clamp(2.2rem, 3.8vw, 2.7rem); line-height: 0.98; letter-spacing: 0.01em; }
.topbar__title { font-weight: 400; font-size: clamp(2rem, 3vw, 2.8rem); line-height: 1; letter-spacing: 0.012em; }
.card__title, .drawer__title { font-weight: 400; letter-spacing: 0.03em; }
.card__title { font-size: 1.35rem; }
.drawer__title { font-size: 1.55rem; }
.kpi__n { font-weight: 400; font-size: 2.7rem; letter-spacing: 0.01em; color: transparent; background-image: var(--gold-text); -webkit-background-clip: text; background-clip: text; }
.field > label, .field > legend, .mini span, .table th, .meta dt { font-weight: 400; font-size: 0.76rem; letter-spacing: 0.16em; color: var(--gold-ink); }
.table th { color: rgba(227, 193, 123, 0.75); }

/* ---- buttons ---------------------------------------------------------------------------- */
.btn-pill { font-family: var(--font-bogle); font-weight: 400; font-size: 1rem; letter-spacing: 0.08em; }
.btn-pill--sm { font-size: 0.9rem; }
.btn-pill--light {
  background: var(--gold-fill); color: var(--gold-ink-on);
  box-shadow: inset 0 1px 0 rgba(255, 248, 226, 0.7), inset 0 -1px 0 rgba(90, 58, 16, 0.25), 0 10px 24px -14px rgba(0, 0, 0, 0.85);
}
.btn-pill--light:hover { background: var(--gold-fill-hi); }
.btn-pill--ghost { border-color: var(--gold-2); color: var(--gold-1); }
.btn-pill--ghost:hover { border-color: var(--gold-1); background: var(--gold-tint); }
.icon-btn:hover:not(:disabled) { border-color: var(--gold-2); color: var(--gold-1); }

/* ---- fields and controls ------------------------------------------------------------------ */
.field input:focus, .field textarea:focus, .field select:focus, .mini input:focus, .mini select:focus { border-color: var(--gold-2); background-color: rgba(220, 180, 102, 0.04); }
.field select, .mini select { background-image: linear-gradient(45deg, transparent 50%, var(--gold-2) 50%), linear-gradient(135deg, var(--gold-2) 50%, transparent 50%); }
.check input { accent-color: var(--gold-2); }
.check:has(input:checked) { border-color: var(--gold-2); background: var(--gold-tint); color: var(--gold-1); }
.toggle input:checked + .toggle__ui { background: var(--gold-fill); border-color: transparent; }
.toggle input:checked + .toggle__ui::after { background: var(--gold-ink-on); }
.toggle input:focus-visible + .toggle__ui { outline-color: var(--gold-1); }
.imgs__add:hover { border-color: var(--gold-2); color: var(--gold-1); }

/* ---- sign-in -------------------------------------------------------------------------------- */
/* (background-image only: the shorthand would reset the text clip and fill the whole box) */
.auth__giant { background-image: var(--gold-brush), radial-gradient(ellipse 60% 90% at 50% 0%, #876631, #2f2312 70%); opacity: 0.85; }
.auth__card {
  border-color: var(--gold-line-strong);
  background: radial-gradient(ellipse 80% 40% at 50% 0%, rgba(240, 204, 128, 0.07), transparent 70%), linear-gradient(180deg, rgba(14, 12, 9, 0.84), rgba(8, 7, 5, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, 0.12), 0 30px 80px rgba(0, 0, 0, 0.6);
}
.auth__back:hover { color: var(--gold-1); }

/* ---- dashboard -------------------------------------------------------------------------------- */
.side { background: radial-gradient(ellipse 90% 40% at 50% 0%, var(--gold-light), transparent 70%), var(--bg); }
.side__item { font-family: var(--font-bogle); font-size: 1.02rem; letter-spacing: 0.06em; }
.side__item:hover { color: var(--gold-1); background: rgba(220, 180, 102, 0.05); }
.side__item.is-on { color: var(--gold-1); background: var(--gold-tint); box-shadow: inset 2px 0 0 var(--gold-2); }
.side__badge { background: var(--gold-fill); color: var(--gold-ink-on); font-family: var(--font-bogle); }
.side__link:hover { color: var(--gold-1); }
.preview-bar { background: #0e0c08; }
.preview-bar strong { color: var(--gold-1); border-color: var(--gold-line-strong); }
.card, .kpi, .tile { background: linear-gradient(180deg, rgba(220, 180, 102, 0.035), rgba(255, 255, 255, 0) 40%), var(--panel); }
.kpi:hover { border-color: var(--gold-2); }
.table tbody tr:hover { background: rgba(220, 180, 102, 0.04); }
.status { font-weight: 400; font-size: 0.78rem; letter-spacing: 0.1em; }
.status--confirmed, .status--live,
.status-select.status--confirmed { background: var(--gold-fill); color: var(--gold-ink-on); border-color: transparent; }
.status--completed { border-color: var(--gold-2); color: var(--gold-1); }
.chip { font-family: var(--font-bogle); letter-spacing: 0.08em; }
.chip.is-on { background: var(--gold-fill); border-color: transparent; color: var(--gold-ink-on); }
.chip.is-on span { color: #5c4320; }
.checklist li.ok::before { color: var(--gold-2); }
.tile__flag { font-family: var(--font-bogle); letter-spacing: 0.12em; border: 1px solid var(--gold-line-strong); }
.drawer__panel { background: linear-gradient(180deg, rgba(220, 180, 102, 0.04), transparent 30%), #0b0a08; border-left-color: var(--gold-line-strong); }
.toast { background: var(--gold-fill); color: var(--gold-ink-on); }
.card--fold > summary::after { color: var(--gold-ink); }