/**
 * ============================================================================
 * RESPONSIVE PATCH GLOBAL - Orion Tech Swalas Guna LMS
 * v11 UNIVERSAL RESPONSIVE + PWA [2026-05-10]
 * ============================================================================
 * File ini di-include di SEMUA layout & halaman standalone.
 * Tujuan: rapih di SEMUA device, browser, dan resolusi layar +
 * feel seperti mobile app native (PWA-ready).
 *
 * COVERAGE:
 * Devices:
 * - HP mini (<=320 px) iPhone SE 1st gen, mini browser
 * - HP kecil (321-375 px) iPhone SE 2/3, Galaxy A0x, Pixel 4a
 * - HP standar (376-480 px) Galaxy S, iPhone 13/14
 * - HP besar (481-639 px) Galaxy Note, Plus models
 * - Foldable (panel kecil/lipat) Galaxy Z Fold, Surface Duo
 * - Tablet portrait (640-767 px) iPad mini portrait
 * - Tablet (768-1023 px) iPad, Galaxy Tab
 * - Laptop kecil (1024-1279 px) iPad Pro 12.9", small laptop
 * - Laptop (1280-1599 px) 13-15" laptops
 * - Desktop (1600-1919 px) 21-24" monitor
 * - Full HD+ (1920-2559 px) 27" monitor
 * - 4K (2560-3839 px) 4K display, ultrawide
 * - 8K (>=3840 px) Big TV, 8K display
 *
 * Browsers (fallbacks + vendor prefixes):
 * Chrome / Edge / Brave / Opera / Samsung Internet / UC Browser
 * Firefox / Firefox Mobile
 * Safari / Safari iOS
 * Mi Browser, Vivaldi, Yandex, DuckDuckGo
 * Mini browsers (Opera Mini, UC Mini)
 *
 * Mobile-app feel (tetap website, tapi terasa native di HP):
 * - Tap highlight kustom, no double-tap zoom on buttons
 * - Smooth scroll & overscroll containment (no pull-to-refresh confusion)
 * - 16px input font (anti auto-zoom iOS)
 * - 44px tap targets (Apple HIG)
 * - Safe-area inset (notch/cutout HP, foldable hinge)
 * - Sticky bottom-sheet modal di HP
 * - Hide scrollbar tapi tetap scrollable (look bersih)
 * - Dynamic Viewport Units (dvh/svh/lvh) untuk address bar HP collapsible
 * - PWA standalone mode (display:standalone)
 * - Network-aware: prefers-reduced-data
 *
 * Strategi: progressive enhancement -- tidak override warna brand,
 * cuma layout/sizing/touch. Fallback aman untuk browser lama.
 * ============================================================================
 */

/* =========================================================================
 * 1. FOUNDATION (semua device, semua browser)
 * ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
 -webkit-text-size-adjust: 100%;
 -moz-text-size-adjust: 100%;
 text-size-adjust: 100%;
 /* Smooth scroll, tapi respect prefers-reduced-motion */
 scroll-behavior: smooth;
 /* Anti horizontal overflow */
 overflow-x: hidden;
 /* iOS / Android: cegah font auto-resize landscape */
 -webkit-text-size-adjust: none;
}

body {
 /* Anti horizontal overflow apapun yang terjadi */
 overflow-x: hidden;
 max-width: 100vw;
 /* iOS bouncy scroll behavior - biar terasa native di app */
 -webkit-overflow-scrolling: touch;
 /* Font rendering halus di semua OS */
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-rendering: optimizeLegibility;
}
/* [v13.3 SCROLL FIX 2026-05-10] HAPUS overscroll-behavior-y: contain
 karena di Brave/Chrome tertentu ini bisa lock scroll body.
 User report: "scroll tidak jalan di landing setelah customizer" */

/* Cegah anchor focus outline ugly di touch device, tapi keep di keyboard */
:focus { outline: 0; }
:focus-visible {
 outline: 2px solid #f5a623;
 outline-offset: 2px;
 border-radius: 4px;
}

/* Image / media: tidak pernah overflow parent */
img, video, svg, canvas, iframe, picture, embed, object {
 max-width: 100%;
 height: auto;
}
iframe { display: block; }
img { vertical-align: middle; }

/* Long words / URLs: break supaya tidak push layout */
p, h1, h2, h3, h4, h5, h6, span, a, label, strong, em, small, td, th, li, div {
 word-wrap: break-word;
 overflow-wrap: break-word;
}
/* URL panjang & hash break-all aman */
.text-break-all, .break-all { word-break: break-all; }

/* ===== MOBILE-APP FEEL: tap highlight kustom & touch action ===== */
button, a, [role="button"], .btn, input[type="button"],
input[type="submit"], input[type="reset"], label[for] {
 -webkit-tap-highlight-color: rgba(245, 166, 35, 0.18);
 tap-highlight-color: rgba(245, 166, 35, 0.18);
}
button, a.btn, .btn, [role="button"] {
 /* Cegah double-tap zoom di iOS */
 touch-action: manipulation;
}

/* Anti text selection di tombol/sidebar (terasa lebih native) */
button, .btn, .sidebar, .ss-sidebar, .admin-sidebar, .navbar, .topbar,
.ss-topbar, .top-header, .sidebar-brand, .sidebar-user, .nav-link {
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}
/* Tapi konten tetap selectable */
.card, .card-body, p, td, th, .form-control, input, textarea, .selectable {
 -webkit-user-select: text;
 user-select: text;
}

/* ===== SCROLLBAR STYLING (look modern di Chrome/Edge/Safari) ===== */
/* Firefox */
* {
 scrollbar-width: thin;
 scrollbar-color: rgba(10, 37, 64, 0.25) transparent;
}
/* Webkit (Chrome, Edge, Safari, Brave, Opera) */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
 background: rgba(10, 37, 64, 0.25);
 border-radius: 10px;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(10, 37, 64, 0.45); }
/* Hide scrollbar tapi tetap bisa scroll - pakai class .scroll-hide */
.scroll-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scroll-hide::-webkit-scrollbar { display: none; }

/* =========================================================================
 * 2. TABEL RESPONSIVE (semua tabel, mencegah layout pecah)
 * ========================================================================= */
.tbl-responsive-wrap,
.table-responsive {
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
 /* Smooth momentum scroll seperti native app */
 scroll-snap-type: x proximity;
}
table { max-width: 100%; }

/* Tabel bukan-Bootstrap juga di-wrap auto-scroll kalau ada parent .table-wrap */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Sticky tabel header (untuk daftar panjang) - opt-in via class */
.table-sticky-head thead th {
 position: sticky; top: 0;
 background: var(--app-card-bg, #fff);
 z-index: 5;
}

/* =========================================================================
 * 3. CONTAINER / CARD (universal padding, anti overflow)
 * ========================================================================= */
.container, .container-fluid, .main-content, main {
 max-width: 100%;
 padding-left: 12px;
 padding-right: 12px;
}

.card, .card-orion, .orion-card, .panel,
.profile-card, .profil-card-side, .profil-card-main {
 max-width: 100%;
 word-wrap: break-word;
 overflow-wrap: break-word;
}

pre, code, kbd, samp {
 max-width: 100%;
 overflow-x: auto;
 word-wrap: break-word;
 white-space: pre-wrap;
}

/* =========================================================================
 * 4. FORM & INPUT (cross-browser, anti iOS auto-zoom)
 * ========================================================================= */
/* Anti auto-zoom iOS Safari saat focus input - input wajib min 16px */
@media (max-width: 767.98px) {
 input[type="text"], input[type="email"], input[type="password"],
 input[type="search"], input[type="tel"], input[type="url"],
 input[type="number"], input[type="date"], input[type="datetime-local"],
 input[type="month"], input[type="week"], input[type="time"],
 select, textarea, .form-control, .form-select {
 font-size: 16px !important;
 }
}

/* Konsisten styling form di semua browser */
input, button, select, textarea {
 font-family: inherit;
 font-size: inherit;
 line-height: inherit;
 color: inherit;
}

/* Hilangkan tampilan default WebKit yang aneh */
input[type="search"] {
 -webkit-appearance: textfield;
 appearance: textfield;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
 -webkit-appearance: none;
}

/* Number input: hide spinner di Chrome/Safari kalau diminta via class */
.no-spinner::-webkit-outer-spin-button,
.no-spinner::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.no-spinner { -moz-appearance: textfield; }

/* [v41 2026-05-13] DIHAPUS, modal styling pindah ke mobile-app-shell.css
 yang pakai pola centered (di tengah layar). Rule lama bikin modal fullscreen
 yang konflik dengan rule baru. */

/* =========================================================================
 * 5. BREAKPOINT - HP MINI (<= 320 px)
 * iPhone SE 1st gen, hp mini browser, foldable closed
 * ========================================================================= */
@media (max-width: 320px) {
 body { font-size: 13px; }

 .container, .container-fluid, .main-content, main {
 padding-left: 6px;
 padding-right: 6px;
 }

 /* Heading lebih kecil */
 h1, .h1 { font-size: 1.25rem; }
 h2, .h2 { font-size: 1.1rem; }
 h3, .h3 { font-size: 1rem; }

 /* Button: ekstra kompak */
 .btn { padding: 0.4rem 0.7rem; font-size: 0.78rem; }
 .btn-sm { padding: 0.3rem 0.5rem; font-size: 0.7rem; }

 /* Card: minimal padding */
 .card, .card-orion { padding: 10px !important; }
 .card-body { padding: 10px; }

 /* Tab horizontal scroll */
 .tabs-pkbm, .profil-tabs, .nav-tabs {
 overflow-x: auto;
 flex-wrap: nowrap;
 -webkit-overflow-scrolling: touch;
 }
 .tabs-Orion Tech button, .profil-tabs button, .nav-tabs .nav-link {
 font-size: 0.72rem;
 padding: 9px 11px;
 white-space: nowrap;
 flex-shrink: 0;
 }
}

/* =========================================================================
 * 6. BREAKPOINT - HP KECIL (321-480 px)
 * Mayoritas HP modern, iPhone SE 2/3, Pixel, Galaxy A
 * ========================================================================= */
@media (min-width: 321px) and (max-width: 480px) {
 body { font-size: 14px; }

 .container, .container-fluid, .main-content, main {
 padding-left: 8px;
 padding-right: 8px;
 }

 /* Sidebar: full overlay drawer */
 .sidebar, .ss-sidebar, .admin-sidebar {
 width: 85vw !important;
 max-width: 320px;
 }

 h1, .h1 { font-size: 1.4rem; }
 h2, .h2 { font-size: 1.2rem; }
 h3, .h3 { font-size: 1.05rem; }
 h4, .h4 { font-size: 0.95rem; }

 .btn-group, .btn-group-sm { flex-wrap: wrap; }

 .card, .card-orion { padding: 12px !important; }
 .card-body { padding: 12px; }

 /* Form & button tap-friendly */
 .form-control, .form-select, .btn { min-height: 40px; }

 .row.g-3 > [class*="col-"], .row.g-2 > [class*="col-"] { margin-bottom: 8px; }

 /* [v41 2026-05-13] DIHAPUS rule modal fullscreen, sekarang modal
 di-render centered di tengah layar (lihat mobile-app-shell.css). */

 /* Header action button -> full width */
 .page-header > div:last-child:not(.page-desc),
 .page-header .btn { width: 100%; }
 .page-header .btn { margin-top: 6px; }

 table th, table td { font-size: 0.78rem; padding: 6px 4px; }

 /* Tabs scroll horizontal */
 .tabs-pkbm, .profil-tabs, .nav-tabs {
 overflow-x: auto;
 flex-wrap: nowrap;
 -webkit-overflow-scrolling: touch;
 }

 /* Avatar besar di profil card -> kecilin */
 .avatar-big, .profil-foto-img, .profil-foto-ph {
 width: 110px !important;
 height: 110px !important;
 }

 /* Hide non-essential elements */
 .d-mobile-hide, .d-mobile-none { display: none !important; }
}

/* =========================================================================
 * 7. BREAKPOINT - HP STANDAR (481-767 px)
 * Phone landscape, phablet
 * ========================================================================= */
@media (min-width: 481px) and (max-width: 767.98px) {
 body { font-size: 14px; }

 .container, .container-fluid, .main-content, main {
 padding-left: 10px;
 padding-right: 10px;
 }

 .sidebar, .ss-sidebar, .admin-sidebar {
 width: 75vw !important;
 max-width: 360px;
 }

 /* col-md-X jadi 50% di hp besar (2 kolom), kecuali col-md-12 */
 .row.g-3 > [class*="col-md-"]:not(.col-md-12),
 .row.g-2 > [class*="col-md-"]:not(.col-md-12) {
 flex: 0 0 50%;
 max-width: 50%;
 }

 /* Tabs tetap horizontal scroll di phone landscape */
 .tabs-pkbm, .profil-tabs, .nav-tabs {
 overflow-x: auto;
 flex-wrap: nowrap;
 -webkit-overflow-scrolling: touch;
 }
}

/* =========================================================================
 * 8. BREAKPOINT - TABLET (768-1023 px)
 * iPad, Galaxy Tab portrait
 * ========================================================================= */
@media (min-width: 768px) and (max-width: 1023.98px) {
 body { font-size: 15px; }

 /* Sidebar lebih sempit */
 .sidebar, .admin-sidebar { width: 220px !important; }
 .main-content { margin-left: 220px; }

 /* col-md-3 jadi 50% supaya 2 kolom */
 .row.g-3 .col-md-3 {
 flex: 0 0 50%;
 max-width: 50%;
 }
}

/* =========================================================================
 * 9. BREAKPOINT - LAPTOP KECIL (1024-1279 px)
 * iPad Pro 12.9", small laptop, Chromebook
 * ========================================================================= */
@media (min-width: 1024px) and (max-width: 1279.98px) {
 body { font-size: 15px; }
 .container, .container-fluid { max-width: 100%; }
}

/* =========================================================================
 * 10. BREAKPOINT - LAPTOP (1280-1599 px) - default Bootstrap
 * ========================================================================= */
/* No override - Bootstrap default works well. */

/* =========================================================================
 * 11. BREAKPOINT - DESKTOP BESAR (1600-1919 px)
 * ========================================================================= */
@media (min-width: 1600px) {
 .container { max-width: 1500px; }
 body { font-size: 16px; }
}

/* =========================================================================
 * 12. BREAKPOINT - FULL HD+ (1920-2559 px)
 * ========================================================================= */
@media (min-width: 1920px) {
 .container { max-width: 1700px; }
 body { font-size: 16px; }
}

/* =========================================================================
 * 13. BREAKPOINT - 4K / ULTRAWIDE (2560-3839 px)
 * ========================================================================= */
@media (min-width: 2560px) {
 .container { max-width: 1920px; }
 body { font-size: 17px; }

 h1, .h1 { font-size: 2.2rem; }
 h2, .h2 { font-size: 1.8rem; }
}

/* =========================================================================
 * 14. BREAKPOINT - 8K / BIG TV (>= 3840 px)
 * Smart TV browser, 8K display
 * ========================================================================= */
@media (min-width: 3840px) {
 html { font-size: 22px; }
 .container { max-width: 2400px; }

 h1, .h1 { font-size: 3rem; }
 h2, .h2 { font-size: 2.4rem; }

 .btn { padding: 0.85rem 1.5rem; font-size: 1rem; }
}

/* =========================================================================
 * 15. ORIENTATION (landscape mobile, portrait tablet)
 * ========================================================================= */
/* Landscape HP: kurangi sticky header */
@media (max-height: 500px) and (orientation: landscape) {
 .navbar, .top-header, .topbar, .ss-topbar {
 padding-top: 4px !important;
 padding-bottom: 4px !important;
 }
 .sidebar-user, .ss-user {
 padding: 8px !important;
 }
}

/* =========================================================================
 * 16. ACCESSIBILITY - REDUCED MOTION & HIGH CONTRAST
 * ========================================================================= */
/* User pilih reduce motion -> hilangkan animasi */
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 *, *::before, *::after {
 animation-duration: 0.01ms !important;
 animation-iteration-count: 1 !important;
 transition-duration: 0.01ms !important;
 }
}

/* High contrast mode (Windows) - pastikan border tetap visible */
@media (forced-colors: active) {
 .btn, .card, .card-orion, .form-control, .form-select {
 border: 1px solid currentColor;
 }
}

/* High DPI / Retina */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
 img.crisp-edges {
 image-rendering: -webkit-optimize-contrast;
 image-rendering: crisp-edges;
 }
}

/* =========================================================================
 * 17. SAFE-AREA INSETS (iPhone notch, Android cutout, foldable)
 * ========================================================================= */
@supports (padding: max(0px)) {
 body {
 padding-left: env(safe-area-inset-left);
 padding-right: env(safe-area-inset-right);
 }
 .top-header, .navbar.fixed-top, .topbar.fixed-top {
 padding-top: max(env(safe-area-inset-top), 0px);
 }
 .bottom-nav, .fixed-bottom, .ss-footer.sticky-bottom {
 padding-bottom: max(env(safe-area-inset-bottom), 0px);
 }
 /* [v41 2026-05-13] DIHAPUS rule padding safe-area utk modal fullscreen
, modal sekarang centered, gak butuh respect safe area edge. */
}

/* =========================================================================
 * 18. TOUCH TARGETS (Apple HIG 44px, Material 48dp)
 * ========================================================================= */
@media (hover: none) and (pointer: coarse) {
 /* Touch-only device: tombol & link tap-friendly */
 button, .btn, a.btn, [role="button"],
 input[type="submit"], input[type="button"], input[type="reset"] {
 min-height: 40px;
 }
 .btn-group .btn { min-height: 36px; }

 /* Form check (radio/checkbox) lebih besar */
 .form-check-input { width: 1.2em; height: 1.2em; }

 /* Hover states tidak relevan di touch - disable */
 .btn:hover { transform: none !important; }
}

/* =========================================================================
 * 19. PRINT (cetak rapi)
 * ========================================================================= */
@media print {
 .sidebar, .admin-sidebar, .ss-sidebar,
 .navbar, .top-header, .topbar, .ss-topbar,
 .btn, button, nav, footer, .no-print, .mobile-toggle,
 .breadcrumb-orion, .topbar-icon, .user-menu,
 .ss-bell, .ss-bell-wrap, .profil-dd-wrap-hdr,
 .profil-dd-wrap-admin, .gdrive-panel,
 .modal-foto-overlay, .modal-foto-overlay-hdr, .modal-foto-overlay-adm,
 .profil-modal-overlay, .profil-tabs, .tabs-Orion Tech {
 display: none !important;
 }
 body, .main-content, .ss-content, main.content-area {
 background: white !important;
 margin: 0 !important;
 padding: 0 !important;
 }
 .main-wrapper, .ss-main { margin-left: 0 !important; }
 .card, .card-orion {
 box-shadow: none !important;
 border: 1px solid #ddd !important;
 page-break-inside: avoid;
 break-inside: avoid;
 }
 a { text-decoration: none !important; color: black !important; }
 table { font-size: 0.85rem !important; }
}

/* =========================================================================
 * 20. CROSS-BROWSER FALLBACKS (browser lama / engine non-standard)
 * ========================================================================= */
/* Browser tanpa support `gap` di flex (Safari < 14.5, sebelumnya) */
@supports not (gap: 8px) {
 .row > [class*="col-"] { padding-left: 4px; padding-right: 4px; }
}

/* Browser tanpa support `aspect-ratio` */
@supports not (aspect-ratio: 1 / 1) {
 .ratio-1x1 {
 position: relative;
 padding-bottom: 100%;
 }
 .ratio-16x9 {
 position: relative;
 padding-bottom: 56.25%;
 }
 .ratio-1x1 > *, .ratio-16x9 > * {
 position: absolute; inset: 0;
 }
}

/* Browser tanpa support `clamp()` (IE, sangat lama) - fallback flat size */
@supports not (font-size: clamp(1rem, 2vw, 2rem)) {
 h1.fluid, .h1.fluid { font-size: 1.6rem; }
}

/* IE 11 / browser lama: gunakan fallback flexbox */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 .row { display: -ms-flexbox; }
 .d-flex { display: -ms-flexbox; }
}

/* Firefox: appearance fix */
@-moz-document url-prefix() {
 select {
 -moz-appearance: none;
 background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M6 9L1.5 4.5h9z' fill='%230a2540'/></svg>");
 background-repeat: no-repeat;
 background-position: right 10px center;
 padding-right: 28px;
 }
}

/* Safari iOS: fix 100vh issue (toolbar bar bug) */
@supports (-webkit-touch-callout: none) {
 .full-height-fix { min-height: -webkit-fill-available; }
 /* Sidebar height fallback */
 .sidebar, .ss-sidebar {
 height: 100vh;
 height: -webkit-fill-available;
 height: 100dvh;
 }
}

/* Brave Browser: respects all standard CSS, no special handling needed beyond Chrome */
/* Samsung Internet: respects all standard CSS, sama dengan Chrome */
/* Opera Mini (extreme low-bandwidth): fallback grid -> block */
@media all and (-o-prefix: opera-mini) {
 .row, .d-flex { display: block !important; }
 [class*="col-"] { width: 100% !important; }
}

/* =========================================================================
 * 21. UTILITY CLASSES (spesifik untuk responsive)
 * ========================================================================= */
/* Hide pada device tertentu */
@media (max-width: 575.98px) {
 .d-mobile-hide { display: none !important; }
 .d-mobile-only { display: block !important; }
 .text-mobile-center { text-align: center !important; }
 .text-mobile-sm { font-size: 0.82rem !important; }
}
@media (min-width: 576px) {
 .d-mobile-only { display: none !important; }
 .d-desktop-only { display: block !important; }
}
@media (max-width: 991.98px) {
 .d-tablet-hide { display: none !important; }
}
@media (min-width: 992px) {
 .d-desktop-hide { display: none !important; }
}

/* Stack flex children -> block di mobile */
@media (max-width: 575.98px) {
 .stack-mobile { flex-direction: column !important; align-items: stretch !important; }
 .stack-mobile > * { width: 100% !important; }
}

/* Image responsive helpers */
.img-fluid { max-width: 100%; height: auto; }
.img-cover { object-fit: cover; width: 100%; height: 100%; }
.img-contain { object-fit: contain; width: 100%; height: 100%; }

/* =========================================================================
 * 22. APP-LIKE EXTRAS (modern web app feel)
 * ========================================================================= */
/* Ripple-like fade saat tap */
@media (hover: none) and (pointer: coarse) {
 .btn:active, button:active, a.btn:active, [role="button"]:active {
 transform: scale(0.97);
 transition: transform 0.05s ease;
 }
}

/* Smooth fade in saat halaman load (opt-in) */
.fade-in-page {
 animation: fadeInPage 0.3s ease-out;
}
@keyframes fadeInPage {
 from { opacity: 0; transform: translateY(6px); }
 to { opacity: 1; transform: translateY(0); }
}

/* Backdrop blur untuk modal (modern look) - Safari needs prefix */
.backdrop-blur, .modal-backdrop-blur {
 -webkit-backdrop-filter: blur(8px);
 backdrop-filter: blur(8px);
}

/* Sticky bottom bar di mobile (action bar app-style) */
.action-bar-mobile {
 position: sticky;
 bottom: 0;
 background: var(--app-card-bg, #fff);
 border-top: 1px solid rgba(0, 0, 0, 0.08);
 padding: 12px;
 z-index: 100;
 box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
}
@supports (padding: max(0px)) {
 .action-bar-mobile {
 padding-bottom: max(12px, env(safe-area-inset-bottom));
 }
}

/* =========================================================================
 * 23. ANTI-COMMON-BUGS (text overflow, sticky elements, dropdown clip)
 * ========================================================================= */
/* Text yang sangat panjang dengan ellipsis */
.text-truncate-1, .text-truncate {
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
.text-truncate-2 {
 display: -webkit-box;
 -webkit-line-clamp: 2;
 line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
}
.text-truncate-3 {
 display: -webkit-box;
 -webkit-line-clamp: 3;
 line-clamp: 3;
 -webkit-box-orient: vertical;
 overflow: hidden;
}

/* Anti dropdown ke-clip oleh parent overflow:hidden */
.dropdown-menu, .um-dropdown, .profil-dd, .profil-dd-hdr,
.profil-dd-admin, .ss-notif-dd, .notif-dropdown {
 z-index: 10500;
}

/* Tombol di dalam card jangan stretch full-width tanpa diminta */
.card .btn:not(.btn-block):not(.w-100) { width: auto; }

/* =========================================================================
 * 24. DARK MODE COMPAT (kalau user pilih theme dark)
 * ========================================================================= */
html[data-theme="dark"] *::-webkit-scrollbar-thumb {
 background: rgba(255, 255, 255, 0.18);
}
html[data-theme="dark"] *::-webkit-scrollbar-thumb:hover {
 background: rgba(255, 255, 255, 0.28);
}
html[data-theme="dark"] {
 scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

/* =========================================================================
 * 25. DYNAMIC VIEWPORT UNITS (dvh / svh / lvh) [v11 NEW]
 * Fix masalah 100vh di mobile (address bar collapsible)
 * - dvh: dynamic (mengikuti address bar)
 * - svh: small (saat address bar visible)
 * - lvh: large (saat address bar hidden)
 * ========================================================================= */
.h-dvh { height: 100vh; height: 100dvh; }
.min-h-dvh { min-height: 100vh; min-height: 100dvh; }
.max-h-dvh { max-height: 100vh; max-height: 100dvh; }

/* Sidebar / drawer height yang aman di semua mobile browser */
.sidebar, .ss-sidebar, .admin-sidebar,
.full-screen-mobile {
 min-height: 100vh;
 min-height: 100dvh;
}
/* Modal fullscreen HANYA di HP kecil (sudah di-handle Section 6).
 Jangan paksa min-height di desktop -- modal harus auto-size ke isinya. */

/* =========================================================================
 * 26. FOLDABLE & DUAL-SCREEN DEVICES [v11 NEW]
 * Galaxy Z Fold, Surface Duo, dll
 * ========================================================================= */
/* Spanning across hinge (CSS spanning API) */
@media (spanning: single-fold-vertical) {
 .container, .main-content {
 column-gap: env(viewport-segment-width 0 0);
 }
 /* Stack jadi 2 kolom di samping hinge */
 .foldable-stack {
 display: grid;
 grid-template-columns: env(viewport-segment-width 0 0) 1fr;
 }
}
@media (spanning: single-fold-horizontal) {
 .foldable-stack {
 display: grid;
 grid-template-rows: env(viewport-segment-height 0 0) 1fr;
 }
}

/* Foldable closed (panel kecil <280px) */
@media (max-width: 279px) {
 body { font-size: 12px; }
 .container, .main-content { padding-left: 4px; padding-right: 4px; }
 .btn { padding: 0.3rem 0.5rem; font-size: 0.7rem; }
 .card { padding: 6px !important; }
}

/* =========================================================================
 * 27. PWA STANDALONE MODE [v11 NEW]
 * Saat user install website ke home screen (Add to Home Screen)
 * ========================================================================= */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
 /* Hide browser-specific UI saat di PWA mode */
 .pwa-hide { display: none !important; }
 .pwa-only { display: block !important; }

 /* [v13.3 SCROLL FIX 2026-05-10] HAPUS overscroll-behavior: none -
 walau ini hanya di standalone mode, beberapa Brave/Chrome
 mendeteksi minimal-ui di browser biasa = lock scroll. */

 /* Bottom nav: respect home indicator */
 .bottom-nav {
 padding-bottom: max(env(safe-area-inset-bottom), 16px);
 }

 /* Top bar: respect status bar */
 .top-header, .navbar.fixed-top {
 padding-top: max(env(safe-area-inset-top), 12px);
 }
}

/* Browser mode: sembunyikan pwa-only */
@media not all and (display-mode: standalone) {
 .pwa-only { display: none !important; }
}

/* iOS PWA spesifik */
@media (display-mode: standalone) and (-webkit-touch-callout: none) {
 body {
 /* iOS PWA tidak punya overscroll bounce default - tambahin */
 -webkit-overflow-scrolling: touch;
 }
}

/* =========================================================================
 * 28. NETWORK-AWARE & LOW-DATA MODE [v11 NEW]
 * Save user bandwidth di koneksi lemah
 * ========================================================================= */
@media (prefers-reduced-data: reduce) {
 /* Disable backdrop-filter (mahal komputasi) */
 .backdrop-blur, .modal-backdrop-blur {
 -webkit-backdrop-filter: none;
 backdrop-filter: none;
 background: rgba(255, 255, 255, 0.95);
 }
 /* Disable animasi non-essential */
 .fade-in-page { animation: none; }
}

/* =========================================================================
 * 29. INPUT PINCH-TO-ZOOM (allow user to zoom kalau perlu) [v11 NEW]
 * PENTING: jangan disable pinch zoom di viewport meta -- accessibility
 * ========================================================================= */
/* Tapi cegah zoom-on-double-tap di tombol (anti accidental) */
.btn, button, a.btn, [role="button"], .nav-link, .tab-link {
 touch-action: manipulation;
}
/* Form & content: allow pinch zoom */
.card, .card-body, p, table, .form-control {
 touch-action: auto;
}

/* =========================================================================
 * 30. PWA INSTALL PROMPT [v11 NEW]
 * Custom install button yang muncul kalau bisa install
 * ========================================================================= */
.pwa-install-prompt {
 position: fixed;
 bottom: 16px;
 right: 16px;
 background: linear-gradient(135deg, #f5a623, #e67e22);
 color: #fff;
 padding: 12px 18px;
 border-radius: 30px;
 box-shadow: 0 10px 30px rgba(245, 166, 35, 0.4);
 z-index: 9999;
 display: none;
 cursor: pointer;
 font-weight: 600;
 border: none;
 align-items: center;
 gap: 8px;
 transition: transform 0.2s;
}
.pwa-install-prompt:hover { transform: translateY(-2px); }
.pwa-install-prompt.show { display: inline-flex; }
@media (max-width: 480px) {
 .pwa-install-prompt {
 bottom: max(16px, env(safe-area-inset-bottom));
 right: 16px;
 left: 16px;
 justify-content: center;
 }
}

/* =========================================================================
 * 31. LOADING SKELETON (better UX di koneksi lambat) [v11 NEW]
 * ========================================================================= */
.skeleton {
 background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
 background-size: 200% 100%;
 animation: skeletonLoading 1.5s ease-in-out infinite;
 border-radius: 4px;
}
html[data-theme="dark"] .skeleton {
 background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
 background-size: 200% 100%;
}
@keyframes skeletonLoading {
 0% { background-position: 200% 0; }
 100% { background-position: -200% 0; }
}

/* =========================================================================
 * 32. SMART TV & GAME CONSOLE BROWSER [v11 NEW]
 * Samsung Tizen, LG WebOS, PS5 browser, Xbox
 * Karakteristik: jauh dari layar, navigasi pakai remote D-pad
 * ========================================================================= */
@media (min-width: 1920px) and (hover: hover) and (pointer: fine) {
 /* Jika layar besar tapi pointer fine = mungkin TV remote */
 /* Buat focus indicator lebih jelas */
 a:focus-visible, button:focus-visible, .btn:focus-visible,
 input:focus-visible, select:focus-visible, textarea:focus-visible {
 outline: 4px solid #f5a623;
 outline-offset: 4px;
 }
}

/* =========================================================================
 * 33. ACCESSIBLE COLOR CONTRAST [v11 NEW]
 * Pastikan minimal WCAG AA contrast
 * ========================================================================= */
.text-muted { color: #6c7280 !important; }
html[data-theme="dark"] .text-muted { color: #b0b0b0 !important; }

/* =========================================================================
 * 34. MOBILE-APP-LIKE NAVIGATION HELPERS [v11 NEW]
 * ========================================================================= */
/* Bottom navigation bar (mobile app feel) */
.bottom-nav-mobile {
 position: fixed;
 bottom: 0;
 left: 0;
 right: 0;
 background: var(--app-card-bg, #fff);
 border-top: 1px solid rgba(0, 0, 0, 0.08);
 display: flex;
 justify-content: space-around;
 padding: 8px 4px;
 z-index: 1000;
 box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
}
@supports (padding: max(0px)) {
 .bottom-nav-mobile {
 padding-bottom: max(8px, env(safe-area-inset-bottom));
 }
}
.bottom-nav-mobile a, .bottom-nav-mobile button {
 flex: 1;
 text-align: center;
 color: #555;
 text-decoration: none;
 padding: 6px 4px;
 border-radius: 12px;
 font-size: 0.7rem;
 background: transparent;
 border: none;
}
.bottom-nav-mobile a.active {
 color: var(--app-primary, #f5a623);
 background: rgba(245, 166, 35, 0.1);
}
.bottom-nav-mobile a i, .bottom-nav-mobile button i {
 font-size: 1.2rem;
 display: block;
 margin-bottom: 2px;
}

/* Hide bottom-nav di desktop */
@media (min-width: 992px) {
 .bottom-nav-mobile { display: none; }
}

/* =========================================================================
 * 35. KEYBOARD VISIBLE FIX (anti layout pecah saat keyboard muncul HP)
 * ========================================================================= */
@media (max-width: 767.98px) {
 /* Saat keyboard muncul, viewport HP shrink. Cegah elemen fixed naik. */
 .keyboard-aware-bottom {
 bottom: env(keyboard-inset-height, 0);
 }
}

/* =========================================================================
 * 36. UC BROWSER & MINI BROWSER FALLBACK [v11 NEW]
 * Browser low-end yang banyak dipakai di Indonesia
 * ========================================================================= */
@supports not (display: grid) {
 /* UC Browser old: pakai flexbox */
 .row { display: -webkit-flex; display: flex; flex-wrap: wrap; }
 [class*="col-"] { -webkit-flex: 1; flex: 1; }
}

/* =========================================================================
 * 37. RTL SUPPORT (kalau suatu hari perlu Arabic/Hebrew) [v11 NEW]
 * ========================================================================= */
[dir="rtl"] .sidebar, [dir="rtl"] .admin-sidebar, [dir="rtl"] .ss-sidebar {
 left: auto;
 right: 0;
}
[dir="rtl"] .main-content {
 margin-left: 0;
 margin-right: var(--sb-width, 260px);
}

/* End of file v11 */


/* =========================================================================
 * 29. LOGIN-LIKE PAGES SCROLL FIX (≤ 992 px) [v12 NEW 2026-05-13]
 * Halaman login / lupa password / verify PIN / dll sering pakai pattern
 * `body { min-height:100vh; display:flex; align-items:center }` → di HP
 * konten yang lebih tinggi dari viewport ke-potong + tidak bisa di-scroll
 * ke bawah (classic flex-center overflow bug). Override supaya di HP
 * body jadi align-start dan halaman bisa discroll penuh sampai bawah.
 *
 * `:has()` didukung semua browser modern (Chrome 105+, Firefox 121+,
 * Safari 15.4+, Edge 105+, Brave, Opera, Samsung Internet). Browser
 * lama ignore silently, fallback: body tetap tampil seperti semula.
 * ========================================================================= */
@media (max-width: 992px) {
 body:has(.login-wrapper),
 body:has(.reset-card),
 body:has(.pin-card),
 body:has(.card-pin),
 body:has(.login-card) {
 align-items: flex-start !important;
 min-height: auto !important;
 height: auto !important;
 padding-top: 16px !important;
 padding-bottom: 120px !important;
 }
 /* "Kembali ke Beranda" / back-home fixed di pojok kiri-atas: di HP jadi
 statis supaya tidak nutup konten + ikut mengalir bersama layout. */
 body:has(.login-wrapper) .back-home,
 body:has(.reset-card) .back-home,
 body:has(.pin-card) .back-home,
 body:has(.card-pin) .back-home {
 position: static !important;
 display: inline-flex !important;
 margin-bottom: 10px !important;
 }
}