/*
 * Tema tampilan bergaya Olsera untuk dashboard Filament.
 *
 * Dimuat lewat render hook STYLES_AFTER di AdminPanelProvider, jadi berkas ini
 * SELALU dibaca setelah stylesheet bawaan Filament dan bisa menimpanya tanpa
 * `!important` kecuali di tempat yang memang ditandai.
 *
 * Berkas ini sengaja CSS biasa, bukan tema Filament yang dikompilasi.
 * Alasannya: proyek ini belum pernah memakai npm/vite untuk aset dashboard,
 * dan menambahkan langkah build hanya demi warna akan membuat perintah
 * "jalankan dashboard" di SESSION_HANDOFF.md tidak lagi cukup. Kelas `fi-*`
 * Filament v5 semuanya semantik, jadi menimpanya dari luar aman.
 *
 * Semua warna dikumpulkan di satu tempat di bawah supaya bisa diubah tanpa
 * mengubah aturannya.
 */

:root {
    --olsera-topbar: #1b74d1;
    --olsera-topbar-teks: #ffffff;
    --olsera-topbar-teks-redup: #cfe3f8;

    --olsera-sidebar: #ffffff;
    --olsera-sidebar-garis: #e6eaf0;
    --olsera-sidebar-teks: #3a4454;
    --olsera-sidebar-ikon: #8a94a6;
    --olsera-sidebar-aktif-teks: #1b74d1;
    --olsera-sidebar-aktif-latar: #eaf2fd;

    --olsera-identitas: #22314f;
    --olsera-identitas-teks: #ffffff;
    --olsera-identitas-teks-redup: #9fb0cd;

    --olsera-halaman: #f4f6f9;
    --olsera-kartu: #ffffff;
    --olsera-kartu-garis: #e6eaf0;

    --olsera-tabel-kepala: #f7f9fc;
    --olsera-tabel-kepala-teks: #4a5568;
    --olsera-tabel-garis: #edf1f6;

    --olsera-modul-teks: #5a6577;
    --olsera-modul-aktif: #1b74d1;
}

/* Mode gelap: hanya nilai yang diganti, aturannya tetap sama. */
.dark {
    --olsera-topbar: #14335c;
    --olsera-sidebar: #17202e;
    --olsera-sidebar-garis: #24303f;
    --olsera-sidebar-teks: #c7d0de;
    --olsera-sidebar-ikon: #7b879a;
    --olsera-sidebar-aktif-latar: #1d2f4a;
    --olsera-sidebar-aktif-teks: #6fb0f5;

    --olsera-identitas: #0f1a2b;

    --olsera-halaman: #0f151f;
    --olsera-kartu: #17202e;
    --olsera-kartu-garis: #24303f;

    --olsera-tabel-kepala: #1b2534;
    --olsera-tabel-kepala-teks: #9aa6b8;
    --olsera-tabel-garis: #24303f;

    --olsera-modul-teks: #9aa6b8;
    --olsera-modul-aktif: #6fb0f5;
}

/* ------------------------------------------------------------------ *
 * 1. Bilah atas biru
 * ------------------------------------------------------------------ */

.fi-topbar > nav,
.fi-topbar-ctn {
    background-color: var(--olsera-topbar);
    border-bottom: 0;
    box-shadow: none;
}

/*
 * Ikon dan tombol di bilah atas dipaksa putih. Dropdown yang muncul DARI
 * bilah atas dikecualikan di aturan berikutnya — kalau tidak, isi menu
 * pengguna ikut jadi putih di atas latar putih dan tidak terbaca.
 */
.fi-topbar > nav :is(button, a, span, svg, h1, h2) {
    color: var(--olsera-topbar-teks);
}

.fi-topbar > nav svg {
    color: var(--olsera-topbar-teks-redup);
}

.fi-topbar .fi-dropdown-panel,
.fi-topbar .fi-dropdown-panel :is(button, a, span, svg, p) {
    color: initial;
}

.fi-topbar .fi-dropdown-panel {
    background-color: var(--olsera-kartu);
}

/* Kotak Pencarian global di bilah atas dibuat transparan-terang. */
.fi-topbar .fi-global-search-field input {
    background-color: rgba(255, 255, 255, 0.16);
    color: var(--olsera-topbar-teks);
    border-color: transparent;
}

.fi-topbar .fi-global-search-field input::placeholder {
    color: var(--olsera-topbar-teks-redup);
}

/* ------------------------------------------------------------------ *
 * 2. Jejak halaman "Modul / Halaman" di bilah atas
 * ------------------------------------------------------------------ */

.tb-jejak {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.05rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
}

.tb-jejak-modul {
    font-weight: 700;
    color: var(--olsera-topbar-teks);
}

.tb-jejak-pisah {
    color: var(--olsera-topbar-teks-redup);
    font-weight: 300;
}

.tb-jejak-halaman {
    font-weight: 400;
    color: var(--olsera-topbar-teks);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ------------------------------------------------------------------ *
 * 3. Bilah tab halaman-bersaudara, tepat di bawah bilah atas
 * ------------------------------------------------------------------ */

.tb-modul {
    background-color: var(--olsera-kartu);
    border-bottom: 1px solid var(--olsera-kartu-garis);
    overflow-x: auto;
}

.tb-modul-isi {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    gap: 0.25rem;
    min-width: max-content;
    padding: 0 1rem;
}

.tb-modul-item {
    display: flex;
    align-items: center;
    padding: 0.85rem 1.1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--olsera-modul-teks);
    border-bottom: 3px solid transparent;
    text-decoration: none;
    white-space: nowrap;
    transition: color 120ms ease, border-color 120ms ease;
}

.tb-modul-item:hover {
    color: var(--olsera-modul-aktif);
}

/*
 * Olsera tidak menandai tab yang sedang dibuka sama sekali — kami tandai,
 * karena tanpa penanda petugas mudah tersesat di antara halaman yang
 * namanya mirip (Stok Masuk / Stok Keluar).
 */
.tb-modul-item-aktif {
    color: var(--olsera-modul-aktif);
    font-weight: 700;
    border-bottom-color: var(--olsera-modul-aktif);
}

/* ------------------------------------------------------------------ *
 * 4. Sidebar putih
 * ------------------------------------------------------------------ */

.fi-sidebar {
    background-color: var(--olsera-sidebar);
    border-right: 1px solid var(--olsera-sidebar-garis);
}

.fi-sidebar-header {
    background-color: var(--olsera-sidebar);
    border-bottom: 1px solid var(--olsera-sidebar-garis);
    box-shadow: none;
}

.fi-sidebar-item-btn {
    color: var(--olsera-sidebar-teks);
    border-radius: 0.5rem;
}

.fi-sidebar-item-icon {
    color: var(--olsera-sidebar-ikon);
}

.fi-sidebar-item-btn:hover {
    background-color: var(--olsera-sidebar-aktif-latar);
}

.fi-sidebar-item.fi-active .fi-sidebar-item-btn {
    background-color: var(--olsera-sidebar-aktif-latar);
    color: var(--olsera-sidebar-aktif-teks);
    font-weight: 600;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: var(--olsera-sidebar-aktif-teks);
}

.fi-sidebar-group-label {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--olsera-sidebar-ikon);
    font-weight: 700;
}

/* Kartu identitas pemilik di puncak sidebar. */
.tb-identitas {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0.75rem 0.75rem 0.25rem;
    padding: 0.7rem 0.8rem;
    border-radius: 0.75rem;
    background-color: var(--olsera-identitas);
    color: var(--olsera-identitas-teks);
}

.tb-identitas-inisial {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.15);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
}

.tb-identitas-teks {
    min-width: 0;
}

.tb-identitas-nama {
    font-size: 0.85rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tb-identitas-peran {
    font-size: 0.72rem;
    color: var(--olsera-identitas-teks-redup);
}

/* Saat sidebar dilipat, kartu identitas ikut menyusut jadi lingkaran saja. */
.fi-sidebar:not(.fi-sidebar-open) .tb-identitas-teks {
    display: none;
}

.fi-sidebar:not(.fi-sidebar-open) .tb-identitas {
    justify-content: center;
    padding: 0.5rem;
}

/* ------------------------------------------------------------------ *
 * 5. Badan halaman dan kartu
 * ------------------------------------------------------------------ */

.fi-main-ctn {
    background-color: var(--olsera-halaman);
}

.fi-main {
    padding-top: 1.25rem;
}

.fi-header-heading {
    font-size: 1.35rem;
    font-weight: 700;
}

/*
 * Subjudul dipakai untuk jumlah baris ("498 produk") seperti di Olsera —
 * kecil dan redup, tepat di bawah judul.
 */
.fi-header-subheading {
    font-size: 0.8rem;
    margin-top: 0.15rem;
}

.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat {
    background-color: var(--olsera-kartu);
    border: 1px solid var(--olsera-kartu-garis);
    border-radius: 0.6rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

/* ------------------------------------------------------------------ *
 * 6. Tabel
 * ------------------------------------------------------------------ */

.fi-ta-header-cell {
    background-color: var(--olsera-tabel-kepala);
    color: var(--olsera-tabel-kepala-teks);
    font-weight: 600;
    font-size: 0.78rem;
    white-space: nowrap;
}

.fi-ta-row {
    border-bottom: 1px solid var(--olsera-tabel-garis);
}

.fi-ta-row:nth-child(even) {
    background-color: color-mix(in srgb, var(--olsera-tabel-kepala) 45%, transparent);
}

.fi-ta-row:hover {
    background-color: var(--olsera-sidebar-aktif-latar);
}

.fi-ta-cell {
    font-size: 0.85rem;
}

/* Kolom pertama dibuat menonjol seperti nomor dokumen di Olsera. */
.fi-ta-text-item-label {
    line-height: 1.35;
}

/* ------------------------------------------------------------------ *
 * 7. Kotak kode produk — pengganti kolom Foto milik Olsera
 * ------------------------------------------------------------------ */

/*
 * Ukurannya disamakan dengan thumbnail foto Olsera (40px) supaya tinggi
 * barisnya sama, dan tetap terbaca saat kodenya empat karakter.
 */
.tb-kotak-kode {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.4rem;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    /* Kedelapan warna paletnya gelap, jadi teks putih selalu cukup kontras. */
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

/* Peringatan kategori lepas di halaman Grup Produk. */
.tb-kategori-lepas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.tb-kategori-lepas-item {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background-color: #fef3c7;
    color: #92400e;
    font-size: 0.75rem;
    font-weight: 600;
}

.dark .tb-kategori-lepas-item {
    background-color: #422006;
    color: #fcd34d;
}

/* ---------------------------------------------------------------------------
   Penanda jenis di pojok kartu ringkasan (Dashboard Gudang).

   Enam kartu ringkasan menjawab pertanyaan yang berbeda-beda: tiga berisi
   angka, tiga berisi NAMA. Tanpa penanda, keenamnya terlihat sejenis dan
   "Gamis Aisyah Navy M" di posisi angka membingungkan sekejap.

   Penandanya diletakkan lewat atribut `data-jenis` pada kartunya
   (App\Filament\Widgets\RingkasanGudang), bukan lewat elemen tambahan di
   Blade — kartu Filament dirender komponen bawaan yang tidak dipublikasikan
   ke proyek ini, jadi menyisipkan elemen ke dalamnya berarti menyalin
   seluruh viewnya dan menanggung pembaruannya selamanya.
   --------------------------------------------------------------------------- */
[data-jenis] {
    position: relative;
}

[data-jenis]::after {
    content: attr(data-jenis);
    position: absolute;
    top: 0.75rem;
    right: 0.85rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background-color: #f1f5f9;
    color: #64748b;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
}

.dark [data-jenis]::after {
    background-color: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
}