/*
 * ═══════════════════════════════════════════════════════════════════════════
 * Cadvin Club Portal — Premium White & Gold Theme Override
 * Dark theme → Luxury corporate white-and-gold redesign
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Design philosophy: Deloitte corporate + Rolls Royce minimal luxury
 * Primary: #FFFFFF  |  Accent: #C8A34D  |  Hover: #B89136  |  Text: #1F1F1F
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ─── 1. CSS Custom Properties ────────────────────────────────────────────── */
:root {
  --gold:        #C8A34D;
  --gold-hover:  #B89136;
  --gold-light:  rgba(200, 163, 77, 0.12);
  --gold-subtle: rgba(200, 163, 77, 0.06);
  --bg-primary:  #FFFFFF;
  --bg-secondary:#FAFAFA;
  --bg-card:     #FFFFFF;
  --border-card: #EAEAEA;
  --border-divider: #ECECEC;
  --text-primary:   #1F1F1F;
  --text-secondary: #6B7280;
  --text-muted:     #9CA3AF;
  --shadow-card:    0 8px 30px rgba(0,0,0,0.06);
  --shadow-btn:     0 6px 18px rgba(0,0,0,0.08);
  --radius-card:    12px;
}

/* ─── 2. Base Document ────────────────────────────────────────────────────── */
html.h-full {
  background-color: var(--bg-secondary) !important;
}

html, body {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

body.h-full {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

/* ─── 3. Typography — Headings → Playfair Display, Body → Inter ──────────── */
h1, h2, h3, h4, h5, h6,
.font-serif {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: var(--text-primary) !important;
}

body, p, span, div, a, li, td, th, label, input, textarea, select, button,
.font-sans {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
}

/* Mono stays mono for IDs and system values */
.font-mono, code, kbd, pre, samp,
[class*="font-mono"] {
  font-family: 'JetBrains Mono', monospace !important;
}

/* ─── 4. Scrollbar — White track, Gold thumb ──────────────────────────────── */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: #F5F5F5; border-radius: 4px; }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-hover); }

.custom-scrollbar::-webkit-scrollbar-track { background: #F5F5F5 !important; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: var(--gold) !important; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--gold-hover) !important; }

/* ─── 5. Autofill — White background, dark text ──────────────────────────── */
input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover {
  -webkit-text-fill-color: var(--text-primary) !important;
  -webkit-box-shadow: inset 0 0 0 1000px #FFFFFF !important;
}

/* ─── 6. Header / Navigation ──────────────────────────────────────────────── */
header,
header.sticky {
  background-color: rgba(255,255,255,0.97) !important;
  border-bottom: 1px solid var(--gold) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.05) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Header nav links */
header a,
header nav a,
header .font-serif {
  color: var(--text-primary) !important;
}

/* Active nav item */
header a.text-white,
header a[class*="text-white"] {
  color: var(--gold) !important;
  font-weight: 600 !important;
}

/* Nav hover */
header a:hover,
header nav a:hover {
  color: var(--gold) !important;
}

/* Gold underline active indicator */
header a.border-gold-500,
header a[class*="border-gold"] {
  border-color: var(--gold) !important;
  color: var(--gold) !important;
}

/* Club-services dropdown */
#club-services-menu,
[id*="services-menu"] {
  background-color: #FFFFFF !important;
  border: 1px solid var(--border-card) !important;
  box-shadow: var(--shadow-card) !important;
}

#club-services-menu a,
[id*="services-menu"] a {
  color: var(--text-secondary) !important;
}

#club-services-menu a:hover,
[id*="services-menu"] a:hover {
  background-color: var(--gold-light) !important;
  color: var(--text-primary) !important;
}

/* Active item in dropdown */
#club-services-menu a.text-white,
[id*="services-menu"] a.text-white {
  background-color: var(--gold-light) !important;
  color: var(--gold) !important;
  border-left-color: var(--gold) !important;
}

/* Mobile menu */
#mobile-menu {
  background-color: #FFFFFF !important;
  border-top: 1px solid var(--border-divider) !important;
}

#mobile-menu a,
#mobile-menu button {
  color: var(--text-secondary) !important;
}

#mobile-menu a:hover,
#mobile-menu button:hover {
  background-color: var(--gold-light) !important;
  color: var(--text-primary) !important;
}

#mobile-menu a.text-white,
#mobile-menu a[class*="font-bold"].text-white {
  color: var(--gold) !important;
  background-color: var(--gold-subtle) !important;
  border-left-color: var(--gold) !important;
}

/* Hamburger icon */
#mobile-menu-btn,
#mobile-menu-btn svg {
  color: var(--text-primary) !important;
  stroke: var(--text-primary) !important;
}

/* Logout link */
header a[href*="logout"] {
  color: var(--text-secondary) !important;
  border-color: var(--border-card) !important;
}

header a[href*="logout"]:hover {
  color: #DC2626 !important;
  background-color: rgba(220,38,38,0.06) !important;
  border-color: rgba(220,38,38,0.2) !important;
}

/* ─── 7. Main Content Area ────────────────────────────────────────────────── */
main,
.main-content {
  background-color: var(--bg-secondary) !important;
}

/* ─── 8. Dark background overrides → White ────────────────────────────────── */
/* Every dark slate/navy/black background becomes white/light */
[class*="bg-slate-950"],
[class*="bg-slate-900"],
[class*="bg-slate-850"],
[class*="bg-slate-800"],
[class*="bg-[#0a0f1d]"],
[class*="bg-[#030712]"],
[class*="bg-[#050914]"] {
  background-color: var(--bg-card) !important;
}

/* Dark text → light context: flip to dark */
[class*="text-slate-200"],
[class*="text-slate-300"],
[class*="text-stone-200"],
[class*="text-stone-300"] {
  color: var(--text-primary) !important;
}

[class*="text-slate-400"],
[class*="text-slate-450"],
[class*="text-slate-500"],
[class*="text-slate-505"],
[class*="text-slate-600"],
[class*="text-stone-400"],
[class*="text-slate-655"] {
  color: var(--text-secondary) !important;
}

/* White text needs to become dark on white bg */
.text-white,
[class*="text-white"] {
  color: var(--text-primary) !important;
}

/* ─── 9. Cards ────────────────────────────────────────────────────────────── */
/* Any rounded container that was dark becomes a floating white card */
.rounded-xl,
.rounded-2xl,
.rounded-lg {
  background-color: var(--bg-card);
}

/* Card-like divs with dark bg */
div[class*="bg-slate-900"],
div[class*="bg-slate-950"],
div[class*="bg-slate-850"],
div[class*="bg-slate-800"],
div[class*="bg-[#0a0f1d]"],
div[class*="bg-[#030712]"],
div[class*="bg-[#050914]"] {
  background-color: var(--bg-card) !important;
  border-color: var(--border-card) !important;
  box-shadow: var(--shadow-card) !important;
  color: var(--text-primary) !important;
}

/* Card borders */
[class*="border-slate-700"],
[class*="border-slate-800"],
[class*="border-slate-850"],
[class*="border-slate-900"],
[class*="border-slate-950"] {
  border-color: var(--border-card) !important;
}

/* Divide lines */
[class*="divide-slate"] > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--border-divider) !important;
}

/* Hover card elevation */
.hover\:scale-\[1\.02\]:hover,
[class*="hover:scale"] {
  box-shadow: 0 12px 40px rgba(0,0,0,0.10) !important;
}

/* Gold border on card hover */
.group:hover,
[class*="group"]:hover {
  border-color: rgba(200,163,77,0.4) !important;
}

/* ─── 10. Buttons ─────────────────────────────────────────────────────────── */

/* Primary — Gold background, white text */
button[class*="bg-[#C5A059]"],
button[class*="bg-gold"],
button[class*="bg-amber-500"],
a[class*="bg-[#C5A059]"],
a[class*="bg-gold"],
a[class*="bg-amber-500"],
[class*="bg-[#C5A059]"][class*="rounded"],
[class*="bg-gold-500"][class*="rounded"],
[class*="bg-amber-500"][class*="rounded"] {
  background-color: var(--gold) !important;
  color: #FFFFFF !important;
  border-color: var(--gold) !important;
  box-shadow: var(--shadow-btn) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
}

/* Hover gold buttons */
[class*="hover:bg-[#A37F3F]"]:hover,
button:hover[class*="bg-[#C5A059]"],
a:hover[class*="bg-[#C5A059]"] {
  background-color: var(--gold-hover) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 24px rgba(200,163,77,0.25) !important;
}

/* Gradient gold buttons */
[class*="from-amber"][class*="to-[#C5A059]"],
[class*="from-gold"][class*="to-amber"],
[class*="bg-gradient"][class*="gold"],
[class*="bg-gradient"][class*="amber"] {
  background: var(--gold) !important;
  background-image: none !important;
  color: #FFFFFF !important;
}

/* Danger stays red */
button[class*="bg-rose-500"],
button[class*="bg-rose-600"],
a[class*="bg-rose-500"],
a[class*="bg-rose-600"] {
  background-color: #E11D48 !important;
  color: #FFFFFF !important;
}

button[class*="hover:bg-rose-600"]:hover {
  background-color: #BE123C !important;
}

/* Success stays green */
button[class*="bg-emerald"],
a[class*="bg-emerald"] {
  background-color: #059669 !important;
  color: #FFFFFF !important;
}

/* Info stays indigo */
button[class*="bg-indigo"],
a[class*="bg-indigo"] {
  background-color: #4F46E5 !important;
  color: #FFFFFF !important;
}

button[class*="hover:bg-indigo-600"]:hover {
  background-color: #4338CA !important;
}

/* Secondary button — outlined gold */
button[class*="border-gold"],
button[class*="border-[#C5A059]"],
a[class*="border-gold"],
a[class*="border-[#C5A059]"] {
  background-color: #FFFFFF !important;
  border-color: var(--gold) !important;
  color: var(--gold) !important;
}

button[class*="border-gold"]:hover,
button[class*="border-[#C5A059]"]:hover,
a[class*="border-gold"]:hover,
a[class*="border-[#C5A059]"]:hover {
  background-color: var(--gold) !important;
  color: #FFFFFF !important;
}

/* Ghost / outline dark buttons → light */
button[class*="bg-slate"],
a[class*="bg-slate"][class*="rounded"] {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-card) !important;
}

button[class*="hover:bg-slate"]:hover,
a[class*="hover:bg-slate"]:hover {
  background-color: var(--gold-light) !important;
  color: var(--text-primary) !important;
}

/* ─── 11. Forms ───────────────────────────────────────────────────────────── */
input, textarea, select {
  background-color: #FFFFFF !important;
  border: 1px solid #D1D5DB !important;
  color: var(--text-primary) !important;
  border-radius: 12px !important;
  padding: 0.625rem 0.875rem !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-muted) !important;
  opacity: 1 !important;
}

input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(200,163,77,0.15) !important;
}

/* File input button */
input[type="file"]::file-selector-button {
  background-color: var(--bg-secondary) !important;
  border: 1px solid var(--border-card) !important;
  color: var(--text-secondary) !important;
  border-radius: 6px !important;
  padding: 0.375rem 0.75rem !important;
  font-family: 'Inter', sans-serif !important;
  cursor: pointer;
}

input[type="file"]::file-selector-button:hover {
  background-color: var(--gold-light) !important;
  border-color: var(--gold) !important;
  color: var(--gold) !important;
}

/* Form labels */
label {
  color: var(--text-primary) !important;
  font-weight: 500 !important;
}

/* Restore icon-input padding stomped by the blanket `input { padding }` rule
   above — inputs with an .input-icon / left-icon use pl-10 (and matching
   pr-*) to keep their placeholder text clear of the icon; without this the
   generic 0.875rem padding collapses that gap and the icon overlaps the text. */
input[class~="pl-10"] { padding-left: 2.5rem !important; }
input[class~="pl-4"]  { padding-left: 1rem !important; }
input[class~="pl-2"]  { padding-left: 0.5rem !important; }
input[class~="pr-10"] { padding-right: 2.5rem !important; }
input[class~="pr-9"]  { padding-right: 2.25rem !important; }
input[class~="pr-4"]  { padding-right: 1rem !important; }
input[class~="pr-3"]  { padding-right: 0.75rem !important; }
input[class~="pr-2"]  { padding-right: 0.5rem !important; }
input[class~="pr-1"]  { padding-right: 0.25rem !important; }

/* ─── 12. Tables ──────────────────────────────────────────────────────────── */
table {
  background-color: #FFFFFF !important;
  border-collapse: collapse;
}

thead, th {
  background-color: var(--gold) !important;
  color: #FFFFFF !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
}

/* thead that uses dark slate */
thead[class*="bg-slate"],
tr[class*="bg-slate"]:first-child,
th[class*="bg-slate"],
th[class*="text-slate"] {
  background-color: var(--gold) !important;
  color: #FFFFFF !important;
}

tbody tr {
  background-color: #FFFFFF !important;
  border-bottom: 1px solid var(--border-divider) !important;
  color: var(--text-primary) !important;
  transition: background-color 0.15s !important;
}

tbody tr:hover {
  background-color: #FAFAFA !important;
}

tbody tr td {
  color: var(--text-primary) !important;
  border-color: var(--border-divider) !important;
}

/* Table container overrides */
[class*="overflow-x-auto"] {
  background-color: #FFFFFF !important;
  border-radius: var(--radius-card) !important;
  border: 1px solid var(--border-card) !important;
  box-shadow: var(--shadow-card) !important;
}

/* ─── 13. Badges / Status ─────────────────────────────────────────────────── */
/* Keep semantic meaning, modernize look */
/* Approved / success — green pill */
[class*="bg-emerald-500/10"],
[class*="bg-emerald-500\/10"] {
  background-color: rgba(5,150,105,0.08) !important;
  color: #059669 !important;
  border-color: rgba(5,150,105,0.2) !important;
  border-radius: 9999px !important;
}

/* Pending / warning — amber pill */
[class*="bg-amber-500/10"],
[class*="bg-amber-500\/10"],
[class*="bg-amber-500/5"],
[class*="bg-amber-500\/5"] {
  background-color: rgba(245,158,11,0.08) !important;
  color: #B45309 !important;
  border-color: rgba(245,158,11,0.2) !important;
  border-radius: 9999px !important;
}

/* Rejected / danger — red pill */
[class*="bg-rose-500/10"],
[class*="bg-rose-500\/10"] {
  background-color: rgba(225,29,72,0.08) !important;
  color: #DC2626 !important;
  border-color: rgba(225,29,72,0.2) !important;
  border-radius: 9999px !important;
}

/* Info — blue pill */
[class*="bg-sky-500/10"],
[class*="bg-sky-500\/10"],
[class*="bg-indigo-500/10"],
[class*="bg-indigo-500\/10"] {
  background-color: rgba(99,102,241,0.08) !important;
  color: #4F46E5 !important;
  border-color: rgba(99,102,241,0.2) !important;
  border-radius: 9999px !important;
}

/* Gold badge */
[class*="bg-gold-500/10"],
[class*="bg-gold-500\/10"],
[class*="bg-[#C5A039]/10"],
[class*="bg-[#C5A039]\/10"] {
  background-color: rgba(200,163,77,0.08) !important;
  color: var(--gold) !important;
  border-color: rgba(200,163,77,0.2) !important;
  border-radius: 9999px !important;
}

/* Badge text colors on dark context */
.text-emerald-400,
[class*="text-emerald-400"] { color: #059669 !important; }
.text-amber-400, .text-amber-200,
[class*="text-amber-400"], [class*="text-amber-200"] { color: #B45309 !important; }
.text-rose-400, .text-rose-200, .text-rose-500,
[class*="text-rose-400"], [class*="text-rose-200"] { color: #DC2626 !important; }
.text-sky-400, [class*="text-sky-400"] { color: #0284C7 !important; }
.text-indigo-400, [class*="text-indigo-400"] { color: #4F46E5 !important; }
.text-amber-500, [class*="text-amber-500"] { color: #B45309 !important; }

/* Gold text stays gold */
.text-gold-500,
.text-gold-400,
.text-\[\#C5A059\],
.text-\[\#C5A029\],
[class*="text-gold"],
[class*="text-[#C5A"] {
  color: var(--gold) !important;
}

/* ─── 14. Tabs ────────────────────────────────────────────────────────────── */
/* Inactive tab */
[role="tablist"] button,
[role="tab"],
.tab-btn,
button[class*="border-b-2"] {
  background-color: transparent !important;
  color: var(--text-secondary) !important;
  border-color: transparent !important;
  transition: all 0.2s !important;
}

[role="tablist"] button:hover,
.tab-btn:hover {
  color: var(--gold) !important;
  background-color: var(--gold-light) !important;
}

/* Active tab — gold bg white text */
[role="tab"][aria-selected="true"],
[role="tablist"] button.active,
button[class*="bg-[#C5A059]"],
button[class*="bg-gold-500"],
[class*="tab-active"],
[class*="border-b-2"][class*="border-gold"],
[class*="border-b-2"][class*="border-[#C5A"] {
  background-color: var(--gold) !important;
  color: #FFFFFF !important;
  border-color: var(--gold) !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(200,163,77,0.25) !important;
  font-weight: 600 !important;
}

/* ─── 15. Modals ──────────────────────────────────────────────────────────── */
/* Modal overlay */
[class*="fixed"][class*="inset-0"][class*="z-50"],
[class*="fixed inset-0 z-50"] {
  background-color: rgba(0,0,0,0.35) !important;
}

/* Modal content box */
[class*="bg-slate-900"][class*="rounded"],
[class*="bg-slate-950"][class*="rounded"],
[class*="bg-slate-850"][class*="rounded"],
[class*="bg-[#0a0f1d]"][class*="rounded"] {
  background-color: #FFFFFF !important;
  color: var(--text-primary) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.12) !important;
  border: 1px solid var(--border-card) !important;
}

/* Modal inner inputs */
.post-modal-form input,
.post-modal-form textarea {
  background-color: #FFFFFF !important;
  border-color: #D1D5DB !important;
  color: var(--text-primary) !important;
}

.post-modal-form input:focus,
.post-modal-form textarea:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(200,163,77,0.15) !important;
}

/* Response card in modal */
.response-card {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-card) !important;
}

.response-field-value { color: var(--text-primary) !important; }
.response-field-label { color: var(--text-muted) !important; }

/* ─── 16. Icons ───────────────────────────────────────────────────────────── */
svg[class*="text-slate"],
i[class*="text-slate"],
[data-feather] {
  color: var(--text-secondary) !important;
  stroke: currentColor !important;
}

/* Gold active icons */
svg[class*="text-gold"],
svg[class*="text-[#C5A"],
i[class*="text-gold"],
i[class*="text-[#C5A"] {
  color: var(--gold) !important;
  stroke: var(--gold) !important;
}

/* ─── 17. Gradient backgrounds → white ───────────────────────────────────── */
[class*="bg-gradient-to"],
[class*="from-slate-900"] {
  background-image: none !important;
  background-color: var(--bg-secondary) !important;
}

/* Gradient text (gold gradient) — keep visible */
[class*="bg-gradient"][class*="from-amber"][class*="to-[#C5A"],
[class*="bg-gradient"][class*="from-gold"] {
  background-image: linear-gradient(135deg, var(--gold), var(--gold-hover)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

/* Hero-style dark overlays */
[class*="from-slate-900"][class*="to-transparent"],
[class*="bg-gradient-to-t"][class*="from-slate"] {
  background-image: linear-gradient(to top, rgba(255,255,255,0.6), transparent) !important;
}

/* Decorative blur blobs (ambient glows) → transparent */
[class*="blur-3xl"],
[class*="blur-[120px]"],
[class*="blur-xl"] {
  opacity: 0.12 !important;
  filter: blur(60px) !important;
}

/* ─── 18. Backdrop blur containers → white ───────────────────────────────── */
[class*="backdrop-blur"] {
  background-color: rgba(255,255,255,0.95) !important;
}

/* ─── 19. Shadows — Replace heavy black shadows ────────────────────────────── */
[class*="shadow-2xl"] {
  box-shadow: 0 20px 60px rgba(0,0,0,0.08) !important;
}

[class*="shadow-xl"] {
  box-shadow: 0 12px 40px rgba(0,0,0,0.07) !important;
}

[class*="shadow-lg"] {
  box-shadow: 0 8px 24px rgba(0,0,0,0.06) !important;
}

[class*="shadow-md"] {
  box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
}

[class*="shadow-black"] {
  --tw-shadow: none !important;
  box-shadow: var(--shadow-card) !important;
}

[class*="shadow-gold-500"],
[class*="shadow-gold-600"],
[class*="shadow-amber-500"] {
  box-shadow: 0 6px 18px rgba(200,163,77,0.15) !important;
}

/* ─── 20. Footer ──────────────────────────────────────────────────────────── */
footer {
  background-color: #FFFFFF !important;
  border-top: 2px solid var(--gold) !important;
  color: var(--text-secondary) !important;
}

footer span,
footer a,
footer p,
footer div {
  color: var(--text-secondary) !important;
  font-family: 'Inter', sans-serif !important;
}

footer .text-gold-500,
footer [class*="text-gold"],
footer [class*="text-[#C5A"] {
  color: var(--gold) !important;
}

footer svg,
footer [data-feather] {
  color: var(--text-muted) !important;
  opacity: 0.7 !important;
}

/* ─── 21. Login Page ──────────────────────────────────────────────────────── */
/* Full-page login — white background */
body:has(> main form[method="post"]) {
  background-color: var(--bg-secondary) !important;
}

/* Login card */
.min-h-screen,
[class*="min-h-screen"] {
  background-color: var(--bg-secondary) !important;
}

/* ─── 22. Decorative Elements ─────────────────────────────────────────────── */
/* Thin gold divider lines */
hr,
.border-t,
.border-b {
  border-color: var(--border-divider) !important;
}

/* Gold accent left border */
.border-l-4[class*="border-gold"],
.border-l-4[class*="border-[#C5A"] {
  border-left-color: var(--gold) !important;
}

/* Border dashed */
[class*="border-dashed"] {
  border-color: rgba(200,163,77,0.3) !important;
}

/* ─── 23. Section backgrounds — alternate grey strips ─────────────────────── */
/* Sections that used darker slate for contrast */
section[class*="bg-slate"],
.section-alt,
[class*="bg-slate-900/30"],
[class*="bg-slate-900/40"] {
  background-color: var(--bg-secondary) !important;
}

/* ─── 24. Alert / Notification banners ──────────────────────────────────────── */
/* Error banners */
[class*="bg-rose-500/10"][class*="border-rose"],
[class*="bg-rose-500\/10"][class*="border-rose"] {
  background-color: rgba(220,38,38,0.06) !important;
  border-color: rgba(220,38,38,0.2) !important;
  border-radius: 12px !important;
}

/* Warning banners */
[class*="bg-amber-500/10"][class*="border-amber"],
[class*="bg-amber-500\/10"][class*="border-amber"] {
  background-color: rgba(245,158,11,0.06) !important;
  border-color: rgba(245,158,11,0.2) !important;
  border-radius: 12px !important;
}

/* Info banners */
[class*="bg-sky-500/10"][class*="border-sky"],
[class*="bg-sky-500\/10"][class*="border-sky"] {
  background-color: rgba(14,165,233,0.06) !important;
  border-color: rgba(14,165,233,0.2) !important;
  border-radius: 12px !important;
}

/* ─── 25. Card-specific interactive states ────────────────────────────────── */
/* Group hover gold border */
.group:hover .group-hover\:border-\[\#C5A059\],
.group:hover [class*="group-hover:border-gold"] {
  border-color: var(--gold) !important;
}

.group:hover .group-hover\:bg-\[\#C5A059\],
.group:hover [class*="group-hover:bg-gold"],
.group:hover [class*="group-hover:bg-amber"] {
  background-color: var(--gold-light) !important;
}

.group:hover [class*="group-hover:text-[#C5A"],
.group:hover [class*="group-hover:text-gold"],
.group:hover [class*="group-hover:text-amber"] {
  color: var(--gold) !important;
}

/* Group hover for dark text scenarios — text darkens */
.group:hover [class*="group-hover:text-slate-950"] {
  color: var(--text-primary) !important;
}

/* ─── 26. Animations — Keep, soften ──────────────────────────────────────── */
@keyframes fadeIn {
  0%   { opacity: 0; transform: translateY(4px); }
  100% { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* Gold shimmer on primary buttons */
button[class*="bg-[#C5A059]"]:active,
a[class*="bg-[#C5A059]"]:active {
  transform: scale(0.98) !important;
  box-shadow: 0 2px 8px rgba(200,163,77,0.2) !important;
}

/* ─── 27. Scroll highlight stays gold ──────────────────────────────────────── */
.scroll-highlight {
  animation: highlight-pulse-light 0.6s ease-in-out !important;
}

@keyframes highlight-pulse-light {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(200, 163, 77, 0.2); }
  50%       { box-shadow: inset 0 0 0 4px rgba(200, 163, 77, 0.25); }
}

/* ─── 28. Cadvin logo in header ─────────────────────────────────────────────── */
.cadvin-navbar-logo {
  height: 48px !important;
  width: auto !important;
  max-width: 160px !important;
  object-fit: contain !important;
  display: block !important;
}

/* ─── 29. Progress / Loading indicators ─────────────────────────────────────── */
.animate-pulse {
  opacity: 0.6 !important;
}

/* ─── 30. Specific page containers — Premium whitespace ─────────────────────── */
/* Dashboard stat cards */
[class*="p-4"][class*="rounded"][class*="border"],
[class*="p-5"][class*="rounded"][class*="border"],
[class*="p-6"][class*="rounded"][class*="border"] {
  background-color: #FFFFFF !important;
  border-color: var(--border-card) !important;
  box-shadow: var(--shadow-card) !important;
  color: var(--text-primary) !important;
}

/* Page headings with Playfair */
[class*="text-2xl"],
[class*="text-3xl"],
[class*="text-xl"][class*="font-bold"],
[class*="text-xl"][class*="font-semibold"] {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: var(--text-primary) !important;
}

/* Gold accent line under section headings */
h2::after,
h3::after {
  display: none; /* Only add via explicit classes to avoid layout shifts */
}

/* ─── 31. Stone / neutral color overrides ────────────────────────────────── */
[class*="text-stone-"],
[class*="bg-stone-"] {
  color: var(--text-secondary) !important;
  background-color: transparent !important;
}

/* ─── 32. Opacity adjustments for light backgrounds ──────────────────────── */
.opacity-30 { opacity: 0.15 !important; }
.opacity-40 { opacity: 0.2 !important; }
.opacity-60 { opacity: 0.5 !important; }
.opacity-85 { opacity: 0.9 !important; }
.grayscale   { filter: grayscale(100%) opacity(0.5) !important; }

/* ─── 33. Accent / checkbox / radio ─────────────────────────────────────────── */
[class*="accent-[#C5A059]"],
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--gold) !important;
}

/* ─── 34. Response/post view-only badge ─────────────────────────────────────── */
.view-only-badge {
  background-color: rgba(99,102,241,0.08) !important;
  border-color: rgba(99,102,241,0.2) !important;
  color: #4F46E5 !important;
}

.response-badge {
  background-color: rgba(200,163,77,0.08) !important;
  border-color: rgba(200,163,77,0.2) !important;
  color: var(--gold) !important;
}

/* ─── 35. Mobile-specific overrides ──────────────────────────────────────── */
@media (max-width: 767px) {
  header {
    background-color: #FFFFFF !important;
  }
  #mobile-menu {
    background-color: #FFFFFF !important;
  }
}

/* ─── 36. Thin gold geometric accent lines (decorative) ──────────────────── */
.main-content > section:not(:first-child)::before,
main > div.space-y-6 > div:first-child::before {
  display: none; /* Subtle — only add when explicitly needed */
}

/* Section dividers */
[class*="border-t"][class*="border-slate"] {
  border-color: var(--border-divider) !important;
}

[class*="border-b"][class*="border-slate"] {
  border-color: var(--border-divider) !important;
}

/* ─── 37. Z-index layers stay intact ─────────────────────────────────────── */
/* No z-index changes — all preserved */

/* ─── 38. Sky / blue text on white ──────────────────────────────────────── */
.text-sky-400,
[class*="text-sky-4"] {
  color: #0284C7 !important;
}

/* ─── END OF THEME OVERRIDE ───────────────────────────────────────────────── */