/* VERTEX YY — tabel daftar jadi KARTU di HP (< 768 px) untuk SELURUH panel Filament; tablet/desktop tetap tabel (baris 56-64 px, garis tipis, hover halus).
 * Aturan umum, bukan per halaman. Tata letak/gaya saja: tidak mengubah data, logika, atau izin.
 * Label nilai berasal dari atribut data-label pada sel (diisi global oleh Column::configureUsing di AppServiceProvider; tabel buatan sendiri memberi data-label manual).
 * Berkas pelengkap: /js/vertex-kartu.js (tanda Rp, tombol "Selengkapnya"). Tabel buatan sendiri ikut aturan ini bila diberi kelas "vk-kartu-tabel". */
:root {
    --vk-kartu: #FFFFFF; --vk-garis: #E4D8C6; --vk-label: #5C4E3D; --vk-rp: #7A4A12; --vk-judul: #26170A; --vk-aksi-bg: #F6EBD9; --vk-aksi: #7A4A12; --vk-garis-halus: rgba(60, 40, 20, .10); --vk-hover: rgba(122, 74, 18, .05);
}
.dark {
    --vk-kartu: #1C150F; --vk-garis: #2D2118; --vk-label: #A8967F; --vk-rp: #F2B261; --vk-judul: #F1E8DA; --vk-aksi-bg: #2C2014; --vk-aksi: #E3B079; --vk-garis-halus: rgba(255, 255, 255, .07); --vk-hover: rgba(242, 178, 97, .06);
}

/* ---------- tablet dan desktop: tabel tetap, baris 56-64 px, garis tipis, hover halus ---------- */
@media (min-width: 768px) {
    .fi-ta-table > tbody > tr.fi-ta-row:has(> td.fi-ta-cell) > td { height: var(--vy-baris, 60px); }
    .fi-ta-table > tbody > tr.fi-ta-row:has(> td.fi-ta-cell) { border-color: var(--vk-garis-halus); }
    .fi-ta-table > tbody > tr.fi-ta-row:has(> td.fi-ta-cell):hover { background-color: var(--vk-hover); }
    .fi-ta-table > thead > tr > th { white-space: nowrap; }
    .vk-kartu-tabel tbody tr:hover { background-color: var(--vk-hover); }
}

/* ---------- HP: satu baris = satu kartu ---------- */
@media (max-width: 767px) {
    .fi-ta-content { overflow-x: visible !important; }
    .fi-ta-table, .fi-ta-table > tbody, .vk-kartu-tabel, .vk-kartu-tabel > tbody { display: block; width: 100%; }
    .fi-ta-table > thead, .vk-kartu-tabel > thead { display: none; }
    .fi-ta-table > tbody, .vk-kartu-tabel > tbody { padding: 10px; }
    .fi-ta-table > tbody > tr.fi-ta-row { display: block; }
    .fi-ta-table > tbody > tr.fi-ta-row > td:not(.fi-ta-cell) { display: block; width: 100%; }

    .fi-ta-table > tbody > tr.fi-ta-row:has(> td.fi-ta-cell), .vk-kartu-tabel > tbody > tr {
        display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 10px 14px;
        margin: 0 0 10px; padding: 14px; background: var(--vk-kartu); border: 1px solid var(--vk-garis) !important; border-radius: 16px; }

    /* sel: label kecil abu di atas nilai */
    .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell:not(.hidden), .vk-kartu-tabel > tbody > tr > td { display: block; min-width: 0; padding: 0 !important; border: 0 !important; height: auto; }
    .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell > div, .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell .fi-ta-col-wrp > :is(div, a), .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell .fi-ta-col-wrp > a > div, .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell .fi-ta-text { padding: 0 !important; }
    .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell::before, .vk-kartu-tabel > tbody > tr > td::before { content: attr(data-label); display: block; font-size: 11px; line-height: 1.3; color: var(--vk-label); margin-bottom: 2px; }
    .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell[data-label=""]::before { display: none; }

    /* kolom pertama (nama) = judul, maks 2 baris; kecuali sel pilih-baris */
    .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell:first-child:not(.fi-ta-selection-cell):not(.fi-ta-actions-cell),
    .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-selection-cell + td.fi-ta-cell, .vk-kartu-tabel > tbody > tr > td:first-child { grid-column: 1 / -1; font-weight: 600; color: var(--vk-judul); }
    .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell:first-child::before, .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-selection-cell + td.fi-ta-cell::before, .vk-kartu-tabel > tbody > tr > td:first-child::before { display: none; }
    .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell:first-child .fi-ta-text-item-label, .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-selection-cell + td.fi-ta-cell .fi-ta-text-item-label,
    .vk-kartu-tabel > tbody > tr > td:first-child .vk-judul-teks { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }

    /* status = lencana di kanan atas */
    .fi-ta-table > tbody > tr.fi-ta-row:has(> td.fi-table-cell-status) > td.fi-ta-cell:first-child:not(.fi-ta-selection-cell),
    .fi-ta-table > tbody > tr.fi-ta-row:has(> td.fi-table-cell-status) > td.fi-ta-selection-cell + td.fi-ta-cell { grid-column: 1; grid-row: 1; }
    .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell.fi-table-cell-status { grid-column: 2; grid-row: 1; justify-self: end; text-align: right; }
    .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell.fi-table-cell-status::before { display: none; }

    /* keterangan di bawah nama (description kolom): kecil, normal, abu, 3 baris lalu "…" */
    .fi-ta:not(#tabel-item .fi-ta) .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell .fi-ta-col-wrp p { margin: 2px 0 0; font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--vk-label); white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; }
    .fi-ta:not(#tabel-item .fi-ta) .fi-ta-table > tbody > tr.fi-ta-row.vk-buka > td.fi-ta-cell .fi-ta-col-wrp p { -webkit-line-clamp: unset; display: block; }
    /* teks panjang: 3 baris lalu "…" (tombol Selengkapnya membukanya) */
    .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell:not(:first-child) .fi-ta-text-item-label { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; }
    .fi-ta-table > tbody > tr.fi-ta-row.vk-buka > td.fi-ta-cell .fi-ta-text-item-label { -webkit-line-clamp: unset; display: block; }
    .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell .fi-ta-text-item { max-width: 100%; }
    /* kolom yang tidak penting di HP (visibleFrom md) disembunyikan dan muncul lewat "Selengkapnya" */
    .fi-ta-table > tbody > tr.fi-ta-row.vk-buka > td.fi-ta-cell.hidden { display: block !important; }
    .vk-lebih { grid-column: 1 / -1; order: 90; justify-self: start; min-height: 36px; padding: 0 4px; background: none; border: 0; color: var(--vk-aksi); font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

    /* angka Rp: rata kanan, tebal, #F2B261 (JS menandai sel yang berisi "Rp ..."; tabel buatan sendiri memakai kelas vk-rp) */
    .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell.vk-rp, .vk-kartu-tabel > tbody > tr > td.vk-rp { text-align: right; }
    .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell.vk-rp .fi-ta-text, .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell.vk-rp .fi-ta-col-wrp > div { justify-content: flex-end; text-align: right; }
    .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell.vk-rp .fi-ta-text-item, .vk-kartu-tabel > tbody > tr > td.vk-rp .vk-nilai { color: var(--vk-rp); font-weight: 700; white-space: nowrap; }
    .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell.vk-rp .fi-ta-text-item-label { display: inline; -webkit-line-clamp: unset; }

    /* tombol aksi baris (Buka/Ubah) di bawah kartu, lebar penuh, tinggi min 44 px */
    .fi-ta:not(#tabel-item .fi-ta) .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-actions-cell { grid-column: 1 / -1; order: 99; padding-top: 2px !important; }
    .fi-ta:not(#tabel-item .fi-ta) .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-actions-cell::before { display: none; }
    .fi-ta:not(#tabel-item .fi-ta) .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-actions-cell > div { white-space: normal; padding: 0 !important; }
    .fi-ta:not(#tabel-item .fi-ta) .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-actions-cell .fi-ta-actions { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; justify-content: stretch; }
    .fi-ta:not(#tabel-item .fi-ta) .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-actions-cell .fi-ta-actions > *, .fi-ta:not(#tabel-item .fi-ta) .fi-ta-table> tbody > tr.fi-ta-row > td.fi-ta-actions-cell .fi-ta-actions .fi-dropdown { flex: 1 1 0; min-width: 0; }
    .fi-ta:not(#tabel-item .fi-ta) .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-actions-cell .fi-ta-actions .fi-dropdown, .fi-ta:not(#tabel-item .fi-ta) .fi-ta-table> tbody > tr.fi-ta-row > td.fi-ta-actions-cell .fi-ta-actions .fi-dropdown-trigger { display: flex; }
    .fi-ta:not(#tabel-item .fi-ta) .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-actions-cell .fi-ta-actions a, .fi-ta:not(#tabel-item .fi-ta) .fi-ta-table> tbody > tr.fi-ta-row > td.fi-ta-actions-cell .fi-ta-actions button {
        display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; border: 1px solid var(--vk-garis); border-radius: 12px; background: var(--vk-aksi-bg); color: var(--vk-aksi); font-weight: 600; }
    .fi-ta:not(#tabel-item .fi-ta) .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-actions-cell .fi-ta-actions svg { color: currentColor; }
    .fi-ta:not(#tabel-item .fi-ta) .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-actions-cell .fi-ta-actions .fi-dropdown > .fi-dropdown-trigger { flex: 1 1 auto; width: 100%; }
    /* tombol ikon (mis. titik tiga) menampilkan labelnya di sebelah ikon supaya jelas fungsinya */
    .fi-ta:not(#tabel-item .fi-ta) .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-actions-cell .fi-ta-actions .fi-icon-btn { gap: 8px; }
    .fi-ta:not(#tabel-item .fi-ta) .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-actions-cell .fi-ta-actions .fi-icon-btn .sr-only { position: static; width: auto; height: auto; margin: 0; padding: 0; overflow: visible; clip: auto; white-space: nowrap; font-size: 14px; }

    /* kotak pilih baris (bila ada aksi massal) di baris sendiri paling atas kartu */
    .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-selection-cell { grid-column: 1 / -1; order: -1; width: auto; }
    .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-selection-cell::before { display: none; }

    /* pencarian dan filter tetap di atas; tombol Filter berlabel; tanpa geser samping */
    .fi-ta-header-toolbar { flex-wrap: wrap; gap: 8px !important; padding-left: 12px !important; padding-right: 12px !important; }
    .fi-ta-header-toolbar > div { min-width: 0; }
    .fi-ta-search-field { min-width: 0; }
    .fi-ta-header-ctn { max-width: 100%; }

    /* tabel buatan sendiri (kelas vk-kartu-tabel) */
    .vk-kartu-tabel { font-size: 13px; }
    .vk-kartu-tabel > tbody { padding: 0; }
    .vk-kartu-tabel > tbody > tr { grid-template-columns: repeat(auto-fit, minmax(max-content, 1fr)); }
    .vk-kartu-tabel > tbody > tr > td { white-space: nowrap; }
    .vk-kartu-tabel > tbody > tr > td:first-child, .vk-kartu-tabel > tbody > tr > td.vk-lebar { grid-column: 1 / -1; white-space: normal; }
    .vk-kartu-tabel > tbody > tr > td { text-align: left !important; }
    .vk-kartu-tabel > tbody > tr > td.vk-jumlah { grid-column: 1 / -1; text-align: right !important; }
    .vk-kartu-tabel > tbody > tr > td.vk-jumlah .vk-nilai { color: var(--vk-rp); font-size: 1.125rem; font-weight: 700; white-space: nowrap; }
    .vk-kartu-tabel > tbody > tr > td.vk-nol { display: none !important; }
    .vk-kartu-tabel > tbody > tr > td::before { text-align: inherit; }
}

/* Pemeriksa RAB: judul ringkas di HP, judul lama di tablet/desktop */
.vk-hp { display: none; }
@media (max-width: 767px) {
    .vk-desk { display: none; }
    .vk-hp { display: inline; }
    p.vk-hp { display: block; }
    #pemeriksa-rab .fi-section-header-description { display: none; }
}