/* Dark mode overrides for campaign pages and modals */

/* Direct override when data-theme is set on root */
:root[data-theme="dark"] {
  --bs-body-bg: #2F3349 !important;
  --bs-body-bg-rgb: 47, 51, 73 !important;
  --bs-body-color: #D0D4F1 !important;
  --bs-body-color-rgb: 208, 212, 241 !important;
  --bs-bg-opacity: 1 !important;
}

/* Use CSS media query for system dark mode preference */
@media (prefers-color-scheme: dark) {
  :root {
    --bs-body-bg: #2F3349 !important;
    --bs-body-bg-rgb: 47, 51, 73 !important;
    --bs-body-color: #D0D4F1 !important;
    --bs-body-color-rgb: 208, 212, 241 !important;
    --bs-bg-opacity: 1 !important;
  }
  
  body {
    background-color: #2F3349 !important;
    color: #D0D4F1 !important;
  }
}

/* Override Bootstrap CSS variables for dark mode - when explicitly set */
[data-mui-color-scheme="dark"],
[data-theme="dark"],
:root[data-theme="dark"],
.dark,
body.dark-mode {
  --bs-body-bg: #2F3349 !important;
  --bs-body-bg-rgb: 47, 51, 73 !important;
  --bs-body-color: #D0D4F1 !important;
  --bs-body-color-rgb: 208, 212, 241 !important;
}

/* Direct body styling when data-theme is on root */
:root[data-theme="dark"] body {
  background-color: #2F3349 !important;
  color: #D0D4F1 !important;
}

/* Ensure body element uses the dark background */
[data-mui-color-scheme="dark"] body,
[data-theme="dark"] body,
:root[data-theme="dark"] body,
.dark body,
body.dark-mode {
  background-color: #2F3349 !important;
  color: #D0D4F1 !important;
}

/* Override the hardcoded p tag color from style.css */
[data-mui-color-scheme="dark"] p,
.dark p {
  color: inherit !important;
}

/* Fix modal backgrounds for dark mode */
[data-mui-color-scheme="dark"] .modal-content,
.dark .modal-content {
  background-color: #2F3349 !important;
  color: #D0D4F1 !important;
  border-color: rgba(208, 212, 241, 0.16) !important;
}

[data-mui-color-scheme="dark"] .modal-header,
.dark .modal-header {
  background-color: #2F3349 !important;
  border-bottom-color: rgba(208, 212, 241, 0.16) !important;
  color: #D0D4F1 !important;
}

[data-mui-color-scheme="dark"] .modal-body,
.dark .modal-body {
  background-color: #2F3349 !important;
  color: #D0D4F1 !important;
}

/* Fix close button for dark mode */
[data-mui-color-scheme="dark"] .btn-close,
.dark .btn-close {
  filter: invert(1);
}

/* Campaign description styles - remove inline color styles */
[data-mui-color-scheme="dark"] .campaign-description p,
[data-mui-color-scheme="dark"] .campaign-description span,
[data-mui-color-scheme="dark"] .campaign-description div,
.dark .campaign-description p,
.dark .campaign-description span,
.dark .campaign-description div {
  color: inherit !important;
}

/* Ensure all text in dark mode has proper contrast */
[data-mui-color-scheme="dark"] h1,
[data-mui-color-scheme="dark"] h2,
[data-mui-color-scheme="dark"] h3,
[data-mui-color-scheme="dark"] h4,
[data-mui-color-scheme="dark"] h5,
[data-mui-color-scheme="dark"] h6,
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6 {
  color: #D0D4F1 !important;
}

/* Modal title specific fix */
[data-mui-color-scheme="dark"] .modal-title,
.dark .modal-title {
  color: #D0D4F1 !important;
}

/* Square Payment SDK dark mode fixes */
[data-mui-color-scheme="dark"] .sq-card-message,
.dark .sq-card-message {
  color: #D0D4F1 !important;
}

[data-mui-color-scheme="dark"] .sq-input,
.dark .sq-input {
  background-color: #2F3349 !important;
  color: #D0D4F1 !important;
  border-color: rgba(208, 212, 241, 0.23) !important;
}

[data-mui-color-scheme="dark"] .sq-input::placeholder,
.dark .sq-input::placeholder {
  color: rgba(208, 212, 241, 0.5) !important;
}

[data-mui-color-scheme="dark"] .sq-input:focus,
.dark .sq-input:focus {
  border-color: rgba(208, 212, 241, 0.5) !important;
}

/* Square error messages */
[data-mui-color-scheme="dark"] .sq-error-message,
.dark .sq-error-message {
  color: #ff6b6b !important;
}

/* Square payment form container */
[data-mui-color-scheme="dark"] #card-container,
[data-mui-color-scheme="dark"] .sq-payment-form,
.dark #card-container,
.dark .sq-payment-form {
  background-color: transparent !important;
}

/* ApexCharts dark mode styles */
[data-mui-color-scheme="dark"] .apexcharts-text,
[data-theme="dark"] .apexcharts-text,
:root[data-theme="dark"] .apexcharts-text,
.dark .apexcharts-text,
body.dark-mode .apexcharts-text {
  fill: #D0D4F1 !important;
}

/* Override inline styles on ApexCharts text elements */
[data-mui-color-scheme="dark"] .apexcharts-text[fill="#373d3f"],
[data-theme="dark"] .apexcharts-text[fill="#373d3f"],
:root[data-theme="dark"] .apexcharts-text[fill="#373d3f"],
.dark .apexcharts-text[fill="#373d3f"],
body.dark-mode .apexcharts-text[fill="#373d3f"] {
  fill: #D0D4F1 !important;
}

/* Override any text element with inline fill attribute */
[data-mui-color-scheme="dark"] text[fill="#373d3f"],
[data-theme="dark"] text[fill="#373d3f"],
:root[data-theme="dark"] text[fill="#373d3f"],
.dark text[fill="#373d3f"],
body.dark-mode text[fill="#373d3f"] {
  fill: #D0D4F1 !important;
}

/* Override elements with inline style color */
[data-mui-color-scheme="dark"] [style*="color: rgb(55, 61, 63)"],
[data-theme="dark"] [style*="color: rgb(55, 61, 63)"],
:root[data-theme="dark"] [style*="color: rgb(55, 61, 63)"],
.dark [style*="color: rgb(55, 61, 63)"],
body.dark-mode [style*="color: rgb(55, 61, 63)"] {
  color: #D0D4F1 !important;
}

/* ApexCharts axis labels */
[data-mui-color-scheme="dark"] .apexcharts-yaxis-label,
[data-mui-color-scheme="dark"] .apexcharts-xaxis-label,
[data-theme="dark"] .apexcharts-yaxis-label,
[data-theme="dark"] .apexcharts-xaxis-label,
:root[data-theme="dark"] .apexcharts-yaxis-label,
:root[data-theme="dark"] .apexcharts-xaxis-label,
.dark .apexcharts-yaxis-label,
.dark .apexcharts-xaxis-label,
body.dark-mode .apexcharts-yaxis-label,
body.dark-mode .apexcharts-xaxis-label {
  fill: #D0D4F1 !important;
}

/* ApexCharts axis titles */
[data-mui-color-scheme="dark"] .apexcharts-yaxis-title-text,
[data-mui-color-scheme="dark"] .apexcharts-xaxis-title-text,
[data-theme="dark"] .apexcharts-yaxis-title-text,
[data-theme="dark"] .apexcharts-xaxis-title-text,
:root[data-theme="dark"] .apexcharts-yaxis-title-text,
:root[data-theme="dark"] .apexcharts-xaxis-title-text,
.dark .apexcharts-yaxis-title-text,
.dark .apexcharts-xaxis-title-text,
body.dark-mode .apexcharts-yaxis-title-text,
body.dark-mode .apexcharts-xaxis-title-text {
  fill: #D0D4F1 !important;
}

/* ApexCharts legend text */
[data-mui-color-scheme="dark"] .apexcharts-legend-text,
[data-theme="dark"] .apexcharts-legend-text,
:root[data-theme="dark"] .apexcharts-legend-text,
.dark .apexcharts-legend-text,
body.dark-mode .apexcharts-legend-text {
  color: #D0D4F1 !important;
}

/* ApexCharts grid lines */
[data-mui-color-scheme="dark"] .apexcharts-gridlines-horizontal line,
[data-mui-color-scheme="dark"] .apexcharts-gridlines-vertical line,
[data-theme="dark"] .apexcharts-gridlines-horizontal line,
[data-theme="dark"] .apexcharts-gridlines-vertical line,
:root[data-theme="dark"] .apexcharts-gridlines-horizontal line,
:root[data-theme="dark"] .apexcharts-gridlines-vertical line,
.dark .apexcharts-gridlines-horizontal line,
.dark .apexcharts-gridlines-vertical line,
body.dark-mode .apexcharts-gridlines-horizontal line,
body.dark-mode .apexcharts-gridlines-vertical line {
  stroke: rgba(208, 212, 241, 0.16) !important;
}

/* ApexCharts tooltip dark mode */
[data-mui-color-scheme="dark"] .apexcharts-tooltip,
[data-theme="dark"] .apexcharts-tooltip,
:root[data-theme="dark"] .apexcharts-tooltip,
.dark .apexcharts-tooltip,
body.dark-mode .apexcharts-tooltip {
  background: #2F3349 !important;
  color: #D0D4F1 !important;
  border-color: rgba(208, 212, 241, 0.16) !important;
}

[data-mui-color-scheme="dark"] .apexcharts-tooltip-title,
[data-theme="dark"] .apexcharts-tooltip-title,
:root[data-theme="dark"] .apexcharts-tooltip-title,
.dark .apexcharts-tooltip-title,
body.dark-mode .apexcharts-tooltip-title {
  background: rgba(208, 212, 241, 0.08) !important;
  border-bottom-color: rgba(208, 212, 241, 0.16) !important;
  color: #D0D4F1 !important;
}

/* More aggressive ApexCharts text overrides */
[data-mui-color-scheme="dark"] .apexcharts-canvas text,
[data-theme="dark"] .apexcharts-canvas text,
:root[data-theme="dark"] .apexcharts-canvas text,
.dark .apexcharts-canvas text,
body.dark-mode .apexcharts-canvas text {
  fill: #D0D4F1 !important;
}

/* Override all SVG text elements in ApexCharts */
[data-mui-color-scheme="dark"] .apexcharts-svg text,
[data-theme="dark"] .apexcharts-svg text,
:root[data-theme="dark"] .apexcharts-svg text,
.dark .apexcharts-svg text,
body.dark-mode .apexcharts-svg text {
  fill: #D0D4F1 !important;
}

/* Media query for system dark mode preference */
@media (prefers-color-scheme: dark) {
  .apexcharts-text,
  .apexcharts-yaxis-label,
  .apexcharts-xaxis-label,
  .apexcharts-yaxis-title-text,
  .apexcharts-xaxis-title-text {
    fill: #D0D4F1 !important;
  }
  
  .apexcharts-legend-text {
    color: #D0D4F1 !important;
  }
  
  .apexcharts-gridlines-horizontal line,
  .apexcharts-gridlines-vertical line {
    stroke: rgba(208, 212, 241, 0.16) !important;
  }
  
  .apexcharts-tooltip {
    background: #2F3349 !important;
    color: #D0D4F1 !important;
    border-color: rgba(208, 212, 241, 0.16) !important;
  }
  
  .apexcharts-tooltip-title {
    background: rgba(208, 212, 241, 0.08) !important;
    border-bottom-color: rgba(208, 212, 241, 0.16) !important;
    color: #D0D4F1 !important;
  }
  
  /* Override inline styles in media query too */
  text[fill="#373d3f"],
  .apexcharts-text[fill="#373d3f"] {
    fill: #D0D4F1 !important;
  }
  
  [style*="color: rgb(55, 61, 63)"] {
    color: #D0D4F1 !important;
  }
  
  .apexcharts-canvas text,
  .apexcharts-svg text {
    fill: #D0D4F1 !important;
  }
}