/**
 * table.css
 * Styling für Tabellen in der GearBase-Anwendung.
 * @version 0.6.34
 * @date 2025-04-25
 * @author GearBase
 * @description Definiert das Aussehen von Tabellen (Desktop und Mobil) mit Sortierpfeilen, Einheiten und responsivem Design. Hover-Effekt für Zeilen mit einfachem Aufhellen hinzugefügt (0.6.33). Border-left-Effekt verworfen, einfaches Highlighting beibehalten (0.6.34).
 * @notes Link-Styling hinzugefügt (0.6.27), Zeilenhöhe erhöht, Trennung unauffälliger (0.6.27), Sortierpfeil-Abstände angepasst (0.6.27, 0.6.29), Hover-Farbe für Links auf #b84c4c (0.6.29), Kopfzeile höher und weniger fett (0.6.30), vertikal zentriert mit display: table-cell (0.6.32), Hover-Effekt für Zeilen mit Aufhellen und Klickbarkeit (0.6.33), Border-left entfernt für einfaches Highlighting (0.6.34).
 */

table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
    background: rgba(37, 15, 17, 0.6);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

th, td {
    padding: calc(var(--spacing-sm) + 0px) var(--spacing-md); /* Etwas höher */
    text-align: left;
    border-bottom: 1px solid rgba(221, 221, 221, 0.3); /* Unauffälliger */
    font-size: 0.9em;
}
th.right {
    padding: calc(var(--spacing-sm) + 0px) var(--spacing-md); /* Etwas höher */
    text-align: right;
    border-bottom: 1px solid rgba(221, 221, 221, 0.3); /* Unauffälliger */
    font-size: 0.9em;
}

/* Numerische Zellen: rechtsbündig, Einheiten fluchten */
.num-cell {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    padding-right: 1.8ch;
    padding-left: 1.2ch;
}
.num-prefix {
    color: rgba(255,255,255,0.35);
    font-size: 0.8em;
}

table.none, td.none, tr.none {
  width: 100%;
  border-collapse: collapse;
  margin: 0 auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
td a {
  color: #999;
  text-decoration: none;
}

td a:hover {
  color: #fff;
  text-decoration: underline;
}
td.icon {
  text-align: right;
}
img.icon {
  text-align: right;
  max-width: 16px;
  min-width: 16px;
  margin-right: 5px;
  -webkit-filter: saturate(2.5);filter: saturate(2.5);
}
.icon.inactive {
    opacity: 0.3;
    filter: grayscale(100%);
    -webkit-filter: grayscale(1);filter: grayscale(1);
}
/* Wert→Icon-Anzeige (gender/fill_material als Icon statt Text, v0.74.0) */
.value-icon-wrap {
  display: inline-block;
  line-height: 1;
}
img.value-icon {
  max-width: 18px;
  min-width: 18px;
  height: 18px;
  vertical-align: middle;
  margin-right: 3px;
  -webkit-filter: saturate(1.6);filter: saturate(1.6);
}
[data-tooltip] {
  position: relative;
  cursor: help;
}
[data-tooltip]:before,
[data-tooltip]:after {
  line-height: 1;
  font-size: .9em;
  pointer-events: none;
  position: absolute;
  box-sizing: border-box;
  display: none;
  opacity: 0;
}
[data-tooltip]:before {
  content: "";
  border: 5px solid transparent;
  z-index: 100;
}
[data-tooltip]:after {
  content: attr(data-tooltip);
  text-align: center;
  min-width: 3em;
  max-width: 21em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 6px 8px;
  border-radius: 3px;
  background: #CCCCCC;
  color: #555555;
  z-index: 99;
}
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  display: block;
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
[data-tooltip]:not([data-flow]):before,
[data-tooltip][data-flow="top"]:before {
  bottom: 100%;
  border-bottom-width: 0;
  border-top-color: #CCCCCC;
}
[data-tooltip]:not([data-flow]):after,
[data-tooltip][data-flow="top"]:after {
  bottom: calc(100% + 5px);
}
[data-tooltip]:not([data-flow]):before, [tooltip]:not([data-flow]):after,
[data-tooltip][data-flow="top"]:before,
[data-tooltip][data-flow="top"]:after {
  left: 30%;
  -webkit-transform: translate(-15%, -8px);
          transform: translate(-15%, -8px);
}
[data-tooltip][data-flow="bottom"]:before {
  top: 100%;
  border-top-width: 0;
  border-bottom-color: #CCCCCC;
}
[data-tooltip][data-flow="bottom"]:after {
  top: calc(100% + 5px);
}
[data-tooltip][data-flow="bottom"]:before, [data-tooltip][data-flow="bottom"]:after {
  left: 50%;
  -webkit-transform: translate(-50%, 8px);
          transform: translate(-50%, 8px);
}
[data-tooltip][data-flow="left"]:before {
  top: 50%;
  border-right-width: 0;
  border-left-color: #CCCCCC;
  left: calc(0em - 5px);
  -webkit-transform: translate(-8px, -50%);
          transform: translate(-8px, -50%);
}
[data-tooltip][data-flow="left"]:after {
  top: 50%;
  right: calc(100% + 5px);
  -webkit-transform: translate(-8px, -50%);
          transform: translate(-8px, -50%);
}
[data-tooltip][data-flow="right"]:before {
  top: 50%;
  border-left-width: 0;
  border-right-color: #CCCCCC;
  right: calc(0em);
  -webkit-transform: translate(3px, -50%);
          transform: translate(3px, -50%);
}
[data-tooltip][data-flow="right"]:after {
  top: 50%;
  left: calc(100%);
  -webkit-transform: translate(3px, -50%);
          transform: translate(3px, -50%);
}
[data-tooltip=""]:after, [data-tooltip=""]:before {
  display: none !important;
}

small {
  font-size: 0.7em;
}
.table-wrapper {
    position: relative;
    width: 97%;
    min-height: 200px;
    min-width: 400px;
    overflow-x: auto;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    /* Sanfter Übergang bei Tabellen-Updates */
    transition: opacity 0.18s ease;
}

.table_header {
    color: #e8e0d4;
    background: rgba(40, 28, 20, 0.75);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-transform: none;
    font-size: 1.0em;
    padding: calc(var(--spacing-sm) + 10px) var(--spacing-md);
    position: static;
    top: 0px;
    line-height: normal;
    letter-spacing: 0.03em;
}

.table-link {
    color: white;
    text-decoration: none;
    font-size: 0.8em;
}

.table-link:hover {
    color: #b84c4c; /* Kräftiges Rot */
}
.table-link-btn {
  padding: 3px 10px;
  background: #333330;
  color: #e8dcc8;
  border: 1px solid rgba(200, 168, 122, 0.30); /* dezenter Gold-Rim wie die übrigen Buttons */
  border-radius: 5px; /* kantiger statt Pille (war 15px) */
  cursor: pointer;
  font-size: 0.9em;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.table-link-btn:hover {
  background: var(--category-color, #595B5B); /* SK-Hoverfarbe beibehalten */
  color: var(--category-text-color, white);
  border-color: var(--category-color, #595B5B);
}

/* Loadout-Add-Button in Tabellenzeilen */
.lo-add-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #888;
    font-size: 13px;
    padding: 3px 6px;
    border-radius: 3px;
    transition: color 0.15s, background 0.15s;
    white-space: nowrap;
}
.lo-add-btn:hover {
    color: #c8a87a;
    background: rgba(200,168,122,0.12);
}

/* Favoriten-Icon-Button in Tabelle + Kachel (v0.57.0) */
.gear-fav-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #888;
    font-size: 15px;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 3px;
    transition: color 0.15s, background 0.15s;
}
.gear-fav-btn:hover {
    color: #e0607a;
    background: rgba(224,96,122,0.12);
}
.gear-fav-btn.is-fav {
    color: #e0607a;
}

.table_header span.header-text {
    text-transform: uppercase;
}

.table_header .unit {
    font-weight: bold; /* Einheit fett, v0.6.14 */
    text-transform: none; /* Keine Großschreibung für die Einheit */
    font-size: 0.8em; /* Kleinere Schriftgröße für die Einheit, v0.6.14 */
}

.table_header .sort-icons {
    display: inline-flex;
    gap: 0.5px; /* Pfeile näher zusammen */
    margin: 8px; /* Abstand zur Beschriftung */
    font-size: 1.0em;
}

.table_header .header-text {
    margin-left: 5px; /* Sicherstellen, dass Text nicht zu nah ist */
}

.table_header .sort-icons span {
    cursor: pointer;
    font-size: 1.0em;
    color: #555;
}

.table_header .sort-icons span:hover {
    color: var(--category-color, #595B5B);
}

.table_header .sort-icons span.active {
    color: var(--category-color, #595B5B) !important; /* Gleiche Farbe wie Hover für aktiven Zustand */
}

.warning-icon {
    width: 15px;
    min-width: 15px;
    max-width: 100%;
    transition: filter 0.2s ease;
    cursor: pointer;
}
.warning-icon:hover {
    filter: brightness(1.5); /* Aufhellung beim Hover */
}

.right {
  text-align: right;
}
.left {
  text-align: left;
}

.centered {
    text-align: center;
}

/* Hover-Effekt für Tabellenzeilen */
.table-highlight-no {
  border: 4px solid var(--category-color, #595B5B);
  border-radius: 5px;
}

.table-highlight {
  border: 4px solid var(--category-color, #595B5B);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.table-highlight tbody tr {
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
    /* Semi-transparent background to reveal the blur */
    background-color: rgba(100, 100, 100, 0.1);
    /* Apply blur to the background behind this element */
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px); /* Safari support */
}

.table-highlight tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.2); /* Heller, halbtransparent */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* Subtiler Schatten */
  cursor: pointer; /* Signalisiert Klickbarkeit */
}

/* Klick-Effekt für spätere Interaktion */
.table-highlight tbody tr:active {
  background-color: rgba(255, 255, 255, 0.15); /* Etwas intensiver beim Klick */
}

/* Kopfzeilen vom Hover-Effekt ausnehmen */
.table-highlight thead tr:hover {
  background-color: inherit;
  cursor: default;
}

@media (max-width: 768px) {
    table {
        display: block;
        border: 0;
    }

    thead {
        display: none;
    }

    tr {
        display: flex;
        flex-direction: column;
        margin-bottom: var(--spacing-md);
        border: 1px solid #ddd;
        background: rgba(255, 255, 255, 0.9);
    }

    td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--spacing-xs) var(--spacing-sm);
        border: none;
        border-bottom: 1px solid #eee;
        text-align: right;
    }

    td:last-child {
        border-bottom: 0;
    }

    td:before {
        content: attr(data-label);
        font-weight: bold;
        text-transform: uppercase;
        color: #333;
        text-align: left;
        flex: 1;
    }

    td.centered {
        justify-content: space-between;
    }

    .pagination {
        text-align: center;
        margin-top: var(--spacing-md);
    }

    .pagination a, .pagination span {
        display: inline-block;
        padding: var(--spacing-xs) var(--spacing-sm);
        margin: 0 2px;
        text-decoration: none;
        color: #1976d2;
        border: 1px solid #ddd;
        border-radius: 3px;
    }

    .pagination .current {
        background-color: #1976d2;
        color: white;
        border: 1px solid #1976d2;
    }

    .pagination a:hover {
        background-color: #ddd;
    }

    .table-highlight tbody tr:hover {
      background-color: inherit; /* Kein Hover-Effekt auf Touch-Geräten */
      box-shadow: none;
      cursor: default;
    }
}

@media (min-width: 769px) {
    .table_header {
        top: 100px; /* Abstand für den Banner (100px Höhe auf Desktop) */
    }
}

/* === Gear-Status-Badge (v0.45.0) === */
.gear-status-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 0.65em;
    font-weight: 600;
    line-height: 1.3;
    color: #f5f0e6;
    background-color: #444;
    border: 1px solid rgba(255, 255, 255, 0.15);
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.gear-status-badge--new-available {
    background-color: #2F5927;
    border-color: #6ab86a;
    color: #e8f5e8;
}

.gear-status-badge--end-of-life {
    background-color: #68675e;
    border-color: #8a8a80;
    color: #f0f0e8;
}

.gear-status-badge--used-only {
    background-color: #D68A1A;
    border-color: #f0a838;
    color: #1c1c1a;
}

.gear-status-badge--discontinued {
    background-color: #991515;
    border-color: #c93030;
    color: #ffeaea;
}

.gear-status-badge--has-successor {
    background-color: #6B4E31;
    border-color: #c8a87a;
    color: #f5e8d0;
}

/* Im Detail-Modal: Badge größer + zentriert */
.gd-status {
    margin: 6px 0 6px 0;
}
.gd-status .gear-status-badge {
    font-size: 0.9em;
    padding: 3px 10px;
    border-radius: 12px;
}

/* === Gewichtsverifikation (Waage-Icon) v0.48.0 === */
.weight-verified-icon {
    display: inline-block;
    margin-left: 4px;
    font-size: 0.9em;
    color: #c8a87a;
    cursor: help;
    vertical-align: baseline;
}

/* enum_icon-Header: Wert-Icons statt langem Namen (z. B. Geschlecht) */
.header-value-icons {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.header-value-icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

/* === Trenner „Ohne Angabe im gewählten Filter" (v0.94.0) ===
   Setzt Passagier-Einträge (kein Wert im aktiven Filter) unter den echten
   Treffern ab. Zeile ist kein Datensatz → nicht klickbar, kein Hover. */
.table-highlight tbody tr.table-divider td {
    padding: 14px var(--spacing-md);
    text-align: center;
    font-size: 0.7em;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
    background: rgba(0, 0, 0, 0.22);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.table-highlight tbody tr.table-divider:hover {
    background-color: inherit;
    box-shadow: none;
    cursor: default;
}
.table-highlight tbody tr.table-divider:hover td {
    background: rgba(255, 255, 255, 0.03);
}