*.external::after {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-left: 0.2em;
  background-color: currentColor;

  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='black' d='M432 320h-32a16 16 0 00-16 16v112H64V128h144a16 16 0 0016-16V80a16 16 0 00-16-16H48a48 48 0 00-48 48v352a48 48 0 0048 48h352a48 48 0 0048-48V336a16 16 0 00-16-16zM488 0H360c-21.37 0-32.05 25.91-17 41l35.73 35.73L135 320.37a24 24 0 000 34L157.67 377a24 24 0 0034 0l243.61-243.68L471 169c15 15 41 4.5 41-17V24a24 24 0 00-24-24z'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;

  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='black' d='M432 320h-32a16 16 0 00-16 16v112H64V128h144a16 16 0 0016-16V80a16 16 0 00-16-16H48a48 48 0 00-48 48v352a48 48 0 0048 48h352a48 48 0 0048-48V336a16 16 0 00-16-16zM488 0H360c-21.37 0-32.05 25.91-17 41l35.73 35.73L135 320.37a24 24 0 000 34L157.67 377a24 24 0 0034 0l243.61-243.68L471 169c15 15 41 4.5 41-17V24a24 24 0 00-24-24z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.page-wrap {
  padding-top: 1rem;
  padding-bottom: 2rem;
}

.heatmap-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: start;
}

.heatmap-sidebar {
  display: block;
}
.heatmap-main {
  display: block;
}

/* Expert mode: controls marked .expert-only are hidden for standard users.
   The expert-mode switch lives in the navigation drawer. When it is off,
   the top-level app frame div (#app-frame) carries the class "standard-view",
   which activates this rule app-wide. */
.standard-view .expert-only {
  display: none;
}

@media (min-width: 1200px) {
  .heatmap-grid {
    grid-template-columns: 360px minmax(720px, 1fr);
  }
  .heatmap-sidebar {
    position: sticky;
    top: 12px;
  }
}

.heatmap-card { overflow: hidden; }
.heatmap-inner {
  display: flex;
  flex-direction: column;
}
.heatmap-graph {
  flex: 1 1 auto;
  width: 100%;
}

.controls-box {}
.controls-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.controls-btn {
  white-space: nowrap;
  flex: 0 0 auto;
  min-width: 5rem;
}
.slider-wrap {
  flex: 1 1 auto;
  min-width: 220px;
}
.hour-slider { width: 100%; }

.mantine-Select-option > span,
.mantine-Combobox-option > span {
  white-space: pre-wrap !important;
}
.mantine-Select-option > span::first-line {
  font-weight: 600;
}

/* Check mark of the selected option. The species select renders its options
 * itself (assets/dmc_functions.js) to get a per-option tooltip, which means
 * re-rendering this icon too -- matching Mantine's own size and opacity. */
.mantine-Select-option > svg.select-check-icon {
  width: 0.7rem;
  height: 0.7rem;
  flex: 0 1 auto;
  opacity: 0.4;
}

.mantine-Input-input > span,
.mantine-Select-input > span {
  white-space: pre-wrap !important;
}
.mantine-Select-input > span::first-line {
  font-weight: 600;
}


/* copy from validation website */

.headline{
    color: #023d6b;
    font-size: 30px;
}

#footer{
    text-align: center;
}

#footer>*{
    margin: 0 20px;
}

.fzblue{
    color: #023d6b;
}

.link{
    color: #023d6b;
    text-decoration: none;
}

.link:hover{
    text-decoration: underline;
}

.layout-section{
    padding: 10px;
    /*background-color: #f0f0f0;*/
    /*border: 1px solid #ccc;*/
    /*display: flex;*/
    /*justify-content: center;*/
    /*align-items: center;*/
}

.options-flex {
    display: flex;
    flex-wrap: wrap; /* Elemente umbrechen, wenn nötig */
    gap: 10px;
    width: 100%;
    height: 100%;
    justify-content: space-around;
}

.dropdown{
    zIndex: 1;
}

.paper-big{
    /*border: 1px solid #ccc;*/
    border-radius: 15px;
    padding: 10px;
    background-color: white;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 3px 15px 0px;
}

.paper-small{
    /*border: 1px solid #ccc;*/
    border-radius: 10px;
    padding: 5px;
    background-color: white;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 2px 7px 0px;
}

/* Empty-state notice for the validation page: shown whenever the filters
   match no stations or the measurement database cannot be reached. Collapses
   to nothing when the callback clears it, so it costs no space in the normal
   case. */
.status-banner:empty{
    display: none;
}

.status-banner{
    margin: 10px 10px 0 10px;
    padding: 10px 15px;
    border-radius: 15px;
    border-left: 4px solid #023d6b;
    background-color: #eef3f8;
    color: #023d6b;
}

#statistic-parent{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

#mean-div{ grid-area: 1 / 1 / 3 / 3; }
#rmse-div{ grid-area: 1 / 3 / 2 / 5; }
#corr-div{ grid-area: 2 / 3 / 3 / 5; }
#bias-div{ grid-area: 1 / 5 / 2 / 7; }
#mmb-div { grid-area: 2 / 5 / 3 / 7; }

/* The meteochemogram mini-map (MapLibre via Plotly) renders without the
   maplibre-gl stylesheet, so its control containers lose their absolute
   positioning and the initially expanded attribution overflows below the
   tiny map into the time series. Anchor the controls inside the map and
   collapse the attribution to a small (i) toggle; the full OSM credit
   appears on hover/focus, which the OSM attribution guidelines permit
   for small maps. */
#meteochemogram-plot .maplibregl-ctrl-bottom-right {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 2;
}

#meteochemogram-plot .maplibregl-ctrl-attrib {
  margin: 0;
  text-align: right;
}

#meteochemogram-plot .maplibregl-ctrl-attrib-button {
  list-style: none;
  cursor: pointer;
  display: block;
  width: 16px;
  height: 16px;
  margin-left: auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  text-align: center;
}

#meteochemogram-plot .maplibregl-ctrl-attrib-button::marker {
  content: "";
}

#meteochemogram-plot .maplibregl-ctrl-attrib-button::after {
  content: "i";
  font: italic bold 11px/16px serif;
  color: #333;
}

#meteochemogram-plot .maplibregl-ctrl-attrib-inner {
  display: none;
}

#meteochemogram-plot .maplibregl-ctrl-attrib:hover .maplibregl-ctrl-attrib-inner,
#meteochemogram-plot .maplibregl-ctrl-attrib:focus-within .maplibregl-ctrl-attrib-inner {
  display: block;
  white-space: nowrap;
  font-size: 9px;
  line-height: 14px;
  background: rgba(255, 255, 255, 0.9);
  padding: 0 4px;
  border-radius: 3px 0 0 0;
}