/* VERTEX YY — Tahap B: kenyamanan mata (tipografi, ruang napas, tabel). Gaya/tata letak saja: tidak mengubah data, logika, atau izin.
 * Dimuat SETELAH vertex-tema.css dan vertex-kartu.css. Menu samping, logo, ikon, karakter, dan palet warna tema tidak disentuh.
 * "Tampilan nyaman" per pengguna (Profil) cukup mengubah dua atribut di <html>: data-vy-huruf (kecil|sedang|besar) dan data-vy-padat (lega|normal);
 * seluruh ukuran di bawah mengikuti variabel --vy-* sehingga perubahan berlaku langsung tanpa muat ulang.
 * Font: Inter (isi) dan Sora 600 (judul halaman), keduanya berkas lokal (/fonts), bukan CDN. */
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/sora/sora-latin-ext-600-normal.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/sora/sora-latin-600-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- 1. dasar tipografi ----------
 * Teks isi Filament memakai text-sm (0,875 rem). Ukuran dasar yang diminta (14 px; HP 15 px) dicapai dengan menskalakan root,
 * sehingga seluruh antarmuka berbasis rem (teks, jarak, ikon) ikut proporsional. */
:root {
    --vy-fs: 14px;                 /* ukuran huruf isi: tablet/desktop */
    --vy-pad: 20px;                /* padding kartu */
    --vy-gap: 16px;                /* jarak antar kartu */
    --vy-baris: 60px;              /* tinggi baris tabel */
    --vy-teks: #2B2118; --vy-judul: #1A1008; --vy-sekunder: #5C4E3D;
}
.dark, html.dark {
    --vy-teks: #E6DCCD; --vy-judul: #F1E8DA; --vy-sekunder: #A8967F;
}
html[data-vy-huruf="kecil"] { --vy-fs: 13px; }
html[data-vy-huruf="besar"] { --vy-fs: 16px; }
html[data-vy-padat="normal"] { --vy-pad: 14px; --vy-gap: 12px; --vy-baris: 48px; }
@media (max-width: 767px) {
    :root { --vy-fs: 15px; }
    html[data-vy-huruf="kecil"] { --vy-fs: 14px; }
    html[data-vy-huruf="besar"] { --vy-fs: 17px; }
}
html { font-size: calc(var(--vy-fs) / 0.875); }
body.fi-body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; color: var(--vy-teks); }
/* tinggi baris teks 1,5 (bawaan Tailwind 1,43 untuk text-sm terasa rapat) */
.fi-body .text-sm, .fi-body .text-base, .fi-body .text-xs { line-height: 1.5; }
.fi-body .text-lg, .fi-body .text-xl { line-height: 1.4; }
/* teks isi krem lembut (bukan putih murni) dan judul krem terang, hanya di mode gelap */
html.dark .fi-body .dark\:text-white:where(:not(.fi-btn):not(.fi-badge):not(.fi-btn *):not(.fi-badge *)) { color: var(--vy-teks); }
html.dark .fi-body .fi-header-heading, html.dark .fi-body .fi-section-header-heading, html.dark .fi-body .fi-ta-header-heading, html.dark .fi-body .fi-modal-heading, html.dark .fi-modal-heading { color: var(--vy-judul); }
html.dark .fi-body .fi-wi-stats-overview-stat-value { color: #F2B261; }
/* teks sekunder: kontras >= 4,5:1 di semua latar kartu */
html.dark .fi-body .dark\:text-gray-400, html.dark .fi-body .dark\:text-gray-500, html.dark .fi-section-header-description, html.dark .fi-header-subheading,
html.dark .fi-ta-header-description, html.dark .fi-fo-field-wrp-hint, html.dark .fi-breadcrumbs { color: var(--vy-sekunder); }
/* judul halaman: Sora 600 */
.fi-header-heading { font-family: 'Sora', 'Inter', ui-sans-serif, system-ui, sans-serif; font-weight: 600; letter-spacing: -0.005em; line-height: 1.3; }
.fi-section-header-heading, .fi-modal-heading, .fi-ta-header-heading { font-weight: 600; }
html:not(.dark) .fi-header-heading { color: var(--vy-judul); }

/* ---------- 2. ruang napas ---------- */
.fi-page > section { row-gap: var(--vy-gap); }
.fi-page .grid.flex-1.auto-cols-fr { row-gap: var(--vy-gap); }
.fi-section, .fi-ta-ctn, .fi-wi-stats-overview-stat { border-radius: 16px; }
.fi-modal-window { border-radius: 18px; }
.fi-section .fi-section-content, .fi-section .fi-section-header { padding: var(--vy-pad); }
.fi-section .fi-section-header { padding-top: calc(var(--vy-pad) * .8); padding-bottom: calc(var(--vy-pad) * .8); }
.fi-section .fi-section-header + .fi-section-content-ctn .fi-section-content { padding-top: calc(var(--vy-pad) * .8); }
.fi-section:not(:has(> .fi-section-header)) .fi-section-content, .fi-section-content-ctn:first-child .fi-section-content { padding-top: var(--vy-pad); }
.fi-wi-stats-overview-stat { padding: var(--vy-pad); }
.fi-modal-header { padding: var(--vy-pad) var(--vy-pad) 0; }
.fi-modal-content { padding: var(--vy-pad); }
.fi-modal-footer { padding: 0 var(--vy-pad) var(--vy-pad); }
html.dark body.fi-body { background-color: #14100C; }
html.dark .fi-section, html.dark .fi-ta-ctn, html.dark .fi-wi-stats-overview-stat { background-color: #1A130E; --tw-ring-color: #2B1F16; }
html.dark .fi-modal-window { background-color: #1C150F; --tw-ring-color: #2B1F16; }
html.dark .fi-ta-row, html.dark .fi-ta-header, html.dark .fi-section-content, html.dark .fi-section-header { border-color: #2B1F16 !important; }
/* aksen teak/amber hanya untuk angka penting dan tombol utama: tautan dan ikon biasa memakai warna teks, bukan amber */
html.dark .fi-link:not(.fi-btn) { color: #D79B5E; }

/* ---------- 3. tabel (tablet dan desktop; satu gaya untuk SEMUA tabel panel) ---------- */
.fi-ta-table td, .fi-ta-table th, .vk-kartu-tabel td { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.fi-ta-table > thead > tr > th, .vk-kartu-tabel > thead > tr > th { white-space: nowrap; }
@media (min-width: 768px) {
    .fi-ta-table > thead > tr { border-bottom: 1px solid var(--vk-garis-halus); }
    .fi-ta-table > thead > tr > th { padding-top: 0.9rem; padding-bottom: 0.9rem; vertical-align: middle; }
    .fi-ta-header-cell-label, .fi-ta-table > thead > tr > th > span, .fi-ta-table > thead > tr > th > button {
        font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--vy-sekunder); line-height: 1.3; }
    html:not(.dark) .fi-ta-header-cell-label { color: #5C4E3D; }
    html.dark .fi-body .fi-ta-table > thead > tr > th .fi-ta-header-cell-label { color: var(--vy-sekunder); }
    .fi-ta-table > tbody > tr.fi-ta-row:has(> td.fi-ta-cell) > td { height: var(--vy-baris); vertical-align: middle; }
    .fi-ta-table > tbody > tr.fi-ta-row:has(> td.fi-ta-cell) { border-color: var(--vk-garis-halus); transition: background-color .15s ease; }
    .vk-kartu-tabel > tbody > tr { transition: background-color .15s ease; }
    /* kepadatan Normal: padding sel lebih tipis supaya baris benar-benar rapat (tinggi minimum tetap var(--vy-baris)) */
    html[data-vy-padat="normal"] .fi-ta-table td .fi-ta-text, html[data-vy-padat="normal"] .fi-ta-table td.fi-ta-actions-cell > div { padding-top: 0.5rem; padding-bottom: 0.5rem; }
    /* kolom angka rata kanan (ditandai vertex-kartu.js bila SEMUA isi kolom berupa angka/Rp) */
    .fi-ta-table td.vk-angka, .fi-ta-table th.vk-angka { text-align: right; }
    .fi-ta-table td.vk-angka .fi-ta-text, .fi-ta-table td.vk-angka .fi-ta-col-wrp > div { justify-content: flex-end; text-align: right; }
    .fi-ta-table th.vk-angka > :is(span, button) { justify-content: flex-end; width: 100%; }
}
/* header tetap terlihat saat tabel panjang digulir (hanya desktop; tablet/HP tidak memakai gulir bersarang) */
@media (min-width: 1100px) {
    .fi-ta-content { max-height: calc(100vh - 14rem); overflow-y: auto; }
    .fi-ta-table > thead > tr > th { position: sticky; top: 0; z-index: 2; background-color: #FAF4EC; }
    html.dark .fi-ta-table > thead > tr > th { background-color: #1F1710; }
    #tabel-item .fi-ta-content { max-height: none; overflow-y: visible; }
}

/* ---------- HP: kartu mengikuti skala ---------- */
@media (max-width: 767px) {
    .fi-ta-table > tbody > tr.fi-ta-row:has(> td.fi-ta-cell), .vk-kartu-tabel > tbody > tr { padding: calc(var(--vy-pad) * .7); gap: calc(var(--vy-gap) * .65) 14px; margin-bottom: calc(var(--vy-gap) * .65); }
}

/* ---------- mode terang: kontras >= 4,5:1 (tema terang bawaan Filament memakai amber-600 dan abu terang yang kurang kontras) ---------- */
html:not(.dark) { --primary-500: 124, 45, 18; --primary-600: 146, 64, 14; --primary-700: 124, 45, 18; --warning-500: 124, 45, 18; --warning-600: 146, 64, 14; --warning-700: 124, 45, 18;
    --success-500: 22, 101, 52; --success-600: 21, 128, 61; --danger-500: 153, 27, 27; --danger-600: 185, 28, 28; --info-500: 29, 78, 216; --info-600: 37, 99, 235; }
html:not(.dark) .fi-body .text-gray-500, html:not(.dark) .fi-body .text-gray-400, html:not(.dark) .fi-ta-placeholder { color: #5F5648; }
html:not(.dark) .fi-body [style*="opacity:.5"], html:not(.dark) .fi-body [style*="opacity: .5"], html:not(.dark) .fi-body [style*="opacity:.6"], html:not(.dark) .fi-body [style*="opacity: .6"],
html:not(.dark) .fi-body [style*="opacity:.65"], html:not(.dark) .fi-body [style*="opacity:.7"], html:not(.dark) .fi-body [style*="opacity: .7"], html:not(.dark) .fi-body [style*="opacity:.75"], html:not(.dark) .fi-body [style*="opacity: .75"] { opacity: .85 !important; }

/* ---------- pilihan "Tampilan nyaman" di Profil ---------- */
.vy-pilih { min-height: 44px; padding: 0 1.1rem; border-radius: 12px; border: 1.5px solid var(--vk-garis, #E4D8C6); background: transparent; color: var(--vy-teks); font-weight: 500; cursor: pointer; }
.vy-pilih[aria-checked="true"] { border-color: #D79B5E; background: rgba(215, 155, 94, .14); font-weight: 600; }
html:not(.dark) .vy-pilih[aria-checked="true"] { border-color: #92400E; background: rgba(146, 64, 14, .08); }
.vy-sekunder { color: var(--vy-sekunder); font-size: .875rem; }

/* ---------- tombol terisi berwarna (mode gelap): Filament memakai warna -500 di mode gelap, teks putih di atasnya kurang kontras (< 4,5:1) ---------- */
html.dark .fi-btn.fi-color-danger[class*="bg-custom-"]:not(.fi-btn-outlined) { background-color: rgb(var(--danger-700)); color: #FFFFFF; }
html.dark .fi-btn.fi-color-success[class*="bg-custom-"]:not(.fi-btn-outlined) { background-color: rgb(var(--success-700)); color: #FFFFFF; }
html.dark .fi-btn.fi-color-info[class*="bg-custom-"]:not(.fi-btn-outlined) { background-color: rgb(var(--info-700)); color: #FFFFFF; }
html.dark .fi-btn.fi-color-warning[class*="bg-custom-"]:not(.fi-btn-outlined), html.dark .fi-btn.fi-color-warning[class*="bg-custom-"]:not(.fi-btn-outlined) .fi-btn-label { color: #241408; }

/* ---------- sakelar dan kotak centang bertema (satu palet untuk SEMUA: Filament Toggle, sakelar di tabel, kotak centang, dan .vy-sakelar di halaman buatan sendiri) ---------- */
html { --sw-mati: #E4D8C6; --sw-garis: #8F8068; --sw-hidup: rgb(var(--primary-600)); --sw-kenop: #FFFFFF; --sw-kenop-hidup: #FFFFFF; --sw-centang: #FFFFFF; }
html.dark { --sw-mati: #2C2014; --sw-garis: #6B5640; --sw-hidup: #D79B5E; --sw-kenop: #A8967F; --sw-kenop-hidup: #241408; --sw-centang: #241408; }
html [role="switch"], html.dark [role="switch"] { background-color: var(--sw-mati); box-shadow: inset 0 0 0 1px var(--sw-garis); }
html [role="switch"][aria-checked="true"], html.dark [role="switch"][aria-checked="true"] { background-color: var(--sw-hidup); box-shadow: none; }
html [role="switch"] > span:first-child, html.dark [role="switch"] > span:first-child { background-color: var(--sw-kenop); box-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
html [role="switch"][aria-checked="true"] > span:first-child, html.dark [role="switch"][aria-checked="true"] > span:first-child { background-color: var(--sw-kenop-hidup); }
html [role="switch"]:focus-visible { outline: 2px solid var(--sw-hidup); outline-offset: 2px; }

html input[type="checkbox"], html.dark input[type="checkbox"] { background-color: var(--sw-mati); border: 1px solid var(--sw-garis); box-shadow: none; color: var(--sw-hidup); }
html input[type="checkbox"]:checked, html.dark input[type="checkbox"]:checked { background-color: var(--sw-hidup); border-color: var(--sw-hidup); }
html input[type="checkbox"]:checked { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0'/%3E%3C/svg%3E"); }
html.dark input[type="checkbox"]:checked { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23241408' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0'/%3E%3C/svg%3E"); }
html input[type="checkbox"]:focus-visible { outline: 2px solid var(--sw-hidup); outline-offset: 2px; box-shadow: none; }
html input[type="checkbox"]:disabled { opacity: .55; }

/* kotak centang buatan sendiri yang berarti hidup/mati: tampil sebagai sakelar (kelas vy-sakelar) */
html input[type="checkbox"].vy-sakelar, html.dark input[type="checkbox"].vy-sakelar { -webkit-appearance: none; appearance: none; position: relative; flex: 0 0 auto; width: 2.75rem; height: 1.5rem; border-radius: 999px; background-image: none; cursor: pointer; transition: background-color .2s; margin: 0; }
html input[type="checkbox"].vy-sakelar::before { content: ""; position: absolute; top: 50%; left: 2px; width: calc(1.5rem - 6px); height: calc(1.5rem - 6px); margin-top: calc((1.5rem - 6px) / -2); border-radius: 50%; background-color: var(--sw-kenop); box-shadow: 0 1px 2px rgba(0, 0, 0, .35); transition: transform .2s, background-color .2s; }
html input[type="checkbox"].vy-sakelar:checked, html.dark input[type="checkbox"].vy-sakelar:checked { background-image: none; }
html input[type="checkbox"].vy-sakelar:checked::before { transform: translateX(1.25rem); background-color: var(--sw-kenop-hidup); }

/* ---------- tombol Simpan di HP: lebar penuh, tinggi min 46 px, menempel di bawah layar (kelas vy-simpan-bar dan .fi-form-actions bawaan Filament) ---------- */
@media (max-width: 767px) {
    html { --vy-bar-bg: #FFFFFF; --vy-bar-garis: #E4D8C6; --vy-tinggi-bar: 5.25rem; }
    html.dark { --vy-bar-bg: #1C150F; --vy-bar-garis: #2B1F16; }
    .vy-simpan-bar, .fi-form-actions { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; margin: 0; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom)); background-color: var(--vy-bar-bg); border-top: 1px solid var(--vy-bar-garis); }
    .vy-simpan-bar { display: flex; gap: .5rem; }
    .vy-simpan-bar .fi-btn, .fi-form-actions .fi-btn { flex: 1 1 0; width: 100%; min-height: 46px; justify-content: center; }
    .fi-form-actions .fi-ac { flex-wrap: wrap; gap: .5rem; }
    .fi-form-actions .fi-ac > .fi-btn { flex: 1 1 40%; }
    .fi-form-actions .fi-ac > .fi-btn:first-child { flex-basis: 100%; }
    /* ruang di akhir halaman supaya isi paling bawah tidak tertutup bilah */
    body:has(.vy-simpan-bar, .fi-form-actions) .fi-main { padding-bottom: 1rem; }
    body:has(.vy-simpan-bar, .fi-form-actions) .fi-main-ctn { padding-bottom: calc(max(var(--vy-tinggi-bar), var(--vy-bar-tinggi, 0px)) + 1.5rem + env(safe-area-inset-bottom, 0px)); }   /* di bawah isi DAN kaki halaman (kaki ada di luar .fi-main): tinggi bar diukur skrip + napas 1,5rem + area aman (10 Nov 2026) */
    /* tombol di kaki jendela (modal): lebar penuh, min 46 px, tetap terlihat bila isi panjang digulir */
    .fi-modal-footer { position: sticky; bottom: 0; z-index: 5; padding-top: .75rem; background-color: #FFFFFF; border-top: 1px solid var(--vy-bar-garis); }
    html.dark .fi-modal-footer { background-color: #1C150F; }
    .fi-modal-footer-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
    .fi-modal-footer-actions .fi-btn { flex: 1 1 40%; min-height: 46px; justify-content: center; }
    .fi-modal-footer-actions .fi-btn:first-child:not(:last-child) { flex-basis: 100%; }
}

/* ---------- Pengaturan RAB, tabel berat besi di HP: satu baris per diameter (nama kiri, berat tengah, sakelar Dipakai kanan, sejajar vertikal) ---------- */
@media (max-width: 767px) {
    .vy-baris-besi .fi-ta-table > tbody > tr.fi-ta-row:has(> td.fi-ta-cell) { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0 10px; padding: 10px 14px; margin-bottom: 8px; }
    .vy-baris-besi .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell:first-child:not(.fi-ta-selection-cell):not(.fi-ta-actions-cell) { grid-column: 1; grid-row: 1; }
    .vy-baris-besi .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell::before { display: none; }
    .vy-baris-besi .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell.fi-table-cell-berat-kg:not(.hidden) { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: .3rem; }
    .vy-baris-besi .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell.fi-table-cell-berat-kg::after { content: "kg"; color: var(--vy-sekunder); font-size: .875rem; }
    .vy-baris-besi .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell.fi-table-cell-aktif { grid-column: 3; grid-row: 1; justify-self: end; display: flex; align-items: center; }
    .vy-baris-besi .fi-ta-text-input { min-width: 0; width: 6rem; padding: 0 !important; }
    .vy-baris-besi .fi-ta-toggle { padding: 0 !important; }
    .vy-baris-besi .fi-ta-text-input input::placeholder { font-size: .8125rem; }
    .vy-baris-besi .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell:first-child .fi-ta-col-wrp p { white-space: nowrap !important; display: block !important; font-size: 12px !important; }
    .vy-baris-besi .vk-lebih { display: none; }
}
.vy-simpan-bar { display: flex; flex-wrap: wrap; gap: .5rem; }

/* tombol aksi baris di kartu HP (mis. "Ubah"): label dan ikon mengikuti warna aksi kartu; aturan tombol utama mode gelap membuat label #241408 di atas latar gelap (kontras 1,1:1) */
@media (max-width: 767px) {
    .fi-ta:not(#tabel-item .fi-ta) .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-actions-cell .fi-ta-actions .fi-btn .fi-btn-label,
    .fi-ta:not(#tabel-item .fi-ta) .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-actions-cell .fi-ta-actions .fi-btn svg { color: var(--vk-aksi) !important; }
}