/*
 * Penyeragam tampilan modal.
 * =========================================================================
 *
 * MASALAHNYA. Sebagian besar kotak dialog di aplikasi ini lahir dari
 * Layout::modal milik Orchid (36 pemakaian di sekitar 30 layar), sehingga
 * seluruhnya mewarisi satu template dan otomatis seragam. Tetapi ada lima
 * kotak yang ditulis tangan langsung di view karena layarnya tidak memakai
 * Layout::modal:
 *
 *   report/partials/rincian-akun-modal   fields/search_patient
 *   components/customModal               fields/utm
 *   partials/chart_of_account_toolbar
 *
 * Kelimanya tampil berbeda-beda: ada yang tanpa animasi, ada yang tidak
 * menjadi layar penuh di ponsel, judulnya tebal padahal Orchid memakai huruf
 * ringan, dan tombol tutupnya berupa tombol abu-abu padahal Orchid memakai
 * tautan.
 *
 * KENAPA LEWAT CSS. Menyamakannya dengan menyunting kelima berkas berarti
 * lima tempat yang harus diingat setiap kali gaya Orchid berubah, dan dua di
 * antaranya berkas vendor yang bisa tertimpa saat pembaruan. Berkas ini
 * menyeragamkannya dari SATU tempat tanpa menyentuh satu pun view.
 *
 * ATURAN MAINNYA. Yang ditiru di sini murni tampilan. Tidak ada satu pun
 * aturan yang mengubah tata letak isi kotaknya, supaya kotak yang sudah rapi
 * tidak ikut bergeser.
 *
 * Aldo, 29 Agustus 2026.
 */

/* -------------------------------------------------------------------------
 * 1. Animasi masuk
 *
 * Orchid memakai kelas .center-scale -- kotaknya membesar dari 80% sambil
 * memudar masuk. Aturan aslinya hanya tiga baris; di sini diterapkan ke
 * SELURUH modal supaya yang ditulis tangan tidak perlu menyebut kelas itu.
 * ------------------------------------------------------------------------- */
.modal.fade {
    transition: all .15s cubic-bezier(.4, 0, .2, 1) !important;
}

.modal.fade .modal-dialog {
    opacity: 0;
    transform: scale(.8);
    transition: transform .15s cubic-bezier(.4, 0, .2, 1), opacity .15s linear;
}

.modal.fade.in .modal-dialog,
.modal.fade.show .modal-dialog {
    opacity: 1;
    transform: scale(1);
}

/* Yang sudah menyebut .center-scale sendiri tetap dibiarkan apa adanya --
   aturannya identik, jadi tidak saling menimpa. */

/* -------------------------------------------------------------------------
 * 2. Layar penuh di perangkat kecil
 *
 * Orchid memakai .modal-fullscreen-md-down. Kotak yang ditulis tangan sering
 * lupa menyebutnya, sehingga di ponsel dialognya mengambang sempit di tengah
 * dan isinya terpotong. Ambang 767.98px disamakan dengan ambang md Bootstrap
 * yang dipakai Orchid.
 * ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .modal .modal-dialog {
        width: 100%;
        max-width: none;
        height: 100%;
        margin: 0;
    }

    .modal .modal-dialog .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }

    /* Isi yang panjang tetap bisa digulir, kepala dan kaki kotak tetap di tempat. */
    .modal .modal-dialog .modal-body {
        overflow-y: auto;
    }
}

/* -------------------------------------------------------------------------
 * 3. Judul
 *
 * Orchid: <h4 class="modal-title text-black fw-light">. Kotak lain memakai h5
 * atau h6 bawaan Bootstrap yang tebal, sehingga terlihat lebih "berat"
 * daripada kotak di sebelahnya. Disamakan lewat gaya, bukan lewat tag.
 * ------------------------------------------------------------------------- */
.modal .modal-title {
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.2;
    color: #000;
}

/* -------------------------------------------------------------------------
 * 4. Tombol tutup di kaki kotak
 *
 * Orchid memakai tombol bergaya tautan, bukan tombol abu-abu penuh. Yang
 * disasar HANYA tombol yang tugasnya menutup (data-bs-dismiss) -- tombol aksi
 * seperti Simpan atau Hapus sengaja tidak ikut, karena warnanya memang
 * membedakan tindakan.
 * ------------------------------------------------------------------------- */
.modal .modal-footer .btn[data-bs-dismiss="modal"]:not(.btn-close) {
    background-color: transparent;
    border-color: transparent;
    color: var(--bs-link-color, #0d6efd);
    text-decoration: underline;
    box-shadow: none;
}

.modal .modal-footer .btn[data-bs-dismiss="modal"]:not(.btn-close):hover {
    background-color: transparent;
    color: var(--bs-link-hover-color, #0a58ca);
}

/* -------------------------------------------------------------------------
 * 5. Jarak kepala dan kaki
 *
 * Beberapa kotak buatan tangan memberi padding sendiri sehingga judulnya
 * menempel ke isi. Disamakan dengan jarak bawaan Orchid.
 * ------------------------------------------------------------------------- */
.modal .modal-header,
.modal .modal-footer {
    padding: 1rem 1.5rem;
}

.modal .modal-body {
    padding: 1rem 1.5rem;
}


/* -------------------------------------------------------------------------
 * 6. Tinggi kotak dan area gulir
 *
 * MASALAHNYA. Kotak yang isinya panjang -- daftar Pemesanan Barang, misalnya --
 * tumbuh melampaui tinggi layar. Kepala kotak terdorong ke atas, kaki kotak
 * beserta tombolnya terdorong ke bawah sampai tidak terjangkau, dan yang
 * bergulir adalah SELURUH halaman, bukan isi kotaknya.
 *
 * YANG DIINGINKAN. Kotak berhenti setinggi layar; kepala dan kaki tetap di
 * tempatnya; hanya bagian isi yang bergulir. Bootstrap sudah menyediakannya
 * lewat .modal-dialog-scrollable, tetapi kelas itu harus disebut satu per satu
 * di setiap kotak -- dan sebagian besar kotak di sini tidak menyebutnya.
 *
 * Aturan di bawah memberlakukannya untuk SEMUA kotak sekaligus.
 *
 * Dipakai max-height, BUKAN height: kotak yang isinya pendek harus tetap
 * pendek dan tidak ikut memenuhi layar.
 * ------------------------------------------------------------------------- */
/* PENTING: height, bukan max-height.
 *
 * Percobaan pertama memakai max-height pada .modal-dialog dengan harapan kotak
 * pendek tetap pendek. Hasilnya tidak bekerja sama sekali: persentase pada
 * max-height anak TIDAK terhitung bila tinggi induknya sendiri tidak pasti.
 * .modal-content tetap tumbuh sampai 4956px di dalam dialog yang sudah dibatasi
 * 674px, dan kaki kotaknya mendarat di titik 4911 -- jauh di luar layar.
 *
 * Itu sebabnya Bootstrap sendiri memakai height pada .modal-dialog-scrollable.
 * Kotak yang isinya pendek tetap terlihat pendek karena yang tinggi hanyalah
 * bingkai dialog yang tembus pandang; .modal-content-nya tetap seukuran isi. */
.modal .modal-dialog {
    height: calc(100% - 3.5rem);
}

.modal .modal-content {
    max-height: 100%;
    overflow: hidden;
}

.modal .modal-body {
    overflow-y: auto;
}

/* Kepala dan kaki tidak boleh ikut menyusut saat isinya panjang -- kalau
   dibiarkan, keduanya gepeng dan tombolnya sulit ditekan. */
.modal .modal-header,
.modal .modal-footer {
    flex-shrink: 0;
}

/* Di layar kecil kotaknya sudah penuh satu layar (aturan nomor 2), jadi
   tingginya diambil seluruhnya tanpa sisa margin. */
@media (max-width: 767.98px) {
    .modal .modal-dialog {
        height: 100%;
    }
}