/* Operations console — the layer on top of the shared kit.
   Only what is specific to this surface lives here. */

.internal-rail {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 10px;
  height: 30px; padding: 0 16px;
  background: var(--warn-bg); border-bottom: 1px solid #e8b55240;
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--warn);
}
.internal-rail .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--warn); flex: none; }

.shell { min-height: calc(100vh - 30px); }
.sidebar { max-height: calc(100vh - 30px); }
.topbar { top: 30px; }

/* A mapping row: our SKU on the left, the supplier's on the right. */
.map-row {
  display: grid; grid-template-columns: 1fr 22px 1fr auto; gap: 12px;
  align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line2);
}
.map-row:last-child { border-bottom: 0; }
.map-arrow { color: var(--faint); text-align: center; font-family: var(--mono); }
.map-code { font-family: var(--mono); font-size: 12px; }

.thumb { width: 62px; height: 39px; object-fit: cover; border-radius: 5px; border: 1px solid var(--line); display: block; }

/* instalment schedule editor */
.sched-legend, .sched-row {
  display: grid; grid-template-columns: 110px 1fr 130px auto; gap: 10px; align-items: center;
}
.sched-legend {
  font-family: var(--mono); font-size: 9px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 6px;
}
.sched { display: flex; flex-direction: column; gap: 8px; }
.sched-row input { margin: 0; }
.sched-amount { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.sched-foot {
  display: flex; align-items: center; gap: 10px;
  padding-top: 10px; border-top: 1px solid var(--line); margin-top: 4px;
  font-family: var(--mono); font-size: 11.5px;
}

/* ---------- sign-in (three-factor stepper) ----------
   Carried verbatim from portal.css: the 3FA sign-in edit transplanted the
   auth-steps markup into admin/index.html but the styles live here, and the
   admin shell loads only admin.css. Without these the stepper renders as a
   default <ol>. Kept byte-identical to the portal so the two match. */
.auth-steps {
  display: flex; gap: 8px; list-style: none; margin: 0 0 18px; padding: 0;
}
.auth-steps li {
  flex: 1; display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: var(--rad-sm);
  border: 1px solid var(--line); background: var(--panel);
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
}
.auth-steps li span {
  width: 17px; height: 17px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--line); color: var(--faint); font-size: 9px;
}
.auth-steps li.is-active { border-color: var(--cyan); color: var(--cyan); }
.auth-steps li.is-active span { background: var(--cyan); color: #02121a; }
.auth-steps li.is-done { color: var(--ok); border-color: #4ad9a440; }
.auth-steps li.is-done span { background: var(--ok); color: #02121a; }
.auth-lede { margin: 0 0 16px; color: var(--dim); font-size: 13px; }
.otp-input {
  font-family: var(--mono); font-size: 22px; letter-spacing: .5em;
  text-align: center; padding: 12px;
}
.login-foot { margin: 16px 0 0; font-size: 11.5px; text-align: center; }