/**
 * table-cards — mobil kart görünümü bileşeni (<768px)
 * Kullanım: <table class="... table-cards"> + hücrelere data-label="Etiket".
 * Yardımcılar: tc-actions (kart üst bandı), tc-check (sağ üst seçim kutusu),
 *              tc-badge (renkli arka planı korunacak hücre), tc-hide (kartta gizle).
 * Tamamen CSS'tir; DOM değişmediği için tablo JS'leri (düzenleme, seçim,
 * DataTables) aynen çalışır. Risk analizi detayındaki çözümden damıtılmıştır;
 * bilinen tuzakların çözümleri içindedir (bkz. satır içi notlar).
 */
@media (max-width: 767.98px) {
    /* Sarmalayıcılar: kart akışında yatay kaydırma kalksın */
    .table-responsive:has(table.table-cards) { overflow: visible !important; }
    .dt-container:has(table.table-cards) .dt-scroll-head { display: none !important; }
    .dt-container:has(table.table-cards) .dt-scroll-body { overflow: visible !important; }

    /* TUZAK: display:table, col/hücre genişliklerini MİNİMUM sayar —
       tablo blok akışına alınmazsa 100% genişlik bile taşmayı önlemez. */
    table.table-cards {
        display: block;
        width: auto !important;
        min-width: 0 !important;
        border: 0 !important;
    }
    table.table-cards > thead,
    table.table-cards > colgroup { display: none; }

    table.table-cards > tbody { display: block; }
    /* Flex sütun: tc-actions, İşlem kolonu DOM'da sonda olsa da order ile kart üstüne alınır */
    table.table-cards > tbody > tr {
        display: flex;
        flex-direction: column;
        position: relative;
        background: var(--vz-card-bg, #fff);
        border: 1px solid #dfe6ee;
        border-radius: 12px;
        margin-bottom: 12px;
        padding: 10px 12px 8px;
        box-shadow: 0 4px 14px -8px rgba(28, 43, 58, .18);
    }
    table.table-cards > tbody > tr > td {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        border: 0 !important;
        padding: 5px 0 !important;
        width: auto !important;
        text-align: left !important;
        white-space: normal !important;
        /* TUZAK: DataTables FixedColumns hücrelere inline position/left basar */
        position: static !important;
    }
    /* TUZAK: FixedColumns arka planı hücrede bırakır; renkli rozet hücreleri hariç sıfırla */
    table.table-cards > tbody > tr > td:not(.tc-badge) { background: transparent !important; }
    /* TUZAK: table-striped zebrayı arka planla değil inset box-shadow ile basar
       (Bootstrap 5.3) — sıfırlanmazsa kart içinde gri blok olarak görünür. */
    table.table-cards > tbody > tr > td { box-shadow: none !important; }

    table.table-cards > tbody > tr > td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 40%;
        max-width: 40%;
        font-weight: 600;
        font-size: 12px;
        color: #6b7a89;
        line-height: 1.7;
    }

    /* Kart üst bandı: işlem butonları (order:-1 → DOM sırası ne olursa olsun en üstte) */
    table.table-cards > tbody > tr > td.tc-actions {
        order: -1;
        border-bottom: 1px dashed #e4eaf1 !important;
        padding-bottom: 8px !important;
        margin-bottom: 4px;
    }
    /* Sağ üst seçim kutusu — TUZAK: inline left:0 varsa left:auto şart */
    table.table-cards > tbody > tr > td.tc-check {
        position: absolute !important;
        top: 10px;
        right: 12px !important;
        left: auto !important;
        width: auto !important;
        padding: 0 !important;
        z-index: 2;
    }
    table.table-cards > tbody > tr > td.tc-check input[type="checkbox"] {
        width: 22px;
        height: 22px;
    }
    /* Renkli değer hücresi rozet gibi */
    table.table-cards > tbody > tr > td.tc-badge {
        border-radius: 8px;
        padding: 6px 10px !important;
        margin-top: 4px;
        font-size: 15px;
    }
    /* Etiketin varsayılan gri tonu renkli zeminde okunmuyor */
    table.table-cards > tbody > tr > td.tc-badge::before {
        color: rgba(255, 255, 255, .9);
    }
    /* Kartta değersiz/az değerli kolonlar */
    table.table-cards > tbody > tr > td.tc-hide { display: none !important; }

    /* "Henüz kayıt yok" gibi tek hücrelik boş-liste satırı: etiket sütunu
       olmadığı için ortalanmış durması daha doğru görünür. */
    table.table-cards > tbody > tr > td[colspan] {
        display: block;
        text-align: center !important;
        color: #6b7a89;
        padding: 6px 0 !important;
    }
}