/**
 * Holodepth — koyu tema tabloları (genel kullanım)
 * Sınıflar: .tbl-wrap > table.tbl [ .tbl--striped | .tbl--compact | .tbl--head-premium ]
 */

.tbl-wrap {
  --tbl-border: rgba(55, 95, 160, 0.35);
  --tbl-border-soft: rgba(255, 255, 255, 0.06);
  --tbl-head-bg: linear-gradient(180deg,
      rgba(12, 22, 42, 0.98) 0%,
      rgba(6, 12, 24, 0.96) 100%);
  --tbl-cell-bg: rgba(2, 6, 12, 0.65);
  --tbl-cell-alt: rgba(8, 14, 26, 0.55);
  --tbl-text: rgba(175, 190, 218, 0.94);
  --tbl-text-strong: rgba(210, 220, 245, 0.98);
  --tbl-head-text: rgba(160, 195, 255, 0.98);

  margin: 1.35rem 0 1.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  border: 1px solid var(--tbl-border);
  background: rgba(0, 2, 8, 0.55);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55) inset,
    0 1px 0 rgba(80, 130, 200, 0.05) inset,
    0 -12px 28px rgba(0, 0, 0, 0.45) inset,
    0 2px 5px rgba(0, 0, 0, 0.28);
}

.tbl-wrap:focus-within {
  outline: none;
}

.tbl {
  width: 100%;
  min-width: min(100%, 36rem);
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--tbl-text);
}

.tbl caption {
  padding: 0.85rem 1rem 0.65rem;
  caption-side: top;
  text-align: left;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--tbl-head-text);
  border-bottom: 1px solid var(--tbl-border-soft);
  background: var(--tbl-head-bg);
}

.tbl thead th {
  padding: 0.75rem 0.85rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tbl-head-text);
  background: var(--tbl-head-bg);
  border-bottom: 1px solid var(--tbl-border);
  vertical-align: bottom;
}

/* thead hücrelerinin üst sol/sağ köşesi kare */
.tbl thead tr:first-child th:first-child {
  border-top-left-radius: 0;
}

.tbl thead tr:first-child th:last-child {
  border-top-right-radius: 0;
}

.tbl tbody tr:last-child td:first-child,
.tbl tbody tr:last-child th:first-child {
  border-bottom-left-radius: 10px;
}

.tbl tbody tr:last-child td:last-child {
  border-bottom-right-radius: 10px;
}

.tbl thead th code {
  font-size: 0.85em;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(155, 205, 255, 0.95);
  background: rgba(4, 14, 36, 0.75);
  border: 1px solid rgba(55, 100, 170, 0.35);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

.tbl tbody td {
  padding: 0.8rem 0.85rem;
  vertical-align: top;
  border-bottom: 1px solid var(--tbl-border-soft);
  background: var(--tbl-cell-bg);
}

/* Satır başlığı sütunu — UA th varsayılanı ortalıdır; metin tablolarında sola hizala */
.tbl tbody th[scope="row"] {
  padding: 0.8rem 0.85rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--tbl-border-soft);
  background: var(--tbl-cell-bg);
  font-weight: 600;
  color: var(--tbl-text-strong);
  white-space: nowrap;
}

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

.tbl tbody tr:last-child th[scope="row"] {
  border-bottom: none;
}

.tbl tbody td:first-child {
  font-weight: 600;
  color: var(--tbl-text-strong);
  white-space: nowrap;
}

@media (max-width: 720px) {
  .tbl tbody td:first-child,
  .tbl tbody th[scope="row"] {
    white-space: normal;
  }

  /*
   * Dar görünümde tablo yalnızca %100 kalırsa sütunlar sıkışır; uzun metinler çok satıra bölünür.
   * min-width + mevcut .tbl-wrap { overflow-x: auto } ile yatay kaydırma: daha geniş satır, daha az wrap.
   */
  .tbl-wrap .tbl {
    min-width: max(100%, 36rem);
  }

  .tbl caption,
  .tbl thead th,
  .tbl tbody td {
    padding-left: 0.65rem;
    padding-right: 0.65rem;
  }
}

/* Zebra — isteğe bağlı */
.tbl--striped tbody tr:nth-child(even) td,
.tbl--striped tbody tr:nth-child(even) th[scope="row"] {
  background: var(--tbl-cell-alt);
}

/* Sıkı satır aralığı — liste sayfaları için */
.tbl--compact tbody td,
.tbl--compact tbody th[scope="row"],
.tbl--compact thead th {
  padding: 0.55rem 0.65rem;
  font-size: 0.82rem;
}

/*
 * Demo Sabitleri tabloları (4 sütun; rowspan ile uyum için colgroup + sabit düzen).
 * Değer sütunu biraz daraltılır, Tür sütunu genişler.
 */
.tbl-wrap--demo-sabitleri .tbl {
  table-layout: fixed;
  width: 100%;
}

.tbl-wrap--demo-sabitleri .tbl__col--demo-sabit-role {
  width: 17%;
}

.tbl-wrap--demo-sabitleri .tbl__col--demo-sabit-param {
  width: 20%;
}

.tbl-wrap--demo-sabitleri .tbl__col--demo-sabit-value {
  width: 41%;
}

.tbl-wrap--demo-sabitleri .tbl__col--demo-sabit-type {
  width: 22%;
  min-width: 7.25rem;
}

.tbl-wrap--demo-sabitleri .tbl thead th,
.tbl-wrap--demo-sabitleri .tbl tbody td {
  vertical-align: top;
}

.tbl-wrap--demo-sabitleri .tbl tbody td:last-child {
  overflow-wrap: break-word;
}

/* Üst başlık satırı — sade premium (koyu blok / all-caps yok) */
.tbl--head-premium thead th {
  padding: 1rem 0.9rem 0.85rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: none;
  color: rgba(242, 246, 255, 0.96);
  background: transparent;
  border-bottom: none;
  vertical-align: bottom;
}

.tbl--head-premium thead {
  border-bottom: 1px solid rgba(110, 150, 220, 0.38);
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.02) 0%,
      transparent 100%);
}

.tbl--head-premium thead th code {
  font-weight: 500;
  color: rgba(200, 225, 255, 0.94);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

@media (prefers-reduced-motion: reduce) {
  .tbl-wrap {
    scroll-behavior: auto;
  }
}

/* Konu linkleri tabloda — design-codes ile aynı minimal chip (hücre içi okunurluk) */
.tbl tbody td a.doc-link--topic {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  padding: 0.1em 0.4em 0.12em;
  margin: 0 0.04em;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(226, 234, 248, 0.95);
  text-decoration: none;
  border-radius: 6px;
  background: rgba(12, 18, 30, 0.52);
  border: 1px solid rgba(100, 140, 185, 0.16);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.035) inset;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    color 0.18s ease,
    transform 0.15s ease;
}

.tbl tbody td a.doc-link--topic::after {
  content: "↗";
  display: inline-block;
  margin-left: 0.22em;
  font-size: 0.7em;
  font-weight: 600;
  opacity: 0.42;
  vertical-align: 0.06em;
  color: rgba(130, 165, 205, 0.75);
}

.tbl tbody td a.doc-link--topic:hover {
  border-color: rgba(110, 175, 215, 0.28);
  background: rgba(18, 28, 48, 0.68);
  color: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 6px 20px rgba(0, 0, 0, 0.18);
}

.tbl tbody td a.doc-link--topic:active {
  transform: translateY(1px);
}

.tbl tbody td a.doc-link--topic:focus-visible {
  outline: 1px solid rgba(120, 195, 235, 0.4);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .tbl tbody td a.doc-link--topic {
    transition: none;
  }

  .tbl tbody td a.doc-link--topic:active {
    transform: none;
  }
}