:root{
  --bg: #000000;      /* page background (pure black) */
  --card: #121826;     /* card / container background */
  --accent: #6366f1;   /* primary button accent (violet) */
  --text: #e5e7eb;
  --muted: #9ca3af;
  --danger: #ef4444;
  --success: #10b981;
}

/* --- Base --- */
html, body {
  background: var(--bg) !important;
  color: var(--text) !important;
  margin: 0;
  padding: 0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;
}

/* --- Preserve header/nav: DO NOT override header/nav colors --- */
/* (We intentionally do NOT target `header`, `.nav`, `nav`, or `.logo` here) */

/* --- Cards & general containers (apply dark card color) --- */
.container,
main,
.content,
.page,
.site-wrapper,
section,
.section,
.hero,
.grid,
.card,
.booking-container,
.booking-container .card,
.admin-layout,
.sidebar,
.footer,
.kpis {
  /* only set container/card backgrounds where appropriate */
  /* keep .container padding / max-width but apply dark card background to cards */
}

/* Force all .card variants to card color (covers duplicated definitions) */
body .card,
main .card,
.container .card,
.booking-container .card,
.content .card,
.page .card {
  background: var(--card) !important;
  color: var(--text) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  padding: 16px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45) !important;
}

/* Specific override for the booking-section earlier white card block */
.booking-container .card {
  background: var(--card) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45) !important;
}

/* --- KPI boxes --- */
.kpis .kpi,
.kpi {
  background: #121826 !important;  /* enforced card color */
  border: 1px solid #1d2434 !important;
  border-radius: 14px !important;
  padding: 16px !important;
  text-align: center !important;
  color: var(--text) !important;
}
.kpis .num, .kpi .num { font-size: 28px !important; font-weight: 800 !important; color: var(--text) !important; }
.kpis .badge, .kpi .badge { color: var(--muted) !important; }

/* --- Buttons: scoped to content (won't affect header nav buttons) --- */
main .btn,
.content .btn,
.hero .btn,
.grid .btn,
.card .btn,
section .btn,
.booking-container .btn {
  background: var(--accent) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 10px 18px !important;
  font-weight: 700 !important;
  display: inline-block !important;
  box-shadow: none !important;
}
main .btn.secondary,
.content .btn.secondary,
.hero .btn.secondary,
.grid .btn.secondary,
.card .btn.secondary,
section .btn.secondary {
  background: #1f2937 !important;
  border: 1px solid var(--accent) !important;
  color: #ffffff !important;
}

/* --- Inputs / form fields --- */
input, textarea, select {
  background: #0f1624 !important;
  color: var(--text) !important;
  border: 1px solid #1f2937 !important;
  border-radius: 8px !important;
}

/* --- Images inside cards --- */
.header-img, .card img, .header-img-card img { border-radius: 10px !important; max-width:100%; height:auto; display:block; }

/* --- Text --- */
h1,h2,h3,h4,h5,h6,p,span,small,label {
  color: var(--text) !important;
}

/* --- Override inline white backgrounds (many patterns) --- 
   Note: we intentionally scope these to body so header/nav aren't targeted separately.
*/
body *[style*="background:#fff"],
body *[style*="background: #fff"],
body *[style*="background:#ffffff"],
body *[style*="background: #ffffff"],
body *[style*="background-color:#fff"],
body *[style*="background-color: #fff"],
body *[style*="background-color:#ffffff"],
body *[style*="background-color: #ffffff"],
body *[style*="background: white"],
body *[style*="background: white;"],
body *[style*="background-color: white"],
body *[style*="background-color: white;"],
body *[style*="background: rgb(255,255,255)"],
body *[style*="background: rgb(255, 255, 255)"],
body *[style*="background-color: rgb(255,255,255)"],
body *[style*="background-color: rgb(255, 255, 255)"] {
  background: var(--card) !important;
  color: var(--text) !important;
}

/* --- Very broad fallback: any generic block element inside page not header/nav --- */
/* We avoid selecting header/nav explicitly; if your site uses <main> wrap, this helps most. */
main, .content, .page, .site-wrapper {
  background: transparent !important; /* keep page wrapper transparent so individual cards show */
}

/* If you don't have <main>, target typical layout classes with care: */
.content > * , .page > * {
  background-clip: padding-box;
}

/* --- Keep header/nav alone: re-declare minimal safe styles (no color changes) --- */
header, nav, .nav, .nav * {
  /* leave header untouched - do not set background or color here */
}

/* --- Debug helper (TEMP) --- 
   Uncomment `outline` during testing to see which elements are still white.
   Remove in production. */
/*
body * {
  outline: none !important;
}
*/






/* === Admin Panel Styling === */

body.admin,
.admin-layout {
  background: #000 !important;
  color: #e5e7eb !important;
}

.sidebar {
  background: #0a1222 !important;
  border-right: 1px solid #162032 !important;
}
.sidebar a {
  display: block;
  color: #cbd5e1 !important;
  padding: 10px;
  border-radius: 10px;
  margin: 6px 0;
}
.sidebar a.active,
.sidebar a:hover {
  background: #111a2e !important;
}

.card, .admin-card {
  background: #121826 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 10px !important;
  color: #e5e7eb !important;
}

table {
  background: #121826 !important;
  color: #e5e7eb !important;
}
th, td {
  border-bottom: 1px solid #1f2937 !important;
}

input, textarea, select {
  background: #0f1624 !important;
  color: #e5e7eb !important;
  border: 1px solid #1f2937 !important;
}

.btn {
  background: #6366f1 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
}
.btn:hover {
  background: #4f46e5 !important;
}


/* === Force Admin Login Page Button to Violet === */
body.login-page .btn,
body.login-page button,
body.login-page input[type=submit],
body.login-page input[type=button],
body.login-page .btn-primary {
  background-color: #6366f1 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
  cursor: pointer !important;
}

body.login-page .btn:hover,
body.login-page button:hover,
body.login-page input[type=submit]:hover,
body.login-page input[type=button]:hover,
body.login-page .btn-primary:hover {
  background-color: #4f46e5 !important;
  color: #ffffff !important;
}





/* === Force Admin Panel Buttons to Dark Theme === */
body.admin .btn,
.admin-layout .btn,
.card .btn,
.admin-card .btn,
.sidebar .btn,
.btn,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
button,
input[type=submit],
input[type=button] {
  background-color: #6366f1 !important;   /* violet */
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  cursor: pointer;
  box-shadow: none !important;
}

.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-success:hover,
.btn-danger:hover,
button:hover,
input[type=submit]:hover,
input[type=button]:hover {
  background-color: #4f46e5 !important;   /* darker violet */
  color: #ffffff !important;
}