/*
 * Tema hijau Javanica — Filament v5. Chrome (sidebar) SENGAJA tetap gelap di
 * light & dark mode: itu identitas brand, bukan "gray netral seperti biasa".
 * Hijau brand `#008e44` (diambil dari logo) dipakai untuk AKSI — tombol utama,
 * item nav aktif; chrome memakai versi gelap dari hue yang sama.
 *
 * Palette "Emerald Deep" (21 Agu 2026) menggantikan olive/army `#414a2c` yang
 * lama. Alasan ganti: olive terbaca kecoklatan dan tidak satu keluarga dengan
 * logo, serta terlalu gelap/redup untuk dipandang seharian. Emerald Deep tetap
 * gelap (teks putih kontras tinggi) tapi jelas terbaca HIJAU dan sewarna logo.
 * Nilai lama dicatat di sini supaya tidak dikembalikan tanpa sengaja:
 *   lama: --mdo-army #414a2c · on-army #eef1e4 · on-army-muted #b3bd9f
 *
 * ⚠️ `setting_n_colour.md` §1-2 masih menulis nilai olive lama (dokumen itu
 * ditulis untuk era Next.js). Kalau dokumen itu diperbarui, samakan ke sini —
 * file INI yang sungguhan dipakai panel.
 *
 * PLAIN CSS — JANGAN pakai @apply/@import Tailwind di sini. Hosting production
 * tidak support Node.js (AGENTS.md §Deploy), jadi file ini didaftarkan apa
 * adanya lewat FilamentAsset::register() (AdminPanelProvider::boot()) dan
 * dipublish murni via `php artisan filament:assets` — tanpa build step apa pun.
 */
:root {
    --mdo-army: #14603c;        /* chrome sidebar — emerald gelap */
    --mdo-army-2: #1b7049;      /* elevasi/hover di atas chrome */
    --mdo-on-army: #e8f3ec;     /* teks utama di atas chrome */
    --mdo-on-army-muted: #a9c7b5; /* teks/ikon sekunder di atas chrome */
    --mdo-brand: #008e44;       /* aksi — hijau logo, JANGAN diubah */
    --mdo-brand-hover: #00743a;
}

.fi-sidebar {
    background-color: var(--mdo-army) !important;
}

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

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

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

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

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

/* Item aktif: blok brand PENUH, bukan tint transparan. Di atas chrome emerald
   yang sudah hijau, tint 26% nyaris tidak terbaca sebagai "aktif". */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: var(--mdo-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;
}

/* Header actions (tombol di atas ViewRecord/EditRecord, mis. halaman Invoice)
   bawaan Filament TIDAK wrap dan TIDAK overflow-x — kalau tombolnya kebanyakan
   (mis. Invoice Admin: Unduh Invoice, Unduh Resume, Upload Bukti Transfer,
   Koreksi Tanggal DELIVERED, Buat Retur, Kontrak Program = 6 tombol), sisanya
   terpotong diam-diam di tepi kanan layar (feedback tim item 12).
   Fix ini butuh 2 override, bukan cuma flex-wrap:
   1. Vendor CSS set `.fi-header-actions-ctn{flex-shrink:0}` — flex item yang
      TIDAK BOLEH menyusut dihitung browser dengan lebar "muat 1 baris penuh"
      (shrink-to-fit ke max-content), jadi flex-wrap tidak pernah kepicu sama
      sekali walau sudah di-set wrap. Harus flex-shrink:1 dulu.
   2. Default flex item punya `min-width:auto` (bukan 0) — mengunci lebar
      minimum ke konten, jadi tetap menolak menyusut/wrap meski induk sudah
      boleh menyusut. Harus min-width:0 juga. (Gotcha flexbox klasik — 2 baris
      ini WAJIB bareng, salah satu saja tidak cukup, sudah dibuktikan lewat
      Playwright: coba cuma flex-wrap dulu, tombol tetap 1 baris & terpotong.) */
.fi-header-actions-ctn {
    flex-wrap: wrap;
    flex-shrink: 1;
    row-gap: 0.5rem;
}

.fi-header-actions-ctn > .fi-ac {
    flex-wrap: wrap;
    min-width: 0;
    row-gap: 0.5rem;
}

/* Label grup nav (TRANSAKSI / MASTER DATA / SISTEM) — kecil, renggang, redup;
   berfungsi sebagai pemisah, bukan item yang bersaing dengan menu. */
.fi-sidebar-group-label {
    color: color-mix(in srgb, var(--mdo-on-army-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(--mdo-on-army) 12%, transparent) !important;
}

/* ===================================================================
 * Widget "Rekap per Toko/Customer" (fitur 007) —
 * resources/views/filament/widgets/rekap-per-toko-widget.blade.php
 *
 * ⚠️ Blade widget ini SEMULA memakai class utility Tailwind (flex, gap-3,
 * ms-auto, px-3, text-end, tabular-nums, ...). TIDAK SATU PUN dari class itu
 * ada di CSS bundel Filament — sudah dicek satu per satu di
 * public/css/filament/filament/app.css. Akibatnya seluruh widget render nyaris
 * tanpa style: baris filter menumpuk vertikal selebar layar, angka tabel tidak
 * rata kanan. Panel ini tidak punya build Tailwind (hosting tanpa Node.js,
 * AGENTS.md §Deploy), jadi utility class HARUS diganti CSS sungguhan seperti
 * di bawah — jangan tergoda menambah class Tailwind baru di blade manapun.
 * =================================================================== */
.mdo-rekap__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.mdo-rekap__field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.mdo-rekap__field label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #6b7280;
}

.mdo-rekap__field input,
.mdo-rekap__field select {
    height: 2.25rem;
    padding: 0 0.625rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    background-color: #ffffff;
    font-size: 0.875rem;
    color: #111827;
}

.mdo-rekap__field input:focus,
.mdo-rekap__field select:focus {
    outline: 2px solid var(--mdo-brand);
    outline-offset: -1px;
    border-color: var(--mdo-brand);
}

/* Tombol export didorong ke ujung kanan toolbar. */
.mdo-rekap__actions {
    display: flex;
    gap: 0.5rem;
    margin-inline-start: auto;
}

.mdo-rekap__scroll {
    overflow-x: auto;
}

.mdo-rekap__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.mdo-rekap__table th {
    padding: 0.5rem 0.75rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280;
    text-align: start;
    white-space: nowrap;
}

.mdo-rekap__table td {
    padding: 0.5rem 0.75rem;
    border-top: 1px solid #f3f4f6;
}

/* Kolom angka: rata kanan + digit lebar sama supaya kolom rupiah sejajar
   dan mudah dibandingkan antar baris. */
.mdo-rekap__table .num {
    text-align: end;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mdo-rekap__table tbody tr:nth-child(even) {
    background-color: #fafbfa;
}

.mdo-rekap__table .is-overdue {
    color: #b42318;
    font-weight: 500;
}

.mdo-rekap__table .is-piutang {
    font-weight: 600;
}

.mdo-rekap__table tfoot td {
    border-top: 2px solid #e5e7eb;
    font-weight: 700;
}

.mdo-rekap__kosong {
    padding: 1.5rem 0.75rem;
    text-align: center;
    color: #6b7280;
}

.mdo-rekap__more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #f3f4f6;
    font-size: 0.8125rem;
    color: #6b7280;
}

.dark .mdo-rekap__more {
    border-top-color: rgba(255, 255, 255, 0.06);
}

.mdo-rekap__badge {
    display: inline-block;
    margin-inline-start: 0.375rem;
    padding: 0.05rem 0.375rem;
    border-radius: 0.375rem;
    background-color: #fff7ed;
    border: 1px solid #fdba74;
    color: #9a3412;
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
}

.mdo-rekap__link {
    color: var(--mdo-brand-ink, #026b38);
    font-weight: 500;
}

.mdo-rekap__link:hover {
    text-decoration: underline;
}

.dark .mdo-rekap__field input,
.dark .mdo-rekap__field select {
    background-color: #1f2937;
    border-color: #4b5563;
    color: #f3f4f6;
}

.dark .mdo-rekap__table td {
    border-top-color: rgba(255, 255, 255, 0.06);
}

.dark .mdo-rekap__table tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.02);
}

.dark .mdo-rekap__table tfoot td {
    border-top-color: rgba(255, 255, 255, 0.12);
}

/* ===================================================================
 * Halaman "Pencapaian MDO" (fitur 018) —
 * resources/views/filament/pages/pencapaian-mdo.blade.php
 * Toolbar & tabel memakai .mdo-rekap__* di atas; di sini hanya kartu,
 * baris info, tab, dan lencana status ongkir.
 * =================================================================== */
.mdo-capai {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.mdo-capai .mdo-rekap__toolbar {
    margin-bottom: 0;
}

.mdo-capai__kartu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
    gap: 0.875rem;
}

.mdo-capai__kartu {
    padding: 1rem 1.125rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    background-color: #ffffff;
}

.mdo-capai__label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #6b7280;
}

.mdo-capai__nilai {
    margin-top: 0.25rem;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
    color: #111827;
    white-space: nowrap;
}

.mdo-capai__nilai.is-potong {
    color: #b42318;
}

.mdo-capai__ket {
    margin-top: 0.375rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: #6b7280;
}

/* Payment bersih = angka yang dicari; satu-satunya kartu berlatar brand. */
.mdo-capai__kartu.is-utama {
    border-color: var(--mdo-brand);
    background-color: #f0f9f4;
}

.mdo-capai__kartu.is-utama .mdo-capai__nilai {
    color: var(--mdo-brand-ink, #026b38);
}

.mdo-capai__info {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 1.5rem;
    font-size: 0.8125rem;
    color: #6b7280;
}

.mdo-capai__info strong {
    color: #374151;
    font-variant-numeric: tabular-nums;
}

.mdo-capai__tabs {
    margin-bottom: 1rem;
}

.mdo-capai__subjudul {
    margin-top: 1.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #111827;
}

.mdo-capai__tabs + .mdo-capai__subjudul {
    margin-top: 0;
}

.mdo-capai__catatan {
    margin: 0.125rem 0 0.625rem;
    font-size: 0.8125rem;
    color: #6b7280;
}

.mdo-capai__status {
    display: inline-block;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.mdo-capai__status.is-beban {
    background-color: #ecfdf3;
    color: #026b38;
}

.mdo-capai__status.is-tunggu {
    background-color: #fff7ed;
    color: #9a3412;
}

.dark .mdo-capai__kartu {
    background-color: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
}

.dark .mdo-capai__kartu.is-utama {
    background-color: rgba(0, 142, 68, 0.14);
    border-color: var(--mdo-brand);
}

.dark .mdo-capai__nilai,
.dark .mdo-capai__subjudul {
    color: #f3f4f6;
}

.dark .mdo-capai__kartu.is-utama .mdo-capai__nilai {
    color: #6ee7a8;
}

.dark .mdo-capai__nilai.is-potong {
    color: #fca5a5;
}

.dark .mdo-capai__info strong {
    color: #e5e7eb;
}

.dark .mdo-capai__status.is-beban {
    background-color: rgba(0, 142, 68, 0.2);
    color: #6ee7a8;
}

.dark .mdo-capai__status.is-tunggu {
    background-color: rgba(253, 186, 116, 0.15);
    color: #fdba74;
}

/* ===================================================================
 * Login split-screen — dipakai App\Filament\Auth\Login + layout
 * resources/views/filament/auth/split-layout.blade.php.
 *
 * SEMUA selector di-scope ke `.mdo-login` supaya override bentuk input
 * (garis-bawah, bukan kotak) TIDAK bocor ke form lain di seluruh app —
 * class .fi-input-wrp dipakai di mana-mana, kalau di-override global
 * seluruh form PO/retur ikut berubah.
 * =================================================================== */
.mdo-login {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    background-color: #ffffff;
}

/* --- Panel kiri (art) --- */
.mdo-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(--mdo-army);
    /* Gradien sekeluarga dengan --mdo-army (Emerald Deep). Nilai lama era olive
       (#4d5836 / #363d24) sengaja tidak disisakan — kalau tertinggal, panel
       login jadi kecoklatan sendirian sementara sidebar sudah hijau. */
    background-image: linear-gradient(160deg, var(--mdo-army-2) 0%, var(--mdo-army) 55%, #0d4a2d 100%);
    color: var(--mdo-on-army);
}

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

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

.mdo-login__leaf {
    position: absolute;
    color: #ffffff;
    opacity: 0.07;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* --- Override bentuk field jadi garis-bawah (referensi desain) --- */
/* Label kecil & muted, TANPA uppercase — class .fi-fo-field-label juga dipakai
   checkbox "Ingat saya", uppercase bikin checkbox ikut berteriak. */
.mdo-login .fi-fo-field-label {
    font-size: 0.75rem;
    font-weight: 400;
    color: #8b917c;
}

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

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

.mdo-login .fi-input {
    padding-left: 0 !important;
    padding-right: 0 !important;
    background-color: transparent !important;
    font-size: 0.95rem;
}

/* Kotak tombol "reveal password" bawaan merusak garis-bawah — dibuat polos. */
.mdo-login .fi-input-wrp-suffix,
.mdo-login .fi-input-wrp-actions {
    border: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.mdo-login .fi-input-wrp-actions .fi-icon-btn {
    color: #8b917c !important;
}

/* --- Tombol Masuk: pill, brand hijau solid --- */
/* Default Filament v5 memberi primary tint muda (fi-bg-color-400) — terlalu
   pucat untuk tombol utama di layar putih, jadi dikunci ke brand solid. */
.mdo-login .fi-btn {
    border-radius: 9999px !important;
    padding-top: 0.65rem !important;
    padding-bottom: 0.65rem !important;
    font-weight: 500;
    letter-spacing: 0.01em;
    background-color: var(--mdo-brand) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(0, 142, 68, 0.25) !important;
}

.mdo-login .fi-btn:hover {
    background-color: #00743a !important;
}

.mdo-login .fi-btn .fi-btn-label,
.mdo-login .fi-btn .fi-icon {
    color: #ffffff !important;
}

.mdo-login .fi-checkbox-input {
    border-radius: 0.25rem;
}

.mdo-login .fi-checkbox-input:checked {
    background-color: var(--mdo-brand) !important;
    border-color: var(--mdo-brand) !important;
}

/* Dark mode: panel kanan ikut gelap, panel kiri sudah chrome (tetap sama).
   Nilai olive lama (#1b1f16 / #4a5240) diganti ke keluarga emerald. */
.dark .mdo-login,
.dark .mdo-login__panel {
    background-color: #0f1a14;
}

.dark .mdo-login__wordmark {
    color: var(--mdo-on-army);
}

.dark .mdo-login__welcome {
    color: var(--mdo-on-army-muted);
}

.dark .mdo-login .fi-input-wrp {
    border-bottom-color: #35513f !important;
}


/* ── Lonceng notifikasi topbar (1 Okt 2026) ─────────────────────────────────
   App\Livewire\LoncengNotifikasi. Label item dropdown Filament dibuat satu
   baris terpotong (nowrap) — pesan notifikasi butuh terbaca utuh, jadi
   dibungkus. Plain CSS: production tanpa build Tailwind. */
.mdo-lonceng__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem 0.375rem;
}

.mdo-lonceng__judul {
    font-size: 0.875rem;
    font-weight: 600;
}

.mdo-lonceng__tandai {
    font-size: 0.75rem;
    color: var(--mdo-brand);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.mdo-lonceng__tandai:hover {
    text-decoration: underline;
}

.mdo-lonceng__item .fi-dropdown-list-item-label {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    text-align: left;
}

.mdo-lonceng__pesan {
    font-size: 0.8125rem;
    line-height: 1.35;
}

.mdo-lonceng__item--baru .mdo-lonceng__pesan {
    font-weight: 600;
}

.mdo-lonceng__waktu {
    font-size: 0.6875rem;
    opacity: 0.65;
}

/* Panel di-teleport keluar dari .mdo-lonceng, jadi dikenali lewat isinya.
   Daftar bisa 10 item berpesan panjang — gulir di dalam, jangan lewat layar;
   dan di HP lebarnya dibatasi viewport (28rem > 390px). */
.fi-dropdown-panel:has(.mdo-lonceng__header) {
    max-height: min(32rem, 75vh);
    max-width: calc(100vw - 1rem);
    overflow-y: auto;
}