/* Custom Soft UI Enhancement for SLB Bhinneka */

/* Round corners for primary UI elements */
.fi-card,
.fi-btn,
.fi-section {
    border-radius: 1rem !important;
    /* overflow: visible !important; */ /* Changed from hidden to avoid clipping dropdowns */
}

/* Table containers should allow horizontal scrolling */
.fi-ta-content,
.fi-ta-record-wrp {
    border-radius: 1rem !important;
    overflow: visible !important; /* Keep visible for child dropdowns */
}

.fi-ta-ctn {
    border-radius: 1rem !important;
    overflow-x: auto !important; /* Re-enable horizontal scrolling */
    -webkit-overflow-scrolling: touch;
}

/* Rounded corners for inputs without clipping dropdowns */
.fi-input,
.fi-input-wrp {
    border-radius: 1rem !important;
}

/* Ensure table actions have room and aren't clipped */
.fi-ta-actions {
    padding-right: 1.5rem !important;
    /* overflow: visible !important; */ /* Remove or comment out to prevent conflict with scrolling */
}

/* Subtle shadow for the main content area */
.fi-main-ctn {
    box-shadow:
        0 10px 15px -3px rgba(0, 0, 0, 0.05),
        0 4px 6px -2px rgba(0, 0, 0, 0.02) !important;
    border-radius: 1rem !important;
    background-color: transparent !important;
}

/* Fix for nested rounded corners on inputs */
.fi-input-wrp input {
    border-radius: 1rem !important;
}

/* Ensure sidebar font is updated but layout remains original */
.fi-sidebar {
    font-family: "Plus Jakarta Sans", sans-serif !important;
}

/* --- Deep Midnight Dark Mode Enhancement --- */

.dark .fi-main,
.dark .fi-sidebar,
.dark .fi-topbar,
body.dark {
    background-color: #020617 !important; /* Slate 950 */
}

.dark .fi-card,
.dark .fi-section,
.dark .fi-ta-ctn {
    background-color: #0f172a !important; /* Slate 900 */
    border: 1px solid rgba(255, 255, 255, 0.03) !important;
    border-radius: 1rem !important;
}

/* --- HD Table Optimization (Contrast & Sharpness) --- */

/* 1. Mempertegas Header Tabel (Judul Kolom) */
.dark .fi-ta-header-cell-label {
    color: #f1f5f9 !important; /* Slate 100 - Putih Bersih */
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em !important;
    font-size: 0.8rem !important; /* Naik dari 0.75rem */
}

/* 2. Memperjelas Isi Sel Tabel (Data) */
.dark .fi-ta-text-item-label {
    color: #ffffff !important; /* Putih Murni agar tajam */
    font-weight: 500 !important;
    font-size: 0.95rem !important; /* Naik dari standar ~0.875rem */
    line-height: 1.5 !important;
}

/* 3. Memperjelas Teks Deskripsi di bawah Judul */
.dark .fi-ta-text-item-description {
    color: #94a3b8 !important; /* Slate 400 - Abu-abu terang */
    font-size: 0.85rem !important; /* Naik dari standar ~0.75rem */
}

/* 4. Menyesuaikan Padding Baris Agar Tidak Sempit */
.fi-ta-cell {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

/* 4. Memberikan Warna Berbeda pada Baris Ganjil (Odd Rows) */
.dark .fi-ta-row:nth-child(odd) {
    background-color: rgba(
        255,
        255,
        255,
        0.02
    ) !important; /* Warna Midnight Blue yang sedikit lebih terang */
}

/* 5. Memastikan Baris Genap (Even Rows) Tetap pada Warna Dasar */
.dark .fi-ta-row:nth-child(even) {
    background-color: transparent !important;
}

/* 6. Mempertegas Garis Pemisah agar Terlihat Rapi */
.dark .fi-ta-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    transition: background-color 0.2s ease;
}

/* 7. Menambahkan Efek Hover yang Lebih Berwarna (Amber Glow) */
.dark .fi-ta-row:hover {
    background-color: rgba(
        251,
        191,
        36,
        0.08
    ) !important; /* Highlight Amber tipis saat baris disorot */
}

/* 8. Memperjelas Teks saat Baris Disorot */
.dark .fi-ta-row:hover .fi-ta-text-item-label {
    color: #fbbf24 !important; /* Teks berubah menjadi Amber cerah saat hover */
}

/* 9. Mempercantik Ikon di Kolom Action */
.dark .fi-ta-actions .fi-icon-btn {
    color: #fbbf24 !important; /* Warna Amber agar ikon aksi terlihat jelas */
    transform: scale(1.1); /* Perbesar ikon agar lebih mudah diklik */
}

/* --- Interactive Effects --- */

/* Efek Glow pada Tombol Primary (Amber) */
.fi-btn.fi-color-primary {
    transition: all 0.3s ease-in-out !important;
}

.fi-btn.fi-color-primary:hover {
    transform: translateY(-1px);
    background-color: #fbbf24 !important; /* Warna Amber yang sedikit lebih terang */
    box-shadow:
        0 0 15px rgba(251, 191, 36, 0.4),
        0 0 5px rgba(251, 191, 36, 0.2) !important;
}

/* Efek Glow pada Kartu Dashboard saat di-hover */
.fi-card:hover {
    border: 1px solid rgba(251, 191, 36, 0.3) !important;
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease;
}

/* Memperhalus tampilan navigasi sidebar */