/* ============================================================
   BASE — style panel-wide (topbar, sidebar, body, section chrome)
   + komponen kecil yang dipakai lintas beberapa halaman/widget.
   Jangan taruh style yang spesifik ke 1 halaman di sini — itu
   masuk ke pages/*.css atau widgets/*.css masing-masing.
   ============================================================ */

/* --- Baris kosong generik — tabel SELALU tampil (header tetap kelihatan)
   walau datanya belum ada, ganti pola lama "kalau kosong sembunyikan tabel
   ganti teks polos". Dipakai lintas semua tabel di project ini. --- */
.akti-table-empty-cell {
    text-align: center;
    padding: 1.5rem 0.75rem;
    color: #6b7280;
    font-style: italic;
    font-size: 0.8125rem;
}

.dark .akti-table-empty-cell {
    color: #9ca3af;
}

/* --- Variabel warna header tabel (gradient putih -> abu, abu di bawah) —
   SATU sumber, dipakai `var(--akti-th-bg)` di semua file pages/*.css &
   widgets/*.css yang punya tabel header, biar tidak ulang nilai gradient
   yang sama di banyak tempat. --- */
:root {
    --akti-th-bg: linear-gradient(to bottom, #f9fafb, #e5e7eb);
}

.dark {
    --akti-th-bg: linear-gradient(to bottom, #1f2937, #374151);
}

/* Tabel generik buat markup yang sebelumnya Tailwind polos tanpa border
   (leave-approval, profile-change-approval, my-profile, employee-import-
   rules) — disamakan ke pola .akti-*-table yang sudah dipakai di halaman
   lain, biar semua tabel border + header gradient-nya konsisten. */
.akti-plain-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.akti-plain-table th,
.akti-plain-table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border: 1px solid #e5e7eb;
}

.dark .akti-plain-table th,
.dark .akti-plain-table td {
    border-color: #374151;
}

.akti-plain-table th {
    font-weight: 600;
    color: #111827;
    background: var(--akti-th-bg);
}

.dark .akti-plain-table th {
    color: #fff;
}

/* --- Topbar: judul halaman rata kiri, sejajar tepi konten. Putih —
   strip topbar sekarang background maroon (lihat .fi-topbar nav di
   bawah), sama di light & dark mode jadi tidak perlu varian .dark. --- */
.akti-topbar-title {
    font-weight: 600;
    font-size: 0.9375rem;
    color: #fff;
    white-space: nowrap;
    max-width: 40vw;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

@media (max-width: 767px) {
    .akti-topbar-title {
        display: none;
    }
}

/* Judul halaman sudah tampil di topbar — heading H1 di dalam konten
   jadi duplikat, disembunyikan di semua halaman. Breadcrumbs & subheading
   tetap tampil (elemen terpisah, bukan bagian dari h1 ini). */
.fi-header-heading {
    display: none;
}

/* --- Rapatkan jarak kosong topbar <-> konten, dan sidebar <-> konten
   (semua halaman). Filament default px-4 md:px-6 lg:px-8 (sampai 2rem di
   layar lebar) kelihatan seperti "gap" gede pas sidebar sudah punya
   background solid (lihat .fi-sidebar di bawah) — dipangkas di sini,
   bukan dihapus total (tetap ada jarak baca yang wajar). --- */
.fi-main {
    padding-top: 0.25rem !important;
    padding-inline: 1rem !important;
}

.fi-page {
    gap: 0.75rem !important;
}

/* .fi-page bukan flex container-nya sendiri — <section> di dalamnya yang
   pegang py-8 (2rem) bawaan Tailwind. Itu kontributor jarak kosong
   terbesar ke topbar, dipangkas di sini. */
.fi-page > section {
    padding-top: 0 !important;
}

/* --- Background: dark mode pakai charcoal lembut (Slate), bukan hitam
   pekat bawaan Filament (gray-950 ~#030712) — nyaman di mata, tetap
   hemat baterai OLED dibanding mode terang, tanpa efek "melubangi layar"
   ala hitam murni. Body paling gelap, sidebar/topbar/card satu tingkat
   lebih terang untuk hierarki. --- */
.fi-body {
    background-color: #fff;
}

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

.dark .fi-section {
    background-color: #1e293b !important;
}

/* Sidebar dikasih background TETAP (bukan transparan) supaya tidak ikut
   berubah kalau background konten (.fi-body / section per halaman)
   di-custom warnanya. Sidebar bawaan Filament transparan di desktop
   (lg:bg-transparent) sehingga tembus ke warna .fi-body — ini memutus
   ketergantungan itu. Abu-abu (bukan putih) supaya kontras dengan konten
   yang putih flat di sebelahnya. */
.fi-sidebar {
    background-color: #f3f4f6 !important;
}

.dark .fi-sidebar {
    background-color: #1e293b !important;
}

/* Strip header maroon — brand color, SAMA di light & dark mode (bukan
   permukaan netral yang perlu ikut tema gelap). Mencakup dua area yang
   sejajar: fi-sidebar-header (logo "HRIS AKTI", kiri) & fi-topbar nav
   (search/notifikasi/bantuan/user menu, kanan) — dua-duanya tinggi h-16
   yang sama, jadi kelihatan sebagai satu strip menerus. */
.fi-sidebar-header,
.fi-topbar nav {
    background-color: #74292a !important;
}

.fi-sidebar-header .fi-logo {
    color: #fff !important;
}

/* Item sidebar yang lagi aktif (halaman yang dibuka sekarang) — sengaja
   TETAP maroon walau primary color tombol sudah diganti biru, biar
   penanda "kamu di sini" konsisten sama warna brand, bukan warna aksi
   tombol. Class ini spesifik ikon/label item aktif (lihat Filament
   sidebar/item.blade.php), bukan warna primary generik. */
.fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.fi-sidebar-item.fi-active .fi-sidebar-item-label {
    color: #74292a !important;
}

.dark .fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.dark .fi-sidebar-item.fi-active .fi-sidebar-item-label {
    color: #d18d8e !important;
}

/* --- Hilangkan efek "kotak di dalam kotak" — Filament default bungkus
   tiap Section jadi card terpisah (rounded-xl + shadow-sm + ring-1),
   menumpuk di atas latar halaman yang warnanya sama. Berlaku semua
   halaman/widget — cuma hapus chrome kartunya (shadow/ring/rounded),
   TIDAK mengubah posisi/grid, jadi aman dipakai di section yang berjejer
   grid (mis. widget Ringkasan Karyawan) maupun yang ditumpuk vertikal.
   Ring Tailwind dirender lewat box-shadow, jadi box-shadow:none sudah
   otomatis menghapus ring-nya juga. */
.fi-section {
    background-color: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* --- Tabel Resource bawaan Filament (Employees, Users, Unit, Position,
   Employment Type, Direktorat, dst — semua yang pakai Table Builder, bukan
   blade custom) — disamakan ke pola tabel lain: header gradient +
   border penuh (defaultnya cuma divide-y, tanpa border kolom). --- */
.fi-ta-table {
    border-collapse: collapse !important;
}

.fi-ta-header-cell,
.fi-ta-cell {
    border: 1px solid #e5e7eb !important;
}

.dark .fi-ta-header-cell,
.dark .fi-ta-cell {
    border-color: #374151 !important;
}

.fi-ta-header-cell {
    background: var(--akti-th-bg) !important;
}

.fi-user-avatar {
    width: 2.2rem !important; /* 44px */
    height: 2.35rem !important; /* 37.6px */
    border-radius: 0.375rem !important;
    background-color: #fff !important;
    object-fit: contain !important;
}

.fi-btn[type="submit"] {
    background-color: #0d9488 !important;
}

.fi-btn[type="submit"]:hover {
    background-color: #0f766e !important;
}

.fi-btn[type="submit"]:focus-visible {
    --tw-ring-color: rgb(13 148 136 / 0.5) !important;
}

.akti-help-button {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #fff;
    background: transparent;
    cursor: default;
}

.akti-notifications-trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    border: none;
    color: #fff;
    background: transparent;
    cursor: pointer;
}

.akti-notifications-trigger:hover {
    background: rgba(255, 255, 255, 0.12);
}

.akti-notifications-badge {
    position: absolute;
    top: 0.125rem;
    right: 0.125rem;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.25rem;
    border-radius: 9999px;
    background: #dc2626;
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.animate__animated {
    animation-duration: 1s;
    animation-fill-mode: both;
}

.animate__shakeX {
    animation-name: akti-shakeX;
}

@keyframes akti-shakeX {
    from,
    to {
        transform: translate3d(0, 0, 0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translate3d(-6px, 0, 0);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translate3d(6px, 0, 0);
    }
}

.akti-summary-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.akti-summary-table th,
.akti-summary-table td {
    padding: 0.25rem 0.5rem;
    text-align: left;
    border: 1px solid #e5e7eb;
}

.dark .akti-summary-table th,
.dark .akti-summary-table td {
    border-color: #374151;
}

.akti-summary-table th {
    font-weight: 600;
    color: #374151;
    background: var(--akti-th-bg);
}

.dark .akti-summary-table th {
    color: #e5e7eb;
    background: var(--akti-th-bg);
}

/* --- Catatan italic kecil — dipakai di my-overtime, my-payroll,
   my-profile, organization-chart (mis. "fitur belum aktif"). --- */
.akti-profile-hint {
    margin-top: 1rem;
    font-size: 0.8125rem;
    color: #6b7280;
    font-style: italic;
}

.dark .akti-profile-hint {
    color: #9ca3af;
}

/* --- Banner notice oranye — dipakai di my-overtime, my-payroll. --- */
.akti-feature-notice {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background: #fff7ed;
    color: #9a3412;
    font-size: 0.8125rem;
}

.dark .akti-feature-notice {
    background: #431407;
    color: #fdba74;
}