/* ==============================================================================
   TORI — LAPISAN UI/UX PONSEL BERSAMA (Pelanggan & Mitra)  · app_mobile.css
   Dimuat oleh includes/header.php dan halaman yang memiliki <head> sendiri
   (mitra_dashboard.php, apotek_dashboard.php). Target: Android & iPhone, 320–480px.
   ============================================================================== */

/* ------------------------------------------------------------------------------
   1. DASAR SENTUH: tanpa jeda tap 300ms, tanpa kilatan biru, teks tidak di-zoom otomatis
   ------------------------------------------------------------------------------ */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
* {
    -webkit-tap-highlight-color: transparent;
}
a, button, [role="button"], [onclick], input, select, textarea, label, summary {
    touch-action: manipulation;
}
img, video, canvas, iframe {
    max-width: 100%;
}
/* Umpan balik sentuhan halus pada tombol */
button:active, .btn:active, [class*="btn"]:active, a[class*="btn"]:active {
    transform: scale(0.97);
}

/* iOS Safari memperbesar layar bila font input < 16px — kunci 16px khusus iOS */
@supports (-webkit-touch-callout: none) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
    select, textarea {
        font-size: 16px !important;
    }
}

/* ------------------------------------------------------------------------------
   2. TATA LETAK: wadah flex tidak boleh melebar melebihi layar
      (penyebab Dasbor Rental terpotong di kanan)
   ------------------------------------------------------------------------------ */
.page-container > *,
.mitra-container > * {
    min-width: 0;
    max-width: 100%;
}
.rent-dash-wrap {
    width: 100%;
    box-sizing: border-box;
}

/* ------------------------------------------------------------------------------
   3. TARGET SENTUH: tombol jumlah (+/−) minimal 36px agar mudah ditekan jari
   ------------------------------------------------------------------------------ */
.qty-btn, .btn-qty {
    min-width: 36px !important;
    min-height: 36px !important;
    font-size: 18px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
.qty-ctrl, .qty-display {
    gap: 8px;
}

/* ------------------------------------------------------------------------------
   4. BARIS CHIP / TAB HORIZONTAL: geser halus, snap, tanpa scrollbar, tepi memudar
      (kelas .am-chip-row ditambahkan otomatis oleh app_mobile.js)
   ------------------------------------------------------------------------------ */
.am-chip-row {
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.am-chip-row::-webkit-scrollbar { display: none; }
.am-chip-row > * { scroll-snap-align: start; flex-shrink: 0 !important; white-space: nowrap; }
.am-chip-row.am-more-right {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
}
.am-chip-row.am-more-left.am-more-right {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 36px), transparent);
            mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 36px), transparent);
}
.am-chip-row.am-more-left:not(.am-more-right) {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 24px), transparent);
            mask-image: linear-gradient(to left, #000 calc(100% - 24px), transparent);
}

/* ------------------------------------------------------------------------------
   5. TOMBOL CHAT MELAYANG: tidak menutupi tombol konten, menepi saat menggulir
   ------------------------------------------------------------------------------ */
.tori-global-cs-fab {
    transition: transform .25s ease, opacity .25s ease !important;
}
.tori-global-cs-fab.am-fab-tucked {
    transform: translateX(calc(100% - 14px)) scale(.85) !important;
    opacity: .55 !important;
}

/* ------------------------------------------------------------------------------
   6. HEADER DASBOR DRIVER: hindari tabrakan logo/tombol di layar sempit.
      ToriPay & rating sudah tampil di kartu profil tepat di bawah header.
   ------------------------------------------------------------------------------ */
@media (max-width: 480px) {
    .mitra-navbar {
        gap: 8px !important;
        padding-left: max(12px, env(safe-area-inset-left)) !important;
        padding-right: max(12px, env(safe-area-inset-right)) !important;
    }
    .mitra-navbar .mitra-brand { min-width: 0; flex-shrink: 1; }
    .mitra-navbar .mitra-brand-title { display: none !important; }
    .mitra-navbar .mitra-nav-actions > a[href^="pay_index.php"],
    .mitra-navbar .mitra-nav-actions > div { display: none !important; }
    .mitra-navbar .mitra-nav-actions { flex-shrink: 0; }
}

/* (Area aman iPhone sudah ditangani style.css via --safe-top / --safe-bottom) */

/* ------------------------------------------------------------------------------
   7. KETERBACAAN: teks sangat kecil dinaikkan otomatis (app_mobile.js menandai .am-text-min)
   ------------------------------------------------------------------------------ */
html body .am-text-min,
html body .am-text-min.am-text-min {
    font-size: 11px !important;
    line-height: 1.35 !important;
}

/* Hormati preferensi kurangi animasi */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}