/*
 * Tampilan compact untuk panel Filament.
 * Didaftarkan di AppServiceProvider, lalu dipublish ke public/ dengan `php artisan filament:assets`.
 */

/* Halaman: jarak atas-bawah dan judul lebih rapat */
.fi-page > section {
    row-gap: 1.25rem;
    padding-top: 1.25rem;
    padding-bottom: 1.5rem;
}

.fi-header-heading {
    font-size: 1.375rem;
    line-height: 1.875rem;
    font-weight: 700;
}

.fi-breadcrumbs {
    font-size: 0.75rem;
}

/* Sidebar: semua menu (akun, bahasa, 10 menu dalam 3 grup) muat satu layar laptop tanpa scroll.
   Selector diawali .fi-sidebar supaya menang dari class bawaan Filament (gap-y-7, py-2, h-6, text-sm) yang dimuat belakangan. */
.fi-sidebar .fi-sidebar-nav {
    padding: 0.5rem 1rem;
    row-gap: 0.5rem;
}

.fi-sidebar .fi-sidebar-nav-groups {
    row-gap: 0.5rem;
}

.fi-sidebar .fi-sidebar-group,
.fi-sidebar .fi-sidebar-group-items {
    row-gap: 0.0625rem;
}

.fi-sidebar .fi-sidebar-item-button {
    padding-top: 0.3125rem;
    padding-bottom: 0.3125rem;
    column-gap: 0.625rem;
}

.fi-sidebar .fi-sidebar-item-icon,
.fi-sidebar .fi-sidebar-group-icon {
    width: 1.125rem;
    height: 1.125rem;
}

.fi-sidebar .fi-sidebar-item-label {
    font-size: 0.8125rem;
    line-height: 1.25rem;
}

/* Judul grup kecil berhuruf kapital, cukup sebagai pemisah */
.fi-sidebar .fi-sidebar-group-button {
    padding-top: 0.375rem;
    padding-bottom: 0.125rem;
}

.fi-sidebar .fi-sidebar-group-label {
    font-size: 0.6875rem;
    line-height: 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.fi-sidebar .fi-sidebar-group-collapse-button {
    width: 1.5rem;
    height: 1.5rem;
}

/* Tabel: baris rapat (compact) supaya lebih banyak data terlihat, header bergaya kolom laporan.
   Selector diawali .fi-ta-table supaya menang dari class bawaan Filament (py-4 / py-3.5) yang dimuat belakangan. */
.fi-ta-table .fi-ta-header-cell {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.fi-ta-header-cell {
    background-color: rgb(249 250 251);
}

.dark .fi-ta-header-cell {
    background-color: rgb(255 255 255 / 0.03);
}

.fi-ta-header-cell-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgb(107 114 128);
}

.dark .fi-ta-header-cell-label {
    color: rgb(156 163 175);
}

.fi-ta-table .fi-ta-cell .py-4,
.fi-ta-table .fi-ta-text,
.fi-ta-table .fi-ta-actions-cell > div,
.fi-ta-table .fi-ta-selection-cell > div {
    padding-top: 0.3125rem;
    padding-bottom: 0.3125rem;
}

.fi-ta-table .fi-ta-text {
    row-gap: 0;
}

.fi-ta-table .fi-ta-record-checkbox {
    margin-top: 0;
    margin-bottom: 0;
}

.fi-ta-text-item-label {
    font-size: 0.8125rem;
    line-height: 1.25rem;
}

/* Keterangan kecil di bawah isi sel (mis. nama WNA, info approval) lebih rapat */
.fi-ta-table .fi-ta-text p.text-sm {
    font-size: 0.75rem;
    line-height: 1rem;
}

/* Badge & tombol di dalam tabel sedikit lebih pendek */
.fi-ta-table .fi-ta-text .fi-badge {
    padding-top: 0.0625rem;
    padding-bottom: 0.0625rem;
}

.fi-ta-table .fi-ta-actions .fi-btn {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

/* Daftar User (halaman fi-resource-users): baris lebih rapat lagi supaya 20 user muat ke bawah.
   Tinggi baris ditentukan tombol ikon edit/hapus (bawaan 36px), jadi tombolnya ikut dikecilkan. */
.fi-resource-users .fi-ta-table .fi-ta-text,
.fi-resource-users .fi-ta-table .fi-ta-actions-cell > div {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
}

.fi-resource-users .fi-ta-table .fi-ta-actions .fi-icon-btn {
    width: 1.625rem;
    height: 1.625rem;
}

.fi-resource-users .fi-ta-table .fi-ta-text .fi-badge {
    padding-top: 0;
    padding-bottom: 0;
    font-size: 0.6875rem;
}

.fi-resource-users .fi-ta-table .fi-ta-header-cell {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

/* Baris pencarian & filter di atas tabel: tipis. div. = lebih spesifik dari class bawaan py-3 */
div.fi-ta-header-toolbar {
    padding: 0.375rem 0.75rem;
}

.fi-ta-search-field {
    width: 13rem;
}

.fi-ta-search-field .fi-input {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.8125rem;
    line-height: 1.25rem;
}

.fi-ta-header-toolbar .fi-icon-btn {
    width: 1.75rem;
    height: 1.75rem;
}

/* Header halaman Invoice (resources/views/filament/resources/invoice-resource/header.blade.php):
   judul, lalu tab bergaris bawah + tombol Buat Invoice dalam satu baris, tabel langsung di bawahnya */
.fi-page > section:has(> .inv-header) {
    row-gap: 0.625rem;
}

.inv-header .fi-header-heading {
    margin-top: 0.125rem;
}

.inv-header-bar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.5rem;
    border-bottom: 1px solid rgb(var(--gray-200));
}

.dark .inv-header-bar {
    border-bottom-color: rgb(255 255 255 / 0.1);
}

.inv-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.125rem;
}

.inv-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.3125rem 0.625rem;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    color: rgb(var(--gray-500));
}

.inv-tab:hover {
    color: rgb(var(--gray-700));
}

.inv-tab-active,
.inv-tab-active:hover {
    color: rgb(var(--primary-600));
    border-bottom-color: rgb(var(--primary-600));
}

.dark .inv-tab:hover {
    color: rgb(var(--gray-200));
}

.dark .inv-tab-active,
.dark .inv-tab-active:hover {
    color: rgb(var(--primary-400));
    border-bottom-color: rgb(var(--primary-400));
}

.inv-tab-icon {
    width: 0.875rem;
    height: 0.875rem;
}

.inv-header-actions {
    padding-bottom: 0.3125rem;
}

.inv-tab,
.inv-header-actions .fi-btn {
    white-space: nowrap;
}

/* HP: tombol Buat Invoice di baris sendiri (kanan), kedua tab satu baris di bawahnya menempel garis */
@media (max-width: 639px) {
    .inv-header-bar {
        flex-wrap: wrap;
        row-gap: 0.25rem;
    }

    .inv-header-actions {
        order: -1;
        width: 100%;
        display: flex;
        justify-content: flex-end;
        padding-bottom: 0;
    }

    .inv-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }
}

/* Tombol Buat Invoice kecil */
.inv-header-actions .fi-btn {
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    gap: 0.25rem;
}

.inv-header-actions .fi-btn .fi-btn-icon {
    width: 0.875rem;
    height: 0.875rem;
}

/* Form Buat / Edit Invoice (InvoiceResource::aturModalInvoice): rapat supaya muat satu layar */
/* Form Buat Order: daftar jenis/PIC & daftar WNA dalam kotak, pratinjau order di bawahnya */
/* Form Buat / Edit Order (OrderResource::form, class .order-form): isian rapat seperti form invoice */
.order-form .fi-section-content {
    padding: 1rem 1.25rem;
}

.order-form .fi-fo-component-ctn {
    gap: 0.75rem;
}

.order-form .fi-fo-field-wrp {
    row-gap: 0.25rem;
}

.order-form .fi-fo-field-wrp-label span {
    font-size: 0.75rem;
}

.order-form .fi-input,
.order-form .fi-select-input,
.order-form .choices__inner {
    padding-top: 0.3125rem;
    padding-bottom: 0.3125rem;
    font-size: 0.8125rem;
}

.order-form .fi-fo-field-wrp-helper-text {
    font-size: 0.6875rem;
}

/* Daftar jenis & PIC / daftar WNA: kotak berisi judul kolom + satu baris per item (tanpa kartu), × di ujung baris */
/* Tanpa overflow: hidden supaya daftar pilihan (dropdown PIC / jenis) tidak terpotong kotak */
.order-daftar {
    border-radius: 0.625rem;
    box-shadow: inset 0 0 0 1px rgb(var(--gray-200));
}

.order-form .order-daftar > .fi-fo-component-ctn,
.order-form .order-baris,
.order-form .order-baris > ul > div {
    gap: 0;
}

.order-baris-head,
.order-form .order-baris .fi-fo-repeater-item-content > .fi-fo-component-ctn {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.5rem;
}

.order-baris-head {
    padding: 0.3125rem 2.25rem 0.3125rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgb(var(--gray-500));
    background: rgb(var(--gray-50));
    border-bottom: 1px solid rgb(var(--gray-200));
    border-radius: 0.625rem 0.625rem 0 0;
}

.order-daftar .fi-fo-placeholder {
    line-height: 1;
}

.order-form .order-baris .fi-fo-repeater-item {
    position: relative;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    border-bottom: 1px solid rgb(var(--gray-100));
}

.order-form .order-baris .fi-fo-repeater-item > .fi-fo-repeater-item-content {
    padding: 0.375rem 2.25rem 0.375rem 0.625rem;
    border: 0;
}

/* Tombol × di ujung kanan baris (header item jadi melayang) */
.order-form .order-baris .fi-fo-repeater-item-header {
    position: absolute;
    top: 0.625rem;
    right: 0.5rem;
    padding: 0;
    border: 0;
}

/* "+ Tambah ..." berupa tautan kecil di bawah tabel */
.order-baris > div.flex {
    padding: 0.375rem 0.625rem;
}

.order-form .order-baris > div.flex .fi-btn {
    padding: 0;
    box-shadow: none;
    background: transparent;
    color: rgb(var(--primary-600));
    font-size: 0.75rem;
    font-weight: 500;
}

/* Buat Order: tiap pengurusan satu baris -> kiri jenis & PIC, kanan daftar WNA-nya sendiri (repeater di dalam repeater) */
.order-daftar:has(.order-pengurusan) .order-baris-head,
.order-form .order-pengurusan > ul > div > .fi-fo-repeater-item > .fi-fo-repeater-item-content > .fi-fo-component-ctn {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 0.75rem;
}

.order-form .order-kiri > .fi-fo-component-ctn,
.order-form .order-kanan > .fi-fo-component-ctn {
    gap: 0.375rem;
}

.order-form .order-kiri .fi-fo-placeholder {
    font-size: 0.6875rem;
    line-height: 1rem;
    color: rgb(var(--gray-500));
}

/* Daftar WNA di dalam baris pengurusan: tanpa garis antar-nama, × di ujung setiap nama */
.order-form .order-wna .fi-fo-repeater-item {
    border-bottom: 0;
}

.order-form .order-wna .fi-fo-repeater-item > .fi-fo-repeater-item-content {
    padding: 0 1.75rem 0.25rem 0;
}

.order-form .order-wna .fi-fo-repeater-item-header {
    top: 0.3125rem;
    right: 0;
}

.order-form .order-wna > div.flex {
    padding: 0.125rem 0 0;
}

.order-form .order-salin .fi-link {
    font-size: 0.75rem;
}

/* Jenis yang tidak butuh WNA: kotak WNA terkunci */
.order-wna-kunci {
    padding: 0.4375rem 0.625rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    color: rgb(var(--gray-500));
    background: rgb(var(--gray-50));
    box-shadow: inset 0 0 0 1px rgb(var(--gray-200));
}

.dark .order-wna-kunci {
    color: rgb(var(--gray-400));
    background: rgb(255 255 255 / 0.03);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
}

@media (max-width: 767px) {
    .order-daftar:has(.order-pengurusan) .order-baris-head,
    .order-form .order-pengurusan > ul > div > .fi-fo-repeater-item > .fi-fo-repeater-item-content > .fi-fo-component-ctn {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0.375rem;
    }
}

/* Keterangan di bawah daftar WNA (Edit: "Jenis ini dicatat per WNA ...") */
.order-daftar .fi-fo-field-wrp-helper-text {
    padding: 0 0.625rem 0.5rem;
}

.dark .order-daftar {
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
}

.dark .order-baris-head { background: rgb(255 255 255 / 0.05); border-color: rgb(255 255 255 / 0.1); color: rgb(var(--gray-400)); }
.dark .order-form .order-baris .fi-fo-repeater-item { background: transparent; border-color: rgb(255 255 255 / 0.05); }
.dark .order-form .order-baris > div.flex .fi-btn { color: rgb(var(--primary-400)); }

.order-pratinjau {
    padding: 0.625rem 0.875rem;
    border-radius: 0.5rem;
    background: rgba(var(--primary-500), 0.06);
    box-shadow: inset 0 0 0 1px rgba(var(--primary-500), 0.25);
    font-size: 0.875rem;
    line-height: 1.6;
}

.order-pratinjau ul {
    margin-top: 0.25rem;
    padding-left: 1.125rem;
    list-style: disc;
}

/* Tooltip daftar order bersama: satu order per baris */
.tippy-content {
    white-space: pre-line;
}

/* Form invoice hampir selebar layar (tetap ada jarak tepi), supaya semua kolom lega */
.fi-modal-window.inv-modal {
    max-width: min(1640px, calc(100vw - 2rem)) !important;
}

/* Biaya tambahan / Pajak / Potongan: masing-masing dalam kotak */
.inv-kotak {
    padding: 0.625rem 1.75rem 0.625rem 0.75rem;
    border-radius: 0.625rem;
    box-shadow: inset 0 0 0 1px rgb(var(--gray-200));
}

.dark .inv-kotak {
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
}

/* Nama pilihan yang panjang terpotong "…" di dalam kotak isian, tidak menabrak kolom nilai.
   Hanya kotak isiannya (.choices__inner) yang dipotong; daftar pilihan (dropdown) tetap bebas terbuka. */
.inv-rincian .choices {
    min-width: 0;
}

.inv-rincian .choices__inner {
    min-width: 0;
    overflow: hidden;
}

/* Daftar pilihan boleh lebih lebar dari kotaknya supaya nama panjang terbaca utuh */
.inv-rincian .choices__list--dropdown {
    min-width: 100%;
    width: max-content;
    max-width: 22rem;
    z-index: 30;
}

/* Keterangan kecil di samping judul kotak (mis. "Dihitung dari biaya jasa") */
.inv-kotak .fi-fo-field-wrp-hint {
    font-size: 0.6875rem;
    white-space: normal;
    text-align: right;
}

.inv-modal .fi-modal-header {
    padding: 0.875rem 1.25rem 0;
}

.inv-modal .fi-modal-heading {
    font-size: 1rem;
}

.inv-modal .fi-modal-content {
    padding: 0.75rem 1.25rem;
    row-gap: 0.75rem;
}

.inv-modal .fi-modal-footer {
    padding: 0.625rem 1.25rem 0.875rem;
}

.inv-modal .fi-fo-component-ctn {
    gap: 0.75rem;
}

.inv-modal .fi-fo-field-wrp {
    row-gap: 0.25rem;
}

.inv-modal .fi-fo-field-wrp-label span {
    font-size: 0.75rem;
}

.inv-modal .fi-input,
.inv-modal .fi-select-input,
.inv-modal .choices__inner {
    padding-top: 0.3125rem;
    padding-bottom: 0.3125rem;
    font-size: 0.8125rem;
}

.inv-modal .fi-fo-field-wrp-helper-text {
    font-size: 0.6875rem;
}

.inv-modal .fi-modal-footer .fi-btn {
    padding: 0.3125rem 0.875rem;
    font-size: 0.8125rem;
}

/* Baris pekerjaan (repeater "baris" di form invoice): judul kolom + satu baris per pekerjaan tanpa kartu */
.inv-baris-head {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    /* Sama dengan jarak antar-isian form (.inv-modal .fi-fo-component-ctn) supaya kolom lurus */
    column-gap: 0.75rem;
    padding: 0.3125rem 0;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgb(var(--gray-500));
    border-bottom: 1px solid rgb(var(--gray-200));
}

.inv-baris .fi-fo-repeater-item {
    padding-bottom: 0.375rem;
    border-bottom: 1px solid rgb(var(--gray-100)) !important;
    border-radius: 0;
}

.inv-baris .fi-fo-repeater-item-header {
    top: 0.375rem;
}

/* Pilihan pajak panjang (mis. "PPN 12% x DPP 11/12 (efektif 11%)") tetap satu baris, dipotong "..." */
.inv-rincian .choices__list--single .choices__item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Textarea deskripsi / nama: mulai satu baris, tinggi mengikuti isi */
.inv-baris textarea.fi-input {
    min-height: 2rem;
    line-height: 1.25rem;
}

/* Ringkasan total di form invoice (sama dengan PDF) */
.inv-sum {
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background: rgb(var(--gray-50));
    font-size: 0.8125rem;
}

.inv-sum-baris {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.125rem 0;
    color: rgb(var(--gray-600));
}

.inv-sum-tebal {
    font-weight: 600;
    color: rgb(var(--gray-900));
}

.inv-sum-kurang span:last-child {
    color: rgb(var(--danger-600));
}

/* DPP: hanya informasi dasar pengenaan PPN, tidak ikut dijumlahkan */
.inv-sum-info {
    color: rgb(var(--gray-400));
}

.inv-sum-grand {
    margin-top: 0.25rem;
    padding-top: 0.375rem;
    border-top: 1px solid rgb(var(--gray-300));
    font-size: 0.9375rem;
    font-weight: 700;
    color: rgb(var(--gray-950));
}

.dark .inv-sum {
    background: rgb(255 255 255 / 0.05);
}

.dark .inv-sum-tebal,
.dark .inv-sum-grand {
    color: rgb(255 255 255);
}

/* Penambah / pengurang: satu baris per item tanpa kartu, tombol hapus muncul saat kursor di atas baris */
.inv-rincian .fi-fo-repeater-item {
    position: relative;
    border: 0;
    box-shadow: none;
    background: transparent;
}

.inv-rincian .fi-fo-repeater-item-header {
    position: absolute;
    top: 0.25rem;
    right: -1.625rem;
    padding: 0;
    border: 0;
    opacity: 0;
    transition: opacity 75ms;
}

.inv-rincian .fi-fo-repeater-item:hover .fi-fo-repeater-item-header {
    opacity: 1;
}

.inv-rincian .fi-fo-repeater-item-content {
    padding: 0;
    border: 0;
}

.inv-rincian .fi-fo-repeater-item-content .fi-fo-component-ctn {
    gap: 0.375rem;
}

.inv-rincian ul > div {
    gap: 0.375rem;
}

/* Tombol "+ Tambah" (rata kiri lewat addActionAlignment) berupa tautan kecil */
.inv-rincian > div.flex .fi-btn {
    padding: 0;
    box-shadow: none;
    background: transparent;
    color: rgb(var(--primary-600));
    font-size: 0.75rem;
    font-weight: 500;
}

/* My Order > Progress: daftar tahapan sebagai tabel ringkas (MyOrderResource, action updateProgress).
   Judul kolom sekali di atas, tiap tahapan satu baris tipis: nomor | nama | toggle | tanggal */
.tahap-box {
    overflow: hidden;
    border-radius: 0.625rem;
    box-shadow: inset 0 0 0 1px rgb(var(--gray-200));
    counter-reset: tahap;
}

.tahap-box > .fi-fo-component-ctn,
.tahap-list,
.tahap-list > ul > div {
    gap: 0;
}

.tahap-grid,
.tahap-list .fi-fo-repeater-item-content > .fi-fo-component-ctn {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) 5rem 10rem;
    column-gap: 0.75rem;
    align-items: center;
}

.tahap-head {
    padding: 0.5rem 0.875rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgb(var(--gray-500));
    background: rgb(var(--gray-50));
    border-bottom: 1px solid rgb(var(--gray-200));
}

/* Tanda "#" sebesar nomor urut di bawahnya */
.tahap-head > span:first-child {
    font-size: 0.875rem;
}

.tahap-box .fi-fo-placeholder {
    line-height: 1;
}

.tahap-list .fi-fo-repeater-item {
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    border-bottom: 1px solid rgb(var(--gray-100));
}

.tahap-list .fi-fo-repeater-item:last-child {
    border-bottom: 0;
}

.tahap-list .fi-fo-repeater-item-content {
    padding: 0.375rem 0.875rem;
}

/* Nomor urut tahapan (kolom pertama) */
.tahap-list .fi-fo-repeater-item-content > .fi-fo-component-ctn::before {
    counter-increment: tahap;
    content: counter(tahap);
    font-size: 0.875rem;
    color: rgb(var(--gray-400));
}

/* Nama tahapan: tampil sebagai teks biasa, bukan kotak isian */
.tahap-list .fi-input-wrp:has(input[disabled]) {
    background: transparent;
    box-shadow: none;
}

.tahap-list input.fi-input[disabled] {
    padding: 0;
    font-size: 0.875rem;
    color: rgb(var(--gray-950));
    -webkit-text-fill-color: rgb(var(--gray-950));
}

.tahap-list .fi-fo-toggle {
    transform: scale(0.85);
    transform-origin: left center;
}

.tahap-list .fi-input-wrp:not(:has(input[disabled])) input.fi-input {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.8125rem;
}

.dark .tahap-box { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); }
.dark .tahap-head { background: rgb(255 255 255 / 0.05); border-color: rgb(255 255 255 / 0.1); color: rgb(var(--gray-400)); }
.dark .tahap-list .fi-fo-repeater-item { border-color: rgb(255 255 255 / 0.05); }
.dark .tahap-list input.fi-input[disabled] { color: rgb(255 255 255); -webkit-text-fill-color: rgb(255 255 255); }

/* Tombol hapus order yang terkunci (sudah masuk invoice): tetap bisa disorot supaya tooltip alasannya muncul.
   Tombol disabled tidak menerima klik, jadi aman. */
.fi-icon-btn.hapus-terkunci {
    pointer-events: auto;
    cursor: not-allowed;
}

/* Section / card form */
.fi-section-header {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
}

.fi-section-content {
    padding: 1.25rem;
}

/* Tooltip boleh multi-baris (dipakai detail tahapan di My Job) */
.tippy-content {
    white-space: pre-line;
}

/* Kartu statistik dashboard */
.fi-wi-stats-overview-stat {
    padding: 1rem 1.25rem;
}

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

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

.fi-wi-stats-overview-stat-description {
    font-size: 0.75rem;
}

/* Bar atas lebih tipis: 64px -> 48px. Kepala sidebar ("CMS Perizinan") ikut supaya garisnya tetap sejajar */
.fi-topbar > nav,
.fi-sidebar .fi-sidebar-header {
    height: 3rem;
}

.fi-logo {
    font-size: 1.0625rem;
    line-height: 1.5rem;
}

/* ===== Akun & notifikasi di bawah logo sidebar (resources/views/filament/sidebar-account.blade.php) ===== */
.sa-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0;
    padding: 0.375rem 0.5rem;
    border-radius: 0.625rem;
    background: rgb(var(--gray-50));
    box-shadow: inset 0 0 0 1px rgba(var(--gray-950), 0.05);
}

.sa-wrap .fi-avatar {
    width: 1.75rem;
    height: 1.75rem;
}

.sa-user {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
}

.sa-name {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.sa-name-main {
    overflow: hidden;
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgb(var(--gray-950));
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sa-name-role {
    font-size: 0.6875rem;
    color: rgb(var(--gray-500));
}

/* Sidebar diciutkan: avatar & lonceng ditumpuk di tengah rel ikon */
.sa-wrap.sa-collapsed {
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.375rem 0;
    background: transparent;
    box-shadow: none;
}

.dark .sa-wrap { background: rgb(255 255 255 / 0.05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); }
.dark .sa-wrap.sa-collapsed { background: transparent; box-shadow: none; }
.dark .sa-name-main { color: rgb(255 255 255); }
.dark .sa-name-role { color: rgb(var(--gray-400)); }

/* Pilihan bahasa di bawah kartu akun (ID / EN / 中文) */
.sa-lang {
    display: flex;
    gap: 0.25rem;
    margin: -0.125rem 0 0;
}

.sa-lang form { flex: 1; }

.sa-lang-btn {
    width: 100%;
    padding: 0.0625rem 0;
    font-size: 0.6875rem;
    font-weight: 600;
    border-radius: 0.375rem;
    color: rgb(var(--gray-500));
    box-shadow: inset 0 0 0 1px rgba(var(--gray-950), 0.1);
}

.sa-lang-btn:hover { background: rgb(var(--gray-50)); }

.sa-lang-active,
.sa-lang-active:hover {
    background: rgba(var(--primary-500), 0.1);
    color: rgb(var(--primary-600));
    box-shadow: inset 0 0 0 1px rgba(var(--primary-500), 0.4);
}

.dark .sa-lang-btn { color: rgb(var(--gray-400)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); }
.dark .sa-lang-btn:hover { background: rgb(255 255 255 / 0.05); }
.dark .sa-lang-active { background: rgba(var(--primary-500), 0.15); color: rgb(var(--primary-400)); }

/* Saklar "Tampilan laptop" di bawah pilihan bahasa (filament.tampilan-laptop-head): hanya di layar kecil,
   atau saat sedang aktif (halaman selebar laptop) supaya bisa dimatikan lagi */
.sa-laptop {
    display: none;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.3125rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgb(var(--gray-600));
    box-shadow: inset 0 0 0 1px rgba(var(--gray-950), 0.1);
}

@media (max-width: 1023px) {
    .sa-laptop { display: flex; }
}

html.tampilan-laptop .sa-laptop { display: flex; }

.sa-laptop:hover { background: rgb(var(--gray-50)); }
.sa-laptop:focus-visible { outline: 2px solid rgb(var(--primary-500)); outline-offset: 2px; }
.sa-laptop-label { display: inline-flex; align-items: center; gap: 0.375rem; }
.sa-laptop-icon { width: 1rem; height: 1rem; color: rgb(var(--gray-400)); }

.sa-laptop-switch {
    position: relative;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1rem;
    border-radius: 9999px;
    background: rgb(var(--gray-300));
    transition: background-color 0.15s;
}

.sa-laptop-switch::after {
    content: "";
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 9999px;
    background: #fff;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.15);
    transition: transform 0.15s;
}

html.tampilan-laptop .sa-laptop { color: rgb(var(--primary-600)); box-shadow: inset 0 0 0 1px rgba(var(--primary-500), 0.4); background: rgba(var(--primary-500), 0.1); }
html.tampilan-laptop .sa-laptop-icon { color: rgb(var(--primary-500)); }
html.tampilan-laptop .sa-laptop-switch { background: rgb(var(--primary-600)); }
html.tampilan-laptop .sa-laptop-switch::after { transform: translateX(0.75rem); }

.dark .sa-laptop { color: rgb(var(--gray-400)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); }
.dark .sa-laptop:hover { background: rgb(255 255 255 / 0.05); }
.dark .sa-laptop-switch { background: rgb(var(--gray-600)); }
html.tampilan-laptop.dark .sa-laptop { color: rgb(var(--primary-400)); background: rgba(var(--primary-500), 0.15); box-shadow: inset 0 0 0 1px rgba(var(--primary-500), 0.4); }
html.tampilan-laptop.dark .sa-laptop-switch { background: rgb(var(--primary-500)); }

/* Panel notifikasi dirender di <body>; tombol bawaannya disembunyikan (tombolnya ada di sidebar) */
.dn-host .fi-topbar-database-notifications-btn {
    display: none;
}

/* Bar atas kecil pengganti bar atas bawaan, hanya di layar kecil (HP/tablet).
   Menempel di atas (sticky) supaya konten tidak pernah tertimpa tombol ☰ saat digulir. */
.mobile-topbar {
    position: sticky;
    top: 0;
    z-index: 25;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.4375rem 0.75rem;
    background: rgba(var(--gray-50), 0.95);
    border-bottom: 1px solid rgb(var(--gray-200));
    backdrop-filter: blur(6px);
}

.mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    color: rgb(var(--gray-600));
    background: rgb(255 255 255);
    box-shadow: inset 0 0 0 1px rgba(var(--gray-950), 0.1);
}

.mobile-topbar-brand {
    font-size: 0.9375rem;
    font-weight: 700;
    color: rgb(var(--gray-950));
}

.dark .mobile-topbar { background: rgba(var(--gray-950), 0.95); border-color: rgb(255 255 255 / 0.1); }
.dark .mobile-menu-btn { color: rgb(var(--gray-300)); background: rgb(var(--gray-900)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); }
.dark .mobile-topbar-brand { color: rgb(255 255 255); }

@media (min-width: 1024px) {
    .mobile-topbar {
        display: none;
    }
}

/* Konten lebih lebar: jarak antara menu samping dan konten dipersempit (bawaan Filament 2rem) */
@media (min-width: 1024px) {
    .fi-main {
        padding-left: 0.5rem;
        padding-right: 1rem;
    }

    /* Sidebar diciutkan (rel ikon 3.75rem): jarak samping dikecilkan supaya ikon & tombol tetap di tengah */
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        scrollbar-gutter: auto !important;
    }

    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-header {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* ===== Dashboard ringkas: judul kecil, jarak rapat, fokus ke Monitor Pekerjaan ===== */
.fi-dashboard-page > section {
    row-gap: 0.75rem;
    padding-top: 0.75rem;
}

.fi-dashboard-page .fi-wi {
    gap: 0.75rem;
}

/* Pemilih perusahaan di atas strip ringkasan (Semua / JLJ / JLT) */
.cs-switch {
    display: inline-flex;
    margin-bottom: 0.5rem;
    padding: 0.1875rem;
    gap: 0.125rem;
    border-radius: 0.625rem;
    background: rgb(var(--gray-100));
}

.cs-opt {
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 0.5rem;
    color: rgb(var(--gray-600));
    transition: background-color 0.15s, color 0.15s;
}

.cs-opt:hover {
    color: rgb(var(--gray-900));
}

.cs-name {
    font-weight: 400;
    color: rgb(var(--gray-400));
}

.cs-opt.cs-active {
    color: rgb(var(--primary-700));
    background: rgb(255 255 255);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.08);
}

.dark .cs-switch { background: rgb(255 255 255 / 0.05); }
.dark .cs-opt { color: rgb(var(--gray-400)); }
.dark .cs-opt:hover { color: rgb(255 255 255); }
.dark .cs-name { color: rgb(var(--gray-500)); }
.dark .cs-opt.cs-active { color: rgb(var(--primary-300)); background: rgb(var(--gray-800)); }

@media (max-width: 767px) {
    .cs-name { display: none; }
}

/* Strip ringkasan (resources/views/filament/widgets/job-monitor.blade.php) */
.ss-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

@media (min-width: 1024px) {
    .ss-strip {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.ss-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    background: rgb(255 255 255);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05), inset 0 0 0 1px rgba(var(--gray-950), 0.05);
    text-align: left;
    cursor: pointer;
    transition: box-shadow 0.15s, background-color 0.15s;
}

.ss-item:hover {
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05), inset 0 0 0 1px rgba(var(--gray-950), 0.2);
}

/* Kotak ringkasan yang sedang dipakai sebagai filter */
.ss-item.ss-active {
    background: rgb(var(--primary-50));
    box-shadow: inset 0 0 0 1.5px rgb(var(--primary-500));
}

/* Label "Filter: ..." di judul Monitor Pekerjaan */
.jm-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0.25rem 0.125rem 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 0.375rem;
    color: rgb(var(--primary-700));
    background: rgb(var(--primary-50));
}

.jm-filter-clear {
    padding: 0 0.375rem;
    border-radius: 0.25rem;
    font-weight: 400;
}

.jm-filter-clear:hover {
    background: rgb(var(--primary-100));
}

.dark .ss-item.ss-active { background: rgba(var(--primary-400), 0.1); box-shadow: inset 0 0 0 1.5px rgb(var(--primary-400)); }
.dark .jm-filter { color: rgb(var(--primary-300)); background: rgba(var(--primary-400), 0.1); }
.dark .jm-filter-clear:hover { background: rgba(var(--primary-400), 0.2); }

.ss-label {
    overflow: hidden;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgb(var(--gray-600));
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ss-note {
    font-weight: 400;
    color: rgb(var(--gray-400));
}

.ss-value {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.5rem;
}

.ss-primary { color: rgb(var(--primary-600)); }
.ss-warning { color: rgb(var(--warning-600)); }
.ss-danger { color: rgb(var(--danger-600)); }
.ss-success { color: rgb(var(--success-600)); }
.ss-gray { color: rgb(var(--gray-400)); }

/* HP & tablet: label di atas (boleh 2 baris, tidak dipotong), angka di bawah; tablet 3 kolom */
@media (max-width: 1023px) {
    .ss-strip {
        gap: 0.375rem;
    }

    .ss-item {
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.125rem;
        padding: 0.5rem 0.75rem;
    }

    .ss-label {
        font-size: 0.75rem;
        line-height: 1rem;
        white-space: normal;
    }

    .ss-note {
        display: block;
        font-size: 0.6875rem;
    }

    .ss-value {
        font-size: 1.25rem;
        line-height: 1.5rem;
    }
}

@media (max-width: 639px) {
    /* Kotak terakhir yang sendirian di baris (5 kotak, 2 kolom) dibuat selebar penuh */
    .ss-item:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .ss-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.dark .ss-item { background: rgb(var(--gray-900)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); }
.dark .ss-label { color: rgb(var(--gray-400)); }
.dark .ss-note { color: rgb(var(--gray-500)); }
.dark .ss-primary { color: rgb(var(--primary-400)); }
.dark .ss-warning { color: rgb(var(--warning-400)); }
.dark .ss-danger { color: rgb(var(--danger-400)); }
.dark .ss-success { color: rgb(var(--success-400)); }
.dark .ss-gray { color: rgb(var(--gray-500)); }

/* ===== Dashboard: tabel bergulir (resources/views/components/marquee-table.blade.php) ===== */
.mq-section .fi-section-content {
    padding: 0;
}

.mq-section .fi-section-header {
    padding: 0.75rem 1rem 0.75rem 1.25rem;
}

.mq-section .fi-section-header-heading {
    font-size: 1rem;
}

.mq-section .fi-section-header-description {
    font-size: 0.8125rem;
}

/* Chip (badge) selebar teksnya, tidak melebar memenuhi kolom */
.mq-row .fi-badge {
    width: fit-content;
    font-size: 0.8125rem;
}

.mq-head {
    height: 2rem;
    font-size: 0.75rem;
    white-space: nowrap;
    font-weight: 600;
    color: rgb(var(--gray-500));
    background: rgb(var(--gray-50));
    border-bottom: 1px solid rgb(var(--gray-200));
}

.mq-viewport {
    position: relative;
    overflow: hidden;
    touch-action: none;
    cursor: grab;
    user-select: none;
}

.mq-viewport.mq-dragging {
    cursor: grabbing;
}

.mq-run {
    will-change: transform;
}

/* Semua baris muat: tampil diam, tinggi mengikuti isi, salinan & "Akhir daftar" disembunyikan */
.mq-viewport.mq-static {
    height: auto !important;
    cursor: default;
    /* Tidak bergulir otomatis: sentuhan jari menggulir halaman seperti biasa (penting di HP) */
    touch-action: auto;
}

/* HP & tablet: kotak bergulir setinggi ±setengah layar (bukan tinggi laptop), supaya ringkasan & halaman tetap
   terjangkau; kalau semua kartu muat, tampil diam dengan tinggi mengikuti isi */
@media (max-width: 1023px) {
    .mq-viewport {
        height: max(18rem, 55vh) !important;
        max-height: max(18rem, 55vh) !important;
    }
}

.mq-run.mq-static .mq-row:not([data-mq-copy="1"]),
.mq-run.mq-static .mq-sep,
.mq-viewport.mq-static .mq-bar {
    display: none;
}

.mq-row {
    min-height: 2.5rem;
    padding-top: 0.3125rem;
    padding-bottom: 0.3125rem;
    font-size: 0.8125rem;
    line-height: 1.125rem;
    border-bottom: 1px solid rgb(var(--gray-100));
}

.mq-sep {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    height: 1.875rem;
    font-size: 0.75rem;
    color: rgb(var(--gray-500));
    background: rgb(var(--gray-50));
    border-bottom: 1px solid rgb(var(--gray-200));
}

.mq-sep::before,
.mq-sep::after {
    content: "";
    width: 2.5rem;
    height: 1px;
    background: rgb(var(--gray-300));
}

/* Kilatan garis saat scroll manual mentok di awal / akhir daftar */
.mq-edge {
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background: rgb(var(--primary-500));
    opacity: 0;
    transition: opacity 0.25s;
    pointer-events: none;
}

.mq-edge-top { top: 0; }
.mq-edge-bottom { bottom: 0; }
.mq-edge.mq-edge-on { opacity: 0.9; }

/* Indikator posisi (pengganti scrollbar) */
.mq-bar {
    position: absolute;
    top: 4px;
    bottom: 4px;
    right: 4px;
    width: 4px;
    border-radius: 2px;
    background: rgb(var(--gray-100));
    pointer-events: none;
}

.mq-thumb {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border-radius: 2px;
    background: rgb(var(--gray-400));
}

.mq-footer {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    min-height: 2.25rem;
    padding: 0.5rem 1.25rem;
    font-size: 0.8125rem;
    color: rgb(var(--gray-500));
    border-top: 1px solid rgb(var(--gray-200));
}

.mq-empty {
    padding: 3rem 1.25rem;
    text-align: center;
    font-size: 0.875rem;
    color: rgb(var(--gray-500));
}

.mq-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    height: 2rem;
    padding: 0 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 0.5rem;
    color: rgb(var(--gray-700));
    box-shadow: inset 0 0 0 1px rgba(var(--gray-950), 0.1);
}

.mq-btn:hover {
    background: rgb(var(--gray-50));
}

/* Kolom tiap tabel (padding kanan memberi ruang untuk indikator posisi) */
.jm-grid {
    display: grid;
    grid-template-columns: 64px 44px minmax(0, 1.2fr) 128px 112px minmax(0, 1.5fr) minmax(0, 1.8fr) 104px;
    gap: 0.75rem;
    align-items: center;
    padding-left: 1rem;
    padding-right: 1.25rem;
}

/* HP & tablet: tiap pekerjaan jadi kartu (judul kolom disembunyikan)
   Baris 1: tanggal · perusahaan · jenis · expired | Baris 2: WNA / PT · PIC | Baris 3: progress · invoice */
@media (max-width: 1023px) {
    .mq-head.jm-grid {
        display: none;
    }

    /* 12 kolom tetap: nama panjang tidak mendorong kolom lain (progress & invoice sama lebar) */
    .mq-row.jm-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-template-areas:
            "tgl tgl co co jenis jenis jenis jenis jenis exp exp exp"
            "wna wna wna wna wna wna wna wna pic pic pic pic"
            "prog prog prog prog prog prog inv inv inv inv inv inv";
        column-gap: 0.5rem;
        row-gap: 0.375rem;
        align-items: start;
        min-height: 0;
        padding: 0.625rem 0.875rem;
        font-size: 0.8125rem;
        line-height: 1.25rem;
    }

    .mq-row.jm-grid > :nth-child(1) { grid-area: tgl; }
    .mq-row.jm-grid > :nth-child(2) { grid-area: co; }
    .mq-row.jm-grid > :nth-child(3) { grid-area: wna; }
    .mq-row.jm-grid > :nth-child(4) { grid-area: jenis; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgb(var(--gray-950)); }
    .dark .mq-row.jm-grid > :nth-child(4) { color: rgb(255 255 255); }
    .mq-row.jm-grid > :nth-child(5) { grid-area: pic; justify-self: end; }
    .mq-row.jm-grid > :nth-child(6) { grid-area: prog; }
    .mq-row.jm-grid > :nth-child(7) { grid-area: inv; }
    .mq-row.jm-grid > :nth-child(8) { grid-area: exp; justify-self: end; }

    /* Expired: cukup badge sisa hari */
    .mq-row.jm-grid > :nth-child(8) .jm-muted { display: none; }

    /* Nama WNA & PT satu baris, dipotong "..." kalau terlalu panjang */
    .mq-row.jm-grid > :nth-child(3) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mq-row.jm-grid > :nth-child(3) > div { display: inline; }
    .mq-row.jm-grid > :nth-child(3) > .jm-muted::before { content: " · "; }

    .jm-urgent .jm-note { font-size: 0.75rem; }
}

/* Isi sel */
.jm-strong {
    font-weight: 500;
    color: rgb(var(--gray-950));
}

.jm-muted {
    font-size: 0.75rem;
    color: rgb(var(--gray-500));
}

.jm-pic {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    max-width: 100%;
    padding: 0.125rem 0.5rem 0.125rem 0.1875rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 0.375rem;
    color: rgb(var(--gray-700));
    background: rgb(var(--gray-50));
    box-shadow: inset 0 0 0 1px rgba(var(--gray-600), 0.1);
}

.jm-pic-avatar {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    font-size: 0.625rem;
    font-weight: 600;
    border-radius: 9999px;
    color: rgb(var(--primary-700));
    background: rgb(var(--primary-100));
}

/* Warna urgensi: garis kiri + keterangan kecil */
.jm-urgent {
    min-width: 0;
    padding-left: 0.5rem;
    border-left: 2px solid var(--jm-c);
}

.jm-urgent .jm-note {
    font-size: 0.6875rem;
    color: var(--jm-c);
}

.jm-danger { --jm-c: rgb(var(--danger-600)); }
.jm-warning { --jm-c: rgb(var(--warning-600)); }
.jm-primary { --jm-c: rgb(var(--primary-600)); }
.jm-success { --jm-c: rgb(var(--success-600)); }
.jm-gray { --jm-c: rgb(var(--gray-300)); }

.jm-gray .jm-strong,
.jm-gray .jm-note {
    color: rgb(var(--gray-400));
}

.jm-live {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: rgb(var(--success-600));
}

.jm-live-dot {
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 9999px;
    background: currentColor;
    animation: jm-pulse 1.4s ease-in-out infinite;
}

@keyframes jm-pulse {
    50% { opacity: 0.25; }
}

.dark .mq-head { background: rgb(255 255 255 / 0.05); border-color: rgb(255 255 255 / 0.1); color: rgb(var(--gray-400)); }
.dark .mq-row { border-color: rgb(255 255 255 / 0.05); }
.dark .mq-sep { background: rgb(255 255 255 / 0.05); border-color: rgb(255 255 255 / 0.1); color: rgb(var(--gray-400)); }
.dark .mq-sep::before,
.dark .mq-sep::after { background: rgb(255 255 255 / 0.2); }
.dark .mq-bar { background: rgb(255 255 255 / 0.05); }
.dark .mq-thumb { background: rgb(var(--gray-500)); }
.dark .mq-footer { color: rgb(var(--gray-400)); border-color: rgb(255 255 255 / 0.1); }
.dark .mq-empty { color: rgb(var(--gray-400)); }
.dark .mq-btn { color: rgb(var(--gray-200)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2); }
.dark .mq-btn:hover { background: rgb(255 255 255 / 0.05); }
.dark .jm-strong { color: rgb(255 255 255); }
.dark .jm-muted { color: rgb(var(--gray-400)); }
.dark .jm-pic { color: rgb(var(--gray-200)); background: rgb(255 255 255 / 0.05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); }
.dark .jm-pic-avatar { color: rgb(var(--primary-300)); background: rgba(var(--primary-400), 0.15); }
.dark .jm-live { color: rgb(var(--success-400)); }
.dark .jm-danger { --jm-c: rgb(var(--danger-400)); }
.dark .jm-warning { --jm-c: rgb(var(--warning-400)); }
.dark .jm-primary { --jm-c: rgb(var(--primary-400)); }
.dark .jm-success { --jm-c: rgb(var(--success-400)); }
.dark .jm-gray { --jm-c: rgb(var(--gray-600)); }
.dark .jm-gray .jm-strong,
.dark .jm-gray .jm-note { color: rgb(var(--gray-500)); }
/* Invoice > Sudah Dibayar > Jumlah: status "melebihi sisa" dihitung Alpine di setiap ketikan
   (lihat InvoiceResource::pembayaranAlpine). Selama melebihi, pesan error server disembunyikan karena
   pesan yang sama sudah tampil dari Alpine di helper text; error lain (mis. belum diisi) tetap tampil. */
.bayar-lebih .fi-fo-field-wrp-error-message {
    display: none;
}

.bayar-lebih .fi-input-wrp,
.bayar-lebih .fi-input-wrp:focus-within {
    --tw-ring-color: rgb(var(--danger-600)) !important;
}

/* Sudah dikoreksi tapi error server lama masih menempel: kembalikan warna normal */
.bayar-ok .fi-input-wrp.fi-invalid {
    --tw-ring-color: rgba(var(--gray-950), 0.1) !important;
}

.bayar-ok .fi-input-wrp.fi-invalid:focus-within {
    --tw-ring-color: rgb(var(--primary-600)) !important;
}

.dark .bayar-lebih .fi-input-wrp,
.dark .bayar-lebih .fi-input-wrp:focus-within {
    --tw-ring-color: rgb(var(--danger-500)) !important;
}

.dark .bayar-ok .fi-input-wrp.fi-invalid {
    --tw-ring-color: rgb(255 255 255 / 0.2) !important;
}

.dark .bayar-ok .fi-input-wrp.fi-invalid:focus-within {
    --tw-ring-color: rgb(var(--primary-500)) !important;
}


/* ------------------------------------------------------------------ Menu Laporan (filament/pages/laporan) */
/* minmax(0, 1fr): tabel lebar cukup digeser di dalam kotaknya, halaman tidak ikut melebar */
.rp-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
.rp-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid rgb(var(--gray-200)); }
.rp-tab { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 0.875rem; font-size: 0.8125rem; font-weight: 500; color: rgb(var(--gray-500)); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.rp-tab:hover { color: rgb(var(--gray-800)); }
.rp-tab.rp-tab-on { color: rgb(var(--primary-600)); border-bottom-color: rgb(var(--primary-600)); font-weight: 600; }
.rp-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.625rem 0.875rem; }
.rp-field { display: grid; gap: 0.25rem; font-size: 0.6875rem; font-weight: 500; color: rgb(var(--gray-500)); }
.rp-field .cs-switch { margin-bottom: 0; }
.rp-page .rp-input { height: 2rem; padding: 0 0.5rem; font-size: 0.8125rem; border-radius: 0.5rem; border: 1px solid rgb(var(--gray-300)); background: #fff; color: rgb(var(--gray-900)); }
.rp-page select.rp-input { padding-right: 2rem; }
.rp-page .rp-input:disabled { background: rgb(var(--gray-50)); color: rgb(var(--gray-500)); }
.rp-export { margin-left: auto; }
.rp-loading { opacity: 0.55; transition: opacity 0.15s; }
.rp-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.625rem; margin-bottom: 0.75rem; }
.rp-card { display: block; background: #fff; border: 1px solid rgb(var(--gray-200)); border-radius: 0.625rem; padding: 0.625rem 0.875rem; }
.rp-card-link:hover { border-color: rgb(var(--primary-300)); }
.rp-page p { margin: 0; }
.rp-k { font-size: 0.6875rem; color: rgb(var(--gray-500)); }
.rp-v { font-size: 1.125rem; font-weight: 600; color: rgb(var(--gray-950)); line-height: 1.6rem; white-space: nowrap; }
.rp-s { font-size: 0.6875rem; color: rgb(var(--gray-400)); }
.rp-warn { color: rgb(var(--warning-600)); }
.rp-ok { color: rgb(var(--success-600)); }
.rp-bad { color: rgb(var(--danger-600)); font-weight: 600; }
.rp-muted { color: rgb(var(--gray-400)); font-weight: 400; }
.rp-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.625rem; margin-bottom: 0.75rem; }
.rp-box { background: #fff; border: 1px solid rgb(var(--gray-200)); border-radius: 0.75rem; padding: 0.75rem 0.875rem; margin-bottom: 0.75rem; }
.rp-two .rp-box { margin-bottom: 0; }
.rp-t { font-size: 0.8125rem; font-weight: 600; color: rgb(var(--gray-900)); margin-bottom: 0.5rem !important; }
.rp-stack { display: flex; height: 0.875rem; border-radius: 0.25rem; overflow: hidden; background: rgb(var(--gray-100)); margin-bottom: 0.5rem; }
.rp-seg { height: 100%; }
.rp-leg { display: flex; flex-wrap: wrap; gap: 0.25rem 0.875rem; font-size: 0.75rem; color: rgb(var(--gray-600)); }
.rp-leg b { color: rgb(var(--gray-900)); font-weight: 600; }
.rp-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 0.125rem; margin-right: 0.3rem; }
.rp-order-pending, .rp-inv-draft, .rp-bayar-unpaid { background: rgb(var(--gray-400)); }
.rp-order-accepted { background: rgb(var(--info-300)); }
.rp-order-process { background: rgb(var(--primary-500)); }
.rp-order-done, .rp-inv-approved, .rp-bayar-paid { background: rgb(var(--success-500)); }
.rp-inv-pending, .rp-bayar-dp { background: rgb(var(--warning-400)); }
.rp-inv-rejected { background: rgb(var(--danger-500)); }
.rp-umur { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.rp-umur-v { font-size: 0.875rem; font-weight: 600; color: rgb(var(--gray-900)); white-space: nowrap; }
.rp-scroll { overflow-x: auto; }
.rp-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
.rp-table th { text-align: left; font-size: 0.6875rem; font-weight: 600; color: rgb(var(--gray-500)); padding: 0.375rem 0.5rem; border-bottom: 1px solid rgb(var(--gray-200)); white-space: nowrap; background: rgb(var(--gray-50)); }
.rp-table td { padding: 0.375rem 0.5rem; border-bottom: 1px solid rgb(var(--gray-100)); white-space: nowrap; color: rgb(var(--gray-800)); }
.rp-table tbody tr:hover td { background: rgb(var(--gray-50)); }
.rp-table .rp-r { text-align: right; }
.rp-table .rp-wrap { white-space: normal; min-width: 8rem; }
.rp-table .rp-empty { text-align: center; color: rgb(var(--gray-400)); padding: 1rem; }
.rp-more { margin-top: 0.5rem; font-size: 0.75rem; font-weight: 600; color: rgb(var(--primary-600)); }
.rp-more:hover { text-decoration: underline; }

.dark .rp-tabs { border-color: rgb(255 255 255 / 0.1); }
.dark .rp-tab { color: rgb(var(--gray-400)); }
.dark .rp-tab.rp-tab-on { color: rgb(var(--primary-400)); border-bottom-color: rgb(var(--primary-400)); }
.dark .rp-page .rp-input { background: rgb(var(--gray-900)); border-color: rgb(255 255 255 / 0.15); color: #fff; color-scheme: dark; }
.dark .rp-page .rp-input:disabled { background: rgb(255 255 255 / 0.03); color: rgb(var(--gray-400)); }
.dark .rp-card, .dark .rp-box { background: rgb(var(--gray-900)); border-color: rgb(255 255 255 / 0.1); }
.dark .rp-v, .dark .rp-t, .dark .rp-umur-v, .dark .rp-leg b { color: #fff; }
.dark .rp-leg { color: rgb(var(--gray-300)); }
.dark .rp-stack { background: rgb(255 255 255 / 0.08); }
.dark .rp-table th { background: rgb(255 255 255 / 0.03); border-color: rgb(255 255 255 / 0.1); color: rgb(var(--gray-400)); }
.dark .rp-table td { border-color: rgb(255 255 255 / 0.06); color: rgb(var(--gray-200)); }
.dark .rp-table tbody tr:hover td { background: rgb(255 255 255 / 0.03); }

@media (max-width: 1024px) {
    .rp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rp-two { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .rp-umur { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rp-export { margin-left: 0; }
    .rp-v { font-size: 1rem; }
}


/* Monitor Pekerjaan: jenis pengurusan panjang dilipat maks. 2 baris (setinggi WNA + PT), sisanya "…" */
.jm-jenis {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

/* Tampilan HP/tablet: jenis tetap satu baris dengan "…" (aturan kolom jenis di atas) */
@media (max-width: 1023px) {
    .mq-row.jm-grid .jm-jenis { display: inline; }
}


/* Monitor Pekerjaan: kolom cari di header (nama PT, WNA, PIC) */
.jm-search-wrap { display: inline-flex; align-items: center; gap: 0.5rem; }
.jm-search { position: relative; display: inline-flex; align-items: center; width: 15rem; height: 2rem; padding: 0 0.5rem; gap: 0.375rem; border-radius: 0.5rem; background: #fff; box-shadow: inset 0 0 0 1px rgb(var(--gray-300)); cursor: text; }
.jm-search:focus-within { box-shadow: inset 0 0 0 1.5px rgb(var(--primary-600)), 0 0 0 3px rgba(var(--primary-500), 0.15); }
.jm-search .jm-search-icon { color: rgb(var(--gray-400)); flex-shrink: 0; }
.jm-search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; font-size: 0.8125rem; color: rgb(var(--gray-950)); box-shadow: none; outline: none; }
.jm-search input:focus { box-shadow: none; outline: none; }
.jm-search input::-webkit-search-cancel-button { display: none; }
.jm-search input::placeholder { color: rgb(var(--gray-400)); }
.jm-search-clear { display: inline-flex; color: rgb(var(--gray-400)); }
.jm-search-clear:hover { color: rgb(var(--gray-700)); }
.jm-search-count { font-size: 0.75rem; color: rgb(var(--gray-500)); white-space: nowrap; }
.jm-mark { background: rgb(254 240 138); color: inherit; border-radius: 2px; padding: 0 1px; }
.dark .jm-search { background: rgb(var(--gray-900)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.15); }
.dark .jm-search input { color: #fff; }
.dark .jm-mark { background: rgba(250, 204, 21, 0.35); }

/* HP: kolom cari turun ke baris sendiri, selebar kartu */
@media (max-width: 639px) {
    .mq-section .fi-section-header { flex-wrap: wrap; }
    .mq-section .fi-section-header > :last-child { width: 100%; }
    .mq-section .fi-section-header > :last-child > div { flex-wrap: wrap; }
    .jm-search-wrap { width: 100%; }
    .jm-search { flex: 1; width: auto; }
}


/* HP & tablet: tombol tutup menu (panah kiri) di header sidebar juga tampil; bawaan Filament hanya di laptop.
   Saat menu tertutup tombol tetap tersembunyi (x-show memberi display:none inline). */
@media (max-width: 1023px) {
    .fi-sidebar .fi-sidebar-header > .fi-icon-btn.ms-auto { display: flex; }
}


/* PIC per tahapan: detail tahapan order (filament/partials/tahapan-order) */
.tp-box { display: grid; gap: 0; font-size: 0.8125rem; }
.tp-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; padding-bottom: 0.625rem; font-weight: 600; color: rgb(var(--gray-950)); }
.tp-head > span:first-child { margin-right: auto; }
.tp-muted { font-size: 0.75rem; font-weight: 400; color: rgb(var(--gray-400)); }
.tp-step { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; gap: 0.625rem; align-items: start; padding: 0.625rem 0; border-top: 1px solid rgb(var(--gray-100)); }
.tp-dot { width: 1.375rem; height: 1.375rem; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.6875rem; font-weight: 600; background: rgb(var(--gray-100)); color: rgb(var(--gray-400)); }
.tp-done .tp-dot { background: rgb(var(--success-100)); color: rgb(var(--success-700)); }
.tp-now .tp-dot { background: rgb(var(--primary-100)); color: rgb(var(--primary-700)); box-shadow: 0 0 0 2px rgb(var(--primary-300)); }
.tp-name { font-weight: 500; color: rgb(var(--gray-950)); }
.tp-step:not(.tp-done):not(.tp-now) .tp-name { color: rgb(var(--gray-400)); }
.tp-info { font-size: 0.75rem; color: rgb(var(--gray-500)); }
.tp-now .tp-info { color: rgb(var(--primary-600)); }
.tp-foot { padding-top: 0.625rem; border-top: 1px solid rgb(var(--gray-100)); font-size: 0.75rem; color: rgb(var(--gray-500)); text-align: right; }
.dark .tp-head, .dark .tp-name { color: #fff; }
.dark .tp-step, .dark .tp-foot { border-color: rgb(255 255 255 / 0.08); }
.dark .tp-dot { background: rgb(255 255 255 / 0.08); }
.dark .tp-done .tp-dot { background: rgba(var(--success-500), 0.2); color: rgb(var(--success-300)); }
.dark .tp-now .tp-dot { background: rgba(var(--primary-500), 0.2); color: rgb(var(--primary-300)); }

/* Monitor Pekerjaan: PIC utama kecil di bawah PIC tahap yang sedang berjalan */
.jm-pic-utama { margin-top: 0.125rem; font-size: 0.6875rem; line-height: 0.875rem; color: rgb(var(--gray-400)); }
@media (max-width: 1023px) {
    .jm-pic-utama { text-align: right; }
}

/* Template Tahapan: satu baris per tahap, kolom Tahapan & Isian data sejajar (tinggi baris sama, tidak membungkus) */
.tpl-baris { display: flex; flex-direction: column; font-size: 0.8125rem; }
.tpl-baris > div { height: 1.75rem; line-height: 1.75rem; white-space: nowrap; }
.tpl-baris > div + div { border-top: 1px dashed rgb(var(--gray-200)); }
.tpl-no { display: inline-block; min-width: 1.25rem; color: rgb(var(--gray-400)); }
.tpl-isian { color: rgb(var(--primary-600)); }
.tpl-kosong { color: rgb(var(--gray-300)); }
.dark .tpl-baris > div + div { border-color: rgb(255 255 255 / 0.08); }
.dark .tpl-isian { color: rgb(var(--primary-400)); }
.dark .tpl-kosong { color: rgb(var(--gray-600)); }
/* Form Jenis Pengurusan (PermitTypeResource, .jp-form): saklar sejajar dengan select berlabel di barisnya */
@media (min-width: 768px) {
    .jp-form .jp-toggle { padding-top: 1.625rem; }
}
.jp-form .fi-fo-checkbox-list { row-gap: 0.25rem; }

/* Pratinjau tahapan template: kotak abu-abu, satu baris per tahap (no · nama tahap · isian data) */
.tpl-pratinjau { border-radius: 0.5rem; background: rgb(var(--gray-50)); padding: 0.25rem 0.75rem; font-size: 0.8125rem; }
.tpl-pratinjau-baris { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) minmax(0, 1.3fr); gap: 0.5rem; padding: 0.25rem 0; }
.tpl-pratinjau-baris + .tpl-pratinjau-baris { border-top: 1px dashed rgb(var(--gray-200)); }
.dark .tpl-pratinjau { background: rgb(255 255 255 / 0.04); }
.dark .tpl-pratinjau-baris + .tpl-pratinjau-baris { border-color: rgb(255 255 255 / 0.08); }
/* ===== Panel sedikit terangkat (DESIGN.md: Elevation & Depth, "One-Lift Rule") =====
   Hanya panel paling luar di halaman: section, kotak tabel, kartu statistik, kotak laporan, kotak ringkasan.
   Garis tepi (ring) bawaan Filament ikut ditulis di sini karena ring juga memakai box-shadow.
   Panel di dalam panel lain atau di dalam modal tetap datar. Mode gelap: cukup garis, tanpa bayangan. */
.fi-main .fi-section:not(.fi-aside),
.fi-main .fi-ta-ctn,
.fi-main .fi-wi-stats-overview-stat {
    box-shadow: 0 1px 3px 0 rgb(15 23 42 / 0.08), 0 1px 2px -1px rgb(15 23 42 / 0.06), inset 0 0 0 1px rgba(var(--gray-950), 0.05);
}

.fi-main .fi-section .fi-section:not(.fi-aside),
.fi-main .fi-section .fi-ta-ctn,
.fi-main .fi-modal .fi-section:not(.fi-aside),
.fi-main .fi-modal .fi-ta-ctn {
    box-shadow: inset 0 0 0 1px rgba(var(--gray-950), 0.05);
}

.rp-card,
.rp-box {
    box-shadow: 0 1px 3px 0 rgb(15 23 42 / 0.08), 0 1px 2px -1px rgb(15 23 42 / 0.06);
}

.ss-item {
    box-shadow: 0 1px 3px 0 rgb(15 23 42 / 0.08), 0 1px 2px -1px rgb(15 23 42 / 0.06), inset 0 0 0 1px rgba(var(--gray-950), 0.05);
}

.ss-item:hover {
    box-shadow: 0 1px 3px 0 rgb(15 23 42 / 0.08), 0 1px 2px -1px rgb(15 23 42 / 0.06), inset 0 0 0 1px rgba(var(--gray-950), 0.2);
}

.ss-item.ss-active {
    box-shadow: inset 0 0 0 1.5px rgb(var(--primary-500));
}

.dark .fi-main .fi-section:not(.fi-aside),
.dark .fi-main .fi-ta-ctn,
.dark .fi-main .fi-wi-stats-overview-stat,
.dark .ss-item {
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
}

.dark .rp-card,
.dark .rp-box {
    box-shadow: none;
}

.dark .ss-item.ss-active {
    box-shadow: inset 0 0 0 1.5px rgb(var(--primary-400));
}

/* Buat Order: peringatan order double (OrderResource::htmlOrderMirip). Warna status mengikuti badge (--om-c / --om-b). */
.order-mirip {
    padding: 0.625rem 0.75rem;
    border-radius: 0.625rem;
    background: rgb(var(--warning-50));
    box-shadow: inset 0 0 0 1px rgb(var(--warning-300));
}

.order-mirip > .fi-fo-component-ctn { gap: 0.5rem; }
.order-mirip-judul { font-size: 0.8125rem; font-weight: 600; color: rgb(var(--warning-800)); }
.order-mirip-ket { margin: 0.125rem 0 0.5rem; font-size: 0.75rem; color: rgb(var(--warning-800)); }
.order-mirip-tabel { overflow-x: auto; border-radius: 0.375rem; background: #fff; box-shadow: inset 0 0 0 1px rgb(var(--warning-200)); }
.order-mirip-tabel table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
.order-mirip-tabel th { padding: 0.3125rem 0.5rem; text-align: left; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgb(var(--gray-500)); border-bottom: 1px solid rgb(var(--gray-200)); white-space: nowrap; }
.order-mirip-tabel td { padding: 0.3125rem 0.5rem; border-bottom: 1px solid rgb(var(--gray-100)); color: rgb(var(--gray-800)); }
.order-mirip-tabel tr:last-child td { border-bottom: 0; }
.order-mirip-tabel a { font-weight: 500; color: rgb(var(--primary-600)); }
.order-mirip-tabel a:hover { text-decoration: underline; }
.order-mirip-status { display: inline-block; padding: 0 0.4375rem; border-radius: 0.375rem; font-size: 0.6875rem; font-weight: 500; color: rgb(var(--om-c)); background: rgba(var(--om-b), 0.1); }
.order-mirip .fi-fo-field-wrp-label span { font-size: 0.75rem; color: rgb(var(--gray-800)); }

.dark .order-mirip { background: rgba(var(--warning-400), 0.08); box-shadow: inset 0 0 0 1px rgba(var(--warning-400), 0.3); }
.dark .order-mirip-judul, .dark .order-mirip-ket { color: rgb(var(--warning-300)); }
.dark .order-mirip-tabel { background: rgb(var(--gray-900)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); }
.dark .order-mirip-tabel th { color: rgb(var(--gray-400)); border-color: rgb(255 255 255 / 0.1); }
.dark .order-mirip-tabel td { color: rgb(var(--gray-200)); border-color: rgb(255 255 255 / 0.06); }
.dark .order-mirip-tabel a { color: rgb(var(--primary-400)); }
.dark .order-mirip .fi-fo-field-wrp-label span { color: rgb(var(--gray-200)); }

/* ------------------------------------------------------------------ User Aktif (filament/pages/user-aktif) */
.ua-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
.ua-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.ua-tile { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.375rem 0.75rem; border-radius: 0.5rem; background: #fff; box-shadow: 0 1px 3px 0 rgb(15 23 42 / 0.08), 0 1px 2px -1px rgb(15 23 42 / 0.06), inset 0 0 0 1px rgba(var(--gray-950), 0.05); }
.ua-tile-l { font-size: 0.75rem; font-weight: 500; color: rgb(var(--gray-600)); }
.ua-tile-v { font-size: 1.125rem; font-weight: 700; line-height: 1.5rem; }
.ua-hijau { color: rgb(var(--success-600)); }
.ua-kuning { color: rgb(var(--warning-600)); }
.ua-biru { color: rgb(var(--primary-600)); }
.ua-box { overflow: hidden; border-radius: 0.75rem; background: #fff; box-shadow: 0 1px 3px 0 rgb(15 23 42 / 0.08), 0 1px 2px -1px rgb(15 23 42 / 0.06), inset 0 0 0 1px rgba(var(--gray-950), 0.05); }
.ua-scroll { overflow-x: auto; }
.ua-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.ua-table th { padding: 0.5rem 0.75rem; text-align: left; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgb(var(--gray-500)); background: rgb(var(--gray-50)); border-bottom: 1px solid rgb(var(--gray-200)); white-space: nowrap; }
.ua-table td { padding: 0.375rem 0.75rem; border-bottom: 1px solid rgb(var(--gray-100)); color: rgb(var(--gray-800)); white-space: nowrap; vertical-align: middle; }
.ua-table tbody tr:last-child td { border-bottom: 0; }
.ua-user { display: flex; align-items: center; gap: 0.5rem; }
.ua-av { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 600; color: rgb(var(--primary-700)); background: rgb(var(--primary-100)); }
.ua-nama { font-weight: 500; color: rgb(var(--gray-950)); }
.ua-saya { margin-left: 0.25rem; padding: 0 0.3125rem; border-radius: 0.3125rem; font-size: 0.625rem; font-weight: 600; color: rgb(var(--primary-700)); background: rgb(var(--primary-50)); }
.ua-muted { font-size: 0.6875rem; color: rgb(var(--gray-500)); }
.ua-perangkat { display: inline-flex; align-items: center; gap: 0.3125rem; }
.ua-ikon { width: 1rem; height: 1rem; color: rgb(var(--gray-400)); }
.ua-dot { display: inline-block; width: 0.4375rem; height: 0.4375rem; margin-right: 0.375rem; border-radius: 9999px; vertical-align: 0.0625rem; background: rgb(var(--warning-500)); }
.ua-dot-aktif { background: rgb(var(--success-500)); }
.ua-kosong { padding: 2rem 0.75rem !important; text-align: center; color: rgb(var(--gray-500)) !important; }

.dark .ua-tile, .dark .ua-box { background: rgb(var(--gray-900)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); }
.dark .ua-tile-l { color: rgb(var(--gray-400)); }
.dark .ua-hijau { color: rgb(var(--success-400)); }
.dark .ua-kuning { color: rgb(var(--warning-400)); }
.dark .ua-biru { color: rgb(var(--primary-400)); }
.dark .ua-table th { color: rgb(var(--gray-400)); background: rgb(255 255 255 / 0.03); border-color: rgb(255 255 255 / 0.1); }
.dark .ua-table td { color: rgb(var(--gray-200)); border-color: rgb(255 255 255 / 0.06); }
.dark .ua-nama { color: #fff; }
.dark .ua-av { color: rgb(var(--primary-300)); background: rgba(var(--primary-400), 0.15); }
.dark .ua-saya { color: rgb(var(--primary-300)); background: rgba(var(--primary-400), 0.15); }
.dark .ua-muted { color: rgb(var(--gray-400)); }

@media (max-width: 639px) {
    .ua-strip { grid-template-columns: minmax(0, 1fr); }
}

/* User Aktif: tombol Keluarkan (BatasPerangkat::keluarkan) */
.ua-keluarkan { padding: 0.125rem 0.5rem; border-radius: 0.375rem; font-size: 0.6875rem; font-weight: 500; color: rgb(var(--danger-700)); box-shadow: inset 0 0 0 1px rgb(var(--danger-200)); }
.ua-keluarkan:hover { background: rgb(var(--danger-50)); }
.ua-keluarkan:focus-visible { outline: 2px solid rgb(var(--danger-500)); outline-offset: 2px; }
.ua-keluarkan[disabled] { opacity: 0.5; cursor: wait; }
.dark .ua-keluarkan { color: rgb(var(--danger-400)); box-shadow: inset 0 0 0 1px rgba(var(--danger-400), 0.3); }
.dark .ua-keluarkan:hover { background: rgba(var(--danger-400), 0.1); }

/* Pengaturan Sistem > Backup (PengaturanSistem::htmlStatusBackup) */
.bk-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.bk-tile { padding: 0.4375rem 0.625rem; border-radius: 0.5rem; box-shadow: inset 0 0 0 1px rgb(var(--gray-200)); }
.bk-k { font-size: 0.6875rem; color: rgb(var(--gray-500)); }
.bk-v { margin-top: 0.0625rem; font-size: 0.8125rem; font-weight: 600; color: rgb(var(--gray-950)); }
.bk-ok { color: rgb(var(--success-600)); }
.bk-bad { color: rgb(var(--danger-600)); }
.bk-muted { color: rgb(var(--gray-400)); font-weight: 500; }
.bk-alert { margin-top: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 0.5rem; font-size: 0.8125rem; }
.bk-alert-ok { color: rgb(var(--success-800)); background: rgb(var(--success-50)); box-shadow: inset 0 0 0 1px rgb(var(--success-200)); }
.bk-alert-bad { font-weight: 500; color: rgb(var(--danger-800)); background: rgb(var(--danger-50)); box-shadow: inset 0 0 0 1px rgb(var(--danger-200)); }
.bk-alert-detail { margin-top: 0.125rem; font-size: 0.75rem; font-weight: 400; overflow-wrap: anywhere; }
.bk-uri { display: inline-block; padding: 0.25rem 0.5rem; border-radius: 0.375rem; font-size: 0.75rem; color: rgb(var(--gray-700)); background: rgb(var(--gray-100)); overflow-wrap: anywhere; user-select: all; }
.dark .bk-tile { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); }
.dark .bk-v { color: #fff; }
.dark .bk-ok { color: rgb(var(--success-400)); }
.dark .bk-bad { color: rgb(var(--danger-400)); }
.dark .bk-alert-ok { color: rgb(var(--success-300)); background: rgba(var(--success-400), 0.08); box-shadow: inset 0 0 0 1px rgba(var(--success-400), 0.3); }
.dark .bk-alert-bad { color: rgb(var(--danger-300)); background: rgba(var(--danger-400), 0.08); box-shadow: inset 0 0 0 1px rgba(var(--danger-400), 0.3); }
.dark .bk-uri { color: rgb(var(--gray-200)); background: rgb(255 255 255 / 0.06); }

@media (max-width: 639px) {
    .bk-strip { grid-template-columns: minmax(0, 1fr); }
}

/* Halaman login: pesan perangkat dikeluarkan (filament.dikeluarkan) */
.login-dikeluarkan { display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.625rem 0.75rem; border-radius: 0.5rem; font-size: 0.8125rem; line-height: 1.25rem; color: rgb(var(--warning-800)); background: rgb(var(--warning-50)); box-shadow: inset 0 0 0 1px rgb(var(--warning-300)); }
.login-dikeluarkan-ikon { flex-shrink: 0; width: 1.125rem; height: 1.125rem; margin-top: 0.0625rem; }
.dark .login-dikeluarkan { color: rgb(var(--warning-300)); background: rgba(var(--warning-400), 0.08); box-shadow: inset 0 0 0 1px rgba(var(--warning-400), 0.3); }