/*
 * Lapisan kompatibilitas mobile (iOS Safari & Chrome Android) — mobile-first.
 *
 * Hanya berisi perbaikan lintas-halaman yang tidak dapat diselesaikan per
 * halaman. Dimuat sebelum @yield('css') sehingga halaman tetap dapat menimpa.
 * Semua aturan yang mengubah tampilan dibatasi ke perangkat sentuh
 * (pointer: coarse) atau layar sempit agar desktop tidak terpengaruh.
 */

/* ---------- Interaksi sentuh ---------- */

/* Hilangkan jeda 300ms & zoom dobel-ketuk pada kontrol; beri umpan balik ketuk
   yang halus (default WebKit berupa kotak abu-abu tebal). */
a,
button,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"],
label,
select,
summary {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(2, 132, 199, 0.12);
}

/* Tombol tidak boleh memicu seleksi teks / callout saat ditekan lama. */
button,
.btn,
.tm-btn,
[role="button"] {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* ---------- Formulir di perangkat sentuh ---------- */

@media (hover: none) and (pointer: coarse) {
    /* iOS memberi bayangan dalam & sudut bawaan pada input teks. */
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    textarea {
        -webkit-appearance: none;
        appearance: none;
    }

    /*
     * iOS Safari merender input date/time/datetime-local dengan tinggi 0 saat
     * kosong dan teks rata tengah bila tinggi kustom dipakai. Samakan dengan
     * input teks lain dan izinkan Android menampilkan picker native.
     */
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="month"] {
        -webkit-appearance: none;
        appearance: none;
        display: block;
        min-height: 34px;
        line-height: normal;
        text-align: left;
    }

    input[type="date"]::-webkit-date-and-time-value,
    input[type="time"]::-webkit-date-and-time-value,
    input[type="datetime-local"]::-webkit-date-and-time-value,
    input[type="month"]::-webkit-date-and-time-value {
        min-height: 1.2em;
        margin: 0;
        text-align: left;
    }
}

/*
 * iOS Safari melakukan zoom otomatis saat kolom dengan font < 16px difokus.
 * Mengubah ukuran hanya pada :focus tidak dapat diandalkan (pengecekan terjadi
 * sebelum gaya :focus diterapkan), jadi ukuran 16px berlaku setiap saat.
 */
@media (max-width: 767.98px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="color"]),
    select,
    textarea,
    .select2-search__field {
        font-size: 16px !important;
    }
}

/* ---------- DataTables: tombol aksi (sel tabel & baris detail) ---------- */

/*
 * SATU bentuk tombol aksi di SEMUA DataTable, di sel tabel maupun di baris detail
 * (child row): ikon saja, kotak seragam, tanpa teks (teks menjadi title/aria-label).
 *
 * Mengapa perlu aturan sendiri: DataTables Responsive membangun baris detail dari data
 * server mentah, bukan dari DOM yang sudah dinormalisasi JS, sehingga tombol lama yang
 * berlabel (mis. "Log Presensi") tampil berbeda dan teksnya terperas oleh aturan
 * "tombol aksi = 32x32px" (personal-information.css) hingga pecah satu huruf per baris.
 * font-size: 0 menyembunyikan teks mentah itu sebelum JS sempat menormalisasi.
 *
 * Ukuran dari satu token: 32px di desktop, 40px di perangkat sentuh (target tekan
 * minimal yang nyaman untuk jari).
 */
:root {
    --tm-action-size: 32px;
    --tm-action-gap: 6px;
}

@media (hover: none) and (pointer: coarse) {
    :root {
        --tm-action-size: 40px;
        --tm-action-gap: 8px;
    }
}

/* Pembungkus: satu baris rapi, jarak seragam. */
table.dataTable > tbody > tr > td .tm-table-actions,
table.dataTable > tbody > tr.child span.dtr-data .tm-action-cell {
    display: inline-flex !important;
    flex-direction: row !important;
    /* Tombol aksi TIDAK BOLEH bertumpuk/turun baris: selalu satu baris. Lebar kolom aksi yang
       menyesuaikan (lihat aturan width: 1% di bawah), bukan tombolnya yang dibungkus. */
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: var(--tm-action-gap) !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
}

/*
 * PERATAAN: semua tombol aksi DataTable RATA KANAN, dan label header kolomnya ("Aksi")
 * ikut rata kanan -- di sel tabel, header, footer, dan baris detail (child row), di semua
 * ukuran layar. Pembungkus .tm-table-actions bersifat inline-flex sehingga posisinya
 * mengikuti text-align sel; tanpa aturan ini perataan bergantung pada className yang
 * ditulis per halaman (ada yang center, ada yang kiri). Selector global ini menjadi
 * jaminan tunggal; sumber Blade/JS juga sudah diseragamkan ke text-right.
 */
table.dataTable > tbody > tr > td.tm-action-col,
table.dataTable > tbody > tr > td.tm-action-cell,
table.dataTable > thead > tr > th.tm-action-col,
table.dataTable > thead > tr > th.tm-action-head,
table.dataTable > tfoot > tr > th.tm-action-col,
table.dataTable > tfoot > tr > th.tm-action-head,
td:has(> .tm-table-actions) {
    text-align: right !important;
}

/*
 * Lebar kolom aksi = lebar isinya (shrink-to-fit): width 1% + nowrap membuat kolom melebar
 * secukupnya untuk semua tombol dalam satu baris. Lebar tetap yang ditulis per halaman
 * (mis. style="width: 120px" atau lebar inline hasil hitung DataTables) sering lebih sempit
 * dari 3 tombol sehingga tombol ketiga turun ke baris kedua; !important mengalahkan
 * style inline tersebut.
 */
table.dataTable > thead > tr > th.tm-action-col,
table.dataTable > thead > tr > th.tm-action-head,
table.dataTable > tbody > tr > td.tm-action-col,
table.dataTable > tbody > tr > td.tm-action-cell,
table.dataTable > tfoot > tr > th.tm-action-col,
table.dataTable > tfoot > tr > th.tm-action-head {
    width: 1% !important;
    min-width: max-content;
    white-space: nowrap !important;
}

/* Kolom aksi tidak dapat diurutkan: sembunyikan panah urut & samakan padding kanan dengan sel. */
table.dataTable > thead > tr > th.tm-action-col::before,
table.dataTable > thead > tr > th.tm-action-col::after,
table.dataTable > thead > tr > th.tm-action-head::before,
table.dataTable > thead > tr > th.tm-action-head::after {
    display: none !important;
    content: none !important;
}

table.dataTable > thead > tr > th.tm-action-col,
table.dataTable > thead > tr > th.tm-action-head {
    padding-right: var(--tm-cell-pad-x, 12px) !important;
    background-image: none !important;
    cursor: default;
}

/* Baris detail: tombol di sisi kanan kolom nilai. */
table.dataTable > tbody > tr.child span.dtr-data .tm-table-actions,
table.dataTable > tbody > tr.child span.dtr-data .tm-action-cell {
    display: flex !important;
    width: 100% !important;
    justify-content: flex-end !important;
    text-align: right !important;
}

/* Tombol: kotak seragam, ikon saja. */
table.dataTable > tbody > tr > td .tm-table-actions .tm-btn,
table.dataTable > tbody > tr > td .tm-table-actions .btn,
table.dataTable > tbody > tr > td.tm-action-cell .tm-btn,
table.dataTable > tbody > tr > td.tm-action-cell .btn,
table.dataTable > tbody > tr.child span.dtr-data .tm-btn,
table.dataTable > tbody > tr.child span.dtr-data .btn,
table.dataTable > tbody > tr.child span.dtr-data .tm-btn-icon-only {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    width: var(--tm-action-size) !important;
    min-width: var(--tm-action-size) !important;
    max-width: var(--tm-action-size) !important;
    height: var(--tm-action-size) !important;
    min-height: var(--tm-action-size) !important;
    max-height: var(--tm-action-size) !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    border-radius: 8px !important;
    font-size: 0 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

/* Ikon: ukuran sama di semua konteks (gambar linear 17px / ikon font 16px). */
table.dataTable > tbody > tr > td .tm-table-actions .tm-btn > img,
table.dataTable > tbody > tr > td.tm-action-cell .tm-btn > img,
table.dataTable > tbody > tr.child span.dtr-data .tm-btn > img,
table.dataTable > tbody > tr.child span.dtr-data .btn > img {
    width: 17px !important;
    height: 17px !important;
    max-width: 17px !important;
    max-height: 17px !important;
    margin: 0 !important;
    object-fit: contain !important;
}

table.dataTable > tbody > tr > td .tm-table-actions .tm-btn > i,
table.dataTable > tbody > tr > td .tm-table-actions .tm-btn > span[class*="ti-"],
table.dataTable > tbody > tr > td.tm-action-cell .tm-btn > i,
table.dataTable > tbody > tr.child span.dtr-data .tm-btn > i,
table.dataTable > tbody > tr.child span.dtr-data .tm-btn > span[class*="ti-"],
table.dataTable > tbody > tr.child span.dtr-data .btn > i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 17px !important;
    height: 17px !important;
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1 !important;
}

/* Teks tombol disembunyikan di SEMUA konteks (tersedia sebagai tooltip & aria-label). */
table.dataTable > tbody > tr > td .tm-btn-label,
table.dataTable > tbody > tr.child span.dtr-data .tm-btn-label {
    display: none !important;
}

/* ---------- Tata letak ---------- */

/* Gambar/media tidak boleh melebihi lebar layar (penyebab scroll horizontal). */
img,
video,
canvas {
    max-width: 100%;
}

/* Layar ber-notch dalam mode landscape (viewport-fit=cover): jaga konten
   dari area poni & gesture bar samping. */
@supports (padding: max(0px)) {
    .navbar.fixed-top {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    #myhome {
        padding-left: max(0.75rem, env(safe-area-inset-left));
        padding-right: max(0.75rem, env(safe-area-inset-right));
    }
}

/* Sidebar off-canvas: gulir di dalam sidebar tidak boleh menggulir halaman di belakangnya. */
.sidebar {
    overscroll-behavior: contain;
}