/* ==========================================================================
   Lapisan aplikasi native
   ==========================================================================
   MedFlow dihantar sebagai APK Trusted Web Activity: Android tulen, satu
   pangkalan kod. TWA membuang bar alamat, tetapi ia TIDAK mengubah cara
   halaman itu berkelakuan apabila disentuh — dan tingkah laku sentuhan
   itulah yang memberitahu pengguna sama ada mereka memegang aplikasi atau
   laman web.

   Enam perkara yang mendedahkannya, semuanya diperbaiki di sini:

     1. Zum automatik iOS pada medan input di bawah 16px. Skrin melompat
        dan menjadi senget setiap kali staf menyentuh medan carian. Tiada
        aplikasi native berbuat begitu.
     2. Kilat biru pada setiap ketukan (-webkit-tap-highlight-color).
     3. Pantulan getah di hujung skrol, dan tarik-untuk-muat-semula yang
        memuatkan semula seluruh aplikasi apabila staf menatal ke atas
        dengan laju.
     4. Tekan lama pada butang navigasi memilih teksnya dan membuka menu
        salin.
     5. Maklum balas tekan yang bergantung pada :hover. Telefon tiada
        kursor: keadaan hover tersangkut selepas ketukan dan butang
        kelihatan kekal aktif.
     6. Kandungan yang mengalir ke bawah bar utama iPhone atau ke belakang
        takuk.

   Difailkan sebagai satu lapisan supaya ia boleh dibaca dan dibuang
   sebagai satu unit, dan supaya tiada satu pun daripadanya bersembunyi
   dalam enam templat.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Zum automatik iOS pada input
   --------------------------------------------------------------------------
   Safari iOS mengezum masuk apabila medan borang yang difokus mempunyai
   saiz font di bawah 16px, dan ia TIDAK mengezum keluar semula. Papan ini
   menggunakan `text-sm` (14px) pada kebanyakan input, jadi setiap ketukan
   pada medan carian menyengetkan susun atur.

   16px hanya dikuatkuasakan pada lebar telefon; pada desktop saiz asal
   templat dikekalkan.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* --------------------------------------------------------------------------
   2-4. Tingkah laku sentuhan
   -------------------------------------------------------------------------- */

html {
    /* Menghentikan pantulan getah DAN tarik-untuk-muat-semula. Tanpa ini,
       menatal ke atas dengan laju pd senarai tuntutan memuatkan semula
       seluruh aplikasi dan staf kehilangan tempatnya. */
    overscroll-behavior-y: none;
    -webkit-text-size-adjust: 100%;
}

body {
    overscroll-behavior-y: none;
    /* Kilat biru pada setiap ketukan. */
    -webkit-tap-highlight-color: transparent;
}

/* Krom aplikasi — navigasi, butang, tajuk, label — tidak boleh dipilih.
   Menekan lama butang "Check Out" sepatutnya tidak membuka menu salin.
   KANDUNGAN dikecualikan di bawah: nama pesakit, nombor rujukan dan amaun
   memang perlu boleh disalin. */
button,
a,
label,
nav,
aside,
[role="button"],
[role="tab"],
.nav-btn,
.sub-nav-btn,
.zenith-btn,
.zenith-hub-item,
.fin-tab,
.fin-btn,
h1, h2, h3, h4 {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Kandungan kekal boleh dipilih. Ini datang SELEPAS peraturan di atas
   supaya ia menang pada elemen yang bersarang di dalamnya. */
p, td, th, li, span[data-boleh-salin], input, textarea,
.fin-money, .fin-num, code, pre, .boleh-salin {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
}

/* --------------------------------------------------------------------------
   5. Maklum balas tekan, bukan tuding
   --------------------------------------------------------------------------
   Peranti sentuhan tiada kursor. `:hover` pada telefon berlaku SELEPAS
   ketukan dan tersangkut di situ sehingga sentuhan seterusnya, jadi butang
   kelihatan kekal aktif. Aplikasi native memberi maklum balas serta-merta
   ketika jari turun dan membuangnya ketika jari naik.
   -------------------------------------------------------------------------- */
@media (hover: none) {

    button:active,
    a:active,
    [role="button"]:active,
    .nav-btn:active,
    .zenith-btn:active,
    .fin-btn:active {
        opacity: .62;
        transition: opacity 40ms linear;
    }

    /* Keadaan tuding yang tersangkut selepas ketukan. */
    button:hover,
    a:hover {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   6. Kawasan selamat
   --------------------------------------------------------------------------
   Bar utama iPhone dan takuk. `viewport-fit=cover` dalam base.html
   menjadikan env(safe-area-inset-*) bermakna; kelas ini menggunakannya.
   -------------------------------------------------------------------------- */

.selamat-atas {
    padding-top: env(safe-area-inset-top, 0px);
}

.selamat-bawah {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.selamat-sisi {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

/* Navigasi bawah yang melekat mesti duduk DI ATAS bar utama, bukan di
   bawahnya. */
.nav-bawah {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 6px);
}

/* Halaman yang mempunyai navigasi bawah memerlukan ruang di hujung, jika
   tidak baris terakhir senarai tersembunyi selama-lamanya di belakangnya. */
.ada-nav-bawah {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 76px);
}

/* --------------------------------------------------------------------------
   Skrol
   -------------------------------------------------------------------------- */

.skrol-halus {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.skrol-halus::-webkit-scrollbar {
    display: none;
}

/* --------------------------------------------------------------------------
   Mod berdiri sendiri
   --------------------------------------------------------------------------
   `<html class="mod-apl">` ditetapkan oleh native-shell.js apabila
   aplikasi berjalan sebagai APK atau dipasang ke skrin utama. Gunakannya
   untuk menyembunyikan perkara yang hanya masuk akal dalam pelayar,
   seperti gesaan "Pasang Aplikasi".
   -------------------------------------------------------------------------- */

.mod-apl .sembunyi-dlm-apl {
    display: none !important;
}

.hanya-dlm-apl {
    display: none;
}

.mod-apl .hanya-dlm-apl {
    display: revert;
}

/* Dalam mod berdiri sendiri tiada bar alamat untuk menyerap tatalan
   berlebihan, jadi badan itu sendiri mesti menahannya. */
.mod-apl body {
    overscroll-behavior: none;
}

/* --------------------------------------------------------------------------
   Gerakan
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   Sandaran global untuk kelas kawasan selamat sedia ada
   --------------------------------------------------------------------------
   `.safe-area-bottom` ditakrifkan SECARA BERASINGAN dalam tiga papan
   (staff, finance, admin) dan tidak ditakrifkan langsung dalam tiga yang
   lain. Kelas yang sama bermaksud perkara yang berbeza bergantung pada
   halaman mana anda berada, dan tiada apa-apa langsung pada halaman yang
   tidak mentakrifkannya.

   Ditakrifkan sekali di sini supaya ia bermakna perkara yang SAMA di
   mana-mana. Takrifan per-papan yang sedia ada mempunyai nilai yang sama
   dan datang kemudian dalam kaskad, jadi ia menang dan tiada apa berubah
   pada halaman itu.
   -------------------------------------------------------------------------- */
.safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* --------------------------------------------------------------------------
   100vh pada iOS bukan skrin yang kelihatan
   --------------------------------------------------------------------------
   Dalam Safari iOS, `100vh` merangkumi kawasan di belakang bar alamat dan
   bar navigasi. Satu bekas tatal `height:100vh` dgn `overflow-y:auto` oleh
   itu LEBIH TINGGI daripada apa yang kelihatan, dan kira-kira 80-110px
   terakhir kandungannya tidak boleh dicapai — tiada tatalan tambahan
   membawanya masuk, kerana bekas itu sendiri sudah habis ditatal.

   Papan staf menggunakan `<main class="app-scroll ... h-screen
   overflow-y-auto">` sebagai bekas tatal utamanya, jadi baris terakhir
   setiap senarai di situ terkorban pada iPhone dalam pelayar. `100dvh`
   mengikut viewport yang benar-benar kelihatan dan mengecil/membesar
   bersama bar itu.

   Dihadkan kepada lebar telefon: dari 1024px ke atas bekas 100vh adalah
   desktop, di mana masalah ini tidak berlaku.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {

    @supports (height: 100dvh) {

        main.app-scroll {
            height: 100dvh;
        }
    }
}