/* =============================================================================
   UI Theme — lapisan harmonisasi UI panel admin (refinement HALUS).
   Scope: SEMUA selector diawali `.wrapper` agar HANYA berlaku di panel admin
   (layouts/vertical). Halaman auth (layouts/base, tanpa .wrapper) tidak tersentuh.
   Dimuat di head-css SETELAH app.min.css agar menang atas default tema.
   Tujuan: kartu/tombol/form/tabel/header/drawer terlihat senada + rapi di mobile.
   ============================================================================= */

/* ----- Kartu: radius lebih lembut, shadow halus, border tipis ----- */
.wrapper .card {
    border: 1px solid rgba(16, 24, 40, .07);
    border-radius: .75rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 18px rgba(16, 24, 40, .04);
}
.wrapper .card .card {                       /* kartu bersarang: jangan dobel shadow */
    box-shadow: none;
}
.wrapper .card-header {
    background-color: #fff;
    border-bottom: 1px solid rgba(16, 24, 40, .07);
    font-weight: 600;
}
.wrapper .card-header:first-child {
    border-top-left-radius: .75rem;
    border-top-right-radius: .75rem;
}

/* ----- Header halaman (page-title-box): spasi konsisten + rapi saat wrap ----- */
.wrapper .page-title-box {
    gap: .5rem;
}
.wrapper .page-title-box .page-title {
    font-weight: 600;
}

/* ----- Tombol: radius & bobot font seragam ----- */
.wrapper .btn {
    border-radius: .5rem;
    font-weight: 500;
}
.wrapper .btn-sm {
    border-radius: .45rem;
}

/* ----- Form control / select: radius + fokus konsisten (selaras Bootstrap) ----- */
.wrapper .form-control,
.wrapper .form-select {
    border-radius: .5rem;
}
.wrapper .form-control:focus,
.wrapper .form-select:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .15);
}

/* ----- Tabel: header bersih & lembut (termasuk DataTables) ----- */
.wrapper .table > thead th,
.wrapper table.dataTable > thead th {
    background-color: #f9fafb;
    color: #667085;
    font-weight: 600;
    text-transform: none;
    border-bottom-color: rgba(16, 24, 40, .08);
    white-space: nowrap;
}
.wrapper .table > tbody > tr:hover > * {
    background-color: rgba(13, 110, 253, .03);
}

/* ----- Badge: radius senada ----- */
.wrapper .badge {
    border-radius: .375rem;
    font-weight: 600;
}

/* ----- Drawer (offcanvas) & modal: radius lembut ----- */
.wrapper .offcanvas.offcanvas-end {
    border-top-left-radius: .9rem;
    border-bottom-left-radius: .9rem;
}
.wrapper .modal-content {
    border: 0;
    border-radius: .9rem;
    box-shadow: 0 12px 40px rgba(16, 24, 40, .14);
}

/* ----- Alert: radius senada ----- */
.wrapper .alert {
    border-radius: .65rem;
}

/* =============================================================================
   RESPONSIF — perbaikan mobile lintas menu (tanpa mengubah markup)
   ============================================================================= */
@media (max-width: 767.98px) {
    /* Header halaman: judul & tombol aksi turun rapi, tidak mepet */
    .wrapper .page-title-box {
        flex-wrap: wrap;
        align-items: flex-start !important;
    }
    /* Padding kartu sedikit dirapatkan agar muat di layar kecil */
    .wrapper .card-body {
        padding: 1rem;
    }
    /* Tabel non-DataTables: izinkan geser horizontal agar tak memecah layout
       (DataTables sudah punya scroll sendiri via scrollX) */
    .wrapper .table:not(.dataTable) {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 575.98px) {
    /* Input ukuran normal: 16px agar Safari iOS tidak auto-zoom saat fokus.
       Sengaja TIDAK menyasar -sm agar filter/tabel padat tetap ringkas. */
    .wrapper .form-control:not(.form-control-sm),
    .wrapper .form-select:not(.form-select-sm) {
        font-size: 16px;
    }
    /* Drawer hampir penuh layar di HP */
    .wrapper .offcanvas.offcanvas-end {
        width: 92vw !important;
        border-radius: 0;
    }
    /* Tombol grup aksi di header membungkus rapi */
    .wrapper .page-title-box .d-flex.gap-1,
    .wrapper .page-title-box .d-flex.gap-2 {
        flex-wrap: wrap;
    }
}