/* =========================================
   Downloads Table (standalone, no table.css)
   Uses :root variables, no font changes
   ========================================= */

.technical-data-table {
  width: 100%;
  margin-top: 2rem;
  margin-bottom: 4rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Table */
.tech-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: transparent;
}

/* Header */
.tech-table thead th {
  background: rgba(255, 255, 255, 0.07);  /* leicht heller als schwarz */
  color: var(--color-text);
  font-weight: 800;

  padding: 1.25rem 1rem;                  /* höher wie im Foto */
  line-height: 1.2;

  border: 1px solid var(--color-border);
  white-space: nowrap;
}

/* Cells */
.tech-table td {
  color: var(--color-text);
  padding: 1.1rem 1rem;
  vertical-align: top;
  border: 1px solid var(--color-border);
  background: transparent;
}

/* Hover über Zeilen: dunkelgrau (nicht rot) */
.tech-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.06);
}

/* Selected row per hash: rot und bleibt rot */
.tech-table tbody tr.row-selected td {
  background: var(--color-highlight);
  color: var(--color-text);
}

/* Links/Buttons in selected row bleiben weiß */
.tech-table tbody tr.row-selected a,
.tech-table tbody tr.row-selected button {
  color: var(--color-text);
}

/* -----------------------------------------
   Column helpers (optional, nur Layout)
   ----------------------------------------- */
.tech-table td.col-version,
.tech-table td.col-date,
.tech-table td.col-size {
  white-space: nowrap;
}

/* -----------------------------------------
   Version Link
   ----------------------------------------- */
.version-link {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 800;
}

.version-link:hover {
  opacity: 0.85;
}

/* -----------------------------------------
   Read link (nur unterstrichen)
   ----------------------------------------- */
.read-link {
  display: inline-block;
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  font-weight: 800;

  border: none;
  background: transparent;
  padding: 0;
}

.read-link:hover {
  opacity: 0.85;
}

/* -----------------------------------------
   Download Button
   ----------------------------------------- */
.download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0.6rem 1rem;
  border-radius: 999px;

  border: 2px solid var(--color-button-border);
  background: transparent;
  color: var(--color-text);

  font-weight: 900;
  text-decoration: none;

  transition: background 0.15s ease, color 0.15s ease, transform 0.08s ease;
}

.download-btn:hover {
  background: var(--color-text); /* weiß */
  color: var(--color-background); /* schwarz */
  transform: translateY(-1px);
}

.download-btn:active {
  transform: translateY(0);
}

/* Wenn row-selected rot ist: Button bleibt gut lesbar */
.tech-table tbody tr.row-selected .download-btn {
  border-color: var(--color-text);
}

/* -----------------------------------------
   Popover (Versionshinweise)
   ----------------------------------------- */
.tech-table td.col-notes {
  position: relative;
}

.notes-popover {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;

  width: min(520px, 75vw);
  background: rgba(0, 0, 0, 0.92);
  color: var(--color-text);

  border: 1px solid var(--color-border);
  border-radius: 12px;

  padding: 12px 12px 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);

  z-index: 50;
  display: none;
}

.notes-popover.is-open { display: block; }

.notes-popover::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 18px;

  width: 14px;
  height: 14px;

  background: rgba(0, 0, 0, 0.92);
  border-left: 1px solid var(--color-border);
  border-top: 1px solid var(--color-border);
  transform: rotate(45deg);
}

.notes-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.notes-popover-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 900;
}

.notes-popover-close {
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
}

.notes-popover-close:hover {
  background: rgba(255, 255, 255, 0.06);
}

.notes-popover pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.45;
  /* keine Font-Änderung (du wolltest Schrift nicht ändern) */
}

/* -----------------------------------------
   Hash selection: scroll offset + flash
   ----------------------------------------- */
.tech-table tr[id] {
  scroll-margin-top: 110px; /* anpassen falls needed */
}

/* kurzer roter Rahmen-Flash (wie du es wolltest) */
@keyframes rowFlash {
  0%   { outline: 2px solid var(--color-highlight); outline-offset: -2px; }
  100% { outline: 0px solid transparent; outline-offset: -2px; }
}

.tech-table tbody tr.row-flash {
  animation: rowFlash 900ms ease-out;
}

/* -----------------------------------------
   Mobile: keep single table + scroll
   ----------------------------------------- */
@media screen and (max-width: 768px) {
  .tech-table {
    min-width: 900px; /* damit Spalten nicht “quetschen” */
  }

  .notes-popover {
    width: min(560px, 85vw);
  }
}


/* =========================================
   Responsive: mobile-friendly
   - single table
   - hide Download column on small screens
   ========================================= */

@media screen and (max-width: 768px) {
  /* Wrapper scrollt horizontal */
  /* Wrapper IMMER scrollbar wenn nötig */
.technical-data-table {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;                 /* <-- immer */
  -webkit-overflow-scrolling: touch;
}

  /* Download-Spalte ausblenden (6. Spalte) */
  .tech-table thead th:nth-child(6),
  .tech-table tbody td:nth-child(6) {
    display: none;
  }

  /* etwas kompaktere Abstände */
  .tech-table thead th {
    padding: 0.9rem 0.75rem;
  }

  .tech-table td {
    padding: 0.85rem 0.75rem;
  }

  /* Popover etwas breiter/handyfreundlicher */
  .notes-popover {
    width: min(560px, 88vw);
  }
}


/* Tabelle darf breiter sein als Container -> triggert Scroll */
.tech-table {
  min-width: 980px;                 /* <-- sorgt dafür, dass es früher scrollt */
}

/* Frühere Breakpoints (damit nichts abgeschnitten wirkt) */
@media screen and (max-width: 1200px) {
  .tech-table { min-width: 980px; } /* scrollt praktisch immer bei kleineren Viewports */
}

@media screen and (max-width: 992px) {
  .tech-table { min-width: 920px; }
}

/* Handy: Download-Spalte ausblenden + kompakter */
@media screen and (max-width: 768px) {
  .tech-table { min-width: 760px; }

  /* Download Spalte ausblenden (6. Spalte) */
  .tech-table thead th:nth-child(6),
  .tech-table tbody td:nth-child(6) {
    display: none;
  }

  .tech-table thead th { padding: 0.9rem 0.75rem; }
  .tech-table td { padding: 0.85rem 0.75rem; }
}


/* Noch kleiner: auch Dateigröße ausblenden, falls es eng wird (optional)
@media screen and (max-width: 480px) {
  .tech-table thead th:nth-child(5),
  .tech-table tbody td:nth-child(5) {
    display: none;
  }
}
*/

/* =========================================
   Sortable table headers
   ========================================= */

.tech-table thead th {
  cursor: pointer;
  position: relative;
}

/* Sort icons */
.tech-table thead th::after {
  content: "↕";
  font-size: 0.75rem;
  opacity: 0.4;
  margin-left: 0.4rem;
}

.tech-table thead th.sort-asc::after {
  content: "↑";
  opacity: 1;
}

.tech-table thead th.sort-desc::after {
  content: "↓";
  opacity: 1;
}