/* ============================================================================ FLEETSYNC — MOBILE PREMIUM SKIN (lapisan aditif / progressive enhancement) ---------------------------------------------------------------------------- Diturunkan dari mockup.html (Premium Corporate • Mobile First • Glassmorphism) KONTRAK KESELAMATAN — file ini WAJIB mematuhi aturan berikut: • Hanya styling. Tidak ada perubahan markup, route, atau logika. • Seluruh perubahan struktural dikurung dalam @media(max-width:768px) sehingga tampilan desktop existing TIDAK tersentuh sama sekali. • Tidak menimpa variabel tema existing (--red, --bg, --text-*, dst) agar light/dark mode dan komponen lain tetap berperilaku sama. • Token baru diberi prefix --fs- supaya tidak bentrok. • Rollback = hapus pemanggil file ini di layouts/app.blade.php. ========================================================================== */ :root{ /* Palet mockup — prefix --fs- agar tidak bertabrakan dengan token existing */ --fs-red-600:#C8102E; --fs-red-500:#E01E37; --fs-red-700:#9E0C24; --fs-grad-red:linear-gradient(135deg,#E01E37 0%,#C8102E 52%,#9E0C24 100%); --fs-sh-red:0 12px 26px rgba(200,16,46,.34); --fs-sh-md:0 8px 24px rgba(20,22,26,.08),0 2px 6px rgba(20,22,26,.05); --fs-sh-lg:0 18px 44px rgba(20,22,26,.14),0 6px 14px rgba(20,22,26,.06); --fs-ease:cubic-bezier(.22,1,.36,1); --fs-spring:cubic-bezier(.34,1.56,.64,1); --fs-nav-h:68px; /* tinggi bottom nav */ --fs-safe:env(safe-area-inset-bottom,0px); } /* ============================================================================ 1. BOTTOM NAVIGATION — komponen BARU, hanya tampil di mobile ========================================================================== */ .fs-bottomnav{display:none;} @media(max-width:768px){ .fs-bottomnav{ display:grid; position:fixed; left:0; right:0; bottom:0; z-index:120; grid-auto-flow:column; grid-auto-columns:1fr; align-items:stretch; height:calc(var(--fs-nav-h) + var(--fs-safe)); padding-bottom:var(--fs-safe); background:var(--bg-nav); border-top:1px solid var(--border); box-shadow:0 -6px 24px rgba(20,22,26,.10); -webkit-backdrop-filter:blur(20px) saturate(1.6); backdrop-filter:blur(20px) saturate(1.6); } .fs-bn-item{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-decoration:none; color:var(--text-3); font-size:.62rem; font-weight:700; letter-spacing:-.01em; line-height:1; -webkit-tap-highlight-color:transparent; transition:color .22s var(--fs-ease); } .fs-bn-item svg{width:21px;height:21px;flex-shrink:0;transition:transform .3s var(--fs-spring);} .fs-bn-item:active svg{transform:scale(.88);} .fs-bn-item.is-active{color:var(--fs-red-600);} .fs-bn-item.is-active svg{transform:translateY(-1px);} /* Indikator aktif — pil kecil di atas ikon */ .fs-bn-item.is-active::before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:26px; height:3px; border-radius:0 0 4px 4px; background:var(--fs-grad-red); } /* Badge jumlah approval tertunda */ .fs-bn-badge{ position:absolute; top:8px; left:calc(50% + 7px); min-width:16px; height:16px; padding:0 4px; display:flex; align-items:center; justify-content:center; background:var(--fs-red-600); color:#fff; font-size:.55rem; font-weight:800; border-radius:9px; border:2px solid var(--bg-nav); box-shadow:0 2px 6px rgba(200,16,46,.4); } /* Ruang agar konten & footer tidak tertutup bottom nav */ .app-wrap{padding-bottom:calc(var(--fs-nav-h) + var(--fs-safe));} /* Halaman mandiri (scan/*, scan-room/*) tidak punya .app-wrap, jadi penandanya dipasang di . Tanpa ini, nav menutupi konten bawah. */ body.fs-has-bottomnav{padding-bottom:calc(var(--fs-nav-h) + var(--fs-safe));} } /* ── PONSEL MODE LANSKAP ─────────────────────────────────────────────────── Ponsel yang diputar mendatar melebihi 768px (mis. iPhone 14 = 844px), sehingga bottom nav ikut hilang padahal perangkatnya tetap ponsel. Tiga syarat dipakai bersama agar hanya ponsel-mendatar yang kena, bukan jendela laptop kecil: • orientation:landscape → sisi lebar • max-height:500px → ponsel mendatar itu pendek; laptop tidak • pointer:coarse → perangkat sentuh, bukan mouse Tinggi nav dipangkas agar tidak memakan layar yang sudah pendek. */ @media (orientation:landscape) and (max-height:500px) and (pointer:coarse){ .fs-bottomnav{ display:grid; height:calc(54px + var(--fs-safe)); } .fs-bn-item{font-size:.58rem;gap:2px;} .fs-bn-item svg{width:18px;height:18px;} .app-wrap{padding-bottom:calc(54px + var(--fs-safe));} .nav-center{display:none;} } /* ============================================================================ 2. PENINGKATAN MOBILE — seluruhnya terkurung di breakpoint mobile ========================================================================== */ @media(max-width:768px){ body{ -webkit-font-smoothing:antialiased; letter-spacing:-.01em; overflow-x:hidden; /* jaring pengaman anti-overflow horizontal */ } /* ── Top navbar: dirapatkan agar muat, tanpa menghilangkan kontrol ── */ .navbar{padding:0 .85rem;} .nav-brand img{height:22px;} .nav-brand-name{font-size:.9rem;} .nav-user-pill{padding:.25rem .5rem;gap:6px;} .nav-udept{display:none;} /* unit disembunyikan, nama tetap tampil */ .nav-logout{padding:.4rem .6rem;} /* Nav tengah disembunyikan di mobile — fungsinya digantikan bottom nav. Elemen tetap ada di DOM, hanya tidak ditampilkan. */ .nav-center{display:none;} /* ── Tipografi halaman ── */ .page-title{font-size:1.5rem;letter-spacing:-.03em;} .page-subtitle{font-size:.82rem;} /* ── Kartu: sudut lebih membulat + bayangan lembut ala mockup ── */ .card{ border-radius:20px; box-shadow:var(--fs-sh-md); overflow:hidden; /* cegah konten membocor keluar sudut */ } .card-header{padding:1rem 1.1rem;} .card-body{padding:1.1rem;} /* ── Tabel ── CATATAN: aplikasi SUDAH menangani tabel lebar lewat pembungkus .tbl-wrap (overflow-x:auto). Karena itu skin ini TIDAK menambah kontainer scroll sendiri — menambahkannya justru menciptakan scrollbar bersarang. Di sini hanya momentum-scroll iOS dan ukuran font yang disesuaikan. */ .tbl-wrap{-webkit-overflow-scrolling:touch;} table{font-size:.8rem;} /* ── GRID INLINE 2 KOLOM → 1 KOLOM ───────────────────────────────────── Beberapa view (mis. dashboard/index.blade.php:249) mendeklarasikan grid 2 kolom lewat INLINE style tanpa breakpoint mobile, sehingga kartu portal & kartu aksi remuk di layar sempit (teks terpotong, tombol menimpa judul). Karena markup view tidak boleh disentuh, elemennya disasar lewat attribute selector pada string inline style-nya — presisi, hanya kena elemen yang benar-benar mendeklarasikan pola tersebut. !important diperlukan semata karena inline style berprioritas lebih tinggi. Dibatasi di dalam .app-main agar tidak menyentuh navbar/footer. */ .app-main [style*="grid-template-columns:1fr 1fr"], .app-main [style*="grid-template-columns: 1fr 1fr"]{ grid-template-columns:1fr !important; } /* ── Sentuhan: target minimal 44px (pedoman aksesibilitas mobile) ── */ .btn-primary,.btn-ghost{ min-height:44px; padding:.7rem 1.15rem; border-radius:13px; font-size:.85rem; } .btn-primary{ background:var(--fs-grad-red); box-shadow:var(--fs-sh-red); } .btn-primary:active{transform:scale(.97);} .btn-sm{min-height:38px;padding:.5rem .9rem;} .act-btn{width:40px;height:40px;border-radius:11px;} /* ── Form: font 16px mencegah iOS auto-zoom saat field difokuskan ── Ini perbaikan mobile nyata: tanpa ini Safari memperbesar halaman setiap kali user menyentuh input, dan layout tampak "melompat". */ .form-input,.form-select,.form-textarea{ font-size:16px; padding:.8rem 1rem; border-radius:13px; min-height:48px; } .form-label{font-size:.68rem;} /* ── Modal: gaya bottom-sheet, terasa native di ponsel ── */ .modal-overlay{align-items:flex-end;padding:0;} .modal-box{ max-width:100%; border-radius:26px 26px 0 0; box-shadow:var(--fs-sh-lg); animation:fsSheetUp .34s var(--fs-ease) both; } .modal-body{max-height:72vh;padding:1.2rem;} @keyframes fsSheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}} /* ── Alert & pagination ── */ .alert{border-radius:13px;font-size:.8rem;} .pagination{flex-wrap:wrap;gap:5px;} .pagination li a,.pagination li span{min-width:38px;height:38px;border-radius:10px;} /* ── Footer: dirapikan, tidak tertimpa bottom nav ── */ .app-footer{padding:1.4rem 1rem;} .footer-companies{justify-content:center;} .footer-right{align-items:center;} /* ── PERBAIKAN OVERFLOW HORIZONTAL ────────────────────────────────────── Overflow ini SUDAH ADA sebelum skin dipasang (terukur 448px pada viewport 386px). Diperbaiki di sini karena murni masalah tata letak. Dua penyebabnya: */ /* (a) .nav-right — blok kanan navbar (tema + profil + keluar) terlalu lebar. Dirampingkan TANPA menghapus satu pun kontrol: tombol tetap ada dan tetap bisa ditekan, hanya labelnya yang disembunyikan. */ .nav-right{gap:.4rem;min-width:0;} .nav-uname{max-width:74px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .nav-logout{font-size:0;padding:.5rem;gap:0;} /* label "Keluar" disembunyikan */ .nav-logout svg{width:16px;height:16px;} /* ikon diperbesar sebagai gantinya */ .nav-role-chip{display:none;} /* role sudah terlihat di halaman profil */ /* (b) .footer-inner — anak grid memakai min-width:auto (bawaan), sehingga teks panjang memaksa lebar melebihi layar. min-width:0 mengizinkan mereka menyusut, dan overflow-wrap memecah kata yang terlalu panjang. */ .footer-inner{min-width:0;} .footer-inner > *{min-width:0;} .footer-desc,.footer-copy,.footer-brand-name{overflow-wrap:anywhere;} .footer-links{flex-wrap:wrap;} } /* ============================================================================ 2b. HALAMAN LOGIN ---------------------------------------------------------------------------- CATATAN STRUKTUR: auth/login.blade.php adalah halaman HTML MANDIRI — punya ,