/* ===================================================================
 * 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;
}

/* Logo topbar: logo resmi + "HY London · <panel>" (pola WMS Hono). */
.app-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    height: 100%;
}

.app-brand__logo {
    height: 100%;
    width: auto;
    aspect-ratio: 1 / 1;
    border-radius: 0.4rem;
}

.app-brand__text {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    color: var(--app-chrome);
}

.app-brand__panel {
    font-weight: 500;
    color: var(--app-brand);
}

.dark .app-brand__text {
    color: var(--app-on-chrome);
}

.dark .app-brand__panel {
    color: var(--app-on-chrome-muted);
}

.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 img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 1.25rem;
}

.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;
}

/* Link "Panduan" (fitur 009) */
.app-login__foot a {
    color: var(--app-brand);
    font-weight: 600;
    text-decoration: underline;
}

/* ── 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;
}

/* ── Halaman tambah SKU: tombol form setinggi 44px di layar sentuh ──── */
@media (max-width: 40rem) {
    .sku-tambah-page .fi-sc-form .fi-btn {
        min-height: 2.75rem;
    }
}

/* ── Pilihan tipe SKU: tiap opsi jadi kotak, yang terpilih ditandai warna brand ── */
.sku-tipe-kartu.fi-fo-radio > .fi-fo-radio-label {
    align-self: stretch;
    padding: 0.75rem 0.875rem;
    border: 1px solid #d9dee5;
    border-radius: 0.75rem;
    background-color: #fff;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.sku-tipe-kartu.fi-fo-radio > .fi-fo-radio-label > .fi-fo-radio-label-text {
    align-content: start;
}

.sku-tipe-kartu.fi-fo-radio > .fi-fo-radio-label:hover {
    border-color: #aebccf;
}

.sku-tipe-kartu.fi-fo-radio > .fi-fo-radio-label:has(.fi-radio-input:checked) {
    border-color: var(--app-brand);
    background-color: #f3f7fc;
    box-shadow: 0 0 0 1px var(--app-brand);
}

.sku-tipe-kartu.fi-fo-radio > .fi-fo-radio-label:has(.fi-radio-input:disabled) {
    cursor: not-allowed;
}

/* ── Modul KOL (fitur 002): tabel kecil di halaman detail + progres posting ── */
.kol-kartu {
    display: grid;
    gap: 0.75rem;
    font-size: 0.875rem;
}

.kol-tabel {
    width: 100%;
    border-collapse: collapse;
}

.kol-tabel th {
    padding: 0.375rem 0.5rem;
    border-bottom: 1px solid #d9dee5;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: left;
    color: #5b6773;
}

.kol-tabel td {
    padding: 0.375rem 0.5rem;
    border-bottom: 1px solid #eef1f4;
    vertical-align: top;
}

.kol-tabel .kol-kanan {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.kol-catatan {
    margin: 0;
    font-size: 0.8125rem;
    color: #6b7684;
}

.kol-lipat > summary {
    cursor: pointer;
    font-weight: 600;
}

.kol-lipat[open] > summary {
    margin-bottom: 0.5rem;
}

.kol-progres {
    display: grid;
    gap: 0.25rem;
    min-width: 7rem;
}

.kol-progres__bar {
    height: 0.375rem;
    border-radius: 999px;
    background-color: #e5e9ee;
    overflow: hidden;
}

.kol-progres__isi {
    height: 100%;
    border-radius: 999px;
    background-color: var(--app-brand);
}

/* Melebihi target: bar penuh warna kuning, bukan meluber (ui-inventory §0). */
.kol-progres--lebih .kol-progres__isi {
    background-color: #d4a017;
}

.kol-progres__teks {
    font-size: 0.75rem;
    color: #6b7684;
}

.dark .kol-tabel th,
.dark .kol-catatan,
.dark .kol-progres__teks {
    color: #9aa5b1;
}

.dark .kol-tabel th,
.dark .kol-tabel td {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.dark .kol-progres__bar {
    background-color: rgba(255, 255, 255, 0.12);
}

/* ── Dashboard KOL: tab + pill ringkasan status + pipeline samping ── */
.kol-dash-head {
    display: grid;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
}

.kol-pill-baris {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.kol-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem 0.25rem 0.25rem;
    border: 1px solid #d9dee5;
    border-radius: 999px;
    background-color: transparent;
    cursor: pointer;
    font-size: 0.8125rem;
}

.kol-pill:hover {
    border-color: #aebccf;
}

.kol-pill--aktif {
    border-color: var(--app-brand);
    box-shadow: 0 0 0 1px var(--app-brand);
}

.kol-pill__jumlah {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.kol-pipa {
    display: grid;
    gap: 0.5rem;
    font-size: 0.8125rem;
}

.kol-pipa__baris {
    display: grid;
    grid-template-columns: 8.5rem 1fr 3rem;
    align-items: center;
    gap: 0.5rem;
}

.kol-pipa__bar {
    height: 0.5rem;
    border-radius: 999px;
    background-color: #eef1f4;
    overflow: hidden;
}

.kol-pipa__isi {
    height: 100%;
    border-radius: 999px;
}

.kol-pipa__jumlah {
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.kol-warna--gray { background-color: var(--gray-400); }
.kol-warna--info { background-color: var(--info-500); }
.kol-warna--warning { background-color: var(--warning-500); }
.kol-warna--success { background-color: var(--success-500); }
.kol-warna--danger { background-color: var(--danger-500); }

.kol-jarak {
    height: 1rem;
}

.dark .kol-pill {
    border-color: rgba(255, 255, 255, 0.15);
}

.dark .kol-pipa__bar {
    background-color: rgba(255, 255, 255, 0.1);
}

/* ── Budget & Rekap KOL: kartu ringkasan ── */
.kol-ringkas {
    display: grid;
    gap: 0.5rem;
}

.kol-ringkas__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.75rem;
}

.kol-ringkas__kartu {
    display: grid;
    gap: 0.25rem;
    padding: 0.875rem 1rem;
    border: 1px solid #e3e7ec;
    border-radius: 0.75rem;
    background-color: #fff;
}

.kol-ringkas__label {
    font-size: 0.8125rem;
    color: #6b7684;
}

.kol-ringkas__nilai {
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.kol-ringkas__nilai--minus,
.kol-ringkas__peringatan {
    color: var(--danger-600);
}

.kol-ringkas__peringatan {
    margin: 0;
    font-weight: 600;
}

.dark .kol-ringkas__kartu {
    border-color: rgba(255, 255, 255, 0.1);
    background-color: rgba(255, 255, 255, 0.04);
}

.dark .kol-ringkas__label {
    color: #9aa5b1;
}