/* ── PWA & Responsive Styles ──────────────────────────────────────────── */ /* ── Mobile Native Feel (Disable Text Selection on UI Elements) ──────── */ @media (max-width: 768px) { label, .form-label, .tabbar-label, .btn, .menu-toggle, .nav-link, .card-title, h1, h2, h3, h4, h5, h6 { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; /* Disable long press context menu on iOS */ } } /* ── Hamburger toggle (hidden on desktop) ─────────────────────────────── */ .menu-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; background: transparent; border: none; border-radius: var(--radius-md); font-size: 1.125rem; color: var(--color-text-muted); cursor: pointer; flex-shrink: 0; -webkit-tap-highlight-color: transparent; transition: background-color 0.15s, color 0.15s; } .menu-toggle:hover, .menu-toggle:focus-visible { background-color: var(--color-surface-muted); color: var(--color-text-main); outline: none; } /* ── Sidebar overlay (mobile) ─────────────────────────────────────────── */ /* Drawer dikendalikan app.js via class `drawer-open` pada . */ .drawer-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.5); z-index: 150; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; } body.drawer-open .drawer-overlay { opacity: 1; visibility: visible; } /* ── PWA standalone: account for status bar on iOS ───────────────────── */ @media (display-mode: standalone) { .side-drawer { padding-top: env(safe-area-inset-top, 0px); } .app-header { padding-top: env(safe-area-inset-top, 0px); height: calc(var(--header-height) + env(safe-area-inset-top, 0px)); min-height: calc(var(--header-height) + env(safe-area-inset-top, 0px)); } .content-wrapper { padding-bottom: env(safe-area-inset-bottom, 0px); } } /* ── Window Controls Overlay (desktop PWA installed) ─────────────────── */ @media (display-mode: window-controls-overlay) { .app-header { padding-left: max(env(titlebar-area-x, 0px), var(--spacing-xl)); padding-top: 0; height: calc(var(--header-height) + env(titlebar-area-height, 0px)); padding-top: env(titlebar-area-height, 0px); } } /* ── Drawer mode: di bawah desktop (< 1024px) ─────────────────────────── */ /* Selaras dengan app.js: desktopNavQuery = (min-width: 1024px). */ @media (max-width: 1023.98px) { /* Tampilkan hamburger */ .menu-toggle { display: flex; } /* Sidebar menjadi slide-in drawer, dikontrol body.drawer-open */ .side-drawer { transform: translateX(-100%); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s ease; z-index: 200; box-shadow: none; padding-top: env(safe-area-inset-top, 0px); } body.drawer-open .side-drawer { transform: translateX(0); box-shadow: var(--shadow-xl); } /* Konten melebar penuh */ .content-wrapper { margin-left: 0; width: 100%; max-width: 100%; } /* Header menyesuaikan safe-area */ .app-header { padding-top: env(safe-area-inset-top, 0px); height: calc(var(--mobile-header-height) + env(safe-area-inset-top, 0px)); min-height: calc(var(--mobile-header-height) + env(safe-area-inset-top, 0px)); } /* Target sentuh ramah (min 44×44px) */ .btn { min-height: 44px; padding: 0.625rem 1rem; } .drawer-link { min-height: 44px; padding: var(--spacing-sm) var(--spacing-lg); } .notification-toggle { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; } } /* ── Tablet (769px – 1023px): sidebar drawer + search ringkas ─────────── */ @media (min-width: 769px) and (max-width: 1023.98px) { .content-area { padding: var(--spacing-lg); } .header-search { width: 280px; } } /* ── Phone (≤ 768px) ──────────────────────────────────────────────────── */ @media (max-width: 768px) { .app-header { display: none !important; } /* Sembunyikan kolom pencarian di layar kecil */ .header-search { display: none; } /* Sembunyikan teks nama di samping avatar (avatar tetap) */ .profile-menu-summary-text { display: none; } .content-area { padding: var(--spacing-md); padding-bottom: calc(var(--spacing-md) + env(safe-area-inset-bottom, 0px)); width: 100%; max-width: 100%; box-sizing: border-box; } .card { padding: var(--spacing-md); } .screen-heading { flex-direction: column; align-items: flex-start; gap: var(--spacing-sm); } } /* ── Small phones (≤ 390px) ───────────────────────────────────────────── */ @media (max-width: 390px) { .content-area { padding: var(--spacing-sm); padding-bottom: calc(var(--spacing-sm) + env(safe-area-inset-bottom, 0px)); } } /* ── Desktop refinements (≥ 1024px) ──────────────────────────────────── */ @media (min-width: 1024px) { .side-drawer { transition: none; } /* Overlay tidak pernah tampil di desktop */ .drawer-overlay { display: none; } } /* ── PWA Install Banner ───────────────────────────────────────────────── */ #pwa-install-banner { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: var(--spacing-lg); background: rgba(10, 20, 40, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity 0.28s ease; } #pwa-install-banner.is-open { opacity: 1; pointer-events: auto; } #pwa-install-card { background: var(--color-surface); border-radius: var(--radius-xl); padding: var(--spacing-xl); width: 100%; max-width: 400px; box-shadow: 0 20px 60px -10px rgba(10, 20, 60, 0.35), 0 8px 20px -4px rgba(10, 20, 60, 0.2); border: 1px solid var(--color-border); display: flex; flex-direction: column; gap: var(--spacing-md); transform: scale(0.94) translateY(12px); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } #pwa-install-banner.is-open #pwa-install-card { transform: scale(1) translateY(0); } @media (max-width: 480px) { #pwa-install-banner { padding: var(--spacing-md); /* Keep align-items center (inherited) instead of flex-end */ } #pwa-install-card { max-width: 100%; border-radius: var(--radius-xl); transform: scale(0.94) translateY(12px); } #pwa-install-banner.is-open #pwa-install-card { transform: scale(1) translateY(0); } } .pwa-install-header { display: flex; align-items: center; gap: var(--spacing-md); } .pwa-install-icon { width: 52px; height: 52px; border-radius: var(--radius-md); object-fit: contain; flex-shrink: 0; } .pwa-install-title { font-weight: 700; font-size: 0.9375rem; color: var(--color-text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pwa-install-sub { font-size: 0.8rem; color: var(--color-text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pwa-close-btn { background: none; border: none; padding: 4px 6px; border-radius: var(--radius-sm); cursor: pointer; color: var(--color-text-muted); font-size: 1rem; line-height: 1; flex-shrink: 0; transition: background 0.15s, color 0.15s; } .pwa-close-btn:hover { background: var(--color-hover); color: var(--color-text-main); } .pwa-install-perks { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; } .pwa-install-perks span { display: inline-flex; align-items: center; gap: 4px; font-size: 0.75rem; font-weight: 500; color: var(--color-primary); background: var(--color-primary-light, rgba(37,99,235,0.08)); border-radius: var(--radius-sm); padding: 3px 8px; } .pwa-install-perks span i { font-size: 0.7rem; } .pwa-ios-steps { background: var(--color-primary-light, rgba(37,99,235,0.08)); color: var(--color-text-main); border-radius: var(--radius-md); padding: var(--spacing-md); font-size: 0.8125rem; line-height: 1.6; } .pwa-ios-steps i { color: var(--color-primary); } .pwa-install-actions { display: flex; gap: var(--spacing-sm); } .pwa-install-actions .btn { flex: 1; } .pwa-install-actions .btn[hidden] { display: none; } /* ═══════════════════════════════════════════════════════════════════ UNIFIED MOBILE TOPBAR (semua role: AGENT, ADMIN, DISPATCHER) ═══════════════════════════════════════════════════════════════════ */ /* Topbar unified: grid 3 kolom — kiri (hamburger/logo), tengah (logo), kanan (actions) */ .agent-mobile-topbar, .admin-mobile-topbar, .dispatcher-mobile-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 300; height: calc(52px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 14px 0; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.97); border-bottom: 1px solid rgba(229, 231, 235, 0.9); box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-sizing: border-box; width: 100%; max-width: 100vw; overflow: hidden; } .mobile-logo-center { display: flex; justify-content: center; align-items: center; min-width: 0; } .mobile-logo-center img { height: 26px; width: auto; max-width: 120px; object-fit: contain; } .mobile-topbar-actions { display: inline-flex; align-items: center; gap: 6px; } /* Notification bell (shared) */ .agent-mobile-bell, .admin-mobile-bell, .dispatcher-mobile-bell { position: relative; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; color: #111827; font-size: 1.15rem; border-radius: 50%; -webkit-tap-highlight-color: transparent; } .agent-mobile-bell span, .admin-mobile-bell span, .dispatcher-mobile-bell span { position: absolute; top: 3px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #F97316; color: #fff; font-size: 0.6rem; line-height: 16px; text-align: center; font-weight: 700; } /* Logout button (shared) */ .mobile-logout-link { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #FECACA; border-radius: 50%; color: #DC2626; background: #FEF2F2; font-size: 0.9rem; -webkit-tap-highlight-color: transparent; } /* ═══════════════════════════════════════════════════════════════════ REDESIGNED BOTTOM NAV — Floating Pill Style ═══════════════════════════════════════════════════════════════════ */ .mobile-tabbar { position: fixed; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); left: max(14px, env(safe-area-inset-left, 14px)); right: max(14px, env(safe-area-inset-right, 14px)); margin: 0 auto; z-index: 300; max-width: 420px; height: 64px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 64px; align-items: center; justify-items: stretch; column-gap: 2px; background: rgba(255, 255, 255, 0.98); border-radius: 24px; box-shadow: 0 10px 35px rgba(15, 23, 42, 0.12), 0 3px 10px rgba(15, 23, 42, 0.06), inset 0 1px 1px rgba(255, 255, 255, 0.9); border: 1px solid rgba(229, 231, 235, 0.85); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); padding: 0 8px; box-sizing: border-box; overflow: visible; } @media (min-width: 769px) { .mobile-tabbar, .agent-mobile-topbar, .admin-mobile-topbar, .dispatcher-mobile-topbar { display: none !important; } } /* Individual tab item */ .tabbar-item { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; width: 100%; height: 100%; padding: 4px 2px; color: #9CA3AF; text-decoration: none; background: none; border: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 0.2s ease; border-radius: 14px; } .mobile-tabbar .menu-toggle.tabbar-item { display: flex; width: 100%; height: 100%; } .tabbar-item.active { color: var(--color-primary, #2563EB); } .tabbar-icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 28px; border-radius: 10px; font-size: 1.05rem; line-height: 1; transition: background 0.2s ease, transform 0.15s ease; } .tabbar-item.active .tabbar-icon { background: rgba(37, 99, 235, 0.1); transform: translateY(-1px); } .tabbar-label { margin-top: 3px; width: 100%; font-size: 0.56rem; font-weight: 600; line-height: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; letter-spacing: 0.01em; } .tabbar-item.active .tabbar-label { font-weight: 700; color: var(--color-primary, #2563EB); } /* ── FAB (center item) — Elevated circular button ─────────────────── */ .tabbar-fab { position: relative; top: -18px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; min-width: 0; height: 82px; padding: 0 2px; } .tabbar-fab-ring { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 16px; background: linear-gradient(145deg, #2563EB 0%, #1d4ed8 60%, #1e40af 100%); box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5), 0 2px 6px rgba(37, 99, 235, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25); font-size: 1.25rem; color: #fff; border: 2.5px solid #fff; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease; flex-shrink: 0; } .tabbar-fab:active .tabbar-fab-ring, .tabbar-fab:hover .tabbar-fab-ring { transform: scale(1.1) translateY(-2px); box-shadow: 0 10px 28px rgba(37, 99, 235, 0.6), 0 4px 10px rgba(37, 99, 235, 0.35); } .tabbar-fab.active .tabbar-fab-ring { background: linear-gradient(145deg, #f97316 0%, #ea6312 60%, #c2410c 100%); box-shadow: 0 6px 20px rgba(249, 115, 22, 0.5), 0 2px 6px rgba(249, 115, 22, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25); } .tabbar-fab .tabbar-label { margin-top: 5px; color: #6B7280; font-weight: 600; font-size: 0.57rem; } .tabbar-fab.active .tabbar-label { color: #ea6312; font-weight: 700; } /* ── Drawer button (5th item) ─────────────────────────────────────── */ .tabbar-drawer { color: #6B7280; } .tabbar-drawer .tabbar-icon { background: #F3F4F6; color: #374151; } .tabbar-drawer:active .tabbar-icon, .tabbar-drawer:hover .tabbar-icon { background: rgba(37, 99, 235, 0.1); color: var(--color-primary, #2563EB); } /* ── Content area push: account for floating nav + topbar ────────── */ @media (max-width: 768px) { body.role-agent .content-area, body.role-admin .content-area, body.role-dispatcher .content-area { padding-top: calc(52px + env(safe-area-inset-top, 0px) + 14px); padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px) + 24px); padding-left: max(16px, env(safe-area-inset-left, 16px)) !important; padding-right: max(16px, env(safe-area-inset-right, 16px)) !important; overflow-x: hidden; max-width: 100%; box-sizing: border-box; } } /* ------------------------------------------------------------------- PWA SPLASH SCREEN ------------------------------------------------------------------- */ .pwa-splash { position: fixed; inset: 0; z-index: 99999; background-color: #ffffff; background-image: linear-gradient(to bottom right, rgba(255, 255, 255, 0.8), rgba(249, 250, 251, 0.9)); display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity 0.6s ease-out, visibility 0.6s ease-out; overflow: hidden; } /* Animated glassmorphism blobs for aesthetic accent */ .pwa-splash::before, .pwa-splash::after { content: ''; position: absolute; border-radius: 50%; filter: blur(70px); z-index: 1; animation: splashBlobFloat 8s infinite alternate ease-in-out; } .pwa-splash::before { width: 300px; height: 300px; background: rgba(37, 99, 235, 0.15); /* Soft primary blue */ top: -100px; left: -100px; } .pwa-splash::after { width: 250px; height: 250px; background: rgba(249, 115, 22, 0.12); /* Soft orange accent */ bottom: -50px; right: -80px; animation-delay: -4s; } @keyframes splashBlobFloat { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(40px, 40px) scale(1.1); } } .pwa-splash.fade-out { opacity: 0; visibility: hidden; } .splash-images-container { position: relative; width: 150px; height: 150px; margin-bottom: 40px; z-index: 10; animation: splashLogoPulse 2.5s infinite ease-in-out; filter: drop-shadow(0 10px 25px rgba(37, 99, 235, 0.15)); } @keyframes splashLogoPulse { 0% { transform: scale(1) translateY(0); } 50% { transform: scale(1.02) translateY(-4px); } 100% { transform: scale(1) translateY(0); } } .splash-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity 0.8s ease-in-out; } .splash-img-2 { opacity: 1; } /* Loading Area */ .splash-loading-area { width: min(260px, calc(100vw - 48px)); text-align: center; animation: fadeIn 0.5s ease forwards; } .splash-progress { width: 100%; height: 6px; background: #E5E7EB; border-radius: 4px; overflow: hidden; margin-bottom: 12px; } .splash-progress-bar { width: 0%; height: 100%; background: var(--color-primary, #2563EB); border-radius: 4px; transition: width 0.3s ease; } .splash-progress-bar.animate { animation: progressIndeterminate 1.5s infinite linear; } .splash-status-text { font-size: 0.85rem; color: var(--color-text-muted, #6B7280); margin: 0; font-weight: 500; line-height: 1.35; } .splash-error-actions { margin-top: 20px; animation: fadeIn 0.5s ease forwards; } @keyframes progressIndeterminate { 0% { width: 0%; transform: translateX(-100%); } 50% { width: 50%; transform: translateX(50%); } 100% { width: 100%; transform: translateX(200%); } } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @media (min-width: 769px) { .pwa-splash { display: none !important; } } .page-title-bar { margin: 0 0 var(--spacing-lg); padding: 18px var(--spacing-xl) 14px; background: var(--color-surface, #fff); border-bottom: 2px solid var(--color-border, #E5E7EB); } .page-title-heading { font-size: 1.4rem; font-weight: 800; color: var(--color-text-dark, #111827); margin: 0; line-height: 1.2; } @media (max-width: 768px) { .page-title-bar { margin: 0 0 var(--spacing-md); padding: 14px var(--spacing-md) 10px; } .page-title-heading { font-size: 1.15rem; } } @media (max-width: 390px) { .page-title-bar { margin: 0 0 var(--spacing-sm); padding: 12px var(--spacing-sm) 8px; } .page-title-heading { font-size: 1.05rem; } } /* When page-title-bar is present in content-area, suppress duplicate h2 inside screen-heading elements so the page title doesn't appear twice */ .content-area:has(.page-title-bar) .screen-heading h2 { display: none; } /* Also hide the paragraph subtitle if h2 is hidden */ .content-area:has(.page-title-bar) .screen-heading p { margin-top: 0; } /* Lock to portrait for mobile browsers */ @media screen and (max-width: 900px) and (orientation: landscape) { body::before { content: 'Tolong putar perangkat Anda kembali ke mode potrait untuk menggunakan NaviGO MBB.'; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #0F172A; color: #fff; z-index: 99999; display: flex; align-items: center; justify-content: center; text-align: center; padding: 2rem; font-size: 1.25rem; font-weight: 600; } .app-wrapper { display: none !important; } }