/* ==========================================================================
   CoalTrack — lapisan visual panel admin
   --------------------------------------------------------------------------
   Emas di atas obsidian. Paletnya diambil dari logo produk (matahari keemasan,
   gunung batu bara gelap), bukan dikarang: warna yang sudah dipakai di aplikasi
   mobile, toko aplikasi, dan slip gaji.

   KENAPA BERKAS CSS BIASA, BUKAN TEMA TAILWIND. Tema Filament kustom perlu
   dikompilasi Node, sedangkan image produksi hanya berisi PHP — menambah tahap
   build Node berarti menambah titik gagal baru tepat sebelum serah terima ke
   klien. Berkas ini dilayani nginx sebagai aset statis biasa dengan cache 30
   hari, tak perlu npm, tak perlu vite, tak perlu publish.

   Semuanya memakai variabel warna Filament sendiri (--primary-500, dst) supaya
   mode gelap ikut benar tanpa satu pun warna ditulis dua kali.
   ========================================================================== */

:root {
    --ct-gold: 245 166 35;
    --ct-gold-bright: 255 199 64;
    --ct-obsidian: 24 26 32;

    /* Bayangan berlapis. Satu bayangan besar terlihat murah; tiga lapis tipis
       yang menumpuk itulah yang membuat kartu terasa punya bahan. */
    --ct-shadow-sm:
        0 1px 2px rgb(16 18 24 / 0.04),
        0 2px 6px rgb(16 18 24 / 0.04);
    --ct-shadow-md:
        0 1px 2px rgb(16 18 24 / 0.05),
        0 4px 12px rgb(16 18 24 / 0.06),
        0 12px 28px rgb(16 18 24 / 0.05);

    --ct-hairline: rgb(17 20 28 / 0.07);
    --ct-radius: 0.875rem;
}

.dark {
    --ct-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3);
    --ct-shadow-md:
        0 1px 2px rgb(0 0 0 / 0.4),
        0 8px 24px rgb(0 0 0 / 0.35);
    --ct-hairline: rgb(255 255 255 / 0.07);
}

/* ── Tipografi ──────────────────────────────────────────────────────────
   Angka rupiah HARUS rata lebarnya. Tanpa tabular-nums, "1.250.000" dan
   "9.999.999" punya lebar berbeda dan kolom uang terlihat bergoyang —
   gangguan kecil yang langsung membuat tabel keuangan terasa murah. */
.fi-ta-text-item-label,
.fi-in-text,
.fi-ta-text,
.fi-wi-stats-overview-stat-value {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1, 'ss01' 1;
}

.fi-header-heading {
    letter-spacing: -0.025em;
    font-weight: 700;
}

.fi-wi-stats-overview-stat-value {
    letter-spacing: -0.02em;
}

/* ── Kartu & panel ──────────────────────────────────────────────────── */
.fi-section,
.fi-wi-stats-overview-stat,
.fi-ta-ctn,
.fi-modal-window {
    border-radius: var(--ct-radius);
    box-shadow: var(--ct-shadow-md);
    border: 1px solid var(--ct-hairline);
}

.fi-modal-window {
    box-shadow:
        0 24px 64px rgb(16 18 24 / 0.18),
        0 8px 20px rgb(16 18 24 / 0.10);
}

/* ── Tabel ──────────────────────────────────────────────────────────────
   Kepala tabel dibuat tenang dan berhuruf kecil-lebar: ia label, bukan isi.
   Isinya yang harus menarik mata lebih dulu. */
.fi-ta-header-cell-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.62;
}

.fi-ta-header-cell {
    background: transparent;
}

/* Garis emas di tepi kiri saat baris disentuh kursor. Penanda posisi yang
   tidak memakai ruang: tak ada yang bergeser, tak ada yang melompat. */
.fi-ta-row {
    transition: background-color 120ms ease, box-shadow 120ms ease;
}

.fi-ta-row:hover {
    background-color: rgb(var(--ct-gold) / 0.045);
    box-shadow: inset 3px 0 0 0 rgb(var(--ct-gold) / 0.85);
}

.dark .fi-ta-row:hover {
    background-color: rgb(var(--ct-gold) / 0.07);
}

/* ── Lencana status ─────────────────────────────────────────────────────
   Titik kecil di depan teks. Status terbaca sekilas dari WARNA TITIKNYA,
   bukan dari membaca katanya — yang penting saat satu layar memuat puluhan
   baris dan mata hanya menyapu. */
.fi-badge {
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 9999px;
    padding-inline: 0.625rem;
}

/* ── Tombol ─────────────────────────────────────────────────────────────
   Tombol utama diberi gradasi emas satu tingkat dan sorotan tipis di tepi
   atas, meniru cara logam memantulkan cahaya. Halus — kalau terlihat jelas,
   berarti sudah berlebihan. */
.fi-btn.fi-color-primary {
    background-image: linear-gradient(
        to bottom,
        rgb(var(--ct-gold-bright) / 0.22),
        rgb(var(--ct-gold) / 0)
    );
    box-shadow:
        inset 0 1px 0 0 rgb(255 255 255 / 0.28),
        0 1px 2px rgb(16 18 24 / 0.12),
        0 2px 8px rgb(var(--ct-gold) / 0.28);
    font-weight: 600;
}

.fi-btn.fi-color-primary:hover {
    box-shadow:
        inset 0 1px 0 0 rgb(255 255 255 / 0.34),
        0 2px 4px rgb(16 18 24 / 0.14),
        0 4px 14px rgb(var(--ct-gold) / 0.38);
}

.fi-btn {
    transition: box-shadow 140ms ease, transform 140ms ease;
}

.fi-btn:active {
    transform: translateY(0.5px);
}

/* ── Sidebar ────────────────────────────────────────────────────────────
   Menu aktif ditandai pita emas di tepi kiri, bukan hanya latar berwarna.
   Saat menu memanjang, tepi kiri itu jangkar yang bisa disusuri mata. */
.fi-sidebar-item-button {
    border-radius: 0.625rem;
    font-weight: 500;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-button {
    position: relative;
    font-weight: 600;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-button::before {
    content: '';
    position: absolute;
    inset-block: 0.4rem;
    inset-inline-start: -0.5rem;
    width: 3px;
    border-radius: 9999px;
    background: rgb(var(--ct-gold));
}

.fi-sidebar-group-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.5;
}

/* ── Merek di kepala sidebar ────────────────────────────────────────── */
.fi-logo {
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* ── Kartu statistik ────────────────────────────────────────────────────
   Pita emas tipis di tepi atas. Kartu angka tanpa penanda apa pun terlihat
   seperti kotak kosong berisi teks; satu garis warna sudah cukup membuatnya
   terbaca sebagai satu benda. */
.fi-wi-stats-overview-stat {
    position: relative;
    overflow: hidden;
}

.fi-wi-stats-overview-stat::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(
        to right,
        rgb(var(--ct-gold) / 0.9),
        rgb(var(--ct-gold) / 0.15)
    );
}

.fi-wi-stats-overview-stat-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    opacity: 0.7;
}

/* ── Keadaan kosong ─────────────────────────────────────────────────── */
.fi-ta-empty-state-icon-ctn {
    background: rgb(var(--ct-gold) / 0.09);
    color: rgb(var(--ct-gold));
}

.fi-ta-empty-state-heading {
    font-weight: 650;
    letter-spacing: -0.015em;
}

/* ── Halaman masuk ──────────────────────────────────────────────────────
   Satu-satunya layar yang dilihat orang sebelum percaya pada sistemnya.
   Latar gradasi hangat + kartu yang benar-benar melayang. */
.fi-simple-layout {
    background:
        radial-gradient(
            1100px 520px at 50% -8%,
            rgb(var(--ct-gold) / 0.13),
            transparent 62%
        ),
        radial-gradient(
            760px 420px at 12% 105%,
            rgb(var(--ct-obsidian) / 0.06),
            transparent 60%
        );
}

.dark .fi-simple-layout {
    background:
        radial-gradient(
            1100px 520px at 50% -8%,
            rgb(var(--ct-gold) / 0.11),
            transparent 62%
        );
}

.fi-simple-main {
    border-radius: 1.125rem;
    box-shadow:
        0 1px 2px rgb(16 18 24 / 0.05),
        0 12px 32px rgb(16 18 24 / 0.10),
        0 32px 72px rgb(16 18 24 / 0.08);
    border: 1px solid var(--ct-hairline);
}

/* ── Fokus keyboard ─────────────────────────────────────────────────────
   Diperjelas, bukan dihapus. Panel ini dipakai HRD yang mengetik cepat dan
   berpindah antar kolom dengan Tab; cincin fokus yang samar membuat mereka
   kehilangan jejak posisi di tengah tabel gaji. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid rgb(var(--ct-gold));
    outline-offset: 2px;
    border-radius: 0.375rem;
}

/* ── Gerak ──────────────────────────────────────────────────────────────
   Dihormati mutlak. Sebagian orang merasa mual oleh animasi, dan tak ada
   satu pun efek di berkas ini yang sepadan dengan itu. */
@media (prefers-reduced-motion: reduce) {
    .fi-ta-row,
    .fi-btn {
        transition: none;
    }

    .fi-btn:active {
        transform: none;
    }
}

/* ── Nama merek di sebelah lambang ──────────────────────────────────────
   Lambang sendirian pada 2rem hanya seukuran kuku; orang yang baru pertama
   membuka panel tak punya cara tahu sistem apa ini. */
.ct-wordmark {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1;
    white-space: nowrap;
    color: rgb(var(--gray-950));
}

.dark .ct-wordmark {
    color: rgb(var(--gray-50));
}

/* Nama perusahaan pengguna di sebelah wordmark — satu panel, banyak perusahaan. */
.ct-tenant {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    padding-left: 0.55rem;
    border-left: 1px solid rgb(var(--gray-300));
    color: rgb(var(--gray-600));
}

.dark .ct-tenant {
    border-left-color: rgb(var(--gray-600));
    color: rgb(var(--gray-300));
}

/* Di layar sempit, lambangnya yang bertahan — ia tetap dikenali tanpa teks,
   sedangkan nama yang terpotong separuh justru terbaca seperti kerusakan. */
@media (max-width: 400px) {
    .ct-wordmark {
        display: none;
    }
}

@media (max-width: 640px) {
    .ct-tenant {
        display: none;
    }
}

/* ── Nominal rupiah tidak boleh patah ───────────────────────────────────
   Lebar penuh sudah memberi ruang cukup, tapi ini jaring pengamannya untuk
   layar sempit dan angka yang tak terduga besarnya. "Rp 133.315.91" di satu
   baris dan "2" di baris berikutnya bukan sekadar jelek — ia terbaca sebagai
   dua angka yang berbeda, pada layar yang isinya uang orang. */
.fi-in-text .fi-in-text-item-label,
.fi-wi-stats-overview-stat-value {
    overflow-wrap: normal;
    word-break: keep-all;
}

/* ── Impor karyawan ─────────────────────────────────────────────────────
   Tabel rencana dan hasil impor. Bukan tabel Filament (tak ada sumber data
   Eloquent di baliknya), jadi gayanya ditulis di sini: hairline yang sama,
   angka tabular yang sama, supaya ia terlihat satu keluarga dengan tabel
   lain di panel. */
.ct-impor > * + * {
    margin-top: 1rem;
}

.ct-impor-kepala {
    margin: 0;
    font-size: 0.875rem;
    color: rgb(var(--gray-600));
}

.dark .ct-impor-kepala {
    color: rgb(var(--gray-400));
}

.ct-impor-tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.ct-impor-tabel th,
.ct-impor-tabel td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--ct-hairline);
}

.ct-impor-tabel thead th {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgb(var(--gray-500));
}

.ct-impor-ringkasan th {
    width: 60%;
    font-weight: 500;
}

.ct-impor-ringkasan td,
.ct-impor-angka {
    font-variant-numeric: tabular-nums;
}

.ct-impor-masalah {
    padding-left: 1.25rem;
    list-style: disc;
    color: rgb(var(--danger-600));
}

.dark .ct-impor-masalah {
    color: rgb(var(--danger-400));
}

.ct-impor-sandi {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9em;
    user-select: all;
}

/* ======================================================================
   Tata rupa panel v2 (3 Okt 2026) — mengikuti mockup dasbor CoalTrack:
   sidebar obsidian, bilah atas putih dengan pencarian, kanvas hangat,
   kartu putih bergaris halus, teks pekat, papan sif berfoto.
   ====================================================================== */
:root {
    --ct-paper: #f3f2ee;
    --ct-card: #ffffff;
    --ct-ink: #15171c;
    --ct-text: #3b3e45;
    --ct-muted: #6b7079;
    --ct-line: rgb(17 20 28 / 0.08);
    --ct-card-shadow: 0 1px 2px rgb(17 20 28 / 0.04), 0 10px 28px -18px rgb(17 20 28 / 0.18);
}

/* --- kanvas & teks ----------------------------------------------------- */
.fi-body, .fi-layout { background: var(--ct-paper); }
.fi-main { color: var(--ct-text); }
.fi-header-heading { color: var(--ct-ink); font-size: 1.85rem; letter-spacing: -0.02em; font-weight: 700; }
.fi-header-subheading { color: var(--ct-muted); font-size: 0.95rem; margin-top: 0.15rem; }
.fi-section-header-heading { color: var(--ct-ink); font-weight: 700; }
.fi-section-header-description { color: var(--ct-muted); }
.fi-ta-header-cell-label { color: var(--ct-ink); }
.fi-ta-text { color: var(--ct-text); }

/* --- sidebar obsidian --------------------------------------------------- */
.fi-sidebar.fi-main-sidebar {
    background: rgb(var(--ct-obsidian));
    border-right: 1px solid rgb(255 255 255 / 0.06);
}
.fi-sidebar.fi-main-sidebar .fi-sidebar-header {
    background: transparent;
    border-bottom: 1px solid rgb(255 255 255 / 0.06);
    box-shadow: none;
}
.fi-sidebar.fi-main-sidebar .ct-wordmark { color: #fff; }
/* Nama perusahaan di kepala sidebar gelap (menu HP/tablet): abu-600 bawaan hanya
   terbaca di atas putih. Dibatasi lebarnya; nama lengkap ada di tooltip. */
.fi-sidebar.fi-main-sidebar .ct-tenant {
    color: rgb(255 255 255 / 0.72);
    border-left-color: rgb(255 255 255 / 0.2);
    max-width: 8.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fi-sidebar.fi-main-sidebar .fi-sidebar-group-label {
    color: rgb(255 255 255 / 0.42);
    font-size: 0.66rem;
    letter-spacing: 0.16em;
}
.fi-sidebar.fi-main-sidebar .fi-sidebar-group-collapse-btn,
.fi-sidebar.fi-main-sidebar .fi-sidebar-group-collapse-btn .fi-icon { color: rgb(255 255 255 / 0.45); }
.fi-sidebar.fi-main-sidebar .fi-sidebar-item-btn {
    color: rgb(255 255 255 / 0.8);
    border: 1px solid transparent;
    border-radius: 0.7rem;
    background: transparent;
}
.fi-sidebar.fi-main-sidebar .fi-sidebar-item-btn:hover { background: rgb(255 255 255 / 0.06); }
.fi-sidebar.fi-main-sidebar .fi-sidebar-item-label { color: inherit; }
.fi-sidebar.fi-main-sidebar .fi-sidebar-item-icon { color: rgb(255 255 255 / 0.55); }
.fi-sidebar.fi-main-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-btn {
    background: rgb(var(--ct-gold) / 0.14);
    border-color: rgb(var(--ct-gold) / 0.5);
    color: rgb(var(--ct-gold-bright));
}
.fi-sidebar.fi-main-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-btn::before { content: none; }
.fi-sidebar.fi-main-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.fi-sidebar.fi-main-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-label { color: rgb(var(--ct-gold-bright)); }
.fi-sidebar.fi-main-sidebar .fi-sidebar-item-grouped-border-part { border-color: rgb(255 255 255 / 0.12); }

.ct-promo {
    margin: 0.75rem 0.75rem 1rem;
    padding: 0.95rem 1rem 1rem;
    border-radius: 0.9rem;
    background: rgb(255 255 255 / 0.05) url(/images/coaltrack/hero-pit.jpg) center / cover no-repeat;
    background-blend-mode: luminosity;
    position: relative;
    overflow: hidden;
    color: #fff;
}
.ct-promo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(24 26 32 / 0.55), rgb(24 26 32 / 0.9)); }
.ct-promo > * { position: relative; }
.ct-promo__mark { width: 2.25rem; height: 2.25rem; object-fit: contain; margin-bottom: 0.5rem; }
.ct-promo__title { font-weight: 700; font-size: 0.85rem; line-height: 1.3; }
.ct-promo__text { font-size: 0.72rem; color: rgb(255 255 255 / 0.68); line-height: 1.4; margin-top: 0.25rem; }

/* --- bilah atas --------------------------------------------------------- */
.fi-topbar { background: #fff; border-bottom: 1px solid var(--ct-line); box-shadow: none; }
.fi-topbar .fi-global-search .fi-input-wrp {
    border-radius: 999px;
    background: #f6f5f2;
    border-color: var(--ct-line);
    box-shadow: none;
}
/* Lebar 22rem hanya di layar lebar. Di HP lebar tetap itu mendorong lonceng
   dan menu pengguna ke luar layar — terpotong, bukan meluber, jadi tak
   terlihat dan tak bisa diketuk (diukur 22 Okt 2026 di 320–430 px). */
@media (min-width: 768px) {
    .fi-topbar .fi-global-search .fi-input-wrp { min-width: 22rem; }
}
.fi-topbar .fi-global-search .fi-input { font-size: 0.85rem; }
.fi-user-menu-trigger .fi-avatar { box-shadow: 0 0 0 2px rgb(var(--ct-gold) / 0.35); }

/* --- keping tanggal di kepala dasbor ----------------------------------- */
.ct-date { display: flex; align-items: center; gap: 0.6rem; color: var(--ct-ink); }
.ct-date__icon { width: 1.25rem; height: 1.25rem; color: var(--ct-muted); }
.ct-date__day { font-weight: 700; font-size: 0.95rem; }
.ct-date__time { font-size: 0.8rem; color: var(--ct-muted); }

/* --- kartu --------------------------------------------------------------- */
.fi-section, .fi-wi-stats-overview-stat, .fi-ta-ctn {
    background: var(--ct-card);
    border: 1px solid var(--ct-line);
    box-shadow: var(--ct-card-shadow);
    border-radius: var(--ct-radius);
}
.fi-section-header { padding-bottom: 0.5rem; }
.fi-section-header .fi-icon { width: 1.4rem; height: 1.4rem; }
.fi-section-header-icon-ctn, .fi-section-header .fi-section-header-icon {
    width: 2.75rem; height: 2.75rem; border-radius: 0.8rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgb(var(--ct-gold) / 0.14); color: rgb(var(--ct-gold));
}

/* --- kartu angka: ikon kotak kiri, label + angka kanan, pil keterangan --- */
.fi-wi-stats-overview-stat { padding: 1.15rem 1.25rem 1.2rem; position: relative; overflow: hidden; }
.fi-wi-stats-overview-stat::before { content: none; }
.fi-wi-stats-overview-stat::after {
    content: ""; position: absolute; right: -1.75rem; top: -1.75rem; width: 7rem; height: 7rem; border-radius: 50%;
    background: radial-gradient(circle, rgb(var(--ct-gold) / 0.18), transparent 66%);
    pointer-events: none;
}
.ct-stat--ok::after { background: radial-gradient(circle, rgb(21 128 61 / 0.16), transparent 66%); }
.ct-stat--warn::after { background: radial-gradient(circle, rgb(180 83 9 / 0.18), transparent 66%); }
.fi-wi-stats-overview-stat-content { display: grid; grid-template-columns: 3rem 1fr; column-gap: 0.9rem; row-gap: 0.1rem; align-items: center; }
.fi-wi-stats-overview-stat-label-ctn { display: contents; }
.fi-wi-stats-overview-stat-label-ctn > .fi-icon {
    grid-column: 1; grid-row: 1 / 3;
    width: 3rem; height: 3rem; padding: 0.7rem; border-radius: 0.8rem;
    background: rgb(var(--ct-gold) / 0.14); color: rgb(var(--ct-gold));
}
.ct-stat--ok .fi-wi-stats-overview-stat-label-ctn > .fi-icon { background: rgb(21 128 61 / 0.12); color: #15803d; }
.ct-stat--warn .fi-wi-stats-overview-stat-label-ctn > .fi-icon { background: rgb(180 83 9 / 0.14); color: #b45309; }
.fi-wi-stats-overview-stat-label { grid-column: 2; grid-row: 1; color: var(--ct-muted); font-size: 0.85rem; font-weight: 500; }
.fi-wi-stats-overview-stat-value { grid-column: 2; grid-row: 2; color: var(--ct-ink); font-size: 2rem; line-height: 1.1; font-weight: 700; font-variant-numeric: tabular-nums; }
.fi-wi-stats-overview-stat-description {
    grid-column: 1 / 3; grid-row: 3;
    margin-top: 0.75rem;
    font-size: 0.82rem; line-height: 1.35;
    color: var(--ct-text);
    background: #f3f2ee;
    border-radius: 0.6rem;
    padding: 0.5rem 0.7rem;
    min-height: 2.9rem;
    display: flex; align-items: center; gap: 0.4rem;
}
.ct-stat--ok .fi-wi-stats-overview-stat-description { background: #e8f6ec; color: #15803d; }
.ct-stat--warn .fi-wi-stats-overview-stat-description { background: #fdf1e3; color: #b45309; }
/* Kartu angka TANPA ikon (mis. Proses Gaji): kolom ikon tidak disediakan,
   supaya label dan angkanya rata kiri dengan isi kartu, bukan menjorok 63 px. */
.fi-wi-stats-overview-stat-content:not(:has(.fi-wi-stats-overview-stat-label-ctn > .fi-icon)) { grid-template-columns: minmax(0, 1fr); }
.fi-wi-stats-overview-stat-content:not(:has(.fi-wi-stats-overview-stat-label-ctn > .fi-icon)) .fi-wi-stats-overview-stat-label,
.fi-wi-stats-overview-stat-content:not(:has(.fi-wi-stats-overview-stat-label-ctn > .fi-icon)) .fi-wi-stats-overview-stat-value,
.fi-wi-stats-overview-stat-content:not(:has(.fi-wi-stats-overview-stat-label-ctn > .fi-icon)) .fi-wi-stats-overview-stat-description { grid-column: 1; }

/* --- papan sif ----------------------------------------------------------- */
.ct-board {
    position: relative; overflow: hidden;
    border-radius: var(--ct-radius);
    background: rgb(var(--ct-obsidian)) url(/images/coaltrack/hero-sunset.jpg) right 35% / cover no-repeat;
    color: #fff;
    padding: 1.6rem 1.9rem 1.7rem;
    box-shadow: var(--ct-shadow-md);
    min-height: 15rem;
}
.ct-board::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgb(24 26 32 / 0.97) 0%, rgb(24 26 32 / 0.9) 32%, rgb(24 26 32 / 0.45) 62%, rgb(24 26 32 / 0.2) 100%);
}
.ct-board::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
    background: linear-gradient(90deg, rgb(var(--ct-gold)), rgb(var(--ct-gold-bright)) 55%, rgb(var(--ct-gold) / 0.3));
}
.ct-board__grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.15fr 0.9fr 1.25fr;
    gap: 1.75rem;
    align-items: center;
    min-height: 11.5rem;
}
@media (max-width: 1100px) { .ct-board__grid { grid-template-columns: 1fr; gap: 1.25rem; } }
.ct-board__intro { padding-right: 1rem; }
.ct-board__greet { text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.66rem; font-weight: 600; color: rgb(255 255 255 / 0.7); }
.ct-board__date { font-size: 2rem; font-weight: 800; line-height: 1.15; margin-top: 0.5rem; letter-spacing: -0.02em; }
.ct-board__time { font-size: 1rem; color: rgb(255 255 255 / 0.78); margin-top: 0.15rem; }
.ct-board__company { margin-top: 1.1rem; font-size: 1.05rem; font-weight: 700; color: rgb(var(--ct-gold-bright)); display: flex; align-items: center; gap: 0.5rem; }
.ct-board__logo { width: 1.6rem; height: 1.6rem; object-fit: contain; filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.4)); }
.ct-board__tagline { font-size: 0.82rem; color: rgb(255 255 255 / 0.72); line-height: 1.45; margin-top: 0.3rem; max-width: 24rem; }
.ct-board__count { display: flex; align-items: center; gap: 1rem; border-left: 1px solid rgb(255 255 255 / 0.14); padding-left: 1.75rem; }
@media (max-width: 1100px) { .ct-board__count { border-left: 0; padding-left: 0; } }
.ct-board__tile {
    flex: none; width: 3.75rem; height: 3.75rem; border-radius: 1rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgb(255 255 255 / 0.1); border: 1px solid rgb(255 255 255 / 0.16);
    color: rgb(var(--ct-gold-bright));
}
.ct-board__tile .fi-icon { width: 1.8rem; height: 1.8rem; }
.ct-board__tile--window { width: 3rem; height: 3rem; border-radius: 0.8rem; background: rgb(var(--ct-gold) / 0.18); }
.ct-board__tile--window .fi-icon { width: 1.4rem; height: 1.4rem; }
.ct-board__num { font-size: 3.4rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.ct-board__label { font-size: 1.05rem; font-weight: 600; margin-top: 0.3rem; }
.ct-board__sub { font-size: 0.82rem; color: rgb(255 255 255 / 0.7); margin-top: 0.25rem; line-height: 1.45; }
.ct-board__window {
    display: flex; gap: 0.9rem; align-items: flex-start;
    border: 1px solid rgb(255 255 255 / 0.18);
    border-radius: 1rem;
    padding: 1rem 1.1rem;
    background: rgb(24 26 32 / 0.62);
    backdrop-filter: blur(6px);
}
.ct-board__window-state { font-weight: 700; font-size: 0.98rem; line-height: 1.35; }
.ct-board__window--open .ct-board__window-state { color: #4ade80; }
.ct-board__window--late .ct-board__window-state { color: rgb(var(--ct-gold-bright)); }
.ct-board__window--wait .ct-board__window-state { color: #fff; }
.ct-board__window--closed .ct-board__window-state { color: #fca5a5; }
.ct-board__window--unset .ct-board__window-state { color: rgb(var(--ct-gold-bright)); }
.ct-board__link { display: inline-block; margin-top: 0.55rem; color: rgb(var(--ct-gold-bright)); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* --- antrean tindakan ----------------------------------------------------- */
.ct-queue { display: flex; flex-direction: column; gap: 0.6rem; }
.ct-queue__item {
    display: flex; align-items: center; gap: 0.85rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--ct-line);
    border-radius: 0.85rem;
    background: #fbfaf8;
    color: inherit; text-decoration: none;
    transition: background-color 120ms ease, border-color 120ms ease;
}
.ct-queue__item:hover { background: rgb(var(--ct-gold) / 0.08); border-color: rgb(var(--ct-gold) / 0.4); }
.ct-queue__tile {
    flex: none; width: 2.75rem; height: 2.75rem; border-radius: 0.75rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgb(var(--ct-gold) / 0.14); color: rgb(var(--ct-gold));
}
.ct-queue__tile .fi-icon { width: 1.3rem; height: 1.3rem; }
.ct-queue__count { min-width: 1.6rem; font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; text-align: center; color: var(--ct-ink); }
.ct-queue__count--zero { color: var(--ct-ink); }
.ct-queue__text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ct-queue__title { font-weight: 700; font-size: 0.9rem; color: var(--ct-ink); }
.ct-queue__hint { font-size: 0.78rem; color: var(--ct-muted); line-height: 1.4; }
.ct-queue__action {
    display: inline-flex; align-items: center; gap: 0.2rem;
    font-size: 0.8rem; font-weight: 700; color: rgb(var(--ct-gold));
    border: 1px solid rgb(var(--ct-gold) / 0.5); border-radius: 0.6rem; padding: 0.4rem 0.6rem 0.4rem 0.75rem;
    background: #fff; white-space: nowrap;
}
.ct-queue__action .fi-icon { width: 1rem; height: 1rem; }
.ct-queue__done {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.85rem; font-weight: 600; color: #15803d;
    background: #e8f6ec; border-radius: 0.75rem; padding: 0.7rem 0.85rem;
}
.ct-queue__done .fi-icon { width: 1.1rem; height: 1.1rem; }

/* Kolom sempit. Kartu "Butuh tindakan" hanya sepertiga lebar dasbor (±230–290 px
   di laptop 1280–1440 px, ±300 px di HP): ikon + angka + tombol menyisakan
   0–60 px untuk teks, sehingga teks turun satu kata per baris dan tombol
   menimpanya. Di kolom sempit judul tetap di samping angka, keterangan dan
   tombol turun ke baris sendiri; di kolom sangat sempit judul ikut turun. */
.ct-queue { container-type: inline-size; }
@container (max-width: 27rem) {
    .ct-queue__item {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr);
        column-gap: 0.75rem; row-gap: 0.55rem;
    }
    .ct-queue__text { display: contents; }
    .ct-queue__title { grid-column: 3; align-self: center; }
    .ct-queue__hint { grid-column: 1 / -1; }
    .ct-queue__action { grid-column: 1 / -1; justify-content: center; padding-block: 0.5rem; }
}
@container (max-width: 15rem) {
    .ct-queue__title { grid-column: 1 / -1; }
}

/* --- tabel ---------------------------------------------------------------- */
/* Sel kepala kolom centang dan kolom aksi tidak membawa kelas
   fi-ta-header-cell; tanpa `thead th` latarnya berbeda dari sel kepala lain. */
.fi-ta-header-cell, .fi-ta-table thead th { background: #faf9f6; }
.fi-ta-row:hover { background: rgb(var(--ct-gold) / 0.05); }

/* --- bilah atas: segmen gelap selebar sidebar, agar kolom merek menyambung --- */
@media (min-width: 1024px) {
    .fi-topbar {
        background: linear-gradient(90deg, rgb(var(--ct-obsidian)) 0, rgb(var(--ct-obsidian)) 20rem, #fff 20rem);
        border-bottom-color: var(--ct-line);
    }
    .fi-topbar .ct-wordmark { color: #fff; }
    /* Nama perusahaan ikut terang di segmen gelap 20rem, dan tidak keluar darinya:
       lambang + "CoalTrack" sudah memakai ±12rem; nama panjang berakhir elipsis. */
    .fi-topbar .ct-tenant {
        color: rgb(255 255 255 / 0.72);
        border-left-color: rgb(255 255 255 / 0.2);
        font-size: 0.78rem;
        max-width: 7.75rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .fi-topbar .fi-topbar-collapse-sidebar-btn-ctn .fi-icon-btn,
    .fi-topbar .fi-topbar-open-collapse-sidebar-btn { color: rgb(255 255 255 / 0.7); }
}

/* --- ikon kotak di kepala kartu grafik & tabel (mengikuti kartu lain) --- */
.fi-wi-chart .fi-section-header-heading::before,
.fi-wi-table .fi-section-header-heading::before,
.fi-wi-table .fi-ta-header-heading::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 2.5rem; height: 2.5rem;
    margin-right: 0.75rem;
    border-radius: 0.75rem;
    background-color: rgb(var(--ct-gold) / 0.14);
    -webkit-mask: none;
    position: relative;
}
.fi-wi-chart .fi-section-header-heading::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.6' stroke='%23F5A623'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; background-size: 1.3rem;
}
.fi-wi-table .fi-section-header-heading::before,
.fi-wi-table .fi-ta-header-heading::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.6' stroke='%23F5A623'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; background-size: 1.3rem;
}

/* --- halaman masuk: foto tambang penuh + kartu kaca ----------------------- */
.fi-simple-layout {
    background: #1a1d24 url(/images/coaltrack/login-bg.jpg) center / cover no-repeat;
    position: relative;
}
.fi-simple-layout::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgb(255 255 255 / 0.18), rgb(24 26 32 / 0.28));
    pointer-events: none;
}
.fi-simple-main-ctn { position: relative; }
.fi-simple-main {
    background: rgb(255 255 255 / 0.9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgb(255 255 255 / 0.7);
    border-radius: 1.25rem;
    box-shadow: 0 24px 64px -24px rgb(16 18 24 / 0.45), 0 2px 6px rgb(16 18 24 / 0.08);
    padding: 2.5rem 2.5rem 2.25rem;
}
.fi-simple-main .fi-simple-header-heading { color: var(--ct-ink); font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; }
.fi-simple-main .fi-simple-header-subheading { color: var(--ct-muted); font-size: 0.95rem; line-height: 1.5; max-width: 26rem; margin: 0.5rem auto 0; }
.fi-simple-main .fi-fo-field-label { color: var(--ct-ink); font-weight: 600; }
.fi-simple-main .fi-input-wrp { background: #fff; border-radius: 0.8rem; }
.fi-simple-main .fi-input-wrp:focus-within { box-shadow: 0 0 0 3px rgb(var(--ct-gold) / 0.25); border-color: rgb(var(--ct-gold)); }
.fi-simple-main .fi-input-wrp-prefix .fi-icon { color: var(--ct-muted); }
.fi-simple-main .fi-checkbox-input:checked { background-color: rgb(var(--ct-gold)); border-color: rgb(var(--ct-gold)); }
.fi-simple-main .fi-btn.fi-color-primary { height: 3rem; font-size: 1rem; border-radius: 0.8rem; }
.fi-simple-main .fi-logo, .fi-simple-main .ct-wordmark { color: var(--ct-ink); }


/* ======================================================================
   MODE GELAP — pasangan utuh tata rupa v2. Sebelumnya hanya sebagian elemen
   yang mengikuti mode gelap (teks tabel putih di atas kartu putih, pilihan
   grafik tanpa teks). Kini kanvas, kartu, teks, tabel, formulir, dan dasbor
   semuanya punya warna gelapnya sendiri; emas tetap aksen.
   ====================================================================== */
.dark {
    --ct-paper: #0f1115;
    --ct-card: #171a21;
    --ct-ink: #f4f3ef;
    --ct-text: #d6d4cd;
    --ct-muted: #9a9890;
    --ct-line: rgb(255 255 255 / 0.08);
    --ct-card-shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 28px -18px rgb(0 0 0 / 0.6);
}
.dark .fi-body, .dark .fi-layout { background: var(--ct-paper); }
.dark .fi-main { color: var(--ct-text); }
.dark .fi-header-heading, .dark .fi-section-header-heading, .dark .fi-ta-header-cell-label { color: var(--ct-ink); }
.dark .fi-header-subheading, .dark .fi-section-header-description { color: var(--ct-muted); }
.dark .fi-ta-text { color: var(--ct-text); }
.dark .fi-ta-header-cell, .dark .fi-ta-table thead th { background: #1b1f27; }
.dark .fi-ta-row:hover { background: rgb(var(--ct-gold) / 0.08); }
.dark .fi-section, .dark .fi-wi-stats-overview-stat, .dark .fi-ta-ctn {
    background: var(--ct-card);
    border-color: var(--ct-line);
    box-shadow: var(--ct-card-shadow);
}
.dark .fi-section-header-icon-ctn, .dark .fi-section-header .fi-section-header-icon,
.dark .fi-wi-chart .fi-section-header-heading::before, .dark .fi-wi-table .fi-section-header-heading::before,
.dark .fi-wi-table .fi-ta-header-heading::before { background-color: rgb(var(--ct-gold) / 0.18); }

/* bilah atas: gelap penuh, segmen sidebar tetap obsidian */
.dark .fi-topbar { background: #14171d; border-bottom-color: var(--ct-line); }
@media (min-width: 1024px) {
    .dark .fi-topbar { background: linear-gradient(90deg, rgb(var(--ct-obsidian)) 0, rgb(var(--ct-obsidian)) 20rem, #14171d 20rem); }
}
.dark .fi-topbar .fi-global-search .fi-input-wrp { background: #1b1f27; border-color: var(--ct-line); }
.dark .fi-topbar .fi-global-search .fi-input { color: var(--ct-ink); }
.dark .ct-date, .dark .ct-date__day { color: var(--ct-ink); }
.dark .ct-date__icon, .dark .ct-date__time { color: var(--ct-muted); }

/* kartu angka */
.dark .fi-wi-stats-overview-stat-label { color: var(--ct-muted); }
.dark .fi-wi-stats-overview-stat-value { color: var(--ct-ink); }
.dark .fi-wi-stats-overview-stat-label-ctn > .fi-icon { background: rgb(var(--ct-gold) / 0.2); color: rgb(var(--ct-gold-bright)); }
.dark .ct-stat--ok .fi-wi-stats-overview-stat-label-ctn > .fi-icon { background: rgb(74 222 128 / 0.16); color: #4ade80; }
.dark .ct-stat--warn .fi-wi-stats-overview-stat-label-ctn > .fi-icon { background: rgb(251 191 36 / 0.16); color: #fbbf24; }
.dark .fi-wi-stats-overview-stat-description { background: #1f232c; color: var(--ct-text); }
.dark .ct-stat--ok .fi-wi-stats-overview-stat-description { background: rgb(74 222 128 / 0.12); color: #4ade80; }
.dark .ct-stat--warn .fi-wi-stats-overview-stat-description { background: rgb(251 191 36 / 0.12); color: #fbbf24; }

/* antrean tindakan */
.dark .ct-queue__item { background: #1b1f27; border-color: var(--ct-line); }
.dark .ct-queue__item:hover { background: rgb(var(--ct-gold) / 0.1); border-color: rgb(var(--ct-gold) / 0.45); }
.dark .ct-queue__tile { background: rgb(var(--ct-gold) / 0.2); color: rgb(var(--ct-gold-bright)); }
.dark .ct-queue__count, .dark .ct-queue__count--zero, .dark .ct-queue__title { color: var(--ct-ink); }
.dark .ct-queue__hint { color: var(--ct-muted); }
.dark .ct-queue__action { background: transparent; color: rgb(var(--ct-gold-bright)); border-color: rgb(var(--ct-gold) / 0.5); }
.dark .ct-queue__done { background: rgb(74 222 128 / 0.12); color: #4ade80; }

/* papan sif & promo: sudah gelap; sedikit lebih kontras pada garis */
.dark .ct-board { box-shadow: 0 16px 40px -20px rgb(0 0 0 / 0.8); }

/* halaman masuk */
.dark .fi-simple-layout::before { background: linear-gradient(180deg, rgb(24 26 32 / 0.35), rgb(24 26 32 / 0.6)); }
.dark .fi-simple-main { background: rgb(23 26 33 / 0.88); border-color: rgb(255 255 255 / 0.12); }
.dark .fi-simple-main .fi-simple-header-heading, .dark .fi-simple-main .fi-fo-field-label,
.dark .fi-simple-main .fi-logo, .dark .fi-simple-main .ct-wordmark { color: var(--ct-ink); }
.dark .fi-simple-main .fi-simple-header-subheading { color: var(--ct-muted); }
.dark .fi-simple-main .fi-input-wrp { background: #1b1f27; }

/* formulir & pilihan di dalam kartu (termasuk filter grafik) */
.dark .fi-section .fi-input-wrp, .dark .fi-section .fi-select-input, .dark .fi-wi-chart .fi-input-wrp,
.dark .fi-ta-ctn .fi-input-wrp { background: #1b1f27; border-color: var(--ct-line); color: var(--ct-ink); }
.dark .fi-select-input, .dark .fi-input { color: var(--ct-ink); }
.dark .fi-ta-empty-state-heading { color: var(--ct-ink); }

/* --- simulasi gaji ------------------------------------------------------- */
.ct-sim { display: flex; flex-direction: column; gap: 1.25rem; }
.ct-sim__hero {
    border-radius: var(--ct-radius);
    background: rgb(var(--ct-obsidian));
    color: #fff;
    padding: 1.25rem 1.5rem;
    position: relative; overflow: hidden;
}
.ct-sim__hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, rgb(var(--ct-gold)), rgb(var(--ct-gold-bright)) 60%, transparent); }
.ct-sim__label { font-size: 0.85rem; color: rgb(255 255 255 / 0.72); }
.ct-sim__net { font-size: 2.4rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; color: rgb(var(--ct-gold-bright)); }
.ct-sim__sub { font-size: 0.82rem; color: rgb(255 255 255 / 0.7); margin-top: 0.35rem; }
.ct-sim__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 1024px) { .ct-sim__grid { grid-template-columns: 1fr; } }
.ct-sim__col { border: 1px solid var(--ct-line); border-radius: 0.9rem; padding: 1rem 1.1rem; background: var(--ct-card); }
.ct-sim__col--muted { background: #faf9f6; }
.dark .ct-sim__col--muted { background: #1b1f27; }
.ct-sim__h { font-weight: 700; color: var(--ct-ink); margin-bottom: 0.5rem; font-size: 0.95rem; }
.ct-sim__row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.4rem 0; border-bottom: 1px dashed var(--ct-line); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.ct-sim__row small { display: block; font-size: 0.75rem; color: var(--ct-muted); }
.ct-sim__row--total { border-bottom: 0; border-top: 1px solid var(--ct-line); margin-top: 0.3rem; padding-top: 0.6rem; font-weight: 700; color: var(--ct-ink); }

/* --- sidebar disempitkan (desktop) ------------------------------------------
   Filament 5 tidak memberi lebar tetap pada sidebar yang disempitkan: lebarnya
   mengikuti isi. Kartu promo di kaki sidebar (teks max-content ±358 px) membuat
   sidebar "sempit" justru melebar ke 383 px. Kunci lebarnya, sembunyikan isi
   yang tak punya tempat, dan susutkan segmen gelap bilah atas. Ponsel (<64rem)
   tidak terpengaruh: di sana sidebar adalah lapisan geser. */
@media (min-width: 64rem) {
    .fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar.fi-main-sidebar:not(.fi-sidebar-open) {
        width: var(--collapsed-sidebar-width, 4.5rem);
        min-width: var(--collapsed-sidebar-width, 4.5rem);
        max-width: var(--collapsed-sidebar-width, 4.5rem);
        overflow-x: hidden;
    }
    /* Rel ikon EKSPLISIT. Filament 5 tidak menata sidebar yang disempitkan sama
       sekali (padding nav tetap 1.5rem/sisi → sisa ruang 24 px), sehingga
       ukuran ikon bergantung pada cara tiap browser menyusutkan item flex:
       Chromium menahan 21 px, browser lain menyusutkannya jadi titik. Semua
       ukuran di bawah tetap, tanpa mengandalkan penyusutan flex. */
    .fi-sidebar.fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav {
        padding-inline: 0.75rem;
        row-gap: 1rem;
        overflow-x: hidden;
    }
    .fi-sidebar.fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav-groups,
    .fi-sidebar.fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-group,
    .fi-sidebar.fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-items,
    .fi-sidebar.fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-item { width: 100%; min-width: 0; }
    .fi-sidebar.fi-main-sidebar:not(.fi-sidebar-open) .ct-promo,
    .fi-sidebar.fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-label,
    .fi-sidebar.fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-collapse-btn,
    .fi-sidebar.fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-label,
    .fi-sidebar.fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-badge-ctn,
    .fi-sidebar.fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-grouped-border { display: none; }
    .fi-sidebar.fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-btn {
        width: 3rem;
        height: 2.75rem;
        padding: 0;
        margin-inline: auto;
        justify-content: center;
        align-items: center;
        column-gap: 0;
    }
    .fi-sidebar.fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-icon {
        width: 1.5rem;
        height: 1.5rem;
        min-width: 1.5rem;
        min-height: 1.5rem;
        flex: 0 0 1.5rem;
    }
    .fi-sidebar.fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-header { padding-inline: 0; justify-content: center; }

    /* Bilah atas: tanpa segmen gelap 20rem bila sidebar disempitkan; logo+wordmark
       yang ditampilkan Filament di bilah atas memakai warna tinta. */
    .fi-body:has(.fi-sidebar.fi-main-sidebar:not(.fi-sidebar-open)) .fi-topbar { background: #fff; }
    .dark .fi-body:has(.fi-sidebar.fi-main-sidebar:not(.fi-sidebar-open)) .fi-topbar { background: #14171d; }
    .fi-body:has(.fi-sidebar.fi-main-sidebar:not(.fi-sidebar-open)) .fi-topbar .ct-wordmark { color: var(--ct-ink); }
    .fi-body:has(.fi-sidebar.fi-main-sidebar:not(.fi-sidebar-open)) .fi-topbar .ct-tenant { color: rgb(var(--gray-600)); border-left-color: rgb(var(--gray-300)); max-width: none; }
    .dark .fi-body:has(.fi-sidebar.fi-main-sidebar:not(.fi-sidebar-open)) .fi-topbar .ct-tenant { color: rgb(var(--gray-300)); border-left-color: rgb(var(--gray-600)); }
    .fi-body:has(.fi-sidebar.fi-main-sidebar:not(.fi-sidebar-open)) .fi-topbar .fi-topbar-open-collapse-sidebar-btn,
    .fi-body:has(.fi-sidebar.fi-main-sidebar:not(.fi-sidebar-open)) .fi-topbar .fi-topbar-collapse-sidebar-btn-ctn .fi-icon-btn { color: var(--ct-muted); }
}

/* ── Rekap Absensi ──────────────────────────────────────────────────────
   Tabel per divisi dengan subtotal. Bukan tabel Filament (datanya hasil
   hitungan, bukan baris Eloquent), jadi gayanya ditulis di sini mengikuti
   keluarga .ct-impor-tabel: hairline, angka tabular, kepala huruf kecil. */
.ct-rekap > * + * { margin-top: 0.75rem; }
.ct-rekap__gulir { overflow-x: auto; }
.ct-rekap__tabel { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.ct-rekap__tabel th,
.ct-rekap__tabel td { padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--ct-hairline); vertical-align: top; white-space: nowrap; }
.ct-rekap__tabel thead th { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgb(var(--gray-500)); text-align: left; }
.ct-rekap__angka { text-align: right; font-variant-numeric: tabular-nums; }
.ct-rekap__tabel thead th.ct-rekap__angka { text-align: right; }
.ct-rekap__nama { text-align: left; min-width: 14rem; }
.ct-rekap__orang { display: block; font-weight: 600; }
.ct-rekap__nik { display: block; font-size: 0.72rem; color: rgb(var(--gray-500)); }
.ct-rekap__divisi th { text-align: left; font-weight: 700; font-size: 0.85rem; padding-top: 1rem; background: rgb(var(--ct-gold) / 0.08); }
.ct-rekap__divisi th span { margin-left: 0.5rem; font-weight: 500; font-size: 0.72rem; color: rgb(var(--gray-500)); }
.ct-rekap__subtotal th,
.ct-rekap__subtotal td { font-weight: 600; background: rgb(var(--gray-50)); }
.ct-rekap__total th,
.ct-rekap__total td { font-weight: 700; border-top: 2px solid rgb(var(--gray-400)); border-bottom: 0; }
.ct-rekap__warn { color: #b45309; font-weight: 600; }
.ct-rekap__bad { color: #b91c1c; font-weight: 600; }
.ct-rekap__kosong,
.ct-rekap__catatan { font-size: 0.8rem; color: rgb(var(--gray-500)); line-height: 1.5; margin: 0; }
/* Catatan kaki tidak menempel ke baris terakhir tabel. */
.ct-rekap__catatan { margin-top: 0.875rem; }
.dark .ct-rekap__subtotal th,
.dark .ct-rekap__subtotal td { background: rgb(255 255 255 / 0.04); }
.dark .ct-rekap__divisi th { background: rgb(var(--ct-gold) / 0.12); }

/* ── Langganan: spanduk tagihan di beranda & halaman Tagihan ─────────────── */
.ct-billing {
    display: flex; align-items: flex-start; gap: 0.9rem;
    padding: 0.9rem 1.1rem; border-radius: 0.75rem; border: 1px solid; border-left-width: 5px;
}
.ct-billing--due { background: #fdf6e7; border-color: #f5a623; }
.ct-billing--overdue { background: #fdecec; border-color: #b91c1c; }
.dark .ct-billing--due { background: rgb(245 166 35 / 0.12); }
.dark .ct-billing--overdue { background: rgb(185 28 28 / 0.16); }
.ct-billing__icon { flex: none; display: inline-flex; padding: 0.45rem; border-radius: 0.6rem; background: rgb(255 255 255 / 0.6); }
.ct-billing--overdue .ct-billing__icon { color: #b91c1c; }
.ct-billing--due .ct-billing__icon { color: #b45309; }
.ct-billing__icon .fi-icon { width: 1.4rem; height: 1.4rem; }
.ct-billing__text { flex: 1; min-width: 0; }
.ct-billing__title { margin: 0 0 0.2rem; font-weight: 800; font-size: 0.95rem; }
.ct-billing--overdue .ct-billing__title { color: #b91c1c; }
.ct-billing__line { margin: 0; font-size: 0.88rem; }
.ct-billing__number { font-size: 0.78rem; opacity: 0.7; font-variant-numeric: tabular-nums; }
.ct-billing__hint { margin: 0.35rem 0 0; font-size: 0.78rem; opacity: 0.8; }
.ct-billing__action {
    flex: none; display: inline-flex; align-items: center; gap: 0.25rem; align-self: center;
    padding: 0.5rem 0.9rem; border-radius: 0.5rem; font-weight: 700; font-size: 0.85rem;
    background: #181a20; color: #fff; text-decoration: none; white-space: nowrap;
}
.ct-billing__action .fi-icon { width: 1rem; height: 1rem; }
/* HP: tombol turun ke bawah teks. Di samping teks, kolom teks tinggal sejengkal
   dan nominal tagihan terpotong di 320px. Ikon 2.3rem + jarak 0.9rem = 3.2rem. */
@media (max-width: 640px) {
    .ct-billing { flex-wrap: wrap; }
    .ct-billing__text { flex: 1 1 calc(100% - 3.2rem); }
    .ct-billing__action { margin-left: 3.2rem; align-self: flex-start; }
}
.dark .ct-billing__icon { background: rgb(255 255 255 / 0.08); }
.ct-bank { margin: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.ct-bank__account { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ct-bank__holder { font-size: 0.9rem; opacity: 0.8; }
.ct-invoices__scroll { overflow-x: auto; }
.ct-invoices { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.ct-invoices th, .ct-invoices td { padding: 0.55rem 0.6rem; border-bottom: 1px solid rgb(120 113 108 / 0.2); text-align: left; vertical-align: top; }
.ct-invoices th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.7; }
.ct-invoices__num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ct-invoices__mono { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ct-invoices__note { font-size: 0.75rem; opacity: 0.7; }
.ct-invoices__empty { margin: 0; opacity: 0.75; }
.ct-invoices__status { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; }
.ct-invoices__status--unpaid { background: #fdf6e7; color: #b45309; }
.ct-invoices__status--overdue { background: #fdecec; color: #b91c1c; }
.ct-invoices__status--paid { background: #e8f6ec; color: #15803d; }
.ct-invoices__status--waived, .ct-invoices__status--cancelled { background: rgb(120 113 108 / 0.15); color: #57534e; }
.ct-invoices__proof { display: inline-block; margin-top: 0.35rem; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; }
.ct-invoices__proof--pending { background: #eaf1fe; color: #1d4ed8; }
.ct-invoices__proof--rejected { background: #fdecec; color: #b91c1c; }
.ct-invoices__reason { display: inline-block; max-width: 18rem; white-space: normal; }
.ct-invoices__links { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; white-space: nowrap; }
/* HP: tiap tagihan jadi kartu — judul kolom dari data-label di kiri, isinya
   di kanan — supaya status dan tombol Unduh PDF / Kirim bukti transfer
   terlihat tanpa menggeser tabel ke samping (HRD sering mengirim bukti
   dari HP). */
@media (max-width: 640px) {
    .ct-invoices__scroll { overflow-x: visible; }
    .ct-invoices thead { display: none; }
    .ct-invoices, .ct-invoices tbody, .ct-invoices tr { display: block; width: 100%; }
    .ct-invoices tr { border: 1px solid rgb(120 113 108 / 0.25); border-radius: 0.9rem; padding: 0.2rem 0.9rem; margin-bottom: 0.9rem; }
    .ct-invoices td { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.9rem; padding: 0.55rem 0; border-bottom: 1px solid rgb(120 113 108 / 0.14); text-align: right; }
    .ct-invoices tr td:last-child { border-bottom: 0; }
    .ct-invoices td::before { content: attr(data-label); flex: 0 0 auto; padding-top: 0.1rem; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.65; text-align: left; }
    .ct-invoices__val { min-width: 0; }
    .ct-invoices__reason { max-width: none; }
    .ct-invoices__links { align-items: flex-end; gap: 0.75rem; white-space: normal; }
}

/* --- spanduk pemberitahuan dari penyedia layanan (dasbor HRD) --------------
   Di atas notice tagihan. Biru = informasi, kuning = peringatan, merah =
   penting. Tombol Tutup per admin; isi mempertahankan baris baru. */
.ct-notices { display: flex; flex-direction: column; gap: 0.6rem; }
.ct-notice {
    display: flex; align-items: flex-start; gap: 0.85rem;
    padding: 0.8rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid;
    font-size: 0.875rem;
    line-height: 1.5;
}
.ct-notice--info { background: #eef4ff; border-color: #93c5fd; color: #1e3a8a; }
.ct-notice--warning { background: #fef3c7; border-color: #f59e0b; color: #78350f; }
.ct-notice--danger { background: #fee2e2; border-color: #f87171; color: #7f1d1d; }
.ct-notice__icon .fi-icon { width: 1.35rem; height: 1.35rem; margin-top: 0.1rem; }
.ct-notice__text { flex: 1; min-width: 0; }
.ct-notice__title { margin: 0; font-weight: 700; }
.ct-notice__meta { font-weight: 500; font-size: 0.78rem; opacity: 0.75; }
.ct-notice__body { margin: 0.2rem 0 0; overflow-wrap: anywhere; }
.ct-notice__close {
    flex: none; display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.8rem; font-weight: 600; color: inherit;
    padding: 0.25rem 0.5rem; border-radius: 0.5rem; background: rgb(255 255 255 / 0.5);
}
.ct-notice__close .fi-icon { width: 1rem; height: 1rem; }
.ct-notice__close:hover { background: rgb(255 255 255 / 0.85); }
.dark .ct-notice--info { background: rgb(59 130 246 / 0.14); border-color: rgb(96 165 250 / 0.5); color: #bfdbfe; }
.dark .ct-notice--warning { background: rgb(245 158 11 / 0.14); border-color: rgb(245 158 11 / 0.5); color: #fde68a; }
.dark .ct-notice--danger { background: rgb(248 113 113 / 0.14); border-color: rgb(248 113 113 / 0.5); color: #fecaca; }
.dark .ct-notice__close { background: rgb(255 255 255 / 0.08); }
.dark .ct-notice__close:hover { background: rgb(255 255 255 / 0.16); }
@media (max-width: 400px) {
    .ct-notice { flex-wrap: wrap; }
    .ct-notice__close { margin-left: auto; }
}

/* ======================================================================
   Kode verifikasi (OTP) — 11 Nov 2026
   Enam kotak angka di halaman masuk dan di modal Profil. Kotaknya besar
   dan tenang: orang mengetiknya sambil melihat email di layar lain.
   ====================================================================== */
.fi-one-time-code-input-ctn {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.625rem;
    width: 100%;
    max-width: 27rem;
    margin-inline: auto;
}
.fi-one-time-code-input-digit {
    width: 100%;
    height: 3.75rem;
    padding: 0;
    text-align: center;
    font-family: inherit;
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--ct-ink);
    background: #fff;
    border: 1.5px solid rgb(17 20 28 / 0.16);
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgb(17 20 28 / 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.fi-one-time-code-input-digit:focus,
.fi-one-time-code-input-digit:focus-visible {
    outline: none;
    border-color: rgb(var(--ct-gold));
    box-shadow: 0 0 0 4px rgb(var(--ct-gold) / 0.2);
    border-radius: 0.75rem;
}
/* Angka yang tersorot (kotak aktif menyorot isinya): emas tipis, angkanya
   tetap berwarna tinta — bukan sorotan bawaan peramban. */
.fi-one-time-code-input-digit::selection {
    background: rgb(var(--ct-gold) / 0.3);
    color: var(--ct-ink);
}
/* Mode gelap. Latar putih di atas menimpa pasangan gelap bawaan Filament,
   sedangkan --ct-ink menjadi hampir putih: angka putih di kotak putih
   (kontras 1,1 : 1, diukur 11 Nov). Latarnya tembus pandang supaya cocok di
   kartu masuk panel, kartu portal, dan modal Profil sekaligus. Aturan fokus
   ditulis ulang karena `.dark .kotak` dan `.kotak:focus` sama kuat. */
.dark .fi-one-time-code-input-digit {
    color: var(--ct-ink);
    background: rgb(255 255 255 / 0.06);
    border-color: rgb(255 255 255 / 0.2);
    box-shadow: none;
    color-scheme: dark;
}
.dark .fi-one-time-code-input-digit:focus,
.dark .fi-one-time-code-input-digit:focus-visible {
    background: rgb(var(--ct-gold) / 0.09);
    border-color: rgb(var(--ct-gold));
    box-shadow: 0 0 0 4px rgb(var(--ct-gold) / 0.24);
}
@media (max-width: 420px) {
    .fi-one-time-code-input-ctn { gap: 0.375rem; }
    .fi-one-time-code-input-digit { height: 3.25rem; font-size: 1.3125rem; border-radius: 0.625rem; }
}

/* Langkah kode di halaman masuk: tombol utama selebar kartu, "Kembali" di
   bawahnya sebagai tautan — bukan dua tombol berdampingan yang setara. */
#multiFactorChallengeForm .fi-ac.fi-width-full {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.75rem;
}
@media (prefers-reduced-motion: reduce) {
    .fi-one-time-code-input-digit { transition: none; }
}

/* --- Profil: keamanan masuk --------------------------------------------- */
.ct-sec { display: grid; gap: 0.75rem; }
.ct-sec__status {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--ct-line);
    border-radius: 0.75rem;
    background: rgb(17 20 28 / 0.025);
}
.ct-sec__status--active { background: rgb(22 163 74 / 0.06); border-color: rgb(22 163 74 / 0.28); }
.ct-sec__status--pending { background: rgb(var(--ct-gold) / 0.09); border-color: rgb(var(--ct-gold) / 0.4); }
.ct-sec__dot {
    flex: none;
    width: 0.625rem;
    height: 0.625rem;
    margin-top: 0.4rem;
    border-radius: 999px;
    background: var(--ct-muted);
}
.ct-sec__status--active .ct-sec__dot { background: rgb(22 163 74); box-shadow: 0 0 0 4px rgb(22 163 74 / 0.16); }
.ct-sec__status--pending .ct-sec__dot { background: rgb(var(--ct-gold)); box-shadow: 0 0 0 4px rgb(var(--ct-gold) / 0.2); }
.ct-sec__title { font-size: 0.9375rem; font-weight: 700; color: var(--ct-ink); }
.ct-sec__text { margin-top: 0.15rem; font-size: 0.875rem; line-height: 1.55; color: var(--ct-muted); overflow-wrap: anywhere; }
.ct-sec__heading {
    margin-top: 0.375rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ct-muted);
}
.ct-sec__browser {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--ct-line);
    border-radius: 0.75rem;
    background: #fff;
}
.ct-sec__browser-name { font-size: 0.9375rem; font-weight: 600; color: var(--ct-ink); }
.ct-sec__browser-meta { margin-top: 0.1rem; font-size: 0.8125rem; color: var(--ct-muted); }
.ct-sec__badge {
    flex: none;
    padding: 0.2rem 0.625rem;
    border: 1px solid rgb(var(--ct-gold) / 0.45);
    border-radius: 999px;
    background: rgb(var(--ct-gold) / 0.14);
    color: #8a5a06;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Mode gelap untuk bagian "Keamanan masuk". Urutan penting: aturan dasar
   dulu, baru warna status, supaya hijau/emasnya tidak tertimpa. */
.dark .ct-sec__status { background: rgb(255 255 255 / 0.03); }
.dark .ct-sec__status--active { background: rgb(74 222 128 / 0.08); border-color: rgb(74 222 128 / 0.3); }
.dark .ct-sec__status--pending { background: rgb(var(--ct-gold) / 0.1); border-color: rgb(var(--ct-gold) / 0.4); }
.dark .ct-sec__status--active .ct-sec__dot { background: #4ade80; box-shadow: 0 0 0 4px rgb(74 222 128 / 0.18); }
.dark .ct-sec__browser { background: rgb(255 255 255 / 0.04); }
.dark .ct-sec__badge {
    color: rgb(var(--ct-gold-bright));
    background: rgb(var(--ct-gold) / 0.16);
    border-color: rgb(var(--ct-gold) / 0.5);
}

/* ======================================================================
   Kerapian panel HRD — audit 11 Nov 2026
   ====================================================================== */

/* Kolom catatan/alasan di tabel. Kolom teks yang dibungkus menyusut sampai
   selebar kata terpanjang begitu tabel lebih lebar dari layar ("Catatan"
   119 px → 7 baris, satu baris tabel setinggi 200 px). */
.ct-col-note { min-width: 18rem; }
@media (max-width: 640px) {
    .ct-col-note { min-width: 14rem; }
}

/* Mode gelap, panel HRD saja. Palet abu panel ini dibuat dari satu warna
   (#78716C): tingkat 900-nya oklch(0.39), abu-abu sedang. Permukaan bawaan
   Filament yang tidak kita timpa sendiri — jendela modal, menu tarik-turun,
   bilah tab, pemberitahuan — karena itu tampil abu-abu terang di atas halaman
   gelap. Tiga tingkat tergelap disamakan dengan warna gelap panel. Portal
   memakai palet Slate (sudah gelap) dan tidak disentuh. Ditaruh di <html>
   supaya juga berlaku untuk variabel turunan yang dihitung di :root. */
html.dark:has(.fi-panel-admin) {
    --gray-800: #1f232c;
    --gray-900: #171a21;
    --gray-950: #0f1115;
}