/**
 * Speciale styling voor vraag.php en resultaten.php
 * Om layout problemen met breedte en overlappende elementen op te lossen
 */

/* Reset voor container breedtes */
body.bg-light {
  overflow-x: hidden;
}

/* Hoofdcontainer voor betere breedte controle */
body.bg-light .container,
.container {
  max-width: 1140px !important; /* Beperk de maximale breedte */
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  width: 100% !important;
}

.row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

/* Content kolom met flexibele maar beperkte breedte */
body.bg-light .container .col-lg-8,
.col-lg-8 {
  width: 100% !important;
  max-width: 800px !important; /* Beperk de maximale breedte van de kolom */
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Card styling */
.card {
  position: relative !important;
  z-index: 1 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
  margin-bottom: 1.5rem !important;
  width: 100% !important;
  max-width: 100% !important;
  border-color: #dee2e6 !important;
  border-width: 1px !important;
}

/* Verwijder eventuele pseudo-elementen die overlapping kunnen veroorzaken */
.card::before,
.card::after,
.container::before,
.container::after,
.row::before,
.row::after {
  display: none !important;
}

/* Consistente padding */
.card-body {
  padding: 1.25rem !important;
  width: 100% !important;
}

/* Header stijlen voor betere tekst-zichtbaarheid */
.card-header {
  width: 100% !important;
  padding: 0.75rem 1.25rem !important;
  background-color: #f8f9fa !important;
  color: #343a40 !important;
  border-bottom-color: #dee2e6 !important;
}

/* Behoud witte tekst voor gekleurde achtergronden */
.card-header.bg-primary,
.card-header.bg-secondary,
.card-header.bg-success,
.card-header.bg-danger,
.card-header.bg-warning,
.card-header.bg-info,
.card-header.bg-dark {
  color: #fff !important;
}

/* Specifieke aanpassingen voor headers met themakleur */
.bg-success .text-white,
.bg-primary .text-white,
.bg-secondary .text-white,
.bg-danger .text-white,
.bg-warning .text-white,
.bg-info .text-white,
.bg-dark .text-white {
  color: #fff !important;
}

/* Header container stijl */
.header-container {
  max-width: 100% !important;
  margin-bottom: 1.5rem !important;
}

/* Responsieve aanpassingen */
@media (max-width: 992px) {
  body.bg-light .container .col-lg-8,
  .col-lg-8 {
    max-width: 95% !important;
  }
}

@media (max-width: 768px) {
  body.bg-light .container,
  .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body.bg-light .container .col-lg-8,
  .col-lg-8 {
    max-width: 100% !important;
  }

  .card-body {
    padding: 1rem !important;
  }
}

/* Overige belangrijke resets */
* {
  box-sizing: border-box !important;
}

/* Stijl voor badges */
.badge {
  font-weight: 500 !important;
  padding: 0.4em 0.7em !important;
  border-radius: 0.25rem !important;
}

.badge.bg-light {
  background-color: #f8f9fa !important;
  color: #212529 !important;
  border: 1px solid #dee2e6 !important;
}

/* Antwoordknoppen styling */
.btn-light {
  background-color: #fff !important;
  border-color: #dee2e6 !important;
  color: #212529 !important;
}

.btn-light:hover {
  background-color: #f8f9fa !important;
  border-color: #ced4da !important;
}

.btn-light:active {
  background-color: #e9ecef !important;
  border-color: #ced4da !important;
}

/* Rustige border-radius voor consistentie */
.card,
.btn,
.alert,
.badge {
  border-radius: 0.5rem !important;
}

/* Waarschuwingselementen met contrasterende kleuren */
.bg-warning,
.card-header.bg-warning,
.btn-warning {
  color: #212529 !important;
}

.card-header.bg-warning h1,
.card-header.bg-warning h2,
.card-header.bg-warning h3,
.card-header.bg-warning h4,
.card-header.bg-warning h5,
.card-header.bg-warning h6,
.card-header.bg-warning .h1,
.card-header.bg-warning .h2,
.card-header.bg-warning .h3,
.card-header.bg-warning .h4,
.card-header.bg-warning .h5,
.card-header.bg-warning .h6 {
  color: #212529 !important;
}

/* MathJax Responsive Styling */
.MathJax {
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  text-align: center !important;
}

/* Chemical formulas and special cases */
.mjx-mrow {
  display: inline-block !important;
  max-width: 100% !important;
  overflow-x: auto !important;
}

/* Long chemical equations and reactions - help with wrapping */
mjx-container[jax='CHTML'] {
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  hyphens: auto !important;
  white-space: normal !important;
}

/* Allow formulas to be broken across lines */
mjx-container[jax='CHTML'][display='true'] {
  display: block !important;
  max-width: 100% !important;
  overflow-x: auto !important;
}

/* For reaction arrows + and other operators */
mjx-container[jax='CHTML'] mjx-mo {
  padding: 0 2px !important;
  flex-shrink: 0 !important;
}

/* Scale formulas on small screens */
@media (max-width: 576px) {
  .MathJax {
    font-size: 90% !important; /* Slightly reduce font size on very small screens */
  }

  /* Enable horizontal scrolling for formulas that are still too wide */
  .mjx-container {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-width: 100% !important;
    display: inline-block !important;
    padding: 2px 0 !important;
  }

  /* Formula containers */
  .mjx-chtml {
    max-width: 100% !important;
    overflow-x: auto !important;
    padding: 5px 0 !important;
  }

  /* Make paragraphs and divs that might contain formulas scrollable */
  p,
  div.card-body,
  .answer-section div,
  .lead {
    overflow-x: auto !important;
    max-width: 100% !important;
    padding-bottom: 5px !important;
  }

  /* Chemical formulas with arrow notation */
  mjx-texatom,
  mjx-mo,
  mjx-msubsup {
    display: inline-block !important;
  }

  /* Special handling for reaction arrows */
  mjx-mo[data-c='→'] {
    padding: 0 3px !important;
  }

  /* Multiple choice options with formulas */
  .option-button {
    overflow-x: auto !important;
    white-space: normal !important;
    min-height: 60px !important;
    height: auto !important;
  }
}

/* Ensure formulas inside multiple choice options display properly */
.btn .MathJax {
  display: inline !important;
  vertical-align: middle !important;
}

/* Image styling */
.question-image,
.result-image {
  max-height: 400px;
  width: auto;
  max-width: 100%;
}