/* ≡ SA – MyDocs*/

:root {
  /* Sehr dezente Türkis-/Glas-Palette */
  --bg: linear-gradient(
    180deg,
    rgba(248, 252, 253, 1) 0%,
    rgba(239, 248, 249, 1) 52%,
    rgba(231, 244, 247, 1) 100%
  );

  --glass-bg: rgba(255, 255, 255, 0.48);
  --glass-border: rgba(255, 255, 255, 0.68);

  --accent: #55afbd;
  --accent-2: #72b8bd;
  --accent-dark: #397784;

  --muted: #71858b;
  --text: #18343d;
  --heading: #214752;

  --glass-blur: 10px;
  --radius: 14px;
  --card-padding: 18px;

  --shadow:
    0 8px 24px rgba(35, 105, 115, 0.07),
    0 1px 3px rgba(35, 105, 115, 0.04);
}

/* Page */

* {
  box-sizing: border-box;
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
}

html,
body {
  min-height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

body {
  padding: 28px;
}

/* Header */

h1 {
  display: flex;
  align-items: baseline;
  gap: 10px;

  margin: 0 0 18px 0;

  font-size: 20px;
  font-weight: 400;
  color: var(--heading);
}

h1 span {
  font-weight: 600;
}

h1 .red {
  color: #c87569;
}

h1 .blue {
  color: var(--accent);
}

/* Glass-Karten */

#HTMLSection,
#PDFSection,
#MISCSection,
p {
  margin-bottom: 18px;
  padding: var(--card-padding);

  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);

  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));

  box-shadow: var(--shadow);
}

/* Leichter Glas-Schimmer am oberen Rand */

#HTMLSection,
#PDFSection,
#MISCSection {
  position: relative;
  overflow: hidden;
}

#HTMLSection::before,
#PDFSection::before,
#MISCSection::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;

  background: rgba(255, 255, 255, 0.82);
  pointer-events: none;
}

/* Überschriften innerhalb der Karten */

#HTMLSection h2,
#PDFSection h2,
#MISCSection h2 {
  margin: 0 0 12px 0;

  color: var(--heading);
  font-size: 16px;
  font-weight: 600;
}

/* Links */

a {
  color: #4397a4;
  font-weight: 600;
  text-decoration: none;
  transition: color 160ms ease;
}

a:hover {
  color: #287985;
  text-decoration: underline;
}

/* Tabelle */

table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
}

th,
td {
  padding: 12px 14px;

  border-bottom: 1px solid rgba(24, 52, 61, 0.055);

  color: #345760;
  font-size: 13px;
  text-align: left;
  vertical-align: middle;
}

thead th {
  position: sticky;
  top: 0;
  z-index: 1;

  color: rgba(255, 255, 255, 0.96);
  font-weight: 600;
}

/* Dezente Türkis-Tabelle */

.table-soulBabyBlue {
  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 10px;

  box-shadow: none;
}

.table-soulBabyBlue thead th {
  padding: 12px 14px;

  background: linear-gradient(
    180deg,
    rgba(88, 177, 190, 0.88),
    rgba(72, 157, 173, 0.82)
  );

  color: white;
}

.table-soulBabyBlue tbody tr {
  transition:
    background 160ms ease,
    transform 160ms ease;
}

.table-soulBabyBlue tbody tr:hover {
  background: rgba(91, 182, 191, 0.07);
  transform: translateY(-1px);
}

/* Sehr dezente Zeilenstreifen */

.table-soulBabyBlue tbody tr:nth-child(odd) td {
  background: rgba(87, 163, 174, 0.045);
}

.table-soulBabyBlue tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.42);
}

/* Tabelleninhalte */

.table-soulBabyBlue td.filename {
  color: #245d68;
  font-weight: 600;
}

.table-soulBabyBlue td.file-size {
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}

.table-soulBabyBlue td.date-updated {
  color: var(--muted);
  white-space: nowrap;
}

/* Dezente Dateiname-Pille */

.filename-pill {
  display: inline-block;

  padding: 6px 10px;

  background: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 999px;

  color: #397784;
  font-size: 12px;

  box-shadow: 0 2px 8px rgba(72, 157, 173, 0.05);
}

/* Kleine Hilfsklassen */

.small {
  color: var(--muted);
  font-size: 12px;
}

.hidden {
  display: none;
}

/* Responsive */

@media (max-width: 820px) {
  body {
    padding: 14px;
  }

  th,
  td {
    padding: 10px 8px;
    font-size: 13px;
  }

  h1 {
    gap: 6px;
    font-size: 18px;
  }

  #HTMLSection,
  #PDFSection,
  #MISCSection,
  p {
    padding: 14px;
  }
}

/* Optional: reduzierte Transparenz für Browser ohne Backdrop-Filter */

@supports not (
  backdrop-filter: blur(10px)
) {
  #HTMLSection,
  #PDFSection,
  #MISCSection,
  p {
    background: rgba(255, 255, 255, 0.78);
  }
}