/* ==========================================================
   Elevate Theme Mode 20260618
   Modern light/white and dark theme variables.
   ========================================================== */
:root,
html[data-elevate-theme="light"] {
  color-scheme: light;
  --elevate-bg-main: #f7fbff;
  --elevate-bg-page: #ffffff;
  --elevate-bg-soft: #eef6ff;
  --elevate-bg-card: rgba(255,255,255,.94);
  --elevate-bg-glass: rgba(255,255,255,.78);
  --elevate-text-main: #0b1728;
  --elevate-text-strong: #07111f;
  --elevate-text-muted: #506176;
  --elevate-border: rgba(15, 76, 255, .12);
  --elevate-border-strong: rgba(7, 17, 31, .15);
  --elevate-primary: #1677ff;
  --elevate-primary-strong: #0f4cff;
  --elevate-primary-soft: rgba(22,119,255,.10);
  --elevate-sky: #38bdf8;
  --elevate-gold: #d8a331;
  --elevate-gold-soft: rgba(245,197,66,.18);
  --elevate-success: #16a36d;
  --elevate-danger: #e5484d;
  --elevate-shadow-soft: 0 14px 36px rgba(7, 17, 31, .08);
  --elevate-shadow-card: 0 24px 62px rgba(7, 17, 31, .12);
  --elevate-shadow-hero: 0 38px 110px rgba(7, 17, 31, .18);
}

html[data-elevate-theme="dark"] {
  color-scheme: dark;
  --elevate-bg-main: #06111f;
  --elevate-bg-page: #071426;
  --elevate-bg-soft: #0b1d35;
  --elevate-bg-card: rgba(12, 27, 48, .94);
  --elevate-bg-glass: rgba(10, 24, 43, .82);
  --elevate-text-main: #eaf2ff;
  --elevate-text-strong: #f8fafc;
  --elevate-text-muted: #b7c5d9;
  --elevate-border: rgba(226, 232, 240, .13);
  --elevate-border-strong: rgba(226, 232, 240, .22);
  --elevate-primary: #5bb7ff;
  --elevate-primary-strong: #7dd3fc;
  --elevate-primary-soft: rgba(91,183,255,.14);
  --elevate-sky: #7dd3fc;
  --elevate-gold: #f4d47b;
  --elevate-gold-soft: rgba(244,212,123,.14);
  --elevate-success: #34d399;
  --elevate-danger: #fb7185;
  --elevate-shadow-soft: 0 14px 36px rgba(0, 0, 0, .28);
  --elevate-shadow-card: 0 28px 70px rgba(0, 0, 0, .38);
  --elevate-shadow-hero: 0 45px 120px rgba(0, 0, 0, .52);
}

html[data-elevate-theme="dark"],
html[data-elevate-theme="dark"] body {
  background: var(--elevate-bg-main) !important;
  color: var(--elevate-text-main) !important;
}

html[data-elevate-theme="dark"] .bg-white,
html[data-elevate-theme="dark"] .bg-body,
html[data-elevate-theme="dark"] .bg-light {
  background: var(--elevate-bg-card) !important;
}

html[data-elevate-theme="dark"] .text-dark,
html[data-elevate-theme="dark"] .text-body,
html[data-elevate-theme="dark"] h1,
html[data-elevate-theme="dark"] h2,
html[data-elevate-theme="dark"] h3,
html[data-elevate-theme="dark"] h4,
html[data-elevate-theme="dark"] h5,
html[data-elevate-theme="dark"] h6,
html[data-elevate-theme="dark"] strong,
html[data-elevate-theme="dark"] .fw-bold {
  color: var(--elevate-text-strong) !important;
}

html[data-elevate-theme="dark"] p,
html[data-elevate-theme="dark"] .text-muted,
html[data-elevate-theme="dark"] .form-text,
html[data-elevate-theme="dark"] small,
html[data-elevate-theme="dark"] .small {
  color: var(--elevate-text-muted) !important;
}

html[data-elevate-theme="dark"] .card,
html[data-elevate-theme="dark"] .cakti-card,
html[data-elevate-theme="dark"] .modal-content,
html[data-elevate-theme="dark"] .dropdown-menu,
html[data-elevate-theme="dark"] .list-group-item,
html[data-elevate-theme="dark"] .table,
html[data-elevate-theme="dark"] .table td,
html[data-elevate-theme="dark"] .table th {
  background-color: var(--elevate-bg-card) !important;
  color: var(--elevate-text-main) !important;
  border-color: var(--elevate-border) !important;
}

html[data-elevate-theme="dark"] .form-control,
html[data-elevate-theme="dark"] .form-select,
html[data-elevate-theme="dark"] textarea,
html[data-elevate-theme="dark"] input:not([type="checkbox"]):not([type="radio"]) {
  background: rgba(5, 18, 34, .92) !important;
  color: var(--elevate-text-strong) !important;
  border-color: var(--elevate-border-strong) !important;
}

html[data-elevate-theme="dark"] .form-control::placeholder,
html[data-elevate-theme="dark"] textarea::placeholder,
html[data-elevate-theme="dark"] input::placeholder {
  color: #8fa2bb !important;
}

html[data-elevate-theme="dark"] .border,
html[data-elevate-theme="dark"] .border-top,
html[data-elevate-theme="dark"] .border-bottom,
html[data-elevate-theme="dark"] hr {
  border-color: var(--elevate-border) !important;
}

html[data-elevate-theme="dark"] .alert-info,
html[data-elevate-theme="dark"] .alert-secondary {
  background: rgba(91,183,255,.12) !important;
  color: var(--elevate-text-main) !important;
  border-color: rgba(91,183,255,.28) !important;
}

html[data-elevate-theme="dark"] .alert-warning {
  background: rgba(244,212,123,.14) !important;
  color: #fde68a !important;
  border-color: rgba(244,212,123,.28) !important;
}

.elevate-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  border-radius: 999px !important;
  border: 1px solid var(--elevate-border-strong) !important;
  background: var(--elevate-bg-glass) !important;
  color: var(--elevate-text-strong) !important;
  font-weight: 850 !important;
  padding: 8px 14px !important;
  box-shadow: var(--elevate-shadow-soft);
  cursor: pointer;
}

.elevate-theme-toggle:hover {
  transform: translateY(-1px);
  border-color: rgba(22,119,255,.30) !important;
}

html[data-elevate-theme="dark"] .elevate-theme-toggle {
  color: #f4d47b !important;
  border-color: rgba(244,212,123,.30) !important;
}

body,
.card,
.cakti-card,
.navbar,
footer,
.form-control,
.form-select,
.nav-link,
.elevate-theme-toggle,
.elevate-sidebar,
.elevate-topbar {
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
