/* =====================================================================
   TM COMPONENTS — 2026-08-06 (feat/responsive-architecture)
   Container / PageShell (ADIM 2) + DataTable (ADIM 3) görsel katmanı.
   responsive-foundation.css'ten SONRA yüklenir (token'ları tüketir).
   ===================================================================== */

/* ---------- Container (tek gutter/max-width kaynağı) ---------- */
.tm-container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--tm-gutter, 1rem);   /* mobil 16 → sm 24 → lg 32 (foundation token) */
  max-width: var(--tm-container-max, 1280px);
}
.tm-container--narrow { --tm-container-max: 880px; }
.tm-container--wide   { --tm-container-max: 1536px; }
.tm-container--fluid  { --tm-container-max: none; }

/* ---------- PageShell ---------- */
.tm-pageshell { padding-block: var(--tm-space-4, 1rem) var(--tm-space-6, 1.5rem); }
.tm-pageshell__head {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: .75rem;
  margin-bottom: var(--tm-space-4, 1rem);
}
.tm-pageshell__titles { min-width: 0; }
.tm-pageshell__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.tm-page-title {
  font-size: clamp(1.25rem, 4.5vw, 1.75rem);
  font-weight: 700; line-height: 1.2; margin: 0;
  overflow-wrap: anywhere;
}
.tm-page-subtitle { margin: .25rem 0 0; color: var(--tm-text-secondary, #6b7280); overflow-wrap: anywhere; }

/* ---------- DataTable ---------- */
.tm-datatable { width: 100%; }
.tm-datatable__scroll { width: 100%; max-width: 100%; }
.tm-datatable__table { width: 100%; border-collapse: collapse; }
.tm-datatable__table caption.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}
.tm-datatable__empty { text-align: center; color: var(--tm-text-secondary, #6b7280); padding: 1.25rem; }

/* md ÜSTÜ: gerçek tablo; genişse KART İÇİNDE yatay kaydırır (sayfa taşmaz) */
@media (min-width: 768px) {
  .tm-datatable__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tm-datatable__table th, .tm-datatable__table td {
    padding: .625rem .75rem; text-align: left; vertical-align: middle;
    border-bottom: 1px solid var(--tm-line, #e5e7eb); overflow-wrap: anywhere;
  }
  .tm-datatable__table thead th {
    font-size: .8125rem; font-weight: 600; color: var(--tm-text-secondary, #6b7280);
    white-space: nowrap; border-bottom-width: 2px;
  }
}

/* md ALTI: her satır bir KART (thead gizli; td = etiket + değer) */
@media (max-width: 767.98px) {
  .tm-datatable__scroll { overflow-x: visible; }
  .tm-datatable__table thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0);
  }
  .tm-datatable__table,
  .tm-datatable__table tbody,
  .tm-datatable__table tr,
  .tm-datatable__table td { display: block; width: 100%; }
  .tm-datatable__table tr {
    border: 1px solid var(--tm-line, #e5e7eb); border-radius: 10px;
    margin-bottom: .625rem; padding: .5rem .75rem; background: var(--tm-bg-card, #fff);
  }
  .tm-datatable__table td {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem; padding: .3rem 0; border: 0; overflow-wrap: anywhere;
  }
  .tm-datatable__table td::before {
    content: attr(data-label); font-weight: 600; color: var(--tm-text-secondary, #6b7280);
    flex: 0 0 42%; min-width: 0;
  }
  .tm-datatable__table td:empty { display: none; }
}