/* ============================================================
   admin.css — ShortsCraft Production Admin Console Styles
   Clean, responsive, accessible on desktop, tablet, and mobile.
   ============================================================ */

.admin-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 20px 80px;
}

/* Administrative console does not use consumer bottom bar */
.sh-bottomnav {
  display: none !important;
}

/* ── Top Bar & Identity ───────────────────────────────────── */
.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--sh-line);
}

.admin-header-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-header-title h1 {
  margin: 0;
  font: 700 clamp(24px, 3.5vw, 32px)/1.15 var(--sh-display, 'Space Grotesk', sans-serif);
  color: var(--sh-ink);
  letter-spacing: -0.02em;
}

.admin-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.admin-role-badge.is-owner {
  background: color-mix(in srgb, #f59e0b 16%, var(--sh-bg2));
  color: #b45309;
  border: 1px solid color-mix(in srgb, #f59e0b 35%, transparent);
}
.admin-role-badge.is-sub-admin {
  background: color-mix(in srgb, #3b82f6 16%, var(--sh-bg2));
  color: #1d4ed8;
  border: 1px solid color-mix(in srgb, #3b82f6 35%, transparent);
}
.admin-role-badge.is-moderator {
  background: color-mix(in srgb, #10b981 16%, var(--sh-bg2));
  color: #047857;
  border: 1px solid color-mix(in srgb, #10b981 35%, transparent);
}
html[data-theme="dark"] .admin-role-badge.is-owner { color:#fbbf24; }
html[data-theme="dark"] .admin-role-badge.is-sub-admin { color:#93c5fd; }
html[data-theme="dark"] .admin-role-badge.is-moderator { color:#6ee7b7; }

.admin-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-workspace { display:grid; grid-template-columns:194px minmax(0,1fr); gap:24px; align-items:start; }
.admin-content, .admin-panel { min-width:0; }
.admin-section-heading { margin:0 0 20px; }
.admin-section-heading h2 { margin:0 0 5px; color:var(--sh-ink); font-size:22px; letter-spacing:-.025em; }
.admin-section-heading p { margin:0; color:var(--sh-ink3); font-size:13px; line-height:1.6; }

/* ── Navigation: Groups & Tabs ────────────────────────────── */
.admin-nav-container {
  margin-bottom: 0;
  position: sticky;
  top: 68px;
  z-index: 10;
  background: var(--sh-bg2);
  border: 1px solid var(--sh-line);
  border-radius: 16px;
  padding: 10px;
}

.admin-nav-scroller {
  display: grid;
  gap:12px;
  max-height:calc(100dvh - 110px);
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:var(--sh-line2) transparent;
}
.admin-nav-group { display:grid; gap:3px; min-width:0; }
.admin-nav-group h2 { margin:3px 7px 4px; color:var(--sh-ink3); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.admin-soon { display:block; margin-top:3px; font-weight:500; letter-spacing:0; text-transform:none; }

.admin-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width:100%;
  min-height:36px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--sh-ink2);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.16s ease;
  user-select: none;
  text-align:left;
}
.admin-nav-item > span:first-child { width:18px; text-align:center; font-size:13px; }
.admin-nav-item:focus-visible, .admin-btn:focus-visible { outline:2px solid var(--sh-ink); outline-offset:3px; }
.admin-nav-item:hover {
  color: var(--sh-ink);
  background: var(--sh-bg2);
}
.admin-nav-item[aria-pressed="true"] {
  color: var(--sh-ink);
  background: var(--sh-bg);
  border-color: var(--sh-line2);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}
.admin-nav-item .admin-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  background: #ef4444;
  color: #fff;
}

/* ── Mobile Nav Dropdown Switcher ─────────────────────────── */
.admin-mobile-nav {
  display: none;
  width: 100%;
}
.admin-mobile-nav select {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--sh-line2);
  border-radius: 12px;
  background: var(--sh-bg2);
  color: var(--sh-ink);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
}
.admin-mobile-nav label { display:block; margin:0 0 6px; color:var(--sh-ink3); font-size:11px; font-weight:700; }

/* ── Dashboard KPI Cards ──────────────────────────────────── */
.admin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.admin-kpi-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px 20px;
  border: 1px solid var(--sh-line);
  border-radius: 16px;
  background: var(--sh-bg2);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.admin-kpi-card:hover {
  border-color: var(--sh-line2);
  transform: translateY(-1px);
}
.admin-kpi-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.admin-kpi-card-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--sh-ink3);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.admin-kpi-card-icon {
  font-size: 18px;
  opacity: 0.85;
}
.admin-kpi-card-val {
  margin: 0;
  font: 700 clamp(26px, 3vw, 34px)/1.1 var(--sh-display, 'Space Grotesk', sans-serif);
  color: var(--sh-ink);
}
.admin-kpi-card-sub {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--sh-ink3);
}

/* ── Quick Action Bar ─────────────────────────────────────── */
.admin-quick-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
  padding: 16px 18px;
  border: 1px solid var(--sh-line);
  border-radius: 14px;
  background: var(--sh-bg2);
}
.admin-quick-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--sh-ink3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 6px;
}

/* ── Tables & Data Lists ──────────────────────────────────── */
.admin-card-panel {
  border: 1px solid var(--sh-line);
  border-radius: 16px;
  background: var(--sh-bg2);
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.02);
}

.admin-list { display:grid; gap:10px; }
.admin-row { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px; background:var(--sh-bg); border:1px solid var(--sh-line); border-radius:12px; }
.admin-row-main { display:grid; gap:5px; min-width:0; overflow-wrap:anywhere; }
.admin-row-main strong { color:var(--sh-ink); font-size:14px; }
.admin-row-main span, .admin-row-main small { color:var(--sh-ink3); font-size:12px; line-height:1.55; }
.admin-row-controls { display:flex; gap:7px; flex-wrap:wrap; flex-shrink:0; }
.admin-load-error { padding:12px 14px; border:1px solid color-mix(in srgb,#ef4444 30%,var(--sh-line)); border-radius:10px; color:var(--sh-ink); font-size:13px; line-height:1.5; background:var(--sh-bg2); }
.admin-load-error button { margin-left:10px; }
.admin-panel[aria-busy="true"] .admin-section-heading { opacity:.7; }
.admin-btn:disabled { cursor:not-allowed; opacity:.5; }
.admin-support-layout { display:grid; grid-template-columns:minmax(160px,.8fr) minmax(0,1.4fr); gap:16px; }
.admin-ticket-button { display:grid; gap:5px; padding:14px; background:var(--sh-bg); border:1px solid var(--sh-line); border-radius:10px; color:var(--sh-ink); text-align:left; font:inherit; cursor:pointer; overflow-wrap:anywhere; }
.admin-ticket-button small, .admin-ticket-button span { font-size:12px; color:var(--sh-ink3); }
.admin-ticket-view { min-width:0; padding:16px; border:1px solid var(--sh-line); border-radius:12px; }
.admin-ticket-messages, .admin-reply-form { display:grid; gap:10px; margin:14px 0; }
.admin-message { padding:12px; border-radius:10px; background:var(--sh-bg); overflow-wrap:anywhere; }
.admin-message p { white-space:pre-wrap; }
.admin-ticket-state, .admin-access-actions { display:flex; flex-wrap:wrap; gap:8px; }
.admin-reply-form textarea { width:100%; resize:vertical; min-height:100px; padding:12px; border:1px solid var(--sh-line2); border-radius:10px; color:var(--sh-ink); background:var(--sh-bg); font:inherit; }
.admin-access { padding:16px; border:1px solid var(--sh-line2); border-radius:12px; }
.admin-access-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:14px 0; }
.admin-access-item { display:flex; align-items:flex-start; gap:9px; padding:10px; border:1px solid var(--sh-line); border-radius:8px; }
.admin-access-item span { display:grid; gap:4px; min-width:0; }
.admin-access-item b { font-size:12px; }
.admin-access-item small { color:var(--sh-ink3); font-size:11px; line-height:1.5; }
.admin-design-preview { width:100%; min-height:140px; border:1px solid var(--sh-line); border-radius:10px; overflow:hidden; background:var(--sh-bg); }
.admin-design-preview .ds-template-preview { display:block; width:100%; height:auto; max-height:65dvh; object-fit:contain; }

.admin-panel-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

.admin-filter-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-search-input {
  height: 40px;
  min-width: 220px;
  max-width: 380px;
  padding: 0 14px;
  border: 1px solid var(--sh-line);
  border-radius: 10px;
  background: var(--sh-bg);
  color: var(--sh-ink);
  font: inherit;
  font-size: 13.5px;
  transition: border-color 0.16s ease;
}
.admin-search-input:focus {
  outline: none;
  border-color: var(--sh-ink);
}

.admin-select {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--sh-line);
  border-radius: 10px;
  background: var(--sh-bg);
  color: var(--sh-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
}

.admin-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--sh-line);
  border-radius: 12px;
  -webkit-overflow-scrolling: touch;
}

.admin-table {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
  text-align: left;
  font-size: 13.5px;
}

.admin-table th {
  padding: 12px 14px;
  font-weight: 650;
  font-size: 12px;
  color: var(--sh-ink3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--sh-bg);
  border-bottom: 1px solid var(--sh-line);
  white-space: nowrap;
}

.admin-table td {
  padding: 14px;
  border-bottom: 1px solid var(--sh-line);
  color: var(--sh-ink);
  vertical-align: middle;
}
.admin-table tr:last-child td {
  border-bottom: 0;
}
.admin-table tr:hover td {
  background: color-mix(in srgb, var(--sh-bg) 60%, transparent);
}

/* ACTIONS / last column: intentionally NOT sticky. A right-pinned sticky
   column painted its solid background over the middle columns whenever the
   admin console was squeezed (it renders inside the main site shell, so the
   content area is narrower than the window), hiding those columns in a way
   no amount of horizontal scrolling could reveal. Every column now stays
   reachable via the .admin-table-wrap horizontal scroll. */
.admin-table th:last-child,
.admin-table td:last-child {
  text-align: right;
  min-width: 170px;
  white-space: nowrap;
}

/* Audit trail: the Details column holds long JSON strings — let them wrap
   instead of overlapping neighbouring cells. */
#adminAuditLogList td:last-child {
  white-space: normal;
  overflow-wrap: anywhere;
  min-width: 220px;
}

/* ── Status Pills ─────────────────────────────────────────── */
.admin-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 650;
  white-space: nowrap;
}
.admin-pill.is-active,
.admin-pill.is-published,
.admin-pill.is-paid,
.admin-pill.is-resolved {
  background: color-mix(in srgb, #10b981 16%, var(--sh-bg2));
  color: #059669;
}
.admin-pill.is-pending,
.admin-pill.is-review,
.admin-pill.is-queued,
.admin-pill.is-open {
  background: color-mix(in srgb, #f59e0b 16%, var(--sh-bg2));
  color: #d97706;
}
.admin-pill.is-rejected,
.admin-pill.is-failed,
.admin-pill.is-banned,
.admin-pill.is-dismissed {
  background: color-mix(in srgb, #ef4444 16%, var(--sh-bg2));
  color: #dc2626;
}
.admin-pill.is-pro {
  background: color-mix(in srgb, #8b5cf6 16%, var(--sh-bg2));
  color: #7c3aed;
}

/* ── Buttons ──────────────────────────────────────────────── */
.admin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 9px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.16s ease;
  user-select: none;
}
.admin-btn-sm {
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
}
.admin-btn-primary {
  background: var(--sh-ink);
  color: var(--sh-bg) !important;
  border: 1px solid var(--sh-ink);
}
.admin-btn-primary:hover {
  background: var(--sh-ink);
  color: var(--sh-bg) !important;
  opacity: 0.95;
}
.admin-btn-outline {
  background: transparent;
  color: var(--sh-ink);
  border: 1px solid var(--sh-line2);
}
.admin-btn-outline:hover {
  background: var(--sh-bg);
}
.admin-btn-danger {
  background: transparent;
  color: #ef4444;
  border: 1px solid color-mix(in srgb, #ef4444 35%, transparent);
}
.admin-btn-danger:hover {
  background: color-mix(in srgb, #ef4444 10%, transparent);
}
.admin-btn-success {
  background: #10b981;
  color: #fff;
  border: 1px solid #10b981;
}
.admin-btn-success:hover {
  background: #059669;
}

/* ── Modals ───────────────────────────────────────────────── */
.admin-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.admin-modal-box {
  width: 100%;
  max-width: 620px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  background: var(--sh-bg2);
  border: 1px solid var(--sh-line2);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  animation: adminModalIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes adminModalIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.admin-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--sh-line);
}
.admin-modal-head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--sh-ink);
}
.admin-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: transparent;
  border: 0;
  color: var(--sh-ink3);
  cursor: pointer;
  font-size: 18px;
  transition: all 0.16s ease;
}
.admin-modal-close:hover {
  color: var(--sh-ink);
  background: var(--sh-bg);
}

.admin-modal-body {
  padding: 22px;
  overflow-y: auto;
  display: grid;
  gap: 16px;
}

.admin-modal-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 22px;
  border-top: 1px solid var(--sh-line);
  background: var(--sh-bg);
}

.admin-form-group {
  display: grid;
  gap: 6px;
}
.admin-form-group label {
  font-size: 13px;
  font-weight: 650;
  color: var(--sh-ink);
}
.admin-form-group input,
.admin-form-group textarea,
.admin-form-group select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--sh-line2);
  border-radius: 9px;
  background: var(--sh-bg);
  color: var(--sh-ink);
  font: inherit;
  font-size: 13.5px;
}
.admin-form-group textarea {
  min-height: 80px;
  resize: vertical;
}
.admin-form-note {
  font-size: 12px;
  color: var(--sh-ink3);
  margin: 0;
}
.admin-form-note.is-mandatory {
  color: #dc2626;
  font-weight: 600;
}

/* ── Star Packs Editor Grid ───────────────────────────────── */
.admin-packs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.admin-pack-card {
  padding: 18px;
  border: 1px solid var(--sh-line);
  border-radius: 14px;
  background: var(--sh-bg);
  display: grid;
  gap: 10px;
}

/* ── Activity / Audit Stream ──────────────────────────────── */
.admin-activity-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--sh-line);
}
.admin-activity-item:last-child {
  border-bottom: 0;
}
.admin-activity-icon {
  font-size: 16px;
  padding: 6px;
  border-radius: 8px;
  background: var(--sh-bg);
}
.admin-activity-text {
  flex: 1;
  font-size: 13px;
  color: var(--sh-ink2);
}
.admin-activity-text b {
  color: var(--sh-ink);
}
.admin-activity-time {
  font-size: 12px;
  color: var(--sh-ink3);
  white-space: nowrap;
}

/* ── Mobile & Tablet Responsiveness ───────────────────────── */
@media (max-width: 900px) {
  .admin-workspace { grid-template-columns:minmax(0,1fr); gap:18px; }
  .admin-table {
    min-width: 720px;
  }
  .admin-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .admin-header-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .admin-nav-container {
    top: 60px;
    z-index:20;
    padding:12px;
  }
  .admin-mobile-nav {
    display: block;
  }
  .admin-nav-scroller {
    display: none;
  }
  .admin-panel-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .admin-panel-toolbar .admin-btn {
    width: 100%;
  }
  .admin-filter-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    width: 100%;
  }
  .admin-search-input {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .admin-filter-group select {
    width: 100%;
    min-width: 0;
  }
  #adminTemplateType { grid-column:1 / -1; }
  .admin-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .admin-row { flex-direction:column; align-items:stretch; gap:12px; }
  .admin-row-controls { flex-shrink:1; }
  .admin-support-layout, .admin-access-list { grid-template-columns:minmax(0,1fr); }
}

@media (max-width: 600px) {
  .admin-header-title { flex-wrap:wrap; gap:9px; }
  .admin-page {
    padding: 16px 12px 36px;
  }
  /* Do not show consumer bottom bar in admin console */
  .sh-bottomnav {
    display: none !important;
  }
  .admin-kpi-grid {
    grid-template-columns: 1fr;
  }
  .admin-card-panel {
    padding: 14px;
    border-radius: 14px;
  }
  .admin-quick-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .admin-quick-actions .admin-btn {
    width: 100%;
    min-height: 44px;
  }
  .admin-modal-box {
    max-height: calc(100dvh - 32px - env(safe-area-inset-bottom));
    border-radius: 14px;
  }
  .admin-modal-head,
  .admin-modal-body,
  .admin-modal-foot {
    padding-inline: 16px;
  }
  .admin-search-input,
  .admin-select,
  .admin-form-group input,
  .admin-form-group select,
  .admin-form-group textarea {
    font-size: 16px; /* Prevents auto-zoom in mobile Safari */
  }
  .admin-btn {
    min-height: 40px;
  }
}

/* ============================================================
   Admin Console redesign — icon system & polish (2026-10-17)
   No emoji icons: all icons are inline SVG. These rules extend
   the existing admin console styles above.
   ============================================================ */

/* ── Inline SVG icon primitives ───────────────────────────── */
.admin-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--sh-ink3);
  transition: color 0.16s ease;
}
.admin-nav-icon svg { width: 18px; height: 18px; display: block; }
.admin-nav-item:hover .admin-nav-icon { color: var(--sh-ink2); }
.admin-nav-item[aria-pressed="true"] .admin-nav-icon { color: var(--sh-ink); }

/* KPI icon tile — replaces the old emoji glyph */
.admin-kpi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--sh-ink) 6%, transparent);
  color: var(--sh-ink2);
  flex-shrink: 0;
}
.admin-kpi-icon svg { width: 20px; height: 20px; display: block; }
.admin-kpi-card:hover .admin-kpi-icon {
  background: color-mix(in srgb, var(--sh-ink) 10%, transparent);
  color: var(--sh-ink);
}

/* Small inline SVG used by JS-rendered rows/cells */
.admin-inline-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  flex-shrink: 0;
}
.admin-inline-icon svg { width: 14px; height: 14px; display: block; }
.admin-stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.admin-stat .admin-inline-icon { color: var(--sh-ink3); }

/* Button-embedded SVG */
.admin-btn-icon { width: 15px; height: 15px; flex-shrink: 0; display: block; }
.admin-btn-sm .admin-btn-icon { width: 13px; height: 13px; }

/* ── Header polish ────────────────────────────────────────── */
.admin-header-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--sh-ink);
  color: var(--sh-bg);
  flex-shrink: 0;
}
.admin-header-mark-svg { width: 24px; height: 24px; display: block; }
.admin-header-text { display: grid; gap: 2px; }
.admin-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sh-ink3);
}
.admin-header-title { gap: 14px; }
.admin-live-status { display: inline-flex; align-items: center; gap: 6px; }
.admin-live-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px color-mix(in srgb, #10b981 18%, transparent);
}

/* ── Utility classes (replacing scattered inline styles) ──── */
.admin-h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--sh-ink); }
.admin-subtle { margin: 2px 0 0; }
.admin-narrow { max-width: 680px; }
.admin-form-grid { display: grid; gap: 14px; }
.admin-th-right { text-align: right; }
.admin-td-center { text-align: center; }

/* ── Section heading polish ───────────────────────────────── */
.admin-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.admin-section-heading h2 { font-size: 24px; }

/* ── Row polish: status pill + archive affordance ──────────── */
.admin-row { transition: border-color 0.16s ease, box-shadow 0.16s ease; }
.admin-row:hover { border-color: var(--sh-line2); box-shadow: 0 2px 10px rgba(0,0,0,0.04); }
.admin-row-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.admin-row-status .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.admin-row-status.is-published { color: #059669; }
.admin-row-status.is-review { color: #d97706; }
.admin-row-status.is-rejected { color: #dc2626; }
.admin-row-status.is-archived { color: var(--sh-ink3); }

/* ── Nav polish ───────────────────────────────────────────── */
.admin-nav-item { gap: 9px; }
.admin-nav-group + .admin-nav-group { margin-top: 2px; }

/* ── Dark theme tuning for new tiles ──────────────────────── */
html[data-theme="dark"] .admin-kpi-icon {
  background: color-mix(in srgb, #ffffff 8%, transparent);
}
html[data-theme="dark"] .admin-header-mark {
  background: var(--sh-bg);
  color: var(--sh-ink);
  border: 1px solid var(--sh-line2);
}