/* =========================================================================
   ADMIN PAGE — moderation, companions, site styling
   ========================================================================= */

/* ── HEADER NAV BUTTONS ────────────────────────────────────────────────────
   Styled centrally in header-footer.css for every page (Admin included);
   nothing admin-specific needed here anymore. */
.app-header nav {
  display: flex;
  gap: 1.5rem !important;
}

.gate-card { max-width: 420px; margin: 6rem auto; }

.gate-intro {
  font-size: 0.9rem;
  color: var(--ink-on-paper-soft);
  margin-bottom: 1.25rem;
}

/* TABS */
.admin-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid rgba(212,175,106,0.25);
}

.admin-tab {
  background: none;
  border: none;
  color: var(--paper-dim);
  font-family: var(--font-ui);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.75rem 1.25rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.15s ease;
}

.admin-tab:hover { color: var(--paper); }
.admin-tab.active { color: var(--brass); border-bottom-color: var(--brass); }
.admin-tabpanel { display: none; }
.admin-tabpanel.active { display: block; }

/* MODERATION LIST -- these rows sit directly on the dark page
   background (not inside a .paper-card), so they need light text
   tokens, not the --ink-on-paper family meant for cream backgrounds. */
.admin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.35rem;
  background: rgba(247,240,220,0.04);
  border-radius: 6px;
  margin-bottom: 0.75rem;
  border: 1px solid rgba(212,175,106,0.16);
}

.admin-row .meta {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--paper-dim);
}

.admin-row .title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--paper);
}

.danger-btn {
  background: var(--seal);
  color: var(--paper);
  border: none;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.danger-btn:hover { background: var(--seal-bright); }
.danger-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Note: the "View" button in admin.js uses .nav-link with an inline
   brass-colored override, not a dedicated class -- nothing further
   needed here. */

/* HELP TEXT (used throughout the admin panels for short explanations) */
.admin-help-text {
  font-size: 0.85rem;
  color: var(--ink-on-paper-soft);
  margin-bottom: 1.25rem;
  line-height: 1.6;
}

.admin-help-text code {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  background: rgba(42,31,20,0.08);
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
}

/* CODE EDITORS (custom CSS / JS) */
.code-editor {
  width: 100%;
  min-height: 240px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  background: var(--ink-softer);
  color: var(--paper);
  border: 1px solid rgba(212,175,106,0.3);
  border-radius: 6px;
  padding: 1rem;
  resize: vertical;
  tab-size: 2;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.3);
}

.code-editor:focus {
  outline: none;
  border-color: var(--brass);
}

.code-field-label {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--seal);
  margin-bottom: 0.5rem;
  display: block;
}

.save-overrides-status {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  margin-top: 0.75rem;
  min-height: 1.2em;
}

/* COMPANIONS GRID */
.companion-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.companion-admin-card {
  text-align: center;
  background: rgba(42,31,20,0.05);
  border-radius: 6px;
  padding: 0.85rem;
  border: 1px solid rgba(42,31,20,0.12);
  box-shadow: inset 0 1px 3px rgba(42,31,20,0.04);
}

.companion-admin-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 0.6rem;
  background: rgba(42,31,20,0.08);
}

.companion-admin-card .name {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-on-paper);
}

/* WEAPON MASTERY CHECKBOX GRID (Add a Companion form)
   Scoped with #companionWeaponGrid / a dedicated row class (not just
   .field label) and !important on the properties that matter, so this
   never silently inherits the small/uppercase/letter-spaced look meant
   for .field's own section labels (Name, Gender, etc.) regardless of
   stylesheet load order. */
.companion-weapon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.7rem 1rem;
  margin-bottom: 0.85rem;
}

#companionWeaponGrid label.companion-weapon-check,
.companion-custom-weapon-row label.companion-weapon-check {
  display: grid !important;
  grid-template-columns: 1.05rem auto;
  align-items: center !important;
  column-gap: 0.55rem;
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: #2a1f14 !important;
  cursor: pointer;
  user-select: none;
  margin-bottom: 0;
}

/* Belt-and-suspenders: an explicit rule for BOTH themes individually
   (rather than relying on one unscoped default + a light-mode override),
   so there's no dependency on which token --ink-on-paper happens to
   resolve to, or on load order between admin.css and theme-light.css. The
   checkbox row sits on .paper-card's cream/tan gradient in both themes
   (cards are deliberately "paper" colored regardless of page theme), so
   the same near-black brown reads correctly against either. */
html[data-theme="dark"] #companionWeaponGrid label.companion-weapon-check,
html[data-theme="dark"] .companion-custom-weapon-row label.companion-weapon-check,
html[data-theme="light"] #companionWeaponGrid label.companion-weapon-check,
html[data-theme="light"] .companion-custom-weapon-row label.companion-weapon-check {
  color: #2a1f14 !important;
}

#companionWeaponGrid input[type="checkbox"],
.companion-custom-weapon-row input[type="checkbox"] {
  grid-row: 1;
  grid-column: 1;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--seal);
  cursor: pointer;
  position: relative;
  top: 0;
}

.companion-custom-weapon-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  .companion-weapon-grid { grid-template-columns: repeat(2, 1fr); }
}