/* ===================================================================
 * Panel theme — Filament v5
 * Lokasi: resources/css/filament/theme.css (dipakai SEMUA panel)
 *
 * PLAIN CSS — JANGAN pakai @apply / @import Tailwind di file ini.
 * File ini didaftarkan apa adanya lewat FilamentAsset::register([Css::make(...)])
 * di AdminPanelProvider::boot() dan dipublish murni via
 * `php artisan filament:assets` — tanpa build step, jadi jalan di hosting
 * yang tidak punya Node.js.
 *
 * Konsekuensinya berlaku ke SELURUH panel: utility class Tailwind
 * (flex, gap-3, px-3, text-end, ...) TIDAK ada di bundle CSS Filament.
 * Blade custom apa pun — widget, halaman, layout — harus memakai class
 * sungguhan yang didefinisikan di file ini. Ini bukan preferensi gaya;
 * di MDO Internal sebuah widget sempat render nyaris tanpa style karena
 * memakai utility Tailwind yang tidak pernah ada di bundle.
 *
 * ⚠️ Nama class `.fi-*` di bawah adalah internal Filament dan BERUBAH antar
 * major version. File ini dicocokkan ke v5. Kalau panel di-upgrade, cek ulang
 * dengan inspect element sebelum menganggap tema rusak.
 * =================================================================== */

/* ═══════════════════════════════════════════════════════════════════
 * ADAPT — ini SATU-SATUNYA blok yang perlu diganti per project.
 * Enam nilai di bawah menentukan seluruh identitas visual panel.
 * Sisa file ini biarkan apa adanya.
 * ═══════════════════════════════════════════════════════════════════ */
:root {
    --app-chrome: #142a4d;        /* sidebar — versi gelap dari biru HY London */
    --app-chrome-2: #1c3866;      /* elevasi/hover di atas chrome */
    --app-on-chrome: #e8eef7;     /* teks utama di atas chrome */
    --app-on-chrome-muted: #a9bddb; /* teks/ikon sekunder */
    --app-brand: #2d5fa3;         /* AKSI — sama dengan config('platform.brand.color') */
    --app-brand-hover: #1e3a6e;
}

/*
 * Cara memilih nilainya (bukan tebak-tebakan):
 *   --app-brand   = warna logo. Ini yang dipakai untuk AKSI.
 *   --app-chrome  = hue yang SAMA dengan brand, tapi digelapkan sampai teks
 *                   putih di atasnya kontras tinggi. Bukan abu-abu netral.
 *                   Sidebar gelap sewarna brand terbaca sebagai identitas;
 *                   sidebar abu-abu terbaca sebagai "template default".
 *   --app-chrome-2 = --app-chrome dinaikkan ~8% lightness.
 *
 * Pelajaran dari MDO Internal: palet olive `#414a2c` sempat dipakai karena
 * terlihat "kalem", tapi terbaca kecoklatan dan tidak satu keluarga dengan
 * logo hijau — akhirnya diganti. Kalau chrome dan logo tidak sehue, panel
 * terasa seperti dua aplikasi yang ditempel.
 *
 * --app-brand di sini HARUS sama dengan Color::hex(...) di ->colors()
 * pada AdminPanelProvider. Dua tempat, satu nilai.
 */

/* ═══════════════════════════════════════════════════════════════════
 * SIDEBAR — chrome gelap di light & dark mode
 * Sengaja tetap gelap di kedua mode: itu identitas brand, bukan
 * "gray netral seperti biasa".
 * ═══════════════════════════════════════════════════════════════════ */
.fi-sidebar {
    background-color: var(--app-chrome) !important;
}

.fi-sidebar-header {
    background-color: transparent !important;
    box-shadow: none !important;
}

.fi-sidebar-item-label {
    color: var(--app-on-chrome-muted) !important;
}

.fi-sidebar-item-btn > .fi-icon {
    color: var(--app-on-chrome-muted) !important;
}

.fi-sidebar-item-btn:hover {
    background-color: color-mix(in srgb, var(--app-on-chrome) 10%, transparent) !important;
}

.fi-sidebar-item-btn:hover > .fi-sidebar-item-label,
.fi-sidebar-item-btn:hover > .fi-icon {
    color: var(--app-on-chrome) !important;
}

/* Item aktif: blok brand PENUH, bukan tint transparan. Di atas chrome yang
   sudah berwarna, tint 26% nyaris tidak terbaca sebagai "aktif". Garis putih
   di tepi kiri memberi penanda posisi yang tetap terlihat walau user buta
   warna. */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: var(--app-brand) !important;
    box-shadow: inset 3px 0 0 0 #ffffff !important;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon {
    color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════
 * KATEGORI / GRUP NAV
 * Label grup (TRANSAKSI / DATA & LAPORAN / SISTEM) dibuat kecil, renggang,
 * dan redup — perannya PEMISAH, bukan item yang bersaing dengan menu.
 * Garis tipis antar grup memberi batas tanpa menambah berat visual.
 * ═══════════════════════════════════════════════════════════════════ */
.fi-sidebar-group-label {
    color: color-mix(in srgb, var(--app-on-chrome-muted) 78%, transparent) !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

.fi-sidebar-group + .fi-sidebar-group {
    margin-top: 0.5rem !important;
    padding-top: 0.5rem !important;
    border-top: 1px solid color-mix(in srgb, var(--app-on-chrome) 12%, transparent) !important;
}

/* ═══════════════════════════════════════════════════════════════════
 * LOGIN SPLIT-SCREEN
 * Dipakai App\Filament\Auth\Login + layout
 * resources/views/filament/auth/split-layout.blade.php
 *
 * SEMUA selector di-scope ke `.app-login`. Ini bukan kerapian belaka:
 * override bentuk input di bawah (garis-bawah, bukan kotak) memakai
 * `.fi-input-wrp` yang dipakai di SELURUH form aplikasi. Tanpa scope,
 * setiap form di panel ikut berubah bentuk.
 * ═══════════════════════════════════════════════════════════════════ */
.app-login {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    background-color: #ffffff;
}

/* ── Panel kiri (art) ───────────────────────────────────────────────── */
.app-login__art {
    position: relative;
    display: none; /* mobile: sembunyikan, form ambil layar penuh */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    width: 48%;
    max-width: 40rem;
    padding: 3rem;
    overflow: hidden;
    background-color: var(--app-chrome);
    /* Gradien sekeluarga dengan --app-chrome. ADAPT: nilai stop terakhir
       (#0d2f4a) = --app-chrome digelapkan lagi ~35%. Kalau chrome diganti
       tapi stop ini tidak, panel login jadi belang sendirian sementara
       sidebar sudah berubah. */
    background-image: linear-gradient(160deg, var(--app-chrome-2) 0%, var(--app-chrome) 55%, #0d2f4a 100%);
    color: var(--app-on-chrome);
}

@media (min-width: 860px) {
    .app-login__art {
        display: flex;
    }
}

.app-login__art-decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Bentuk dekoratif — opacity sangat rendah supaya jadi tekstur, bukan
   gambar yang menarik perhatian dari form. */
.app-login__shape {
    position: absolute;
    color: #ffffff;
    opacity: 0.07;
}

.app-login__shape--1 {
    width: 22rem;
    top: -5rem;
    right: -6rem;
    transform: rotate(28deg);
}

.app-login__shape--2 {
    width: 16rem;
    bottom: -4rem;
    left: -5rem;
    transform: rotate(-15deg);
}

.app-login__dot {
    position: absolute;
    border-radius: 9999px;
    background-color: var(--app-brand);
    opacity: 0.5;
}

.app-login__dot--1 {
    width: 0.6rem;
    height: 0.6rem;
    top: 22%;
    left: 18%;
}

.app-login__dot--2 {
    width: 1rem;
    height: 1rem;
    bottom: 26%;
    right: 20%;
    opacity: 0.35;
}

.app-login__dot--3 {
    width: 0.4rem;
    height: 0.4rem;
    top: 62%;
    left: 26%;
    opacity: 0.6;
}

.app-login__mark {
    position: relative;
    width: 8.5rem;
    height: 8.5rem;
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.28));
}

.app-login__mark svg {
    width: 100%;
    height: 100%;
}

.app-login__art-copy {
    position: relative;
    max-width: 24rem;
    text-align: center;
}

.app-login__art-title {
    margin: 0 0 0.6rem;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.35;
    color: #ffffff;
}

.app-login__art-sub {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--app-on-chrome-muted);
}

/* ── Panel kanan (form) ─────────────────────────────────────────────── */
.app-login__panel {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
}

.app-login__panel-inner {
    width: 100%;
    max-width: 22rem;
}

.app-login__wordmark {
    margin: 0 0 2.25rem;
    font-family: Georgia, 'Times New Roman', serif; /* ADAPT: font brand */
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-align: center;
    color: var(--app-chrome);
}

.app-login__welcome {
    margin: 0 0 2rem;
    font-size: 1rem;
    text-align: center;
    color: #5b6773;
}

.app-login__foot {
    margin: 1.75rem 0 0;
    font-size: 0.75rem;
    text-align: center;
    color: #8a94a0;
}

/* ── Bentuk field: garis-bawah, bukan kotak ─────────────────────────── */
/* Label kecil & muted, TANPA uppercase — `.fi-fo-field-label` juga dipakai
   checkbox "Ingat saya"; uppercase bikin checkbox ikut berteriak. */
.app-login .fi-fo-field-label {
    font-size: 0.75rem;
    font-weight: 400;
    color: #8a94a0;
}

.app-login .fi-input-wrp {
    border: 0 !important;
    border-bottom: 1px solid #c9d2db !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease;
}

.app-login .fi-input-wrp:focus-within {
    border-bottom-color: var(--app-brand) !important;
    box-shadow: 0 1px 0 0 var(--app-brand) !important;
}