/* ==========================================================================
   HIZIRBEY DESIGN SYSTEM - TABLE COMPONENT

   Proje:
   HIZIRBEY Portal

   Paket:
   HIZIRBEY Design System

   Bileşen:
   Table

   Dosya:
   themes/default/assets/css/hds/components/table/base.css

   Açıklama:
   HDS Table bileşeninin temel görünümünü, responsive kapsayıcısını,
   sütun hizalamalarını, sticky sütun davranışlarını ve breakpoint
   tabanlı görünürlük kurallarını merkezi olarak yönetir.

   Bu dosya herhangi bir uygulama modülüne bağlı değildir.
   Users, Roles, Permissions, Languages, Phrases, Settings, Calendar,
   Forum ve diğer bütün modüller tarafından ortak kullanılabilir.

   Yazar:
   Mehmet Kalli

   Oluşturulma:
   02.08.2026 01:30

   Güncellendi:
   23.10.2026 (sunucu tarafı arama kutusu · .hds-table-search)
   26.10.2026 (süzme seçimi · .hds-table-search__select)

   Sürüm:
   2.3.0

   Ownership:
   Public HDS Table layout, overflow, column dimension and sticky engine

   Contract:
   Layouts: auto, fixed
   Sticky policies: left, right
   Overflow owner: .hds-table-responsive
   Row surface tokens: --hds-table-row-background,
                       --hds-table-row-hover-background
========================================================================== */

/* ==========================================================================
 * >>> Table Design Tokens

   Amaç:
   Table bileşeni içinde kullanılan renk, boşluk, kenarlık ve katman
   değerlerini tek merkezden yönetir.
========================================================================== */

.hds-table-container {
  --hds-table-background: #ffffff;
  --hds-table-header-background: var(--hds-table-header-surface, #eef3f5); /* dış kanca: kapsayıcı tonu (ör. Accordion cards) */
  --hds-table-header-color: #263b4a;
  --hds-table-cell-color: #222222;
  --hds-table-muted-color: #66757f;
  --hds-table-border-color: #d8dfe3;
  --hds-table-hover-background: #f8fafb;
  --hds-table-row-background: var(--hds-table-background);
  --hds-table-row-hover-background: var(--hds-table-hover-background);
  --hds-table-sticky-shadow-left: 5px 0 8px rgba(7, 51, 67, 0.06);
  --hds-table-sticky-shadow-right: -5px 0 8px rgba(7, 51, 67, 0.06);
  --hds-table-cell-padding-y: 10px;
  --hds-table-cell-padding-x: 10px;
  --hds-table-font-size: 14px;
  --hds-table-sticky-z-index: 3;
  --hds-table-sticky-header-z-index: 4;
}

/* <<< Table Design Tokens */

/* ==========================================================================
 * >>> Table Container

   Amaç:
   Table bileşeninin dış kapsayıcısını güvenli genişlik ve taşma
   davranışlarıyla hazırlar.
========================================================================== */

.hds-table-container {
  box-sizing: border-box;

  min-width: 0;
  max-width: 100%;
}

.hds-table-container *,
.hds-table-container *::before,
.hds-table-container *::after {
  box-sizing: border-box;
}

/* <<< Table Container */

/* ==========================================================================
 * >>> Table Header

   Amaç:
   Table bileşenine ait başlık ve açıklama alanlarını düzenler.
========================================================================== */

.hds-table-header {
  margin-bottom: 14px;
}

.hds-table-title {
  margin: 0 0 6px;
  padding-left: var(--hds-table-title-indent, 0);
  border-left: var(--hds-table-title-accent, 0);

  color: #073343;

  font-size: 22px;
  line-height: 1.2;
}

.hds-table-description {
  margin: 0;

  color: var(--hds-table-muted-color);

  font-size: 14px;
  line-height: 1.45;
}

/* <<< Table Header */

/* ==========================================================================
 * >>> Table Search (Table::search · 23.10.2026)

   Amaç:
   Tablonun üstünde sağa yaslı GET arama kutusu; etiket yalnız ekran okuyucu için.
========================================================================== */

.hds-table-search {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  margin: 0 0 0.6rem;
}

.hds-table-search__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.hds-table-search__input {
  box-sizing: border-box;
  width: min(100%, var(--hds-table-search-width, 16rem));
  min-height: 2.2rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--hds-table-border-color, #d6dee6);
  border-radius: 0.5rem;
  background: #ffffff;
  color: inherit;
  font: inherit;
  font-size: 0.875rem;
}

/* Süzme seçimi (Table::filter · 26.10.2026): arama kutusuyla aynı görünüm. */
.hds-table-search__select {
  box-sizing: border-box;
  width: min(100%, var(--hds-table-filter-width, 14rem));
  min-height: 2.2rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--hds-table-border-color, #d6dee6);
  border-radius: 0.5rem;
  background: #ffffff;
  color: inherit;
  font: inherit;
  font-size: 0.875rem;
}

.hds-table-search__select:focus-visible,
.hds-table-search__input:focus-visible {
  outline: 2px solid var(--hds-table-search-focus, #176da6);
  outline-offset: 1px;
}

.hds-table-search__submit {
  min-height: 2.2rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--hds-table-border-color, #d6dee6);
  border-radius: 0.5rem;
  background: #ffffff;
  color: #263b4a;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.hds-table-search__submit:hover {
  background: #f3f6f9;
}

.hds-table-search.is-enhanced .hds-table-search__submit--filter {
  display: none;
}

@media (max-width: 639.98px) {
  .hds-table-search__select,
  .hds-table-search__input {
    flex: 1 1 auto;
    width: auto;
  }
}

/* <<< Table Search */

/* ==========================================================================
 * >>> Nowrap Column (Column::nowrap · 23.10.2026)
 * Başlık ve hücre tek satır; hücredeki yatay Pack (ör. baş harf + ad) da sarmaz.
========================================================================== */

.hds-table :is(th, td).is-nowrap {
  white-space: nowrap;
}

.hds-table td.is-nowrap .hds-pack {
  flex-wrap: nowrap;
}

.hds-table td.is-nowrap :is(.hds-button, .hds-button__text, .hds-badge, .hds-status-indicator) {
  flex-shrink: 0;
  white-space: nowrap;
}

/* <<< Nowrap Column */

/* ==========================================================================
 * >>> Responsive Table Region

   Amaç:
   Geniş tabloları kapsayıcı dışına taşırmadan yatay kaydırılabilir
   erişilebilir bir bölge içerisinde gösterir.
========================================================================== */

.hds-table-responsive {
  display: block;

  width: 100%;
  max-width: 100%;

  overflow-x: auto;
  overflow-y: hidden;

  scrollbar-width: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.hds-table-responsive:focus {
  outline: 2px solid rgba(7, 51, 67, 0.22);
  outline-offset: 2px;
}

/* <<< Responsive Table Region */

/* ==========================================================================
 * >>> Table Base

   Amaç:
   Ana table elementinin genişlik, yerleşim, tipografi ve arka plan
   davranışlarını tanımlar.
========================================================================== */

.hds-table {
  width: var(--hds-table-width, 100%);
  min-width: var(--hds-table-min-width, 760px);

  border-spacing: 0;
  border-collapse: separate;

  background: var(--hds-table-background);

  color: var(--hds-table-cell-color);

  font-size: var(--hds-table-font-size);
}

.hds-table.is-layout-fixed {
  table-layout: fixed;
}

.hds-table.is-layout-auto {
  table-layout: auto;
}

/* <<< Table Base */

/* ==========================================================================
 * >>> Table Head and Body

   Amaç:
   Table başlık ve veri hücrelerinin ortak görünümünü belirler.
========================================================================== */

.hds-table th,
.hds-table td {
  padding: var(--hds-table-cell-padding-y) var(--hds-table-cell-padding-x);

  border-right: 1px solid var(--hds-table-border-color);
  border-bottom: 1px solid var(--hds-table-border-color);

  vertical-align: middle;
}

.hds-table th:first-child,
.hds-table td:first-child {
  border-left: 1px solid var(--hds-table-border-color);
}

.hds-table thead tr:first-child th {
  border-top: 1px solid var(--hds-table-border-color);
}

.hds-table th {
  background: var(--hds-table-header-background);
  color: var(--hds-table-header-color);

  font-size: var(--hds-table-font-size);
  font-weight: 700;
}

.hds-table td {
  background: var(--hds-table-row-background);
  color: var(--hds-table-cell-color);

  font-size: var(--hds-table-font-size);
}

.hds-table-row td {
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease;
}

.hds-table-row:hover td {
  background: var(--hds-table-row-hover-background);
}

/* <<< Table Head and Body */

/* ==========================================================================
 * >>> Table Column Configuration

   Amaç:
   Column nesnesinden gelen genişlik ve hizalama ayarlarını uygular.
========================================================================== */

.hds-table-column {
  width: var(--hds-table-column-width, auto);
  min-width: var(--hds-table-column-min-width, 0);
}

.hds-table-align-left {
  text-align: left;
}

.hds-table-align-center {
  text-align: center;
}

.hds-table-align-right {
  text-align: right;
}

/* <<< Table Column Configuration */

/*
|--------------------------------------------------------------------------
| Table Cell Content Variants
|--------------------------------------------------------------------------
|
| Column nesnesinin addCellClass() metodu üzerinden eklenen ortak
| hücre içerik varyantlarını yönetir.
|
*/

.hds-table-cell-emphasis {
  font-weight: 700;
}

.hds-table-cell-code {
  color: #33434c;

  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;

  font-size: 0.92em;
}

/*
|--------------------------------------------------------------------------
| Table Sort Links
|--------------------------------------------------------------------------
|
| Column::sortable() tarafından oluşturulan ortak sıralama bağlantılarını
| bütün HDS tablolarında aynı görünümle gösterir.
|
*/

.hds-table-sort-link {
  /* Ekran okuyucu metni (.hds-visually-hidden, absolute) kaydırma kabının
     dışına taşıp sayfayı yatay kaydırmasın (T4.6a, İzinler 390 px). */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: inherit;
  gap: 7px;

  max-width: 100%;

  color: inherit;

  font: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-decoration: none;
}

.hds-table-sort-link:hover,
.hds-table-sort-link:focus-visible {
  color: #073343;
  text-decoration: underline;
}
.hds-table-sort-pair{align-items:center;display:inline-flex;gap:.45rem}.hds-table-sort-controls{display:inline-flex;gap:.14rem}.hds-table-sort-control{align-items:center;border-radius:3px;color:var(--hds-table-muted-color);display:inline-flex;height:1.25rem;justify-content:center;width:1.25rem}.hds-table-sort-control svg{fill:currentColor;height:.42rem;width:.58rem}.hds-table-sort-control:hover,.hds-table-sort-control:focus-visible,.hds-table-sort-control.is-active{background:rgba(7,51,67,.1);color:#073343}.hds-table-sort-control:focus-visible{outline:2px solid rgba(7,51,67,.28);outline-offset:1px}

.hds-table-sort-label {
  overflow: hidden;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.hds-table-sort-indicator {
  flex: 0 0 auto;

  color: var(--hds-table-muted-color);

  font-size: 0.9em;
  line-height: 1;
}

.hds-table-sort-link:focus-visible {
  outline: 2px solid rgba(7, 51, 67, 0.28);
  outline-offset: 3px;
  border-radius: 2px;
}

/*
|--------------------------------------------------------------------------
| Visually Hidden Content
|--------------------------------------------------------------------------
|
| Ekran okuyucular için gerekli fakat görsel arayüzde gösterilmeyen
| erişilebilirlik metinlerini saklar.
|
*/

.hds-visually-hidden {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;

  overflow: hidden !important;

  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;

  border: 0 !important;

  white-space: nowrap !important;
}

/* ==========================================================================
 * >>> Sticky Column Engine

   Amaç:
   Column nesnesinde stickyLeft() veya stickyRight() ile tanımlanan
   sütunları ilgili tarafta sabitler.
========================================================================== */

.hds-table-column.is-sticky {
  position: sticky;

  z-index: var(--hds-table-sticky-z-index);

  background: var(--hds-table-row-background);
}

.hds-table-column.is-sticky-left {
  left: 0;

  box-shadow: var(--hds-table-sticky-shadow-left);
}

.hds-table-column.is-sticky-right {
  right: 0;

  box-shadow: var(--hds-table-sticky-shadow-right);
}

.hds-table-head .hds-table-column.is-sticky {
  z-index: var(--hds-table-sticky-header-z-index);

  background: var(--hds-table-header-background);
}

.hds-table-row:hover .hds-table-column.is-sticky {
  background: var(--hds-table-row-hover-background);
}

/* <<< Sticky Column Engine */

/* ==========================================================================
 * >>> Table Empty State

   Amaç:
   Satır bulunmadığında gösterilen boş durum mesajını düzenler.
========================================================================== */

.hds-table-empty {
  padding: 24px !important;

  background: var(--hds-table-background);
  color: var(--hds-table-muted-color);

  text-align: center !important;
  font-style: italic;
}

/* <<< Table Empty State */

/* ==========================================================================
 * >>> Responsive Column Visibility

   Amaç:
   Column::hideBelow() ile tanımlanan breakpoint davranışlarını uygular.

   Breakpoint yaklaşımı:
   - sm: 576px altı
   - md: 768px altı
   - lg: 992px altı
   - xl: 1200px altı
========================================================================== */

@media (max-width: 1199.98px) {
  .hds-table-column.is-hidden-below-xl {
    display: none;
  }
}

@media (max-width: 991.98px) {
  .hds-table-column.is-hidden-below-lg {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .hds-table-column.is-hidden-below-md {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .hds-table-column.is-hidden-below-sm {
    display: none;
  }
}

/* <<< Responsive Column Visibility */

/* ==========================================================================
 * >>> Compact Responsive Spacing

   Amaç:
   Dar ekranlarda hücre boşluklarını kontrollü biçimde azaltır.
========================================================================== */

@media (max-width: 820px) {
  .hds-table-container {
    --hds-table-cell-padding-y: 9px;
    --hds-table-cell-padding-x: 9px;
  }
}

/* <<< Compact Responsive Spacing */

/* ==========================================================================
 * >>> Reduced Motion

   Amaç:
   Hareket azaltma tercihi bulunan kullanıcılar için geçişleri kapatır.
========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .hds-table-row td {
    transition: none;
  }
}

/* <<< Reduced Motion */

/* ==========================================================================
   >>> Table additions (T4.5, 2026-10-19)
   - smallTitle(): art arda grup tabloları için küçük, sola hizalı başlık.
   - .hds-table__row.is-disabled: pasif satır (gri, soluk).
   - responsive(): dar ekranda (≤ 48rem) kap yatay kaydırılır.
========================================================================== */

.hds-table-container.has-small-title .hds-table-title {
  color: #183b56;
  font-size: 1rem;
  font-weight: 750;
  text-align: left;
}

.hds-table__row.is-disabled {
  filter: grayscale(1);
  opacity: 0.58;
}

@media (max-width: 48rem) {
  .hds-table-container.is-responsive {
    overflow-x: auto;
  }
}

/* <<< Table additions */

/* ==========================================================================
   >>> Multiline (Table::multiline() · T5.2d, 2026-10-19)
   Çok satırlı içerik tablosu: hücreler üstten hizalı, uzun metin kırılır;
   hücredeki Button / Field sütun genişliğini aşmaz.
========================================================================== */

.hds-table.is-multiline th,
.hds-table.is-multiline td {
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: top;
}

.hds-table.is-multiline .hds-button {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.hds-table.is-multiline .hds-field {
  min-width: 0;
  max-width: 100%;
}

/* <<< Multiline */

/* ---> Table vurgu sınıfları (01.11.2026)
   Satır: Row::addClass('hds-table-row--current' | 'hds-table-row--tone-sea' | 'hds-table-row--tone-red')
   Hücre: Row::addCellClass(sütun, 'hds-table-cell--current') — yalnız o hücre
   Sütun: Column::addHeaderClass / addCellClass('hds-table-column--tone-start' | '--tone-end')
   Öncelik: hafta sonu tonu (zemin) üstünde sütun tonu (şeffaf katman); aktif satır ve aktif hücre ikisini de örter.
   Kancalar: --hds-table-tone-sea / -red (satır), --hds-table-tone-start / -end (+ -head), --hds-table-current-row-background / -accent, --hds-table-current-cell-background / -accent */
.hds-table tr.hds-table-row--tone-sea td {
  background-color: var(--hds-table-tone-sea, #e2f1f6);
}

.hds-table tr.hds-table-row--tone-red td {
  background-color: var(--hds-table-tone-red, #fbe5e3);
}

.hds-table th.hds-table-column--tone-start {
  background: var(--hds-table-tone-start-head, #d8d3f2);
  color: #2f2670;
}

/* Sütun tonu şeffaf bir katman: hafta sonu satır tonunun üstünden geçer, altındaki renk görünür kalır. */
.hds-table td.hds-table-column--tone-start {
  background-image: linear-gradient(var(--hds-table-tone-start, rgb(91 79 176 / 0.16)), var(--hds-table-tone-start, rgb(91 79 176 / 0.16)));
}

.hds-table th.hds-table-column--tone-end {
  background: var(--hds-table-tone-end-head, #fbdcaa);
  color: #6b3600;
}

.hds-table td.hds-table-column--tone-end {
  background-image: linear-gradient(var(--hds-table-tone-end, rgb(245 158 11 / 0.2)), var(--hds-table-tone-end, rgb(245 158 11 / 0.2)));
}

.hds-table tr.hds-table-row--current td {
  background: var(--hds-table-current-row-background, #d3ecd8);
  font-weight: 700;
}

.hds-table tr.hds-table-row--current td:first-child {
  box-shadow: inset 4px 0 0 var(--hds-table-current-row-accent, #2e7d32);
}

.hds-table tr.hds-table-row--current td.hds-table-cell--current {
  background: var(--hds-table-current-cell-background, #ffe08a);
  box-shadow: inset 0 0 0 2px var(--hds-table-current-cell-accent, #b8860b);
}
/* <--- Table vurgu sınıfları */

/* ---> Table tam genişlik satır + yazdırma (01.11.2026)
   Satır: Row::spanText('Metin') — tüm sütunlara yayılan tek hücre (ayırıcı / not).
   Kancalar: --hds-table-span-background / -color / -size / -weight
   Yazdırma: renkler korunur, satırlar sayfa ortasında bölünmez, başlık her sayfada tekrar eder. */
.hds-table td.hds-table-span {
  padding-block: 0.6rem;
  text-align: center;
  background: var(--hds-table-span-background, #fff3cf);
  color: var(--hds-table-span-color, #6b3600);
  font-size: var(--hds-table-span-size, 1.15rem);
  font-weight: var(--hds-table-span-weight, 800);
  letter-spacing: 0.04em;
}

@media print {
  .hds-table,
  .hds-table th,
  .hds-table td {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Sayfa genişliğine sığar: ekran için konan asgari genişlik ve kaydırma yazdırmada kalkar. */
  .hds-table {
    min-width: 0;
    width: 100%;
  }

  .hds-table-responsive {
    overflow: visible;
  }

  .hds-table tr {
    break-inside: avoid;
  }

  .hds-table thead {
    display: table-header-group;
  }
}
/* <--- Table tam genişlik satır + yazdırma */

/* ---> Okunmadı satır varyantı (02.11.2026, Mesajlaşma Paket 3)
 * Row::addClass('hds-table-row--unread'): okunmamış kayıt (ör. gelen kutusu) kalın yazı ve sol vurgu çizgisiyle ayrılır.
 * Kancalar: --hds-table-row-unread-accent */

.hds-table-row--unread td {
  font-weight: 700;
}

.hds-table-row--unread td:first-child {
  box-shadow: inset 3px 0 0 var(--hds-table-row-unread-accent, #2f6b57);
}

/* <--- Okunmadı satır varyantı */