/*!
 * İnsya UI — tablo, uyarı ve ızgara (önek: iu-). Düğme (iu-btn), form alanı (iu-input / iu-field), kart (iu-card) ve
 * rozet (iu-badge) insya-ui.css / insya-form.css / insya-record.css içinde zaten var; burada yalnızca eksik olanlar yer alır.
 * Renkler insya-ui.css belirteçlerinden (--iu-*) gelir: masaüstü teması, karanlık mod ve pencere paletleri otomatik uyar.
 *
 *   <table class="iu-table iu-table--striped iu-table--hover">…</table>   (taşan tablo için <div class="iu-table-wrap">)
 *   <div class="iu-alert iu-alert--ok|info|warn|danger">…</div>   (sunucu/betik türü success|warning ise iu-alert--success|warning de geçerli)
 *   <div class="iu-cols"><div class="iu-span-6">…</div><div class="iu-span-6">…</div></div>   (12 sütun, dar ekranda tek sütun)
 */

/* ---------------- Tablo ---------------- */
.iu-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--iu-font);
  color: var(--iu-ink);
}

.iu-table th,
.iu-table td {
  padding: 7px 10px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--iu-line);
}

.iu-table thead th {
  background: var(--iu-bar);
  font-weight: 600;
  white-space: nowrap;
}

.iu-table--bordered th,
.iu-table--bordered td { border: 1px solid var(--iu-line); }
.iu-table--striped tbody tr:nth-child(even) { background: var(--iu-surface-2); }
.iu-table--hover tbody tr:hover { background: var(--iu-hover); }
.iu-table--compact th,
.iu-table--compact td { padding: 3px 6px; }
.iu-table-wrap { overflow-x: auto; max-width: 100%; }

/* Renk çeşidi: üst üste dizili tabloları ayırt eder (iu-table--tone-1..6 ya da data-variant="1..6"; belirteçler insya-ui.css).
   Başlık bandı ve kenarlık tonla boyanır (ayrı üst çizgi yok); metin rengi değişmez. */
.iu-table--tone-1, .iu-table[data-variant="1"] { --iu-table-tone: var(--iu-tone-1); }
.iu-table--tone-2, .iu-table[data-variant="2"] { --iu-table-tone: var(--iu-tone-2); }
.iu-table--tone-3, .iu-table[data-variant="3"] { --iu-table-tone: var(--iu-tone-3); }
.iu-table--tone-4, .iu-table[data-variant="4"] { --iu-table-tone: var(--iu-tone-4); }
.iu-table--tone-5, .iu-table[data-variant="5"] { --iu-table-tone: var(--iu-tone-5); }
.iu-table--tone-6, .iu-table[data-variant="6"] { --iu-table-tone: var(--iu-tone-6); }
.iu-table[class*="iu-table--tone-"],
.iu-table[data-variant] { border: 1px solid color-mix(in srgb, var(--iu-table-tone, var(--iu-line)) var(--iu-tone-edge, 65%), var(--iu-line)); }
.iu-table[class*="iu-table--tone-"] thead th,
.iu-table[data-variant] thead th { background: color-mix(in srgb, var(--iu-table-tone, var(--iu-bar)) var(--iu-tone-band, 38%), var(--iu-bar)); }

/* ---------------- Uyarı ---------------- */
.iu-alert {
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: var(--iu-font);
  color: var(--iu-ink);
  background: var(--iu-surface-2);
  border: 1px solid var(--iu-line);
  border-radius: var(--iu-radius);
}

.iu-alert--ok, .iu-alert--success { background: var(--iu-ok-soft); color: var(--iu-ok); }
.iu-alert--info { background: var(--iu-info-soft); color: var(--iu-info); }
.iu-alert--warn, .iu-alert--warning { background: var(--iu-warn-soft); color: var(--iu-warn); }
.iu-alert--danger { background: var(--iu-danger-soft); color: var(--iu-danger); }

/* ---------------- 12 sütunlu ızgara ---------------- */
.iu-cols {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--iu-gap, 16px);
}

.iu-span-12 { grid-column: span 12; }
.iu-span-11 { grid-column: span 11; }
.iu-span-10 { grid-column: span 10; }
.iu-span-9 { grid-column: span 9; }
.iu-span-8 { grid-column: span 8; }
.iu-span-7 { grid-column: span 7; }
.iu-span-6 { grid-column: span 6; }
.iu-span-5 { grid-column: span 5; }
.iu-span-4 { grid-column: span 4; }
.iu-span-3 { grid-column: span 3; }
.iu-span-2 { grid-column: span 2; }
.iu-span-1 { grid-column: span 1; }

@media (max-width: 768px) {
  .iu-cols > [class*="iu-span-"] { grid-column: span 12; }
}

/* ---------------- Dikey yığın ----------------
 * Kartları / blokları eşit aralıkla alt alta dizer; tek tek mb15 ya da satır içi margin yazmamak için. */
.iu-stack {
  display: grid;
  gap: var(--iu-gap, 12px);
}

/* ---------------- Not listesi (iu-notes) ----------------
 * Başlıklı serbest metin açıklamaları; eski Bootstrap list-group / list-group-item yerine.
 *   <dl class="iu-notes"><dt>Başlık <span class="iu-badge">…</span></dt><dd>Metin</dd><dd class="is-empty">--YOK--</dd></dl>
 * iu-notes--compact: tablo hücresi gibi dar alanlarda küçük yazı. Renkler tema belirteçlerinden (açık / koyu). */
.iu-notes {
  display: grid;
  gap: 4px;
  margin: 0;
}

.iu-notes > dt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  color: var(--iu-ink);
  font-weight: 600;
}

.iu-notes > dt:first-child { margin-top: 0; }

.iu-notes > dd {
  margin: 0;
  padding: 6px 10px;
  border: 1px solid var(--iu-line);
  border-radius: var(--iu-radius-sm);
  background: var(--iu-surface);
  color: var(--iu-ink-soft);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.iu-notes > dd.is-empty { color: var(--iu-muted); }

.iu-notes--compact {
  gap: 2px;
  font-size: 11px;
}

.iu-notes--compact > dt { margin-top: 4px; }
.iu-notes--compact > dd { padding: 2px 6px; }