/* ==========================================================================
   Admin console
   --------------------------------------------------------------------------
   Layered on theme.css + panel.css, which supply the shared panel chrome.
   Only the operator-facing pieces that the subscriber panel has no use for
   live here: queue events, plan editing, and the settings registry.
   ========================================================================== */

/* --- queue events ---------------------------------------------------------
   Colour carries the outcome, but the event name is always written out too:
   an operator scanning a failure log must not have to rely on hue alone. */
.event.sent { color: #86efac; }
.event.sent::before, .event.failed::before, .event.paused::before,
.event.retry::before, .event.resumed::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  align-self: center;
}
.event.failed, .event.paused { color: #fca5a5; }
.event.retry { color: #fcd34d; }
.event.resumed { color: #86efac; }

/* --- payment and plan records -------------------------------------------- */
.payment-body, .plan-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
  gap: 12px;
}
.payment-body > div, .plan-body > div {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 13px;
}
.payment-card .btn, .plan-card .btn { margin-top: 12px; }

/* An inactive plan is still listed — an operator needs to see what exists in
   order to reactivate it — but reads as switched off. */
.plan-card.inactive { opacity: 0.5; }
.plan-card.inactive:hover { opacity: 0.75; }

.form-grid label.wide { grid-column: 1 / -1; }
.form-grid small {
  font-size: 11px; font-weight: 400;
  letter-spacing: 0; text-transform: none;
  color: var(--text-3);
}

/* --- settings registry ----------------------------------------------------
   Every row is one setting: a label, its control, and the explanation of what
   changing it does. The help text is not optional — these settings alter how
   money and messages move, and an operator should never have to guess. */
/* `flex-direction: row` is stated explicitly: the shared `.settings-grid label`
   rule sets a column, and inheriting it here turned `align-items: center` into
   a horizontal centre, so every setting name sat centred over its own field. */
.setting label {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-size: 12.5px; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  color: var(--text);
}
.setting input[type="text"],
.setting input[type="number"],
.setting select {
  font-family: var(--mono);
  font-size: 13px;
  min-height: 38px;
  padding: 8px 11px;
}
/* The reset link is the last child of a column flex, so without this it
   stretches and its text drifts to the middle of the card. */
.setting .link-btn { align-self: flex-start; font-size: 11.5px; }

/* A setting whose control appears above its help text reads as a unit; the
   restart warning belongs with the name, not floating over the field. */
.setting .badge { align-self: flex-start; }

/* A boolean has no field to fill, so the control sits beside its name rather
   than under it. */
.setting-bool { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 7px 10px; }
.setting-bool label { grid-column: 1; }
.setting-bool input[type="checkbox"] { grid-column: 2; grid-row: 1; }
.setting-bool .setting-help, .setting-bool .link-btn { grid-column: 1 / -1; }
/* A grid item fills its track by default, which pushed the reset link's text
   to the middle of the card while every other setting had it on the left. */
.setting-bool .link-btn { justify-self: start; }

@media (max-width: 980px) {
  .payment-body, .plan-body { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}