/* ─────────────────────────────────────────────────────────────────────────────
 * final/css/admin-slim.css — the stylesheet for LANE B, the five-section admin.
 *
 * SCOPE. This sheet styles only the surfaces this lane ADDS or REHOMES:
 *   · the "Payment rails" card that moved out of the deleted Payments section
 *     into Orders,
 *   · the ⚑ Review flag that replaces the deleted needs-review queue,
 *   · the "Certificates" wrapper that moved out of the deleted Listing Studio
 *     into Stock,
 *   · the Overview sales-tax tile's download link.
 *
 * IT RESTYLES NOTHING THAT ALREADY WORKED. The rehomed COA form needs no rules
 * at all: `.studio-step` / `.studio-drop` / `.studio-fields` in admin.html's own
 * head <style> are GLOBAL selectors, never scoped to `#section-studio`, so the
 * pane keeps its exact appearance in its new home. The Payments card's rules
 * were the opposite — every one of them was written `#section-payments .pay-card`
 * — which is why the rails card is re-emitted here under its own class instead
 * of moved verbatim.
 *
 * COLOUR. Every value below is one of the panel's own tokens (admin.css defines
 * the light set on :root and the dark set on .dark), so both themes come out
 * right without a single literal here. The one exception is the flag badge's
 * amber wash, which is the same rgba(245,158,11,…) the panel already uses for
 * its two badge dots — an alpha over the card, so it reads on either ground.
 *
 * LOAD ORDER. The runner copies this to sf-final-admin-slim.css and links it
 * LAST in <head>, after fonts.css, admin.css and sf-final-admin.css. Nothing
 * here needs to win a specificity fight, but it would.
 * ───────────────────────────────────────────────────────────────────────────── */

/* ── the rehomed cards ─────────────────────────────────────────────────────── */
.cc-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  margin-top: 24px;
}
.cc-panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.cc-panel-head h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--foreground);
  margin: 0;
  letter-spacing: -0.01em;
}
.cc-panel-head svg { flex-shrink: 0; color: var(--foreground); }
.cc-panel-note {
  font-size: 0.76rem;
  color: var(--muted-foreground);
  margin: 0 0 16px;
  line-height: 1.6;
  max-width: 78ch;
}

/* ── payment rail handles (was #section-payments .pay-card) ────────────────── */
.cc-rails {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.cc-rail > label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted-foreground);
  display: block;
  margin-bottom: 5px;
  letter-spacing: 0.02em;
}
.cc-rail input {
  width: 100%;
  padding: 8px 11px;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--foreground);
  font-family: inherit;
  font-size: 0.84rem;
  box-sizing: border-box;
}
.cc-rail input + input { margin-top: 7px; }
.cc-rail input::placeholder { color: var(--muted-foreground); opacity: 0.75; }
.cc-rail input:focus { outline: none; border-color: var(--chart-3); }
.cc-panel-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.cc-panel-actions span { font-size: 0.78rem; font-weight: 600; }

/* ── the needs-review flag (was the Payments review queue) ─────────────────── */
.cc-flag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 99px;
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(245, 158, 11, 0.18);
  color: #b45309;
  vertical-align: middle;
  cursor: help;
}
.dark .cc-flag { color: #fbbf24; }

/* The Clear-flag button in the order modal — a quiet control, not a call to
   action: clearing a flag is bookkeeping, shipping the order is the job. */
.cc-clearflag {
  font-size: 0.8rem;
  padding: 8px 16px;
  border: 1px solid rgba(245, 158, 11, 0.45);
  background: transparent;
  color: var(--muted-foreground);
  border-radius: 4px;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
}
.cc-clearflag:hover { background: rgba(245, 158, 11, 0.10); color: var(--foreground); }

/* ── Overview: the sales-tax tile's export link ────────────────────────────── */
.cc-tax-link {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--chart-3);
  text-decoration: none;
  display: inline-block;
  margin-top: 6px;
}
.cc-tax-link:hover { text-decoration: underline; }

/* ── sidebar: one group, no orphaned heading spacing ───────────────────────── */
/* Five groups became one, and the surviving "Store" heading was deleted with
   them — a single-group nav does not need a label. Without this the nav keeps
   the 14px top margin that the first .nav-group used to absorb. */
#admin-sidebar nav.space-y-1 > .sidebar-link:first-child { margin-top: 0; }

/* ── mobile ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .cc-panel { padding: 16px; }
  .cc-rails { grid-template-columns: 1fr; }
}
