/**
 * SIMDEK - Secure Custom Form Styling (Strict CSP Compliant)
 * Location: /frontend/web/css/laporan-masyarakat.css
 */

/* ==========================================================================
   1. LAYOUT UTAMA & STRUKTUR KONTAINER (Substitusi Inline Styles)
   ========================================================================== */
.container-form-laporan {
    margin-top: 150px;
    margin-bottom: 60px;
}

.card-laporan {
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Header Card Premium Bergradasi Gelap Khas Dashboard Modern */
.card-header-laporan {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    padding: 30px;
    border-bottom: 4px solid #00a65a;
}

.card-header-laporan h1 {
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    font-size: 26px;
    letter-spacing: -0.5px;
}

.card-header-laporan p {
    color: #94a3b8;
    margin: 8px 0 0 0;
    font-size: 14px;
    line-height: 1.5;
}

.container-body-laporan {
    padding: 35px;
}

/* ==========================================================================
   2. ATURAN INPUT COMPONENT & ICON PREPEND (FIX MISSMATCH SIZE)
   ========================================================================== */
.laporan-masyarakat-form .form-group {
    margin-bottom: 20px;
}

.laporan-masyarakat-form label {
    font-weight: 600;
    color: #334155;
    margin-bottom: 6px;
    font-size: 14px;
}

/* Membungkus input group dengan flex stretch agar tinggi anak-anaknya dipaksa sama */
.laporan-masyarakat-form .input-group {
    display: flex;
    align-items: stretch !important;
}

/* Desain Kolom Input - Dikunci tingginya menggunakan unit standar Bootstrap */
.laporan-masyarakat-form .form-control {
    border-color: #cbd5e1;
    border-radius: 0 6px 6px 0 !important;
    font-size: 14px;
    color: #1e293b;
    padding: 10px 14px;
    height: 42px !important; /* Kunci tinggi input */
    line-height: 1.5;
    box-sizing: border-box;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.laporan-masyarakat-form .form-control:focus {
    border-color: #00a65a;
    box-shadow: 0 0 0 3px rgba(0, 166, 90, 0.15);
    background-color: #ffffff;
}

/* Khusus Dropdown List (Select Element) agar tingginya tetap 42px matching */
.laporan-masyarakat-form select.form-control {
    height: 42px !important;
    cursor: pointer;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Desain Wadah Kotak Icon - Dipaksa mengikuti tinggi input group (42px) */
.laporan-masyarakat-form .input-group-text {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #64748b;
    border-radius: 6px 0 0 6px !important;
    padding: 0 16px;
    display: flex;
    align-items: center; /* Meratakan icon di tengah secara vertikal */
    justify-content: center;
    min-width: 46px;
    height: 42px !important; /* Kunci tinggi kotak icon agar sejajar dengan input */
    box-sizing: border-box;
}

/* Khusus File Input (Foto Bukti) */
.laporan-masyarakat-form .form-control-file {
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    border-radius: 0 6px 6px 0 !important;
    padding: 8px 12px;
    height: 42px !important; /* Samakan juga tinggi input file */
    display: flex;
    align-items: center;
    cursor: pointer;
    box-sizing: border-box;
}

/* Khusus File Input (Foto Bukti) */
.laporan-masyarakat-form .form-control-file {
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    border-radius: 0 6px 6px 0 !important;
    padding: 8px 12px;
    height: auto;
    cursor: pointer;
}

/* ==========================================================================
   3. INTEGRASI ENGINE PETA LOKAL LEAFLET JS
   ========================================================================== */
.label-peta {
    font-weight: 600;
    color: #334155;
    margin-bottom: 8px;
}

#map_canvas {
    width: 100%;
    height: 320px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}

#map-status-text {
    color: #64748b;
    font-size: 13.5px;
    font-weight: 500;
}

/* Perbaikan Z-Index Kontrol Leaflet Agar Tidak Menimpa Menu Navbar Web Akang */
.leaflet-top, .leaflet-bottom {
    z-index: 400 !important;
}

.leaflet-pane {
    z-index: 300 !important;
}

/* ==========================================================================
   4. MANAJEMEN VALIDASI ERROR & STATE (Strict CSP Mitigated)
   ========================================================================== */
/* Memberikan jarak yang aman antara teks error dengan input group di bawahnya */
.laporan-masyarakat-form .invalid-feedback, 
.laporan-masyarakat-form .help-block {
    display: block;
    margin-top: 6px;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 500;
    color: #dc3545; /* Warna merah tegas standar mitigasi sistem */
}

/* Efek transisi halus pada border input saat terjadi error/focus */
.laporan-masyarakat-form .is-invalid .form-control,
.laporan-masyarakat-form .has-error .form-control {
    border-color: #dc3545 !important;
    background-color: #fff5f5;
}

.laporan-masyarakat-form .is-invalid .input-group-text,
.laporan-masyarakat-form .has-error .input-group-text {
    border-color: #dc3545 !important;
    color: #dc3545;
    background-color: #ffeeef;
}

/* ==========================================================================
   5. KLAUSUL HUKUM, CHECKBOX & CAPTCHA ADAPTER
   ========================================================================== */
/* Kotak Fakta Integritas Premium */
.card-klausul {
    background: #f0fdf4;
    border-left: 4px solid #00a65a;
    border-radius: 4px;
    margin-top: 25px;
    margin-bottom: 25px;
}

.card-klausul h5 {
    font-size: 15px;
    font-weight: 700;
    color: #166534;
    margin: 0 0 6px 0;
}

.card-klausul p {
    font-size: 13px;
    color: #1e293b;
    margin: 0;
    line-height: 1.6;
}

/* Checkbox Kesepakatan */
.container-check-integritas {
    padding-left: 1.25rem;
    margin-bottom: 25px;
}

.container-check-integritas input[type="checkbox"] {
    width: 17px;
    height: 17px;
    cursor: pointer;
    margin-top: 0.15rem;
}

.label-check-integritas {
    font-size: 13.5px;
    color: #0f172a;
    cursor: pointer;
    padding-left: 8px;
    line-height: 1.4;
    user-select: none;
}

/* Modul Pembungkus Gambar Captcha Keamanan */
.container-captcha-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.box-captcha-img {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 4px;
    background: #ffffff;
    display: inline-flex;
}

.box-captcha-img img {
    cursor: pointer;
    border-radius: 4px;
}

.box-captcha-input {
    flex-grow: 1;
    min-width: 160px;
}

.box-captcha-input input {
    border-color: #cbd5e1;
    border-radius: 6px !important;
}

/* Tombol Submit Eksekusi Utama */
.button-submit-laporan {
    border-radius: 8px !important;
    font-weight: 700;
    font-size: 16px;
    padding: 12px 30px;
    box-shadow: 0 4px 6px -1px rgba(0, 166, 90, 0.25);
    border: none;
    transition: background-color 0.2s, box-shadow 0.2s;
}

.button-submit-laporan:hover {
    background-color: #008d4c !important;
    box-shadow: 0 6px 12px -2px rgba(0, 166, 90, 0.35);
}

/* ==========================================================================
   6. OPTIMALISASI MOBILE RESPONSIVE LAYAR HP (Breakpoints)
   ========================================================================== */
@media (max-width: 768px) {
    .container-body-laporan {
        padding: 20px;
    }
    
    .card-header-laporan {
        padding: 20px;
    }
    
    .card-header-laporan h1 {
        font-size: 22px;
    }
}

@media (max-width: 576px) {
    .container-form-laporan {
        margin-top: 110px; /* Lebih merapat di mobile agar pas viewport */
        padding-left: 10px;
        padding-right: 10px;
    }

    .btn-block-mobile {
        width: 100% !important;
        display: block;
    }

    .container-captcha-wrapper {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .box-captcha-img, .box-captcha-img img {
        width: 100% !important;
        justify-content: center;
    }
    
    #map_canvas {
        height: 250px; /* Ukuran peta sedikit mengecil di HP agar nyaman digulir */
    }
}