/* ============================================= Mobile Web & Android browser fixes Satu stylesheet untuk login, owner, staff ============================================= */ html.is-mobile { /* Jangan overflow-x di — di Android bisa mematikan scroll vertikal */ -webkit-text-size-adjust: 100%; } html.is-mobile body { max-width: 100vw; font-size: max(14px, 1rem); } /* --- Login / Daftar di HP Android --- */ @media (max-width: 768px) { .login-page { display: flex; flex-direction: column; min-height: 100dvh; min-height: -webkit-fill-available; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } .login-mobile-hero { flex-shrink: 0; min-height: 0; } .login-mobile-hero__brand { min-width: 0; } .login-mobile-hero__brand > div:last-child { min-width: 0; flex: 1; } .login-main { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; width: 100%; overflow: visible; } .login-card { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; max-height: none; overflow-y: auto; -webkit-overflow-scrolling: touch; } .login-footer-saas { flex-shrink: 0; margin-top: auto; } .auth-entry-tabs { background: var(--surface-2); } .auth-entry-tab.is-active { background: var(--surface); color: var(--primary); } #panelSignup .auth-email-form { padding-bottom: 8px; } .auth-success-msg { margin-bottom: 12px; } .error-msg { word-break: break-word; } } html.is-android-web.login-page .login-card { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); } /* --- Owner dashboard di HP --- */ @media (max-width: 768px) { /* Scroll dokumen (bukan trap di .main-content) — lebih stabil di Chrome Android */ body.owner-page { overflow-x: clip; overflow-y: auto; height: auto; min-height: 100dvh; min-height: -webkit-fill-available; -webkit-overflow-scrolling: touch; touch-action: pan-y; } body.owner-page .app-layout { min-height: 100dvh; min-height: -webkit-fill-available; height: auto; } body.owner-page .main-content { width: 100%; max-width: 100vw; overflow: visible; height: auto; min-height: 0; } body.owner-page .content-header { position: sticky; top: 0; z-index: 60; width: 100%; box-sizing: border-box; } body.dr-version-banner-visible.owner-page .content-header { top: var(--dr-version-banner-height, 52px); } body.dr-version-banner-visible.owner-page .main-content { padding-top: 0; } body.owner-page .content-body { width: 100%; overflow: visible; box-sizing: border-box; } body.owner-page .card, body.owner-page .owner-workflow-hero, body.owner-page .stat-card { max-width: 100%; box-sizing: border-box; } body.owner-page .table-wrap { width: 100%; max-width: 100%; box-sizing: border-box; } body.owner-page .owner-mobile-nav { z-index: 130; } body.owner-page .sidebar { z-index: 140; } .dr-version-banner { z-index: 125; flex-direction: column; align-items: stretch; text-align: center; padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top, 0px)); } .dr-version-banner__actions { justify-content: center; width: 100%; } .dr-version-banner__actions .dr-ver-btn { flex: 1; min-width: 0; } .dr-version-overlay { padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } .dr-version-modal { max-height: 90dvh; overflow-y: auto; } } /* --- Staff scanner Android --- */ @media (max-width: 768px) { body[data-staff-page] { overflow-x: hidden; max-width: 100vw; } body.is-android-web .bottom-nav { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); } body.is-android-web .staff-header, body.is-android-web .scanner-header { padding-top: max(12px, env(safe-area-inset-top, 0px)); } } /* Hindari zoom aneh saat fokus input di iOS/Android lama */ @media (max-width: 768px) { .input, .auth-email-form .input, select, textarea { font-size: 16px !important; } }