/*
|--------------------------------------------------------------------------
| Tema Program 100 Hari
|--------------------------------------------------------------------------
| Lapisan tipis di atas tema bawaan Filament v3. Sengaja CSS polos, bukan
| tema Tailwind yang dikompilasi: project ini tidak punya package.json
| maupun node_modules, jadi menambahkan rantai build hanya untuk penyesuaian
| tampilan berarti menambah satu langkah yang bisa gagal di mesin orang lain
| sebelum aplikasinya bisa dibuka sama sekali.
|
| Dipasang lewat FilamentAsset::register() di AppServiceProvider, lalu
| disalin ke public/css oleh `php artisan filament:assets`.
|
| Semua warna didefinisikan dua kali — terang dan gelap — karena panel
| mengikuti preferensi tema pembaca, bukan satu tema tetap.
*/

:root {
    --p100-radius: 0.75rem;
    --p100-garis: rgb(0 0 0 / 0.06);
    --p100-bayangan: 0 1px 2px rgb(16 24 40 / 0.04), 0 1px 3px rgb(16 24 40 / 0.06);
    --p100-bayangan-naik: 0 4px 12px rgb(16 24 40 / 0.08), 0 2px 4px rgb(16 24 40 / 0.04);

    --p100-aman: #10b981;
    --p100-perhatian: #f59e0b;
    --p100-risiko: #f97316;
    --p100-blokir: #ef4444;
    --p100-jalan: #3b82f6;
    --p100-netral: #6b7280;
}

.dark {
    --p100-garis: rgb(255 255 255 / 0.08);
    --p100-bayangan: 0 1px 2px rgb(0 0 0 / 0.3);
    --p100-bayangan-naik: 0 4px 12px rgb(0 0 0 / 0.4);
}

/* ==========================================================================
   1. Kartu & panel — bidang yang lebih tenang
   ========================================================================== */

.fi-section,
.fi-wi-stats-overview-stat,
.fi-ta-ctn {
    border-radius: var(--p100-radius);
    box-shadow: var(--p100-bayangan);
    transition: box-shadow 160ms ease, transform 160ms ease;
}

.fi-wi-stats-overview-stat:hover {
    box-shadow: var(--p100-bayangan-naik);
}

/* Judul bagian: sedikit lebih tegas, jarak lebih lega. */
.fi-section-header-heading {
    font-weight: 600;
    letter-spacing: -0.011em;
}

.fi-section-header-description {
    margin-top: 0.125rem;
    line-height: 1.5;
}

/* ==========================================================================
   2. Kartu statistik utama — batang kemajuan di bawah angka
   ========================================================================== */

/*
 * Persentase sendirian mudah terbaca sebagai nilai ujian. Batang di bawahnya
 * menunjukkan sisa pekerjaan, bukan hanya capaian. Lebarnya dibawa dari PHP
 * lewat properti --p100-progres pada elemen kartunya.
 */
.p100-stat-utama {
    position: relative;
    overflow: hidden;
}

.p100-stat-utama::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: 0;
    block-size: 4px;
    inline-size: var(--p100-progres, 0%);
    background: linear-gradient(90deg, var(--p100-jalan), var(--p100-aman));
    border-start-end-radius: 4px;
    border-end-end-radius: 4px;
    transition: inline-size 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.p100-stat-utama .fi-wi-stats-overview-stat-value {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

@media (prefers-reduced-motion: reduce) {
    .p100-stat-utama::after {
        transition: none;
    }
}

/* ==========================================================================
   3. Badge — angka dan label sejajar rapi
   ========================================================================== */

.fi-badge {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.005em;
}

/* ==========================================================================
   4. Tabel — terbaca di layar sempit
   ========================================================================== */

/*
 * Tabel Filament sudah bisa digulir mendatar, tapi tanpa penanda apa pun
 * pembaca di ponsel tidak tahu masih ada kolom di sebelah kanan. Bayangan
 * tipis di tepi muncul hanya selama masih ada yang bisa digulir.
 */
.fi-ta-content {
    scrollbar-width: thin;
}

@media (max-width: 1023px) {
    .fi-ta-content {
        -webkit-overflow-scrolling: touch;
        background:
            linear-gradient(90deg, var(--p100-latar-tabel, #fff) 30%, rgb(255 255 255 / 0)) left center,
            linear-gradient(90deg, rgb(255 255 255 / 0), var(--p100-latar-tabel, #fff) 70%) right center,
            radial-gradient(farthest-side at 0 50%, rgb(16 24 40 / 0.12), rgb(16 24 40 / 0)) left center,
            radial-gradient(farthest-side at 100% 50%, rgb(16 24 40 / 0.12), rgb(16 24 40 / 0)) right center;
        background-repeat: no-repeat;
        background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
        background-attachment: local, local, scroll, scroll;
    }

    .dark .fi-ta-content {
        --p100-latar-tabel: rgb(24 24 27);
    }

    /* Header halaman tidak perlu ikut menyempit di ponsel. */
    .fi-header {
        gap: 0.75rem;
    }

    .fi-header-heading {
        font-size: 1.375rem;
        line-height: 1.75rem;
    }
}

/* Layar sangat sempit: aksi baris turun ke bawah, tidak berdesakan. */
@media (max-width: 639px) {
    .fi-ta-actions {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 0.375rem;
    }

    .fi-modal-window {
        margin-inline: 0.5rem;
    }

    /* Kartu statistik jadi satu kolom penuh, bukan dua yang terhimpit. */
    .fi-wi-stats-overview-stat {
        min-inline-size: 0;
    }

    .fi-wi-stats-overview-stat-value {
        font-size: 1.5rem;
    }
}

/* ==========================================================================
   5. Diagram — tinggi tetap agar tidak melompat saat data dimuat
   ========================================================================== */

.fi-wi-chart canvas {
    inline-size: 100% !important;
}

/* ==========================================================================
   6. Navigasi samping
   ========================================================================== */

.fi-sidebar-item-button {
    border-radius: 0.5rem;
}

.fi-sidebar-group-label {
    text-transform: uppercase;
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    font-weight: 600;
    opacity: 0.7;
}

/* ==========================================================================
   7. Formulir — bantuan teks lebih terbaca
   ========================================================================== */

.fi-fo-field-wrp-helper-text {
    line-height: 1.5;
}

/* Bagian yang terkunci diberi warna agar terbaca sebagai sengaja. */
.fi-section:has(.fi-section-header-icon.fi-color-warning) {
    border-color: rgb(245 158 11 / 0.35);
}

/*
 * KONTRAS BADGE HITUNGAN DI MENU SAMPING (TEMA TERANG)
 * ===========================================================================
 * Filament menggambar badge hitungan dengan warna teks tingkat 400 dan latar
 * transparan 10%. Di tema terang hasilnya diukur 3.07:1 untuk badge kuning
 * dan 4.41:1 untuk yang merah — di bawah 4.5:1 yang dituntut untuk teks
 * 12 px, dan angka inilah yang memberi tahu berapa task lewat tenggat.
 *
 * Tingkat 600 pada latar terang memberi sekitar 4.8-5:1 dengan rona yang
 * sama, jadi artinya tidak berubah. Tema gelap tidak disentuh: di sana
 * tingkat 400 justru yang benar, dan seluruh badge sudah lulus AA.
 */
html:not(.dark) .fi-sidebar .fi-badge {
    color: var(--c-600);
}

/*
 * MODE CETAK / PRESENTASI
 * ===========================================================================
 * Papan Eksekutif memang dibuat untuk dilihat manajemen, dan yang dilihat
 * manajemen cepat atau lambat dicetak atau dijadikan PDF.
 *
 * CATATAN PENTING: aturan @media print sebenarnya sudah pernah ditulis di
 * resources/css/app.css — tapi berkas itu TIDAK PERNAH DIMUAT. Project ini
 * tidak punya package.json maupun vite, dan satu-satunya CSS yang sampai ke
 * browser adalah tiga berkas yang didaftarkan lewat Css::make() di
 * AppServiceProvider. Jadi selama ini mencetak papan menghasilkan halaman
 * lengkap dengan menu samping dan tombol aksi. Aturannya dipindahkan ke
 * sini, ke berkas yang benar-benar dimuat.
 */
@media print {
    /* Navigasi dan tombol tidak ada artinya di atas kertas. */
    .fi-sidebar,
    .fi-topbar,
    .fi-ac,
    .fi-ta-actions,
    .fi-ta-filters-dropdown,
    .fi-ta-col-toggle {
        display: none !important;
    }

    /* Halaman memakai seluruh lebar kertas. */
    .fi-main,
    .fi-main-ctn,
    .fi-page {
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /*
     * Papan dicetak dengan tinta gelap di atas kertas putih, apa pun tema
     * yang sedang dipakai di layar. Tema gelap menghabiskan toner dan
     * membuat garis tipis hilang sama sekali.
     */
    .wr-board {
        --wr-ink-1: #FFFFFF;
        --wr-ink-2: #FFFFFF;
        --wr-ink-3: #F4F6F8;
        --wr-paper: #0B1722;
        --wr-muted: #33454F;
        --wr-dim: #4A5C68;
        --wr-line: #C9D3DA;
        --wr-line-2: #AEBBC4;
        background: #FFFFFF !important;
        color: #0B1722 !important;
        padding: 0 !important;
    }

    /* Panel tidak boleh terbelah di tengah antar-halaman. */
    .wr-panel,
    .wr-kpi,
    .wr-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* Bagian yang terlipat di layar tetap tercetak isinya. */
    .fi-section-content-ctn {
        height: auto !important;
        overflow: visible !important;
    }

    /* Yang tergulir di layar dicetak utuh, bukan terpotong di tepi. */
    .wr-gulir {
        overflow: visible !important;
    }

    a[href] {
        text-decoration: none;
        color: inherit;
    }
}

/*
 * LABEL NAVIGASI TIDAK BOLEH DIPOTONG
 * ===========================================================================
 * ATURANNYA: kalau sebuah label tidak muat, yang salah adalah LEBARNYA,
 * bukan namanya. Jangan pernah memendekkan label menu supaya muat.
 *
 * Kenapa aturan ini ditulis: label pernah dipendekkan untuk mengejar sidebar
 * 18rem — "Lembaga — Form A" jadi "Lembaga", "Kebutuhan Komunikasi (K1/K2)"
 * jadi "Kebutuhan Komunikasi". Itu memperbaiki gejalanya dengan membuang
 * informasinya. "Form A" dan "Form B" adalah nama dokumen kerja TF4 yang
 * dipegang orangnya di tangan; begitu hilang dari layar, hubungan antara
 * layar dan angketnya ikut putus.
 *
 * Atribut `title` juga BUKAN pengganti teks yang terlihat: orang tidak
 * menyorot menu yang tidak mereka kenali. Yang perlu dibaca harus tergambar.
 *
 * Filament memberi label class `truncate` (nowrap + ellipsis). Di sini
 * ketiganya dibatalkan dan labelnya dibiarkan membungkus ke baris berikutnya
 * TANPA batas jumlah baris — dengan begitu tidak ada lebar sidebar yang bisa
 * membuat sebuah nama terpotong.
 */
/*
 * SELEKTORNYA DUA KELAS, DAN ITU PERLU.
 *
 * Filament memasang class Tailwind `truncate` (0,1,0) pada label. Selektor
 * `.fi-sidebar-item-label` sendirian juga (0,1,0) dan KALAH karena urutan —
 * terbukti saat diukur: white-space tetap `nowrap`, overflow tetap `hidden`.
 * `.fi-sidebar .fi-sidebar-item-label` (0,2,0) menang tanpa perlu
 * `!important`.
 */
.fi-sidebar .fi-sidebar-item-label {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.3;
}

/*
 * Ikon disejajarkan ke baris pertama teks, bukan ke tengah blok, supaya
 * deretan ikon tetap lurus walau sebagian label dua baris.
 */
.fi-sidebar .fi-sidebar-item-button {
    align-items: flex-start;
}

.fi-sidebar .fi-sidebar-item-button .fi-icon,
.fi-sidebar .fi-sidebar-item-button svg {
    flex: 0 0 auto;
    margin-top: 1px;
}