/**
 * @file
 * Tabellen-Styling für Nordseenest
 */

/* ==========================================================================
   Basis-Tabellen
   ========================================================================== */

table,
.table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin-bottom: var(--nn-space-lg);
  background-color: var(--nn-white);
  border-radius: 0 !important;
  box-shadow: var(--nn-shadow-sm);
}

/* Tabellen-Header */
table thead th,
table th,
.table thead th,
.table th {
  background-color: var(--nn-primary) !important;
  color: var(--nn-white) !important;
  font-weight: var(--nn-font-weight-semibold);
  text-align: left;
  padding: var(--nn-space-md);
  font-size: var(--nn-font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: none !important;
}

/* Header-Zeile: Hintergrund zurücksetzen */
table thead tr,
.table thead tr {
  background: transparent !important;
  border: none !important;
}

/* Keine abgerundeten Ecken - sauberes rechteckiges Design */

/* Tabellen-Zellen */
table td {
  padding: var(--nn-space-md);
  border-bottom: 1px solid var(--nn-gray);
  vertical-align: top;
}

table tbody tr:last-child td {
  border-bottom: none;
}

/* Zebra-Stripes */
table tbody tr:nth-child(even),
.table tbody tr:nth-child(even) {
  background-color: var(--nn-secondary-light) !important;
}

table tbody tr:nth-child(odd),
.table tbody tr:nth-child(odd) {
  background-color: var(--nn-white) !important;
}

/* Hover-Effekt */
table tbody tr:hover,
.table tbody tr:hover {
  background-color: var(--nn-secondary) !important;
}

/* ==========================================================================
   Preis-Tabellen (spezifisch)
   ========================================================================== */

/* Preise rechtsbündig */
table td:last-child {
  text-align: right;
  font-weight: var(--nn-font-weight-medium);
  white-space: nowrap;
}

/* Erste Spalte (Beschreibung) */
table td:first-child {
  color: var(--nn-text);
}

/* ==========================================================================
   Tabellen ohne Header
   ========================================================================== */

table:not(:has(thead)) tbody tr:first-child td {
  background-color: var(--nn-primary);
  color: var(--nn-white);
  font-weight: var(--nn-font-weight-semibold);
}

/* Fallback für Browser ohne :has() Support */
table.no-header tbody tr:first-child td {
  background-color: var(--nn-primary);
  color: var(--nn-white);
  font-weight: var(--nn-font-weight-semibold);
}

/* ==========================================================================
   Beige Card-Style Tabellen
   ========================================================================== */

.node--type-page table {
  background-color: var(--nn-secondary-light);
  border: 1px solid var(--nn-secondary-dark);
}

.node--type-page table tbody tr:nth-child(even) {
  background-color: var(--nn-white) !important;
}

.node--type-page table tbody tr:nth-child(odd) {
  background-color: var(--nn-secondary-light) !important;
}

.node--type-page table tbody tr:hover {
  background-color: rgba(35, 78, 112, 0.05);
}

/* ==========================================================================
   Responsive Tabellen
   ========================================================================== */

@media (max-width: 768px) {
  table {
    font-size: var(--nn-font-size-sm);
  }
  
  table th,
  table td {
    padding: var(--nn-space-sm);
  }
  
  /* Stack-Layout für sehr kleine Bildschirme */
  table.responsive-stack {
    display: block;
  }
  
  table.responsive-stack thead {
    display: none;
  }
  
  table.responsive-stack tbody,
  table.responsive-stack tr,
  table.responsive-stack td {
    display: block;
    width: 100%;
  }
  
  table.responsive-stack tr {
    margin-bottom: var(--nn-space-md);
    border: 1px solid var(--nn-secondary-dark);
    border-radius: var(--nn-radius);
  }
  
  table.responsive-stack td {
    text-align: left !important;
    border-bottom: 1px solid var(--nn-gray);
  }
  
  table.responsive-stack td:last-child {
    border-bottom: none;
    font-weight: var(--nn-font-weight-bold);
    background-color: var(--nn-secondary-light);
  }
}