/* ========================================
   DARK MODE THEME OVERRIDES
   ======================================== */

[data-theme="dark"],
[data-theme="dark"] body {
  color: #FFFFFF !important;
}

[data-theme="dark"] {
  /* Dark mode color overrides are already in variables.css */
  /* These additional rules enhance the dark mode experience */

  /* Ensure proper text contrast in dark mode */
  body {
    color: #FFFFFF !important;
    background-color: var(--color-surface);
  }

  body {
    background-color: var(--color-surface);
  }

  /* Headings - force white color */
  h1, h2, h3, h4, h5, h6,
  .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--color-on-surface) !important;
  }

  /* Paragraphs and text */
  p, span, div, li {
    color: var(--color-on-surface) !important;
  }

  /* Bootstrap default text colors override */
  .text-dark {
    color: var(--color-on-surface) !important;
  }

  /* Enhance form inputs for dark mode */
  .input-token,
  .textarea-token,
  .select-token,
  input,
  textarea,
  select {
    background: var(--color-surface-variant) !important;
    color: var(--color-on-surface) !important;
  }

  .input-token::placeholder,
  .textarea-token::placeholder,
  input::placeholder,
  textarea::placeholder {
    color: var(--color-on-surface-variant) !important;
  }

  /* Enhance cards for dark mode */
  .card-token,
  .card {
    background: var(--color-surface-variant) !important;
    border-color: var(--color-outline) !important;
    color: var(--color-on-surface) !important;
  }

  .card-body,
  .card-header,
  .card-footer {
    background: var(--color-surface-variant) !important;
    color: var(--color-on-surface) !important;
  }

  /* Buttons in dark mode */
  .btn-token-secondary {
    color: var(--color-primary-light);
    border-color: var(--color-primary-light);
  }

  .btn-token-secondary:hover {
    background: rgba(66, 165, 245, 0.1);
  }

  /* Bootstrap secondary buttons */
  .btn-secondary {
    background: var(--color-surface-dim) !important;
    border-color: var(--color-outline) !important;
    color: var(--color-on-surface) !important;
  }

  .btn-secondary:hover {
    background: var(--color-outline) !important;
  }

  /* Links in dark mode */
  a {
    color: var(--color-primary-light) !important;
  }

  a:hover {
    color: var(--color-primary) !important;
  }

  /* Code blocks */
  code,
  pre {
    background: var(--color-surface-dim) !important;
    color: var(--color-on-surface) !important;
  }

  /* Improve HR visibility */
  hr,
  .divider {
    border-color: var(--color-outline) !important;
  }

  /* Table styling for dark mode */
  .table,
  table {
    background: var(--color-surface-variant) !important;
    color: var(--color-on-surface) !important;
  }

  .table thead,
  thead {
    background: var(--color-surface-dim) !important;
  }

  .table th,
  th {
    color: var(--color-on-surface) !important;
    background: var(--color-surface-dim) !important;
  }

  .table td,
  td {
    color: var(--color-on-surface) !important;
    background: var(--color-surface-variant) !important;
  }

  .table tbody,
  tbody {
    background: var(--color-surface-variant) !important;
  }

  .table tbody tr,
  tbody tr {
    background: var(--color-surface-variant) !important;
    border-color: var(--color-outline) !important;
  }

  .table tbody tr:hover,
  tbody tr:hover {
    background: var(--color-surface-dim) !important;
  }

  /* Override Bootstrap's universal table cell styling for dark mode */
  table > :not(caption) > * > * {
    background-color: var(--color-surface-variant) !important;
    color: var(--color-on-surface) !important;
  }

  /* Better contrast for badges in dark mode */
  .badge-token {
    background: rgba(21, 101, 192, 0.2) !important;
    color: var(--color-primary-light) !important;
  }

  .badge-token.success {
    background: rgba(46, 125, 50, 0.2) !important;
    color: var(--color-success-light) !important;
  }

  .badge-token.warning {
    background: rgba(245, 124, 0, 0.2) !important;
    color: var(--color-warning-light) !important;
  }

  .badge-token.error {
    background: rgba(183, 28, 28, 0.2) !important;
    color: var(--color-error-light) !important;
  }

  /* Bootstrap badge overrides */
  .badge {
    color: var(--color-on-surface) !important;
  }

  /* Alert overrides */
  .alert {
    color: inherit !important;
  }

  /* Lead text */
  .lead {
    color: var(--color-on-surface-variant) !important;
  }

  /* Muted text */
  .text-muted,
  .text-secondary {
    color: var(--color-on-surface-variant) !important;
  }

  /* Small text */
  small {
    color: var(--color-on-surface-variant) !important;
  }
}