/* =========================================================
   MPSWP ENTERPRISE THEME v2 — Gold / Dark Navy / White
   Premium, clean, spacious, corporate. Plus Jakarta Sans for
   headings, Inter for body. Replaces the earlier luxury
   gold/black/white treatment with a modern enterprise palette.
========================================================= */

:root{
  /* Primary / secondary brand colors (spec) */
  --mpswp-gold: #C89B3C;
  --mpswp-gold-light: #D9B563;
  --mpswp-gold-dark: #A87F2E;
  --mpswp-navy: #0E1E2F;
  --mpswp-navy-light: #1B3A56;

  /* Backwards-compatible aliases — every existing view already
     references these variable names, so keep them mapped to the
     new palette rather than rewriting every view. */
  --mpswp-ink: #FFFFFF;
  --mpswp-charcoal: #FFFFFF;
  --mpswp-charcoal-2: #F8F9FA;
  --mpswp-line: #E5E7EB;
  --mpswp-text: #0E1E2F;
  --mpswp-text-soft: #43526B;
  --mpswp-text-mute: #6B7686;

  /* Semantic status colors (spec) */
  --mpswp-success: #16A34A;
  --mpswp-warning: #F59E0B;
  --mpswp-danger: #DC2626;

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

h1, h2, h3, h4, .font-heading{
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--mpswp-navy);
}

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

/* ---- Cards / panels — soft shadow, generous padding, subtle hover ---- */
.card, .mpswp-panel{
  background: #FFFFFF;
  border: 1px solid var(--mpswp-line);
  border-radius: 16px;
  color: var(--mpswp-text);
  box-shadow: 0 1px 3px rgba(14,30,47,.04), 0 8px 24px -12px rgba(14,30,47,.08);
  transition: box-shadow .2s ease, transform .2s ease;
}
.mpswp-panel-hover:hover{
  box-shadow: 0 4px 8px rgba(14,30,47,.06), 0 16px 32px -12px rgba(14,30,47,.14);
  transform: translateY(-2px);
}

.dataTables_wrapper{ overflow-x: auto; }
.table-responsive, .mpswp-panel{ max-width: 100%; }

.mpswp-card-glass{
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(200,155,60,.25);
  backdrop-filter: blur(18px);
  box-shadow: 0 30px 70px -30px rgba(14,30,47,.2), inset 0 1px 0 rgba(255,255,255,.7);
  border-radius: 20px;
}

/* ---- Forms — clean, generous, clear focus state ---- */
.form-control, .form-select{
  background: #FFFFFF;
  border: 1px solid var(--mpswp-line);
  border-radius: 10px;
  color: var(--mpswp-text);
  padding: 10px 14px;
}
.form-control::placeholder{ color: var(--mpswp-text-mute); }
.form-control:focus, .form-select:focus{
  background: #FFFFFF;
  border-color: var(--mpswp-gold);
  color: var(--mpswp-text);
  box-shadow: 0 0 0 4px rgba(200,155,60,.14);
}
.form-label{
  font-size: 12.5px; font-weight: 600; letter-spacing: .03em; text-transform: none;
  color: var(--mpswp-text-soft); margin-bottom: 6px;
}
.form-label .required-mark{ color: var(--mpswp-danger); margin-left: 2px; }

/* ---- Buttons — modern, rounded, consistent hover/focus/disabled ---- */
.btn{
  border-radius: 10px;
  font-weight: 600;
  padding: 10px 20px;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, background .15s ease;
}
.btn:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(200,155,60,.35); }

.btn-gold{
  background: var(--mpswp-gold);
  color: #0E1400;
  border: none;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(14,30,47,.06), 0 4px 12px -4px rgba(200,155,60,.5);
}
.btn-gold:hover{ color:#0E1400; background: var(--mpswp-gold-dark); transform: translateY(-1px); box-shadow: 0 6px 16px -4px rgba(200,155,60,.6); }
.btn-gold:active{ transform: translateY(0); }
.btn-gold:disabled{ opacity: .5; box-shadow: none; transform: none; }

.btn-navy{
  background: var(--mpswp-navy);
  color: #FFFFFF;
  border: none;
}
.btn-navy:hover{ color:#FFFFFF; background: var(--mpswp-navy-light); transform: translateY(-1px); }

.btn-mpswp-outline{
  border: none;
  color: #0E1400;
  background: var(--mpswp-gold);
  font-weight: 700;
}
.btn-mpswp-outline:hover{ background: var(--mpswp-gold-dark); color: #0E1400; transform: translateY(-1px); }

.btn-ghost{
  border: none; background: transparent; color: var(--mpswp-text-soft);
}
.btn-ghost:hover{ background: var(--mpswp-charcoal-2); color: var(--mpswp-text); }

.btn-danger-mpswp{
  background: var(--mpswp-danger); color: #FFFFFF; border: none;
}
.btn-danger-mpswp:hover{ background: #B91C1C; color:#FFFFFF; }

.btn-loading{ position: relative; color: transparent !important; pointer-events: none; }
.btn-loading::after{
  content: ''; position: absolute; width: 16px; height: 16px; top: 50%; left: 50%;
  margin: -8px 0 0 -8px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  border-radius: 50%; animation: mpswp-spin .6s linear infinite;
}
@keyframes mpswp-spin{ to{ transform: rotate(360deg); } }

/* ---- Alerts ---- */
.alert-mpswp-error{
  background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; border-radius: 12px;
}
.alert-mpswp-success{
  background: #F0FDF4; border: 1px solid #BBF7D0; color: #166534; border-radius: 12px;
}
.alert-mpswp-warning{
  background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E; border-radius: 12px;
}

/* ---- Status pills / badges ---- */
.status-pill{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  padding: 4px 12px; border-radius: 100px;
}
.status-active{ background: #F0FDF4; color:#166534; border:1px solid #BBF7D0; }
.status-pending{ background: #FFFBEB; color:#92400E; border:1px solid #FDE68A; }
.status-expired, .status-suspended{ background: #FEF2F2; color:#991B1B; border:1px solid #FECACA; }

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

/* ---- Skeleton loader (for async-loading widgets) ---- */
.skeleton{
  background: linear-gradient(90deg, #F1F2F4 25%, #E9EBEE 37%, #F1F2F4 63%);
  background-size: 400% 100%;
  animation: mpswp-skeleton 1.4s ease infinite;
  border-radius: 8px;
}
@keyframes mpswp-skeleton{ 0%{background-position:100% 50%;} 100%{background-position:0 50%;} }

/* ---- Subtle fade/slide utility for panels entering view ---- */
.mpswp-fade-in{ animation: mpswp-fade .3s ease both; }
@keyframes mpswp-fade{ from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform:none; } }

/* =========================================================
   SPACING — generous whitespace per design spec ("every page
   should breathe"). Bumps default Bootstrap card/section padding.
========================================================= */
.mpswp-panel{ padding: 28px !important; }
.admin-content{ padding: 32px 36px; }
@media (max-width: 768px){ .admin-content{ padding: 20px; } .mpswp-panel{ padding: 20px !important; } }

/* =========================================================
   TABLES — sticky header, rounded container, consistent search
   box, clear row hover, applied globally to every DataTables
   instance across the 9 admin list pages without editing each one.
========================================================= */
.mpswp-panel:has(table.dataTable){ padding: 0 !important; overflow: hidden; }
.mpswp-panel:has(table.dataTable) > .dataTables_wrapper{ padding: 24px; }

table.dataTable thead th{
  position: sticky; top: 0; z-index: 2;
  background: var(--mpswp-charcoal-2);
  color: var(--mpswp-navy);
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  border-bottom: 2px solid var(--mpswp-line) !important;
  padding: 14px 16px !important;
}
table.dataTable tbody td{ padding: 14px 16px !important; vertical-align: middle; border-color: var(--mpswp-line) !important; }
table.dataTable tbody tr{ transition: background .12s ease; }
table.dataTable tbody tr:hover{ background: rgba(200,155,60,.05) !important; }

.dataTables_filter input{
  border: 1px solid var(--mpswp-line); border-radius: 10px; padding: 8px 14px;
  background: #FFFFFF; margin-left: 8px;
}
.dataTables_filter input:focus{ border-color: var(--mpswp-gold); outline: none; box-shadow: 0 0 0 3px rgba(200,155,60,.14); }
.dataTables_length select{
  border: 1px solid var(--mpswp-line); border-radius: 8px; padding: 4px 10px; margin: 0 6px;
}
.dataTables_paginate .paginate_button{
  border-radius: 8px !important; margin: 0 2px; border: 1px solid transparent !important;
  color: var(--mpswp-navy) !important; font-weight: 500;
}
.dataTables_paginate .paginate_button.current{
  background: var(--mpswp-gold) !important; color: #0E1400 !important; border: none !important; font-weight: 700;
}
.dataTables_paginate .paginate_button.disabled{
  color: var(--mpswp-text-mute) !important; cursor: default;
}
.dataTables_paginate .paginate_button:hover:not(.current){
  background: var(--mpswp-charcoal-2) !important; border-color: var(--mpswp-line) !important; color: var(--mpswp-navy) !important;
}
.dataTables_info{ color: var(--mpswp-text-mute); font-size: 13px; }

/* Row-actions dropdown (replaces scattered individual buttons) */
.row-actions-btn{
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--mpswp-line);
  background: #FFFFFF; display: inline-flex; align-items: center; justify-content: center;
  color: var(--mpswp-text-soft); transition: background .15s ease, border-color .15s ease;
}
.row-actions-btn:hover{ background: var(--mpswp-charcoal-2); border-color: var(--mpswp-gold); }
.row-actions-menu{
  min-width: 170px; border-radius: 10px; border: 1px solid var(--mpswp-line);
  box-shadow: 0 12px 32px -8px rgba(14,30,47,.18); padding: 6px;
}
.row-actions-menu .dropdown-item{ border-radius: 7px; padding: 8px 12px; font-size: 14px; }
.row-actions-menu .dropdown-item:hover{ background: var(--mpswp-charcoal-2); }
.row-actions-menu .dropdown-item.text-danger:hover{ background: #FEF2F2; }

/* =========================================================
   FORMS — floating-style labels, required-field marker, and a
   password strength meter used by register/reset-password pages.
========================================================= */
.required-mark::after{ content: ' *'; color: var(--mpswp-danger); }

.pw-strength-bar{ height: 4px; border-radius: 100px; background: var(--mpswp-line); overflow: hidden; margin-top: 8px; }
.pw-strength-fill{ height: 100%; width: 0%; border-radius: 100px; transition: width .2s ease, background .2s ease; }
.pw-strength-label{ font-size: 11.5px; margin-top: 4px; color: var(--mpswp-text-mute); }

.field-invalid{ border-color: var(--mpswp-danger) !important; }
.field-error-text{ font-size: 12.5px; color: var(--mpswp-danger); margin-top: 4px; }
.field-valid{ border-color: var(--mpswp-success) !important; }