/* Lange typen voorval mogen binnen badges en detailrijen doorlopen. */
.ovv-detail-panel span {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}

/* Weergaveschakelaar bovenin de filterbalk: zelfde idioom als de
   SegmentedControl van "Periode", zodat hij als control meeleest. */
.ovv-view-tabs { min-width: 0; }
.ovv-view-switch {
  margin-bottom: 11px;
  padding-bottom: 11px;
  border-bottom: 1px solid #dde5e9;
}
.ovv-view-tabs .mantine-Tabs-list {
  gap: 4px;
  padding: 4px;
  border: 1px solid #d8e2e7;
  border-radius: 9px;
  background: #ffffff;
}
.ovv-view-tabs .mantine-Tabs-tab {
  justify-content: center;
  min-width: 0;
  min-height: 38px;
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 700;
  color: #55646d;
}
.ovv-view-tabs .mantine-Tabs-tab:hover:not([data-active]) { background: #eef3f5; }
.ovv-view-tabs .mantine-Tabs-tab[data-active] { color: #ffffff; }
.ovv-view-tabs .mantine-Tabs-tab:focus-visible {
  outline: 3px solid #2dd287;
  outline-offset: -3px;
}
@media (max-width: 600px) {
  .ovv-view-switch { margin-bottom: 9px; padding-bottom: 9px; }
  .ovv-view-tabs .mantine-Tabs-tab {
    min-height: 34px;
    padding: 6px 8px;
    font-size: 14px;
  }
}
.ovv-general-view {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* De zaakkaarten worden in pages/ongewonevoorvallen/_detail.py opgemaakt met
   dmc en de OD-kleuren. Hieronder staat alleen wat niet in een style-dict kan:
   hover, focus en de kaart die in zijn geheel klikbaar is. De kleuren zijn
   od-lichtblauw (#32b9d2), od-blauw (#00577d) en od-turkoois (#00827d). */
.ovv-record-summary {
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.ovv-record-summary:hover,
.ovv-record-summary:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
  border-color: #32b9d2;
}
.ovv-record-title { transition: color 120ms ease; }
.ovv-record-summary:hover .ovv-record-title { color: #00577d; }

/* De knop in de kaart dekt de hele kaart, zodat een klik ernaast ook opent. */
.ovv-record-open::after { content: ""; position: absolute; inset: 0; }
.ovv-record-open:focus-visible { outline: 2px solid #00827d; outline-offset: 4px; }