/* ═══════════════════════════════════════════════════
   Temple Brigades — Global Theme
   White background · Light-red cards · Black text
   ═══════════════════════════════════════════════════ */

:root {
  --red:          #cc0000;
  --red-dark:     #9a0000;
  --red-btn:      #d41111;
  --card-bg:      #ffe8e8;
  --card-border:  #f5bcbc;
  --card-hover:   #fddada;
  --text:         #1a0000;
  --text-mid:     #660000;
  --text-muted:   rgba(100,0,0,0.5);
  --input-bg:     #ffffff;
  --input-border: #f0b0b0;
  --input-focus:  #cc0000;
  --white-card:   #fff;
  --white-border: #ffe0e0;
}

/* ── Page ── */
body {
  background: #ffffff !important;
  background-image:
    radial-gradient(ellipse 120% 35% at 50% 0%, rgba(255,200,200,0.4) 0%, transparent 55%) !important;
  color: var(--text) !important;
}

/* ── Header ── */
header {
  background: rgba(255,255,255,0.96) !important;
  border-bottom: 1px solid var(--white-border) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 1px 8px rgba(180,0,0,0.06) !important;
}
.brand-name { color: var(--text) !important; font-weight: 700 !important; }
.brand-sub  { color: var(--text-mid) !important; }

/* ── Buttons ── */
.btn-ghost {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  color: var(--text-mid) !important;
  font-weight: 500 !important;
}
.btn-ghost:hover {
  background: var(--card-hover) !important;
  border-color: #e89090 !important;
  color: var(--red) !important;
}
.btn-primary {
  background: linear-gradient(135deg, var(--red-btn), #aa0000) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 3px 12px rgba(180,0,0,0.25) !important;
}
.btn-primary:hover { opacity: 0.9 !important; transform: translateY(-1px) !important; }
.logout-btn { color: var(--text-muted) !important; background: none !important; border: none !important; }
.logout-btn:hover { color: var(--red) !important; }

/* ── Tabs ── */
.tabs-bar {
  background: rgba(255,255,255,0.98) !important;
  border-bottom: 1px solid var(--white-border) !important;
}
.tab { color: var(--text-muted) !important; }
.tab:hover { color: var(--text-mid) !important; }
.tab.active { color: var(--text) !important; border-bottom-color: var(--red) !important; }
.badge { background: var(--card-bg) !important; color: var(--text-mid) !important; border: 1px solid var(--card-border) !important; }
.tab.active .badge { background: rgba(180,0,0,0.1) !important; color: var(--red) !important; }

/* ── Cards (main style) ── */
.card, .gossip-card, .item-card, .score-card,
.login-card, .subcat-row, .cat-card {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  color: var(--text) !important;
  box-shadow: 0 2px 12px rgba(180,0,0,0.08) !important;
}
/* ── Medal card colours (override base card style) ── */
.score-card.card-gold   { background: linear-gradient(135deg,#fffbe6,#fff3c0) !important; border: 2px solid #f5c842 !important; box-shadow: 0 4px 16px rgba(200,160,0,0.2) !important; }
.score-card.card-silver { background: linear-gradient(135deg,#f5f5f8,#e8e8ef) !important; border: 2px solid #b0b0c0 !important; box-shadow: 0 4px 16px rgba(100,100,130,0.15) !important; }
.score-card.card-bronze { background: linear-gradient(135deg,#fff2e8,#fde0c4) !important; border: 2px solid #c98a50 !important; box-shadow: 0 4px 16px rgba(160,90,30,0.15) !important; }
.score-card.card-gold:hover   { background: linear-gradient(135deg,#fff8d6,#ffee99) !important; }
.score-card.card-silver:hover { background: linear-gradient(135deg,#ebebef,#dddde8) !important; }
.score-card.card-bronze:hover { background: linear-gradient(135deg,#feecd8,#fcd4a8) !important; }

.gossip-card:hover, .item-card:hover, .score-card:hover {
  background: var(--card-hover) !important;
  border-color: #e89090 !important;
  box-shadow: 0 4px 18px rgba(180,0,0,0.13) !important;
}

/* ── Card text ── */
.gossip-content, .item-name, .score-name, .gossip-text,
.link-title, .subcat-name, .panel-title, .cat-label,
.brand-name, h2, h1 { color: var(--text) !important; }

.gossip-meta, .item-meta, .item-desc, .score-meta,
.score-label, .subcat-range, .subcat-desc,
.link-desc, .cat-sub { color: var(--text-mid) !important; }

/* ── Add-form panels ── */
.add-form {
  background: var(--white-card) !important;
  border: 1px solid var(--card-border) !important;
  box-shadow: 0 2px 12px rgba(180,0,0,0.07) !important;
}

/* ── Inputs ── */
input[type="text"], input[type="number"], input[type="password"],
textarea, select, select.field-select {
  background: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--text) !important;
  border-radius: 10px !important;
}
input[type="text"]::placeholder, input[type="number"]::placeholder,
textarea::placeholder, input[type="password"]::placeholder {
  color: rgba(100,0,0,0.35) !important;
}
input:focus, textarea:focus, select:focus, select.field-select:focus {
  border-color: var(--input-focus) !important;
  box-shadow: 0 0 0 3px rgba(200,0,0,0.1) !important;
  outline: none !important;
}
select option, select.field-select option { background: #fff !important; color: var(--text) !important; }

/* ── Labels ── */
label, label.field-label { color: var(--text-mid) !important; }

/* ── Form section (entry page) ── */
.form-section {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
}
.total-bar { background: rgba(180,0,0,0.08) !important; border: 1px solid var(--card-border) !important; }
.total-label { color: var(--text-mid) !important; }
.total-value { color: var(--red) !important; }

/* ── Range slider ── */
input[type="range"] { background: rgba(180,0,0,0.15) !important; }
input[type="range"]::-webkit-slider-thumb { background: var(--red) !important; box-shadow: 0 2px 8px rgba(180,0,0,0.3) !important; }
.score-val { color: var(--text-mid) !important; }
.char-count { color: var(--text-muted) !important; }

/* ── Category cards on entry page ── */
.cat-card { border: 2px solid var(--card-border) !important; }
.cat-card:hover { background: var(--card-hover) !important; border-color: #e89090 !important; }
.cat-card.active { background: var(--red) !important; border-color: var(--red-dark) !important; }
.cat-card.active .cat-label { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.cat-card.active .cat-sub   { color: rgba(255,255,255,0.8) !important; }

/* ── Toggle buttons ── */
.toggle-btn { background: #fff !important; border: 1px solid var(--input-border) !important; color: var(--text-mid) !important; }
.toggle-btn.active { background: var(--red) !important; border-color: var(--red) !important; color: #fff !important; }

/* ── Submit button on entry ── */
.submit-btn {
  background: linear-gradient(135deg, var(--red-btn), #aa0000) !important;
  border: none !important; color: #fff !important;
  box-shadow: 0 4px 16px rgba(180,0,0,0.3) !important;
}
.submit-btn:hover:not(:disabled) { opacity: 0.9 !important; transform: translateY(-1px) !important; }
.submit-btn:disabled { opacity: 0.4 !important; }

/* ── Daily warning ── */
.daily-warning { background: #fff8e1 !important; border: 1px solid #ffd54f !important; color: #7a5800 !important; }

/* ── Empty/state boxes ── */
.state-box, .empty-state { color: var(--text-muted) !important; }
.state-icon { opacity: 0.4 !important; }

/* ── Splash page links ── */
.page-link { background: var(--card-bg) !important; border: 1px solid var(--card-border) !important; color: var(--text) !important; box-shadow: 0 2px 10px rgba(180,0,0,0.08) !important; }
.page-link:hover { background: var(--card-hover) !important; border-color: #e89090 !important; box-shadow: 0 6px 20px rgba(180,0,0,0.14) !important; transform: translateY(-2px) !important; }
.page-link.accent { background: var(--red) !important; border-color: var(--red-dark) !important; }
.page-link.accent .link-title, .page-link.accent .link-desc, .page-link.accent .link-arrow { color: #fff !important; }
.page-link.accent:hover { background: var(--red-btn) !important; }
.link-title { color: var(--text) !important; }
.link-desc  { color: var(--text-mid) !important; }
.link-arrow { color: var(--text-muted) !important; }
.section-label { color: var(--text-muted) !important; }
.divider { border-color: var(--white-border) !important; }

/* ── Hero ── */
.hero h1, .wordmark h1 {
  color: var(--text) !important;
  background: none !important;
  -webkit-text-fill-color: var(--text) !important;
}
.hero p, .wordmark p { color: var(--text-mid) !important; }

/* ── Gossip index number ── */
.gossip-index { background: rgba(180,0,0,0.1) !important; color: var(--text-mid) !important; border: none !important; }

/* ── Action buttons ── */
.action-btn { border: 1px solid transparent !important; }
.btn-approve { background: rgba(34,197,94,0.15) !important; border-color: rgba(34,197,94,0.35) !important; color: #166534 !important; }
.btn-approve:hover:not(:disabled) { background: rgba(34,197,94,0.25) !important; }
.btn-reject  { background: rgba(180,0,0,0.1) !important; border-color: rgba(180,0,0,0.25) !important; color: var(--red) !important; }
.btn-reject:hover:not(:disabled)  { background: rgba(180,0,0,0.2) !important; }
.btn-restore { background: rgba(99,102,241,0.1) !important; border-color: rgba(99,102,241,0.25) !important; color: #4338ca !important; }
.btn-restore:hover:not(:disabled) { background: rgba(99,102,241,0.2) !important; }

/* ── Admin item action buttons ── */
.act-btn { border: 1px solid transparent !important; }
.act-del  { background: rgba(180,0,0,0.08) !important; border-color: rgba(180,0,0,0.2) !important; color: var(--red) !important; }
.act-del:hover  { background: rgba(180,0,0,0.18) !important; }
.act-edit { background: rgba(30,100,200,0.08) !important; border-color: rgba(30,100,200,0.2) !important; color: #1e64c8 !important; }
.act-edit:hover { background: rgba(30,100,200,0.16) !important; }

/* ── Leaderboard rank badges ── */
.rank-1 { background: rgba(251,191,36,0.15) !important; color: #92600a !important; border: 1px solid rgba(251,191,36,0.4) !important; }
.rank-2 { background: rgba(148,163,184,0.12) !important; color: #475569 !important; border: 1px solid rgba(148,163,184,0.3) !important; }
.rank-3 { background: rgba(180,120,60,0.12) !important; color: #92400e !important; border: 1px solid rgba(180,120,60,0.3) !important; }
.rank-other { background: var(--card-bg) !important; color: var(--text-mid) !important; border: 1px solid var(--card-border) !important; }
.progress-bar { background: rgba(180,0,0,0.12) !important; }
.progress-fill { background: linear-gradient(90deg, var(--red), #ff6b35) !important; }

/* ── Breakdown chips ── */
.breakdown-chip { font-weight: 600 !important; }

/* ── Filter buttons ── */
.filter-btn { background: var(--card-bg) !important; border: 1px solid var(--card-border) !important; color: var(--text-mid) !important; }
.filter-btn.active { background: var(--red) !important; border-color: var(--red) !important; color: #fff !important; }
.filter-btn:hover:not(.active) { background: var(--card-hover) !important; }

/* ── Toasts ── */
.toast.success { background: #f0fdf4 !important; border: 1px solid #86efac !important; color: #166534 !important; }
.toast.error   { background: #fff1f2 !important; border: 1px solid #fda4af !important; color: #9f1239 !important; }

/* ── Display page (idle state on white) ── */
.idle-title { color: var(--text) !important; -webkit-text-fill-color: var(--text) !important; background: none !important; }
.idle-sub { color: var(--text-mid) !important; }
.tap-cta { background: var(--card-bg) !important; border: 1px solid var(--card-border) !important; color: var(--text-mid) !important; }
.queue-pill { background: rgba(180,0,0,0.1) !important; border-color: rgba(180,0,0,0.2) !important; color: var(--red) !important; }
.queue-pill.empty { background: var(--card-bg) !important; border-color: var(--card-border) !important; color: var(--text-muted) !important; }
.nav-btn { background: var(--card-bg) !important; border-color: var(--card-border) !important; color: var(--text-mid) !important; }
.nav-btn:hover { background: var(--card-hover) !important; color: var(--red) !important; }

/* ── Admin section ── */
.admin-section { opacity: 0.75 !important; }
.admin-section:hover { opacity: 1 !important; }

/* ── Orbs (muted on white) ── */
.orb-1, .orb-2, .orb-3 { opacity: 0.06 !important; }

/* ── Footer ── */
footer { color: var(--text-muted) !important; }

/* ────────────────────────────────────────────────
   MOBILE
   ──────────────────────────────────────────────── */
@media (max-width: 600px) {
  header { padding: 12px 16px !important; }
  .brand-name { font-size: 0.88rem !important; }

  /* Hide sub-label on very small */
  .brand-sub { display: none; }

  main { padding: 20px 14px 60px !important; }

  .cat-grid { grid-template-columns: 1fr !important; }

  .gossip-card, .item-card, .score-card {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .gossip-actions, .item-actions { width: 100% !important; justify-content: flex-end !important; }

  .tabs-bar { padding: 0 12px !important; overflow-x: auto !important; }
  .tab { padding: 11px 12px !important; font-size: 0.78rem !important; }

  .score-input-row { flex-wrap: wrap !important; }
  input[type="number"] { width: 70px !important; }

  .target-row { flex-direction: column !important; }
  .toggle-btn { width: 100% !important; }

  .total-bar { padding: 12px 14px !important; }
  .total-value { font-size: 1.2rem !important; }

  .link-grid.cols-2 { grid-template-columns: 1fr !important; }

  .form-row { grid-template-columns: 1fr !important; }

  .panel-header { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }

  .gossip-bubble, .gossip-card { padding: 24px 20px !important; }
  .gossip-text { font-size: 1.1rem !important; }

  .dest-group { grid-template-columns: 1fr 1fr !important; }
}