/* Wrapper harus bisa scroll */
.fi-ta-content {
    max-height: calc(100vh - 250px);
    overflow-y: auto;
}

/* Sticky header */
.fi-ta-table thead tr {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #f8fafc;
}
.fi-dropdown-panel {
    z-index: 20 !important;
}

/* ==========================================================================
   STICKY COLUMNS (No SPPD + Nama Karyawan)
   Catatan: `left` di .sticky-col-2 HARUS persis sama dengan width
   (termasuk padding) dari .sticky-col, kalau tidak dua kolom ini
   akan numpuk/overlap saat di-scroll horizontal.
   Sesuaikan angka 220px di bawah dengan lebar asli kolom No SPPD kamu
   (cek lewat inspect element -> offsetWidth).
   ========================================================================== */

/* Sticky kolom kiri (No SPPD) */
.sticky-col {
    position: sticky;
    left: 0;
    z-index: 5;
    white-space: nowrap;
    overflow: hidden;       /* jangan biarkan teks meluber ke kolom sebelah */
    text-overflow: ellipsis;
    background-color: white;
}

/* Sticky kolom kedua (Nama Karyawan) */
.sticky-col-2 {
    position: sticky !important;
    left: var(--sticky-col-1-width, 220px); /* di-set otomatis lewat JS, fallback 220px */
    z-index: 5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: white;
}

/* Zebra striping untuk sticky-col */
tr:nth-child(odd) .sticky-col {
    background-color: #ffffff;
}
tr:nth-child(even) .sticky-col {
    background-color: #fafafa;
}

/* Zebra striping untuk sticky-col-2 */
tr:nth-child(even) .sticky-col-2 {
    background-color: #fafafa;
}

/* Header sticky-col & sticky-col-2 harus di atas isi tabel */
.fi-ta-table thead tr th.sticky-col,
.fi-ta-table thead tr th.sticky-col-2 {
    z-index: 60;
}

.table-repeater-wrapper {
    width: 100% !important;
    overflow-x: auto !important;
    display: block !important;
}

html {
    scroll-behavior: smooth;
}

/* Supaya saat discroll, baris target tidak ketutup header sticky */
.scroll-target {
    scroll-margin-top: 150px; /* sesuaikan dengan tinggi header/topbar kamu */
    display: inline-block;
}

/* Paksa elemen table di dalamnya memiliki lebar minimal 1200px dan layout auto */
.table-repeater-wrapper table {
    min-width: 1200px !important;
    table-layout: auto !important; /* Mengganti default 'fixed' bawaan filament */
    width: 100% !important;
}

.table-repeater-wrapper .fi-fo-group svg,
.table-repeater-wrapper [data-component-type="time-picker"] svg,
.table-repeater-wrapper .fi-input-wrapper-prefix-icon,
.table-repeater-wrapper .fi-input-wrapper-suffix {
    display: none !important;
}

/* Menghilangkan padding sisa tempat ikon agar inputan teks tetap rapi di tengah */
.table-repeater-wrapper .fi-input-wrapper input {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    text-align: center; /* Opsional: membuat angka jam berposisi di tengah */
}

/* Opsional: Jaga agar baris header tidak pecah berantakan */
.table-repeater-wrapper th {
    white-space: nowrap !important;
}

/* ==========================================================================
   DARK MODE
   ========================================================================== */

.dark .sticky-col {
    background-color: #18181b;
}
.dark tr:nth-child(odd) .sticky-col {
    background-color: #18181b;
}
.dark tr:nth-child(even) .sticky-col {
    background-color: #242427;
}

.dark .sticky-col-2 {
    background-color: #18181b;
}
.dark tr:nth-child(odd) .sticky-col-2 {
    background-color: #18181b;
}
.dark tr:nth-child(even) .sticky-col-2 {
    background-color: #242427;
}

.dark .fi-fo-table-repeater thead th {
    background-color: #18181b !important; /* abu gelap */
    color: #f3f4f6 !important;            /* teks terang */
}

.dark .aw-table-repeater-container th {
    background-color: #18181b !important; /* Warna abu gelap */
    color: #f3f4f6 !important;             /* Warna teks terang */
    border-color: #374151 !important;      /* Warna border agar tidak kontras */
}

/* Jika Anda ingin baris di dalam repeater juga menyesuaikan saat Dark Mode */
.dark .aw-table-repeater-container td {
    background-color: #111827; /* Lebih gelap dari header */
}

.dark .custom-header-dark th {
    background-color: #18181b !important;
    color: #f3f4f6 !important;
    border-bottom: 1px solid #3f3f46;
}

/* Memperbaiki pojok kiri/kanan atas */
.dark .custom-header-dark th:first-child {
    border-top-right-radius: 1.0rem;
    border-top-left-radius: 1.0rem;
}
.dark .custom-header-dark th:last-child {
    border-top-right-radius: 1.0rem;
    border-top-left-radius: 1.0rem;
}

.dark .fi-ta-table thead tr {
    background-color: #18181b;
}

.fi-modal-window,
.fi-modal-backdrop {
    z-index: 9999;
}

/* ==========================================================================
   PENGATURAN TABEL SECARA GLOBAL
   ========================================================================== */

/* Batasi tinggi tabel agar header atas tetap sticky saat di-scroll vertikal */
.fi-ta-content {
    max-height: calc(100vh - 250px);
    overflow-y: auto;
}

/* ==========================================================================
   RESPONSIVE: matikan sticky di layar kecil
   ========================================================================== */

@media (max-width: 768px) {
    .sticky-col,
    .sticky-col-2 {
        position: static !important;
        left: auto !important;
        z-index: auto !important;
    }
}