/* Dark mode refinements on top of Bootstrap 5.3 color modes */

/* Prefer Bootstrap variables so the UI follows data-bs-theme */
body {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
}

/* Keep common light-only CSS from forcing white backgrounds */
body,
main,
.sidebar,
footer {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Make sidebar items look correct in dark mode even when custom styles exist */
:root[data-bs-theme="dark"] .sidebar .list-group-item:hover {
  background-color: var(--bs-secondary-bg) !important;
}

/* Global body background (overrides pages that hardcode light gradients) */
:root[data-bs-theme="dark"] body{
  background: radial-gradient(1200px 600px at 20% 0%, rgba(80,170,255,.10), transparent 60%),
              radial-gradient(900px 500px at 90% 10%, rgba(198,107,255,.10), transparent 55%),
              linear-gradient(180deg, #171a1f 0%, #111418 100%) !important;
  color: var(--bs-body-color) !important;
}

/* Common "light" utility classes used across pages */
:root[data-bs-theme="dark"] .bg-light,
:root[data-bs-theme="dark"] .bg-white {
  background-color: var(--bs-tertiary-bg) !important;
}

:root[data-bs-theme="dark"] .text-dark {
  color: var(--bs-body-color) !important;
}

:root[data-bs-theme="dark"] .text-muted {
  color: var(--bs-secondary-color) !important;
}

:root[data-bs-theme="dark"] .border,
:root[data-bs-theme="dark"] .border-top,
:root[data-bs-theme="dark"] .border-bottom,
:root[data-bs-theme="dark"] .border-start,
:root[data-bs-theme="dark"] .border-end {
  border-color: var(--bs-border-color-translucent) !important;
}

/* Dashboards / custom cards that hardcode white */
:root[data-bs-theme="dark"] .kpi-card,
:root[data-bs-theme="dark"] .insight-card,
:root[data-bs-theme="dark"] .status-wide,
:root[data-bs-theme="dark"] main {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color-translucent) !important;
}

/* Tables: improve contrast */
:root[data-bs-theme="dark"] table,
:root[data-bs-theme="dark"] .table {
  color: var(--bs-body-color);
}

/* Table headers/striping */
:root[data-bs-theme="dark"] .table thead th,
:root[data-bs-theme="dark"] .table thead td {
  background-color: var(--bs-tertiary-bg) !important;
  color: var(--bs-body-color) !important;
}

:root[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-bg-type: rgba(255,255,255,.03);
}

/* Inputs/selects: fix any custom white backgrounds */
:root[data-bs-theme="dark"] .form-control,
:root[data-bs-theme="dark"] .form-select,
:root[data-bs-theme="dark"] .form-control:focus,
:root[data-bs-theme="dark"] .form-select:focus {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color-translucent) !important;
}

:root[data-bs-theme="dark"] .form-control::placeholder {
  color: color-mix(in srgb, var(--bs-secondary-color) 85%, transparent);
}

/* Bootstrap-select (selectpicker) */
:root[data-bs-theme="dark"] .bootstrap-select .dropdown-toggle,
:root[data-bs-theme="dark"] .bootstrap-select > .dropdown-toggle.btn-light {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color-translucent) !important;
}

:root[data-bs-theme="dark"] .bootstrap-select .dropdown-menu {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color-translucent) !important;
}

:root[data-bs-theme="dark"] .bootstrap-select .dropdown-menu .dropdown-item {
  color: var(--bs-body-color) !important;
}

:root[data-bs-theme="dark"] .bootstrap-select .dropdown-menu .dropdown-item:hover,
:root[data-bs-theme="dark"] .bootstrap-select .dropdown-menu .dropdown-item:focus {
  background-color: var(--bs-secondary-bg) !important;
}

/* Buttons: fix btn-light in dark mode */
:root[data-bs-theme="dark"] .btn-light {
  background-color: var(--bs-secondary-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color-translucent) !important;
}

/* Cards with bg-light headers */
:root[data-bs-theme="dark"] .card-header.bg-light,
:root[data-bs-theme="dark"] .card-header.bg-body-tertiary {
  background-color: var(--bs-tertiary-bg) !important;
  color: var(--bs-body-color) !important;
}

/* Dashboards: card headers that are set via page-local CSS */
:root[data-bs-theme="dark"] .insight-card .card-header,
:root[data-bs-theme="dark"] .card-clean .card-header {
  background-color: var(--bs-tertiary-bg) !important;
  color: var(--bs-body-color) !important;
  border-bottom-color: var(--bs-border-color-translucent) !important;
}

/* List group items (cards, dropdowns, sidebars) */
:root[data-bs-theme="dark"] .list-group-item{
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color-translucent) !important;
}

/* Soft alerts used in dashboards */
:root[data-bs-theme="dark"] .alert-soft{
  background: rgba(255, 193, 7, .08) !important;
  border-color: rgba(255, 193, 7, .30) !important;
  color: var(--bs-body-color) !important;
}

/* Home dashboard (Modules grid) cards */
:root[data-bs-theme="dark"] .nav-card,
:root[data-bs-theme="dark"] .card-clean{
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border: 1px solid var(--bs-border-color-translucent) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.35) !important;
}

:root[data-bs-theme="dark"] .section-title{
  color: var(--bs-body-color) !important;
}

:root[data-bs-theme="dark"] .section-title::before{
  opacity: .95;
}

:root[data-bs-theme="dark"] .emoji-badge{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--bs-border-color-translucent) !important;
  box-shadow: 0 5px 15px rgba(0,0,0,.25) !important;
}

:root[data-bs-theme="dark"] .nav-card h5,
:root[data-bs-theme="dark"] .card-clean h5,
:root[data-bs-theme="dark"] .card-clean h3{
  color: var(--bs-body-color) !important;
}

/* Landing page (Pages/Index.cshtml) */
:root[data-bs-theme="dark"] .badge-cloud{
  background: rgba(255,255,255,.08) !important;
  border-color: var(--bs-border-color-translucent) !important;
  color: var(--bs-body-color) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.35) !important;
}

:root[data-bs-theme="dark"] .mini-tag{
  background: rgba(255,255,255,.06) !important;
  border-color: var(--bs-border-color-translucent) !important;
  color: var(--bs-body-color) !important;
}

:root[data-bs-theme="dark"] .feature-card,
:root[data-bs-theme="dark"] .price-card,
:root[data-bs-theme="dark"] .testimonial-card{
  background: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color-translucent) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.35) !important;
}

:root[data-bs-theme="dark"] .feature-card::before{
  opacity: .35 !important;
}

:root[data-bs-theme="dark"] .feature-emoji{
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 10px 24px rgba(0,0,0,.35) !important;
}

:root[data-bs-theme="dark"] .fx-blue{
  background: linear-gradient(135deg, rgba(80,170,255,.18), rgba(80,170,255,.08)) !important;
}
:root[data-bs-theme="dark"] .fx-mint{
  background: linear-gradient(135deg, rgba(93,217,161,.18), rgba(93,217,161,.08)) !important;
}
:root[data-bs-theme="dark"] .fx-pink{
  background: linear-gradient(135deg, rgba(255,115,184,.18), rgba(255,115,184,.08)) !important;
}
:root[data-bs-theme="dark"] .fx-yellow{
  background: linear-gradient(135deg, rgba(255,207,92,.18), rgba(255,207,92,.08)) !important;
}
:root[data-bs-theme="dark"] .fx-purple{
  background: linear-gradient(135deg, rgba(125,107,255,.18), rgba(125,107,255,.08)) !important;
}

:root[data-bs-theme="dark"] .section-label{
  background: rgba(123, 97, 255, .14) !important;
  color: color-mix(in srgb, var(--bs-body-color) 82%, #6b5dff) !important;
  border-color: rgba(123, 97, 255, .30) !important;
}

:root[data-bs-theme="dark"] .logo-cloud{
  filter: grayscale(1) opacity(.75) !important;
}

/* Trusted companies grid (landing page) */
:root[data-bs-theme="dark"] .trusted-name{
  color: var(--bs-secondary-color) !important;
}

:root[data-bs-theme="dark"] .trusted-logo{
  filter: grayscale(1) opacity(.8) !important;
}
:root[data-bs-theme="dark"] .trusted-item:hover .trusted-logo{
  filter: grayscale(0) opacity(1) !important;
}

/* Auth pages (Login/Register) that use light gradients */
:root[data-bs-theme="dark"] .login-section,
:root[data-bs-theme="dark"] .register-section,
:root[data-bs-theme="dark"] .auth-container{
  background: radial-gradient(1000px 520px at 20% 0%, rgba(80,170,255,.10), transparent 60%),
              radial-gradient(900px 480px at 90% 10%, rgba(198,107,255,.10), transparent 55%),
              linear-gradient(180deg, #171a1f 0%, #111418 100%) !important;
}

:root[data-bs-theme="dark"] .login-card,
:root[data-bs-theme="dark"] .auth-card,
:root[data-bs-theme="dark"] .register-section .card{
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border: 1px solid var(--bs-border-color-translucent) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.45) !important;
}

:root[data-bs-theme="dark"] .login-card h2,
:root[data-bs-theme="dark"] .auth-title{
  color: var(--bs-body-color) !important;
}

/* Marketing hero section (if present) */
:root[data-bs-theme="dark"] .hero {
  background: linear-gradient(135deg, #1f2327, #14181c) !important;
}