/*
|--------------------------------------------------------------------------
| Perapian Dashboard — tema terang dan gelap
|--------------------------------------------------------------------------
| Simpan sebagai resources/css/wr-dashboard.css lalu daftarkan di
| AppServiceProvider bersama dua berkas CSS lain, dan jalankan
| `php artisan filament:assets`.
|
| Semua warna ditulis dua kali: sekali untuk tema terang, sekali di bawah
| `.dark`. Panel mengikuti preferensi tema pembaca, bukan satu tema tetap,
| jadi nilai yang hanya benar di salah satu tema akan terlihat rusak bagi
| separuh pemakai.
|
| CSS polos, bukan Tailwind. Project ini tidak punya package.json; kelas
| Tailwind yang tidak ikut terkompilasi tidak menghasilkan gaya apa pun dan
| tidak melaporkan galat apa pun.
*/

:root {
    --wrd-kartu-garis: rgb(0 0 0 / .07);
    --wrd-kartu-latar: #ffffff;
    --wrd-angka: #0f172a;
    --wrd-label: #64748b;
    --wrd-halus: rgb(0 0 0 / .04);
}

.dark {
    --wrd-kartu-garis: rgb(255 255 255 / .08);
    --wrd-kartu-latar: #18181b;
    --wrd-angka: #f4f4f5;
    --wrd-label: #a1a1aa;
    --wrd-halus: rgb(255 255 255 / .04);
}

/* ==========================================================================
   1. Kartu angka — tinggi seragam
   --------------------------------------------------------------------------
   Kartu yang keterangannya memanjang dua baris membuat barisnya jadi lebih
   tinggi dari tetangganya, dan tepi bawah yang tidak rata terbaca sebagai
   tata letak yang rusak. Tinggi minimum menyamakannya tanpa memotong teks.
   ========================================================================== */

.fi-wi-stats-overview-stat {
    min-height: 118px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.fi-wi-stats-overview-stat-value {
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    color: var(--wrd-angka);
}

.fi-wi-stats-overview-stat-label {
    color: var(--wrd-label);
    font-size: .8125rem;
    letter-spacing: .01em;
}

.fi-wi-stats-overview-stat-description {
    font-size: .75rem;
    line-height: 1.35;
}

/* Kartu bisa diklik terasa bisa diklik. */
.fi-wi-stats-overview-stat:hover {
    border-color: rgb(99 102 241 / .35);
}

/* ==========================================================================
   2. Diagram — tinggi seragam antar kartu yang bersebelahan
   --------------------------------------------------------------------------
   Dua diagram berdampingan dengan tinggi berbeda meninggalkan celah putih
   di bawah yang lebih pendek. Menyamakan tinggi kanvas menutup celah itu
   tanpa perlu memaksa aspect ratio di sisi JavaScript.
   ========================================================================== */

.fi-wi-chart {
    height: 100%;
}

.fi-wi-chart .fi-section {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.fi-wi-chart .fi-section-content-ctn {
    flex: 1;
    display: flex;
    align-items: center;
}

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

/* ==========================================================================
   3. Tabel di dalam widget — gulir mendatar yang terlihat
   --------------------------------------------------------------------------
   Tabel Task Overdue punya enam kolom dan satu tombol aksi. Di layar sempit
   kolom terakhir terpotong di tengah kata, dan tidak ada tanda apa pun bahwa
   tabelnya masih berlanjut ke kanan — pembaca mengira kolomnya rusak.
   Bayangan tepi memberi tanda itu.
   ========================================================================== */

.fi-wi .fi-ta-ctn {
    position: relative;
}

.fi-wi .fi-ta-content {
    overflow-x: auto;
    scrollbar-width: thin;
}

.fi-wi .fi-ta-content::after {
    content: "";
    position: sticky;
    right: 0;
    top: 0;
    display: block;
    width: 28px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to left, var(--wrd-kartu-latar), transparent);
}

/* ==========================================================================
   4. Denyut yang tidak berdenyut
   --------------------------------------------------------------------------
   Beberapa kartu memakai ->extraAttributes(['class' => 'animate-pulse']).
   Kelas itu berasal dari Tailwind. Karena project ini memakai berkas CSS
   Filament hasil kompilasi dan tidak punya rantai build sendiri, kelas
   tersebut belum tentu ada — kartunya diam saja tanpa pesan galat apa pun.
   Definisi di bawah membuat efeknya nyata, dan berhenti bila pemakai
   meminta gerakan dikurangi.
   ========================================================================== */

@keyframes wrd-denyut {
    0%, 100% { opacity: 1; }
    50% { opacity: .55; }
}

.animate-pulse {
    animation: wrd-denyut 2.4s cubic-bezier(.4, 0, .6, 1) infinite;
}

/* ==========================================================================
   5. Layar sempit
   ========================================================================== */

@media (max-width: 640px) {
    /* Kartu angka dua kolom, bukan satu. Satu kolom membuat halaman
       sepanjang enam layar penuh hanya untuk enam angka. */
    .fi-wi-stats-overview-stats-ctn {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .fi-wi-stats-overview-stat {
        min-height: 96px;
        padding: .75rem;
    }

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

    .fi-wi-stats-overview-stat-description {
        font-size: .6875rem;
    }

    /* Keterangan diagram memakan tinggi kanvas di layar sempit. */
    .fi-wi-chart canvas {
        max-height: 240px !important;
    }

    /* Pembungkusnya ikut mengecil, kalau tidak kanvasnya menyisakan celah. */
    .fi-wi-chart .fi-section-content > div > div,
    .fi-wi-chart div:has(> canvas) {
        height: 240px;
    }
}

/* ===========================================================================
   DIAGRAM — kanvas harus mengisi kartunya
   ===========================================================================
   MASALAHNYA
   ---------------------------------------------------------------------------
   Diukur di /app: kanvas diagram batang berukuran 300x150 px di dalam kartu
   setinggi 431 px — sekitar 280 px ruang kosong. Rasio 300:150 persis dua
   banding satu, yaitu ukuran BAWAAN elemen <canvas> yang belum pernah diubah
   siapa pun.

   Penyebabnya bukan `maintainAspectRatio`, yang memang sudah false di kedua
   widget. Chart.js yang responsif mengambil ukuran dari elemen INDUK kanvas.
   Filament membungkus kanvas dengan sebuah div biasa tanpa tinggi, jadi
   tinggi induk mengikuti tinggi kanvas, dan tinggi kanvas mengikuti induknya.
   Keduanya saling menunggu, lalu Chart.js memakai angka bawaan 150 px.

   Memberi tinggi pada pembungkusnya memutus lingkaran itu. Lebarnya ikut
   penuh, sehingga kanvas terpusat dengan sendirinya — bukan digeser dengan
   padding-left yang dihitung tangan.

   Tinggi yang sama untuk kedua diagram sekaligus membuat kedua kartunya
   sama tinggi, yang memang diminta.
   ------------------------------------------------------------------------ */
.fi-wi-chart .fi-section-content > div > div,
.fi-wi-chart div:has(> canvas) {
    height: var(--wr-tinggi-diagram, 320px);
}

/*
 * Rantai lebarnya harus dibuka dari atas.
 *
 * `.fi-section-content-ctn` adalah flex row, dan anaknya menyusut mengikuti
 * isinya. Karena isinya kanvas selebar 300 px bawaan, seluruh rantai ikut
 * 300 px: kanvas menentukan lebar induk, induk menentukan lebar kanvas.
 * `width: 100%` pada kanvas saja tidak menolong — persentase terhadap induk
 * yang lebarnya auto tetap berujung ke angka yang sama.
 */
.fi-wi-chart .fi-section-content {
    flex: 1 1 auto;
    min-width: 0;
}

.fi-wi-chart .fi-section-content > div,
.fi-wi-chart .fi-section-content > div > div {
    width: 100%;
}

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

/*
 * Judul section boleh menyusut, bukan meluber.
 *
 * Baris judul adalah flex berisi judul, deskripsi, dan tombol lipat. Tanpa
 * `min-width: 0`, anak flex menolak menyusut di bawah lebar isinya, dan
 * barisnya meluber 8 px ke luar kartu.
 */
.fi-section-header > .flex,
.fi-section-header > .flex > * {
    min-width: 0;
}

/* Kalau tetap tidak muat, membungkus lebih baik daripada meluber. */
.fi-section-header > .flex {
    flex-wrap: wrap;
}

/*
 * Kartu diagram dalam satu baris dirata-tinggikan.
 *
 * Judul dan deskripsinya masing-masing satu baris, jadi setelah kanvasnya
 * setinggi angka yang sama, kartunya ikut sama tinggi.
 */
.fi-wi-chart,
.fi-wi-chart > .fi-section {
    height: 100%;
}

@media (prefers-reduced-motion: reduce) {
    .animate-pulse {
        animation: none;
    }
}