* { margin: 0; padding: 0; box-sizing: border-box; } html, body { font-family: 'Inter', 'Poppins', sans-serif; height: 100%; } /* Reserve scrollbar gutter to avoid layout shift when scrollbar appears/disappears */ html { scrollbar-gutter: stable; } button, input, select, textarea { font-family: 'Inter', 'Poppins', sans-serif; } html { scroll-behavior: smooth; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #555; } input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; } @media print { * { background: transparent !important; color: black !important; box-shadow: none !important; text-shadow: none !important; } body { margin: 0; padding: 0; } } /* Page entrance animation: subtle fade & lift for smoother feel Note: we don't hide content by default here so pages without the app-ready script (e.g., standalone `login.php`) remain visible. Pages that include `includes/navbar.php` still set an inline initial style on (opacity/transform) and will animate to the visible state when the script runs. */ body { will-change: opacity, transform; } body.app-ready { opacity: 1; transform: none; transition: opacity 520ms cubic-bezier(.16,.84,.24,1), transform 520ms cubic-bezier(.16,.84,.24,1); } /* Ensure SweetAlert modal appears above everything and isn't clipped by transforms */ .swal2-container { z-index: 999999 !important; } .swal2-backdrop-show { z-index: 999998 !important; } /* Keep SweetAlert backdrop transparent (user prefers no dark overlay). We'll style the popup itself as a dark/black card so it's visible in both light and dark modes while the backdrop remains non-darkening. */ .swal2-backdrop, .swal2-backdrop-show { background-color: transparent !important; } .swal2-container .swal2-backdrop, .swal2-overlay, .swal2-container::before, .swal2-container::after, .swal2-container.swal2-backdrop-show { background-color: transparent !important; background: transparent !important; } /* When a modal is opening, temporarily neutralize transforms and overflow that may clip fixed elements */ body.swal-overflow-fix { overflow: visible !important; } body.swal-overflow-fix * { transform: none !important; } /* Ensure container uses fixed positioning and covers viewport regardless of stacking contexts */ .swal2-container { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; } .swal2-popup { z-index: 1000000 !important; } /* Extra hardening: force backdrop/container to always cover the full viewport and avoid any ancestor clipping or odd computed heights by using 100vh/100vw. */ .swal2-container, .swal2-container .swal2-backdrop, .swal2-container::before, .swal2-container::after, .swal2-overlay { position: fixed !important; inset: 0 !important; height: 100vh !important; min-height: 100vh !important; width: 100vw !important; } .swal2-container { display: flex !important; align-items: center !important; justify-content: center !important; } /* Style the SweetAlert popup as a dark/black card (user requested black theme) while keeping the backdrop transparent so the page isn't dimmed. */ .swal2-popup { background: #0b0b0b !important; /* near-black */ color: #ffffff !important; border-radius: 10px !important; box-shadow: 0 18px 40px rgba(2,6,23,0.6) !important; border: 1px solid rgba(255,255,255,0.04) !important; } .swal2-title { color: #ffffff !important; font-weight: 700; } .swal2-html-container { color: #e6e6e6 !important; } .swal2-icon.swal2-warning { color: #ffb74d !important; } .swal2-styled.swal2-confirm { background-color: #ff4d4d !important; border: none !important; color: #fff !important; } .swal2-styled.swal2-cancel { background-color: #6c757d !important; color: #fff !important; } @media (prefers-color-scheme: dark) { /* keep the dark popup consistent in user dark mode */ .swal2-popup { background: #0b0b0b !important; color: #fff !important; } .swal2-title { color: #fff !important; } .swal2-html-container { color: #e6e6e6 !important; } } /* Optional: animate main content containers slightly delayed when app-ready is used */ .kasir-main, .container, .produk-grid, .table-wrapper { transition: opacity 520ms cubic-bezier(.16,.84,.24,1), transform 520ms cubic-bezier(.16,.84,.24,1); opacity: 1; transform: none; } /* small staggered delays applied only when app-ready is present */ body.app-ready .container { transition-delay: 80ms; } body.app-ready .kasir-main { transition-delay: 120ms; } body.app-ready .produk-grid { transition-delay: 160ms; } body.app-ready .table-wrapper { transition-delay: 200ms; } /* Reduce motion preference */ @media (prefers-reduced-motion: reduce) { body, .kasir-main, .container, .produk-grid, .table-wrapper { transition: none !important; transform: none !important; } } /* Smooth grid replace animations and centered no-results */ .produk-grid { transition: opacity 320ms cubic-bezier(.22,.9,.35,1), transform 320ms cubic-bezier(.22,.9,.35,1); } .produk-grid.grid-fade-out { opacity: 0.02; transform: translateY(6px); } .produk-grid.grid-fade-in { opacity: 1; transform: none; } .produk-grid .no-results { grid-column: 1 / -1; min-height: 260px; display: flex; align-items: center; justify-content: center; color: #999; font-size: 1.25rem; } /* Payment select styling for kassir page */ /* Payment select styling for kasir page */ .select-payment { position: relative; width: 100%; } .select-payment .select-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #ff6600; font-size: 1.05rem; pointer-events: none; display: flex; align-items: center; justify-content: center; } .select-payment .select-icon i { display: inline-block; } .select-payment select { appearance: none; -webkit-appearance: none; width: 100%; padding: 0.68rem 1.2rem 0.68rem 44px; /* left padding for icon */ border-radius: 10px; border: 1px solid #e6e6e6; background: linear-gradient(180deg,#fff,#fbfbfb); box-shadow: 0 6px 18px rgba(14,30,37,0.06); font-weight: 600; color: #1f2937; transition: box-shadow 180ms ease, transform 120ms ease, border-color 160ms ease; } .select-payment select:focus { outline: none; border-color: #ff0000; box-shadow: 0 8px 20px rgba(255,0,0,0.08); transform: translateY(-1px); } /* remove global chevron to avoid double-arrow when using custom dropdown */ .select-payment::after { display: none !important; } /* Dark mode adjustments */ body.dark .select-payment select, body .select-payment select[style*='background-color: #2a2a2a'] { background: #1f1f1f; color: #fff; border-color: #333; } /* small responsive tweak */ @media (max-width: 480px) { .select-payment select { padding-left: 40px; padding-right: 36px; } } /* Custom dropdown (used in kasir) */ .select-custom { position: relative; display: block; width: 100%; max-width: 420px; cursor: pointer; font-family: 'Inter', sans-serif; } .select-custom .select-head { display: flex; align-items: center; gap: 10px; padding: 0.6rem 0.9rem; border-radius: 10px; background: linear-gradient(180deg,#fff,#fafafa); border: 1px solid #e6e6e6; box-shadow: 0 6px 18px rgba(14,30,37,0.04); } .select-custom .select-head:focus { outline: none; box-shadow: 0 8px 22px rgba(0,0,0,0.06); } .select-custom .icon { width: 36px; height: 36px; border-radius: 8px; display:flex; align-items:center; justify-content:center; background:#fff; color:#111; flex: 0 0 36px; box-shadow: 0 4px 10px rgba(0,0,0,0.04); } .select-custom .label { flex: 1; font-weight:600; color: #111; } .select-custom .chev { margin-left: 8px; color: #666; } /* Chevron rotation: animate the caret when dropdown opens/ closes. When `.open` is present we rotate 180deg so caret faces up, and the transition duration matches the options animation for smoothness. */ .select-custom .chev i { display: inline-block; transition: transform 260ms cubic-bezier(.2,.9,.25,1); transform-origin: 50% 50%; } .select-custom.open .chev i { transform: rotate(180deg); } .select-custom.open .select-head { border-color: #ff0000; box-shadow: 0 10px 28px rgba(255,0,0,0.06); } .select-custom .options { position: absolute; left: 0; right: 0; top: calc(100% + 8px); background: #fff; border: 1px solid #e9e9e9; border-radius: 10px; box-shadow: 0 18px 40px rgba(0,0,0,0.08); z-index: 12000; overflow: hidden; display: none; max-height: 260px; overflow-y: auto; } .select-custom .options { opacity: 0; transform: translateY(-6px); transition: opacity 260ms cubic-bezier(.2,.9,.25,1), transform 260ms cubic-bezier(.2,.9,.25,1); } .select-custom .options.show-down { display: block !important; opacity: 1 !important; transform: translateY(0) !important; } .select-custom .options.show-up { display: block !important; opacity: 1 !important; transform: translateY(0) !important; } .select-custom.options-top .options { top: auto !important; bottom: calc(100% + 8px) !important; } .select-custom .option { display:flex; align-items:center; gap:10px; padding: 0.6rem 0.9rem; cursor: pointer; } .select-custom .option .opt-icon { width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:6px; background:#fafafa; color:#333; flex:0 0 32px; } .select-custom .option .opt-label { font-weight:600; color:#222; } .select-custom .option:hover { background: #f7f7f7; } .select-custom .option.selected { background: linear-gradient(90deg, rgba(255,0,0,0.04), rgba(255,0,0,0.01)); border-left: 4px solid #ff0000; } @media (max-width: 640px) { .select-custom { max-width: 100%; } .select-custom .select-head { padding: 0.56rem; } .select-custom .options { top: calc(100% + 6px); } } /* Navbar styles (centralized here so includes don't need to emit tags) */ .navbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1.5rem; background: #fff; border-bottom: 1px solid #eee; } .navbar-brand { display:flex; align-items:center; gap:0.75rem; font-weight:700; text-decoration:none; color:inherit; } .navbar-logo { height:36px; width:auto; max-width:160px; object-fit:contain; } .navbar-menu { display:flex; gap:1.25rem; list-style:none; margin:0; padding:0; align-items:center; } .navbar-menu a { text-decoration:none; color:#333; font-weight:500; } .nav-right-group { margin-left:auto; display:flex; align-items:center; gap:1rem; } .navbar-right { display:flex; align-items:center; gap:1rem; } .btn-menu { display:none; } @media (max-width:768px) { .navbar-menu { display:none; } .btn-menu { display:block; } }