/* ============================================================
   SCHOOL PORTAL — CLASSY PREMIUM THEME
   ============================================================ */

/* ---------- CSS Variables ---------- */
:root {
  --navy:        #0e2445;
  --navy-mid:    #163558;
  --navy-light:  #1e4d7b;
  --gold:        #c9993a;
  --gold-light:  #e8b84b;
  --gold-pale:   #fdf4e3;
  --ivory:       #f8f6f1;
  --surface:     #f2f4f8;
  --white:       #ffffff;
  --text-dark:   #111827;
  --text-mid:    #374151;
  --text-muted:  #6b7280;
  --border:      #e2e8f0;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.08);
  --shadow-md:   0 4px 16px rgba(14,36,69,.12);
  --shadow-lg:   0 8px 32px rgba(14,36,69,.18);
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --transition:  .22s cubic-bezier(.4,0,.2,1);
}

/* ---------- Base ---------- */
body {
  font-family: 'Inter', 'Nunito Sans', sans-serif;
  color: var(--text-dark);
  background: var(--surface);
}

h1, h2, h3, h4, h5,
.heading-serif {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  letter-spacing: -.2px;
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.sp-login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  background: var(--navy);
  position: relative;
  overflow: hidden;
}

.sp-login-art {
  flex: 0 0 52%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 48px;
  background:
    linear-gradient(160deg, #0e2445 0%, #163a5f 55%, #1e5c8a 100%);
  overflow: hidden;
}

.sp-login-art::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 80%, rgba(201,153,58,.18) 0%, transparent 55%),
    radial-gradient(circle at 80% 15%, rgba(255,255,255,.06) 0%, transparent 50%);
  pointer-events: none;
}

/* floating circles */
.sp-login-art .orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: .07;
}
.sp-login-art .orb-1 { width: 520px; height: 520px; top: -160px; right: -180px; background: var(--gold); }
.sp-login-art .orb-2 { width: 340px; height: 340px; bottom: -120px; left: -100px; background: #fff; }
.sp-login-art .orb-3 { width: 180px; height: 180px; top: 52%; left: 58%; background: var(--gold-light); }

.sp-login-art-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 420px;
}

.sp-login-art-logo {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: contain;
  background: rgba(255,255,255,.08);
  border: 3px solid rgba(255,255,255,.18);
  padding: 12px;
  margin-bottom: 30px;
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
}

.sp-login-art h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  margin-bottom: 14px;
}

.sp-login-art p {
  font-size: .98rem;
  color: rgba(255,255,255,.72);
  line-height: 1.65;
}

.sp-login-art-divider {
  width: 56px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  border-radius: 2px;
  margin: 20px auto;
}

.sp-login-art-tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 36px;
  flex-wrap: wrap;
}

.sp-login-art-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.82);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 30px;
}

/* ---------- Form Side ---------- */
.sp-login-form-side {
  flex: 0 0 48%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 36px;
  background: var(--white);
}

.sp-login-card {
  width: 100%;
  max-width: 420px;
}

.sp-login-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
}

.sp-login-subtitle {
  font-size: .9rem;
  color: var(--text-muted);
  margin-bottom: 36px;
}

.sp-login-subtitle span {
  color: var(--gold);
  font-weight: 600;
}

.sp-login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}
.sp-login-divider::before,
.sp-login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.sp-login-divider span {
  font-size: .75rem;
  color: var(--text-muted);
  white-space: nowrap;
  font-weight: 500;
  letter-spacing: .5px;
}

/* Form fields */
.sp-field-wrap {
  position: relative;
  margin-bottom: 20px;
}

.sp-field-label {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: .4px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.sp-field-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: .9rem;
  pointer-events: none;
  transition: color var(--transition);
}

.sp-input {
  width: 100%;
  height: 52px;
  padding: 0 16px 0 44px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--ivory);
  font-size: .95rem;
  color: var(--text-dark);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
  outline: none;
  -webkit-appearance: none;
}

.sp-input:focus {
  border-color: var(--navy-light);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(30,77,123,.12);
}

.sp-input:focus + .sp-field-icon,
.sp-field-wrap:focus-within .sp-field-icon {
  color: var(--navy-light);
}

.sp-btn-login {
  width: 100%;
  height: 52px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .6px;
  cursor: pointer;
  transition: box-shadow var(--transition), transform var(--transition), background var(--transition);
  box-shadow: 0 4px 16px rgba(14,36,69,.3);
  position: relative;
  overflow: hidden;
  margin-top: 8px;
}

.sp-btn-login:hover {
  box-shadow: 0 6px 24px rgba(14,36,69,.4);
  transform: translateY(-1px);
  background: linear-gradient(135deg, var(--navy-mid) 0%, var(--gold) 100%);
}

.sp-btn-login .sp-btn-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.12) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .6s ease;
}
.sp-btn-login:hover .sp-btn-shimmer { transform: translateX(100%); }

.sp-login-note {
  margin-top: 16px;
  text-align: center;
  font-size: .8rem;
  color: var(--text-muted);
}

.sp-login-note i {
  color: var(--gold);
  margin-right: 5px;
}

.sp-alert-error {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-size: .87rem;
  font-weight: 500;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
}

.sp-login-footer {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: .75rem;
  color: rgba(255,255,255,.45);
}

@media (max-width: 768px) {
  .sp-login-wrap { flex-direction: column; }
  .sp-login-art { flex: none; min-height: 240px; padding: 36px 24px; }
  .sp-login-art h2 { font-size: 1.4rem; }
  .sp-login-form-side { flex: none; padding: 36px 24px; }
}

/* ============================================================
   SIDEBAR
   ============================================================ */
#sidebar {
  background: var(--navy) !important;
  border-right: none !important;
  box-shadow: 4px 0 20px rgba(0,0,0,.18) !important;
}

#sidebar .sidebar-content {
  background: var(--navy) !important;
}

/* Sidebar header area */
#sidebar .content-header {
  background: var(--navy-mid) !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  padding: 18px 16px !important;
}

.sp-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none !important;
}

.sp-sidebar-brand-logo {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  object-fit: contain;
  background: rgba(255,255,255,.1);
  border: 1.5px solid rgba(255,255,255,.15);
  padding: 4px;
  flex-shrink: 0;
}

.sp-sidebar-brand-text {
  display: flex;
  flex-direction: column;
}

.sp-sidebar-brand-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: .9rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  letter-spacing: .2px;
}

.sp-sidebar-brand-sub {
  font-size: .7rem;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  margin-top: 2px;
}

/* User area */
#sidebar .content-side-user {
  background: rgba(255,255,255,.03) !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  padding: 16px 16px !important;
}

.sp-sidebar-user {
  display: flex;
  align-items: center;
  gap: 11px;
}

.sp-sidebar-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold);
  background: var(--navy-mid);
  flex-shrink: 0;
}

.sp-sidebar-user-info { flex: 1; min-width: 0; }
.sp-sidebar-user-name {
  font-size: .83rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-sidebar-user-role {
  font-size: .7rem;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-top: 2px;
}

.sp-sidebar-user-actions {
  display: flex;
  gap: 4px;
}

.sp-sidebar-action {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.65);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  text-decoration: none !important;
  transition: all var(--transition);
}
.sp-sidebar-action:hover {
  background: rgba(201,153,58,.2);
  border-color: var(--gold);
  color: var(--gold);
}

/* Navigation */
#sidebar .nav-main > li > a,
#sidebar .nav-main .nav-submenu > li > a {
  display: flex !important;
  align-items: center !important;
  color: rgba(255,255,255,.72) !important;
  border-radius: 10px !important;
  margin: 1px 8px !important;
  padding: 10px 14px !important;
  font-size: .85rem !important;
  font-weight: 500 !important;
  transition: all var(--transition) !important;
  position: relative;
}

#sidebar .nav-main > li > a:hover,
#sidebar .nav-main .nav-submenu > li > a:hover,
#sidebar .nav-main > li.active > a,
#sidebar .nav-main .nav-submenu > li.active > a {
  background: rgba(255,255,255,.09) !important;
  color: #fff !important;
}

#sidebar .nav-main > li > a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background: var(--gold);
  border-radius: 0 3px 3px 0;
  transition: height var(--transition);
}
#sidebar .nav-main > li > a:hover::before,
#sidebar .nav-main > li.active > a::before {
  height: 60%;
}

/* Icon: override Codebase absolute positioning, use flex flow instead */
#sidebar .nav-main > li > a > i {
  position: static !important;
  transform: none !important;
  -webkit-transform: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  font-size: .92rem;
  color: rgba(255,255,255,.5) !important;
  margin-right: 10px !important;
  transition: color var(--transition) !important;
}
#sidebar .nav-main > li > a > span {
  flex: 1;
  line-height: 1.3;
}
#sidebar .nav-main > li > a:hover > i,
#sidebar .nav-main > li.active > a > i {
  color: var(--gold) !important;
}

#sidebar .nav-main-heading {
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.3) !important;
  padding: 20px 22px 6px !important;
  margin-top: 0 !important;
}

/* Sub nav */
#sidebar .nav-main ul {
  background: rgba(0,0,0,.15) !important;
  border-radius: 10px !important;
  margin: 2px 10px !important;
  padding: 4px 0 !important;
}
#sidebar .nav-main ul li a {
  font-size: .82rem !important;
  padding: 8px 14px 8px 30px !important;
  color: rgba(255,255,255,.58) !important;
}
#sidebar .nav-main ul li a:hover {
  color: rgba(255,255,255,.9) !important;
  background: rgba(255,255,255,.06) !important;
}

/* ============================================================
   HEADER / TOPBAR
   ============================================================ */
#page-header {
  background: var(--white) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 1px 8px rgba(0,0,0,.06) !important;
}

#page-header .content-header {
  height: 64px !important;
  padding: 0 20px !important;
}

/* Topbar icon buttons */
#page-header .btn-dual-secondary {
  background: transparent !important;
  border: none !important;
  color: var(--text-mid) !important;
  border-radius: 10px !important;
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all var(--transition) !important;
}
#page-header .btn-dual-secondary:hover {
  background: var(--surface) !important;
  color: var(--navy) !important;
}

/* Header title / breadcrumb */
.sp-header-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}

.sp-header-breadcrumb {
  font-size: .75rem;
  color: var(--text-muted);
  margin: 0;
}

/* Header user dropdown */
.sp-header-user-btn {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 6px 12px 6px 6px !important;
  border-radius: 30px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  cursor: pointer !important;
  transition: all var(--transition) !important;
  color: var(--text-dark) !important;
}
.sp-header-user-btn:hover {
  border-color: var(--navy-light) !important;
  box-shadow: 0 2px 8px rgba(14,36,69,.1) !important;
}

.sp-header-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  font-size: .8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sp-header-user-name {
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-dark);
  max-width: 130px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sp-header-user-role {
  font-size: .7rem;
  color: var(--text-muted);
  line-height: 1;
  margin-top: 2px;
}

/* Notifications badge */
.sp-notif-btn {
  position: relative;
}
.sp-notif-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  background: #ef4444;
  border-radius: 50%;
  border: 2px solid var(--white);
}

/* Header search bar */
#page-header-search .form-control {
  border-radius: 30px !important;
  border: 1.5px solid var(--border) !important;
  background: var(--surface) !important;
  font-size: .9rem !important;
}
#page-header-search .form-control:focus {
  border-color: var(--navy-light) !important;
  box-shadow: 0 0 0 3px rgba(30,77,123,.1) !important;
}

/* ============================================================
   MAIN CONTENT AREA
   ============================================================ */
#main-container {
  background: var(--surface) !important;
}

#main-container .content {
  padding: 28px 24px !important;
}

/* Breadcrumbs */
.breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}
.breadcrumb-item { font-size: .82rem; color: var(--text-muted); }
.breadcrumb-item.active { color: var(--navy); font-weight: 600; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted); }

/* ============================================================
   CARDS / BLOCKS
   ============================================================ */
.block {
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
  background: var(--white) !important;
  overflow: hidden;
  transition: box-shadow var(--transition) !important;
}
.block:hover {
  box-shadow: var(--shadow-md) !important;
}

.block-header,
.block-header-default {
  background: var(--white) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 16px 20px !important;
}

.block-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
}

.block-content {
  padding: 20px !important;
}

/* ============================================================
   STAT / METRIC CARDS
   ============================================================ */
.sp-stat-card {
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  padding: 22px 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: box-shadow var(--transition), transform var(--transition);
}
.sp-stat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.sp-stat-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.sp-stat-icon-navy  { background: rgba(14,36,69,.08); color: var(--navy); }
.sp-stat-icon-gold  { background: rgba(201,153,58,.12); color: var(--gold); }
.sp-stat-icon-teal  { background: rgba(13,148,136,.1);  color: #0d9488; }
.sp-stat-icon-rose  { background: rgba(225,29,72,.1);   color: #e11d48; }
.sp-stat-icon-indigo{ background: rgba(99,102,241,.1);  color: #6366f1; }
.sp-stat-icon-amber { background: rgba(245,158,11,.1);  color: #f59e0b; }

.sp-stat-info { flex: 1; min-width: 0; }
.sp-stat-val {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}
.sp-stat-lbl {
  font-size: .8rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.sp-stat-trend {
  font-size: .75rem;
  font-weight: 600;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.sp-stat-trend.up   { color: #059669; }
.sp-stat-trend.down { color: #e11d48; }

/* ============================================================
   FORMS
   ============================================================ */
.form-control {
  border-radius: var(--radius-sm) !important;
  border: 1.5px solid var(--border) !important;
  background: var(--white) !important;
  font-size: .9rem !important;
  color: var(--text-dark) !important;
  transition: border-color var(--transition), box-shadow var(--transition) !important;
  height: 44px !important;
  padding: 0 14px !important;
}

textarea.form-control {
  height: auto !important;
  padding: 12px 14px !important;
}

.form-control:focus {
  border-color: var(--navy-light) !important;
  box-shadow: 0 0 0 3px rgba(30,77,123,.1) !important;
  outline: none !important;
}

label, .form-label {
  font-size: .8rem !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  text-transform: uppercase !important;
  letter-spacing: .4px !important;
  margin-bottom: 7px !important;
}

select.form-control { height: 44px !important; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  border-radius: var(--radius-sm) !important;
  font-weight: 600 !important;
  font-size: .87rem !important;
  letter-spacing: .3px !important;
  transition: all var(--transition) !important;
}

.btn-primary,
.btn-alt-primary {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%) !important;
  border-color: var(--navy) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(14,36,69,.25) !important;
}
.btn-primary:hover,
.btn-alt-primary:hover {
  background: linear-gradient(135deg, var(--navy-mid) 0%, var(--gold) 100%) !important;
  border-color: var(--gold) !important;
  box-shadow: 0 4px 14px rgba(14,36,69,.35) !important;
  transform: translateY(-1px);
}

.btn-secondary,
.btn-alt-secondary {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text-mid) !important;
}
.btn-secondary:hover,
.btn-alt-secondary:hover {
  background: var(--border) !important;
  color: var(--navy) !important;
}

.btn-danger { box-shadow: 0 2px 8px rgba(220,38,38,.2) !important; }
.btn-success { box-shadow: 0 2px 8px rgba(5,150,105,.2) !important; }

/* ============================================================
   TABLES
   ============================================================ */
.table {
  font-size: .875rem !important;
  color: var(--text-dark) !important;
}

.table thead th {
  background: var(--navy) !important;
  color: rgba(255,255,255,.88) !important;
  font-size: .75rem !important;
  font-weight: 700 !important;
  letter-spacing: .6px !important;
  text-transform: uppercase !important;
  padding: 13px 16px !important;
  border: none !important;
  vertical-align: middle !important;
}

.table thead th:first-child { border-radius: var(--radius-sm) 0 0 0; }
.table thead th:last-child  { border-radius: 0 var(--radius-sm) 0 0; }

.table tbody tr {
  transition: background var(--transition);
}
.table tbody tr:hover { background: rgba(14,36,69,.03) !important; }
.table tbody td {
  padding: 12px 16px !important;
  border-color: var(--border) !important;
  vertical-align: middle !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background: var(--ivory) !important;
}

/* DataTables */
.dataTables_wrapper .dataTables_filter input {
  border-radius: 30px !important;
  border: 1.5px solid var(--border) !important;
  padding: 6px 16px !important;
  font-size: .87rem !important;
  color: var(--text-dark) !important;
}
.dataTables_wrapper .dataTables_length select { border-radius: var(--radius-sm) !important; }
.paginate_button.current,
.paginate_button.current:hover {
  background: var(--navy) !important;
  border-color: var(--navy) !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
}

/* ============================================================
   ALERTS
   ============================================================ */
.alert {
  border-radius: var(--radius-sm) !important;
  border-width: 0 0 0 4px !important;
  font-size: .88rem !important;
  font-weight: 500 !important;
}
.alert-success { border-color: #059669 !important; background: #ecfdf5 !important; color: #065f46 !important; }
.alert-danger   { border-color: #dc2626 !important; background: #fef2f2 !important; color: #991b1b !important; }
.alert-warning  { border-color: #d97706 !important; background: #fffbeb !important; color: #92400e !important; }
.alert-info     { border-color: #2563eb !important; background: #eff6ff !important; color: #1e40af !important; }

/* ============================================================
   BADGES
   ============================================================ */
.badge {
  border-radius: 6px !important;
  font-size: .73rem !important;
  font-weight: 700 !important;
  letter-spacing: .3px !important;
  padding: 4px 10px !important;
}

/* ============================================================
   MODALS
   ============================================================ */
.modal-content {
  border-radius: var(--radius-lg) !important;
  border: none !important;
  box-shadow: var(--shadow-lg) !important;
  overflow: hidden;
}

.modal-header {
  background: var(--navy) !important;
  padding: 20px 24px !important;
  border-bottom: none !important;
}
.modal-header .modal-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: #fff !important;
  font-size: 1.05rem !important;
}
.modal-header .close { color: rgba(255,255,255,.7) !important; }
.modal-header .close:hover { color: #fff !important; }

.modal-body { padding: 24px !important; }
.modal-footer {
  padding: 16px 24px !important;
  border-top: 1px solid var(--border) !important;
  background: var(--ivory) !important;
}

/* ============================================================
   PAGE HEADER STRIP (secondary pages)
   ============================================================ */
.sp-page-hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  padding: 24px 28px;
  border-radius: var(--radius-md);
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.sp-page-hero::before {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  pointer-events: none;
}
.sp-page-hero-text {}
.sp-page-hero-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px;
}
.sp-page-hero-sub {
  font-size: .82rem;
  color: rgba(255,255,255,.65);
  margin: 0;
}
.sp-page-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.9);
  font-size: .78rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 30px;
  white-space: nowrap;
}

/* ============================================================
   FOOTER
   ============================================================ */
#page-footer {
  background: var(--white) !important;
  border-top: 1px solid var(--border) !important;
  padding: 16px 24px !important;
  font-size: .8rem !important;
  color: var(--text-muted) !important;
}
#page-footer a { color: var(--navy-light) !important; text-decoration: none !important; }
#page-footer a:hover { color: var(--gold) !important; }

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--navy-light); }

/* ============================================================
   GOLD ACCENT / UTILITIES
   ============================================================ */
.text-gold        { color: var(--gold) !important; }
.text-navy        { color: var(--navy) !important; }
.bg-navy          { background: var(--navy) !important; }
.bg-gold          { background: var(--gold) !important; }
.border-gold      { border-color: var(--gold) !important; }

.sp-divider-gold {
  width: 48px; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  border-radius: 2px;
  margin: 10px 0;
}

/* Animated entrance */
@keyframes spFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sp-animate { animation: spFadeUp .5s ease forwards; }
.sp-animate-delay-1 { animation-delay: .1s; opacity: 0; }
.sp-animate-delay-2 { animation-delay: .2s; opacity: 0; }
.sp-animate-delay-3 { animation-delay: .3s; opacity: 0; }