/*
 * Createrun Store — Admin screens component layer.
 *
 * Token-based admin UI primitives (.adm-*) so every /Admin/* page renders in the
 * same visual language as the marketplace instead of bolted-on Bootstrap. Consumes
 * the shared --cr-* design tokens (design-tokens.css, ADR 2026-06-18); it must NOT
 * redefine or rename any token — that file is a 4-host shared contract.
 *
 * Loaded unconditionally from _Layout.cshtml (after style.css), matching the
 * style.css / responsive.css pattern. Admin pages are plain content fragments;
 * they no longer ship their own <head>/Bootstrap/inline <style>.
 */

/* ── Page shell ───────────────────────────────────────────────────────── */
/* Match the marketplace content width (style.css .container = max-width:1200px,
   padding 0 20px) so admin pages line up structurally with the rest of the store. */
.adm-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--cr-sp-5) 20px;
  color: var(--cr-text);
  font-family: var(--cr-font);
  font-size: var(--cr-fs-md);
}

/* Belt-and-braces: keep admin screens light even if a host/browser tries to
   auto-darken (the <meta name="color-scheme" content="light"> in _Layout is the
   primary opt-out; this guards the admin subtree explicitly). */
.adm-page,
.adm-panel,
.adm-modal__dialog { color-scheme: light; }

/* Drill-through link (resolved names → detail pages) */
.adm-link {
  color: var(--cr-brand);
  text-decoration: none;
  font-weight: 500;
}
.adm-link:hover { color: var(--cr-brand-700); text-decoration: underline; }

/* Small muted secondary line under a resolved name (e.g. the raw id/key) */
.adm-id {
  display: block;
  font-size: var(--cr-fs-xs);
  color: var(--cr-text-muted);
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
}

.adm-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--cr-sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--cr-sp-5);
}

.adm-page-header__titles { min-width: 0; }

.adm-page-header h1,
.adm-title {
  margin: 0;
  font-size: var(--cr-fs-2xl);
  font-weight: 700;
  line-height: 1.2;
  color: var(--cr-text);
  display: flex;
  align-items: center;
  gap: var(--cr-sp-2);
}

.adm-title__icon { color: var(--cr-brand); }

.adm-page-header__sub,
.adm-subtitle {
  margin: var(--cr-sp-2) 0 0;
  font-size: var(--cr-fs-sm);
  color: var(--cr-text-muted);
  max-width: 90ch;
  line-height: 1.5;
}

.adm-page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--cr-sp-2);
  flex-shrink: 0;
}

/* ── Panel (card with optional header) ────────────────────────────────── */
.adm-panel {
  background: var(--cr-surface);
  border: 1px solid var(--cr-border);
  border-radius: var(--cr-radius);
  box-shadow: var(--cr-shadow);
  margin-bottom: var(--cr-sp-5);
  overflow: hidden;
}

.adm-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cr-sp-3);
  padding: var(--cr-sp-4) var(--cr-sp-5);
  border-bottom: 1px solid var(--cr-border);
  font-weight: 600;
  font-size: var(--cr-fs-md);
  color: var(--cr-text);
}

.adm-panel__header .adm-title__icon { color: var(--cr-brand); }

.adm-panel__body { padding: var(--cr-sp-5); }

.adm-panel__body--flush { padding: 0; }

/* ── Toolbar (search / filters / pagination above tables) ─────────────── */
.adm-toolbar {
  display: flex;
  align-items: center;
  gap: var(--cr-sp-3);
  flex-wrap: wrap;
  padding: var(--cr-sp-3) var(--cr-sp-5);
  border-bottom: 1px solid var(--cr-border);
  background: var(--cr-bg);
}

.adm-toolbar--plain { background: transparent; border-bottom: none; padding: 0 0 var(--cr-sp-3); }

.adm-toolbar__spacer { flex: 1 1 auto; }

.adm-search {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 220px;
  flex: 0 1 320px;
}

.adm-search > i {
  position: absolute;
  left: var(--cr-sp-3);
  color: var(--cr-text-muted);
  font-size: var(--cr-fs-sm);
  pointer-events: none;
}

.adm-search .cr-input { padding-left: calc(var(--cr-sp-5) + var(--cr-sp-1)); }

/* ── Tables ───────────────────────────────────────────────────────────── */
.adm-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.adm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--cr-fs-sm);
}

.adm-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--cr-bg);
  color: var(--cr-text-muted);
  font-weight: 600;
  font-size: var(--cr-fs-xs);
  text-transform: uppercase;
  letter-spacing: .03em;
  text-align: left;
  white-space: nowrap;
  padding: var(--cr-sp-3) var(--cr-sp-4);
  border-bottom: 1px solid var(--cr-border);
}

.adm-table tbody td {
  padding: var(--cr-sp-3) var(--cr-sp-4);
  border-bottom: 1px solid var(--cr-border);
  vertical-align: middle;
  color: var(--cr-text);
}

.adm-table tbody tr:last-child td { border-bottom: none; }
.adm-table tbody tr:hover { background: var(--cr-bg); }

.adm-table td.adm-num,
.adm-table th.adm-num { text-align: right; font-variant-numeric: tabular-nums; }

.adm-table .adm-cell-strong { font-weight: 600; }
.adm-table .adm-cell-muted { color: var(--cr-text-muted); }

/* sortable header affordance (admin.js wires th[data-sort]) */
.adm-table thead th[data-sort] { cursor: pointer; user-select: none; }
.adm-table thead th[data-sort]::after {
  content: '\2195';            /* up-down arrow, dim until sorted */
  margin-left: var(--cr-sp-1);
  opacity: .35;
  font-size: .9em;
}
.adm-table thead th[data-sort].adm-sort-asc::after { content: '\2191'; opacity: 1; }
.adm-table thead th[data-sort].adm-sort-desc::after { content: '\2193'; opacity: 1; }

/* row state tints */
.adm-row--open     { background: rgba(22, 163, 74, .07); }
.adm-row--past     { color: var(--cr-text-muted); }
.adm-row--selected { background: rgba(37, 99, 235, .10) !important; }
.adm-row--error    { background: rgba(220, 38, 38, .07); }
.adm-row--ok       { background: rgba(22, 163, 74, .07); }
.adm-row.is-hidden { display: none; }

/* ── Definition list (detail panels) ─────────────────────────────────── */
.adm-deflist {
  display: grid;
  grid-template-columns: minmax(120px, max-content) 1fr;
  gap: var(--cr-sp-2) var(--cr-sp-4);
  margin: 0;
}

.adm-deflist dt {
  color: var(--cr-text-muted);
  font-weight: 600;
  font-size: var(--cr-fs-xs);
  text-transform: uppercase;
  letter-spacing: .02em;
}

.adm-deflist dd {
  margin: 0;
  color: var(--cr-text);
  font-size: var(--cr-fs-sm);
  word-break: break-word;
}

.adm-deflist dd.adm-mono,
.adm-mono {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  font-size: var(--cr-fs-xs);
}

/* JSON / preformatted payload blocks (audit diffs etc.) */
.adm-json {
  margin: 0;
  padding: var(--cr-sp-3);
  background: var(--cr-bg);
  border: 1px solid var(--cr-border);
  border-radius: var(--cr-radius-sm);
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  font-size: var(--cr-fs-xs);
  color: var(--cr-text);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

/* ── Tabs (server-rendered links) ─────────────────────────────────────── */
.adm-tabs {
  display: flex;
  gap: var(--cr-sp-1);
  border-bottom: 1px solid var(--cr-border);
  margin-bottom: var(--cr-sp-4);
  flex-wrap: wrap;
}

.adm-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--cr-sp-2);
  padding: var(--cr-sp-3) var(--cr-sp-4);
  font-size: var(--cr-fs-sm);
  font-weight: 500;
  color: var(--cr-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.adm-tab:hover { color: var(--cr-text); }

.adm-tab.is-active {
  color: var(--cr-brand);
  font-weight: 600;
  border-bottom-color: var(--cr-brand);
}

/* ── Form grid (inline supersede/filter forms) ───────────────────────── */
.adm-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--cr-sp-3);
  align-items: end;
}

.adm-field { display: flex; flex-direction: column; min-width: 0; }
.adm-field--submit { justify-content: flex-end; }
.adm-field--wide { grid-column: span 2; }

/* ── Buttons: status variants layered on the shared .cr-btn primitive ──── */
.adm-btn-success {
  background: var(--cr-success);
  border-color: var(--cr-success);
  color: #fff;
}
.adm-btn-success:hover { background: #15803D; border-color: #15803D; }

.adm-btn-danger {
  background: var(--cr-danger);
  border-color: var(--cr-danger);
  color: #fff;
}
.adm-btn-danger:hover { background: #B91C1C; border-color: #B91C1C; }

.adm-btn-ghost {
  background: transparent;
  border-color: var(--cr-border);
  color: var(--cr-text-muted);
}
.adm-btn-ghost:hover { border-color: var(--cr-brand); color: var(--cr-brand-700); }

.cr-btn.adm-btn-sm { padding: var(--cr-sp-1) var(--cr-sp-3); font-size: var(--cr-fs-xs); }

/* ── Status badges: semantic + named aliases (extend .cr-badge look) ───── */
.adm-status {
  display: inline-flex;
  align-items: center;
  gap: var(--cr-sp-1);
  font-size: var(--cr-fs-xs);
  font-weight: 600;
  line-height: 1;
  padding: var(--cr-sp-1) var(--cr-sp-2);
  border-radius: 999px;
  border: 1px solid var(--cr-border);
  background: var(--cr-bg);
  color: var(--cr-text-muted);
  white-space: nowrap;
}

.adm-status--neutral { background: var(--cr-bg); border-color: var(--cr-border); color: var(--cr-text-muted); }
.adm-status--info    { background: rgba(37, 99, 235, .12); border-color: rgba(37, 99, 235, .35); color: var(--cr-brand-700); }
.adm-status--success { background: rgba(22, 163, 74, .12); border-color: rgba(22, 163, 74, .35); color: var(--cr-success); }
.adm-status--warning { background: rgba(217, 119, 6, .12); border-color: rgba(217, 119, 6, .35); color: var(--cr-warning); }
.adm-status--danger  { background: rgba(220, 38, 38, .12); border-color: rgba(220, 38, 38, .35); color: var(--cr-danger); }

/* named status aliases — admin pages map domain statuses to these */
.adm-status--submitted  { background: var(--cr-bg); border-color: var(--cr-border); color: var(--cr-text-muted); }
.adm-status--reviewing,
.adm-status--published,
.adm-status--open        { background: rgba(37, 99, 235, .12); border-color: rgba(37, 99, 235, .35); color: var(--cr-brand-700); }
.adm-status--approved,
.adm-status--ok,
.adm-status--paid,
.adm-status--active      { background: rgba(22, 163, 74, .12); border-color: rgba(22, 163, 74, .35); color: var(--cr-success); }
.adm-status--deprecated,
.adm-status--superseded,
.adm-status--draft,
.adm-status--pending      { background: rgba(217, 119, 6, .12); border-color: rgba(217, 119, 6, .35); color: var(--cr-warning); }
.adm-status--rejected,
.adm-status--failed,
.adm-status--error,
.adm-status--revoked,
.adm-status--expired      { background: rgba(220, 38, 38, .12); border-color: rgba(220, 38, 38, .35); color: var(--cr-danger); }

/* ── Alerts (replace Bootstrap alert) ─────────────────────────────────── */
.adm-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--cr-sp-3);
  padding: var(--cr-sp-3) var(--cr-sp-4);
  border-radius: var(--cr-radius-sm);
  border: 1px solid var(--cr-border);
  background: var(--cr-surface);
  font-size: var(--cr-fs-sm);
  margin-bottom: var(--cr-sp-4);
}

.adm-alert.is-success { background: rgba(22, 163, 74, .10); border-color: rgba(22, 163, 74, .35); color: #15803D; }
.adm-alert.is-danger  { background: rgba(220, 38, 38, .10); border-color: rgba(220, 38, 38, .35); color: #B91C1C; }
.adm-alert.is-info    { background: rgba(37, 99, 235, .10); border-color: rgba(37, 99, 235, .35); color: var(--cr-brand-700); }

.adm-alert__body { flex: 1 1 auto; }

.adm-alert__close {
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: var(--cr-fs-lg);
  line-height: 1;
  opacity: .6;
  padding: 0 var(--cr-sp-1);
}
.adm-alert__close:hover { opacity: 1; }

/* ── Collapse (inline reveal, replaces data-bs-toggle="collapse") ─────── */
.adm-collapse[hidden] { display: none; }
.adm-collapse { margin-top: var(--cr-sp-3); }

/* ── Modal (replaces data-bs-toggle="modal") ──────────────────────────── */
.adm-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--cr-sp-4);
  background: rgba(15, 23, 42, .45);
}
.adm-modal.is-open { display: flex; }

.adm-modal__dialog {
  background: var(--cr-surface);
  border-radius: var(--cr-radius);
  box-shadow: var(--cr-shadow-lg);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
}

.adm-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cr-sp-3);
  padding: var(--cr-sp-4) var(--cr-sp-5);
  border-bottom: 1px solid var(--cr-border);
  font-weight: 600;
}

.adm-modal__body { padding: var(--cr-sp-5); }

.adm-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--cr-sp-2);
  padding: var(--cr-sp-4) var(--cr-sp-5);
  border-top: 1px solid var(--cr-border);
}

.adm-modal__close {
  border: none;
  background: transparent;
  color: var(--cr-text-muted);
  cursor: pointer;
  font-size: var(--cr-fs-xl);
  line-height: 1;
  padding: 0;
}
.adm-modal__close:hover { color: var(--cr-text); }

/* ── Misc helpers ─────────────────────────────────────────────────────── */
.adm-grid-2 {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--cr-sp-4);
  align-items: start;
}

.adm-checks { display: flex; flex-wrap: wrap; gap: var(--cr-sp-2) var(--cr-sp-4); }
.adm-check { display: inline-flex; align-items: center; gap: var(--cr-sp-2); font-size: var(--cr-fs-sm); }

.adm-inline { display: inline-flex; align-items: center; gap: var(--cr-sp-2); }
.adm-stack > * + * { margin-top: var(--cr-sp-3); }

@media (max-width: 992px) {
  .adm-grid-2 { grid-template-columns: 1fr; }
  .adm-field--wide { grid-column: auto; }
}
