/* ============================================ SplitAja — Premium SaaS Design System v2 Inspired by: Linear, Stripe, Wise ============================================ */ /* --- Design Tokens --- */ :root { /* Surfaces */ --bg-base: #f5f5f7; --bg-surface: #ffffff; --bg-surface-2: #f0f0f3; --bg-surface-hover: #fafafa; --bg-elevated: #ffffff; /* Text */ --text-primary: #1a1a2e; --text-secondary: #6b7280; --text-tertiary: #9ca3af; --text-inverse: #ffffff; /* Borders */ --border-default: rgba(0, 0, 0, 0.06); --border-strong: rgba(0, 0, 0, 0.1); --border-focus: #6366f1; /* Brand */ --brand-primary: #6366f1; --brand-primary-hover: #4f46e5; --brand-soft: rgba(99, 102, 241, 0.08); --brand-glow: rgba(99, 102, 241, 0.25); --gradient-brand: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a78bfa 100%); --gradient-header: linear-gradient(135deg, #6366f1, #8b5cf6); /* Semantic */ --success: #10b981; --success-soft: rgba(16, 185, 129, 0.1); --success-bg: rgba(16, 185, 129, 0.06); --danger: #ef4444; --danger-soft: rgba(239, 68, 68, 0.1); --warning: #f59e0b; --warning-soft: rgba(245, 158, 11, 0.1); --info: #3b82f6; --info-soft: rgba(59, 130, 246, 0.1); /* Layout */ --radius-xs: 6px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-full: 9999px; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04); --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04); --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.12); --shadow-glow: 0 4px 20px var(--brand-glow); /* Motion */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --duration: 0.2s; --safe-bottom: env(safe-area-inset-bottom, 0px); } /* --- Dark Mode --- */ .dark { --bg-base: #0f0f17; --bg-surface: #181822; --bg-surface-2: #1f1f2c; --bg-surface-hover: #24243a; --bg-elevated: #1f1f2c; --text-primary: #edeef3; --text-secondary: #9a9ab0; --text-tertiary: #636380; --border-default: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.14); --border-focus: #818cf8; --brand-primary: #818cf8; --brand-primary-hover: #6366f1; --brand-soft: rgba(129, 140, 248, 0.12); --brand-glow: rgba(129, 140, 248, 0.2); --gradient-brand: linear-gradient(135deg, #818cf8 0%, #a78bfa 50%, #c4b5fd 100%); --gradient-header: linear-gradient(135deg, #181822, #0f0f17); --success: #34d399; --success-soft: rgba(52, 211, 153, 0.12); --success-bg: rgba(52, 211, 153, 0.06); --danger: #fb7185; --danger-soft: rgba(251, 113, 133, 0.12); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.6); --shadow-glow: 0 4px 24px rgba(129, 140, 248, 0.18); } /* --- Reset & Base --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: var(--bg-base); } /* html.dark applies BEFORE body renders (set by inline script) */ html.dark { background: #0f0f17; color-scheme: dark; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; background: var(--bg-base); color: var(--text-primary); min-height: 100vh; min-height: 100dvh; line-height: 1.55; padding-bottom: calc(76px + var(--safe-bottom)); } /* Transition only after first paint — prevents dark mode flash on page load. .theme-ready is added by JS after DOMContentLoaded via requestAnimationFrame */ body.theme-ready { transition: background var(--duration) var(--ease), color var(--duration) var(--ease); } ::selection { background: var(--brand-soft); color: var(--brand-primary); } /* --- Offline Indicator Bar --- */ .offline-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px; background: linear-gradient(135deg, #1e1b4b, #312e81); color: #a5b4fc; font-size: 13px; font-weight: 500; font-family: 'Inter', system-ui, sans-serif; transform: translateY(-100%); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .offline-bar.visible { transform: translateY(0); pointer-events: auto; } .offline-bar svg { flex-shrink: 0; opacity: 0.7; } /* --- Layout --- */ .container { max-width: 1100px; margin: 0 auto; padding: 0 20px; } .main-grid { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 8px 0 24px; } .main-col { display: flex; flex-direction: column; gap: 10px; max-width: 640px; } @media (min-width: 768px) { .main-grid { grid-template-columns: 1fr 340px; gap: 24px; padding: 24px 0 40px; } .main-col { gap: 16px; max-width: none; } } /* Large screens (1200px+) */ @media (min-width: 1200px) { .container { max-width: 1100px; padding: 0 32px; } .main-grid { grid-template-columns: 1fr 360px; gap: 28px; } .card { padding: 22px; border-radius: var(--radius-xl); } .input, select, .setting-input-group input { padding: 11px 14px; font-size: 14px; } .card-title { font-size: 14px; } label, .label { font-size: 12px; } .item-row { padding: 16px 16px 14px; } .input-row-3 { gap: 10px; } } /* Extra-large screens (1600px+ / 27" monitors) */ @media (min-width: 1600px) { .container { max-width: 1280px; padding: 0 48px; } .main-grid { grid-template-columns: 1fr 400px; gap: 32px; padding: 28px 0 48px; } .card { padding: 24px; } .app-header { padding: 12px 48px; } .header-inner { max-width: 1280px; } .subtotal-amount { font-size: 32px; } } /* Sidebar action buttons */ .sidebar-divider { height: 1px; background: var(--border-default); margin: 14px 0 12px; } .sidebar-actions { display: flex; gap: 8px; } .sidebar-actions .btn { flex: 1; justify-content: center; } .btn-text-danger { display: block; width: 100%; text-align: center; margin-top: 10px; background: none; border: none; color: var(--text-tertiary); font-size: 12px; font-family: inherit; cursor: pointer; padding: 6px 0; transition: color var(--duration) var(--ease); } .btn-text-danger:hover { color: var(--danger); } /* Participant Badge */ .participant-badge { background: var(--brand-soft); color: var(--brand-primary); padding: 2px 8px; border-radius: var(--radius-full); font-size: 11px; font-weight: 700; margin-left: auto; } /* ============================================ HEADER — Glassmorphism bar ============================================ */ .app-header { background: rgba(245, 245, 247, 0.72); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--border-default); position: sticky; top: 0; z-index: 60; overflow: visible; padding: 10px 16px; transition: background var(--duration) var(--ease); } /* When nav strip follows header, remove header border to eliminate gap */ .app-header:has(+ .feature-nav-strip), .app-header.has-nav-strip { border-bottom: none; } .dark .app-header { background: rgba(12, 12, 20, 0.72); } .header-inner { max-width: 780px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; overflow: visible; } .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; } .logo img { height: 30px; width: 30px; border-radius: 8px; } .logo-text { font-size: 19px; font-weight: 800; letter-spacing: -0.03em; background: var(--gradient-brand); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .header-actions { display: flex; align-items: center; gap: 6px; overflow: visible; } .header-btn { height: 34px; min-width: 34px; border-radius: var(--radius-xs); border: 1px solid var(--border-default); background: var(--bg-surface); color: var(--text-secondary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all var(--duration) var(--ease); font-family: inherit; } .header-btn:hover { border-color: var(--brand-primary); color: var(--brand-primary); background: var(--brand-soft); } .header-btn:active { transform: scale(0.94); } .header-btn svg { width: 16px; height: 16px; } .lang-toggle { font-size: 11px; font-weight: 800; padding: 0 12px; letter-spacing: 0.05em; } /* ============================================ AUTH UI — Login, user menu, guest badge ============================================ */ .guest-badge { display: none; } .user-menu { position: relative; display: flex; align-items: center; overflow: visible; } .user-menu-toggle { display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: transparent; border: 1px solid var(--border-default); border-radius: var(--radius-full); cursor: pointer; transition: all var(--duration) var(--ease); color: var(--text-primary); font-family: inherit; } .user-menu-toggle:hover { border-color: var(--brand-primary); background: var(--brand-soft); } .user-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; } .user-name { font-size: 12px; font-weight: 600; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-dropdown { position: absolute; top: calc(100% + 8px); right: 0; min-width: 240px; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 12px; opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.96); transition: all 0.2s var(--ease); z-index: 10060; } .user-menu.open .user-dropdown { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .user-dropdown-info { display: flex; align-items: center; gap: 10px; padding: 4px 0 8px; } .user-avatar-lg { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .dropdown-name { font-size: 13px; font-weight: 700; color: var(--text-primary); } .dropdown-email { font-size: 11px; color: var(--text-tertiary); margin-top: 1px; } .plan-badge { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-full); margin-top: 4px; background: var(--brand-soft); color: var(--brand-primary); text-transform: uppercase; letter-spacing: 0.05em; } .plan-badge.pro { background: linear-gradient(135deg, #f59e0b, #f97316); color: #fff; } .user-dropdown-divider { height: 1px; background: var(--border-default); margin: 8px 0; } .user-dropdown-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; font-size: 13px; font-weight: 500; color: var(--text-secondary); background: none; border: none; border-radius: var(--radius-xs); cursor: pointer; transition: all var(--duration) var(--ease); font-family: inherit; } .user-dropdown-item:hover { background: var(--bg-surface-2); color: var(--text-primary); } .user-dropdown-item.danger { color: var(--danger); } .user-dropdown-item.danger:hover { background: var(--danger-soft); } @media (max-width: 600px) { .user-name { display: none; } .guest-badge span { display: none; } } /* ============================================ CARDS — Soft elevated surfaces ============================================ */ .card { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow-sm); transition: all var(--duration) var(--ease); } .card:hover { box-shadow: var(--shadow-md); } .card-title { font-size: 13px; font-weight: 700; color: var(--text-secondary); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; letter-spacing: 0.02em; } .card-title svg { width: 16px; height: 16px; color: var(--brand-primary); opacity: 0.7; } /* ============================================ INPUTS — Clean flat style (Stripe-inspired) ============================================ */ .input, select, .setting-input-group input { width: 100%; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-surface); color: var(--text-primary); font-size: 14px; font-family: inherit; outline: none; transition: all var(--duration) var(--ease); } .input:focus, select:focus, .setting-input-group input:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--brand-soft); } .input::placeholder { color: var(--text-tertiary); font-weight: 400; } input[type="number"] { -moz-appearance: textfield; appearance: textfield; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; display: none; } /* Location field — subtle optional field below merchant */ .location-field { position: relative; margin-top: 6px; } .location-field .location-pin { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-tertiary); pointer-events: none; } .location-field .location-input { padding-left: 30px; font-size: 13px; opacity: 0.8; } .location-field .location-input:focus { opacity: 1; } /* Budget widget card on main page */ .budget-widget { position: relative; } .budget-widget .card-title svg { color: #10b981; } .budget-w-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; margin-left: auto; } .bw-ok { background: rgba(16,185,129,0.1); color: #10b981; } .bw-warning { background: rgba(245,158,11,0.1); color: #f59e0b; } .bw-danger { background: rgba(239,68,68,0.1); color: #ef4444; } .budget-w-progress { margin-top: 4px; } .budget-w-bar-bg { height: 6px; border-radius: 3px; background: var(--bg-surface-2, #f0f0f3); overflow: hidden; } .budget-w-bar-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; } .bw-green { background: linear-gradient(90deg, #10b981, #34d399); } .bw-yellow { background: linear-gradient(90deg, #f59e0b, #fbbf24); } .bw-red { background: linear-gradient(90deg, #ef4444, #f87171); } .bw-over { background: linear-gradient(90deg, #7c3aed, #a855f7); } .budget-w-labels { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--text-secondary); } /* Budget selector dropdown */ .budget-selector { position: relative; margin-top: 6px; } .budget-selector .budget-sel-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-tertiary); pointer-events: none; } .budget-selector .budget-select-input { padding-left: 30px; font-size: 13px; cursor: pointer; } .dark .budget-w-bar-bg { background: rgba(255,255,255,0.06); } /* Inline budget widget (inside link-bg-panel) */ .budget-widget-inline { margin: 8px 0 4px; padding: 10px 12px; border-radius: 8px; background: var(--bg-surface-2, #f8f9fb); border: 1px solid var(--border-color, rgba(0,0,0,0.06)); animation: bwSlideIn 0.3s ease; } .dark .budget-widget-inline { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); } .budget-widget-inline .bw-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--text-primary); } @keyframes bwSlideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* Budget/Group Context Bar — Always visible, 3 states */ .bg-context-bar { margin-bottom: 2px; border-radius: var(--radius-lg, 12px); background: var(--bg-card, #fff); border: 1px solid var(--border-color, rgba(0,0,0,0.06)); box-shadow: 0 1px 3px rgba(0,0,0,0.04); /* Make slightly more compact by lowering min-height */ min-height: 48px; /* Prevent layout shift — fixed structure */ contain: layout style; } .dark .bg-context-bar { background: var(--bg-card, #1e1e2e); border-color: rgba(255,255,255,0.06); } /* State container (only one visible at a time) */ .bg-state { display: none; padding: 8px 14px; } .bg-state.active { display: block; } /* STATE 1 — Loading skeleton */ .bg-skeleton { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .bg-skeleton-pill { height: 34px; border-radius: 8px; background: var(--bg-surface-2, #f0f0f3); position: relative; overflow: hidden; } .bg-skeleton-pill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%); animation: skeletonShimmer 1.5s ease infinite; } .dark .bg-skeleton-pill { background: rgba(255,255,255,0.06); } .dark .bg-skeleton-pill::after { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.06) 50%, transparent 100%); } @keyframes skeletonShimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* STATE 2 — Empty (ghost buttons) */ .bg-empty-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .bg-ghost-btn { display: flex; align-items: center; justify-content: center; gap: 5px; height: 32px; padding: 0 12px; border: 1.5px dashed var(--border-strong, rgba(0,0,0,0.12)); border-radius: 8px; background: transparent; color: var(--text-tertiary, #94a3b8); font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; text-align: center; line-height: 1; } .bg-ghost-btn:hover { border-color: var(--brand-primary, #6366f1); border-style: solid; color: var(--brand-primary, #6366f1); background: rgba(99,102,241,0.04); } .bg-ghost-btn:active { transform: scale(0.97); } .bg-ghost-btn svg { width: 14px; height: 14px; flex-shrink: 0; } .dark .bg-ghost-btn { border-color: rgba(255,255,255,0.1); color: #64748b; } .dark .bg-ghost-btn:hover { border-color: #818cf8; color: #818cf8; background: rgba(99,102,241,0.08); } /* STATE 3 — Filled (dropdowns) */ .bg-filled-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } /* When only one selector is visible, span full width */ .bg-filled-grid > .budget-selector:only-child { grid-column: 1 / -1; } .bg-context-bar .budget-selector { position: relative; } .bg-context-bar .budget-select-input { font-size: 12px; /* Minimal padding; text-align center handles the visual balance without breaking Edge dropdowns */ padding: 7px; border-radius: 8px; text-align: center !important; text-align-last: center !important; appearance: none; -webkit-appearance: none; } /* Base style for options to ensure everything in dropdown is left aligned for better readability */ .bg-context-bar .budget-select-input option { text-align: left !important; text-align-last: left !important; padding: 4px 12px !important; /* Proper breathing room inside the native dropdown */ color: var(--text-primary, #1e293b); font-weight: 500; } /* Ensure the placeholder option specifically is grey */ .bg-context-bar .budget-select-input option[value=""] { color: var(--text-tertiary, #94a3b8); font-weight: 600; } /* Premium Chevron Arrow Styling (Lightweight, No animations) */ .bg-context-bar .budget-selector .budget-sel-chevron { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--text-tertiary, #94a3b8); pointer-events: none; /* Let clicks pass through to the select */ } /* ============================================ CREATE BUDGET/GROUP MODALS (Split Bill page) Scoped to #sb-* modals to avoid conflicts ============================================ */ #sb-create-budget-modal, #sb-create-group-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 16px; backdrop-filter: blur(4px); } #sb-create-budget-modal.hidden, #sb-create-group-modal.hidden { display: none !important; } #sb-create-budget-modal .modal-card, #sb-create-group-modal .modal-card { background: var(--bg-surface, #fff); border: 1px solid var(--border-default, rgba(0,0,0,0.06)); border-radius: 20px; padding: 24px; width: 100%; max-width: 400px; box-shadow: 0 20px 60px rgba(0,0,0,0.2); animation: sbModalIn 0.25s ease; } @keyframes sbModalIn { from { opacity: 0; transform: scale(0.95) translateY(10px); } } #sb-create-budget-modal .modal-card h3, #sb-create-group-modal .modal-card h3 { font-size: 1.1rem; font-weight: 800; color: var(--text-primary); margin-bottom: 18px; } #sb-create-budget-modal .form-row, #sb-create-group-modal .form-row { margin-bottom: 14px; } #sb-create-budget-modal .form-row label, #sb-create-group-modal .form-row label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; } #sb-create-budget-modal .form-row-inline { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } #sb-create-budget-modal .modal-input, #sb-create-group-modal .modal-input { width: 100%; padding: 11px 14px; border: 1px solid var(--border-default, rgba(0,0,0,0.1)); border-radius: 10px; background: var(--bg-surface-2, #f5f5f7); color: var(--text-primary); font-size: 0.9rem; font-family: inherit; outline: none; transition: border-color 0.2s, box-shadow 0.2s; } #sb-create-budget-modal .modal-input:focus, #sb-create-group-modal .modal-input:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.1); } /* Emoji picker */ #sb-create-budget-modal .emoji-picker, #sb-create-group-modal .emoji-picker { display: flex; flex-wrap: wrap; gap: 6px; } #sb-create-budget-modal .emoji-opt, #sb-create-group-modal .emoji-opt { width: 38px; height: 38px; border: 2px solid transparent; border-radius: 10px; background: var(--bg-surface-2, #f5f5f7); font-size: 1.2rem; cursor: pointer; transition: 0.15s; display: flex; align-items: center; justify-content: center; } #sb-create-budget-modal .emoji-opt:hover, #sb-create-group-modal .emoji-opt:hover { border-color: rgba(99,102,241,0.3); } #sb-create-budget-modal .emoji-opt.active, #sb-create-group-modal .emoji-opt.active { border-color: #6366f1; background: rgba(99,102,241,0.08); } /* Date picker */ #sb-create-budget-modal .date-input-wrap { position: relative; } #sb-create-budget-modal .date-display { cursor: pointer; padding-right: 38px; } #sb-create-budget-modal .date-display::placeholder { color: var(--text-tertiary, #aaa); } #sb-create-budget-modal .date-native-hidden { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; z-index: 1; -webkit-appearance: none; appearance: none; } #sb-create-budget-modal .date-trigger { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: none; border-radius: 6px; background: rgba(99,102,241,0.08); color: #6366f1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; transition: background 0.2s; } /* Modal actions */ #sb-create-budget-modal .modal-actions, #sb-create-group-modal .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; } #sb-create-budget-modal .btn-cancel, #sb-create-group-modal .btn-cancel { padding: 10px 20px; border: 1px solid var(--border-default); border-radius: 10px; background: transparent; color: var(--text-secondary); font-weight: 600; font-size: 0.85rem; cursor: pointer; font-family: inherit; } #sb-create-budget-modal .btn-save, #sb-create-group-modal .btn-save { padding: 10px 24px; border: none; border-radius: 10px; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; font-weight: 700; font-size: 0.85rem; cursor: pointer; font-family: inherit; box-shadow: 0 4px 12px rgba(99,102,241,0.3); transition: 0.2s; } #sb-create-budget-modal .btn-save:hover, #sb-create-group-modal .btn-save:hover { transform: translateY(-1px); } #sb-create-budget-modal .btn-save:disabled, #sb-create-group-modal .btn-save:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } /* Dark mode for modals */ .dark #sb-create-budget-modal .modal-card, .dark #sb-create-group-modal .modal-card { background: #1e293b; border-color: rgba(255,255,255,0.08); } .dark #sb-create-budget-modal .modal-input, .dark #sb-create-group-modal .modal-input { background: rgba(30,41,59,0.8); border-color: rgba(255,255,255,0.08); } .dark #sb-create-budget-modal .emoji-opt, .dark #sb-create-group-modal .emoji-opt { background: rgba(30,41,59,0.8); } .dark #sb-create-budget-modal .date-trigger { background: rgba(99,102,241,0.15); } /* Legacy compat — keep link-bg-bar working */ .link-bg-bar { padding: 10px 14px; margin-bottom: 10px; border-radius: var(--radius-lg, 12px); background: var(--bg-card, #fff); border: 1px solid var(--border-color, rgba(0,0,0,0.06)); box-shadow: 0 1px 3px rgba(0,0,0,0.04); } .dark .link-bg-bar { background: var(--bg-card, #1e1e2e); border-color: rgba(255,255,255,0.06); } .link-bg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .link-bg-grid > .budget-selector:only-child { grid-column: 1 / -1; } .link-bg-bar .budget-selector { margin-top: 0; } .link-bg-bar .budget-select-input { font-size: 12px; padding: 7px 26px 7px 28px; border-radius: 8px; } select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; } label, .label { font-size: 11px; font-weight: 500; color: var(--text-secondary); display: block; margin-bottom: 5px; letter-spacing: 0.01em; } /* ============================================ ITEM ROWS — Subtle animated cards ============================================ */ .item-row { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 14px 14px 12px; position: relative; transition: all var(--duration) var(--ease); animation: itemSlideIn 0.35s var(--ease) both; overflow: visible; z-index: 1; } .item-row:focus-within { z-index: 10; } @media (min-width: 768px) { .item-row { padding-right: 42px; } .item-row .remove-btn { top: -11px; right: -8px; } } .item-row:hover { border-color: var(--brand-primary); box-shadow: 0 0 0 1px var(--brand-soft), var(--shadow-sm); } @keyframes itemSlideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .item-row .remove-btn { position: absolute; top: -11px; right: -8px; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--border-default); background: var(--bg-elevated, #fff); color: var(--text-tertiary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); font-size: 0; line-height: 1; box-shadow: 0 1px 4px rgba(0,0,0,0.08); z-index: 5; padding: 0; } .item-row .remove-btn svg { width: 12px; height: 12px; stroke-width: 2.5; flex-shrink: 0; } .item-row .remove-btn:hover { border-color: var(--danger); color: #fff; background: var(--danger); box-shadow: 0 2px 8px rgba(239,68,68,0.35); transform: scale(1.12); } .item-row .remove-btn:active { transform: scale(0.95); } .input-row-3 { display: grid; grid-template-columns: 2.5fr 1.4fr 0.4fr; gap: 8px; } @media (min-width: 768px) { .input-row-3 { grid-template-columns: 2.5fr 1.2fr 0.3fr auto; } } /* Item name input — handle long Indonesian product names */ .item-nama { font-size: 13px; text-overflow: ellipsis; overflow: hidden; } .item-nama:focus { text-overflow: clip; overflow: visible; } /* Item subtotal (desktop only) */ .item-subtotal { display: none; flex-direction: column; align-items: stretch; justify-content: flex-end; white-space: nowrap; min-width: 90px; } .item-subtotal .label { font-size: 11px; color: var(--text-secondary); margin-bottom: 5px; } .item-subtotal-value { font-size: 14px; font-weight: 500; color: var(--brand-primary); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; padding: 9px 12px; line-height: 1.4; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--bg-surface-2); text-align: right; width: 100%; } /* Right-align numeric input values (accounting convention) */ .item-harga, .item-qty { text-align: right; } @media (min-width: 768px) { .item-subtotal { display: flex; } } /* ============================================ BUTTONS — Premium gradient + soft variants ============================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 16px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; border: none; transition: all var(--duration) var(--ease); line-height: 1.2; white-space: nowrap; } .btn:active { transform: scale(0.96); } .btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; } .btn svg { width: 15px; height: 15px; flex-shrink: 0; } .btn-primary { background: var(--gradient-brand); color: #fff; box-shadow: var(--shadow-glow); position: relative; overflow: hidden; } .btn-primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), transparent); opacity: 0; transition: opacity var(--duration); } .btn-primary:hover::after { opacity: 1; } .btn-primary:hover { box-shadow: var(--shadow-glow), var(--shadow-md); } .btn-soft { background: var(--brand-soft); color: var(--brand-primary); } .btn-soft:hover { background: var(--brand-primary); color: #fff; } .btn-outline { background: var(--bg-surface); border: 1.5px solid var(--border-default); color: var(--text-secondary); } .btn-outline:hover { border-color: var(--brand-primary); color: var(--brand-primary); background: var(--brand-soft); } .btn-danger { background: var(--danger-soft); color: var(--danger); } .btn-danger:hover { background: var(--danger); color: #fff; } .btn-outline-danger { background: transparent; border: 1px solid var(--border-default); color: var(--text-tertiary); } .btn-outline-danger:hover { border-color: var(--danger); color: var(--danger); } .btn-outline-danger.btn-confirm { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); animation: pulse-danger 0.6s ease; } @keyframes pulse-danger { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.04) } } .btn-success { background: var(--success-soft); color: var(--success); } .btn-success:hover { background: var(--success); color: #fff; } .btn-sm { padding: 8px 14px; font-size: 13px; border-radius: var(--radius-xs); } .btn-lg { padding: 13px 24px; font-size: 15px; border-radius: var(--radius-md); width: 100%; } .btn-icon { width: 38px; height: 38px; padding: 0; flex-shrink: 0; } /* ============================================ SCAN AREA — Inviting drag-drop zone ============================================ */ .scan-area { border: 1px dashed var(--border-strong); border-radius: var(--radius-md); padding: 16px; text-align: center; cursor: pointer; transition: all var(--duration) var(--ease); background: transparent; } .scan-area:hover { border-color: var(--brand-primary); background: var(--brand-soft); border-style: solid; } .scan-area input[type="file"] { display: none; } .scan-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); } /* ============================================ PARTICIPANTS — Colorful avatar pills ============================================ */ .avatar { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 14px; cursor: grab; position: relative; user-select: none; transition: transform var(--duration) var(--ease); box-shadow: var(--shadow-xs); } .avatar::after { content: attr(data-name); position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%) scale(0.9); background: rgba(17, 24, 39, 0.95); /* Deep solid black-gray for contrast anywhere */ color: #ffffff; padding: 2.5px 6px; border-radius: 4px; font-size: 9.5px; letter-spacing: 0.02em; font-weight: 600; white-space: nowrap; pointer-events: none; opacity: 0; z-index: 20; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Edge Protection via Ellipsis */ max-width: 110px; overflow: hidden; text-overflow: ellipsis; } .avatar:hover::after, .avatar:active::after { opacity: 1; transform: translateX(-50%) scale(1); } .avatar:hover { transform: scale(1.15); box-shadow: var(--shadow-md); z-index: 10; } .avatar .chip-x { position: absolute; top: -4px; right: -4px; width: 16px; height: 16px; border-radius: 50%; background: var(--danger); color: #fff; font-size: 9px; display: none; align-items: center; justify-content: center; cursor: pointer; border: 2px solid var(--bg-surface); font-weight: 700; } .avatar:hover .chip-x { display: flex; } .avatar-list { display: flex; flex-wrap: wrap; gap: 8px; min-height: 32px; padding: 6px 4px; } /* ============================================ SIDEBAR COLLAPSIBLE ============================================ */ .sidebar-collapsible { overflow: hidden; } .sidebar-collapse-header { display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; margin: -2px 0; } .sidebar-collapse-header:hover .collapse-chevron { color: var(--brand-primary); } .collapse-chevron { width: 18px; height: 18px; color: var(--text-tertiary); flex-shrink: 0; transition: transform 0.25s var(--ease), color 0.2s; } .sidebar-collapsible.collapsed .collapse-chevron { transform: rotate(-90deg); } .sidebar-collapse-body { max-height: 400px; overflow: hidden; transition: max-height 0.3s var(--ease), opacity 0.25s, margin-top 0.3s; opacity: 1; margin-top: 12px; } .sidebar-collapsible.collapsed .sidebar-collapse-body { max-height: 0; opacity: 0; margin-top: 0; } /* Participants actions row */ .participants-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .participants-actions .btn { flex: 1; justify-content: center; } #mobile-save-participants-btn, #mobile-clear-participants-btn { flex: 1; } /* ============================================ SETTINGS — compact 2-col grid (sidebar) ============================================ */ .settings-compact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .setting-compact .label { font-size: 11px; margin-bottom: 4px; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--text-secondary); } .setting-compact .setting-input-group { display: flex; gap: 4px; } /* Segmented control for %/Rp */ .type-toggle-group { display: flex; flex-shrink: 0; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border-strong); } .type-opt { padding: 7px 10px; font-size: 12px; font-weight: 700; background: var(--bg-surface-2); color: var(--text-tertiary); border: none; cursor: pointer; font-family: inherit; line-height: 1; transition: all var(--duration) var(--ease); user-select: none; } .type-opt:first-child { border-right: 1px solid var(--border-strong); } .type-opt.active { background: var(--brand-primary); color: #fff; } .type-opt:not(.active):hover { background: var(--brand-soft); color: var(--brand-primary); } .type-opt:active { transform: scale(0.95); } .setting-compact .setting-input-group input { flex: 1; padding: 7px 8px; font-size: 13px; } .setting-compact>select { padding: 7px 8px; font-size: 13px; } /* Legacy grid (mobile settings) */ .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 480px) { .settings-grid { grid-template-columns: 1fr; } } .setting-input-group { display: flex; gap: 4px; } .setting-input-group input { flex: 1; } .setting-info { font-size: 11px; color: var(--text-tertiary); margin-top: 3px; font-style: italic; } /* ============================================ SUBTOTAL SIDEBAR CARD — Hero style ============================================ */ .subtotal-sidebar-card { background: var(--bg-surface); border-left: 3px solid var(--brand-primary) !important; } .sidebar-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; } .subtotal-amount { font-size: 28px; font-weight: 800; color: var(--brand-primary); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; line-height: 1.2; } .subtotal-note { font-size: 12px; color: var(--text-tertiary); margin-top: 4px; } /* Scan Tips */ .scan-tips { list-style: none; padding: 0; margin: 0 0 12px; } .scan-tips li { font-size: 11px; color: var(--text-tertiary); padding: 2px 0 2px 14px; position: relative; line-height: 1.5; } .scan-tips li::before { content: '•'; position: absolute; left: 0; color: var(--brand-primary); font-weight: 700; } /* ============================================ SCAN PREVIEW OVERLAY — Futuristic scan effect ============================================ */ .scan-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; flex-direction: column; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease), visibility 0.3s; } .scan-overlay.active { opacity: 1; visibility: visible; } .scan-preview-card { width: 300px; max-width: 85vw; background: var(--bg-surface); border-radius: 20px; overflow: hidden; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5); animation: scan-card-in 0.4s var(--ease); } @keyframes scan-card-in { from { transform: scale(0.9) translateY(20px); opacity: 0; } } .scan-preview-thumb { position: relative; width: 100%; aspect-ratio: 3/4; overflow: hidden; background: #111; } .scan-preview-thumb img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.7) contrast(1.1); } /* Scanning laser line */ .scan-laser { position: absolute; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--brand-primary), rgba(129, 140, 248, 0.8), var(--brand-primary), transparent); box-shadow: 0 0 20px var(--brand-primary), 0 0 60px rgba(129, 140, 248, 0.4); animation: laser-sweep 2s ease-in-out infinite; } @keyframes laser-sweep { 0% { top: 0 } 50% { top: 100% } 100% { top: 0 } } /* Corner brackets */ .scan-corners { position: absolute; inset: 12px; pointer-events: none; border: 2px solid transparent; } .scan-corners::before, .scan-corners::after { content: ''; position: absolute; width: 20px; height: 20px; border-color: var(--brand-primary); border-style: solid; } .scan-corners::before { top: 0; left: 0; border-width: 2px 0 0 2px; } .scan-corners::after { bottom: 0; right: 0; border-width: 0 2px 2px 0; } .scan-corners-2::before, .scan-corners-2::after { content: ''; position: absolute; width: 20px; height: 20px; border-color: var(--brand-primary); border-style: solid; } .scan-corners-2::before { top: 12px; right: 12px; border-width: 2px 2px 0 0; } .scan-corners-2::after { bottom: 12px; left: 12px; border-width: 0 0 2px 2px; } /* Pulsing glow ring */ .scan-preview-thumb::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(129, 140, 248, 0.3); animation: scan-pulse 1.5s ease-in-out infinite; } @keyframes scan-pulse { 0%, 100% { box-shadow: inset 0 0 10px rgba(129, 140, 248, 0.1) } 50% { box-shadow: inset 0 0 30px rgba(129, 140, 248, 0.25) } } /* Scan status area */ .scan-preview-status { padding: 16px 20px; text-align: center; } .scan-step { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; color: var(--text-tertiary); transition: color 0.3s; } .scan-step.active { color: var(--brand-primary); font-weight: 600; } .scan-step.done { color: var(--success); } .scan-step-icon { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; flex-shrink: 0; border: 1.5px solid var(--border-default); transition: all 0.3s; } .scan-step.active .scan-step-icon { border-color: var(--brand-primary); background: var(--brand-soft); animation: step-pulse 1s infinite; } .scan-step.done .scan-step-icon { border-color: var(--success); background: var(--success-soft); color: var(--success); } @keyframes step-pulse { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.15) } } .scan-dots::after { content: ''; display: inline-block; animation: dots 1.5s steps(4) infinite; } @keyframes dots { 0% { content: '' } 25% { content: '.' } 50% { content: '..' } 75% { content: '...' } } /* ============================================ LIVE SUBTOTAL BAR (mobile inline) ============================================ */ .live-subtotal { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--success-bg); border-radius: var(--radius-sm); margin-top: 12px; border: 1px solid rgba(16, 185, 129, 0.08); } .live-subtotal .label { margin: 0; color: var(--text-secondary); font-size: 12px; } .live-subtotal .amount { font-weight: 800; font-size: 17px; color: var(--success); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } /* ============================================ GRAND TOTAL — Hero card ============================================ */ .grand-total-card { background: var(--gradient-brand); border-radius: var(--radius-lg); padding: 24px; text-align: center; margin-bottom: 14px; box-shadow: var(--shadow-glow); position: relative; overflow: hidden; animation: itemSlideIn 0.4s var(--ease) both; } .grand-total-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at top right, rgba(255, 255, 255, 0.15), transparent 60%); } .gt-label { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.7); text-transform: none; letter-spacing: 0.02em; position: relative; } .gt-amount { font-size: 34px; font-weight: 800; color: #fff; margin-top: 4px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; position: relative; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); } /* ============================================ RESULT — Person cards ============================================ */ .result-person { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 14px; margin-bottom: 10px; transition: all var(--duration) var(--ease); animation: itemSlideIn 0.3s var(--ease) both; } .result-person:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); } .person-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .person-name { font-weight: 700; font-size: 14px; } .person-total { font-weight: 800; font-size: 14px; color: var(--brand-primary); font-variant-numeric: tabular-nums; } .person-item { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-tertiary); padding: 2px 0; } .person-payment { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-default); } .person-payment input { flex: 1; padding: 7px 10px; font-size: 13px; text-align: right; } /* Status badges */ .status-badge { margin-top: 8px; padding: 6px 12px; border-radius: var(--radius-xs); font-weight: 700; font-size: 12px; text-align: center; } .status-settled { background: var(--success-soft); color: var(--success); } .status-outstanding { background: var(--danger-soft); color: var(--danger); } .status-overpaid { background: var(--brand-soft); color: var(--brand-primary); } /* ============================================ SHARE & IOU SECTIONS ============================================ */ .share-section { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 16px; margin-top: 14px; box-shadow: var(--shadow-sm); } .share-input-group { display: flex; gap: 8px; margin-top: 8px; } .share-input-group input { flex: 1; font-size: 13px; } .share-actions { display: flex; gap: 8px; margin-top: 10px; } .iou-card { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 16px; margin-top: 14px; box-shadow: var(--shadow-sm); } .iou-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 6px; font-size: 13px; transition: all var(--duration) var(--ease); } .iou-row:hover { transform: translateX(4px); } /* ============================================ MODALS — Centered glass ============================================ */ .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; z-index: 100; padding: 16px; } /* Show modal: .active pattern (index.html) */ .modal-overlay.active { display: flex; opacity: 1; pointer-events: auto; } .modal { background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-xl); padding: 24px; max-width: 420px; width: 100%; box-shadow: var(--shadow-xl); transform: scale(0.92) translateY(10px); transition: transform 0.25s var(--ease); } .modal-overlay.active .modal { transform: scale(1) translateY(0); } .modal-title { font-size: 17px; font-weight: 800; margin-bottom: 10px; letter-spacing: -0.01em; } .modal-body { color: var(--text-secondary); font-size: 14px; margin-bottom: 18px; line-height: 1.6; } .modal-actions { display: flex; gap: 10px; justify-content: flex-end; } /* ============================================ LOADING & STATUS ============================================ */ .loading-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; z-index: 200; opacity: 0; pointer-events: none; transition: opacity 0.2s; } .loading-overlay.active { opacity: 1; pointer-events: auto; } .spinner { width: 42px; height: 42px; border: 3px solid var(--border-default); border-top-color: var(--brand-primary); border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .status-toast { position: fixed; top: 64px; left: 50%; transform: translateX(-50%) translateY(-16px); padding: 12px 24px; border-radius: 14px; font-size: 13.5px; font-weight: 600; line-height: 1.4; text-align: center; z-index: 150; opacity: 0; pointer-events: none; transition: all 0.3s var(--ease); width: max-content; max-width: 88vw; box-shadow: var(--shadow-lg), 0 8px 30px rgba(0,0,0,0.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .status-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } .status-toast.success { background: rgba(16, 185, 129, 0.92); color: #fff; } .status-toast.error { background: rgba(239, 68, 68, 0.92); color: #fff; } .status-toast.info { background: rgba(99, 102, 241, 0.92); color: #fff; } /* ============================================ MOBILE BOTTOM BAR — Frosted glass ============================================ */ .mobile-bar { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(245, 245, 247, 0.75); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--border-default); padding: 10px 16px calc(10px + var(--safe-bottom)); z-index: 48; /* Below bottom nav (50) to prevent overlap flash in PWA */ display: flex; gap: 12px; align-items: center; } .dark .mobile-bar { background: rgba(12, 12, 20, 0.75); } @media (min-width: 768px) { .mobile-bar { display: none; } } .mobile-bar .btn-primary { flex: 1; padding: 12px 20px; font-size: 14px; border-radius: var(--radius-md); } .mobile-subtotal { font-size: 12px; font-weight: 700; color: var(--text-secondary); white-space: nowrap; line-height: 1.2; } .mobile-subtotal span:last-child { display: block; font-size: 15px; color: var(--brand-primary); font-variant-numeric: tabular-nums; } /* ============================================ EXPORT MENU — Floating popover ============================================ */ .export-menu { position: fixed; background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 6px; z-index: 60; min-width: 200px; opacity: 0; pointer-events: none; transition: opacity 0.15s var(--ease), transform 0.15s var(--ease); transform: translateY(4px); } .export-menu.show { opacity: 1; pointer-events: auto; transform: translateY(0); } .export-menu-item { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 14px; border: none; background: none; font-size: 13px; font-weight: 500; color: var(--text-primary); cursor: pointer; border-radius: var(--radius-xs); font-family: inherit; transition: all var(--duration) var(--ease); } .export-menu-item:hover { background: var(--brand-soft); color: var(--brand-primary); transform: translateX(2px); } .export-menu-item:active { transform: scale(0.97); } .export-menu-item + .export-menu-item { border-top: 1px solid var(--border-default); border-radius: 0 0 var(--radius-xs) var(--radius-xs); } .export-menu-item:first-child { border-radius: var(--radius-xs) var(--radius-xs) 0 0; } .export-menu-item:last-child { border-radius: 0 0 var(--radius-xs) var(--radius-xs); } .export-menu-item:only-child { border-radius: var(--radius-xs); } .export-menu-item svg { flex-shrink: 0; } /* ============================================ AUTOCOMPLETE ============================================ */ .autocomplete-items { position: absolute; z-index: 999; background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-sm); max-height: 160px; overflow-y: auto; width: 100%; box-shadow: var(--shadow-lg); top: 100%; left: 0; margin-top: 4px; } .autocomplete-item { padding: 9px 14px; cursor: pointer; font-size: 13px; transition: background var(--duration) var(--ease); } .autocomplete-item:hover { background: var(--brand-soft); color: var(--brand-primary); } /* ============================================ SIDEBAR (desktop only) ============================================ */ .sidebar { position: sticky; top: 68px; align-self: start; display: flex; flex-direction: column; gap: 14px; } .sidebar-card { border: 1.5px solid var(--border-default); } @media (max-width: 767px) { .sidebar { display: none; } } /* ============================================ MOBILE PARTICIPANTS DROPDOWN (from header) ============================================ */ .mobile-participants-dropdown { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 55; pointer-events: none; opacity: 0; transition: opacity 0.25s var(--ease); } .mobile-participants-dropdown.open { opacity: 1; /* Keep pointer-events: none at the wrapper logic, so clicks fall through to the background */ } @media (max-width: 767px) { .mobile-participants-dropdown { display: block; } } .mobile-participants-dropdown-inner { position: absolute; top: auto; bottom: 0; left: 0; right: 0; background: var(--bg-surface); border: none; border-radius: 20px 20px 0 0; padding: 16px 16px 24px 16px; box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12), 0 -2px 10px rgba(99, 102, 241, 0.05); transform: translateY(100%); opacity: 0; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease; max-height: 55vh; overflow-y: auto; overscroll-behavior-y: contain; /* Prevents scroll chaining */ } /* Drag Handle Component */ .mobile-participants-drag-handle { width: 40px; height: 5px; background-color: var(--border-default, #e5e7eb); border-radius: 4px; margin: 0 auto 12px auto; opacity: 0.8; } .dark .mobile-participants-drag-handle { background-color: rgba(255,255,255,0.15); } .mobile-participants-dropdown.open .mobile-participants-dropdown-inner { transform: translateY(0); opacity: 1; pointer-events: auto; /* Only the panel captures clicks */ } .mobile-participants-dropdown-header { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; } /* Removed ::before backdrop overlay to allow clicking orderer fields beneath */ /* ============================================ HEADER PARTICIPANT BUTTON + BADGE ============================================ */ .header-participants-btn { position: relative; display: none; } /* Compact action row: input + add + save + delete in one line */ .participants-action-row { display: flex; gap: 4px; margin-top: 8px; align-items: center; } .btn-icon-only { padding: 5px 6px !important; min-width: 28px; max-width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; flex: none; } /* Confirm state for icon-only delete button */ .btn-icon-only.btn-confirm { background: var(--danger) !important; border-color: var(--danger) !important; color: #fff !important; animation: confirm-pulse 0.6s ease-in-out infinite alternate; } .btn-icon-only.btn-confirm svg { stroke: #fff; } @keyframes confirm-pulse { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0.7; transform: scale(0.92); } } @media (max-width: 767px) { .header-participants-btn { display: inline-flex; } } .header-participant-badge { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--gradient-brand); color: #fff; font-size: 9px; font-weight: 800; display: flex; align-items: center; justify-content: center; padding: 0 4px; box-shadow: 0 1px 4px rgba(99, 102, 241, 0.3); line-height: 1; } /* ============================================ FEATURE NAV STRIP — FAB Center Design Split Bill = primary action (center FAB) ============================================ */ .feature-nav-strip { display: none; } @media (max-width: 767px) { .feature-nav-strip { display: flex; align-items: flex-end; gap: 0; padding: 5px 6px; background: rgba(245, 245, 247, 0.82); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--border-default); overflow: visible; scrollbar-width: none; position: sticky; top: 0; /* JS overrides with exact header height */ z-index: 49; transition: transform 0.3s ease, opacity 0.3s ease, background var(--duration) var(--ease); } .feature-nav-strip.nav-hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; } .feature-nav-strip::-webkit-scrollbar { display: none; } } /* ── Secondary nav items (Hutang, Riwayat, Budget, Group) ── */ .feature-nav-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 8px; border-radius: 10px; text-decoration: none; color: var(--text-tertiary); font-size: 10px; font-weight: 600; white-space: nowrap; transition: color var(--duration) var(--ease), background var(--duration) var(--ease); position: relative; flex: 1; min-width: 0; -webkit-tap-highlight-color: transparent; } .feature-nav-item svg { width: 18px; height: 18px; flex-shrink: 0; stroke-width: 1.8; } .feature-nav-item:hover, .feature-nav-item:active { color: var(--brand-primary); } .feature-nav-item.active:not(.nav-fab) { color: var(--brand-primary); font-weight: 700; background: var(--brand-soft); } .feature-nav-item.active:not(.nav-fab) svg { stroke: var(--brand-primary); stroke-width: 2.2; } /* ── NAV FAB — Split Bill Center Button (Top Browser Mode) ── */ .nav-fab { flex: 1.2 !important; padding: 0 !important; gap: 3px !important; color: #fff !important; font-weight: 700 !important; font-size: 9.5px !important; position: relative; z-index: 2; } .nav-fab-ring { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--gradient-brand); box-shadow: 0 2px 10px rgba(99, 102, 241, 0.35); transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); will-change: transform; } .nav-fab-ring svg { width: 18px; height: 18px; stroke: #fff !important; stroke-width: 2.2; } .nav-fab > span:last-child { color: var(--brand-primary); font-weight: 700; font-size: 10px; } .nav-fab:hover .nav-fab-ring, .nav-fab:active .nav-fab-ring { box-shadow: 0 3px 14px rgba(99, 102, 241, 0.5); } .nav-fab:active .nav-fab-ring { transform: scale(0.9); } /* Active state on index page — subtle ring highlight */ .nav-fab.active > span:last-child { color: var(--brand-primary); } .nav-fab.active .nav-fab-ring { box-shadow: 0 2px 12px rgba(99, 102, 241, 0.45), 0 0 0 3px rgba(99, 102, 241, 0.12); } /* ── FAB Bounce Micro-interaction ── */ @keyframes navFabBounce { 0% { transform: scale(1); } 20% { transform: scale(0.85); } 50% { transform: scale(1.1); } 75% { transform: scale(0.97); } 100% { transform: scale(1); } } .nav-fab-ring.fab-bounce { animation: navFabBounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } /* ── FAB Pulse glow (subtle ambient on active page) ── */ @keyframes navFabPulse { 0%, 100% { box-shadow: 0 2px 12px rgba(99, 102, 241, 0.4), 0 0 0 0 rgba(99, 102, 241, 0.15); } 50% { box-shadow: 0 2px 12px rgba(99, 102, 241, 0.4), 0 0 0 6px rgba(99, 102, 241, 0); } } .nav-fab.active .nav-fab-ring { animation: navFabPulse 3s ease-in-out infinite; } .nav-fab-ring.fab-bounce { animation: navFabBounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } /* ── Nav Tap Pulse — feedback when tapping active tab ── */ @keyframes navTapPulse { 0% { transform: scale(1); } 30% { transform: scale(0.92); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } } .feature-nav-item.nav-tap-pulse { animation: navTapPulse 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } /* ── Legacy badge ── */ .feature-pro-badge { position: absolute; top: 2px; right: 4px; font-size: 7px; font-weight: 800; padding: 1px 4px; border-radius: 4px; background: linear-gradient(135deg, #f59e0b, #f97316); color: #fff; letter-spacing: 0.04em; line-height: 1.3; } .chevron-icon { transition: transform 0.3s var(--ease); } .chevron-rotated { transform: rotate(180deg); } /* ============================================ VIEW TRANSITIONS — Smooth MPA page navigation Chrome 126+, Safari 18+, Edge 126+ Graceful degradation: normal navigation on unsupported browsers ============================================ */ /* Enable cross-document view transitions (Chrome 126+, Safari 18+) */ @view-transition { navigation: auto; } /* Named elements that persist across pages (morph instead of fade) */ .app-header { view-transition-name: app-header; contain: layout style; } .feature-nav-strip, .feature-nav-bottom { view-transition-name: app-nav; contain: layout style; } /* mobile-bar: no view-transition-name — element only exists on index page, named transitions cause flash/snapshot artifacts during cross-page navigation */ /* Old page fades out quickly */ ::view-transition-old(root) { animation: vt-fade-out 0.12s ease-out; } /* New page fades in fast */ ::view-transition-new(root) { animation: vt-fade-in 0.15s ease-out; } /* Header + Nav stay persistent — NO animation (feels anchored) */ ::view-transition-old(app-header), ::view-transition-new(app-header), ::view-transition-old(app-nav), ::view-transition-new(app-nav) { animation: none; mix-blend-mode: normal; } /* Mobile bar: view transitions removed (element only on index page, caused flash) */ /* Keyframes */ @keyframes vt-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes vt-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes vt-slide-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ── Universal page reveal (works on ALL browsers including iOS) ── */ @keyframes page-reveal { from { opacity: 0; } to { opacity: 1; } } body { animation: page-reveal 0.18s ease-out; } /* Reduce motion for users who prefer it */ @media (prefers-reduced-motion: reduce) { body, ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.01s !important; } .nav-fab.active .nav-fab-ring { animation: none; } } /* ============================================ PWA BOTTOM NAV — Standalone / Add to Home Screen mode FAB center elevated design ============================================ */ /* Bottom nav bar — fixed to screen bottom */ .feature-nav-bottom { position: fixed !important; inset: auto 0 0 0 !important; z-index: 50 !important; display: flex !important; align-items: flex-end !important; margin: 0 !important; background: rgba(245, 245, 247, 0.92) !important; backdrop-filter: saturate(180%) blur(24px) !important; -webkit-backdrop-filter: saturate(180%) blur(24px) !important; border-top: 1px solid var(--border-default) !important; border-bottom: none !important; padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px)) !important; /* Override any inherited nav-strip transforms & transitions */ transform: none !important; opacity: 1 !important; pointer-events: auto !important; overflow: visible !important; /* Fade in entrance */ animation: bottomNavFadeIn 0.3s ease-out; } @keyframes bottomNavFadeIn { from { opacity: 0; } to { opacity: 1; } } /* ── Secondary items in bottom nav ── */ .feature-nav-bottom .feature-nav-item { min-height: 48px; padding: 6px 4px 3px; gap: 2px; border-radius: 12px; flex: 1; -webkit-tap-highlight-color: transparent; transition: transform 0.1s ease, color var(--duration) var(--ease); color: var(--text-tertiary); } .feature-nav-bottom .feature-nav-item:active { transform: scale(0.9); } .feature-nav-bottom .feature-nav-item svg { width: 22px; height: 22px; stroke-width: 1.6; } .feature-nav-bottom .feature-nav-item span:not(.feature-pro-badge):not(.nav-fab-ring) { font-size: 10px; font-weight: 500; } .feature-nav-bottom .feature-nav-item.active:not(.nav-fab) { color: var(--brand-primary); font-weight: 700; background: var(--brand-soft); } .feature-nav-bottom .feature-nav-item.active:not(.nav-fab) svg { stroke-width: 2.2; } .feature-nav-bottom .feature-nav-item.active:not(.nav-fab) span:not(.feature-pro-badge):not(.nav-fab-ring) { font-weight: 700; } /* ── Center FAB in bottom nav — elevated floating circle ── */ .feature-nav-bottom .nav-fab { flex: 1.1 !important; padding: 0 0 3px 0 !important; min-height: auto !important; gap: 4px !important; position: relative; z-index: 2; } .feature-nav-bottom .nav-fab-ring { width: 56px; height: 56px; margin-top: -20px; border-radius: 50%; background: var(--gradient-brand); box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4), 0 2px 6px rgba(99, 102, 241, 0.2); border: 3px solid rgba(255, 255, 255, 0.9); } .feature-nav-bottom .nav-fab-ring svg { width: 24px; height: 24px; } .feature-nav-bottom .nav-fab > span:last-child { color: var(--brand-primary); font-size: 10px; font-weight: 700; } .feature-nav-bottom .nav-fab:active .nav-fab-ring { transform: scale(0.88); } .feature-nav-bottom .nav-fab.active .nav-fab-ring { box-shadow: 0 4px 18px rgba(99, 102, 241, 0.5), 0 0 0 4px rgba(99, 102, 241, 0.1); } /* PRO badge repositioning for bottom nav */ .feature-nav-bottom .feature-pro-badge { top: 0px; right: 2px; } /* PWA overscroll & spacing — prevent iOS rubber-band empty space */ .pwa-mode { background-color: var(--bg-surface, #f5f5f7); } .pwa-mode body, body.pwa-mode { padding-bottom: 72px; overscroll-behavior-y: none; overscroll-behavior: none; -webkit-overscroll-behavior: none; } /* Mobile-bar in PWA mode — stack above bottom nav */ /* Uses .pwa-mode (html-level, set by early inline script) for instant positioning */ .pwa-mode .mobile-bar, .mobile-bar.mobile-bar-pwa { bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important; } /* Split Bill page: mobile-bar + bottom nav both present */ .pwa-mode body:has(.mobile-bar), body.pwa-mode:has(.mobile-bar) { padding-bottom: 130px; } /* Dark mode overscroll background */ .pwa-mode.dark { background-color: var(--bg-base, #0c0c14); } /* Dark mode — bottom nav */ .dark .feature-nav-bottom { background: rgba(12, 12, 20, 0.92) !important; } .dark .feature-nav-bottom .nav-fab-ring { border-color: rgba(30, 30, 45, 0.9); box-shadow: 0 4px 18px rgba(129, 140, 248, 0.35), 0 2px 6px rgba(129, 140, 248, 0.15); } .dark .feature-nav-bottom .nav-fab > span:last-child { color: var(--brand-primary); } /* PWA safe area — iOS status bar overlap fix */ .pwa-mode .app-header { padding-top: calc(10px + env(safe-area-inset-top, 0px)); } /* ============================================ FOOTER ============================================ */ .app-footer { text-align: center; font-size: 11px; color: var(--text-tertiary); padding: 20px 0; } .app-footer a { color: var(--brand-primary); text-decoration: none; } .app-footer a:hover { text-decoration: underline; } @media (max-width: 767px) { .app-footer { display: none; } } /* ============================================ COPIED BADGE ============================================ */ .copied-badge { position: absolute; top: -28px; right: 0; background: var(--success); color: #fff; padding: 3px 10px; border-radius: var(--radius-full); font-size: 11px; font-weight: 700; opacity: 0; transition: opacity 0.2s var(--ease); pointer-events: none; } .copied-badge.show { opacity: 1; } /* ============================================ BUDGET/GROUP — Compact Collapsible Trigger ============================================ */ .link-bg-trigger { margin-top: 10px; } .link-bg-btn { display: flex; align-items: center; gap: 6px; width: 100%; padding: 8px 12px; background: transparent; border: 1px dashed var(--border-default, rgba(0,0,0,0.12)); border-radius: 10px; color: var(--text-secondary, #64748b); font-size: 0.8rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: all 0.2s ease; } .link-bg-btn:hover { border-color: var(--brand-primary, #6366f1); color: var(--brand-primary, #6366f1); background: rgba(99,102,241,0.04); } .link-bg-btn.active { border-style: solid; border-color: var(--brand-primary, #6366f1); color: var(--brand-primary, #6366f1); background: rgba(99,102,241,0.04); } .link-bg-chevron { margin-left: auto; transition: transform 0.25s ease; } .link-bg-btn.active .link-bg-chevron { transform: rotate(180deg); } .link-bg-panel { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, opacity 0.25s ease; opacity: 0; } .link-bg-panel.open { max-height: 200px; opacity: 1; padding-top: 4px; } .dark .link-bg-btn { border-color: rgba(255,255,255,0.1); color: #94a3b8; } .dark .link-bg-btn:hover, .dark .link-bg-btn.active { border-color: #818cf8; color: #818cf8; background: rgba(99,102,241,0.08); } /* Color indicator on trigger based on budget health */ .link-bg-btn.link-bg-green { border-color: #10b981 !important; color: #059669 !important; } .link-bg-btn.link-bg-yellow { border-color: #f59e0b !important; color: #d97706 !important; } .link-bg-btn.link-bg-red { border-color: #ef4444 !important; color: #dc2626 !important; } .dark .link-bg-btn.link-bg-green { color: #34d399 !important; border-color: #34d399 !important; } .dark .link-bg-btn.link-bg-yellow { color: #fbbf24 !important; border-color: #fbbf24 !important; } .dark .link-bg-btn.link-bg-red { color: #f87171 !important; border-color: #f87171 !important; } /* Budget/Group Selector Rows (inside panel) */ .budget-selector { display: flex; align-items: center; gap: 8px; margin-top: 6px; } .budget-sel-icon { color: var(--brand-primary, #6366f1); flex-shrink: 0; } .budget-select-input { flex: 1; padding: 8px 12px; border: 1px solid var(--border-default, rgba(0,0,0,0.1)); border-radius: 10px; background: var(--bg-surface-2, #f5f5f7); color: var(--text-secondary, #64748b); font-size: 0.82rem; font-family: inherit; cursor: pointer; outline: none; appearance: auto; } .budget-select-input:focus { border-color: var(--brand-primary, #6366f1); box-shadow: 0 0 0 3px rgba(99,102,241,0.1); } .dark .budget-select-input { background: rgba(30,41,59,0.8); border-color: rgba(255,255,255,0.08); color: #e2e8f0; } /* Budget Widget Card */ .budget-widget { border-left: 3px solid var(--brand-primary, #6366f1); } .budget-w-badge { font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 6px; margin-left: auto; } .budget-w-badge.bw-ok { background: rgba(16,185,129,0.1); color: #059669; } .budget-w-badge.bw-warning { background: rgba(245,158,11,0.1); color: #d97706; } .budget-w-badge.bw-danger { background: rgba(239,68,68,0.1); color: #dc2626; } .dark .budget-w-badge.bw-ok { background: rgba(16,185,129,0.15); color: #34d399; } .dark .budget-w-badge.bw-warning { background: rgba(245,158,11,0.15); color: #fbbf24; } .dark .budget-w-badge.bw-danger { background: rgba(239,68,68,0.15); color: #f87171; } .budget-w-progress { margin-top: 8px; } .budget-w-bar-bg { width: 100%; height: 8px; background: var(--bg-surface-2, #e2e8f0); border-radius: 4px; overflow: hidden; } .budget-w-bar-fill { height: 100%; border-radius: 4px; transition: width 0.4s ease; } .budget-w-bar-fill.bw-green { background: linear-gradient(90deg, #10b981, #34d399); } .budget-w-bar-fill.bw-yellow { background: linear-gradient(90deg, #f59e0b, #fbbf24); } .budget-w-bar-fill.bw-red { background: linear-gradient(90deg, #ef4444, #f87171); } .budget-w-bar-fill.bw-over { background: linear-gradient(90deg, #dc2626, #ef4444); } .dark .budget-w-bar-bg { background: rgba(51,65,85,0.6); } .budget-w-labels { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--text-secondary, #64748b); margin-top: 4px; } /* Budget Widget Slide-in Animation */ @keyframes budgetSlideIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .budget-w-animate { animation: budgetSlideIn 0.35s ease-out; } .budget-w-bar-fill { transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); } /* ============================================ UTILITY CLASSES ============================================ */ .hidden { display: none !important; } .mobile-only { display: none; } @media (max-width: 767px) { .mobile-only { display: block; } } .desktop-only { display: block; } @media (max-width: 767px) { .desktop-only { display: none; } } .flex { display: flex; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 14px; } .mt-4 { margin-top: 20px; } .mb-2 { margin-bottom: 10px; } .text-sm { font-size: 13px; } .text-xs { font-size: 11px; } .text-center { text-align: center; } .text-right { text-align: right; } .w-full { width: 100%; } .relative { position: relative; } .space-y>*+* { margin-top: 10px; } /* ============================================ SCROLLBAR (subtle) ============================================ */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); } /* ============================================ PRINT ============================================ */ @media print { .app-header, .mobile-bar, .mobile-participants, .share-section, .app-footer { display: none !important; } body { padding-bottom: 0; background: #fff; } } /* ============================================ ★ MOBILE RESPONSIVE OVERHAUL ★ Premium PWA-ready mobile experience Target: 375px (iPhone SE) and up ============================================ */ @media (max-width: 767px) { /* --- Body --- */ body { padding-bottom: calc(68px + var(--safe-bottom)); } /* --- Header — Compact glassmorphism --- */ .app-header { padding: 8px 12px; } .header-inner { gap: 8px; } .logo img { width: 26px; height: 26px; border-radius: 7px; } /* Compact logo text on mobile */ .logo-text { font-size: 14px; letter-spacing: -0.02em; } .logo { gap: 6px; } /* Hide navigation icon links on mobile — available in nav strip */ .header-btn.nav-link { display: none; } .header-actions { gap: 4px; } /* Compact header buttons */ .header-btn { height: 30px; min-width: 30px; border-radius: 8px; } .header-btn svg { width: 14px; height: 14px; } .lang-toggle { font-size: 10px; padding: 0 10px; height: 30px; letter-spacing: 0.06em; } /* Google Sign-In button compact */ #google-login-btn { transform: scale(0.85); transform-origin: right center; } /* User menu compact */ .user-menu-toggle { padding: 3px 6px; gap: 4px; } .user-avatar { width: 24px; height: 24px; } .user-dropdown { min-width: 220px; right: -8px; } /* --- Container & Layout --- */ .container { padding: 0 10px; } .main-grid { gap: 10px; padding: 10px 0 20px; } .main-col { gap: 10px; } /* --- Sub-page hero sections — Hidden on mobile (nav strip provides context) --- */ .hutang-hero, .riwayat-hero, .budget-hero, .group-hero { display: none !important; } /* Reduce top padding for sub-pages (header + nav strip already ~88px) */ .hutang-main, .riwayat-main, .budget-main, .group-main { padding-top: 10px !important; } /* --- Cards — Tighter, softer --- */ .card { padding: 14px; border-radius: 14px; box-shadow: var(--shadow-xs); } .card:hover { box-shadow: var(--shadow-sm); } .card-title { font-size: 12px; margin-bottom: 10px; gap: 6px; } .card-title svg { width: 14px; height: 14px; } /* --- Inputs — Compact --- */ .input, select, .setting-input-group input { padding: 9px 10px; font-size: 13px; border-radius: 8px; } .input::placeholder { font-size: 12px; } /* Label */ label, .label { font-size: 10.5px; } /* Location field */ .location-field { margin-top: 5px; } .location-field .location-input { font-size: 12px; padding: 8px 10px; } /* --- Mobile Participants Dropdown (overrides) --- */ .participant-badge { font-size: 10px; padding: 1px 7px; } .avatar-list { gap: 6px; padding: 4px 2px; } .avatar { width: 36px; height: 36px; font-size: 12px; } /* --- Item Rows — Optimized for narrow screens --- */ .item-row { padding: 12px 12px 10px; border-radius: 10px; } .input-row-3 { grid-template-columns: 2.2fr 0.8fr 0.5fr; gap: 6px; } .item-row .remove-btn { width: 22px; height: 22px; top: -10px; right: -6px; font-size: 0; } .item-row .remove-btn svg { width: 11px; height: 11px; } /* Pemesan field compact */ .item-row .input[placeholder*="nama"], .item-row .input[placeholder*="name"] { font-size: 12px; padding: 8px 10px; } .space-y > * + * { margin-top: 8px; } /* --- Scan Card — Premium futuristic CTA --- */ .mobile-only.card:has(.scan-area) { padding: 0; border: none; overflow: hidden; background: transparent; box-shadow: none; } .mobile-only.card .scan-area { padding: 16px 20px; border: none; border-radius: 14px; background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.12) 50%, rgba(99, 102, 241, 0.06) 100%); position: relative; overflow: hidden; box-shadow: 0 2px 12px rgba(99, 102, 241, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2); } /* Animated border glow */ .mobile-only.card .scan-area::before { content: ''; position: absolute; inset: 0; border-radius: 14px; padding: 1.5px; background: linear-gradient(135deg, var(--brand-primary), #a78bfa, var(--brand-primary)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0.6; } /* Shimmer sweep — enhanced for light mode visibility */ .mobile-only.card .scan-area::after { content: ''; position: absolute; top: 0; left: -100%; width: 80%; height: 100%; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.45) 45%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.45) 55%, transparent 100%); animation: scan-shimmer 3.5s ease-in-out infinite; pointer-events: none; } @keyframes scan-shimmer { 0% { left: -100%; } 100% { left: 200%; } } .mobile-only.card .scan-area svg { width: 22px; height: 22px; animation: scan-pulse 2.5s ease-in-out infinite; } @keyframes scan-pulse { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.08); opacity: 1; } } .scan-label { font-size: 13px; font-weight: 600; color: var(--brand-primary); letter-spacing: 0.01em; } /* --- Settings — Ultra-compact 3-column row --- */ .settings-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .setting-compact-item { display: flex; flex-direction: column; gap: 4px; } .setting-compact-item .label { font-size: 10px; margin-bottom: 0; font-weight: 600; color: var(--text-secondary); } .setting-compact-item .type-toggle-group { width: 100%; } .setting-compact-item .type-opt { flex: 1; text-align: center; padding: 5px 0; font-size: 10.5px; } .setting-compact-item .input { width: 100%; padding: 7px 6px; font-size: 12px; text-align: center; } .setting-rounding-row { margin-top: 8px; } .setting-rounding-row .label { font-size: 10px; margin-bottom: 3px; font-weight: 600; color: var(--text-secondary); } .setting-rounding-row .rounding-toggle { width: 100%; } .setting-rounding-row .type-opt { flex: 1; text-align: center; padding: 6px 0; font-size: 10.5px; } .type-opt { padding: 5px 7px; font-size: 10.5px; } /* Settings section card title */ .mobile-only .card-title svg { width: 15px; height: 15px; } /* --- Bottom Bar — Premium frosted glass with gradient accent --- */ .mobile-bar { padding: 0; gap: 0; background: var(--bg-surface); border-top: none; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08); flex-direction: row; align-items: center; position: fixed; bottom: 0; left: 0; right: 0; padding-bottom: env(safe-area-inset-bottom, 0px); } .mobile-bar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2.5px; background: var(--gradient-brand); z-index: 1; } .mobile-bar > .mobile-subtotal { display: flex; flex-direction: column; justify-content: center; padding: 10px 14px; flex: 1; min-width: 0; overflow: visible; } .mobile-subtotal-label { display: flex; align-items: center; gap: 4px; position: relative; font-size: 11px; font-weight: 600; color: var(--text-secondary); letter-spacing: 0.02em; line-height: 1; } .subtotal-info-icon { font-size: 11px; color: var(--text-tertiary); cursor: pointer; opacity: 0.6; transition: opacity 0.2s; } .subtotal-info-icon:hover, .subtotal-info-icon:active { opacity: 1; } .subtotal-tooltip { position: absolute; bottom: calc(100% + 5px); left: 0; background: #1e293b; color: #fff; font-size: 10px !important; font-weight: 600; padding: 4px 10px; border-radius: 6px; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(2px); transition: opacity 0.2s, transform 0.2s; z-index: 60; box-shadow: 0 2px 8px rgba(0,0,0,0.18); letter-spacing: 0.02em; -webkit-text-size-adjust: none; text-size-adjust: none; line-height: 1.3; } .subtotal-tooltip::after { content: ''; position: absolute; top: 100%; left: 12px; border: 4px solid transparent; border-top-color: #1e293b; } .subtotal-tooltip.show { opacity: 1; transform: translateY(0); pointer-events: auto; } .dark .subtotal-tooltip { background: #334155; color: #f1f5f9; box-shadow: 0 2px 8px rgba(0,0,0,0.3); } .dark .subtotal-tooltip::after { border-top-color: #334155; } .mobile-subtotal-note { display: none; } .mobile-subtotal-amount { font-size: clamp(16px, 4.5vw, 20px); font-weight: 800; color: var(--brand-primary); line-height: 1.2; margin-top: 3px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .mobile-bar .btn-primary { flex: none; min-width: 120px; align-self: stretch; margin: 0; border-radius: 0; padding: 16px 28px; font-size: 15px; font-weight: 800; letter-spacing: 0.02em; position: relative; overflow: hidden; } /* Shimmer effect on CTA */ .mobile-bar .btn-primary::before { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent); animation: mobile-shimmer 3s ease-in-out infinite; } @keyframes mobile-shimmer { 0% { left: -100%; } 100% { left: 200%; } } /* --- Modals — Centered on mobile --- */ .modal-overlay { padding: 16px; align-items: center; justify-content: center; } .modal { max-width: 100%; border-radius: 18px; padding: 22px; } .modal-title { font-size: 16px; } .modal-body { font-size: 13px; margin-bottom: 14px; } /* --- Status Toast --- */ .status-toast { top: 54px; font-size: 12px; padding: 8px 16px; } /* --- Buttons — Touch-friendly --- */ .btn { padding: 8px 14px; font-size: 12.5px; border-radius: 8px; } .btn-sm { padding: 7px 12px; font-size: 12px; } .btn svg { width: 13px; height: 13px; } /* Add Item button */ #add-item-btn { padding: 10px 14px; font-size: 13px; border-radius: 10px; } /* --- Share Section --- */ .share-section { padding: 14px; border-radius: 14px; margin-top: 10px; } .share-input-group { gap: 6px; } .share-input-group input { font-size: 12px; padding: 8px 10px; } .share-actions { gap: 6px; margin-top: 8px; } /* --- IOU Card --- */ .iou-card { padding: 14px; border-radius: 14px; margin-top: 10px; } .iou-row { padding: 8px 10px; font-size: 12px; } /* --- Result Cards --- */ .result-person { padding: 12px; border-radius: 10px; margin-bottom: 8px; } .person-name { font-size: 13px; } .person-total { font-size: 13px; } .person-item { font-size: 11px; } .person-payment input { padding: 6px 8px; font-size: 12px; } /* Grand Total Card */ .grand-total-card { padding: 18px; border-radius: 14px; margin-bottom: 10px; } .gt-label { font-size: 11px; } .gt-amount { font-size: 28px; } /* --- Budget Widget --- */ .budget-widget { padding: 12px; border-radius: 12px; } .budget-w-labels { font-size: 10px; } /* --- Budget/Group trigger --- */ .link-bg-btn { padding: 7px 10px; font-size: 0.75rem; border-radius: 8px; } .link-bg-trigger { margin-top: 8px; } /* --- Scan Preview Overlay --- */ .scan-preview-card { width: 280px; border-radius: 16px; } .scan-preview-status { padding: 14px 16px; } .scan-step { font-size: 12px; padding: 5px 0; } /* --- Footer (hidden on mobile) is already display:none --- */ /* --- Export Menu --- */ .export-menu { min-width: 180px; } .export-menu-item { padding: 9px 12px; font-size: 12px; } /* --- Autocomplete --- */ .autocomplete-items { max-height: 140px; } .autocomplete-item { padding: 8px 12px; font-size: 12px; } } /* ============================================ ★ EXTRA SMALL SCREENS (≤ 375px) ★ Fine-tuning for iPhone SE and similar ============================================ */ @media (max-width: 375px) { .container { padding: 0 8px; } .card { padding: 12px; border-radius: 12px; } .input-row-3 { grid-template-columns: 2fr 0.8fr 0.5fr; gap: 5px; } .item-row { padding: 10px 10px 9px; } .input, select, .setting-input-group input { padding: 8px 8px; font-size: 12px; } .logo-text { font-size: 15px; } .logo img { width: 24px; height: 24px; } .header-btn { height: 28px; min-width: 28px; } .lang-toggle { font-size: 9.5px; padding: 0 8px; height: 28px; } .gt-amount { font-size: 24px; } .grand-total-card { padding: 16px; } .type-opt { padding: 5px 7px; font-size: 10.5px; } .btn { padding: 7px 12px; font-size: 12px; } .mobile-bar .btn-primary { padding: 13px 10px; font-size: 12px; } .settings-grid { gap: 8px; } .scan-preview-card { width: 260px; } } @media (max-width: 767px) { .dark .mobile-bar { background: var(--bg-surface); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3); } .dark .mobile-participants-dropdown-inner { background: var(--bg-surface); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(129, 140, 248, 0.1); } .dark .mobile-participants-dropdown::before { background: rgba(0, 0, 0, 0.15); } .dark .feature-nav-strip { background: rgba(12, 12, 20, 0.82); border-color: var(--border-default); } .dark .feature-nav-item { color: var(--text-tertiary); } .dark .nav-fab-ring { box-shadow: 0 2px 12px rgba(129, 140, 248, 0.3); } .dark .nav-fab > span:last-child { color: var(--brand-primary); } .dark .mobile-only.card .scan-area { border-color: rgba(129, 140, 248, 0.4); background: rgba(129, 140, 248, 0.06); } .dark .mobile-only.card .scan-area::before { background: linear-gradient(135deg, rgba(129, 140, 248, 0.04), rgba(167, 139, 250, 0.06)); } } /* ============================================ MOBILE DRAFT & RESET ACTIONS ============================================ */ .mobile-draft-actions { padding: 6px 0; } .mobile-draft-row { display: flex; gap: 8px; } .mobile-draft-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; /* Android fix: minimum 44px touch target (WCAG 2.5.5) */ min-height: 44px; padding: 10px 12px; font-size: 13px; font-weight: 600; border-radius: var(--radius-sm, 8px); border: 1px solid var(--border-strong, rgba(0,0,0,0.12)); background: var(--bg-surface, #fff); color: var(--text-secondary, #6b7280); cursor: pointer; transition: all 0.2s ease; font-family: inherit; /* Android touch fixes */ -webkit-tap-highlight-color: transparent; touch-action: manipulation; -webkit-user-select: none; user-select: none; box-sizing: border-box; position: relative; z-index: 1; } .mobile-draft-btn:hover, .mobile-draft-btn:active { border-color: var(--brand-primary, #6366f1); color: var(--brand-primary, #6366f1); background: var(--brand-soft, rgba(99, 102, 241, 0.08)); } .mobile-draft-btn svg { color: var(--brand-primary, #6366f1); opacity: 0.7; flex-shrink: 0; pointer-events: none; /* prevent SVG from intercepting touches */ } .mobile-draft-btn span { pointer-events: none; /* prevent span from intercepting touches */ } .mobile-reset-btn { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; min-height: 40px; margin-top: 4px; padding: 8px 0; background: none; border: none; color: var(--text-tertiary, #9ca3af); font-size: 12px; font-family: inherit; cursor: pointer; transition: color 0.2s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; -webkit-user-select: none; user-select: none; } .mobile-reset-btn:hover, .mobile-reset-btn:active { color: var(--danger, #ef4444); } .mobile-reset-btn svg, .mobile-reset-btn span { pointer-events: none; } .mobile-reset-btn svg { opacity: 0.6; flex-shrink: 0; } @media (min-width: 768px) { .mobile-draft-actions { display: none; } }