/* Custom styles for the Dash App */

/*
  Forceful style for the theme switch to ensure it renders correctly.
*/
.navbar-dark .form-switch .form-check-input {
  border-radius: 2em !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(255,255,255,0.25)'/%3e%3c/svg%3e");
  width: 2.5em;
  height: 1.5em;
  background-color: #495057;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background-position: left center;
  background-repeat: no-repeat;
  margin-left: -2.5em;
  transition: background-position 0.15s ease-in-out;
}

.navbar-dark .form-switch .form-check-input:checked {
  background-position: right center;
}

/*
  Force a consistent base font style for the entire application.
*/
body {
  font-size: 1rem !important;
  font-weight: 400 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/*
  Enforce consistent navbar brand (main title) styling.
*/
.navbar-brand {
  font-size: 2.0rem !important;
  /* Size of the main title */
  font-weight: 400 !important;
}

/*
  Enforce consistent H3 (subpage title) styling.
*/
h3 {
  font-size: 1.75rem !important;
}

/*
  NEW: Enforce consistent H4 (section title) styling.
  This is for titles like "Recommendations".
*/
h4 {
  font-size: 1.5rem !important;
  font-weight: 500 !important;
}