/* =========================================================
   MPSWP BRAND THEME
   Layered on top of Bootstrap 5.3 — same visual identity as
   the public marketing site (index.html): gold on black,
   Cormorant Garamond for headings, Inter for body text.
========================================================= */

:root{
  --mpswp-gold: #D4AF37;
  --mpswp-gold-light: #E7C563;
  --mpswp-gold-dark: #B88920;
  --mpswp-ink: #050505;
  --mpswp-charcoal: #111111;
  --mpswp-charcoal-2: #151310;
  --mpswp-line: #221E17;
  --mpswp-text: #F4EEDD;
  --mpswp-text-soft: #B7B4AA;
  --mpswp-text-mute: #8C8879;

  /* Bootstrap variable overrides */
  --bs-primary: var(--mpswp-gold);
  --bs-body-bg: var(--mpswp-ink);
  --bs-body-color: var(--mpswp-text);
  --bs-border-color: var(--mpswp-line);
  --bs-font-sans-serif: 'Inter', sans-serif;
}

body{
  background: radial-gradient(ellipse at 30% 20%, #171310 0%, #050505 60%);
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
}

h1, h2, h3, h4, .font-heading{
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  color: var(--mpswp-text);
}

a{ color: var(--mpswp-gold); }
a:hover{ color: var(--mpswp-gold-light); }

/* ---- Cards / panels ---- */
.card, .mpswp-panel{
  background: #111111;
  border: 1px solid var(--mpswp-line);
  border-radius: 18px;
  color: var(--mpswp-text);
}

/* Wide tables (DataTables especially) must scroll WITHIN their own box on
   narrow screens — otherwise the table's computed pixel width forces the
   whole page/viewport wider than the actual device screen (a genuine
   mobile-responsiveness bug: the containing card doesn't clip, so the
   browser widens the layout viewport to fit the table instead of just
   scrolling it). */
.dataTables_wrapper{ overflow-x: auto; }
.table-responsive, .mpswp-panel{ max-width: 100%; }

.mpswp-card-glass{
  background: rgba(17,17,17,.72);
  border: 1px solid rgba(212,175,55,.18);
  backdrop-filter: blur(18px);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.04);
  border-radius: 22px;
}

/* ---- Forms ---- */
.form-control, .form-select{
  background: rgba(255,255,255,.03);
  border: 1px solid #2A2620;
  color: var(--mpswp-text);
}
.form-control::placeholder{ color: var(--mpswp-text-mute); }
.form-control:focus, .form-select:focus{
  background: rgba(212,175,55,.04);
  border-color: var(--mpswp-gold);
  color: var(--mpswp-text);
  box-shadow: 0 0 0 3px rgba(212,175,55,.12);
}
.form-label{
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--mpswp-text-soft); margin-bottom: 8px;
}

/* ---- Buttons ---- */
.btn-gold{
  background: linear-gradient(135deg, var(--mpswp-gold-light), var(--mpswp-gold) 45%, var(--mpswp-gold-dark));
  color: #0A0803;
  font-weight: 700;
  letter-spacing: .02em;
  border: none;
  border-radius: 100px;
  box-shadow: 0 14px 28px -12px rgba(212,175,55,.55);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-gold:hover{
  color: #0A0803;
  transform: translateY(-1px);
  box-shadow: 0 18px 32px -12px rgba(212,175,55,.65);
  filter: brightness(1.05);
}
.btn-gold:disabled{ opacity: .55; box-shadow: none; transform: none; }

.btn-mpswp-outline{
  border: 1px solid #2A2620;
  color: var(--mpswp-text);
  border-radius: 100px;
  background: transparent;
  transition: border-color .2s ease, color .2s ease;
}
.btn-mpswp-outline:hover{
  border-color: var(--mpswp-gold);
  color: var(--mpswp-gold);
}

/* ---- Alerts ---- */
.alert-mpswp-error{
  background: rgba(163,30,34,.1);
  border: 1px solid rgba(163,30,34,.4);
  color: #E39093;
  border-radius: 12px;
}
.alert-mpswp-success{
  background: rgba(94,168,110,.1);
  border: 1px solid rgba(94,168,110,.4);
  color: #7CC98E;
  border-radius: 12px;
}

/* ---- Status pills ---- */
.status-pill{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 100px;
}
.status-active{ background: rgba(94,168,110,.12); color:#7CC98E; border:1px solid rgba(94,168,110,.3); }
.status-pending{ background: rgba(212,175,55,.12); color:#D4AF37; border:1px solid rgba(212,175,55,.3); }
.status-expired, .status-suspended{ background: rgba(163,30,34,.12); color:#E39093; border:1px solid rgba(163,30,34,.3); }

.text-gold{ color: var(--mpswp-gold) !important; }
.text-mute{ color: var(--mpswp-text-mute) !important; }