/* assets/css/style.css */

[x-cloak] { display: none !important; }

/* Base Input Styling - Clean & Elegant */
.simple-input {
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    font-size: 15px;
    color: #1e293b;
    border-radius: 0.75rem; /* 12px */
    padding: 0.875rem 1.25rem;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.01);
    width: 100%;
}
.simple-input:hover {
    border-color: #cbd5e1;
    background: #f1f5f9;
}
.simple-input:focus {
    border-color: #3b82f6;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
    outline: none;
}
.simple-input::placeholder {
    color: #94a3b8;
    font-size: 15px;
    font-weight: 400;
}

/* Error state for inputs */
.simple-input.input-error {
    border-color: #ef4444 !important;
    background-color: #fef2f2 !important;
}

select.simple-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1.25rem center !important;
    background-size: 1.2rem !important;
    padding-right: 3.5rem !important;
    cursor: pointer;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

.form-label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #334155;
    margin-bottom: 0.5rem;
    letter-spacing: 0.01em;
}

/* Date Input Enhancement */
input[type="date"].simple-input::-webkit-calendar-picker-indicator {
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.2s;
}
input[type="date"].simple-input:hover::-webkit-calendar-picker-indicator,
input[type="date"].simple-input:focus::-webkit-calendar-picker-indicator {
    opacity: 1;
    filter: invert(0.4) sepia(1) saturate(10) hue-rotate(190deg);
}

/* Number Input - Hide spinners */
input[type="number"].simple-input::-webkit-outer-spin-button,
input[type="number"].simple-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Mematikan sorotan klik di seluruh elemen agar tidak ada kotak abu-abu di HP */
* {
    -webkit-tap-highlight-color: transparent;
}

input[type="number"].simple-input {
    -moz-appearance: textfield;
}

/* Premium Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { 
    background: linear-gradient(180deg, #cbd5e1, #94a3b8); 
    border-radius: 10px; 
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #94a3b8, #64748b); }

#map { height: 350px; border-radius: 1.5rem; border: 2px solid #e2e8f0; }
.leaflet-container { font-family: inherit; }

/* Mobile Optimizations */
@media (max-width: 640px) {
    .max-w-5xl {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        margin-top: -6rem !important;
    }
    .simple-input {
        padding: 0.75rem 1.25rem !important;
        font-size: 16px !important;
        height: auto !important;
    }
    .form-label {
        font-size: 15px !important;
        margin-bottom: 0.35rem !important;
    }
    .p-8, .p-12 { padding: 1rem !important; }
    .space-y-12 > * + * { margin-top: 1rem !important; }
    
    /* Scanner Mobile Optimizations */
    .fixed.inset-0.z-\[60\] { padding: 0.5rem !important; }
    .fixed.inset-0.z-\[60\] .bg-white {
        max-width: 100% !important;
        border-radius: 1.5rem !important;
        max-height: 96vh !important;
    }
    .p-10.border-b { padding: 1rem !important; }
    
    .fixed.inset-0.z-\[60\] .max-w-2xl {
        max-width: 100% !important;
        border-radius: 1rem !important;
    }
}