/* Komponen bersama P1: <x-status-timeline>, <x-help-tip>, dan <x-wizard>. Dimuat template/admin/head.blade.php. */

.status-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.status-timeline__item {
    position: relative;
    padding: 0 0 1rem 1.75rem;
}

.status-timeline__item::before {
    content: "";
    position: absolute;
    left: 0.45rem;
    top: 0.35rem;
    bottom: -0.35rem;
    width: 2px;
    background: #e3e6f0;
}

.status-timeline__item:last-child::before {
    display: none;
}

.status-timeline__dot {
    position: absolute;
    left: 0;
    top: 0.2rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #d1d3e2;
}

/*
 * .help-tip sengaja tidak diberi position: penjelasannya membentang selebar kontainer berposisi terdekat (kolom
 * Bootstrap, kartu, atau modal) tepat di bawah ikon, jadi tidak pernah terpotong di tepi layar ponsel atau laptop.
 */
.help-tip {
    vertical-align: middle;
}

.help-tip__toggle {
    display: inline-block;
    list-style: none;
    cursor: pointer;
    color: #858796;
    padding: 0 0.15rem;
}

.help-tip__toggle::-webkit-details-marker {
    display: none;
}

.help-tip__toggle:focus-visible {
    outline: 2px solid #4e73df;
    outline-offset: 2px;
    border-radius: 50%;
}

.help-tip__body {
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    z-index: 30;
    max-width: 28rem;
    /*
     * min-width adalah jaring pengaman, bukan hiasan. Lebar kotak ini mengikuti kontainer berposisi terdekat,
     * dan Bootstrap memberi .custom-control sebuah position: relative karena grafik switch-nya digambar absolut
     * terhadap kotak itu. Sebuah help-tip yang diletakkan di dalam switch karena itu terkurung pada kotak
     * selebar label: terukur 2026-11-01 di form produk, kalimatnya mengalir menjadi kolom sempit yang tinggi
     * lalu menimpa switch di bawahnya. Markup-nya sudah dibetulkan dan dijaga HelpTipPlacementTest, tetapi
     * penulis form berikutnya akan mengulangi kekeliruan yang sama di peramban, jauh sebelum CI menyentuhnya.
     * Dibatasi lebar viewport supaya pada ponsel ia tetap tidak terpotong.
     */
    min-width: min(20rem, calc(100vw - 2rem));
    margin-top: 0.35rem;
    background: #fff;
    color: #5a5c69;
    border: 1px solid #e3e6f0;
    border-radius: 0.35rem;
    padding: 0.5rem 0.75rem;
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: left;
    text-transform: none;
    white-space: normal;
}

.wizard__progress {
    height: 0.5rem;
}

.wizard__step[hidden] {
    display: none !important;
}

.wizard--enhanced .wizard__step-title {
    display: none;
}

/*
 * Tempat sebuah jabatan dalam struktur (layar HR → Roles, hr::departments.role-cell).
 *
 * Kotak centang Bootstrap 4 digambar `.custom-control-label::before` pada `top: .25rem` dengan tinggi 1rem, jadi
 * pusatnya selalu di .75rem dari atas — angka tetap yang dihitung untuk teks berukuran normal. Begitu labelnya
 * memakai `.small`, line-height-nya memendek dan teksnya naik, sehingga tulisan tampak melayang di atas kotaknya.
 * Menyamakan line-height dengan tinggi baris kontrolnya membuat keduanya kembali sebaris.
 */
.role-placement .custom-control-label.small {
    line-height: 1.5rem;
}

/*
 * Panduan antarmuka pada login pertama (perintah P12 §3, public/js/shared/tour.js).
 *
 * Yang menggelapkan halaman adalah `box-shadow` sorotannya, bukan lapisan yang menutupi: jadi menu yang sedang
 * disorot tetap terbaca sebagaimana adanya, dan `pointer-events: none` membuat orangnya tetap bisa mengeklik menu
 * itu sambil panduannya terbuka. Panduan yang mengurung pembacanya bukan panduan.
 *
 * z-index di atas tooltip Bootstrap 4 (1070), supaya sorotannya tidak tertimpa topbar atau sidebar.
 */
.tour-spot {
    position: absolute;
    z-index: 1080;
    border-radius: 0.35rem;
    box-shadow: 0 0 0 0.2rem rgba(28, 200, 138, 0.9), 0 0 0 9999px rgba(0, 0, 0, 0.55);
    pointer-events: none;
    transition: top 0.18s ease, left 0.18s ease, width 0.18s ease, height 0.18s ease;
}

.tour-callout {
    position: absolute;
    z-index: 1081;
    width: 20rem;
    max-width: calc(100vw - 1.5rem);
    padding: 1rem;
    background: #fff;
    border-radius: 0.35rem;
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.3);
}

.tour-callout:focus {
    outline: 0.15rem solid #1cc88a;
    outline-offset: 0.1rem;
}

.tour-callout-title {
    margin-bottom: 0.35rem;
    font-size: 1rem;
    font-weight: 700;
    color: #3a3b45;
}

.tour-callout-text {
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    color: #6e707e;
}

.tour-callout-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tour-callout-progress {
    flex-grow: 1;
    font-size: 0.75rem;
    color: #858796;
}

/* Target sentuh 44px (perintah P12 §7) juga di dalam panduannya sendiri. */
.tour-callout .btn {
    min-height: 2.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.tour-callout .tour-skip {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    min-height: 2.5rem;
    font-size: 0.75rem;
    color: #858796;
}

.tour-callout .tour-stop {
    display: block;
    width: 100%;
    min-height: 2.5rem;
    font-size: 0.75rem;
    color: #b7b9cc;
}

@media (prefers-reduced-motion: reduce) {
    .tour-spot {
        transition: none;
    }
}

/*
 * Target sentuh di layar ponsel (perintah P12 §7): tidak ada kendali yang lebih pendek dari 44px.
 *
 * Bawaan Bootstrap 4 adalah 38px untuk `.form-control` dan `.btn`, dan 30px untuk pemilih berkas: cukup untuk
 * tetikus, meleset untuk ibu jari, dan pada layar pencatatan pengeluaran saja ada sepuluh kendali seukuran itu.
 * `min-height` dipakai, bukan `height`, karena ia menang atas tinggi tetap Bootstrap tanpa merusak kendali yang
 * memang sudah lebih tinggi, dan hanya di bawah 768px supaya tampilan desktop tidak ikut melar.
 */
@media (max-width: 767.98px) {
    .form-control,
    .form-control-file,
    .custom-select,
    .btn {
        min-height: 2.75rem;
    }

    /* Tombol ikon persegi tetap persegi: lebarnya ikut tingginya, bukan menjadi lonjong. */
    .btn.btn-icon,
    .btn-circle {
        min-width: 2.75rem;
    }
}

/*
 * Dropdown di dalam tabel yang bisa digulir mendatar.
 *
 * `.table-responsive` memasang `overflow-x: auto`, dan `.btn-group` di dalam selnya ber-`position: relative`,
 * jadi menu dropdown yang terbuka menjadi keturunan yang **dipotong** kotak itu: diukur di layar daftar prospek,
 * menu status pada baris terakhir hanya menampilkan dua dari sepuluh pilihannya dan sisanya tidak bisa diraih
 * sama sekali. Tidak ada yang gagal, tidak ada galat, dan dari luar tombolnya tampak rusak.
 *
 * Pemotongannya dilepas **hanya selama ada menu yang terbuka**, bukan selamanya: di luar saat itu tabel yang
 * lebih lebar daripada layar tetap harus bisa digulir mendatar, dan itulah gunanya pembungkus ini. Tanpa
 * dukungan `:has()` keadaannya kembali seperti sebelumnya, tidak lebih buruk.
 */
.table-responsive:has(.dropdown-menu.show) {
    overflow: visible;
}

/*
 * Header kartu yang menampung judul dan tombol sekaligus.
 *
 * `card-header d-flex justify-content-between` dipakai 169 kali di aplikasi ini, dan 155 di antaranya tidak
 * menyebut `flex-wrap`, jadi bawaan `nowrap` yang berlaku. Sebuah item flex tidak menyusut di bawah lebar
 * konten minimumnya, dan tombol di header hampir selalu `text-nowrap`, sehingga pada layar sempit grup tombolnya
 * **meluber keluar kartu**: terukur 2026-11-01 di daftar produk pada viewport 375px, ruang isinya 262px
 * sementara grup tombolnya 228px yang mulai pada x=174, dan karena setinggi dua tombol ia naik 34px di atas
 * judulnya. Yang terlihat di layar hanya judul yang tertimpa tombol, tanpa galat apa pun.
 *
 * Satu aturan, bukan 155 suntingan: penulis header berikutnya tidak perlu mengingat apa pun, dan pada layar
 * lebar tidak ada yang berubah, sebab membungkus hanya terjadi ketika isinya memang tidak muat. `gap` adalah
 * bagian dari perbaikannya, bukan hiasan: tanpa jarak baris, tombol yang turun menempel pada judul di atasnya.
 */
.card-header.d-flex {
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

/*
 * Grup tombol di dalam header itu, dan hanya di layar yang membungkus.
 *
 * Tombolnya biasanya tinggal dua `<a class="btn">` berdampingan di dalam sebuah `<div>` polos, dipisah spasi
 * HTML saja. Begitu barisnya membungkus, spasi itu tidak memisahkan apa pun: terukur sesudah aturan di atas,
 * tombol hijau "Produk baru" menempel **0px** di bawah tombol di atasnya, yang persis keluhannya.
 *
 * Dibatasi di bawah 768px dengan sengaja, bukan karena ragu: di atas lebar itu grupnya tidak pernah membungkus,
 * jadi mengubah `display`-nya hanya menanggung risiko tata letak desktop tanpa memperbaiki apa pun. `.btn-group`
 * dikecualikan sebab tombolnya memang harus bersambung, dan tanpa dukungan `:has()` keadaannya kembali seperti
 * sebelumnya, tidak lebih buruk.
 */
@media (max-width: 767.98px) {
    .card-header.d-flex > div:not(.btn-group):has(> .btn) {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

/*
 * Lebar modal besar pada pita 768px sampai 991px.
 *
 * Laporan pemilik produk 2026-11-04, modal ubah di CMS "ukurannya jadi tidak proper". Terukur pada jendela
 * 925px: dialognya **500px** sementara kolom isiannya **300px** dan kalimat anjuran gambar membungkus menjadi
 * enam baris, padahal 400px lebar jendela menganggur di kiri dan kanannya.
 *
 * Sebabnya dua tangga yang tidak bertemu, dan keduanya milik Bootstrap. Kelas kolom (`col-md-*`) menyala pada
 * viewport 768px, sementara `.modal-lg` baru melebar ke 800px pada viewport 992px. Di antara keduanya formnya
 * dibagi empat-delapan **menurut lebar viewport** di dalam kotak yang lebarnya 500px, sebab kolom Bootstrap
 * menjawab viewport, bukan wadahnya. Di bawah 768px tidak ada masalah: kolomnya menumpuk sendiri.
 *
 * `min(92%, 800px)` dan bukan `92%` saja, supaya tidak ada lompatan: 800px adalah lebar yang sama dengan yang
 * sudah dipakai Bootstrap di atas 992px, jadi dari 768px ke atas modalnya satu lebar, dan ia hanya mengecil
 * ketika jendelanya memang tidak cukup. Terukur sesudahnya pada 925px: dialog 800px, kolom isian 500px,
 * anjurannya dua baris, tanpa guliran mendatar.
 */
@media (min-width: 768px) and (max-width: 991.98px) {
    .modal-dialog.modal-lg {
        max-width: min(92%, 800px);
    }
}

/*
 * Medan kelas ikon beserta pratinjaunya (`<x-icon-picker>`, 2026-11-12).
 *
 * Kotak pratinjaunya selebar tetap supaya medannya tidak bergeser setiap kali ikonnya berganti lebar, dan
 * daftarnya dibatasi tinggi supaya dialog tempatnya berada tidak tumbuh melewati layar ponsel.
 */
.icon-picker__preview { width: 3rem; justify-content: center; font-size: 1.1rem; }
.icon-picker__list { max-height: 15rem; overflow-y: auto; padding: .75rem; border: 1px solid #e3e6f0; border-radius: .35rem; background: #f8f9fc; }
.icon-picker__group { margin: 0 0 .5rem; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #6e707e; }
.icon-picker__group:not(:first-child) { margin-top: 1rem; }
.icon-picker__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr)); gap: .5rem; }
.icon-picker__choice {
  display: flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem;
  border: 1px solid #e3e6f0; border-radius: .35rem; background: #fff; color: #3a3b45; font-size: 1.1rem;
  cursor: pointer; transition: border-color .15s ease, color .15s ease;
}
.icon-picker__choice:hover, .icon-picker__choice:focus-visible { border-color: #108572; color: #108572; outline: none; }
.icon-picker__choice:focus-visible { box-shadow: 0 0 0 3px rgba(16, 133, 114, .25); }