/*
 * Standar tampilan tombol VTA Online (pasangan assets/js/vta-standar-ui.js).
 * Dimuat di semua halaman lewat partials/head-css.php.
 *
 * ATURAN BAKU
 *   Bentuk  : sudut membulat seragam, huruf tebal, tinggi seragam per ukuran.
 *   Warna   : biru (primary) = aksi utama; hijau (success) = simpan/ setujui;
 *             merah (danger) = aksi berisiko (hapus, tolak, batalkan);
 *             netral (light bergaris) = Tutup/ Batal/ Kembali.
 *   Letak   : di footer modal, Tutup/ Batal selalu paling kiri dari kelompok
 *             tombol, aksi utama paling kanan; jarak antartombol seragam.
 */

/* ---------- Bentuk tombol ---------- */
.btn {
    border-radius: .5rem;
    font-weight: 600;
    letter-spacing: .01em;
}

.btn-sm,
.btn-group-sm > .btn {
    border-radius: .4rem;
}

.btn-lg,
.btn-group-lg > .btn {
    border-radius: .6rem;
}

.btn.rounded-pill,
.btn.btn-rounded {
    border-radius: 50rem;
}

.btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-group > .btn:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.btn i.mdi,
.btn i.bx,
.btn i.fa,
.btn i.fas,
.btn i.far {
    vertical-align: -0.05em;
}

/* Tombol netral (Tutup/ Batal/ Kembali). */
.btn-netral,
.modal-footer .btn[data-bs-dismiss="modal"]:not(.btn-close),
.modal-footer .btn[data-dismiss="modal"]:not(.btn-close) {
    color: #334155;
    background-color: #f8fafc;
    border: 1px solid #cbd5e1;
}

.btn-netral:hover,
.modal-footer .btn[data-bs-dismiss="modal"]:not(.btn-close):hover,
.modal-footer .btn[data-dismiss="modal"]:not(.btn-close):hover {
    color: #0f172a;
    background-color: #eef2f7;
    border-color: #94a3b8;
}

/* ---------- Letak tombol di footer modal ---------- */
.modal-footer {
    gap: .5rem;
}

.modal-footer > .btn,
.modal-footer > a.btn {
    margin: 0;
}

/* Tutup/ Batal paling kiri dari kelompok tombol; aksi lain mengikuti urutan
   aslinya di sebelah kanannya. */
.modal-footer > .btn[data-bs-dismiss="modal"],
.modal-footer > .btn[data-dismiss="modal"] {
    order: -1;
}

/* ---------- Dialog SweetAlert ---------- */
.vta-swal-aksi {
    gap: .5rem;
    flex-wrap: wrap;
}

.vta-swal-aksi .vta-swal-btn {
    margin: 0;
    min-width: 6.5rem;
    padding: .5rem 1.1rem;
    font-size: .9rem;
}

.swal2-popup {
    border-radius: .9rem;
}

.swal2-title {
    font-size: 1.25rem;
    font-weight: 700;
}

.swal2-html-container {
    font-size: .92rem;
}

@media (max-width: 575.98px) {
    .vta-swal-aksi .vta-swal-btn {
        flex: 1 1 40%;
    }
}

/* Tombol aksi datatable yang diberi label otomatis (Detail/ Hapus). */
td .btn[data-vta-label],
td a[data-vta-label] {
    white-space: nowrap;
}

/* Tombol aksi datatable tersusun atas-bawah (lihat tumpuk() di
   vta-standar-ui.js). !important karena wadahnya umumnya memakai .d-flex
   Bootstrap yang juga !important. */
td .vta-aksi-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: .35rem !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    min-width: 6.5rem;
}

td .vta-aksi-grid > .btn,
td .vta-aksi-grid > a.btn {
    width: 100%;
    margin: 0 !important;
}

td.vta-aksi-td > .btn,
td.vta-aksi-td > a.btn {
    display: block;
    width: 100%;
    min-width: 6.5rem;
    margin: 0 0 .35rem 0 !important;
}

td.vta-aksi-td > .btn:last-child,
td.vta-aksi-td > a.btn:last-child {
    margin-bottom: 0 !important;
}