/* =========================================================
   MPSWP BRAND THEME — Gold / Black / White (latar cerah)
   Layered on top of Bootstrap 5.3 — Cormorant Garamond for
   headings, Inter for body text. Emas kekal sebagai aksen;
   latar belakang putih/cerah, teks hitam.
========================================================= */

:root{
  --mpswp-gold: #D4AF37;
  --mpswp-gold-light: #E7C563;
  --mpswp-gold-dark: #B88920;

  /* "ink"/"charcoal" names kept for compatibility with every view that
     already references these variables — they now hold LIGHT values. */
  --mpswp-ink: #FFFFFF;
  --mpswp-charcoal: #FFFFFF;
  --mpswp-charcoal-2: #F6F4EE;
  --mpswp-line: #E4DFD1;
  --mpswp-text: #201A10;
  --mpswp-text-soft: #4A4638;
  --mpswp-text-mute: #746F5F;

  /* 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%, #FFFFFF 0%, #FAF8F2 60%);
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
  color: var(--mpswp-text);
}

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

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

/* ---- Cards / panels ---- */
.card, .mpswp-panel{
  background: #FFFFFF;
  border: 1px solid var(--mpswp-line);
  border-radius: 18px;
  color: var(--mpswp-text);
  box-shadow: 0 2px 14px -4px rgba(32,26,16,.06);
}

/* 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. */
.dataTables_wrapper{ overflow-x: auto; }
.table-responsive, .mpswp-panel{ max-width: 100%; }

.mpswp-card-glass{
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(212,175,55,.28);
  backdrop-filter: blur(18px);
  box-shadow: 0 30px 70px -30px rgba(32,26,16,.18), inset 0 1px 0 rgba(255,255,255,.6);
  border-radius: 22px;
}

/* ---- Forms ---- */
.form-control, .form-select{
  background: #FFFFFF;
  border: 1px solid #DCD6C4;
  color: var(--mpswp-text);
}
.form-control::placeholder{ color: var(--mpswp-text-mute); }
.form-control:focus, .form-select:focus{
  background: #FFFDF7;
  border-color: var(--mpswp-gold);
  color: var(--mpswp-text);
  box-shadow: 0 0 0 3px rgba(212,175,55,.15);
}
.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: #1C1508;
  font-weight: 700;
  letter-spacing: .02em;
  border: none;
  border-radius: 100px;
  box-shadow: 0 14px 28px -14px rgba(212,175,55,.6);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-gold:hover{
  color: #1C1508;
  transform: translateY(-1px);
  box-shadow: 0 18px 32px -14px rgba(212,175,55,.7);
  filter: brightness(1.05);
}
.btn-gold:disabled{ opacity: .55; box-shadow: none; transform: none; }

.btn-mpswp-outline{
  border: 1px solid #D8D2C0;
  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-dark);
  color: var(--mpswp-gold-dark);
}

/* ---- Alerts (darker text than the dark-theme originals — pale
   pink/green text is unreadable on a white background) ---- */
.alert-mpswp-error{
  background: rgba(163,30,34,.08);
  border: 1px solid rgba(163,30,34,.35);
  color: #8A1418;
  border-radius: 12px;
}
.alert-mpswp-success{
  background: rgba(46,125,74,.08);
  border: 1px solid rgba(46,125,74,.35);
  color: #1F6B3D;
  border-radius: 12px;
}

/* ---- Status pills (same darkening reasoning as alerts above) ---- */
.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(46,125,74,.1); color:#1F6B3D; border:1px solid rgba(46,125,74,.3); }
.status-pending{ background: rgba(212,175,55,.14); color:#8A6A15; border:1px solid rgba(212,175,55,.35); }
.status-expired, .status-suspended{ background: rgba(163,30,34,.1); color:#8A1418; border:1px solid rgba(163,30,34,.3); }

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