/*
 * Insurensa table styling.
 *
 * Paired with the `DataTable` component: the toolbar, sort indicators,
 * pagination and loading placeholders for every data grid in both portals.
 *
 * Self-hosted rather than pulled from a CDN, which is what lets the
 * Content-Security-Policy stay at `style-src 'self'`.
 */

.dataTables_wrapper { position: relative; clear: both; }

.dataTables_wrapper .row { display: flex; flex-wrap: wrap; margin: 0 -8px; align-items: center; }
.dataTables_wrapper .row > [class^='col-'] { padding: 0 8px; }
.dataTables_wrapper .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 768px) {
  .dataTables_wrapper .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .dataTables_wrapper .col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .dataTables_wrapper .col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .dataTables_wrapper .col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
}

.dt-buttons { margin-bottom: 12px; }
.dt-buttons .btn { margin-right: 4px; }

.dataTables_filter { text-align: right; margin-bottom: 12px; }
.dataTables_filter label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 400; white-space: nowrap; }
.dataTables_filter input { display: inline-block; width: auto; min-width: 180px; }

.dataTables_length { display: inline-block; margin-right: 16px; }
.dataTables_length label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 400; white-space: nowrap; }
.dataTables_length select { display: inline-block; width: auto; }

.dataTables_info { display: inline-block; padding-top: 8px; color: #6c757d; font-size: 13px; }

.dataTables_paginate { text-align: right; margin-top: 8px; }
.dataTables_paginate .pagination { justify-content: flex-end; margin-bottom: 0; }
.dataTables_paginate .page-link { cursor: pointer; border: 0; background: none; }
.dataTables_paginate .page-item.disabled .page-link { cursor: default; }

/* Sort indicators, matching the DataTables bs4 build. */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
  cursor: pointer;
  position: relative;
  padding-right: 26px;
  user-select: none;
}
table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  line-height: 1;
  opacity: 0.35;
  content: '\2195';
}
table.dataTable thead th.sorting_asc::after { content: '\2191'; opacity: 0.9; }
table.dataTable thead th.sorting_desc::after { content: '\2193'; opacity: 0.9; }

table.dataTable td.dataTables_empty { padding: 32px 12px; color: #6c757d; }

/* Loading placeholder, replacing the theme's jQuery spinner. */
.dt-skeleton {
  display: block;
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, #eceef1 25%, #f6f7f8 50%, #eceef1 75%);
  background-size: 200% 100%;
  animation: dt-shimmer 1.3s infinite;
}
@keyframes dt-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dt-skeleton { animation: none; }
}

.property-list th { white-space: nowrap; }
.yellow-color { color: #FFD700; }

/* --- Column behaviour -----------------------------------------------------
 *
 * Identifiers, dates and money read as single units; letting them wrap turned
 * "02.09.2026, 21:25" into two ragged lines and split reference codes across
 * rows, which made the leads table hard to scan.
 */
td.nowrap,
th.nowrap {
  white-space: nowrap;
}

/* Long free text (emails, company names) may wrap, but must not force the
   table wider than its container. */
td.wrap-anywhere {
  overflow-wrap: anywhere;
}

/* --- Stat tiles -----------------------------------------------------------
 * Equal height regardless of how long the meta line is, so a row of tiles
 * lines up instead of stepping.
 *
 * Scoped to `.widget-content`, which only the stat tile carries — an earlier
 * broader selector also caught ordinary content cards and stretched them to
 * the height of the tallest sibling, leaving large empty panels.
 */
.row > [class*='col-'] > .card.widget-content {
  height: calc(100% - 1rem);
}

/* --- Property lists -------------------------------------------------------
 * Labels stay on one line; values wrap. A long single word — an insurance
 * type like "Berufsunfähigkeitsversicherung" — otherwise pushes the card
 * past the viewport.
 */
.property-list th {
  white-space: nowrap;
  width: 42%;
}
.property-list td {
  /* The document declares lang="de", so the browser breaks compounds like
     "Berufs-unfähigkeits-versicherung" at real syllable boundaries. The
     anywhere fallback catches strings it cannot hyphenate, such as long
     email addresses. */
  hyphens: auto;
  overflow-wrap: anywhere;
}

/* Detail tables must never widen their card. */
.main-card table,
.card table {
  max-width: 100%;
}

/* --- Shell overrides ------------------------------------------------------
 *
 * These must beat the theme, so they live here rather than in each app's own
 * stylesheet: this file is <link>ed after the theme, whereas Next injects an
 * imported globals.css *before* those tags — which is why the sidebar logo
 * was rendering at its natural 160px and covering the header.
 *
 * Both shells render the wordmark as a real <img>, so the theme's
 * background-image version is redundant.
 */
.app-header__logo .logo-src,
.app-sidebar .logo-src {
  height: 60px;
  width: 100%;
  background: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 10%;
}

/* The sidebar's own logo slot is empty in our markup; collapse it so it does
   not reserve 160px of blank space above the menu. */
.app-sidebar > .app-header__logo {
  display: none;
}

/* --- Stat tiles: long labels ---------------------------------------------
 * "Abschlussquote" beside a 28px number overran the last tile by 2px. Letting
 * the label wrap and giving the number room keeps every tile inside its card.
 */
.widget-content .widget-heading {
  /* German compounds ("Abschlussquote") have no natural break, so let the
     browser hyphenate at syllable boundaries rather than snapping mid-word.
     lang="de" on <html> is what makes this correct rather than arbitrary. */
  hyphens: auto;
  line-height: 1.25;
}
.widget-content .widget-numbers {
  white-space: nowrap;
  padding-left: 10px;
  font-size: 1.6rem;
}
.widget-content .widget-content-right {
  flex-shrink: 0;
}