/*
 * Benben Petcare — Brand tweaks untuk Filament panel
 * Diinject via AdminPanelProvider renderHook (HEAD_END).
 * Body font = Open Sans (diatur lewat ->font()). File ini menambah:
 *  - BM Jua sebagai font display untuk judul halaman & brand
 *  - Tinggi logo brand yang konsisten
 * Palet: Teal #11A1A8 (primary) · Soft Pink #FFC6C2 (accent)
 */

:root {
    --benben-teal: #11A1A8;
    --benben-pink: #FFC6C2;
    /* Font body panel: Open Sans (override default Filament 'Inter').
       @font-face didefinisikan di brand-fonts.css */
    --font-family: 'Open Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Judul halaman & section pakai BM Jua (display) */
.fi-header-heading,
.fi-section-header-heading,
.fi-modal-heading {
    font-family: 'BM Jua', 'Open Sans', ui-sans-serif, system-ui, sans-serif;
    letter-spacing: 0.01em;
}

/* Brand name teks (fallback bila logo tak termuat) */
.fi-topbar .fi-logo,
.fi-sidebar-header .fi-logo {
    font-family: 'BM Jua', 'Open Sans', sans-serif;
}

/* Logo brand: jaga proporsi & beri sedikit napas */
.fi-logo img {
    height: 2.25rem;
    width: auto;
    object-fit: contain;
}

/* =========================================================================
   Sidebar (menu kiri) — slate gelap (gaya modern, kontras tegas dgn konten)
   .fi-sidebar defaultnya bg-white (mobile) & lg:bg-transparent (desktop, ikut
   bg body abu-abu). Override jadi slate #1E293B + teks/ikon terang, dgn
   highlight item aktif teal. */
.fi-sidebar {
    background-color: #1E293B !important;  /* slate-800 */
    border-inline-end: 1px solid rgba(255, 255, 255, 0.08) !important;
}
/* Teks & ikon terang di atas latar gelap */
.fi-sidebar-item-label,
.fi-sidebar-group-label,
.fi-sidebar-group-button {
    color: #CBD5E1 !important;             /* slate-300 */
}
.fi-sidebar-item-icon,
.fi-sidebar-group-icon {
    color: #94A3B8 !important;             /* slate-400 */
}

/* Hover / focus item */
.fi-sidebar-item-button:hover,
.fi-sidebar-item-button:focus-visible {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

/* Item aktif — teal tegas + teks putih & ikon teal terang.
   PENTING: grup sidebar juga diberi class .fi-active oleh Filament saat berisi
   item aktif, jadi selektor harus menyasar <li> item-nya langsung (child >)
   agar item lain dalam grup yang sama tidak ikut ter-highlight. */
.fi-sidebar-item.fi-active > .fi-sidebar-item-button,
.fi-sidebar-item.fi-sidebar-item-active > .fi-sidebar-item-button {
    background-color: rgba(17, 161, 168, 0.30) !important;
}
.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-sidebar-item-active .fi-sidebar-item-label {
    color: #FFFFFF !important;
}
.fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.fi-sidebar-item.fi-sidebar-item-active .fi-sidebar-item-icon {
    color: #5EEAD4 !important;             /* teal terang */
}

/* ---- Sidebar kompak: padding, jarak antar grup, ikon & teks lebih kecil ----
   Default Filament: nav px-6 py-8 gap-y-7, item py-2 ikon 24px teks 0.875rem.
   Lebar sidebar diatur di AdminPanelProvider (->sidebarWidth). */
.fi-sidebar-nav {
    padding: 1.25rem 1rem;
    gap: 1.1rem;
}
.fi-sidebar-nav-groups {
    gap: 1.1rem;
}
.fi-sidebar-item-button {
    padding-block: 0.375rem;
}
.fi-sidebar-item-icon {
    height: 1.25rem;
    width: 1.25rem;
}
.fi-sidebar-item-label,
.fi-sidebar-group-label {
    font-size: 0.8125rem;
}
.fi-sidebar-group-button {
    padding-block: 0.25rem;
}

/* ---- Dark mode: tint teal gelap ---- */
.dark .fi-sidebar {
    background-color: #0D2624 !important;
    border-inline-end-color: rgba(255, 255, 255, 0.06);
}
.dark .fi-sidebar-item-button:hover,
.dark .fi-sidebar-item-button:focus-visible {
    background-color: rgba(17, 161, 168, 0.18) !important;
}
.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-button,
.dark .fi-sidebar-item.fi-sidebar-item-active > .fi-sidebar-item-button {
    background-color: rgba(17, 161, 168, 0.28) !important;
}

/* =========================================================================
   Dashboard kompak — kartu statistik lebih padat supaya muat lebih banyak
   tanpa scroll. Jumlah kolom stat diatur di StatsOverview::getColumns().
   ========================================================================= */
.fi-wi {
    gap: 0.9rem; /* jarak antar widget dashboard (default gap-6 = 1.5rem) */
}
.fi-wi-stats-overview-stats-ctn {
    gap: 0.75rem; /* jarak antar kartu stat */
}
.fi-wi-stats-overview-stat {
    padding: 0.875rem 1rem; /* default p-6 */
}
.fi-wi-stats-overview-stat-value {
    font-size: 1.375rem; /* default text-3xl (1.875rem) */
    line-height: 1.75rem;
}
.fi-wi-stats-overview-stat-label,
.fi-wi-stats-overview-stat-description {
    font-size: 0.8125rem;
}

/* =========================================================================
   Tabel list kompak — baris lebih rapat supaya lebih banyak data terlihat.
   Default Filament: isi sel px-3 py-4 (1rem atas-bawah), header py-3.5.
   Padding vertikal dipangkas ±60%; padding horizontal dibiarkan.
   Berlaku untuk semua kolom (teks, badge, ikon, checkbox, aksi) karena semua
   wrapper sel memakai utility .py-4 sebagai anak langsung <td>.
   ========================================================================= */
.fi-ta-table td.fi-ta-cell > .py-4 {
    padding-top: 0.4375rem;
    padding-bottom: 0.4375rem;
}
.fi-ta-table .fi-ta-header-cell {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* =========================================================================
   Halaman list: judul sejajar dengan baris pencarian tabel — hemat ruang atas.
   Caranya: breadcrumb ("X > Daftar", redundan) disembunyikan, judul + tombol
   dipindah rapat ke kiri, lalu header ditarik turun menimpa baris toolbar
   kartu tabel (margin-bottom negatif = tinggi header + gap-y-8 + offset
   penengah). Hanya di >= 1280px — di bawah itu judul panjang (mis. "Riwayat
   Penerimaan" + tombolnya) bertabrakan dengan kotak cari, jadi layout normal.
   Berlaku untuk semua halaman list resource (.fi-resource-list-records-page).
   ========================================================================= */
.fi-resource-list-records-page .fi-header .fi-breadcrumbs {
    display: none;
}
/* Tanpa breadcrumb, tombol aksi tak perlu turun sejajar judul (sm:mt-7) */
.fi-resource-list-records-page .fi-header > div:last-child {
    margin-top: 0;
}


/* =========================================================================
   Halaman Buat/Ubah: kompres ruang atas agar form muat ~1 layar.
   Breadcrumb redundan disembunyikan, judul dikecilkan & dirapatkan, padding
   atas konten dikurangi, jarak antar section form dipersempit.
   ========================================================================= */
.fi-resource-create-record-page .fi-breadcrumbs,
.fi-resource-edit-record-page .fi-breadcrumbs {
    display: none;
}
/* Elemen section.fi-page bawaan Filament = "flex flex-col gap-y-8 py-8":
   py-8 (2rem) = ruang atas di atas judul; gap-y-8 (2rem) = jarak judul → form.
   Pakai 2 kelas (.fi-page.fi-resource-…) agar menang atas utility .py-8/.gap-y-8. */
.fi-page.fi-resource-create-record-page,
.fi-page.fi-resource-edit-record-page {
    padding-top: 0.75rem;
    padding-bottom: 1rem;
    gap: 0.6rem;
}
.fi-resource-create-record-page .fi-header,
.fi-resource-edit-record-page .fi-header {
    margin-bottom: 0;
}
.fi-resource-create-record-page .fi-header-heading,
.fi-resource-edit-record-page .fi-header-heading {
    font-size: 1.375rem;        /* dari ~1.875rem → lebih ringkas */
    line-height: 1.75rem;
}

/* =========================================================================
   Repeater rapat (form kasir, opname stok, jurnal, dll.)
   Bawaan Filament: tiap item punya bilah header sendiri (isinya cuma ikon
   hapus) + garis pemisah + gap antar item 1rem → boros ruang vertikal.
   Di sini: ikon hapus ditempel di pojok kanan-atas konten, garis pemisah
   dihilangkan, gap antar item diperkecil.
   ========================================================================= */
.fi-fo-repeater.grid {
    row-gap: 0.625rem;
}
.fi-fo-repeater-item {
    position: relative;
}
.fi-fo-repeater-item > .fi-fo-repeater-item-header {
    position: absolute;
    top: 0.375rem;
    inset-inline-end: 0.5rem;
    z-index: 2;
    padding: 0;
}
.fi-fo-repeater-item > .fi-fo-repeater-item-content {
    border-top-width: 0;               /* garis pemisah header-konten tak perlu */
    padding-inline-end: 2.75rem;       /* ruang untuk ikon hapus di pojok */
}

/* =========================================================================
   Login split-screen (Benben Petcare)
   Panel branding kiri hanya tampil >= lg; di bawah itu tampilan kembali
   ke kartu tengah standar → mobile aman. Lihat override:
   resources/views/vendor/filament-panels/components/layout/simple.blade.php
   ========================================================================= */

/* MOBILE: .benben-auth mempertahankan flex bawaan vendor (items-center justify-center)
   dan <main> adalah anak langsung → identik tampilan kartu tengah standar (tak ada
   overflow). Split dua kolom hanya diaktifkan di >= lg via CSS grid (lihat bawah). */
.benben-auth {
    padding: 0;
}

/* Panel branding (kiri) — disembunyikan default (mobile) */
.benben-auth__brand {
    display: none;
    position: relative;
    overflow: hidden;
    padding: 3.5rem;
    color: #fff;
    background: linear-gradient(155deg, #17b0b7 0%, #11a1a8 45%, #0c8288 100%);
}

/* Blob dekoratif biar lebih berwarna */
.benben-auth__brand::before,
.benben-auth__brand::after {
    content: '';
    position: absolute;
    border-radius: 9999px;
    z-index: 0;
}
.benben-auth__brand::before {
    width: 22rem;
    height: 22rem;
    top: -7rem;
    inset-inline-end: -7rem;
    background: rgba(255, 198, 194, 0.22);
}
.benben-auth__brand::after {
    width: 16rem;
    height: 16rem;
    bottom: -6rem;
    inset-inline-start: -5rem;
    background: rgba(255, 255, 255, 0.10);
}

.benben-auth__brand-inner {
    position: relative;
    z-index: 2;
    max-width: 28rem;
    margin-inline: auto;
    width: 100%;
}

.benben-auth__badge {
    width: 6rem;
    height: 6rem;
    border-radius: 1.75rem;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem;
    margin-bottom: 1.9rem;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
}
.benben-auth__badge img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.benben-auth__title {
    font-family: 'BM Jua', 'Open Sans', sans-serif;
    font-size: 2.6rem;
    line-height: 1.1;
    margin-bottom: 0.85rem;
}

.benben-auth__tagline {
    font-size: 1.05rem;
    line-height: 1.6;
    opacity: 0.92;
    margin-bottom: 2rem;
}

.benben-auth__features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.9rem;
}
.benben-auth__features li {
    position: relative;
    padding-inline-start: 2rem;
    font-size: 0.98rem;
    opacity: 0.96;
}
.benben-auth__features li::before {
    content: '\2713'; /* ✓ */
    position: absolute;
    inset-inline-start: 0;
    top: 0.05rem;
    width: 1.35rem;
    height: 1.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: #FFC6C2;
    color: #0c8288;
    font-size: 0.72rem;
    font-weight: 700;
}

/* Maskot sebagai aksen pojok */
.benben-auth__maskot {
    position: absolute;
    z-index: 2;
    inset-inline-end: 1.75rem;
    bottom: 1.25rem;
    width: 8.5rem;
    height: auto;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.18));
    pointer-events: none;
}

/* Logo di dalam kartu: sedikit lebih besar (terlihat di mobile) */
.fi-simple-page img.fi-logo {
    height: 3rem !important;
}

/* ---- Breakpoint: tampilkan split mulai lg (1024px) ---- */
@media (min-width: 1024px) {
    /* Split dua kolom pakai grid: kiri branding (45%), kanan form (sisa) */
    .benben-auth {
        display: grid;
        grid-template-columns: minmax(0, 45%) minmax(0, 1fr);
        align-items: stretch;
    }
    .benben-auth__brand {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    /* Kartu form di kolom kanan, dipusatkan */
    .benben-auth > .fi-simple-main {
        justify-self: center;
        align-self: center;
        margin-block: 2rem;
    }
    /* Logo besar sudah ada di panel kiri → sembunyikan logo dalam kartu */
    .benben-auth > .fi-simple-main .fi-logo {
        display: none;
    }
}

/* Panel kiri terlalu sempit di lg kecil → sembunyikan maskot < 1200px */
@media (max-width: 1199px) {
    .benben-auth__maskot {
        display: none;
    }
}

/* Lightbox foto (klik foto pet/pelanggan → popup) — lihat public/js/benben-zoom.js */
.benben-zoom {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.8);
    cursor: zoom-out;
}
.benben-zoom.is-open {
    display: flex;
}
.benben-zoom img {
    max-width: min(90vw, 640px);
    max-height: 85vh;
    object-fit: contain;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
img.js-zoom {
    cursor: zoom-in;
}

/* ============================================================
   Header daftar RINGKAS (minimalis) — judul disembunyikan, tombol aksi
   jadi baris tipis tepat di atas kartu tabel.

   VERSI SEBELUMNYA MEMAKAI POSISI ABSOLUT (`top: 2.6rem`) dan margin
   negatif (-5,125rem) untuk menempelkan tombol ke baris toolbar tabel.
   Keduanya berpatokan pada tinggi yang DIASUMSIKAN, dan asumsi itu meleset
   di setiap halaman yang susunannya berbeda: ada tombol urut-ulang, tanpa
   filter, tanpa kotak cari, tabelnya kosong, atau datangnya dari paket luar.
   Tiap kali meleset, tombol mendarat menimpa judul kolom atau badan tabel,
   lalu ditambal dengan satu pengecualian per-halaman — sampai menumpuk 30
   aturan dan MASIH menyisakan 13 halaman rusak (audit 18 Agu 2026):

     · Profil Perusahaan & Dokumen Legal — judul kolom tertutup topbar
     · Kategori Catatan, Seri Vaksin, Template Catatan, Diagnosis,
       Tingkatan Loyalitas, Hadiah Poin — tombol menimpa judul kolom
     · Rekening Bank, Penyesuaian Stok, Catat Biaya, Catat Penerimaan,
       Transfer Bank — tombol jatuh ke dalam badan tabel

   Sekarang headernya DIBIARKAN DI ALUR NORMAL. Ia hanya diringkas: judul
   & remah jejak disembunyikan, jaraknya dirapatkan, dan bila halaman itu
   tak punya tombol aksi sama sekali headernya dibuang seluruhnya (dulu
   menyisakan pita kosong 3,5rem). Hasilnya satu baris lebih tinggi
   daripada trik lama, tapi TIDAK ADA yang bisa meleset — tidak perlu
   pengecualian per-halaman lagi, dan halaman baru ikut benar dengan
   sendirinya.
   ============================================================ */
@media (min-width: 640px) {
    .fi-resource-list-records-page > section > .fi-header {
        margin-bottom: 0;
        justify-content: flex-start;   /* tombol rapat ke kiri */
    }

    /* JUDUL DIKEMBALIKAN — 2 Sep 2026, atas permintaan pemilik.
       
       Sejak 18 Agu 2026 judul halaman daftar disembunyikan seluruhnya dengan
       alasan "sudah ada di sidebar + tab peramban". Alasannya tidak salah,
       tapi akibatnya: halaman kustom (Papan Booking, Verifikasi Pembayaran)
       punya judul sementara SELURUH halaman daftar tidak — dan layar yang
       sama-sama dibuka bergantian jadi terasa dua aplikasi berbeda. Sidebar
       pun menyempit jadi rail ikon sejak menu modul dipakai, jadi "sudah ada
       di sidebar" tidak lagi sepenuhnya benar.

       Yang dikembalikan JUDULNYA SAJA, kecil dan SEBARIS dengan tombol
       aksinya — bukan pita judul setinggi 3,5rem seperti bawaan Filament.
       Sub-judul tetap disembunyikan: ia kalimat penjelas sepanjang dua baris,
       dan menampilkannya membatalkan seluruh maksud "satu baris". */
    .fi-resource-list-records-page > section > .fi-header {
        align-items: center;
        gap: 0.75rem;
    }

    .fi-resource-list-records-page > section > .fi-header .fi-header-heading {
        /* ~1rem, bukan ~1,875rem bawaan: ia penanda tempat, bukan pengumuman. */
        font-size: 1rem;
        line-height: 1.4;
        margin: 0;
        /* Judul panjang ("Verifikasi Pembayaran Non-Tunai") memotong dirinya
           sendiri alih-alih mendorong tombol keluar layar. */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Pembungkus judul harus boleh MENYUSUT. Tanpa min-width:0 sebuah anak
       flex menolak mengecil di bawah lebar isinya, dan elipsis di atas tidak
       akan pernah menyala. */
    .fi-resource-list-records-page > section > .fi-header > div:first-child {
        min-width: 0;
    }

    .fi-resource-list-records-page > section > .fi-header .fi-header-subheading {
        display: none;
    }

}




/* ============================================================
   Popup "Memberi Resep Obat" — Komposisi bahan RAPAT (ala Kreloses):
   baris obat 1/2/3 dempet seperti tabel Excel, tanpa spasi ke bawah &
   tanpa kartu tebal. Aktif hanya untuk repeater ber-kelas .racik-rapat.
   CATATAN: jarak antar-item ADA di grid <div> dalam <ul> (class gap-4),
   BUKAN di .fi-fo-repeater luar — jadi target grid child-nya.
   ============================================================ */
.racik-rapat ul > div {
    gap: 0.4rem !important;
    row-gap: 0.4rem !important;
}
.racik-rapat .fi-fo-repeater-item {
    border-radius: 7px !important;
    box-shadow: none !important;
}
/* Sediakan GUTTER kanan agar suffix "tablet"/kalkulator TIDAK ketimpa tombol
   hapus (yg mengambang di pojok kanan item). Header dibuat mengambang di
   gutter itu, ketinggian 0 → item tetap 1 baris rapat spt tabel Excel. */
.racik-rapat .fi-fo-repeater-item-content {
    padding: 0.4rem 2.9rem 0.4rem 0.6rem !important;
}
.racik-rapat .fi-fo-repeater-item-header {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 0 0.4rem !important;
    min-height: 0 !important;
    border: 0 !important;
    align-items: center;
}
.racik-rapat .fi-fo-repeater-item {
    position: relative;
}

/* ============================================================
   Keranjang Pasien (booking) — daftar obat MINIMALIS ala Kreloses:
   kartu item rapat (gap & padding kecil) sehingga tampil seperti baris
   tabel, bukan kartu berjarak lebar. Header (collapse+hapus) tetap normal.
   ============================================================ */
/* Judul kolom SEKALI di atas (ala Kreloses) — selaras dgn kolom baris repeater
   (padding kiri 0.85rem = padding isi kartu; kanan 3rem = gutter tombol hapus). */
.keranjang-head {
    padding: 0.1rem 3rem 0.35rem 0.85rem !important;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 0.1rem;
}
.keranjang-head .fi-fo-placeholder,
.keranjang-head .fi-fo-placeholder * {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    min-height: 0 !important;
}

/* Baris obat RAPAT tanpa label per-baris → tampil spt baris tabel. Antar-baris
   TANPA jarak (hanya garis tipis pemisah, spt tabel) & isian dipendekkan;
   tombol hapus di GUTTER kanan (header absolute, vertikal center). */
.keranjang-rapat ul > div {
    gap: 0 !important;
    row-gap: 0 !important;
}
.keranjang-rapat .fi-fo-repeater-item {
    position: relative;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.25) !important;
    background: transparent !important;
}
.keranjang-rapat .fi-fo-repeater-item:last-child {
    border-bottom: 0 !important;
}
.keranjang-rapat .fi-fo-repeater-item-content {
    padding: 0.15rem 3rem 0.15rem 0.85rem !important;
}
/* Isian lebih pendek (tinggi baris ±32px) agar hemat tempat. */
.keranjang-rapat .fi-input {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    font-size: 0.8rem !important;
    line-height: 1.25rem !important;
}
.keranjang-rapat .fi-input-wrp-label,
.keranjang-rapat .fi-input-wrp-prefix,
.keranjang-rapat .fi-input-wrp-suffix {
    font-size: 0.75rem !important;
}
.keranjang-rapat .fi-fo-placeholder,
.keranjang-rapat .fi-fo-placeholder * {
    font-size: 0.8rem !important;
    min-height: 0 !important;
}
/* Kolom angka (Qty/Harga/Subtotal) RATA KANAN — judul & isi sejajar. */
.keranjang-kanan,
.keranjang-kanan .fi-fo-placeholder,
.keranjang-kanan .fi-fo-placeholder * {
    text-align: right !important;
}
.keranjang-rapat .fi-fo-repeater-item-header {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 0 0.45rem !important;
    min-height: 0 !important;
    border: 0 !important;
    align-items: center;
}

/* ============================================================
   Baris LAYANAN pada Booking dibuat rapat ala Kreloses (permintaan user
   19 Agu 2026: "lebih minimalis, dempet atas dan bawah, jadi hemat ruang").

   Bawaannya tiap servis adalah KARTU terpisah dengan bayangan, jarak antar
   kartu, dan LIMA label ("Servis", "Waktu", "Durasi", "Dokter / Staf",
   "Harga") yang diulang di SETIAP baris. Tiga servis saja sudah menghabiskan
   satu layar penuh.

   Bedanya dengan .keranjang-rapat: di sana label dibuang seluruhnya karena
   isinya jelas dari isian (produk, qty, harga). Di sini label DIPERTAHANKAN
   pada baris PERTAMA saja lalu disembunyikan pada baris berikutnya —
   hasilnya persis bentuk Kreloses: judul kolom sekali di atas, baris-baris
   rapat di bawahnya. Tanpa itu "Waktu" dan "Durasi" jadi dua kotak kembar
   yang tak bisa dibedakan.
   ============================================================ */

/* Jarak antar baris dihapus (bawaannya gap grid di <div> dalam <ul>). */
.layanan-rapat ul > div {
    gap: 0 !important;
    row-gap: 0 !important;
}

/* Kartu → baris tabel: tanpa bayangan/sudut, hanya garis pemisah tipis. */
.layanan-rapat .fi-fo-repeater-item {
    position: relative;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.25) !important;
    background: transparent !important;
}
.layanan-rapat .fi-fo-repeater-item:last-child {
    border-bottom: 0 !important;
}

/* Ruang di kanan untuk tombol yang mengambang.
   ANGKANYA HARUS MUAT 3 TOMBOL: naik, turun, hapus (±28px + jarak 12px) plus
   padding header 0,8rem = ±8rem. Percobaan pertama memakai 5,5rem dan
   tombolnya menimpa isian Harga — persis kolom terakhir, yang justru paling
   tidak boleh tertutup; 7,5rem pun masih kurang waktu tombol seret-lepas masih
   ada. Kalau nanti tombolnya ditambah/dikurangi, angka ini ikut. */
.layanan-rapat .fi-fo-repeater-item-content {
    padding: 0.3rem 8rem 0.3rem 0.15rem !important;
}

/* Label hanya di baris pertama — inilah yang membuatnya terbaca sebagai
   judul kolom, bukan pengulangan. */
.layanan-rapat .fi-fo-repeater-item:not(:first-child) .fi-fo-field-wrp-label {
    display: none !important;
}

/* Isian dipendekkan (±34px) agar satu baris benar-benar hemat. */
.layanan-rapat .fi-input {
    padding-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
}

/* Tombol naik-turun bawaan peramban pada input angka DIBUANG. Di kolom
   selebar 1/12 (±55px) spinner itu memakan hampir seluruh ruang sehingga
   angkanya terdorong keluar pandangan — kotak "Menit" terlihat KOSONG padahal
   isinya 15. Nilainya tetap bisa diketik & panah papan-ketik tetap jalan. */
.layanan-rapat input[type='number'] {
    -moz-appearance: textfield;
    appearance: textfield;
}
.layanan-rapat input[type='number']::-webkit-outer-spin-button,
.layanan-rapat input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Tombol urut-ulang & hapus: mengambang di gutter kanan, vertikal center,
   sehingga tidak menambah tinggi baris seperti header bawaan.

   z-index WAJIB. Header ini elemen PERTAMA di dalam barisnya, sedangkan
   pembungkus isian (.fi-fo-repeater-item-content) datang SESUDAHNYA dan
   memuat elemen ber-`position: relative` (pembungkus input Filament). Dua
   elemen berposisi dengan z-index otomatis dilukis menurut urutan DOM —
   yang belakangan menang. Tanpa angka ini, kotak Harga menutupi tepi kiri
   header dan klik di sana tidak sampai ke tombolnya. */
.layanan-rapat .fi-fo-repeater-item-header {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    padding: 0 0.4rem !important;
    min-height: 0 !important;
    border: 0 !important;
    align-items: center;
}

/* ============================================================
   Angka tabel RAPI — digit selebar sama (tabular-nums) supaya nilai rupiah
   yang sama-sama 8 digit lurus atas-bawah, tidak terlihat panjang-pendek.
   Berlaku untuk seluruh tabel Filament (laporan, daftar, rangkuman).
   ============================================================ */
.fi-ta-table td,
.fi-ta-table th,
.fi-ta-summary,
.angka-rapi {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}
/* CATATAN: sengaja TIDAK memakai white-space:nowrap global — kolom teks panjang
   (nama produk, keterangan) harus tetap boleh patah baris. */

/* ============================================================
   Halaman KASUS RAWAT INAP (tata letak ala Kreloses).
   Kelas grid dibuat sendiri di sini karena varian responsif Tailwind
   (sm:grid-cols-2 dst) tidak ikut ter-bundle di CSS Filament.
   Kolom kiri halaman hanya ~2/3 lebar layar, jadi 3 kolom baru dipakai
   di layar sangat lebar; kalau tidak, label & nilai saling tindih.
   ============================================================ */
.ri-grid {
    display: grid;
    gap: 0.4rem 2rem;
}
@media (min-width: 900px) {
    .ri-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1600px) {
    .ri-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ri-grid > div { min-width: 0; }
.ri-grid > div > span:last-child { overflow-wrap: anywhere; }
.ri-label { width: 8.5rem; flex-shrink: 0; }

/* ============================================================
   Judul halaman KASUS RAWAT INAP.
   Judulnya "Nama Hewan — NAMA PEMILIK" yang bisa sangat panjang
   (mis. "Beruk — HARDIANSYAH HARDIANSYAH") sehingga pada ukuran bawaan
   (30px) memakan 3 baris dan mendesak deretan tombol aksi.
   Ukurannya diturunkan KHUSUS di halaman ini, halaman lain tidak berubah.
   ============================================================ */
.fi-resource-rawat-inaps.fi-resource-view-record-page .fi-header-heading {
    font-size: 1.25rem;
    line-height: 1.8rem;
}
@media (min-width: 1280px) {
    .fi-resource-rawat-inaps.fi-resource-view-record-page .fi-header-heading {
        font-size: 1.4rem;
    }
}
.fi-resource-rawat-inaps.fi-resource-view-record-page .fi-header-subheading {
    font-size: 0.8125rem;
}

/* Header halaman kasus: blok judul tidak boleh terjepit oleh deretan tombol
   (di 1280px subjudul sempat patah jadi 6 baris). Header boleh membungkus,
   dan subjudul dipotong dengan elipsis alih-alih memanjang ke bawah. */
.fi-resource-rawat-inaps.fi-resource-view-record-page .fi-header {
    flex-wrap: wrap;
    row-gap: 0.75rem;
}
.fi-resource-rawat-inaps.fi-resource-view-record-page .fi-header > * {
    min-width: 0;
}
.fi-resource-rawat-inaps.fi-resource-view-record-page .fi-header-subheading {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Kepala halaman FAKTUR PENJUALAN: judul = nomor invoice, ukurannya diturunkan
   agar tidak patah dua baris & tombol muat sebaris (pola sama dengan halaman
   kasus rawat inap). */
.fi-resource-sales.fi-resource-view-record-page .fi-header-heading {
    font-size: 1.25rem;
    line-height: 1.8rem;
}
@media (min-width: 1280px) {
    .fi-resource-sales.fi-resource-view-record-page .fi-header-heading {
        font-size: 1.4rem;
    }
}
.fi-resource-sales.fi-resource-view-record-page .fi-header {
    flex-wrap: wrap;
    row-gap: 0.75rem;
}

/* Tombol "Menu modul" — muncul saat user sedang memakai menu klasik (sidebar
   bawaan). Sengaja ditaruh di brand.css yang SELALU dimuat: menu-modul.css
   tidak ikut dimuat pada mode klasik, jadi tombol ini akan tampil polos bila
   gayanya ditaruh di sana. Lihat App\Support\MenuModul::modeKlasik(). */
.benben-balik {
    position: fixed;
    inset-block-end: 1rem;
    inset-inline-start: 1rem;
    z-index: 40;
    display: none;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border: 0;
    border-radius: 99px;
    background: var(--benben-teal);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 20px -6px rgb(17 161 168 / 0.7);
}

.benben-balik svg {
    width: 1rem;
    height: 1rem;
}

@media (min-width: 1024px) {
    .benben-balik {
        display: flex;
    }
}

/* ============================================================================
   RUANG HALAMAN DIRAPATKAN (permintaan user 4 Agu 2026: "jaraknya terlalu
   jauh, bisa makin naik? kiri-kanan dimaksimalkan sedikit lagi").

   Bawaan Filament: .fi-main px-8 (2rem) di layar besar, dan <section> pembungkus
   halaman py-8 + gap-y-8 (2rem atas, 2rem antara judul & konten). Di layar lebar
   itu terasa boros — judul terdorong jauh dari topbar dan konten baru mulai
   sepertiga layar ke bawah.
   ========================================================================= */

/* Kiri-kanan: sisakan cukup untuk bayangan kartu, sisanya untuk data. */
@media (min-width: 768px) {
    .fi-main {
        padding-inline: 0.875rem;
    }
}

/* Vertikal: berlaku untuk SEMUA halaman. Dulu halaman DAFTAR dikecualikan
   karena headernya diposisikan absolut dengan patokan yang dihitung dari
   padding bawaan 2rem — mengubah padding berarti menggeser tombolnya. Sejak
   headernya kembali ke alur normal (18 Agu 2026) patokan itu tidak ada lagi,
   jadi halaman daftar & halaman biasa akhirnya berjarak sama. */
.fi-page > section {
    padding-top: 0.375rem;
    padding-bottom: 1.5rem;
    row-gap: 0.5rem;
}

/* Breadcrumb menempel ke judul, tidak perlu jarak sebesar bawaan. */
.fi-page .fi-breadcrumbs {
    margin-bottom: 0.25rem;
}

/* Baris header (judul + tombol aksi) dipadatkan: bawaannya menyisakan jarak
   antar-baris untuk kasus judul membungkus dua baris, yang di sini tak pernah
   terjadi karena judulnya pendek ("Ubah BK-000326"). Tanpa ini judul tetap
   menggantung jauh dari topbar walau padding section sudah dipangkas. */
.fi-page:not(.fi-resource-list-records-page) .fi-header {
    gap: 0.375rem;
}

/* Judul halaman diturunkan dari 1,875rem — ukuran sebesar itu hanya mendorong
   konten ke bawah tanpa menambah informasi; halaman yang sedang dibuka sudah
   ditandai di rail & breadcrumb. Berlaku untuk SEMUA halaman yang masih
   menampilkan judul (halaman rekaman + halaman kustom seperti Neraca dan
   Laporan). Halaman DAFTAR punya aturannya sendiri di blok >=640px di atas
   (judul kecil, sebaris dengan tombol) — 3 kelas lawan 1, jadi ia menang atas
   aturan ini apa pun urutannya.
   Halaman kasus rawat inap & faktur punya aturan lebih kecil sendiri di bawah
   (lebih spesifik → tetap menang). */
.fi-header-heading {
    font-size: 1.5rem;
    line-height: 2rem;
}

/* Logo penuh di kiri topbar (renderHook TOPBAR_START). Rail hanya memuat mark
   hewan tanpa teks, jadi tanpa ini nama merek tak muncul di mana pun saat
   sidebar disembunyikan. Disembunyikan <1024px karena di sana drawer bawaan
   Filament sudah membawa logonya sendiri. */
.benben-topbar-logo {
    display: none;
    align-items: center;
    flex: none;
}

.benben-topbar-logo img {
    height: 1.75rem;
    width: auto;
}

@media (min-width: 1024px) {
    .benben-topbar-logo {
        display: flex;
    }
}

/* ============================================================================
   BARIS AKSI TABEL DIGABUNG KE BARIS PENCARIAN (permintaan user 4 Agu 2026:
   "Unduh CSV dipindah di sebelah kolom search, biar hemat space").

   Bawaan Filament memisah dua baris di dalam kartu tabel:
     .fi-ta-header          → aksi tabel (mis. tombol Unduh CSV) — sering kosong
                              di sisi kirinya sehingga satu baris terbuang
     .fi-ta-header-toolbar  → pengelompokan, pencarian, filter, pilih kolom
   Keduanya dijadikan SATU baris dengan flexbox; tombol aksi diberi order 2
   sehingga mendarat di kanan, tepat setelah kolom pencarian.

   Dipakai flexbox, BUKAN position:absolute seperti trik header halaman daftar —
   di sini lebar isi tiap sisi berbeda-beda antar laporan (ada yang punya
   pemilih "Kelompokkan berdasar", ada yang tidak), jadi posisi absolut pasti
   meleset di salah satunya. Flex membiarkan browser yang mengatur.

   Hanya ≥1024px: di layar sempit dua baris justru lebih terbaca.
   ========================================================================= */

@media (min-width: 1024px) {
    .fi-ta-header-ctn {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    /* Panel filter "di atas konten" (dipakai halaman laporan) juga anak dari
       wadah yang sama — tanpa aturan ini ia ikut berjajar dengan tombol &
       pencarian sehingga isian filter tampak menyisip di tengah baris.
       Diberi lebar penuh supaya tetap punya barisnya sendiri di paling atas. */
    .fi-ta-header-ctn > .fi-ta-filters-above-content-ctn {
        order: 0;
        flex: 1 0 100%;
        border-top-width: 0;
    }

    .fi-ta-header-ctn > .fi-ta-header {
        order: 2;
        flex: none;
        padding-inline-start: 0.5rem;
        /* `divide-y` bawaan menaruh garis antar-baris; setelah jadi satu baris
           garis itu muncul sebagai garis vertikal yang menggantung. */
        border-top-width: 0;
    }

    /* PENGECUALIAN: bila `.fi-ta-header` berisi JUDUL tabel (widget dasbor
       "Obat Mendekati", daftar Faktur Penjualan), bukan sekadar tombol aksi,
       ia tidak boleh didorong ke kanan — judul akan mendarat di ujung kanan
       dan kotak cari di kiri, terbalik dari semua tabel lain (audit 18 Agu).
       Judul karena itu ditaruh paling KIRI (order 0).

       `flex: 1 1 auto`, BUKAN `1 0 100%`. Dengan 100% ia merebut satu baris
       penuh dan kotak cari terlempar ke baris kedua — dua baris hanya untuk
       satu judul (dikeluhkan 21 Agu 2026: "buat minimalis 1 line aja").
       Dengan `auto` ia melebar mengisi sisa ruang, sehingga tombol aksi yang
       ada DI DALAMNYA (Filament memakai justify-between) terdorong ke kanan
       tepat sebelum kotak cari — judul kiri, aksi & pencarian kanan, satu
       baris. */
    .fi-ta-header-ctn > .fi-ta-header:has(.fi-ta-header-heading) {
        order: 0;
        flex: 1 1 auto;
        /* Sejajar dengan isi tabel di bawahnya. Sempat 0 dan judulnya menonjol
           keluar dari garis kolom — terlihat seperti salah taruh, bukan seperti
           judul. 1,25rem menyamai padding sel tabel Filament. */
        padding-inline-start: 1.25rem;
    }

    /* Pasangan aturan di atas: toolbar berhenti melebar HANYA bila ada judul,
       supaya ia menempel di kanan alih-alih mendorong aksi kembali ke kiri.
       Dibatasi `:has(...)` — tabel tanpa judul tetap memakai perilaku lama
       (toolbar melebar, aksi di ujung kanan). */
    .fi-ta-header-ctn:has(.fi-ta-header-heading) > .fi-ta-header-toolbar {
        flex: 0 1 auto;
    }
    .fi-ta-header-ctn > .fi-ta-header-toolbar {
        order: 1;
        flex: 1 1 auto;
        border-top-width: 0;
    }
}

/* ============================================================================
   KARTU STATISTIK DASBOR DIPADATKAN (permintaan user 4 Agu 2026: "kotaknya
   dibuat lebih kecil lagi").

   Bawaan Filament: padding 1,5rem + angka 1,875rem → satu kartu ±150px tinggi,
   sehingga 16 kartu memakan ~600px sebelum grafik terlihat. Dipadatkan supaya
   seluruh kartu + awal grafik muat dalam satu layar 1080p tanpa menggulir.
   ========================================================================= */

.fi-wi-stats-overview-stat {
    padding: 0.875rem 1rem;
}

/* Jarak antar-kartu (bawaan gap-6 = 1,5rem) */
.fi-wi-stats-overview-stats-ctn {
    gap: 0.625rem;
}

/* Jarak label → angka → keterangan di dalam kartu (bawaan gap-y-2) */
.fi-wi-stats-overview-stat > .grid {
    gap: 0.125rem;
}

.fi-wi-stats-overview-stat-label {
    font-size: 0.75rem;
    line-height: 1.1rem;
}

.fi-wi-stats-overview-stat-value {
    font-size: 1.375rem;
    line-height: 1.75rem;
}

.fi-wi-stats-overview-stat-description {
    font-size: 0.6875rem;
    line-height: 1rem;
}

.fi-wi-stats-overview-stat-description-icon {
    width: 0.875rem;
    height: 0.875rem;
}

/* ============================================================================
   KETERBACAAN TABEL — keluhan user 4 Agu 2026: "putih semua, tidak ada
   pembatas, lama-lama pusing". Halaman daftar di sini sering ratusan sampai
   ribuan baris (Riwayat Penerimaan 3.177 baris), jadi mata butuh pegangan
   untuk menelusuri satu baris dari kiri ke kanan.

   Nadanya sengaja SANGAT tipis (2-6%): kalau terlalu kuat, tabel jadi ramai
   dan justru lebih melelahkan daripada polos.
   ========================================================================= */

/* Latar halaman sedikit lebih dalam dari bawaan (gray-50) supaya kartu putih
   tabel terbaca sebagai bidang tersendiri, bukan menyatu dengan halaman. */
.fi-body {
    background-color: #eef2f7;
}

/* Baris kepala: bernada teal lembut + teks lebih tegas, jadi jangkar visual
   yang jelas saat menggulir daftar panjang. */
.fi-ta-header-cell {
    background-color: rgb(17 161 168 / 0.11);
    border-bottom: 2px solid rgb(17 161 168 / 0.35);
}

.fi-ta-header-cell-label {
    font-weight: 600;
    color: rgb(15 23 42 / 0.78);
}

/* Zebra: pembeda baris utama. Pakai abu netral (bukan teal) agar tidak
   bertabrakan dengan badge & tombol berwarna di dalam sel. */
.fi-ta-table tbody .fi-ta-row:nth-child(even) {
    background-color: rgb(15 23 42 / 0.028);
}

/* Sorot baris yang ditunjuk kursor — penting di tabel lebar: menegaskan
   "baris ini yang sedang saya baca". */
.fi-ta-table tbody .fi-ta-row:hover {
    background-color: rgb(17 161 168 / 0.08);
}

/* Baris tercentang harus tetap menang atas zebra & hover. Dipilih lewat
   :has(input:checked), bukan kelas utilitas bawaan Filament yang bisa
   berubah antar versi. */
.fi-ta-table tbody .fi-ta-row:has(input[type='checkbox']:checked),
.fi-ta-table tbody .fi-ta-row:has(input[type='checkbox']:checked):hover {
    background-color: rgb(17 161 168 / 0.16);
}

/* Garis pemisah kolom yang nyaris tak terlihat — cukup untuk menuntun mata
   pada tabel banyak kolom, tanpa membuatnya terlihat seperti spreadsheet. */
.fi-ta-table tbody .fi-ta-cell + .fi-ta-cell {
    border-inline-start: 1px solid rgb(15 23 42 / 0.04);
}

/* Kolom aksi (titik tiga) & kolom centang tidak perlu garis pemisah. */
.fi-ta-table tbody .fi-ta-actions-cell,
.fi-ta-table tbody .fi-ta-selection-cell + .fi-ta-cell {
    border-inline-start: 0;
}

.dark .fi-body {
    background-color: #0b1220;
}

.dark .fi-ta-header-cell {
    background-color: rgb(17 161 168 / 0.12);
}

.dark .fi-ta-header-cell-label {
    color: rgb(226 232 240 / 0.9);
}

.dark .fi-ta-table tbody .fi-ta-row:nth-child(even) {
    background-color: rgb(255 255 255 / 0.025);
}

.dark .fi-ta-table tbody .fi-ta-row:hover {
    background-color: rgb(17 161 168 / 0.14);
}

.dark .fi-ta-table tbody .fi-ta-cell + .fi-ta-cell {
    border-inline-start-color: rgb(255 255 255 / 0.05);
}


/* ============================================================================
   ISI CATATAN DI POPUP (.catatan-isi)

   Catatan klinis hasil impor Kreloses adalah HTML mentah: tabel pemeriksaan
   ber-lebar-tetap, sorotan kuning, gambar ukuran asli. Dibiarkan apa adanya,
   tabelnya mendorong popup melebihi layar dan sorotan kuningnya tak terbaca di
   mode gelap. Wadahnya sudah overflow:auto, jadi tabel lebar cukup digulir
   mendatar — tidak dipaksa menyusut supaya kolomnya tidak saling menindih.
   ========================================================================= */
.catatan-isi table {
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.catatan-isi td,
.catatan-isi th {
    padding: 0.2rem 0.5rem;
    vertical-align: top;
}

/* Gambar & lampiran dibatasi lebar wadah — ini yang boleh menyusut. */
.catatan-isi img,
.catatan-isi video {
    max-width: 100%;
    height: auto;
}

/* Sorotan kuning bawaan Kreloses tak terbaca di mode gelap: teksnya ikut putih
   di atas latar kuning muda. Dipaksa gelap. */
.dark .catatan-isi mark,
.dark .catatan-isi [style*="background"] {
    color: rgb(24 24 27);
}


/* ============================================================================
   POPUP CATATAN (.catatan-modal*)

   Ditulis tangan, TIDAK memakai utility Tailwind. Berkas blade popup ini tidak
   ikut terpindai saat Tailwind Filament dibangun, sehingga kelas seperti
   bg-gray-950/60, shadow-2xl, dan z-[100] tidak pernah ada di app.css — dulu
   akibatnya popup tampil tanpa latar gelap, tanpa bayangan, dan tanpa batas
   kartu sehingga terlihat seperti teks menempel di kiri layar.
   ========================================================================= */
.catatan-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.catatan-modal-latar {
    position: absolute;
    inset: 0;
    background: rgb(9 9 11 / 0.6);
}

.catatan-modal-panel {
    position: relative;
    width: 100%;
    max-width: 58rem;
    overflow: hidden;
    border-radius: 0.875rem;
    background: #fff;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.45);
}

.dark .catatan-modal-panel {
    background: rgb(24 24 27);
}

.catatan-modal-kepala {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1.5rem;
    border-bottom: 1px solid rgb(0 0 0 / 0.08);
}

.dark .catatan-modal-kepala {
    border-bottom-color: rgb(255 255 255 / 0.1);
}

.catatan-modal-judul {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
}

.catatan-modal-meta {
    margin-top: 0.125rem;
    font-size: 0.75rem;
    color: rgb(107 114 128);
}

.catatan-modal-tutup {
    flex: none;
    border-radius: 0.5rem;
    padding: 0.25rem;
    color: rgb(156 163 175);
    transition: background-color 0.15s, color 0.15s;
}

.catatan-modal-tutup:hover {
    background: rgb(0 0 0 / 0.06);
    color: rgb(75 85 99);
}

/* Padding isi sengaja selega header — keluhan "terlalu mepet kiri" datang dari
   teks yang menempel ke tepi panel. */
.catatan-modal-panel .catatan-isi {
    padding: 1.25rem 1.5rem 1.5rem;
    max-height: calc(85vh - 5.25rem);
    overflow: auto;
}

/* Baris catatan yang bisa diklik — hover:bg-gray-50 tidak ada di app.css
   terkompilasi, jadi efek sorotnya ditulis di sini. Tanpa ini baris terasa
   mati dan tidak ada isyarat bahwa ia bisa diklik. */
.catatan-baris {
    transition: background-color 0.12s;
    cursor: pointer;
}

.catatan-baris:hover {
    background: rgb(0 0 0 / 0.035);
}

.dark .catatan-baris:hover {
    background: rgb(255 255 255 / 0.05);
}

/* Ikon silang penghapus di ujung kanan baris catatan. Diredupkan sampai
   barisnya disentuh: yang dicari orang saat menyusuri daftar adalah isi
   catatannya, bukan tombol hapus — deretan silang merah yang menyala terus
   justru mengundang klik yang tidak disengaja. */
.catatan-baris-hapus {
    display: flex;
    flex: none;
    align-items: center;
    padding-right: 0.5rem;
    padding-top: 0.35rem;
    opacity: 0.35;
    transition: opacity 0.12s;
}

.catatan-baris:hover .catatan-baris-hapus,
.catatan-baris-hapus:focus-within {
    opacity: 1;
}

/* Tombol Ubah/Hapus & penanda arsip di kepala popup catatan. */
.catatan-modal-aksi {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: none;
}

.catatan-modal-arsip {
    flex: none;
    align-self: center;
    border-radius: 0.375rem;
    background: rgb(0 0 0 / 0.05);
    padding: 0.2rem 0.5rem;
    font-size: 0.6875rem;
    color: rgb(107 114 128);
    white-space: nowrap;
}

.dark .catatan-modal-arsip {
    background: rgb(255 255 255 / 0.08);
    color: rgb(161 161 170);
}

/* Tautan "Cetak" di kepala popup catatan & "Cetak semua" di kepala panel.
   Ditulis di sini, bukan sebagai utility Tailwind: berkas blade panel catatan
   tidak ikut dipindai saat build, jadi kelas Tailwind apa pun yang ditulis di
   sana tidak pernah sampai ke app.css (lihat catatan di daftar.blade.php). */
.catatan-modal-cetak,
.catatan-panel-cetak {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex: none;
    border-radius: 0.375rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgb(107 114 128);
    white-space: nowrap;
    transition: background 0.12s, color 0.12s;
}

.catatan-modal-cetak:hover,
.catatan-panel-cetak:hover {
    background: rgb(0 0 0 / 0.05);
    color: rgb(5 150 105);
}

.dark .catatan-modal-cetak,
.dark .catatan-panel-cetak {
    color: rgb(161 161 170);
}

.dark .catatan-modal-cetak:hover,
.dark .catatan-panel-cetak:hover {
    background: rgb(255 255 255 / 0.08);
    color: rgb(52 211 153);
}

/* Tombol "Tambah catatan" di kepala panel — aksinya milik komponen Livewire
   panel catatan, jadi tinggi barisnya disamakan dengan tautan cetak di
   sebelahnya supaya kepala panel tidak melompat. */
.catatan-panel-tambah {
    flex: none;
    display: inline-flex;
    align-items: center;
}

/* Penyaring kategori di kepala panel catatan (19 Sep 2026).

   Kelas sendiri, bukan utility Tailwind: berkas blade panel catatan tidak ikut
   terpindai saat build, jadi kelas Tailwind apa pun di sana tidak pernah ada di
   app.css terkompilasi. Alasan yang sama dengan .catatan-modal* di atas. */
.catatan-panel-saring {
    flex: none;
    border: 1px solid rgb(0 0 0 / 0.1);
    border-radius: 0.375rem;
    background: rgb(255 255 255);
    padding: 0.2rem 1.5rem 0.2rem 0.5rem;
    font-size: 0.75rem;
    color: rgb(55 65 81);
    max-width: 11rem;
}

.catatan-panel-saring:focus {
    outline: 2px solid rgb(5 150 105 / 0.4);
    outline-offset: 1px;
}

.dark .catatan-panel-saring {
    border-color: rgb(255 255 255 / 0.15);
    background: rgb(24 24 27);
    color: rgb(212 212 216);
}

/* Kaki halaman panel catatan — "‹ Lebih baru | Halaman 2 dari 6 | Lebih lama ›".

   Halaman, BUKAN tombol yang menumpuk: isi tiap catatan ditanam ke DOM supaya
   popupnya terbuka seketika, jadi menumpuk mengembalikan persis beban yang
   dihindari batas sepuluh itu. Lihat App\Livewire\CatatanKlinis. */
.catatan-panel-hal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    border-top: 1px solid rgb(0 0 0 / 0.06);
    padding: 0.5rem 0.75rem;
}

.catatan-panel-hal-tombol {
    flex: none;
    border-radius: 0.375rem;
    padding: 0.25rem 0.6rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgb(5 150 105);
    background: transparent;
    transition: background 0.12s;
}

.catatan-panel-hal-tombol:hover:not([disabled]) {
    background: rgb(0 0 0 / 0.04);
}

/* Tombol mati tetap TERBACA, bukan hilang: letaknya yang tetap membuat mata
   tidak perlu mencari lagi setiap kali berpindah halaman. */
.catatan-panel-hal-tombol[disabled] {
    color: rgb(203 213 225);
    cursor: default;
}

.catatan-panel-hal-teks {
    font-size: 0.75rem;
    color: rgb(107 114 128);
    white-space: nowrap;
}

.catatan-panel-hal-memuat {
    opacity: 0.45;
}

.dark .catatan-panel-hal {
    border-top-color: rgb(255 255 255 / 0.08);
}

.dark .catatan-panel-hal-tombol {
    color: rgb(52 211 153);
}

.dark .catatan-panel-hal-tombol:hover:not([disabled]) {
    background: rgb(255 255 255 / 0.06);
}

.dark .catatan-panel-hal-tombol[disabled] {
    color: rgb(71 85 105);
}

.dark .catatan-panel-hal-teks {
    color: rgb(161 161 170);
}
/* Lampiran di dalam popup catatan: gambar jadi petak seragam, PDF jadi tautan. */
.catatan-berkas {
    margin-top: 1rem;
    border-top: 1px solid rgb(0 0 0 / 0.08);
    padding-top: 0.75rem;
}

.dark .catatan-berkas {
    border-top-color: rgb(255 255 255 / 0.1);
}

.catatan-berkas-judul {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    color: rgb(107 114 128);
}

.catatan-berkas-petak {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Petak seragam supaya foto potret & lanskap berjajar rapi; object-fit: cover
   memotong, bukan menggepengkan — proporsi aslinya tetap benar saat dibuka. */
.catatan-berkas-gambar {
    display: block;
    height: 6.5rem;
    width: 6.5rem;
    overflow: hidden;
    border-radius: 0.5rem;
    border: 1px solid rgb(0 0 0 / 0.1);
    background: rgb(0 0 0 / 0.03);
}

.catatan-berkas-gambar img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    margin: 0;
    transition: transform 0.15s;
}

.catatan-berkas-gambar:hover img {
    transform: scale(1.05);
}

.catatan-berkas-tautan {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 0.5rem;
    border: 1px solid rgb(0 0 0 / 0.1);
    padding: 0.4rem 0.6rem;
    font-size: 0.8125rem;
    color: rgb(55 65 81);
    text-decoration: none;
}

.catatan-berkas-tautan:hover {
    background: rgb(0 0 0 / 0.04);
}

.dark .catatan-berkas-tautan {
    border-color: rgb(255 255 255 / 0.12);
    color: rgb(212 212 216);
}

/* ============================================================================
   PRATINJAU GAMBAR LAMPIRAN (.gambar-modal*) — pola Kreloses: gambar besar di
   kiri, daftar nama berkas di kanan untuk berpindah. Lapisannya di ATAS popup
   catatan (z-index 10000 vs 9999) supaya tidak tertimbun.
   ========================================================================= */
.gambar-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.gambar-modal-latar {
    position: absolute;
    inset: 0;
    background: rgb(9 9 11 / 0.75);
}

.gambar-modal-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 72rem;
    max-height: 90vh;
    overflow: hidden;
    border-radius: 0.875rem;
    background: #fff;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.5);
}

.dark .gambar-modal-panel {
    background: rgb(24 24 27);
}

.gambar-modal-kepala {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid rgb(0 0 0 / 0.08);
}

.dark .gambar-modal-kepala {
    border-bottom-color: rgb(255 255 255 / 0.1);
}

.gambar-modal-hitung {
    margin-inline-start: auto;
    font-size: 0.75rem;
    color: rgb(107 114 128);
}

.gambar-modal-badan {
    display: flex;
    min-height: 0;
    flex: 1;
}

/* Latar gelap di bingkai: foto klinis sering bertepi terang, tanpa ini batas
   gambar melebur dengan panel putih. */
.gambar-modal-bingkai {
    position: relative;
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    justify-content: center;
    background: rgb(9 9 11 / 0.92);
}

/* contain, BUKAN cover: ini tampilan penuh — memotong foto luka atau hasil lab
   justru menghilangkan bagian yang mau diperiksa. */
.gambar-modal-bingkai img {
    max-height: calc(90vh - 4rem);
    max-width: 100%;
    object-fit: contain;
}

.gambar-modal-panah {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    width: 2.5rem;
    border-radius: 9999px;
    background: rgb(255 255 255 / 0.15);
    color: #fff;
    transition: background-color 0.15s;
}

.gambar-modal-panah:hover {
    background: rgb(255 255 255 / 0.3);
}

.gambar-modal-panah.kiri { left: 0.75rem; }
.gambar-modal-panah.kanan { right: 0.75rem; }

.gambar-modal-daftar {
    display: flex;
    width: 15rem;
    flex: none;
    flex-direction: column;
    gap: 0.25rem;
    overflow-y: auto;
    padding: 0.75rem;
    border-inline-start: 1px solid rgb(0 0 0 / 0.08);
}

.dark .gambar-modal-daftar {
    border-inline-start-color: rgb(255 255 255 / 0.1);
}

.gambar-modal-item {
    border-radius: 0.5rem;
    padding: 0.5rem 0.625rem;
    text-align: start;
    font-size: 0.8125rem;
    color: rgb(63 63 70);
    word-break: break-word;
    transition: background-color 0.12s;
}

.gambar-modal-item:hover {
    background: rgb(0 0 0 / 0.05);
}

.gambar-modal-item.aktif {
    background: rgb(17 161 168 / 0.14);
    font-weight: 600;
    color: #0f766e;
}

.dark .gambar-modal-item {
    color: rgb(212 212 216);
}

.dark .gambar-modal-item.aktif {
    background: rgb(17 161 168 / 0.28);
    color: #5eead4;
}

.gambar-modal-penuh {
    margin-top: auto;
    padding: 0.5rem 0.625rem;
    font-size: 0.75rem;
    color: rgb(107 114 128);
    text-decoration: underline;
}

/* Layar sempit: daftar pindah ke bawah gambar, bukan di samping. */
@media (max-width: 767px) {
    .gambar-modal-badan { flex-direction: column; }
    .gambar-modal-daftar {
        width: auto;
        max-height: 9rem;
        border-inline-start: 0;
        border-top: 1px solid rgb(0 0 0 / 0.08);
    }
}


/* ============================================================================
   PANEL FILTER + TOOLBAR TABEL JADI SATU BARIS (permintaan user 6 Agu 2026:
   "kenapa turun sekali? buat lebih minimalis, 1 line semua kalau bisa").

   Bawaan Filament menyusun tiga baris terpisah di atas tabel:
     1. header halaman  → tombol "Booking Baru"
     2. panel filter    → judul "Filter" + isian ber-label di atas kontrol
     3. toolbar tabel   → pencarian & pemilih kolom
   Total ±13rem tinggi untuk dua isian filter.

   Tombolnya sudah dipindah ke header TABEL lewat PHP (headerActions), jadi ia
   sekarang berada di wadah yang sama dengan pencarian. Sisanya diurus di sini:
   panel filter & toolbar dijadikan satu baris flex, dan tiap isian filter
   dibuat MENDATAR (label di kiri kontrol) alih-alih bertumpuk.

   CATATAN kelas: judul "Filter" adalah <h4> di dalam div flex biasa — TIDAK ada
   kelas `fi-ta-filters-heading` (percobaan pertama menyasar kelas karangan itu
   dan tentu saja tidak berefek). Selektornya harus lewat struktur.
   ========================================================================= */
@media (min-width: 1024px) {
    .fi-ta-filters-above-content-ctn {
        padding: 0.5rem 1rem;
    }

    /* Baris judul "Filter" + tautan "Atur ulang filter": judulnya dibuang
       (isian di sebelahnya sudah berlabel sendiri), tautannya didorong ke ujung
       kanan baris yang sama. */
    .fi-ta-filters-above-content-ctn .fi-ta-filters {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem 1.25rem;
    }

    .fi-ta-filters-above-content-ctn .fi-ta-filters > div:first-child {
        order: 9;
        margin-inline-start: auto;
    }

    .fi-ta-filters-above-content-ctn .fi-ta-filters > div:first-child h4 {
        display: none;
    }

    .fi-ta-filters-above-content-ctn .fi-ta-filters .fi-link {
        font-size: 0.75rem;
    }

    /* Deretan isian filter: mendatar & rapat, bukan grid selebar kartu. */
    .fi-ta-filters-above-content-ctn .fi-fo-component-ctn {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem 1.25rem;
    }

    /* Tiap isian: label di KIRI kontrol, bukan di atasnya — ini yang memangkas
       tinggi paling banyak. Filter kotak-centang sudah mendatar sendiri
       (labelnya inline-flex bersama kotaknya), jadi tidak perlu diapa-apakan. */
    .fi-ta-filters-above-content-ctn .fi-fo-field-wrp > .grid {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .fi-ta-filters-above-content-ctn .fi-fo-field-wrp-label {
        margin: 0;
        white-space: nowrap;
        font-size: 0.75rem;
    }

    .fi-ta-filters-above-content-ctn .fi-fo-field-wrp .fi-input-wrp {
        min-width: 10rem;
    }

    /* Panel filter & toolbar berbagi SATU baris: filter mengisi sisa ruang,
       toolbar (tombol + cari + kolom) menempel di kanan. */
    .fi-ta-header-ctn:has(.fi-ta-filters-above-content-ctn) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .fi-ta-header-ctn > .fi-ta-filters-above-content-ctn {
        flex: 1 1 28rem;
        border-bottom-width: 0;
    }

    .fi-ta-header-ctn:has(.fi-ta-filters-above-content-ctn) > .fi-ta-header,
    .fi-ta-header-ctn:has(.fi-ta-filters-above-content-ctn) > .fi-ta-header-toolbar {
        flex: 0 1 auto;
        border-top-width: 0;
        padding-block: 0.5rem;
    }
}

/* ---------------------------------------------------------------------------
   BARIS TERSOROT — dipakai daftar Pelanggan sesudah simpan (?sorot=<id>).
   Kelasnya dipasang lewat ->recordClasses() di resource, jadi harus CSS biasa
   (bukan kelas Tailwind: kelas yang cuma muncul di PHP tak ikut terkompilasi).
   Cincin + kilat singkat supaya mata langsung tertuju, lalu warnanya menetap
   tipis selama baris itu masih ditandai.
   -------------------------------------------------------------------------- */
.fi-ta-row.benben-sorot {
    background-color: rgb(17 161 168 / 0.08) !important;
    box-shadow: inset 0.1875rem 0 0 0 rgb(17 161 168);
    animation: benben-sorot-kilat 1.6s ease-out 1;
    scroll-margin-block: 8rem;
}

.dark .fi-ta-row.benben-sorot {
    background-color: rgb(17 161 168 / 0.16) !important;
}

@keyframes benben-sorot-kilat {
    0%, 30% { background-color: rgb(17 161 168 / 0.32); }
    100%    { background-color: rgb(17 161 168 / 0.08); }
}

@media (prefers-reduced-motion: reduce) {
    .fi-ta-row.benben-sorot { animation: none; }
}

/* ----------------------------------------------------------------------------
   RINCIAN FAKTUR — modal "Buat Faktur" dari booking.
   -------------------------------------------------------------------------- */
/*
   Dulu barisnya dirakit dengan kelas Tailwind di dalam string PHP
   (`flex justify-between gap-4`). Dua akibatnya terlihat di layar:

   1. Kelas di file PHP TIDAK dipindai Tailwind — panel ini memakai CSS Filament
      yang sudah jadi, jadi utilitas yang kebetulan tidak dipakai Filament tidak
      pernah ada. Yang tersisa hanya sebagian, dan barisnya jadi setengah rapi.
   2. Nama layanan yang panjang mendesak kolom nilainya sampai "Rp 20.000,00"
      patah jadi dua baris — angka rupiah terbelah dari satuannya.

   Karena itu aturannya ditulis di sini: brand.css selalu ikut termuat, tidak
   bergantung pada isi bundel Filament. Kolom nilai dipatok tidak boleh menyusut
   dan tidak boleh patah; nama layanan yang mengalah.
*/
.rincian-faktur {
    font-size: 0.875rem;
    line-height: 1.35rem;
}

.rincian-faktur__baris {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: 0.1875rem;
}

/* Nama boleh turun baris — termasuk nama obat panjang tanpa spasi. */
.rincian-faktur__nama {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Angka: lebar digit seragam supaya rupiah sejajar ke bawah, dan JANGAN patah. */
.rincian-faktur__nilai {
    flex: 0 0 auto;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.rincian-faktur__baris--samar {
    color: rgb(107 114 128);
}

.dark .rincian-faktur__baris--samar {
    color: rgb(156 163 175);
}

.rincian-faktur__catatan {
    font-size: 0.75rem;
}

.rincian-faktur__baris--jumlah,
.rincian-faktur__baris--total {
    margin-top: 0.375rem;
    border-top: 1px solid rgb(229 231 235);
    padding-top: 0.5rem;
}

.dark .rincian-faktur__baris--jumlah,
.dark .rincian-faktur__baris--total {
    border-top-color: rgb(255 255 255 / 0.1);
}

.rincian-faktur__baris--jumlah { font-weight: 600; }

.rincian-faktur__baris--total {
    font-size: 1rem;
    font-weight: 700;
}

/* ----------------------------------------------------------------------------
   KOTAK CHAT MELAYANG — Tanya Dokter.
   -------------------------------------------------------------------------- */
/*
   Ditulis di sini, bukan sebagai utilitas Tailwind di Blade: panel ini memakai
   CSS Filament yang sudah jadi dan tidak ada proses yang memindai berkas Blade.
   Utilitas yang kebetulan tidak dipakai Filament sendiri tidak pernah ada.
*/
.kotak-chat {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    /* Di bawah notifikasi Filament (z-index 50-an) supaya lonceng tetap di
       atasnya, tapi di atas seluruh isi halaman. */
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.625rem;
}

.kotak-chat__bulat {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 9999px;
    background-color: rgb(17 161 168);
    color: #fff;
    box-shadow: 0 0.5rem 1.25rem rgb(0 0 0 / 0.22);
    transition: transform 0.15s ease;
}

.kotak-chat__bulat:hover { transform: translateY(-2px); }
.kotak-chat__bulat svg { width: 1.5rem; height: 1.5rem; }

.kotak-chat__lencana {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    min-width: 1.25rem;
    padding: 0 0.3rem;
    border-radius: 9999px;
    background-color: rgb(220 38 38);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.25rem;
    text-align: center;
}

.kotak-chat__panel {
    width: 20rem;
    max-width: calc(100vw - 2.5rem);
    max-height: 60vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 0.75rem;
    background-color: #fff;
    box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 0.25);
}

.dark .kotak-chat__panel { background-color: rgb(24 24 27); }

.kotak-chat__kepala {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 0.875rem;
    background-color: rgb(17 161 168);
    color: #fff;
    font-weight: 600;
    font-size: 0.875rem;
}

.kotak-chat__tutup {
    font-size: 1.25rem;
    line-height: 1;
    color: #fff;
    opacity: 0.85;
}

.kotak-chat__isi { overflow-y: auto; }

.kotak-chat__baris {
    display: block;
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid rgb(229 231 235);
}

.dark .kotak-chat__baris { border-bottom-color: rgb(255 255 255 / 0.08); }
.kotak-chat__baris:hover { background-color: rgb(17 161 168 / 0.07); }
.kotak-chat__baris:last-child { border-bottom: 0; }

.kotak-chat__judul {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgb(24 24 27);
}

.dark .kotak-chat__judul { color: rgb(244 244 245); }

.kotak-chat__pemilik { font-weight: 400; color: rgb(113 113 122); }

.kotak-chat__keluhan {
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    color: rgb(82 82 91);
    overflow-wrap: anywhere;
}

.dark .kotak-chat__keluhan { color: rgb(161 161 170); }

.kotak-chat__kaki {
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: rgb(113 113 122);
}

/* Yang belum diambil siapa pun ditandai merah: itulah yang paling mudah
   terlupakan, karena tidak ada satu orang pun yang merasa bertanggung jawab. */
.kotak-chat__tanda--bebas {
    color: rgb(185 28 28);
    font-weight: 600;
}

.dark .kotak-chat__tanda--bebas { color: rgb(248 113 113); }

@media (max-width: 640px) {
    .kotak-chat { right: 0.75rem; bottom: 0.75rem; }
}

/* Lewat tenggat balas — satu-satunya keadaan yang pantas berteriak. */
.kotak-chat__bulat--telat { background-color: rgb(220 38 38); }


/* ============================================================
   Baris KERANJANG PASIEN yang ramping.

   Nama dokter di kolom "Diminta oleh" panjang-panjang ("drh. Ika Septiana
   Anggun Puspita") dan membungkus jadi DUA baris, sehingga tiap baris obat
   setinggi dua baris teks. Pada keranjang rawat inap yang berisi belasan obat,
   separuh layar habis untuk nama yang sama berulang-ulang.

   Yang diperkecil HANYA nama pemintanya, bukan seluruh barisnya: nama obat,
   qty, dan harga adalah angka yang dibaca sambil meracik dan tidak boleh ikut
   mengecil. Namanya sendiri jarang dibaca utuh — yang dicari mata biasanya
   cuma "apakah ini saya atau bukan".
   ============================================================ */
.keranjang-peminta .fi-fo-select-input,
.keranjang-peminta .choices__inner,
.keranjang-peminta .choices__item {
    font-size: 0.75rem !important;
    line-height: 1.15 !important;
}

/* Satu baris saja, sisanya dipotong titik tiga. Judul lengkapnya tetap
   terbaca lewat tooltip bawaan peramban (atribut title). */
.keranjang-peminta .choices__item,
.keranjang-peminta .fi-fo-select-input {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.keranjang-peminta .choices__inner {
    min-height: 2.25rem !important;
    padding-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
}

/* RUANG UNTUK TOMBOL SILANG & PANAH.
   Dilaporkan 1 Sep 2026: "drh. Agus Efendi" tertimpa tanda silang pemilihnya.
   Elipsis saja tidak menolong — ia memotong di tepi KOTAK, sedangkan tombolnya
   mengambang di dalam kotak itu, jadi huruf terakhir tetap tertutup. Yang
   dibutuhkan adalah tepi teks yang berhenti lebih awal. */
.keranjang-peminta .choices__item {
    padding-inline-end: 1.6rem !important;
}

/* Tombol naik-turun bawaan peramban pada Qty DIBUANG. Kolomnya kini selebar
   1/12 (±55px) dan spinner itu memakan hampir seluruh ruangnya sehingga
   angkanya terdorong keluar pandangan — kotak terlihat KOSONG padahal berisi 3.
   Nilainya tetap bisa diketik & panah papan-ketik tetap jalan. Aturan yang
   sama sudah dipakai di baris Servis (.layanan-rapat). */
.keranjang-rapat input[type='number'] {
    -moz-appearance: textfield;
    appearance: textfield;
}
.keranjang-rapat input[type='number']::-webkit-outer-spin-button,
.keranjang-rapat input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ============================================================
   KEPALA TABEL TableRepeater — PUTIH DI ATAS PUTIH DI MODE GELAP.

   Dilaporkan 12 Sep 2026 di Penyesuaian Stok: baris judul kolomnya
   ("Produk", "Batch (exp)", "Stok Sistem", …) tidak terbaca sama sekali —
   latar terang dengan tulisan terang.

   SEBABNYA bukan salah warna melainkan CSS YANG TIDAK PERNAH DIBANGUN.
   Plugin awcodes/filament-table-repeater tidak membawa CSS sendiri; ia
   menulis kelas Tailwind di bladenya dan mengandalkan proyek pemakainya ikut
   mengompilasinya. Panel ini memakai CSS Filament BAWAAN (tanpa
   tailwind.config.js, tanpa tema kustom), jadi yang tersedia hanya utilitas
   yang kebetulan sudah ada di sana: `bg-gray-100` ikut, sedangkan
   `dark:bg-gray-900/60` dan `dark:text-gray-300` tidak. Hasilnya di mode
   gelap: latar abu-terang milik mode terang, di atas warna teks milik mode
   gelap.

   Karena itu aturannya ditulis atas KELAS MILIK PLUGIN (`.table-repeater-*`),
   bukan atas kelas Tailwind — kelas plugin selalu ada di HTML-nya, apa pun
   yang terjadi pada proses pembangunan CSS.

   Dipakai di Penyesuaian Stok, Mutasi Stok, Penerimaan Barang, dan rincian
   biaya Rawat Inap — semuanya memakai TableRepeater yang sama.
   ============================================================ */
.table-repeater-header-column {
    background-color: #f3f4f6;
    color: #111827;
}

.dark .table-repeater-header-column {
    background-color: rgba(17, 24, 39, 0.6);
    color: #d1d5db;
}

/* Baris kosong ("belum ada isi") lahir dari masalah yang sama. */
.dark .table-repeater-empty-column {
    color: #9ca3af;
}

/* ===================================================================
   CATATAN ARSIP KRELOSES — digambar di atas KERTAS TERANG, juga saat
   temanya gelap. Dipilih pemilik sistem 21 Sep 2026.

   Sebabnya: HTML arsip membawa warnanya sendiri di dalam tulisannya
   (style="color:…"), dan warna tertanam selalu menang atas tema. Di
   tema gelap hasilnya kelabu di atas hitam, nyaris tak terbaca.

   Memaksa seluruh teks jadi terang memang menyelesaikan keterbacaan,
   tapi ikut memadamkan merah pada "ALERT : BREATHING" — peringatan
   yang sengaja ditulis dokternya. Jadi warnanya dibiarkan utuh dan
   latarnya yang dibuat terang.

   Catatan PetGor tidak kena aturan ini: ia ditulis lewat editor yang
   tidak menanamkan warna, jadi ikut tema seperti biasa.
   =================================================================== */
.catatan-isi--kertas {
    background: #ffffff;
    color: #1f2937;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px 18px;
}

/* Sel & garis tabel arsip ikut dibuat terang. Tanpa ini, tabel Kreloses
   yang ber-border gelap tetap menggores kertasnya dengan garis hitam
   tebal yang di tema terang tidak pernah terlihat. */
.catatan-isi--kertas table,
.catatan-isi--kertas th,
.catatan-isi--kertas td {
    border-color: #e5e7eb;
}

.catatan-isi--kertas th {
    background: #f8fafc;
}

/* Teks yang TIDAK membawa warnanya sendiri tetap perlu dipastikan gelap:
   di tema gelap ia mewarisi warna terang dari induknya, dan di atas
   kertas putih itu berarti tulisan putih di atas putih. */
:is(.dark) .catatan-isi--kertas :where(p, li, td, th, h1, h2, h3, h4, h5, h6, span, div, strong, em):not([style*="color"]) {
    color: #1f2937;
}

:is(.dark) .catatan-isi--kertas :where(a):not([style*="color"]) {
    color: #0e7490;
}

/* Kartu dasbor "Progres Dokter/Grooming" saat ada pasien yang sedang
   ditangani: garis tipis berjalan di kaki kartu. Hanya transform (dikerjakan
   GPU, tidak memicu tata letak ulang), jadi tidak memberatkan halaman.
   Kelasnya dipasang StatsOverview::tandaBerjalan() hanya bila angkanya > 0. */
.kartu-berjalan {
    position: relative;
    overflow: hidden;
}
.kartu-berjalan::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 35%;
    border-radius: 3px;
    background: linear-gradient(90deg, transparent, #0ea5a4, transparent);
    animation: kartu-berjalan 1.6s ease-in-out infinite;
}
@keyframes kartu-berjalan {
    from { transform: translateX(-100%); }
    to   { transform: translateX(300%); }
}
@media (prefers-reduced-motion: reduce) {
    .kartu-berjalan::after { animation: none; width: 100%; opacity: .5; }
}

/* ============================================================
   Form PO ALA KASIR (24 Sep 2026: "seperti kasir umumnya").
   Baris barang = baris struk: tanpa kartu, judul kolom sekali di baris
   pertama, tombol hapus di gutter kanan. Cara kerjanya sama dengan
   .layanan-rapat, tapi gutter-nya cukup untuk SATU tombol (hapus) karena
   PO tidak bisa diurut-ulang.
   ============================================================ */
.po-kasir ul > div {
    gap: 0 !important;
    row-gap: 0 !important;
}
.po-kasir .fi-fo-repeater-item {
    position: relative;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
    border-bottom: 1px dashed rgba(148, 163, 184, 0.35) !important;
    background: transparent !important;
}
.po-kasir .fi-fo-repeater-item:last-child {
    border-bottom: 0 !important;
}
.po-kasir .fi-fo-repeater-item-content {
    padding: 0.35rem 2.75rem 0.35rem 0.15rem !important;
}
.po-kasir .fi-fo-repeater-item-header {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    padding: 0 0.4rem !important;
    min-height: 0 !important;
    border: 0 !important;
    align-items: center;
}
.po-kasir .fi-input {
    padding-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
}
.po-kasir input[type='number'] {
    -moz-appearance: textfield;
    appearance: textfield;
    text-align: center;
}
.po-kasir input[type='number']::-webkit-outer-spin-button,
.po-kasir input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Subtotal rata kanan & tebal, seperti kolom harga di struk. */
.po-kasir .po-subtotal {
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    padding-top: 0.45rem;
}
/* Judul kolom hanya di baris pertama — di layar lebar saja. Di HP isian
   bertumpuk, jadi tiap baris tetap butuh labelnya sendiri. */
@media (min-width: 768px) {
    .po-kasir .fi-fo-repeater-item:not(:first-child) .fi-fo-field-wrp-label {
        display: none !important;
    }
    .po-kasir .fi-fo-repeater-item:first-child .fi-fo-field-wrp-label span {
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: rgb(100, 116, 139);
    }
}
@media (max-width: 767px) {
    .po-kasir .fi-fo-repeater-item-content {
        padding-right: 0.15rem !important;
        padding-top: 2.2rem !important;
    }
    .po-kasir .fi-fo-repeater-item-header {
        bottom: auto;
        height: 2rem;
    }
}

/* Panel total ala layar kasir. */
.po-ringkasan {
    background: linear-gradient(135deg, rgba(var(--primary-500), 0.10), rgba(var(--primary-500), 0.02)) !important;
    border: 1px solid rgba(var(--primary-500), 0.25) !important;
}
.po-ringkasan .po-total-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgb(100, 116, 139);
}
.po-ringkasan .po-total-angka {
    font-size: 1.9rem;
    line-height: 1.2;
    font-weight: 800;
    color: rgb(var(--primary-600));
    font-variant-numeric: tabular-nums;
    word-break: break-all;
}
.dark .po-ringkasan .po-total-angka {
    color: rgb(var(--primary-400));
}
.po-ringkasan .po-total-rinci {
    margin-top: 0.15rem;
    font-size: 0.8rem;
    color: rgb(100, 116, 139);
}

/* Info jenis & satuan di bawah nama produk pada baris PO. */
.po-kasir .fi-fo-field-wrp-helper-text { margin-top: -0.2rem; }
.po-kasir .po-info-produk { font-size: 0.72rem; line-height: 1.1; color: rgb(100, 116, 139); }
.po-kasir .fi-input-wrp-suffix { font-size: 0.75rem; }

/* Riwayat PO — garis waktu kecil (siapa membuat, mencetak, menerima). */
.riwayat-log { list-style: none; margin: 0; padding: 0; position: relative; }
.riwayat-log::before { content: ""; position: absolute; left: 0.7rem; top: 0.4rem; bottom: 0.4rem; width: 1px; background: rgba(148, 163, 184, 0.45); }
.riwayat-log li { position: relative; display: flex; gap: 0.6rem; padding: 0.3rem 0; }
.riwayat-log-ikon { flex: none; width: 1.4rem; height: 1.4rem; border-radius: 9999px; display: grid; place-items: center; font-size: 0.72rem; font-weight: 700; background: rgb(241, 245, 249); color: rgb(71, 85, 105); position: relative; z-index: 1; }
.riwayat-log-buat .riwayat-log-ikon { background: rgba(var(--primary-500), 0.15); color: rgb(var(--primary-700)); }
.riwayat-log-cetak .riwayat-log-ikon { background: rgb(224, 231, 255); color: rgb(67, 56, 202); }
.riwayat-log-proses .riwayat-log-ikon { background: rgb(254, 243, 199); color: rgb(180, 83, 9); }
.riwayat-log-terima .riwayat-log-ikon { background: rgb(220, 252, 231); color: rgb(21, 128, 61); }
.riwayat-log-batal .riwayat-log-ikon { background: rgb(254, 226, 226); color: rgb(185, 28, 28); }
.riwayat-log-aksi { font-size: 0.82rem; line-height: 1.25; font-weight: 500; }
.riwayat-log-meta { font-size: 0.72rem; color: rgb(100, 116, 139); }
.riwayat-log-kosong { font-size: 0.8rem; color: rgb(100, 116, 139); }
.dark .riwayat-log-ikon { background: rgba(255, 255, 255, 0.08); color: rgb(203, 213, 225); }

/* ===================================================================
   PAPAN STATUS APOTEK — ikon tahap + tanda hidup.
   Diminta 25 Sep 2026: "tambahkan ikon agar lebih bagus, seperti
   sedang loading icon 3D".

   Tiap kartu punya SATU ikon besar di kepala kartu: cakram timbul,
   kesan tiga dimensinya dibuat dari cahaya di atas + bayangan di bawah
   (inset shadow), bukan gambar 3D — supaya tetap tajam di layar apa
   pun, tidak ada berkas yang perlu diunduh, dan tetap ikut tema gelap.

     antre     -> jam, MENGEMBANG pelan  (menunggu, belum disentuh)
     disiapkan -> panah MEMUTAR          (ini "loading"-nya)
     siap      -> lonceng BERGOYANG      (sudah jadi, minta dipanggil)
     terlantar -> merah, goyangan keras  (>30 menit belum diambil)
     selesai   -> centang, DIAM          (tidak menuntut apa pun)

   IKONNYA SELALU ADA; yang bersyarat hanya NYALA dan GERAKNYA, lewat
   kelas .apotek-hidup yang cuma terpasang saat kartunya berisi — lihat
   StatusApotekStats::getStats(). Papan yang beranimasi sepanjang hari
   berubah jadi hiasan dinding.
   =================================================================== */

/* ---- Cakram dasar: keadaan diam/kosong ---- */
.apotek-stat .fi-wi-stats-overview-stat-icon {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.55rem;
    border-radius: 9999px;
    flex: none;
    color: #fff;
    background: linear-gradient(145deg, #cbd5e1, #94a3b8);
    box-shadow:
        0 3px 6px rgba(15, 23, 42, 0.18),
        inset 0 1.5px 0 rgba(255, 255, 255, 0.5),
        inset 0 -2px 4px rgba(15, 23, 42, 0.15);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Kartu kosong: ikonnya tetap ada, hanya diredupkan. */
.apotek-stat:not(.apotek-hidup) .fi-wi-stats-overview-stat-icon {
    opacity: 0.5;
}

.dark .apotek-stat .fi-wi-stats-overview-stat-icon {
    background: linear-gradient(145deg, #475569, #1e293b);
    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.45),
        inset 0 1.5px 0 rgba(255, 255, 255, 0.18),
        inset 0 -2px 4px rgba(0, 0, 0, 0.35);
}

/* ---- ANTRE: jam yang mengembang pelan ----
   Urutan blok ini SENGAJA sesudah aturan tema gelap: warnanya sama di
   terang maupun gelap, karena artinya sama. */
.apotek-hidup.apotek-antre .fi-wi-stats-overview-stat-icon {
    background: linear-gradient(145deg, #fbbf24, #d97706);
    animation: apotek-napas 2.6s ease-in-out infinite;
}

@keyframes apotek-napas {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.09); }
}

/* ---- SEDANG DISIAPKAN: panah memutar ----
   Ikonnya berputar, kartunya TIDAK. Bilah berjalan di kaki kartu
   datang dari .kartu-berjalan yang sudah ada. */
.apotek-hidup.apotek-racik .fi-wi-stats-overview-stat-icon {
    background: linear-gradient(145deg, #2dd4bf, #0d9488);
    animation: apotek-putar 1.7s linear infinite;
}

@keyframes apotek-putar {
    to { transform: rotate(360deg); }
}

/* ---- SIAP DIAMBIL: lonceng bergoyang ----
   Goyangannya berhenti lama di tengah putaran: lonceng yang bergoyang
   tanpa henti jadi latar, yang sesekali berbunyi tetap tertangkap. */
.apotek-hidup.apotek-siap .fi-wi-stats-overview-stat-icon {
    background: linear-gradient(145deg, #4ade80, #16a34a);
    animation: apotek-lonceng 2.6s ease-in-out infinite;
}

@keyframes apotek-lonceng {
    0%, 62%, 100% { transform: rotate(0deg); }
    68%           { transform: rotate(14deg); }
    76%           { transform: rotate(-11deg); }
    84%           { transform: rotate(7deg); }
    92%           { transform: rotate(-4deg); }
}

/* ---- TERLANTAR: merah, dan tidak lagi sopan ----
   Obatnya sudah jadi lebih dari setengah jam dan pemiliknya masih duduk
   di ruang tunggu tanpa tahu. Ini satu-satunya gerakan yang boleh
   mengganggu — karena itu ia juga satu-satunya yang menggerakkan
   kartunya, bukan cuma ikonnya. */
.apotek-hidup.apotek-terlantar .fi-wi-stats-overview-stat-icon {
    background: linear-gradient(145deg, #f87171, #dc2626);
    animation: apotek-lonceng 1.1s ease-in-out infinite;
}

.apotek-hidup.apotek-terlantar {
    animation: apotek-waspada 1.5s ease-in-out infinite;
}

@keyframes apotek-waspada {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
    50%      { box-shadow: 0 0 0 5px rgba(220, 38, 38, 0.16); }
}

/* ---- SELESAI: menyala, tidak pernah bergerak ---- */
.apotek-hidup.apotek-selesai .fi-wi-stats-overview-stat-icon {
    background: linear-gradient(145deg, #94a3b8, #475569);
}

/* Yang memilih gerakan seminimal mungkin di sistemnya tetap mendapat
   papan yang utuh: ikon, warna, dan angkanya sudah membawa seluruh
   artinya — yang hilang hanya geraknya. */
@media (prefers-reduced-motion: reduce) {
    .apotek-stat,
    .apotek-stat *,
    .apotek-stat::after {
        animation: none !important;
    }
}

/* Keterangan "kenapa baris ini terkunci" di keranjang obat (25 Sep 2026). */
.keranjang-terkunci { font-size: .72rem; color: rgb(180, 83, 9); white-space: nowrap; }
.dark .keranjang-terkunci { color: rgb(252, 211, 77); }

/* ===================================================================
   DIPULIHKAN 25 Sep 2026 sore — gaya Rincian Jurnal & Histori Status.
   Ditulis sesi lain pukul 11:29 & 12:05, lalu TERHAPUS tanpa sengaja oleh
   suntingan yang memotong berkas ini di satu nomor baris lalu menulis ulang
   ekornya. Isinya disalin persis dari transkrip penulisnya, tidak ditulis
   ulang. PELAJARAN: berkas bersama seperti ini hanya boleh DITAMBAH di ujung
   atau disunting per pola — jangan pernah dipotong di nomor baris.
   =================================================================== */
/* ===================================================================
   RINCIAN JURNAL & HISTORI STATUS faktur — jendela ala Accurate
   (25 Sep 2026). Lihat App\Support\RincianFaktur.
   =================================================================== */
.rj-kepala { display: grid; grid-template-columns: max-content 1fr max-content 1fr; gap: 0.35rem 1rem; margin: 0 0 0.9rem; font-size: 0.85rem; }
.rj-kepala dt { font-weight: 600; }
.rj-kepala dd { margin: 0; }
@media (max-width: 640px) { .rj-kepala { grid-template-columns: max-content 1fr; } }
.rj-gulung { overflow-x: auto; }
.rj-tabel { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.rj-tabel th { text-align: left; font-weight: 600; padding: 0.45rem 0.5rem; border-bottom: 1px solid rgba(148, 163, 184, 0.5); }
.rj-tabel th:not(:first-child), .rj-tabel td:not(:first-child) { text-align: right; white-space: nowrap; width: 8.5rem; }
.rj-tabel td { padding: 0.5rem; border-bottom: 1px solid rgba(148, 163, 184, 0.25); vertical-align: top; }
.rj-tabel .rj-kredit td:first-child { padding-left: 2.25rem; }
.rj-ket { font-size: 0.72rem; color: rgb(100, 116, 139); }
.rj-tabel tfoot td { font-weight: 600; border-bottom: 0; }
.rj-tabel tfoot td:first-child { font-weight: 400; font-style: italic; font-size: 0.75rem; color: rgb(100, 116, 139); }
.rj-sub { margin: 1.1rem 0 0.2rem; font-size: 0.8rem; }
.rj-catatan { margin: 0.7rem 0 0; font-size: 0.75rem; color: rgb(100, 116, 139); }

.hs { list-style: none; margin: 0; padding: 0; }
.hs li { display: grid; grid-template-columns: 9.5rem 1.4rem 1fr; gap: 0.6rem; position: relative; padding-bottom: 1.1rem; }
.hs li:not(:last-child)::after { content: ""; position: absolute; left: calc(9.5rem + 0.6rem + 0.7rem); top: 1.3rem; bottom: 0; width: 1px; background: rgba(148, 163, 184, 0.55); }
.hs-waktu { font-size: 0.85rem; }
.hs-waktu small { color: rgb(100, 116, 139); }
.hs-titik { width: 1.1rem; height: 1.1rem; margin: 0.1rem auto 0; border-radius: 9999px; border: 3px solid rgb(148, 163, 184); background: #fff; position: relative; z-index: 1; }
.hs-lunas .hs-titik { border-color: rgb(34, 197, 94); }
.hs-buka .hs-titik { border-color: rgb(245, 158, 11); }
.hs-batal .hs-titik { border-color: rgb(239, 68, 68); }
.hs-info .hs-titik { border-color: rgb(59, 130, 246); }
.hs-status { font-weight: 600; font-size: 0.9rem; }
.hs-uraian { font-size: 0.8rem; color: rgb(71, 85, 105); }
.dark .hs-titik { background: rgb(17, 24, 39); }
.dark .hs-uraian { color: rgb(203, 213, 225); }
@media (max-width: 640px) {
    .hs li { grid-template-columns: 1.4rem 1fr; }
    .hs-waktu { grid-column: 2; order: 2; }
    .hs li:not(:last-child)::after { left: 0.7rem; }
}
.rj-pisah { margin: 1.1rem 0; border: 0; border-top: 1px dashed rgba(148, 163, 184, 0.55); }