:root{
  --bg:#f6f8fa;
  --card:#ffffff;
  --text:#0b1220;
  --muted:#5f6b78;
  --ok:#0a8a0a;
  --err:#c0392b;
  --link:#0b69ff;
  --file-bg:#f3f4f6;
  --container-max:1100px;
}

/* Responsive base font size (scales between 13px and 16px) */
html { font-size: clamp(13px, 1.4vw, 16px); }

*{box-sizing:border-box}
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: var(--bg);
  color: var(--text);
  margin: 0;
  padding: 20px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.container{
  max-width: var(--container-max);
  margin: 0 auto;
  background: var(--card);
  padding: 18px;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(15,23,42,0.06);
}

h1 { margin-top: 0; font-size: 1.35rem; }

.controls{
  margin-bottom: 12px;
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

button{
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #dbe6f0;
  background: #fff;
  cursor: pointer;
}

.muted{ color: var(--muted); font-size:0.92rem }

.table-wrapper {
  margin-top: 8px;
}

/* Desktop: use traditional table layout but allow wrapping */
table{
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  /* remove enforced min-width to avoid horizontal scrollbar */
  table-layout: auto;
}

th, td{
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid #eef2f7;
  vertical-align: top;
  font-size: 0.95rem;
  word-break: break-word;
}

th{
  color: var(--muted);
  font-weight: 600;
  font-size: 0.9rem;
}

a{ color: var(--link); text-decoration: none; word-break: break-word }

.status-ok{ color: var(--ok) }
.status-err{ color: var(--err) }

.errorCell{
  color: var(--err);
  font-style: italic;
}

/* Styling für Dateiinhalte */
pre.fileContent{
  margin: 0;
  padding: 8px;
  background: var(--file-bg);
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;
  font-size: 0.92rem;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 240px;
  overflow: auto;
  border: 1px solid #e6e9ef;
}

/* Optional: schmalere erste Spalte in Dateitabellen */
#fileTable th:first-child, #fileTable td:first-child{
  width: 220px;
  max-width: 220px;
  word-break: break-word;
}

footer{
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.92rem;
}

/* Responsive Karten-Layout für kleine Bildschirme
   - jede Tabellenzeile wird zu einer "Karte"
   - jede Zelle zeigt links die Spaltenüberschrift via data-label
   - so entfällt die horizontale Scrollbar und die Werte bleiben lesbar
*/
@media (max-width: 650px) {
  .container { padding: 14px; }
  table { border: none; }
  thead { display: none; } /* hide header on small screens */

  tbody tr {
    display: block;
    margin-bottom: 12px;
    padding: 10px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #eef2f7;
  }

  tbody tr td {
    display: flex;
    padding: 8px 6px;
    align-items: baseline;
  }

  /* label (header) shown before value */
  tbody tr td::before {
    content: attr(data-label);
    display: inline-block;
    min-width: 110px;
    max-width: 45%;
    color: var(--muted);
    font-weight: 600;
    margin-right: 10px;
    flex-shrink: 0;
    font-size: 0.92rem;
  }

  /* make links wrap and values take remaining space */
  tbody tr td a { word-break: break-word; white-space: normal; }

  /* reduce spacing in headers/footers */
  h1 { font-size: 1.15rem; }
  .controls { gap:6px; }
  button { padding: 8px; }
}

/* Very small screens: tighten widths and font sizes */
@media (max-width: 420px) {
  html { font-size: 13px; }
  tbody tr td::before { min-width: 90px; }
}