/*
 * Global Responsive Styles
 * Extracted from standardized_result_base.html to apply site-wide.
 */

/* =================================
   PREVENT LAYOUT BREAKS & OVERFLOW
   ================================= */
* {
  /* Ensure long words do not overflow their container */
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Prevent horizontal scrolling on body only */
body {
  overflow-x: hidden;
}

/* Don't hide overflow on containers - this breaks dropdowns */
/* .container and .container-fluid should not have overflow-x: hidden */

/* =================================
   GENERAL RESPONSIVE CONTENT
   ================================= */
@media (max-width: 768px) {
  /* Make all images responsive by default */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Ensure Bootstrap columns stack with a bottom margin on mobile */
  .row > [class*="col-"] {
    margin-bottom: 1rem;
  }

  /* Standardize responsive list padding */
  ul, ol {
    padding-left: 1.5rem;
  }

  /* Allow code blocks to scroll horizontally on mobile */
  pre {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Help code elements wrap better */
  code {
    word-break: break-word;
  }

  /* Make Bootstrap modals take up more screen width on mobile */
  .modal-dialog {
    margin: 0.5rem;
    max-width: calc(100% - 1rem);
  }

  /* Slightly smaller badges on mobile */
  .badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
  }

  /* Slightly smaller alerts on mobile */
  .alert {
    font-size: 0.875rem;
    padding: 0.75rem;
  }
}

/* =================================
   GENERAL LAYOUT ADJUSTMENTS
   ================================= */
@media (max-width: 576px) {
  /* Reduce padding on Bootstrap cards for very small screens */
  .card-body {
    padding: 1rem;
  }

  /* Reduce button size for very small screens */
  .btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
  }
}