/* =====================================================================
   Custom look & feel for the Geo Anfa Training CMS (Filament panel).
   Loaded via FilamentAsset::register() in AppServiceProvider.
   ===================================================================== */

/* ---------- LOGIN / SIMPLE PAGES ----------
   Latar halaman login (filament/login-latar, BODY_START berscope Login):
   gradasi teal-slate + album foto galeri buram yang bergerak pelan + garis
   kontur (hero-kontur.svg, sama dengan hero situs) + strip logo klien.
   Animasi hanya transform; blur dipasang per FOTO (bukan pada wadah yang
   bergerak) supaya foto diburamkan sekali, lalu kolomnya cukup digeser GPU. */
.fi-simple-layout {
    background:
        radial-gradient(circle at 15% 15%, rgba(20, 184, 166, 0.45) 0%, transparent 42%),
        radial-gradient(circle at 85% 85%, rgba(15, 118, 110, 0.55) 0%, transparent 48%),
        linear-gradient(135deg, #042f2e 0%, #0f172a 55%, #020617 100%);
    min-height: 100vh;
}

/* Ada latar login → gradasinya pindah ke lapisan latar (di bawah album). */
body:has(> .gl-latar) .fi-simple-layout {
    position: relative;
    z-index: 1;
    background: transparent;
}

.gl-latar {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    background:
        radial-gradient(circle at 15% 15%, rgba(20, 184, 166, 0.45) 0%, transparent 42%),
        radial-gradient(circle at 85% 85%, rgba(15, 118, 110, 0.55) 0%, transparent 48%),
        linear-gradient(135deg, #042f2e 0%, #0f172a 55%, #020617 100%);
}

/* Album: kolom foto miring, bergerak naik/turun bergantian. */
.gl-album {
    position: absolute;
    inset: -25% -10%;
    display: flex;
    justify-content: center;
    gap: 22px;
    transform: rotate(-9deg);
    animation: glMuncul 1.6s ease-out both;
}

.gl-kolom {
    flex: 0 0 clamp(200px, 24vw, 340px);
    animation: glGeser 90s linear infinite;
    will-change: transform;
}

.gl-kolom--2 {
    animation-duration: 110s;
    animation-direction: reverse;
    margin-top: -120px;
}

.gl-kolom--3 {
    animation-duration: 75s;
}

/* margin (bukan gap) supaya tinggi deret ganda = tepat 2 × satu deret:
   geser -50% kembali ke posisi awal tanpa sentakan. */
.gl-kolom img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    margin-bottom: 22px;
    border-radius: 18px;
    filter: blur(5px) saturate(1.05);
    opacity: 0.8;
}

/* Tirai: meredupkan album ke warna merek, lebih gelap di tepi. */
.gl-tirai {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 70% at 50% 50%, rgba(2, 6, 23, 0.1) 0%, rgba(2, 6, 23, 0.6) 100%),
        linear-gradient(135deg, rgba(4, 47, 46, 0.62) 0%, rgba(15, 23, 42, 0.42) 55%, rgba(2, 6, 23, 0.75) 100%);
}

/* Garis kontur peta (identitas geospasial), bergeser sangat pelan. */
.gl-kontur {
    position: absolute;
    inset: -4%;
    background-color: #5eead4;
    opacity: 0.16;
    -webkit-mask: url(hero-kontur.svg) center / cover no-repeat;
            mask: url(hero-kontur.svg) center / cover no-repeat;
    animation: glKontur 40s ease-in-out infinite alternate;
}

/* Strip logo klien di dasar layar (pola hero beranda). */
.gl-klien {
    position: absolute;
    inset: auto 0 0;
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 28px clamp(16px, 4vw, 48px) 18px;
    background: linear-gradient(to top, rgba(2, 6, 23, 0.75), transparent);
}

.gl-klien-label {
    flex: none;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.gl-klien-jalur {
    flex: 1;
    min-width: 0;
    display: flex;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.gl-klien-deret {
    flex: none;
    display: flex;
    align-items: center;
    gap: 22px;
    padding-right: 22px;
    animation: glKlien var(--durasi, 50s) linear infinite;
}

/* Logo klien umumnya bertulisan gelap: diberi alas terang. */
.gl-klien-deret img {
    height: 34px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    padding: 5px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    opacity: 0.85;
}

/* Strip menempel di dasar: beri ruang supaya kartu tidak tertutup di layar pendek. */
body:has(.gl-klien) .fi-simple-main-ctn {
    padding-bottom: 72px;
}

@keyframes glGeser { to { transform: translateY(-50%); } }
@keyframes glKlien { to { transform: translateX(-100%); } }
@keyframes glKontur { to { transform: translate(-2%, 1.5%) scale(1.05); } }
@keyframes glMuncul { from { opacity: 0; } }

/* Kartu login: kaca di atas album. */
.fi-simple-main {
    position: relative;
    z-index: 1;
    border-radius: 1.25rem !important;
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(20, 184, 166, 0.18);
    backdrop-filter: blur(4px);
}

body:has(> .gl-latar) .fi-simple-layout .fi-simple-main {
    background: rgba(255, 255, 255, 0.93);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
            backdrop-filter: blur(18px) saturate(1.2);
    box-shadow: 0 30px 80px -24px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.dark body:has(> .gl-latar) .fi-simple-layout .fi-simple-main {
    background: rgba(15, 23, 42, 0.8);
    box-shadow: 0 30px 80px -24px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(94, 234, 212, 0.16);
}

/* Di bawah form: catatan akun (tanpa pendaftaran) + kembali ke situs. */
.gl-bawah {
    margin-top: 0.25rem;
    display: grid;
    gap: 1rem;
    justify-items: center;
}

.gl-catatan {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    width: 100%;
    margin: 0;
    padding: 0.65rem 0.85rem;
    border-radius: 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: #475569;
    background: rgba(20, 184, 166, 0.08);
    box-shadow: inset 0 0 0 1px rgba(20, 184, 166, 0.18);
}

.gl-catatan svg {
    flex: none;
    margin-top: 0.1rem;
    color: #0d9488;
}

.dark .gl-catatan {
    color: #cbd5e1;
    background: rgba(45, 212, 191, 0.08);
}

.dark .gl-catatan svg {
    color: #2dd4bf;
}

.gl-kembali {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #0d9488;
    text-decoration: none;
}

.gl-kembali:hover {
    text-decoration: underline;
}

.dark .gl-kembali {
    color: #2dd4bf;
}

/* HP: dua kolom album, blur lebih ringan, kartu bergutter 16px (bukan menempel tepi). */
@media (max-width: 639px) {
    .gl-album {
        gap: 14px;
    }

    .gl-kolom {
        flex-basis: 52vw;
    }

    .gl-kolom--3 {
        display: none;
    }

    .gl-kolom img {
        margin-bottom: 14px;
        border-radius: 14px;
        filter: blur(4px) saturate(0.9);
    }

    .gl-klien {
        padding-block: 22px 12px;
    }

    .gl-klien-label {
        display: none;
    }

    .gl-klien-deret img {
        height: 28px;
        max-width: 96px;
    }

    body:has(> .gl-latar) .fi-simple-main-ctn {
        padding-inline: 16px;
    }

    body:has(> .gl-latar) .fi-simple-main {
        padding-inline: 1.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gl-album,
    .gl-kolom,
    .gl-kontur,
    .gl-klien-deret {
        animation: none;
    }
}

/* Logo bigger & centered on the login card */
.fi-simple-layout .fi-logo {
    margin-inline: auto;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.15));
}

/* Accent bar on top of the login card */
.fi-simple-main::before {
    content: "";
    display: block;
    height: 4px;
    width: 60px;
    margin: 0 auto 1.25rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #14b8a6, #f59e0b);
}

/* =====================================================================
   TEMA PANEL (Okt 2026) — keluarga situs & halaman login.
   Acuan: style.css §1 (Inter + Montserrat, kartu kaca, radius besar),
   §34 .pita-gelap (gradasi slate → aksen + garis kontur) dan login § LOGIN.

   ATURAN: warna aksen SELALU lewat variabel Filament (--primary-*, triplet
   RGB dari ->colors() tiap panel) — jangan hex teal. Struktur sama di tiga
   mode, aksennya ikut panel: Training teal, TaxSys indigo, Web CMS amber.
   Dijaga TemaPanelTest. Dashboard TaxSys (.tx-*) tidak disentuh di sini.
   =================================================================== */

/* Latar isi: slate sangat muda + cahaya aksen samar di pojok. */
html:not(.dark) .fi-body {
    background-color: #f8fafc;
    background-image:
        radial-gradient(60rem 30rem at 100% -10%, rgba(var(--primary-400), 0.10), transparent 70%),
        radial-gradient(40rem 24rem at 0% 110%, rgba(var(--primary-300), 0.08), transparent 70%);
    background-attachment: fixed;
}

/* Judul halaman & angka: Montserrat seperti judul situs (dimuat PanelBersama). */
.fi-header-heading,
.fi-modal-heading,
.fi-wi-stats-overview-stat-value,
.fi-simple-header-heading {
    font-family: 'Montserrat', 'Inter', ui-sans-serif, system-ui, sans-serif;
    letter-spacing: -0.015em;
}

/* Batang aksen di bawah judul halaman (pola .page-body h2::before situs). */
.fi-header-heading::after {
    content: '';
    display: block;
    width: 44px;
    height: 4px;
    margin-top: 0.6rem;
    border-radius: 999px;
    background: linear-gradient(90deg, rgb(var(--primary-500)), rgb(var(--primary-300)));
}

/* ---------- Bilah atas: kaca buram ----------
   Latar & blur sengaja di ::before, JANGAN di nav sendiri. backdrop-filter
   (juga filter/transform/will-change/contain) menjadikan nav containing block
   bagi elemen fixed; menu pengguna Filament (dropdown `teleport` = fixed)
   lalu dibatasi .fi-topbar (overflow-x-clip, 64 px) dan `flip` memilih sisi
   yang lebih lega — avatar bergeser 1–2 px saja, menu terbuka ke ATAS di luar
   layar (TaxSys & Web CMS, Okt 2026). Dijaga TemaPanelTest. */
.fi-body .fi-topbar > nav {
    position: relative;
    isolation: isolate;
    background-color: transparent;
    box-shadow: 0 1px 0 rgba(var(--primary-500), 0.18), 0 6px 24px -18px rgba(15, 23, 42, 0.35);
}

.fi-body .fi-topbar > nav::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    backdrop-filter: saturate(1.4) blur(12px);
}

.dark .fi-body .fi-topbar > nav {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

.dark .fi-body .fi-topbar > nav::before {
    background-color: rgba(15, 23, 42, 0.72);
}

/* ---------- Menu samping: pita gelap bergaris kontur ---------- */
.fi-body aside.fi-sidebar {
    background: linear-gradient(165deg, #0f172a 0%, rgb(var(--primary-950)) 62%, rgb(var(--primary-800)) 145%);
    color-scheme: dark;
}

.dark .fi-body aside.fi-sidebar {
    background: linear-gradient(165deg, #020617 0%, rgb(var(--primary-950)) 70%, rgb(var(--primary-900)) 145%);
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.06);
}

.fi-body aside.fi-sidebar::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-color: rgb(var(--primary-300));
    opacity: 0.07;
    -webkit-mask: url(hero-kontur.svg) center top / 900px auto repeat-y;
    mask: url(hero-kontur.svg) center top / 900px auto repeat-y;
}

.fi-body aside.fi-sidebar > * {
    position: relative;
}

/* iPad (Okt 2026, keluhan direktur): Filament memberi menu samping `h-screen` = 100vh.
   Di Safari iPad 100vh = tinggi layar SAAT bilah alamat tersembunyi, jadi dasar menu
   terbenam di bawah bilah alat dan grup terakhir (Akun, Pengawasan) tak bisa digulir
   ke layar. 100dvh = tinggi yang benar-benar terlihat; dua baris di atasnya cadangan
   untuk peramban lama (yang tak paham baris berikutnya memakai baris sebelumnya). */
.fi-body aside.fi-sidebar {
    height: 100vh;
    height: -webkit-fill-available;
    height: 100dvh;
    max-height: 100dvh;
}

/* Laci tertutup (HP/tablet) digeser -100%, tetapi pembulatan sub-piksel
   menyisakan garis 1px di tepi kiri layar — dulu putih jadi tak terlihat,
   sekarang gelap. Potong tepinya selama laci tertutup. */
@media (max-width: 1023px) {
    .fi-body aside.fi-sidebar:not(.fi-sidebar-open) {
        clip-path: inset(0 2px 0 0);
    }
}

.fi-body .fi-sidebar .fi-sidebar-header {
    background: transparent;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* ---------- Merek panel (filament/merek): tiruan logo navbar situs ----------
   Gambar + nama (Montserrat 800) + baris aksen. Bawaan = di atas latar terang
   (kartu login); di menu samping gelap = gaya navbar situs mode gelap. */
.ge-merek {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    height: 100%;
    min-width: 0;
}

.ge-merek__logo {
    height: 2.6rem;
    width: auto;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.ge-merek__teks {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.1;
    text-align: start;
}

.ge-merek__nama {
    font-family: 'Montserrat', 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: 0;
    color: rgb(var(--gray-900));
    white-space: nowrap;
}

.ge-merek__sub {
    margin-top: 0.1rem;
    font-weight: 600;
    font-size: 0.74rem;
    letter-spacing: 1.5px;
    color: rgb(var(--primary-600));
    white-space: nowrap;
}

.dark .ge-merek__nama,
.fi-body .fi-sidebar .ge-merek__nama {
    color: #ffffff;
}

.dark .ge-merek__sub,
.fi-body .fi-sidebar .ge-merek__sub {
    color: rgb(var(--primary-400));
}

.fi-body .fi-sidebar .ge-merek__logo,
.dark .ge-merek__logo {
    filter: drop-shadow(0 2px 4px rgba(255, 255, 255, 0.2));
}

.fi-body .fi-sidebar .fi-sidebar-header .fi-icon-btn,
.fi-body .fi-sidebar .fi-sidebar-group-collapse-button {
    color: #94a3b8;
}

.fi-body .fi-sidebar .fi-sidebar-header .fi-icon-btn:hover,
.fi-body .fi-sidebar .fi-sidebar-group-collapse-button:hover {
    color: #f8fafc;
    background-color: rgba(255, 255, 255, 0.06);
}

/* Label grup = eyebrow situs (.sub-heading): kecil, huruf besar, renggang. */
.fi-body .fi-sidebar .fi-sidebar-group-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.85);
}

.fi-body .fi-sidebar .fi-sidebar-group-icon {
    color: rgba(148, 163, 184, 0.85);
}

.fi-body .fi-sidebar .fi-sidebar-item .fi-sidebar-item-label {
    color: #cbd5e1;
}

.fi-body .fi-sidebar .fi-sidebar-item .fi-sidebar-item-icon {
    color: #64748b;
}

.fi-body .fi-sidebar .fi-sidebar-item .fi-sidebar-item-button {
    transition: background-color 0.2s, box-shadow 0.2s;
}

.fi-body .fi-sidebar .fi-sidebar-item .fi-sidebar-item-button:hover,
.fi-body .fi-sidebar .fi-sidebar-item .fi-sidebar-item-button:focus-visible {
    background-color: rgba(255, 255, 255, 0.06);
}

.fi-body .fi-sidebar .fi-sidebar-item .fi-sidebar-item-button:hover .fi-sidebar-item-label {
    color: #f8fafc;
}

.fi-body .fi-sidebar .fi-sidebar-item .fi-sidebar-item-button:hover .fi-sidebar-item-icon {
    color: #cbd5e1;
}

/* Menu aktif: pil aksen + garis kiri, seperti kartu terpilih di situs. */
.fi-body .fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-button {
    background-color: rgba(var(--primary-400), 0.16);
    box-shadow: inset 3px 0 0 rgb(var(--primary-400));
}

.fi-body .fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-label {
    color: #fff;
    font-weight: 600;
}

.fi-body .fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: rgb(var(--primary-300));
}

.fi-body .fi-sidebar .fi-sidebar-item-grouped-border > div {
    background-color: rgba(255, 255, 255, 0.14);
}

/* Batang gulir menu samping: tipis dan tanpa lintasan.
   Bawaan peramban menggambar lajur abu-abu selebar 15px dari bawah kepala panel
   sampai dasar layar — tampak seperti garis yang menembus ke kepala dan
   memisahkan menu dari isinya. Dengan lintasan transparan yang tersisa hanya
   jempolnya, dan itu pun baru jelas saat menu disentuh kursor. Menu samping
   kini selalu gelap, jadi satu warna untuk mode terang & gelap. */
.fi-sidebar-nav {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.25) transparent;
    /* Item terakhir tidak tertutup indikator home iPad/iPhone; gulir menu tidak
       ikut menyeret halaman di belakangnya. */
    padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.fi-sidebar-nav:hover {
    scrollbar-color: rgba(148, 163, 184, 0.55) transparent;
}

/* ---------- Kartu: section, widget, tabel ---------- */
.fi-section:not(.fi-aside),
.fi-wi-stats-overview-stat,
.fi-ta-ctn {
    border-radius: 1rem;
}

.fi-body .fi-section:not(.fi-aside),
.fi-body .fi-wi-stats-overview-stat,
.fi-body .fi-ta-ctn {
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06), 0 8px 30px -12px rgba(15, 23, 42, 0.10);
}

.dark .fi-body .fi-section:not(.fi-aside),
.dark .fi-body .fi-wi-stats-overview-stat,
.dark .fi-body .fi-ta-ctn {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 30px -14px rgba(0, 0, 0, 0.6);
}

/* Section bersarang (mis. kategori RAB) cukup bergaris tipis. */
.fi-body .fi-section .fi-section:not(.fi-aside) {
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06);
}

.dark .fi-body .fi-section .fi-section:not(.fi-aside) {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07);
}

/* Statistik: garis aksen di puncak kartu. */
.fi-body .fi-wi-stats-overview-stat {
    position: relative;
    overflow: hidden;
}

.fi-body .fi-wi-stats-overview-stat::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, rgb(var(--primary-500)), rgb(var(--primary-300)), transparent);
}

/* ---------- Tabel ---------- */
.fi-body .fi-ta-table > thead > tr {
    background-color: rgba(var(--primary-500), 0.06);
}

.dark .fi-body .fi-ta-table > thead > tr {
    background-color: rgba(var(--primary-400), 0.08);
}

.fi-body .fi-ta-table > tbody > tr:hover {
    background-color: rgba(var(--primary-500), 0.035);
}

.dark .fi-body .fi-ta-table > tbody > tr:hover {
    background-color: rgba(var(--primary-400), 0.06);
}

/* ---------- Tombol utama: gradasi aksen (ikon .service-icon situs) ---------- */
.fi-body .fi-btn.fi-color-primary:not(.fi-btn-outlined):not([disabled]) {
    background-image: linear-gradient(145deg, rgb(var(--primary-500)), rgb(var(--primary-700)));
    box-shadow: 0 8px 18px -10px rgba(var(--primary-600), 0.75);
}

.fi-body .fi-btn.fi-color-primary:not(.fi-btn-outlined):not([disabled]):hover {
    background-image: linear-gradient(145deg, rgb(var(--primary-400)), rgb(var(--primary-600)));
}

/* ---------- Sapaan dasbor (filament/dasbor-sapaan) ---------- */
.ge-sapaan {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    padding: 1.5rem 1.75rem;
    border-radius: 1.25rem;
    overflow: hidden;
    color: #cbd5e1;
    background: linear-gradient(135deg, #0f172a 0%, rgb(var(--primary-950)) 58%, rgb(var(--primary-700)) 135%);
    box-shadow: 0 30px 60px -34px rgba(15, 23, 42, 0.7);
}

.dark .ge-sapaan {
    background: linear-gradient(135deg, #020617 0%, rgb(var(--primary-950)) 62%, rgb(var(--primary-800)) 140%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.ge-sapaan::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-color: rgb(var(--primary-300));
    opacity: 0.1;
    -webkit-mask: url(hero-kontur.svg) right center / 1100px auto no-repeat;
    mask: url(hero-kontur.svg) right center / 1100px auto no-repeat;
}

.ge-sapaan > * {
    position: relative;
}

.ge-sapaan__teks {
    display: grid;
    gap: 0.3rem;
    min-width: 0;
}

.ge-sapaan__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgb(var(--primary-300));
}

.ge-sapaan__eyebrow::before {
    content: '';
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
}

.ge-sapaan__judul {
    margin: 0;
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: clamp(1.25rem, 2.4vw, 1.75rem);
    font-weight: 700;
    line-height: 1.2;
    color: #f8fafc;
}

.ge-sapaan__sub {
    margin: 0;
    font-size: 0.875rem;
    color: #94a3b8;
}

.ge-sapaan__tanggal {
    display: grid;
    justify-items: end;
    gap: 0.1rem;
    padding: 0.7rem 1rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    text-align: end;
}

.ge-sapaan__hari {
    font-size: 0.75rem;
    color: #94a3b8;
}

.ge-sapaan__tgl {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #f8fafc;
}

@media (max-width: 640px) {
    .ge-sapaan {
        padding: 1.25rem;
    }

    .ge-sapaan__tanggal {
        justify-items: start;
        text-align: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fi-body .fi-sidebar .fi-sidebar-item .fi-sidebar-item-button {
        transition: none;
    }
}

/* ===================================================================
   Pengalih mode (Training / TaxSys / Web CMS) — bilah atas panel.
   Warna tiap pil = warna utama panelnya (Teal / Indigo / Amber).
   =================================================================== */
.ge-mode {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem;
    margin-inline-start: 0.5rem;
    border-radius: 999px;
    background: rgba(100, 116, 139, 0.12);
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.ge-mode::-webkit-scrollbar {
    display: none;
}

.ge-mode__pil {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    color: rgb(71, 85, 105);
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s;
}

.ge-mode__pil:hover {
    background: rgba(100, 116, 139, 0.15);
}

.ge-mode__ikon {
    width: 1rem;
    height: 1rem;
}

.ge-mode__pil.is-aktif {
    color: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.2);
}

.ge-mode__pil--admin.is-aktif { background: #0d9488; }
.ge-mode__pil--pajak.is-aktif { background: #4f46e5; }
.ge-mode__pil--web.is-aktif { background: #d97706; }
/* Pendaftaran = Color::Sky panelnya (dulu tanpa warna → pil aktif tampak putih polos). */
.ge-mode__pil--pendaftaran.is-aktif { background: #0284c7; }

.dark .ge-mode {
    background: rgba(148, 163, 184, 0.12);
}

.dark .ge-mode__pil {
    color: rgb(203, 213, 225);
}

.dark .ge-mode__pil.is-aktif {
    color: #fff;
}

/* Pil berlabel tidak muat (diukur skrip di pengalih-mode.blade.php, lebar berapa pun):
   label hanya pada pil aktif, sisanya ikon (nama di title/aria-label). */
.ge-mode.is-ringkas .ge-mode__pil {
    padding: 0.45rem 0.65rem;
}

.ge-mode.is-ringkas .ge-mode__pil:not(.is-aktif) span {
    display: none;
}

/* Di HP hanya ikon + label pendek; pil tetap bisa disentuh dengan jempol.
   Cadangan tanpa JS — dengan JS, is-ringkas di atas sudah mengurusnya. */
@media (max-width: 640px) {
    .ge-mode {
        margin-inline-start: 0.25rem;
    }

    .ge-mode__pil {
        padding: 0.45rem 0.65rem;
    }

    .ge-mode__pil:not(.is-aktif) span {
        display: none;
    }
}

/* =====================================================================
   RAB dinamis (menu List Harga) — iPad & HP.
   Repeater RAB memakai grid 12 kolom (uraian 5, volume 2, satuan 3,
   tag 2). Di tablet 768–1024 uraian diberi baris sendiri supaya volume
   & satuan tidak kejepit; di HP semuanya menumpuk rapi + tombol
   tambah/hapus tetap mudah disentuh jempol.
   =================================================================== */
@media (max-width: 1024px) {
    .ge-rab .fi-repeater-item {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }

    .ge-rab .fi-repeater-item > *:nth-child(2) {
        grid-column: span 6 / span 6 !important;
    }

    .ge-rab .fi-repeater-item > *:nth-child(n+3) {
        grid-column: span 2 / span 2 !important;
    }
}

@media (max-width: 640px) {
    .ge-rab .fi-repeater-item {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0.5rem;
    }

    .ge-rab .fi-repeater-item > * {
        grid-column: span 1 / span 1 !important;
    }

    .ge-rab .fi-input,
    .ge-rab select {
        font-size: 1rem;
    }

    .ge-rab .fi-repeater-add,
    .ge-rab .fi-repeater-item-remove {
        min-height: 2.75rem;
    }

    /* Bilah atas panel di HP: tombol menu + pengalih mode tidak bertumpuk.
       Filament mengunci tingginya (h-16); begitu isinya turun ke baris kedua
       (kotak Cari TaxSys) baris itu keluar dari latar kaca. Tinggi mengikuti isi. */
    .fi-topbar > nav {
        flex-wrap: wrap;
        row-gap: 0.5rem;
        height: auto;
        min-height: 4rem;
        padding-block: 0.6rem;
    }

    /* Panel berpencarian global (TaxSys): baris 1 = pengalih mode, ☰, avatar
       di kanan; baris 2 = kotak Cari selebar layar. Wadah kanan Filament
       (pencarian + avatar) dilebur supaya keduanya bisa diatur sendiri. */
    .fi-topbar > nav > div:has(> .fi-user-menu) {
        display: contents;
    }

    .fi-topbar > nav .fi-user-menu {
        order: 2;
        margin-inline-start: auto;
    }

    .fi-topbar > nav .fi-global-search {
        order: 3;
        flex: 1 0 100%;
    }

    .fi-topbar > nav .fi-global-search > div,
    .fi-topbar > nav .fi-global-search-field {
        width: 100%;
    }

    .fi-topbar .fi-breadcrumbs {
        overflow-x: auto;
        max-width: 100%;
    }
}

/* =====================================================================
   RINGKASAN RAB (List Harga) — resources/views/filament/harga/ringkasan.
   Satu view untuk panel kanan form (live) dan halaman Lihat. Warna aksen
   dari variabel Filament (--primary-*), jadi sadar mode gelap.
   =================================================================== */
.ge-rabr {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: rgb(var(--gray-700));
}

.dark .ge-rabr {
    color: rgb(var(--gray-300));
}

.ge-rabr__kepala {
    position: relative;
    display: grid;
    gap: 0.15rem;
    padding: 1rem 1.1rem 1.1rem;
    margin-bottom: 0.85rem;
    border-radius: 0.9rem;
    color: #e2e8f0;
    background: linear-gradient(140deg, #0f172a 0%, rgb(var(--primary-900)) 70%, rgb(var(--primary-700)) 135%);
    overflow: hidden;
}

.ge-rabr__eyebrow {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(var(--primary-300));
}

.ge-rabr__label {
    margin-top: 0.35rem;
    font-size: 0.75rem;
    color: #94a3b8;
}

.ge-rabr__laba {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    color: #f8fafc;
    font-variant-numeric: tabular-nums;
}

.ge-rabr__laba.is-rugi {
    color: #fca5a5;
}

.ge-rabr__margin {
    font-size: 0.75rem;
    color: #cbd5e1;
}

.ge-rabr__bar {
    display: block;
    height: 4px;
    margin-top: 0.6rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.25);
    overflow: hidden;
}

.ge-rabr__bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgb(var(--primary-400)), #f59e0b);
}

.ge-rabr__daftar,
.ge-rabr__pajak {
    margin: 0;
}

.ge-rabr__baris {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.3rem 0;
}

.ge-rabr__baris dt {
    min-width: 0;
}

.ge-rabr__baris dt small {
    display: block;
    font-size: 0.6875rem;
    color: rgb(var(--gray-500));
}

.ge-rabr__baris dd {
    margin: 0;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ge-rabr__baris.is-tebal {
    font-weight: 700;
    color: rgb(var(--gray-950));
}

.dark .ge-rabr__baris.is-tebal {
    color: #fff;
}

.ge-rabr__baris.is-garis {
    margin-top: 0.3rem;
    padding-top: 0.55rem;
    border-top: 1px solid rgb(var(--gray-200));
}

.dark .ge-rabr__baris.is-garis {
    border-top-color: rgb(var(--gray-700));
}

.ge-rabr__baris.is-redup,
.ge-rabr__baris.is-nol {
    color: rgb(var(--gray-400));
}

.ge-rabr__kode {
    display: inline-grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    margin-inline-end: 0.3rem;
    border-radius: 0.35rem;
    font-size: 0.6875rem;
    font-weight: 700;
    color: rgb(var(--primary-700));
    background: rgb(var(--primary-50));
}

.dark .ge-rabr__kode {
    color: rgb(var(--primary-300));
    background: rgba(var(--primary-500), 0.15);
}

.ge-rabr__subjudul {
    display: block;
    margin: 0.85rem 0 0.2rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(var(--primary-600));
}

.dark .ge-rabr__subjudul {
    color: rgb(var(--primary-400));
}

.ge-rabr__kategori {
    border-top: 1px solid rgb(var(--gray-200));
}

.dark .ge-rabr__kategori {
    border-top-color: rgb(var(--gray-800));
}

.ge-rabr__kategori summary {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0;
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}

.ge-rabr__kategori summary::-webkit-details-marker {
    display: none;
}

.ge-rabr__kategori table {
    width: 100%;
    margin-bottom: 0.6rem;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.ge-rabr__kategori th,
.ge-rabr__kategori td {
    padding: 0.3rem 0.4rem;
    text-align: right;
    border-bottom: 1px solid rgb(var(--gray-100));
}

.dark .ge-rabr__kategori th,
.dark .ge-rabr__kategori td {
    border-bottom-color: rgb(var(--gray-800));
}

.ge-rabr__kategori th:first-child,
.ge-rabr__kategori td:first-child {
    text-align: left;
}

.ge-rabr__kategori th {
    font-size: 0.6875rem;
    font-weight: 600;
    color: rgb(var(--gray-500));
}

.ge-rabr__rezim {
    margin-top: 0.55rem;
    font-size: 0.6875rem;
    color: rgb(var(--primary-200));
}

.ge-rabr__catatan {
    margin: 0.5rem 0 0;
    font-size: 0.75rem;
    font-weight: 400;
    color: rgb(var(--gray-500));
}

/* ---- Modal Rangkuman (lengkap): KPI selebar modal + dua kolom ----
   Dulu satu kolom memanjang di kiri, kanan kosong (keluhan direktur). */
.ge-rabr--lengkap {
    width: 100%;
    font-size: 0.875rem;
}

.ge-rabr__kpi {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.ge-rabr__tile {
    display: grid;
    align-content: start;
    gap: 0.2rem;
    min-width: 0;
    padding: 0.9rem 1rem;
    border-radius: 0.9rem;
    background: rgb(var(--gray-50));
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}

.dark .ge-rabr__tile {
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.ge-rabr__tile-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(var(--gray-500));
}

.ge-rabr__tile-angka {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.2;
    color: rgb(var(--gray-950));
    font-variant-numeric: tabular-nums;
}

.dark .ge-rabr__tile-angka {
    color: #f8fafc;
}

.ge-rabr__tile-rezim {
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.35;
    color: rgb(var(--primary-700));
}

.dark .ge-rabr__tile-rezim {
    color: rgb(var(--primary-300));
}

.ge-rabr__tile-sub {
    font-size: 0.75rem;
    color: rgb(var(--gray-500));
}

/* Laba = kartu gelap seperti kepala ringkasan form. */
.ge-rabr__tile--laba {
    color: #cbd5e1;
    background: linear-gradient(140deg, #0f172a 0%, rgb(var(--primary-900)) 70%, rgb(var(--primary-700)) 135%);
    box-shadow: none;
}

.dark .ge-rabr__tile--laba {
    background: linear-gradient(140deg, #020617 0%, rgb(var(--primary-950)) 70%, rgb(var(--primary-800)) 135%);
}

.ge-rabr__tile--laba .ge-rabr__tile-label {
    color: rgb(var(--primary-300));
}

.ge-rabr__tile--laba .ge-rabr__tile-angka {
    color: #f8fafc;
}

.ge-rabr__tile--laba .ge-rabr__tile-sub {
    color: #cbd5e1;
}

.ge-rabr__tile-angka.is-rugi,
.ge-rabr__tile--laba .ge-rabr__tile-angka.is-rugi {
    color: #fca5a5;
}

.ge-rabr__tile .ge-rabr__bar {
    margin-top: 0.4rem;
}

.ge-rabr__kolom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.25rem 2rem;
    align-items: start;
}

.ge-rabr__panel > .ge-rabr__subjudul:first-child {
    margin-top: 0;
}

.ge-rabr__baris.is-laba {
    font-size: 1rem;
    color: rgb(var(--primary-700));
}

.dark .ge-rabr__baris.is-laba {
    color: rgb(var(--primary-300));
}

.ge-rabr__baris.is-laba.is-rugi {
    color: rgb(var(--danger-600));
}

@media (max-width: 1023px) {
    .ge-rabr__kpi {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .ge-rabr__kolom {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 479px) {
    .ge-rabr__kpi {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Editor isi surat TaxSys (Summernote lite) — lihat EditorSurat. */
.ge-editor-surat .note-editor { border-radius: .5rem; background: #fff; color: #111827; }
.ge-editor-surat .note-editable { font-family: 'Times New Roman', Times, serif; font-size: 15px; line-height: 1.5; }

/* =====================================================================
   HP & tablet — seluruh panel (Okt 2026).
   Tabel Filament di HP digulir ke samping; tombol aksi baris (Ubah,
   Hapus, ⋯) dulu ada di ujung kanan sehingga staff harus menggeser dulu
   sebelum bisa membuka apa pun, dan judul panjang terpotong satu baris.
   Di sini: kolom aksi menempel di kanan & tampil sebagai ikon (labelnya
   tetap terbaca pembaca layar), teks panjang membungkus, dan sasaran
   sentuh dibuat cukup besar untuk jempol.
   =================================================================== */
/* HP & tablet tegak: kolom aksi menempel di kanan (tanpa efek bila tabel muat). */
@media (max-width: 1023px) {
    .fi-ta-table td.fi-ta-actions-cell,
    .fi-ta-table th.fi-ta-actions-header-cell {
        position: sticky;
        right: 0;
        z-index: 2;
        background-color: #fff;
        box-shadow: -10px 0 10px -10px rgba(15, 23, 42, 0.35);
    }

    .dark .fi-ta-table td.fi-ta-actions-cell,
    .dark .fi-ta-table th.fi-ta-actions-header-cell {
        background-color: rgb(var(--gray-900));
    }
}

/* HP: aksi jadi ikon besar, teks panjang membungkus. */
@media (max-width: 767px) {
    .fi-ta-actions-cell > div {
        padding-inline: 0.35rem;
    }

    .fi-ta-actions-cell .fi-ta-actions {
        gap: 0.15rem;
    }

    .fi-ta-actions-cell .fi-ac-link-action {
        padding: 0.6rem;
        border-radius: 0.5rem;
    }

    .fi-ta-actions-cell .fi-ac-link-action:active {
        background: rgba(100, 116, 139, 0.15);
    }

    .fi-ta-actions-cell .fi-ac-link-action .fi-link-icon {
        width: 1.25rem;
        height: 1.25rem;
    }

    /* Label disembunyikan dari mata, tidak dari pembaca layar. */
    .fi-ta-actions-cell .fi-ac-link-action .fi-link-icon ~ span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .fi-ta-actions-cell .fi-icon-btn {
        width: 2.5rem;
        height: 2.5rem;
    }

    .fi-ta-text-item,
    .fi-ta-text-item-label {
        white-space: normal;
    }

    .fi-ta-text {
        min-width: 7.5rem;
        max-width: 17rem;
    }

    /* Kotak centang baris cukup besar untuk disentuh. */
    .fi-ta-record-checkbox,
    .fi-ta-page-checkbox {
        width: 1.15rem;
        height: 1.15rem;
    }

    /* Judul halaman tidak memakan setengah layar. */
    .fi-header-heading {
        font-size: 1.375rem;
        line-height: 1.75rem;
    }

    /* Tombol bawah form yang menempel (stickyFormActions): rapi satu baris. */
    .fi-form-actions.fi-sticky {
        padding-block: 0.65rem;
    }
}

/* Isi menu tarik-turun membungkus, tidak dipotong "…": dua template berawalan
   sama ("Penawaran Pelatihan & …") dulu tidak bisa dibedakan di HP. */
.fi-dropdown-list-item.ge-bungkus .fi-dropdown-list-item-label {
    white-space: normal;
    overflow: visible;
    line-height: 1.3;
}

.fi-dropdown-list-item.ge-bungkus {
    align-items: flex-start;
    padding-block: 0.55rem;
}

/* =====================================================================
   § CADANGAN — bilah progres unggah / buat / pulihkan (halaman Cadangan &
   Pemulihan, public/js/cadangan-unggah.js). Aksen ikut panel.
   ===================================================================== */
.ge-progres {
    height: .6rem;
    border-radius: 999px;
    background: rgb(var(--gray-200));
    overflow: hidden;
}
.dark .ge-progres { background: rgb(var(--gray-700)); }
.ge-progres__isi {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgb(var(--primary-500)), rgb(var(--primary-400)));
    transition: width .4s ease;
}
.ge-progres__isi--jalan {
    background: repeating-linear-gradient(45deg, rgb(var(--primary-500)) 0 10px, rgb(var(--primary-400)) 10px 20px);
    background-size: 28px 28px;
    animation: ge-progres-jalan 1s linear infinite;
}
@keyframes ge-progres-jalan { to { background-position: 28px 0; } }
@media (prefers-reduced-motion: reduce) {
    .ge-progres__isi, .ge-progres__isi--jalan { animation: none; transition: none; }
}

.ge-unggah { display: grid; gap: .75rem; }
.ge-unggah__pilih {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 6rem;
    padding: 1rem;
    border: 2px dashed rgb(var(--gray-300));
    border-radius: .75rem;
    cursor: pointer;
    text-align: center;
    font-size: .9rem;
    color: rgb(var(--gray-600));
    word-break: break-all;
}
.dark .ge-unggah__pilih { border-color: rgb(var(--gray-600)); color: rgb(var(--gray-300)); }
.ge-unggah__pilih:hover, .ge-unggah__pilih:focus-within { border-color: rgb(var(--primary-500)); }
.ge-unggah__pilih input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ge-unggah__baris {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    font-size: .875rem;
    word-break: break-word;
}
.ge-unggah__kecil { font-size: .8rem; color: rgb(var(--gray-500)); font-variant-numeric: tabular-nums; }
.ge-unggah__pesan { font-size: .8rem; color: rgb(var(--warning-600)); }
.ge-unggah__galat { font-size: .875rem; color: rgb(var(--danger-600)); }
.ge-unggah__selesai { display: flex; gap: .75rem; align-items: flex-start; font-size: .9rem; }

.ge-cad-layar {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgb(15 23 42 / .55);
    backdrop-filter: blur(2px);
}
.ge-cad-kartu {
    width: min(28rem, 100%);
    display: grid;
    gap: .85rem;
    padding: 1.25rem 1.35rem;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 20px 50px rgb(0 0 0 / .25);
}
.dark .ge-cad-kartu { background: rgb(var(--gray-900)); }
.ge-cad-kepala { display: flex; align-items: center; gap: .6rem; font-size: 1rem; }
.ge-cad-kepala .fi-loading-indicator, .ge-cad-kepala svg { color: rgb(var(--primary-500)); }

/* Peringatan isian RAB (HitungRab::peringatan — mis. jumlah & harga omzet tertukar) + subtotal baris omzet. */
.ge-rabr__awas {
    margin: .75rem 0;
    padding: .65rem .8rem;
    border-radius: .65rem;
    border: 1px solid rgb(var(--warning-300));
    background: rgb(var(--warning-50));
    color: rgb(var(--warning-800));
    font-size: .8rem;
    line-height: 1.45;
}
.dark .ge-rabr__awas { background: rgb(var(--warning-500) / .12); border-color: rgb(var(--warning-500) / .4); color: rgb(var(--warning-200)); }
.ge-rabr__awas ul { margin: .3rem 0 0; padding-left: 1.1rem; list-style: disc; }
.ge-rab-subtotal { font-size: .8rem; color: rgb(var(--gray-500)); font-variant-numeric: tabular-nums; }