/*
|--------------------------------------------------------------------------
| Ringkasan Bulanan
|--------------------------------------------------------------------------
| Hanya komponen yang khas halaman ini. Papan, kepala, kartu angka, panel,
| dan tabelnya memakai kelas .wr- dari wr-papan-eksekutif.css, termasuk
| variabel warnanya — jadi tema terang dan gelap ikut dengan sendirinya.
|
| Aturan penamaan di kepala wr-papan-eksekutif.css berlaku: satu kelas, satu
| komponen. Semua di sini berawalan .wr-ringkas-.
|
| Setelah mengubah berkas ini: php artisan filament:assets
*/

/* ---------- baris kendali: lingkup di kiri, bulan + tombol di kanan ---------- */
.wr-ringkas-kendali {
    display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
    justify-content: space-between;
}

.wr-ringkas-lingkup { display: flex; gap: 6px; flex-wrap: wrap; }

.wr-ringkas-tab {
    font: inherit; font-size: 13px; cursor: pointer;
    padding: 6px 12px; border-radius: 999px;
    border: 1px solid var(--wr-line-2);
    background: transparent; color: var(--wr-muted);
}
.wr-ringkas-tab:hover { color: var(--wr-paper); }
.wr-ringkas-tab--aktif {
    background: var(--wr-paper); color: var(--wr-ink);
    border-color: var(--wr-paper); font-weight: 600;
}
.wr-ringkas-tab--aktif:hover { color: var(--wr-ink); }

.wr-ringkas-aksi { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-left: auto; }

.wr-ringkas-bulan { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--wr-muted); }
.wr-ringkas-bulan select {
    font: inherit; font-size: 13px; color: var(--wr-paper);
    background-color: var(--wr-ink-2);
    border: 1px solid var(--wr-line-2); border-radius: 8px;
    padding: 6px 30px 6px 10px;
}

.wr-ringkas-tombol {
    font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
    padding: 7px 14px; border-radius: 8px;
    border: 1px solid var(--wr-brass);
    background: var(--wr-brass); color: var(--wr-ink-2);
}
.wr-ringkas-tombol:hover { background: var(--wr-brass-terang); border-color: var(--wr-brass-terang); }
.wr-ringkas-tombol[disabled] { opacity: .65; cursor: progress; }

.wr-ringkas-catatan {
    margin: 14px 0 0; font-size: 12px; color: var(--wr-dim); max-width: 90ch;
}
.wr-ringkas-catatan code {
    font-size: 11.5px; padding: 1px 5px; border-radius: 4px;
    background: var(--wr-ink-3); color: var(--wr-muted);
}

/*
 * ---------- narasi ----------
 * Lebar baris dibatasi supaya terbaca sebagai tulisan, bukan sebagai sel
 * tabel yang direntangkan selebar papan.
 */
.wr-ringkas-narasi {
    padding: 22px 24px; max-width: 82ch;
    font-size: 14.5px; line-height: 1.65; color: var(--wr-paper);
}
.wr-ringkas-narasi > :first-child { margin-top: 0; }
.wr-ringkas-narasi > :last-child { margin-bottom: 0; }
.wr-ringkas-narasi h1,
.wr-ringkas-narasi h2,
.wr-ringkas-narasi h3,
.wr-ringkas-narasi h4 {
    font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--wr-brass); margin: 22px 0 8px;
}
.wr-ringkas-narasi p { margin: 0 0 10px; }
.wr-ringkas-narasi ul,
.wr-ringkas-narasi ol { margin: 0 0 10px; padding-left: 20px; }
.wr-ringkas-narasi ul { list-style: disc; }
.wr-ringkas-narasi ol { list-style: decimal; }
.wr-ringkas-narasi li { margin: 3px 0; }
.wr-ringkas-narasi strong { font-weight: 600; }
.wr-ringkas-narasi em { color: var(--wr-muted); }

@media (max-width: 640px) {
    .wr-ringkas-aksi { margin-left: 0; }
    .wr-ringkas-narasi { padding: 18px 16px; }
}