/* ==========================================================================
   Core Music — control panel
   Layered on shared.css, which supplies the page shell, header, footer and
   wordmark. Everything here is the admin-only surface: the login card, the
   dashboard grid, the product table and the form chrome.

   Field and pill styles are lifted from support.css rather than imported,
   because that sheet is scoped to the support page and pulling it in whole
   would drag the two-panel layout along with it. Keep the two in step if the
   site's input styling ever changes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Ambient glow, matched to the other pages
   -------------------------------------------------------------------------- */

@keyframes om-drift-admin { from { transform: translateY(-60px); } to { transform: translateY(60px); } }

.glow--admin {
  position: absolute;
  top: -240px;
  left: 50%;
  margin-left: -420px;
  width: 840px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(94, 106, 210, 0.16), transparent 70%);
  filter: blur(24px);
  pointer-events: none;
  animation: om-drift-admin 14s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  .glow--admin { animation: none; }
}

.page--admin { color: #fafafa; }

/* Wordmark equaliser bars.
   The marketing pages carry these four values in a `style` attribute on each
   <i>. The control panel serves a CSP without 'unsafe-inline' in style-src,
   which blocks inline style attributes outright, so the same values live here
   as rules instead. Keep in step with the wordmark markup in index.html. */
.page--admin .wordmark__mark .eq-bar { --bar-w: 2.5px; }
.page--admin .wordmark__mark .eq-bar:nth-child(1) { --bar-h: 7px;  --bar-c: #71717a; }
.page--admin .wordmark__mark .eq-bar:nth-child(2) { --bar-h: 14px; --bar-c: #e4e4e7; }
.page--admin .wordmark__mark .eq-bar:nth-child(3) { --bar-h: 16px; --bar-c: #fafafa; }
.page--admin .wordmark__mark .eq-bar:nth-child(4) { --bar-h: 9px;  --bar-c: #a1a1aa; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.admin-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: #52525b;
}

code {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.92em;
  color: #a1a1aa;
}

/* --------------------------------------------------------------------------
   Cards — the same panel treatment the support page uses
   -------------------------------------------------------------------------- */

.admin-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px;
  border-radius: 20px;
  background: linear-gradient(180deg, #141416, #0f0f11);
  border: 1px solid #1f1f23;
  box-shadow: 0 40px 70px -40px rgba(0, 0, 0, 0.9);
}

.admin-card__head { display: flex; flex-direction: column; gap: 8px; }

.admin-card__title {
  margin: 0;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: #fafafa;
}

.admin-card__sub {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 300;
  color: #71717a;
}

.admin-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.admin-count { font-weight: 300; color: #52525b; }

/* --------------------------------------------------------------------------
   Login
   -------------------------------------------------------------------------- */

.admin-login {
  flex: 1;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px 40px 96px;
}

.admin-card--login {
  width: 100%;
  max-width: 420px;
  animation: om-rise .9s cubic-bezier(.16, 1, .3, 1) .08s both;
}

.admin-card--login .admin-card__title { font-size: 26px; letter-spacing: -0.03em; }
.admin-card--login .admin-card__foot { margin-top: 4px; }

/* --------------------------------------------------------------------------
   Dashboard
   -------------------------------------------------------------------------- */

.admin-main {
  flex: 1;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px 96px;
}

.admin-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 64px 0 40px;
  animation: om-rise .9s cubic-bezier(.16, 1, .3, 1) .08s both;
}

.admin-intro__text { display: flex; flex-direction: column; gap: 10px; }

.admin-intro__title {
  margin: 0;
  font-size: 38px;
  font-weight: 300;
  letter-spacing: -0.035em;
  color: #fafafa;
}
.admin-intro__title strong { font-weight: 600; }

.admin-intro__lede {
  margin: 0;
  max-width: 560px;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 300;
  color: #8e8e96;
  text-wrap: pretty;
}

/* Form column stays a comfortable reading width; the table takes the rest. */
.admin-grid {
  display: grid;
  grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
  align-items: start;
  gap: 26px;
  animation: om-rise 1s cubic-bezier(.16, 1, .3, 1) .2s both;
}

@media (max-width: 940px) {
  .admin-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Fields  (mirrors support.css)
   -------------------------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: 9px; }
.field--grow { flex: 1; }

.field__label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: #52525b;
}

.field__input {
  box-sizing: border-box;
  width: 100%;
  padding: 13px 15px;
  border-radius: 11px;
  background: #0c0c0e;
  border: 1px solid #26262b;
  color: #fafafa;
  font-family: 'Sora', Helvetica, Arial, sans-serif;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.5;
  transition: border-color .18s ease, background .18s ease;
}
.field__input::placeholder { color: #4b4b53; }
.field__input:hover { border-color: #34343b; }
.field__input:focus {
  outline: none;
  background: #101013;
  border-color: #56565f;
}

.field__input--area { min-height: 120px; resize: vertical; }

.select { position: relative; display: flex; }
.select__input {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px;
  cursor: pointer;
}
.select__input option { background: #141416; color: #fafafa; }

.select__chevron {
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -3px;
  color: #71717a;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.pill {
  padding: 12px 26px;
  border-radius: 999px;
  background: none;
  border: 1px solid #3a3c43;
  color: #e4e4e7;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.pill:hover { background: #fafafa; border-color: #fafafa; color: #0a0a0b; }
.pill:focus-visible { outline: 2px solid #56565f; outline-offset: 3px; }
.pill[disabled] { opacity: .5; cursor: default; background: none; border-color: #3a3c43; color: #e4e4e7; }

.pill--quiet { border-color: #26262b; color: #8e8e96; }
.pill--quiet:hover { background: #1c1c20; border-color: #3a3c43; color: #fafafa; }

.chip {
  padding: 7px 13px;
  border-radius: 8px;
  background: none;
  border: 1px solid #2b2b31;
  color: #a1a1aa;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.chip:hover { background: #1c1c20; border-color: #3f3f46; color: #fafafa; }
.chip:focus-visible { outline: 2px solid #56565f; outline-offset: 2px; }
.chip--danger:hover { background: #2a1618; border-color: #6b3438; color: #f0b9b9; }

/* --------------------------------------------------------------------------
   Status + alerts
   -------------------------------------------------------------------------- */

.admin-status {
  margin: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  line-height: 1.5;
  color: #71717a;
}
.admin-status[data-tone="ok"]    { color: #9fbf9f; }
.admin-status[data-tone="error"] { color: #c98d8d; }

.admin-alert {
  margin: 0;
  padding: 12px 15px;
  border-radius: 11px;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 300;
}
.admin-alert[data-tone="error"] { background: rgba(74, 42, 46, 0.18); border: 1px solid #4a2a2e; color: #d9a3a3; }
.admin-alert[data-tone="warn"]  { background: rgba(74, 61, 36, 0.18); border: 1px solid #4a3d24; color: #d6bd8e; }

/* --------------------------------------------------------------------------
   Product table
   -------------------------------------------------------------------------- */

.admin-card--list { padding-bottom: 24px; }

/* The table keeps its own horizontal scroll so a long affiliate URL can never
   push the page itself sideways. */
.admin-table__scroll {
  overflow-x: auto;
  margin: 0 -8px;
  padding: 0 8px;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.admin-table th {
  padding: 0 14px 12px 0;
  text-align: left;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.16em;
  color: #52525b;
  border-bottom: 1px solid #1f1f23;
  white-space: nowrap;
}

.admin-table td {
  padding: 16px 14px 16px 0;
  vertical-align: middle;
  border-bottom: 1px solid #17171a;
  color: #a1a1aa;
  font-weight: 300;
}

.admin-table tr:last-child td { border-bottom: 0; }

.admin-table__empty {
  padding: 32px 0;
  text-align: center;
  color: #52525b;
  font-size: 13.5px;
}

.admin-table__category { white-space: nowrap; color: #c8c8ce; }
.admin-table__date { white-space: nowrap; color: #6b6b74; font-size: 13px; }

/* `max-width: 0` with `width: 100%` is the standard way to make a table cell
   absorb the leftover width *and* let its contents truncate — without it the
   affiliate URL sets the column's minimum width and pushes the action buttons
   off the right edge. */
.admin-table__product { width: 100%; max-width: 0; }

.admin-table__actions { width: 1%; white-space: nowrap; padding-right: 0 !important; }

.admin-table__actionrow { display: flex; gap: 8px; justify-content: flex-end; }

.admin-product { display: flex; align-items: center; gap: 14px; min-width: 0; }

.admin-product__thumb {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 10px;
  overflow: hidden;
  background: #0c0c0e;
  border: 1px solid #26262b;
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-product__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* A product with no photo yet reads as a slot, not a broken image. */
.admin-product__thumb[data-empty]::after {
  content: '';
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #34343b;
}

.admin-product__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
}

.admin-product__name {
  font-size: 14.5px;
  font-weight: 500;
  color: #fafafa;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-product__link {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  color: #56565f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-product__link:hover { color: #a1a1aa; }

@media (max-width: 680px) {
  .admin-main { padding: 0 24px 72px; }
  .admin-login { padding: 48px 24px 72px; }
  .admin-card { padding: 24px; }
  .admin-intro { padding: 48px 0 32px; }
  .admin-intro__title { font-size: 30px; }
}