/* ============================================================================
 * Dashboard Dinkes — Komponen Bersama (global, semua halaman)
 * ----------------------------------------------------------------------------
 * Aplikasi ini punya 196 berkas view yang semuanya memakai markup baku
 * Bootstrap 4 / AdminLTE: .card (136 berkas), .btn-* (296 pemakaian),
 * .form-control (44), .table (43), .alert (54), .modal (11).
 *
 * Karena markupnya sudah seragam, penyeragaman tampilan dikerjakan di sini —
 * satu lapisan komponen — bukan dengan menyunting ratusan berkas view.
 * Konsekuensinya: halaman baru pun otomatis ikut gaya ini tanpa usaha
 * tambahan.
 *
 * Berkas ini dimuat PALING AKHIR (lihat AppAsset) supaya menimpa
 * adminlte.min.css. Seluruh warnanya mengambil token dari app-theme.css,
 * jadi ikut berubah lewat menu Setting > Warna Tema.
 *
 * Aturan skill ui-ux-pro-max yang ditegakkan di sini:
 *   focus-states, touch-target-size, color-contrast, disabled-states,
 *   input-labels, error-placement, contrast-feedback, modal-escape,
 *   scrim-legibility, table-handling, consistency, elevation-consistent
 * ========================================================================== */

/* ============================================================================
 * 1. Kerangka halaman
 * ========================================================================== */

.content-wrapper {
    background: var(--color-page-bg);
}

/* Judul halaman dicetak layout AdminLTE di luar komponen mana pun. */
.content-header h1 {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--color-text);
}

.content-header .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 13.5px;
}

.content-header .breadcrumb a {
    color: var(--color-primary);
}

/* ============================================================================
 * 2. Kartu
 * ========================================================================== */

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--app-radius);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}

.card-header {
    padding: 14px 18px;
    background: transparent;
    border-bottom: 1px solid var(--color-border);
    border-radius: var(--app-radius) var(--app-radius) 0 0;
}

.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6,
.card-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 15.5px;
    font-weight: 600;
    color: var(--color-text);
}

.card-body {
    padding: 18px;
}

.card-footer {
    padding: 14px 18px;
    background: transparent;
    border-top: 1px solid var(--color-border);
}

/* ============================================================================
 * 3. Tombol
 *
 * Warna bawaan Bootstrap diganti dengan palet status milik design system,
 * yang semuanya cukup gelap untuk dipasangkan dengan teks putih >= 4.5:1.
 * Bootstrap memakai teks GELAP pada .btn-warning (kuning terang) — di sini
 * warning sudah menjadi amber tua, jadi teksnya putih.
 * ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 8px 16px;
    font-family: var(--font-body);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.2;
    border-radius: var(--app-radius);
    border-width: 1px;
    transition: background-color var(--app-dur) var(--app-ease),
                border-color var(--app-dur) var(--app-ease),
                color var(--app-dur) var(--app-ease);
}

.btn-sm {
    min-height: 34px;
    padding: 6px 12px;
    font-size: 13px;
}

.btn-lg {
    min-height: 48px;
    padding: 12px 22px;
    font-size: 16px;
}

/* Tombol berisi ikon saja tetap memenuhi target sentuh minimum */
.btn-icon,
.btn.btn-icon {
    min-width: 40px;
    padding-left: 10px;
    padding-right: 10px;
}

/* Fokus keyboard selalu terlihat (aturan CRITICAL `focus-states`) */
.btn:focus,
.btn:focus-visible,
.btn.focus {
    outline: 3px solid var(--color-ring);
    outline-offset: 2px;
    box-shadow: none;
}

/* Disabled: opasitas 0.5 + kursor (aturan `disabled-states`) */
.btn:disabled,
.btn.disabled {
    opacity: .5;
    cursor: not-allowed;
    box-shadow: none;
}

/* Keadaan `.active` (tombol toggle) ikut disebut eksplisit. Bootstrap
   mendefinisikannya sebagai `.btn-X:not(:disabled):not(.disabled).active`
   dengan spesifisitas (0,6,0) — penimpa satu kelas tidak akan menang,
   dan tombol toggle akan kembali ke biru bawaan Bootstrap. */

.btn-primary { color: var(--color-on-primary); background-color: var(--color-primary); border-color: var(--color-primary); }
.btn-primary:hover, .btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle
{ color: var(--color-on-primary); background-color: var(--color-primary-hover); border-color: var(--color-primary-hover); }

.btn-success { color: #FFFFFF; background-color: var(--color-success); border-color: var(--color-success); }
.btn-success:hover, .btn-success:focus,
.btn-success:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active,
.show > .btn-success.dropdown-toggle
{ color: #FFFFFF; background-color: var(--color-success-hover); border-color: var(--color-success-hover); }

.btn-danger { color: #FFFFFF; background-color: var(--color-danger); border-color: var(--color-danger); }
.btn-danger:hover, .btn-danger:focus,
.btn-danger:not(:disabled):not(.disabled):active,
.btn-danger:not(:disabled):not(.disabled).active,
.show > .btn-danger.dropdown-toggle
{ color: #FFFFFF; background-color: var(--color-danger-hover); border-color: var(--color-danger-hover); }

.btn-warning { color: #FFFFFF; background-color: var(--color-warning); border-color: var(--color-warning); }
.btn-warning:hover, .btn-warning:focus,
.btn-warning:not(:disabled):not(.disabled):active,
.btn-warning:not(:disabled):not(.disabled).active,
.show > .btn-warning.dropdown-toggle
{ color: #FFFFFF; background-color: var(--color-warning-hover); border-color: var(--color-warning-hover); }

.btn-info { color: #FFFFFF; background-color: var(--color-info); border-color: var(--color-info); }
.btn-info:hover, .btn-info:focus,
.btn-info:not(:disabled):not(.disabled):active,
.btn-info:not(:disabled):not(.disabled).active,
.show > .btn-info.dropdown-toggle
{ color: #FFFFFF; background-color: var(--color-info-hover); border-color: var(--color-info-hover); }

.btn-secondary { color: #FFFFFF; background-color: var(--color-neutral); border-color: var(--color-neutral); }
.btn-secondary:hover, .btn-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle
{ color: #FFFFFF; background-color: var(--color-neutral-hover); border-color: var(--color-neutral-hover); }

/* Tombol tersier: latar putih, tepi netral */
.btn-light, .btn-default, .btn-outline-secondary {
    color: var(--color-text);
    background-color: var(--color-surface);
    border-color: var(--color-border-strong);
}

.btn-light:hover, .btn-default:hover, .btn-outline-secondary:hover {
    color: var(--color-text);
    background-color: #EEF2F7;
    border-color: var(--color-border-strong);
}

.btn-link {
    min-height: auto;
    padding: 4px 6px;
    color: var(--color-primary);
    font-weight: 600;
}

/* ============================================================================
 * 4. Formulir
 * ========================================================================== */

label,
.control-label {
    display: inline-block;
    margin-bottom: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-text);
}

/* Label kotak centang / radio adalah TEKS PILIHAN, bukan nama medan —
   kalau ikut ditebalkan, seluruh daftar pilihan tampak seperti judul. */
.form-check-label,
.custom-control-label,
.custom-file-label,
.filepond--label-action {
    margin-bottom: 0;
    font-weight: 400;
}

.form-group {
    margin-bottom: 18px;
}

.form-control,
.custom-select {
    font-family: var(--font-body);
    font-size: 14.5px;
    color: var(--color-text);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--app-radius);
    transition: border-color var(--app-dur) var(--app-ease),
                box-shadow var(--app-dur) var(--app-ease);
}

/* Tinggi minimum hanya untuk kontrol satu baris — textarea dibiarkan
   mengikuti atribut rows-nya. */
input.form-control,
select.form-control,
.custom-select {
    min-height: 42px;
    height: auto;
    padding: 8px 12px;
}

textarea.form-control {
    padding: 10px 12px;
    line-height: 1.55;
}

.form-control:focus,
.custom-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, .16);
    outline: none;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: #F1F5F9;
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.form-control::placeholder {
    color: #94A3B8;
}

/* Teks bantuan */
.form-text,
.help-block {
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--color-text-muted);
}

/* Validasi: pesan galat tepat di bawah medannya (aturan `error-placement`),
   warna galat memenuhi 4.5:1 (aturan `contrast-feedback`). */
.form-control.is-invalid,
.has-error .form-control {
    border-color: var(--color-danger);
}

.form-control.is-invalid:focus,
.has-error .form-control:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .18);
}

.invalid-feedback,
.help-block-error {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-danger);
}

.form-control.is-valid {
    border-color: var(--color-success);
}

/* Tanda wajib isi (aturan `required-indicators`) */
.required label::after,
label.required::after {
    content: " *";
    color: var(--color-danger);
    font-weight: 700;
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 3px rgba(30, 64, 175, .18);
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* ============================================================================
 * 5. Tabel
 * ========================================================================== */

.table {
    font-size: 14px;
    color: var(--color-text);
    margin-bottom: 0;
}

.table thead th {
    padding: 11px 12px;
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    background: #F8FAFC;
    border-bottom: 2px solid var(--color-border);
    border-top: 0;
    vertical-align: middle;
}

.table tbody td {
    padding: 11px 12px;
    vertical-align: middle;
    border-top: 1px solid var(--color-border);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #FBFCFE;
}

.table-hover tbody tr:hover {
    background-color: var(--color-primary-soft);
}

.table-bordered,
.table-bordered td,
.table-bordered th {
    border-color: var(--color-border);
}

/* Angka rata kolom tanpa "goyang" saat nilainya berubah */
.table td.text-right,
.table th.text-right,
.table .text-nowrap {
    font-variant-numeric: tabular-nums;
}

/* --- Kolom aksi ("#") ----------------------------------------------------
 * Sel yang berisi tombol tidak boleh membungkus. Tanpa ini, kolom "#" yang
 * sempit membuat tombol Ubah dan Hapus menumpuk ke bawah, dan tinggi baris
 * ikut membengkak.
 *
 * `:has()` dipakai supaya yang terkena HANYA sel yang benar-benar berisi
 * tombol — bukan `td:last-child` yang bisa saja berupa teks panjang dan
 * malah memaksa tabel melebar. Peramban lawas yang belum mendukung `:has()`
 * mengabaikan aturan ini dan kembali ke perilaku lama, bukan rusak.
 * ------------------------------------------------------------------------ */

.table td:has(> .btn),
.table td:has(> a.btn),
.table td:has(> button.btn),
.table td:has(> .btn-group),
.table td:has(> form > .btn) {
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
}

/* Jarak antar tombol dibuat pasti, tidak bergantung pada spasi di HTML
   (yang bisa hilang saat markup dirapatkan atau dibangun lewat JS). */
.table td .btn + .btn,
.table td .btn + form,
.table td form + .btn {
    margin-left: 6px;
}

/* Tombol beruntun dalam satu sel selalu sejajar, tidak pernah turun baris */
.table td .btn {
    display: inline-flex;
    vertical-align: middle;
    white-space: nowrap;
}

/* Tombol khusus ikon: bentuknya dijaga tetap persegi supaya deretan aksi
   di seluruh tabel terlihat sama rata. */
.table td .btn-sm {
    min-width: 34px;
    padding-left: 9px;
    padding-right: 9px;
}

.table td .btn:not(.btn-sm) {
    min-width: 40px;
}

/* Tautan pengurut kolom pada GridView */
.table thead th a {
    color: var(--color-text-muted);
    text-decoration: none;
}

.table thead th a:hover,
.table thead th.asc a,
.table thead th.desc a {
    color: var(--color-primary);
}

/* Tabel lebar harus bisa digulir mendatar, bukan merusak lebar halaman
   (aturan `table-handling`). GridView Yii membungkus tabelnya di .grid-view. */
.grid-view,
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.grid-view .summary {
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--color-text-muted);
}

.grid-view .empty {
    padding: 28px 12px;
    text-align: center;
    color: var(--color-text-muted);
}

/* ============================================================================
 * 6. Pagination (Yii LinkPager)
 * ========================================================================== */

ul.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

ul.pagination li {
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: var(--app-radius);
}

ul.pagination li a,
ul.pagination li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 38px;
    padding: 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--app-radius);
    text-decoration: none;
    transition: background-color var(--app-dur) var(--app-ease);
}

ul.pagination li a:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

ul.pagination li a:focus-visible {
    outline: 3px solid var(--color-ring);
    outline-offset: 2px;
}

/* Halaman aktif ditandai warna + bobot + tepi, bukan warna saja */
ul.pagination li.active a,
ul.pagination li.active span {
    color: var(--color-on-primary);
    background: var(--color-primary);
    border-color: var(--color-primary);
}

ul.pagination li.disabled a,
ul.pagination li.disabled span {
    color: #94A3B8;
    background: #F1F5F9;
    border-color: var(--color-border);
    cursor: not-allowed;
}

/* ============================================================================
 * 7. Modal
 * ========================================================================== */

.modal-content {
    background: var(--color-surface);
    border: 0;
    border-radius: var(--radius-lg, 14px);
    box-shadow: 0 20px 50px -12px rgba(15, 23, 42, .35);
}

.modal-header {
    align-items: flex-start;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 14px) var(--radius-lg, 14px) 0 0;
}

.modal-title {
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-text);
}

.modal-body {
    padding: 20px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--color-text);
}

.modal-footer {
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--color-border);
}

.modal-footer > * {
    margin: 0;
}

/* Tombol tutup: target sentuh penuh dan fokus terlihat.
   Bootstrap 4 memakai <button class="close"> berisi &times;. */
.modal-header .close {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    margin: -6px -6px -6px 0;
    padding: 0;
    font-size: 26px;
    font-weight: 400;
    line-height: 1;
    color: var(--color-text-muted);
    opacity: 1;
    border-radius: var(--app-radius);
    transition: background-color var(--app-dur) var(--app-ease);
}

.modal-header .close:hover {
    color: var(--color-text);
    background: #F1F5F9;
    opacity: 1;
}

.modal-header .close:focus-visible {
    outline: 3px solid var(--color-ring);
    outline-offset: 2px;
}

/* Scrim cukup pekat untuk memisahkan isi modal dari latar belakang
   (aturan `scrim-legibility`: 40-60% hitam). */
.modal-backdrop.show {
    opacity: .55;
}

/* ============================================================================
 * 8. Alert
 * ========================================================================== */

.alert {
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.55;
    border-width: 1px;
    border-left-width: 4px;
    border-radius: var(--app-radius);
}

.alert-success { color: #14532D; background-color: #F0FDF4; border-color: #BBF7D0; border-left-color: var(--color-success); }
.alert-danger,
.alert-error   { color: #7F1D1D; background-color: #FEF2F2; border-color: #FECACA; border-left-color: var(--color-danger); }
.alert-warning { color: #78350F; background-color: #FFFBEB; border-color: #FDE68A; border-left-color: var(--color-warning); }
.alert-info    { color: #0C4A6E; background-color: #F0F9FF; border-color: #BAE6FD; border-left-color: var(--color-info); }

.alert .close {
    padding: 10px 12px;
    font-size: 22px;
    opacity: .7;
}

.alert .close:hover { opacity: 1; }

.alert a {
    font-weight: 600;
    text-decoration: underline;
}

/* ============================================================================
 * 9. Badge
 * ========================================================================== */

.badge {
    padding: 5px 9px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .01em;
    border-radius: 999px;
}

.badge-primary   { color: var(--color-on-primary); background-color: var(--color-primary); }
.badge-success   { color: #FFFFFF; background-color: var(--color-success); }
.badge-danger    { color: #FFFFFF; background-color: var(--color-danger); }
.badge-warning   { color: #FFFFFF; background-color: var(--color-warning); }
.badge-info      { color: #FFFFFF; background-color: var(--color-info); }
.badge-secondary { color: #FFFFFF; background-color: var(--color-neutral); }
.badge-light     { color: var(--color-text); background-color: #F1F5F9; }

/* ============================================================================
 * 10. Komponen pihak ketiga
 * ========================================================================== */

/* --- DataTables ----------------------------------------------------------
 * Kontrol "entries per page" dan "Search" dirangkai DataTables sebagai
 * <select>/<input> yang bersebelahan langsung dengan <label>, tanpa jarak
 * sama sekali — teksnya menempel ke kotaknya.
 *
 * Diperbaiki dengan flex + gap, bukan margin pada salah satu sisi, karena
 * urutan elemennya berbeda antar kontrol: pada "length" label ada SESUDAH
 * select, pada "search" label ada SEBELUM input.
 * ------------------------------------------------------------------------ */

.dt-length,
.dt-search,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
    font-weight: 500;
}

.dt-length label,
.dt-search label {
    margin-bottom: 0;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--color-text-muted);
    white-space: nowrap;
}

/*
 * Baris kontrol (.dt-layout-row) TIDAK diutak-atik: DataTables sudah
 * mengaturnya sebagai flex + space-between lewat `div.dt-container
 * div.dt-layout-row`, yang spesifisitasnya (0,2,2) lebih tinggi daripada
 * selector satu-kelas mana pun di berkas ini. Menimpanya hanya akan
 * menghasilkan aturan mati.
 *
 * Catatan: nama kelas selnya `dt-layout-start` / `dt-layout-end`,
 * bukan `dt-start` / `dt-end`.
 */

/* DataTables memberi margin-left 3px pada kotak pencarian; dinolkan supaya
   jaraknya sepenuhnya ditentukan oleh `gap` di atas. */
div.dt-container .dt-search input {
    margin-left: 0;
}

.dt-container .dt-info,
.dataTables_wrapper .dataTables_info {
    font-size: 13px;
    color: var(--color-text-muted);
}

/* Lebar kotak isian dibatasi agar tidak menghabiskan seluruh baris */
div.dt-container .dt-search input,
.dataTables_wrapper .dataTables_filter input {
    min-width: 180px;
    max-width: 280px;
}

div.dt-container .dt-length select,
.dataTables_wrapper .dataTables_length select {
    width: auto;
    min-width: 76px;
    padding-right: 28px; /* ruang untuk panah dropdown */
}

/* `div.dt-container` disebut eksplisit: DataTables memakai
   `div.dt-container .dt-search input` (0,2,2), jadi selector dua-kelas
   biasa akan kalah dan gaya kotak isian tidak pernah muncul. */
div.dt-container .dt-search input,
div.dt-container .dt-length select,
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    min-height: 38px;
    padding: 6px 10px;
    font-size: 14px;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--app-radius);
}

div.dt-container .dt-search input:focus,
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, .16);
    outline: none;
}

.dt-container .dt-paging .dt-paging-button,
.dataTables_wrapper .dataTables_paginate .paginate_button {
    min-width: 36px;
    min-height: 36px;
    margin: 0 2px;
    padding: 0 10px !important;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-primary) !important;
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border-strong) !important;
    border-radius: var(--app-radius) !important;
}

.dt-container .dt-paging .dt-paging-button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    color: var(--color-on-primary) !important;
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.dt-container .dt-paging .dt-paging-button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    color: #94A3B8 !important;
    background: #F1F5F9 !important;
    cursor: not-allowed;
}

/* --- Select2 ------------------------------------------------------------ */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: 42px;
    padding: 4px 8px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--app-radius);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 32px;
    color: var(--color-text);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, .16);
}

.select2-dropdown {
    border-color: var(--color-border-strong);
    border-radius: var(--app-radius);
    box-shadow: 0 10px 24px -10px rgba(15, 23, 42, .28);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
}

/* --- SweetAlert2 -------------------------------------------------------- */
.swal2-popup {
    font-family: var(--font-body);
    border-radius: var(--radius-lg, 14px);
}

.swal2-title {
    font-family: var(--font-heading);
    font-size: 20px;
    color: var(--color-text);
}

.swal2-html-container {
    font-size: 14.5px;
    color: var(--color-text-muted);
}

.swal2-styled.swal2-confirm {
    background-color: var(--color-primary) !important;
    color: var(--color-on-primary) !important;
    border-radius: var(--app-radius) !important;
    font-weight: 600;
}

/* Aksi merusak diberi warna bahaya dan dipisahkan dari aksi biasa
   (aturan `destructive-emphasis`). */
.swal2-styled.swal2-deny {
    background-color: var(--color-danger) !important;
    color: #FFFFFF !important;
    border-radius: var(--app-radius) !important;
}

.swal2-styled.swal2-cancel {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-border-strong) !important;
    border-radius: var(--app-radius) !important;
    font-weight: 600;
}

.swal2-styled:focus-visible {
    outline: 3px solid var(--color-ring) !important;
    outline-offset: 2px;
    box-shadow: none !important;
}

/* Dialog konfirmasi bawaan aplikasi memakai `buttonsStyling: false` sehingga
   tombolnya adalah .btn biasa — beri jarak antar tombol dan ruang gerak. */
.swal2-actions {
    gap: 8px;
    margin-top: 18px;
}

.swal2-actions .btn {
    margin: 0;
}

/* ============================================================================
 * 11. Bawaan lama yang dipertahankan
 *
 * Dipindahkan dari blok <style> inline di layouts/main.php. Warnanya dulu
 * di-hardcode; sekarang mengambil token supaya ikut pengaturan tema.
 * ========================================================================== */

/*
 * DIBATASI ke .content-wrapper — ini penyebab label sidebar tidak sejajar
 * dengan ikonnya.
 *
 * Label menu dibungkus <p>, jadi aturan global ini menempelinya
 * margin-bottom 10px. Karena memakai `!important`, aturan itu mengalahkan
 * `.main-sidebar .nav-sidebar .nav-link p { margin: 0 }` berapa pun
 * spesifisitasnya — flexbox lalu memusatkan kotak-margin yang 10px lebih
 * tinggi di bawah, sehingga teksnya terangkat relatif terhadap ikon.
 *
 * Isi halaman tetap mendapat jarak paragraf seperti sebelumnya; sidebar,
 * navbar, dan footer berada di luar .content-wrapper sehingga tidak kena.
 */
.content-wrapper p {
    margin-bottom: 10px !important;
}

/* Pengaman: komponen yang memakai <p> sebagai label, bukan paragraf. */
.content-wrapper .nav-link p,
.content-wrapper .btn p,
.content-wrapper .dash-card__sub,
.content-wrapper .dash-metric__hint {
    margin-bottom: 0 !important;
}

/* ============================================================================
 * 12. Gerak & responsif
 * ========================================================================== */

@media (max-width: 767px) {
    .card-body { padding: 14px; }
    .modal-body { padding: 16px; }
    .btn { width: auto; }

    /* Teks isi minimal 16px di ponsel supaya iOS tidak auto-zoom saat
       medan isian difokuskan (aturan `readable-font-size`). */
    input.form-control,
    select.form-control,
    textarea.form-control {
        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn,
    .form-control,
    .modal-header .close,
    ul.pagination li a {
        transition-duration: .01ms !important;
    }
}