<style>
/* ===== EDIT KK — theme matching ===== */
.btn:focus, .form-control:focus, .form-select:focus, textarea.form-control:focus { box-shadow: none; }
.form-control:focus, .form-select:focus, textarea.form-control:focus {
    border-color: #20c997;
    box-shadow: 0 0 0 3px rgba(32,201,151,.12);
}
.form-control, .form-select, textarea.form-control {
    border-radius: 8px;
    border: 1.5px solid #e5e7eb;
    font-size: .88rem;
    padding: 9px 12px;
    color: #374151;
}
.form-label {
    font-size: .8rem;
    font-weight: 700;
    color: #374151;
    margin-bottom: 4px;
}

/* ===== FORM CARD ===== */
.edit-kk-card {
    border-radius: 14px;
    border: 1.5px solid #e5e7eb;
    box-shadow: 0 1px 6px rgba(0,0,0,.07);
    overflow: hidden;
    background: #fff;
}
.edit-kk-card .card-header-custom {
    background: linear-gradient(135deg, #1abc9c 0%, #16a085 100%);
    padding: 16px 24px;
    display: flex; align-items: center; gap: 10px;
}
.edit-kk-card .card-header-custom .back-link {
    font-size: .78rem; color: rgba(255,255,255,.8); text-decoration: none;
    display: flex; align-items: center; gap: 4px;
    transition: color .15s;
}
.edit-kk-card .card-header-custom .back-link:hover { color: #fff; }
.edit-kk-card .card-header-custom h5 {
    font-size: .98rem; font-weight: 800; color: #fff; margin: 0;
}
.edit-kk-card .card-body-custom { padding: 24px; }

/* ===== SECTION DIVIDER ===== */
.form-section {
    border-top: 1px solid #f1f3f5;
    margin-top: 18px;
    padding-top: 16px;
}
.form-section-label {
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: #9ca3af; margin-bottom: 12px;
    display: flex; align-items: center; gap: 6px;
}
.form-section-label i { color: #20c997; }

/* ===== FOOTER BUTTONS ===== */
.form-footer {
    display: flex; justify-content: space-between; align-items: center;
    border-top: 1.5px solid #f1f3f5;
    padding-top: 18px; margin-top: 20px;
}
.btn-cancel {
    font-size: .84rem; font-weight: 600; padding: 8px 18px;
    border-radius: 8px; border: 1.5px solid #e5e7eb;
    color: #6b7280; background: #fff; text-decoration: none;
    display: inline-flex; align-items: center; gap: 5px;
    transition: background .15s;
}
.btn-cancel:hover { background: #f3f4f6; color: #374151; }
.btn-submit {
    font-size: .84rem; font-weight: 700; padding: 9px 24px;
    border-radius: 8px; border: none;
    background: #20c997; color: #fff;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background .15s, transform .1s;
}
.btn-submit:hover { background: #17a589; color: #fff; transform: translateY(-1px); }

/* ===== VALIDATION ===== */
.alert-danger {
    border-radius: 10px; font-size: .83rem;
    border: 1.5px solid #fecaca; background: #fee2e2; color: #991b1b;
    padding: 10px 14px; margin-bottom: 18px;
}

/* ===== MOBILE ===== */
@media (max-width: 767.98px) {
    .edit-kk-wrapper { padding: 10px 0 !important; }
    .edit-kk-card .card-body-custom { padding: 16px; }
    .edit-kk-card .card-header-custom { padding: 13px 16px; }
    .form-footer { flex-direction: column-reverse; gap: 8px; }
    .form-footer .btn-cancel,
    .form-footer .btn-submit { width: 100%; justify-content: center; }
    .form-section { margin-top: 14px; padding-top: 12px; }
}
</style>

<div class="container-fluid px-2 px-md-4 py-3 edit-kk-wrapper">
    <div class="row justify-content-center">
        <div class="col-12 col-lg-10 col-xl-8">

            <div class="edit-kk-card">
                <!-- Header -->
                <div class="card-header-custom">
                    <div class="flex-grow-1">
                        <a href="<?php echo base_url('kartu-keluarga'); ?>" class="back-link d-inline-flex mb-1">
                            <i class="bi bi-arrow-left"></i> Kembali ke Daftar KK
                        </a>
                        <h5><i class="bi bi-pencil-square me-2" style="opacity:.85;"></i>Edit Kartu Keluarga</h5>
                    </div>
                </div>

                <div class="card-body-custom">
                    <?php echo validation_errors('<div class="alert-danger">', '</div>'); ?>

                    <form action="<?php echo base_url('kartu-keluarga/edit/'.$kk->id); ?>" method="post">

                        <!-- Nomor KK -->
                        <div class="mb-3">
                            <label class="form-label">Nomor KK <span class="text-danger">*</span></label>
                            <input type="text" name="no_kk" class="form-control"
                                value="<?php echo $kk->no_kk; ?>" maxlength="16" required
                                placeholder="16 digit nomor KK">
                        </div>

                        <!-- Alamat -->
                        <div class="mb-0">
                            <label class="form-label">Alamat <span class="text-danger">*</span></label>
                            <textarea name="alamat" class="form-control" rows="2" required
                                placeholder="Jalan, gang, nomor rumah..."><?php echo $kk->alamat; ?></textarea>
                        </div>

                        <!-- Wilayah -->
                        <div class="form-section">
                            <div class="form-section-label"><i class="bi bi-geo-alt-fill"></i>Wilayah</div>
                            <div class="row g-3">
                                <div class="col-6">
                                    <label class="form-label">RT</label>
                                    <input type="text" name="rt" class="form-control"
                                        value="<?php echo $kk->rt; ?>" maxlength="3" placeholder="001">
                                </div>
                                <div class="col-6">
                                    <label class="form-label">RW</label>
                                    <input type="text" name="rw" class="form-control"
                                        value="<?php echo $kk->rw; ?>" maxlength="3" placeholder="001">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Desa / Kelurahan</label>
                                    <input type="text" name="desa" class="form-control"
                                        value="<?php echo $kk->desa; ?>">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Kecamatan</label>
                                    <input type="text" name="kecamatan" class="form-control"
                                        value="<?php echo $kk->kecamatan; ?>">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Kabupaten / Kota</label>
                                    <input type="text" name="kabupaten" class="form-control"
                                        value="<?php echo $kk->kabupaten; ?>">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Provinsi</label>
                                    <input type="text" name="provinsi" class="form-control"
                                        value="<?php echo $kk->provinsi; ?>">
                                </div>
                                <div class="col-md-4 col-6">
                                    <label class="form-label">Kode Pos</label>
                                    <input type="text" name="kode_pos" class="form-control"
                                        value="<?php echo $kk->kode_pos; ?>" maxlength="5" placeholder="12345">
                                </div>
                            </div>
                        </div>

                        <!-- Footer Actions -->
                        <div class="form-footer">
                            <a href="<?php echo base_url('kartu-keluarga'); ?>" class="btn-cancel">
                                <i class="bi bi-x-lg"></i> Batal
                            </a>
                            <button type="submit" class="btn-submit">
                                <i class="bi bi-save"></i> Update KK
                            </button>
                        </div>

                    </form>
                </div>
            </div>

        </div>
    </div>
</div>