/* Chrome, Safari, Edge */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

@media (min-width: 1024px) {
    /* Lebar saat sidebar mengecil (5.5rem = 88px) */
    .sidebar-mini { width: 5.5rem !important; }
    
    /* Sembunyikan semua teks */
    .sidebar-mini .hide-on-mini { display: none !important; }
            
    /* Posisikan ikon di tengah */
    .sidebar-mini .center-on-mini { 
        justify-content: center !important; 
        padding-left: 0 !important; 
        padding-right: 0 !important; 
    }
            
    /* Posisikan logo di tengah */
    .sidebar-mini .logo-container { 
        padding-left: 0 !important; 
        padding-right: 0 !important; 
        justify-content: center !important; 
    }
}

/* 1. Memaksa semua elemen form mematuhi font Plus Jakarta Sans */
        input, select, option, textarea, button {
            font-family: 'Plus Jakarta Sans', sans-serif !important;
        }

        /* 2. CUSTOMISASI DROPDOWN (SELECT) AESTHETIC */
        select {
            /* Sembunyikan panah default bawaan browser yang jelek */
            appearance: none !important;
            -webkit-appearance: none !important;
            -moz-appearance: none !important;
            
            /* Ganti dengan ikon panah chevron warna Cyan yang elegan */
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2306b6d4' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
            background-position: right 1rem center !important;
            background-repeat: no-repeat !important;
            background-size: 1.5em 1.5em !important;
            padding-right: 3rem !important; /* Beri ruang agar teks tidak menabrak ikon */
        }

        /* 3. PEWARNAAN ISI DROPDOWN (OPTIONS) */
        /* Catatan: Efek ini berjalan sangat mulus di Chrome/Edge/Browser Android */
        select option {
            background-color: #ffffff; /* Latar putih bersih */
            color: #164e63; /* Teks warna cyan sangat gelap (cyan-900) */
            font-weight: 600;
            padding: 15px !important;
        }

        /* Efek saat opsi dipilih/disorot */
        select option:checked,
        select option:hover,
        select option:focus {
            background-color: #cffafe !important; /* Latar berubah jadi cyan pastel (cyan-100) */
            color: #083344 !important; /* Teks makin gelap */
        }
        select option:disabled {
            background-color: #f8fafc; /* abu-abu muda */
            color: #64748b; /* teks abu-abu */
            font-style: italic;
        }

        /* 4. Kustomisasi Scrollbar (Agar senada dengan tema air) */
        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: #ecfeff; /* cyan-50 */
            border-radius: 10px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #67e8f9; /* cyan-300 */
            border-radius: 10px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #06b6d4; /* cyan-500 */
        }
        
        /* 1. Pastikan kalender selalu melayang paling atas (di atas modal) */
        .flatpickr-calendar {
            z-index: 9999 !important;
            font-family: 'Plus Jakarta Sans', sans-serif !important;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
            border: 1px solid #cffafe !important;
            border-radius: 1rem !important;
        }

        /* 2. Fix input Tahun yang 'tenggelam' akibat Tailwind Reset */
        .flatpickr-current-month .numInputWrapper {
            width: 5ch !important; /* Lebarkan sedikit agar angka tidak terjepit */
            border-radius: 4px;
        }
        
        .flatpickr-current-month input.cur-year {
            font-weight: 500 !important;
            color: #164e63 !important; /* Warna text cyan-900 */
            padding: 0 !important;
            margin: 0 !important;
            background: transparent !important;
            font-size: inherit !important;
            appearance: none !important;
            -moz-appearance: textfield !important;
        }

        /* 3. Percantik bulan dan header kalender */
        .flatpickr-months .flatpickr-month {
            background: #ecfeff !important; /* cyan-50 */
            color: #083344 !important;
            border-radius: 1rem 1rem 0 0;
            height: 40px !important;
        }
        .flatpickr-current-month .flatpickr-monthDropdown-months {
            font-weight: 500 !important;
            background: #ecfeff !important;
        }
        .flatpickr-day.selected {
            background: #06b6d4 !important; /* cyan-500 */
            border-color: #06b6d4 !important;
        }