:root {
  --invox-primary: #4338ca;
  --invox-primary-dark: #3730a3;
  --invox-bg: #f8f9fc;
}

body {
  background-color: var(--invox-bg);
  color: #1f2937;
}

.navbar-brand {
  font-weight: 700;
}

#mainNavbar {
  background-color: #ffffff !important;
  opacity: 1 !important;
}

#mainNavbar .navbar-brand,
#mainNavbar .nav-link {
  color: #1a1a1a !important;
}

#mainNavbar .nav-link:hover,
#mainNavbar .nav-link.active {
  color: var(--invox-primary) !important;
}

#mainNavbar .navbar-toggler-icon {
  filter: brightness(0.3);
}

#mainNavbar .navbar-collapse {
  background-color: #ffffff !important;
}

#mainNavbar .dropdown-menu {
  background-color: #ffffff !important;
  opacity: 1 !important;
}

@media (max-width: 991.98px) {
  #mainNavbar .navbar-collapse.show,
  #mainNavbar .navbar-collapse.collapsing {
    background-color: #ffffff !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08);
  }
}

[data-theme="dark"] #mainNavbar,
[data-theme="dark"] #mainNavbar .navbar-collapse {
  background-color: #1e293b !important;
}

[data-theme="dark"] #mainNavbar .navbar-brand,
[data-theme="dark"] #mainNavbar .nav-link {
  color: #e5e7eb !important;
}

[data-theme="dark"] #mainNavbar .navbar-toggler-icon {
  filter: none;
}

[data-theme="dark"] #mainNavbar .dropdown-menu {
  background-color: #1e293b !important;
}

.btn-primary {
  background-color: var(--invox-primary);
  border-color: var(--invox-primary);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--invox-primary-dark);
  border-color: var(--invox-primary-dark);
}

.btn-outline-primary {
  color: var(--invox-primary);
  border-color: var(--invox-primary);
}

.btn-outline-primary:hover {
  background-color: var(--invox-primary);
  border-color: var(--invox-primary);
}

.text-primary {
  color: var(--invox-primary) !important;
}

.bg-primary-subtle {
  background-color: #eef2ff !important;
}

.hero {
  padding: 5rem 0 4rem;
}

.hero h1 {
  font-weight: 800;
  letter-spacing: -0.02em;
}

.hero-banner {
  background: linear-gradient(135deg, #4338ca 0%, #2563eb 55%, #0ea5e9 100%);
  position: relative;
  overflow: hidden;
}

.hero-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 85% 20%, rgba(255,255,255,0.12) 0, transparent 45%),
    radial-gradient(circle at 10% 90%, rgba(255,255,255,0.08) 0, transparent 40%);
  pointer-events: none;
}

.hero-stats {
  border-top: 1px solid rgba(255,255,255,0.25);
  padding-top: 1rem;
}

.generator-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.generator-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 0.75rem 1.5rem rgba(67, 56, 202, 0.12) !important;
}

.plan-card.featured {
  border: 2px solid var(--invox-primary) !important;
}

footer {
  background-color: #111827;
  color: #d1d5db;
}

footer a {
  color: #d1d5db;
}

footer a:hover {
  color: #fff;
}

.card {
  background-color: #fff;
}

@keyframes invox-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-in {
  animation: invox-fade-up 0.4s ease both;
}

.kpi-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.75rem 1.5rem rgba(67, 56, 202, 0.1) !important;
}

[data-theme="dark"] {
  --invox-bg: #0f172a;
}

[data-theme="dark"] html,
[data-theme="dark"] body {
  background-color: var(--invox-bg);
  color: #e5e7eb;
}

[data-theme="dark"] .card,
[data-theme="dark"] .navbar,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .offcanvas,
[data-theme="dark"] .list-group-item,
[data-theme="dark"] .accordion-item,
[data-theme="dark"] .accordion-button,
[data-theme="dark"] .toast,
[data-theme="dark"] .popover,
[data-theme="dark"] .bg-white {
  background-color: #1e293b !important;
  color: #e5e7eb;
}

[data-theme="dark"] .navbar-light .nav-link,
[data-theme="dark"] .text-secondary,
[data-theme="dark"] .text-muted,
[data-theme="dark"] .form-label,
[data-theme="dark"] small.text-secondary {
  color: #94a3b8 !important;
}

[data-theme="dark"] .text-dark,
[data-theme="dark"] .text-body,
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6,
[data-theme="dark"] .dropdown-item,
[data-theme="dark"] .accordion-button,
[data-theme="dark"] .list-group-item,
[data-theme="dark"] label {
  color: #e5e7eb !important;
}

[data-theme="dark"] .table {
  color: #e5e7eb;
  --bs-table-color: #e5e7eb;
  --bs-table-bg: transparent;
  --bs-table-striped-bg: #1a2536;
  --bs-table-hover-bg: #243044;
  border-color: #334155;
}

[data-theme="dark"] .table > :not(caption) > * > * {
  background-color: transparent;
  color: #e5e7eb;
  border-bottom-color: #334155;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .input-group-text {
  background-color: #0f172a;
  color: #e5e7eb;
  border-color: #334155;
}

[data-theme="dark"] .form-control::placeholder {
  color: #64748b;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background-color: #0f172a;
  color: #e5e7eb;
}

[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-start,
[data-theme="dark"] .border-end,
[data-theme="dark"] .border {
  border-color: #334155 !important;
}

[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-body,
[data-theme="dark"] .bg-body-tertiary {
  background-color: #1e293b !important;
}

[data-theme="dark"] .bg-primary-subtle {
  background-color: #1e2a52 !important;
  color: #c7d2fe !important;
}

[data-theme="dark"] .btn-light {
  background-color: #334155;
  border-color: #334155;
  color: #e5e7eb;
}

[data-theme="dark"] .btn-light:hover {
  background-color: #475569;
  border-color: #475569;
  color: #fff;
}

[data-theme="dark"] .btn-outline-secondary {
  color: #94a3b8;
  border-color: #475569;
}

[data-theme="dark"] code {
  background-color: #1e293b;
  color: #f472b6;
}

[data-theme="dark"] .shadow-sm,
[data-theme="dark"] .shadow {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .alert-light,
[data-theme="dark"] .alert-secondary {
  background-color: #1e293b;
  color: #e5e7eb;
  border-color: #334155;
}

[data-theme="dark"] .plan-card,
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .generator-card {
  background-color: #1e293b !important;
  color: #e5e7eb;
}

[data-theme="dark"] .pagination .page-link {
  background-color: #1e293b;
  border-color: #334155;
  color: #e5e7eb;
}

[data-theme="dark"] .pagination .page-item.active .page-link {
  background-color: var(--invox-primary);
  border-color: var(--invox-primary);
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
  border-color: #334155;
}

[data-theme="dark"] hr {
  border-color: #334155;
  opacity: 0.5;
}

[data-theme="dark"] .nav-tabs .nav-link {
  color: #94a3b8;
}

[data-theme="dark"] .nav-tabs .nav-link.active {
  background-color: #1e293b;
  color: #e5e7eb;
  border-color: #334155;
}

/* ------------------------------------------------------------------ */
/* Ad slots: keep fixed-size ad units from overflowing on mobile.     */
/* A 728x90 / 300x250 banner is wider than a phone screen, so without */
/* this it pushes the whole page sideways. We cap each slot at the    */
/* viewport width and let an oversized ad scroll inside its own box   */
/* (or scale down, for image/responsive ads) instead of breaking the  */
/* layout.                                                            */
/* ------------------------------------------------------------------ */
.ad-slot {
  max-width: 100%;
  overflow-x: auto;               /* an oversized ad scrolls inside its box */
  -webkit-overflow-scrolling: touch;
  margin-left: auto;
  margin-right: auto;
}
/* Image / responsive creatives scale down to fit. Fixed-size iframe ads */
/* keep their native size and scroll within the slot (capping an iframe  */
/* would clip the ad), so they never widen the page.                     */
.ad-slot img {
  max-width: 100%;
  height: auto;
}
/* Belt-and-braces: never allow the page itself to scroll sideways on    */
/* small screens because of an ad or any wide embed.                     */
@media (max-width: 767.98px) {
  html,
  body {
    overflow-x: hidden;
  }
}

/* ------------------------------------------------------------------ */
/* Accessibility: contrast. Bootstrap's muted greys sit just under the */
/* WCAG AA 4.5:1 threshold on white, so darken them in light mode.     */
/* Dark mode keeps its own lighter secondary colour untouched.         */
/* ------------------------------------------------------------------ */
html:not([data-theme="dark"]) .text-secondary,
html:not([data-theme="dark"]) .text-muted {
  color: #5b626b !important;
}