/* =======================================================================================
   DataTables – Modern v2 (Top-Bar, Tabelle, Info, Pagination)
   Brandfarbe: #073453
   ======================================================================================= */

/* ------------------------------------ Design Tokens ----------------------------------- */
:root{
  --dt-row-pad-y: 14px;
  --dt-row-pad-x: 16px;
  --dt-divider: #e5e7eb;
  --dt-head-bg: rgba(250,250,250,.75); /* leicht transparent */
  --dt-head-text:#6b7280;
  --dt-text:     #0f172a;
  --dt-muted:    #6b7280;
  --dt-hover:    #f8fafc;
  --dt-primary:  #073453;
  /* --dt-primary-hover: oklch(0.4136 0.1296 250.63); */
  --dt-primary-hover: #0d6192;
  --dt-focus:    rgba(7,52,83,.16);
  --dt-radius:   14px;
  --dt-shadow:   0 6px 20px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.04);
}

/* ---------------------------------- Optional Wrapper ----------------------------------- */
.dataTables_wrapper .dt-card{
  background: linear-gradient(180deg, #fff, #fff) padding-box;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--dt-radius);
  overflow: clip;
  box-shadow: var(--dt-shadow);
}

/* Full-bleed (optional) */
.dt-bleed{ margin-left:-1.5rem; margin-right:-1.5rem; }
@media (min-width: 1024px){
  .dt-bleed{ margin-left:-2rem; margin-right:-2rem; }
}

/* ------------------------------------ Wrapper Base ------------------------------------- */
.dataTables_wrapper{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--dt-text);
}

/* ------------------------------------ TOP-Leiste --------------------------------------- */
.dataTables_wrapper .top{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; margin-bottom:1rem;
}
.dataTables_wrapper .top .dataTables_length,
.dataTables_wrapper .top .dataTables_filter{ float:none !important; margin:0 !important; }

.dataTables_wrapper .dataTables_length{
  font-size:.92rem; color:var(--dt-muted);
}
.dataTables_wrapper .dataTables_length label{
  display:flex; align-items:center; gap:.5rem; margin:0; font-weight:500;
}
.dataTables_wrapper .dataTables_length select{
  padding:.5rem .75rem; font-size:.88rem; height:2.25rem; line-height:1.5;
  border:1px solid var(--dt-divider); border-radius:.55rem; background:#fff; color:#374151; outline:none;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.dataTables_wrapper .dataTables_length select:focus{
  border-color: var(--dt-primary); box-shadow: 0 0 0 4px var(--dt-focus);
}

/* Search */
.dataTables_wrapper .dataTables_filter{
  font-size:.92rem; color:var(--dt-muted);
  display:flex; align-items:center; gap:.5rem;
}
.dataTables_wrapper .dataTables_filter label{ display:flex; align-items:center; gap:.5rem; margin:0; font-weight:500; }
.dataTables_wrapper .dataTables_filter input[type="search"]{
  width:18rem; max-width:100%;
  padding:.55rem .8rem; font-size:.9rem; height:2.25rem;
  border:1px solid var(--dt-divider); border-radius:.55rem; background:#fff; color:#111827; outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, transform .08s ease;
}
.dataTables_wrapper .dataTables_filter input[type="search"]:focus{
  border-color: var(--dt-primary); box-shadow: 0 0 0 4px var(--dt-focus);
}

/* ------------------------------------ Tabelle ------------------------------------------ */
.dataTables_wrapper table.dataTable{
  width:100%; border-collapse:separate; border-spacing:0; background:#fff;
  font-size:.93rem; color:var(--dt-text);
}

/* Sticky Header (glasig) */
.dataTables_wrapper table.dataTable thead th{
  position: sticky; top:0; z-index:2;
  background: var(--dt-head-bg);
  -webkit-backdrop-filter: saturate(1.2) blur(8px);
  backdrop-filter: saturate(1.2) blur(8px);
  color: var(--dt-head-text);
  text-transform: uppercase; letter-spacing:.04em;
  font-weight:600; font-size:.72rem;
  white-space:nowrap;
  padding:12px var(--dt-row-pad-x);
  border-bottom:1px solid rgba(0,0,0,.06);
  padding-right: 20px; /* Platz für Sort-Indikator */
}

/* Body-Zellen */
.dataTables_wrapper table.dataTable tbody td{
  padding: var(--dt-row-pad-y) var(--dt-row-pad-x);
  border-bottom:1px solid var(--dt-divider);
  vertical-align: middle; white-space: nowrap; color:#374151;
}

/* Zebra + Hover mit „ink highlight“ */
.dataTables_wrapper table.dataTable tbody tr:nth-child(even){ background:#fcfcfc; }
.dataTables_wrapper table.dataTable tbody tr{
  transition: background-color .16s ease, box-shadow .16s ease, transform .06s ease;
}
.dataTables_wrapper table.dataTable tbody tr:hover{
  background: radial-gradient(600px 80px at var(--hover-x,50%) 100%, rgba(7,52,83,.06), transparent 70%),
              var(--dt-hover);
  cursor:pointer;
}
.dataTables_wrapper table.dataTable tbody tr:active{ transform: translateY(1px); }

/* JS-Hook (optional) für schönes Ink-Hover) */
[data-table-ink] tbody tr:hover{
  --hover-x: var(--mouse-x, 50%);
}

/* Leere-Zeile */
.dataTables_empty{ padding: 1rem; text-align:center; color: var(--dt-muted); }

/* Sortier-Indikatoren minimalistischer Chevron */
.dataTables_wrapper table.dataTable thead th.sorting,
.dataTables_wrapper table.dataTable thead th.sorting_asc,
.dataTables_wrapper table.dataTable thead th.sorting_desc{
  position: relative; cursor: pointer; user-select:none;
}
.dataTables_wrapper table.dataTable thead th.sorting::after,
.dataTables_wrapper table.dataTable thead th.sorting_asc::after,
.dataTables_wrapper table.dataTable thead th.sorting_desc::after{
  content:""; position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; opacity:.9;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.05));
}
.dataTables_wrapper table.dataTable thead th.sorting::after{      border-top:6px solid #a1a1aa; }
.dataTables_wrapper table.dataTable thead th.sorting_asc::after{  border-bottom:6px solid var(--dt-primary); }
.dataTables_wrapper table.dataTable thead th.sorting_desc::after{ border-top:6px solid var(--dt-primary); }

/* Avatare/Badges (optional) */
.dataTables_wrapper table.dataTable td img.dt-avatar{
  width:36px; height:36px; border-radius:9999px; object-fit:cover; display:block;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.dataTables_wrapper table.dataTable td .dt-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.25rem .55rem; border:1px solid var(--dt-divider);
  border-radius:9999px; font-size:.78rem; color:#374151; background:#fff;
}

/* Tastatur-Fokus */
.dataTables_wrapper table.dataTable tbody tr:focus-within{
  outline:2px solid var(--dt-focus); outline-offset:-2px;
  scroll-margin: 6px;
}

/* ------------------------------------ Info & Bottom-Bar -------------------------------- */
.dataTables_wrapper .dataTables_info{
  margin:.75rem 0; color: var(--dt-muted); font-size:.92rem;
}
.dataTables_wrapper .bottom{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:1rem; margin-top:1rem;
}

/* ------------------------------------ Pagination (Pills) -------------------------------- */
.dataTables_wrapper .dataTables_paginate{
  margin-left:auto;
  border:1px solid var(--dt-divider);
  border-radius:.75rem;
  padding:.4rem .6rem;
  display:flex; gap:.35rem; align-items:center; background:#fff;
}
.dataTables_wrapper .dataTables_paginate .paginate_button{
  background:#fff !important; color:#475569 !important;
  padding:.42rem .7rem; border-radius:.55rem;
  margin:0; font-weight:600; border:1px solid transparent !important;
  text-decoration:none; cursor:pointer; font-size:.9rem;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .06s ease;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  background:#f3f4f6 !important; color:#0f172a !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:active{ transform: translateY(1px); }

/* Aktive Seite mit weichem Glow */
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background: var(--dt-primary) !important; color:#fff !important;
  border:1px solid var(--dt-primary) !important; box-shadow: 0 0 0 4px var(--dt-focus);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
  background: var(--dt-primary-hover) !important; border-color: var(--dt-primary-hover) !important;
}

/* Disabled */
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled{
  color:#9ca3af !important; background:#fff !important; cursor:not-allowed; opacity:.55;
}
.dataTables_wrapper .dataTables_paginate .ellipsis{ color:#9ca3af; margin:0 .25rem; pointer-events:none; }

/* ------------------------------------ Utility: Kompakter Modus -------------------------- */
.dataTables_wrapper.dt-compact table.dataTable tbody td{ padding: 10px 12px; }
.dataTables_wrapper.dt-compact table.dataTable thead th{ padding:10px 12px; }
.dataTables_wrapper.dt-compact .dataTables_paginate .paginate_button{ padding:.32rem .55rem; font-size:.85rem; }

/* ------------------------------------ Kleinigkeiten ------------------------------------ */
.dataTables_wrapper .top:before,
.dataTables_wrapper .top:after,
.dataTables_wrapper .bottom:before,
.dataTables_wrapper .bottom:after{ content:none !important; }

@media (max-width: 640px){
  .dataTables_wrapper .top{ gap:.75rem; }
  .dataTables_wrapper .dataTables_filter input[type="search"]{ width:12rem; }
  .dataTables_wrapper .dataTables_paginate{ padding:.35rem .5rem; }
  .dataTables_wrapper .dataTables_paginate .paginate_button{ padding:.32rem .55rem; font-size:.85rem; }
}

/* ------------------------------------ Motion Preferences --------------------------------*/
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}