/* Poppins font loaded via in HTML for parallel fetch (not @import) */ /* Light Mode Variables (Earthy, Warm & Rich) */ :root { --primary-color: #9C6644; /* Groundnut/Caramel Brown - key info/interactive */ --secondary-color: #4A7C59; /* Forest Green - status indicators/notifications */ --accent-color: #8A9A5B; /* Moss/Olive Green - financial stats */ --danger-color: #C05746; /* Brick Red - for danger/alerts */ --text-color: #2C1E16; /* Very Dark Coffee - primary text */ --text-secondary-color: #63534B; /* Muted Coffee - secondary text */ --light-text-color: #FDFBF7; /* Off-white/Cream - for text on dark/gradient buttons */ --border-color: rgba(44, 30, 22, 0.15); /* Dark coffee tint outline */ --card-bg: rgba(247, 244, 238, 0.85); /* Creamy glass for sharper look */ --body-bg: #EFEBE3; /* Warm off-white/cream - background */ --dot-color: var(--border-color); /* Color for the dots in light mode */ --button-hover-primary: #855537; /* Darker Groundnut */ --button-hover-secondary: #3B6347; /* Darker Forest Green */ --button-hover-danger: #A34839; /* Darker Brick Red */ --warning-orange: #D48C46; /* Warm Orange - alerts/highlights */ --warning-red: #C05746; /* Brick Red for warnings */ --gradient-primary-start: #B47D57; /* Lighter Groundnut */ --gradient-primary-end: #9C6644; /* Groundnut */ --gradient-secondary-start: #639A74;/* Lighter Forest Green */ --gradient-secondary-end: #4A7C59; /* Forest Green */ --gradient-danger-start: #D66D5B; /* Lighter Brick Red */ --gradient-danger-end: #C05746; /* Brick Red */ --gradient-accent-start: #A4B571; /* Lighter Moss Green */ --gradient-accent-end: #8A9A5B; /* Moss Green */ /* Gauges */ --investment-gauge-color: #8A9A5B; /* Moss Green */ --expense-gauge-color: #C05746; /* Brick Red */ --loan-gauge-color: #9C6644; /* Groundnut Brown */ --gauge-track-color: rgba(44, 30, 22, 0.08); /* Other */ --tutorial-highlight-color: var(--accent-color); /* Deeper Shadows with warm tint */ --shadow-depth-1: 0 8px 32px rgba(44, 30, 22, 0.06), 0 1px 2px rgba(44, 30, 22, 0.04); --shadow-depth-button: 0 4px 15px rgba(44, 30, 22, 0.15); --shadow-depth-button-pressed: inset 0px 2px 4px rgba(44, 30, 22, 0.15); /* Notifications */ --notification-bg: var(--card-bg); --notification-border: var(--border-color); --notification-text: var(--text-color); --notification-unread-bg: var(--primary-color); --notification-unread-text: var(--light-text-color); /* RGB equivalents */ --primary-color-rgb: 156, 102, 68; /* RGB for #9C6644 */ --danger-color-rgb: 192, 87, 70; /* RGB for #C05746 */ } /* Dark Mode Variables (NEW - Rich and Modern) */ body.dark-mode { --body-bg: #0F1117; /* True Dark - background */ --card-bg: rgba(22, 24, 32, 0.85); /* Less transparent for sharper definition */ --subtle-bg: #2a2d2a; /* Existing subtle dark */ --text-color: #FFFFFF; /* White - primary text */ --text-secondary-color: #CFCFCF; /* Soft Mist Gray - secondary text (labels, captions) */ --light-text-color: #0D0F17; /* Dark text for light buttons (e.g., on lime green accent) */ --primary-color: #B76AF2; /* Light Purple - charts/UI highlights */ --secondary-color: #6CD2BD; /* Mint Green - progress indicators/financial gains */ --accent-color: #D8FA94; /* Soft Lime Yellow - key stats/alerts */ --danger-color: #FF6B6B; /* Existing Bright Red for danger */ --border-color: rgba(183, 106, 242, 0.4); /* High definition outline */ --dot-color: var(--border-color); /* Color for the dots in dark mode */ --warning-orange: #FECC80; /* Sunset Peach - buttons/badges/alerts */ --warning-red: var(--danger-color); /* #FF6B6B */ --gradient-primary-start: #c985f5; /* Lighter Light Purple */ --gradient-primary-end: #b76af2; /* Light Purple */ --gradient-secondary-start: #82e0cf; /* Lighter Mint Green */ --gradient-secondary-end: #6cd2bd; /* Mint Green */ --gradient-danger-start: #ff8585; /* Lighter Bright Red */ --gradient-danger-end: var(--danger-color); /* Bright Red */ --gradient-accent-start: #e0fbac; /* Lighter Soft Lime Yellow */ --gradient-accent-end: #d8fa94; /* Soft Lime Yellow */ --investment-gauge-color: var(--accent-color); /* Soft Lime Yellow (#D8FA94) */ --expense-gauge-color: #FECC80; /* Sunset Peach */ --loan-gauge-color: #89BFFF; /* Sky Blue - informational data displays */ --gauge-track-color: rgba(255, 255, 255, 0.05); /* Muted Slate or a darker variant of card-bg */ --tutorial-highlight-color: var(--accent-color); /* Soft Lime Yellow */ --shadow-depth-1: 0 8px 32px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-depth-2-inset: inset 0px 1px 2px rgba(0,0,0,0.4); --shadow-depth-button: 0px 4px 15px rgba(0,0,0,0.35); --shadow-depth-button-pressed: inset 0px 1px 3px rgba(0,0,0,0.4); --notification-bg: rgba(15, 17, 23, 0.9); --notification-border: var(--border-color); --notification-text: var(--text-color); --notification-unread-bg: var(--primary-color); --notification-unread-text: #ffffff; --primary-color-rgb: 183, 106, 242; /* RGB for #B76AF2 */ --danger-color-rgb: 255, 107, 107; /* RGB for #FF6B6B */ } /* --- Base & Typography --- */ html { height: 100%; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } *, *:before, *:after { box-sizing: inherit; } body { font-family: 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; max-width: 600px; margin: 0 auto; padding: 20px; padding-bottom: 90px; background-color: var(--body-bg); background-image: radial-gradient(circle at 10% 0%, rgba(156, 102, 68, 0.15) 0%, transparent 40%), radial-gradient(circle at 90% 100%, rgba(74, 124, 89, 0.15) 0%, transparent 40%); background-attachment: fixed; color: var(--text-color); line-height: 1.55; transition: background-color 0.3s ease, color 0.3s ease; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden; } body.dark-mode { background-image: radial-gradient(circle at 10% 0%, rgba(183, 106, 242, 0.15) 0%, transparent 40%), radial-gradient(circle at 90% 100%, rgba(108, 210, 189, 0.15) 0%, transparent 40%); } /* Scrollbar styling */ ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(var(--primary-color-rgb), 0.3); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(var(--primary-color-rgb), 0.6); } /* General Headings */ h2, h3, h4, h5 { color: var(--text-color); font-weight: 500; margin-bottom: 0.8em; letter-spacing: 0.01em; } h2 { font-size: 22px; text-align: center; color: var(--primary-color); font-weight: 600; } h3#dashboard-section { font-size: 1.1rem; font-weight: 500; text-align: center; color: var(--text-color); margin-bottom: 8px; display: flex; justify-content: center; align-items: center; gap: 10px; } /* ─── History Section: Chart Canvas ───────────────────────────── */ #dailyBarChart, #howWasMyDayBarChart { width: 100% !important; height: 100% !important; display: block; } .chart-container { position: relative; height: 240px; width: 100%; padding: 4px 0 8px; margin-top: 12px; } /* ─── History Card: toggle-header button ───────────────────────── */ .history-card .toggle-header { all: unset; display: flex; justify-content: space-between; align-items: center; width: 100%; cursor: pointer; padding: 2px 0 10px; border-bottom: 1px solid transparent; transition: border-color 0.3s ease; box-sizing: border-box; -webkit-tap-highlight-color: transparent; border-radius: 8px; } .history-card .toggle-header:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 4px; } .history-card.is-open .toggle-header { border-bottom-color: var(--border-color); padding-bottom: 14px; margin-bottom: 4px; } .toggle-header-label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-secondary-color); } .toggle-header-icon { font-size: 15px; line-height: 1; } /* ─── Animated chevron ─────────────────────────────────────────── */ .chevron-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(var(--primary-color-rgb), 0.08); transition: background 0.25s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); flex-shrink: 0; } .chevron-icon::after { content: ''; display: block; width: 9px; height: 9px; border-right: 2.2px solid var(--text-secondary-color); border-bottom: 2.2px solid var(--text-secondary-color); transform: rotate(45deg) translate(-2px, -2px); transition: border-color 0.25s ease; } .history-card.is-open .chevron-icon { transform: rotate(180deg); background: rgba(var(--primary-color-rgb), 0.15); } .history-card.is-open .chevron-icon::after { border-color: var(--primary-color); } /* ─── Smooth collapsible body ──────────────────────────────────── */ .collapsible-body { overflow: hidden; max-height: 1000px; opacity: 1; transition: max-height 0.42s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease, padding 0.35s ease; } .collapsible-body.collapsed { max-height: 0; opacity: 0; pointer-events: none; padding-top: 0; padding-bottom: 0; } /* Card Titles and Section Titles */ .card > h4:not(#modalTitle), #history-section > h4, #analytics-section > h4, #settings-section > h4, .settings-group > h5 { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary-color); margin-bottom: 18px; text-align: left; } .modal-content h3 { font-size: 1.3em; font-weight: 600; color: var(--primary-color); margin-top: 0; } /* Card Styles */ .card { background: var(--card-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 24px; padding: 18px; margin: 15px 0; box-shadow: var(--shadow-depth-1); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease, border 0.3s ease; border: 1.5px solid var(--border-color); position: relative; overflow: hidden; } body.dark-mode .card { box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05), var(--shadow-depth-1); /* Subtle bevel texture */ } /* Top Edge Shimmer for glass cards */ .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); z-index: 1; } body.dark-mode .card::before { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); } .card:hover:not(.no-hover-effect) { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.06); } body.dark-mode .card:hover:not(.no-hover-effect) { box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.2); } .settings-group label:not(h5) { display: block; margin-bottom: 8px; font-weight: 500; color: var(--text-color); font-size: 0.9rem; } .avatar-options { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 15px; } /* Avatar Profile Images */ .avatar-image-option { width: 48px; height: 48px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; object-fit: cover; transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .avatar-image-option:hover { transform: scale(1.05); } .avatar-option { font-size: 28px; cursor: pointer; padding: 5px; border: 2px solid transparent; border-radius: 8px; transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .avatar-image-option.selected, .avatar-option.selected { border-color: var(--primary-color); transform: scale(1.08); box-shadow: 0 0 12px rgba(var(--primary-color-rgb), 0.5); } .profile-display { text-align: center; margin-bottom: 20px; } .profile-avatar { font-size: 50px; width: 70px; height: 70px; margin-bottom: 10px; border: 3px solid var(--primary-color); box-shadow: 0 0 15px rgba(var(--primary-color-rgb), 0.4); border-radius: 50%; display: inline-flex; justify-content: center; align-items: center; object-fit: cover; } /* Fund Grid Layout & Tablets */ .fund-grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; margin-top: 10px; } .fund-tablet { background: var(--card-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1.5px solid var(--border-color); border-left: 4px solid var(--primary-color); border-radius: 22px; padding: 12px; box-shadow: var(--shadow-depth-1); display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease; -webkit-tap-highlight-color: transparent; } body.dark-mode .fund-tablet { box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05), var(--shadow-depth-1); } .fund-tablet:hover { border-left-color: var(--accent-color); transform: translateY(-3px); box-shadow: 0 12px 24px rgba(0,0,0,0.15); } .fund-tablet:active { transform: scale(0.97); } body.dark-mode .fund-tablet:hover { box-shadow: 0 12px 24px rgba(0,0,0,0.4); } .fund-tablet-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; } .fund-tablet-header strong { font-size: 0.9em; font-weight: 500; color: var(--text-color); } .fund-tablet .fund-due-day { font-size: 0.75em; margin-top: 2px; } .fund-tablet-amount { font-size: 1.2em; font-weight: bold; text-align: center; margin: 10px 0; color: var(--text-color); } /* Dashboard Gauges */ .dashboard-gauges-container { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 10px; margin-top: 20px; margin-bottom: 15px; } .gauge-widget { flex: 1 1 calc(33.333% - 10px); min-width: 90px; max-width: 115px; display: flex; flex-direction: column; align-items: center; justify-content: space-around; padding: 12px 5px; /* Increased padding */ background: var(--card-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1.5px solid var(--border-color); border-radius: 20px; box-shadow: var(--shadow-depth-1); height: 135px; /* Increased Height */ text-align: center; overflow: hidden; position: relative; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } body.dark-mode .gauge-widget { box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05), var(--shadow-depth-1); } .gauge-widget:hover { transform: scale(1.03); } .gauge-widget .gauge-label { font-size: 11px; font-weight: 400; color: var(--text-secondary-color); margin-top: 0; line-height: 1.8; flex-shrink: 0; } .gauge-widget .gauge-percentage { font-size: 1.1em; font-weight: 600; margin-top: 1px; margin-bottom: 5px; /* Added spacing from the bottom border */ flex-shrink: 0; } .gauge-widget canvas { max-width: 90%; max-height: 40px; height: auto !important; display: block; margin-top: 5px; margin-bottom: 5px; } .settings-link { text-decoration: none; color: var(--primary-color); display: block; padding: 8px 0; } .settings-link:hover { text-decoration: underline; color: var(--button-hover-primary); } .legal-links-list li { margin-bottom: 5px; } /* Input Fields, Selects */ input[type="text"], input[type="number"], input[type="date"], input[type="email"], input[type="password"], select { display: block; width: 90%; max-width: 450px; margin-left: auto; margin-right: auto; padding: 10px; margin-bottom: 12px; background-color: rgba(var(--primary-color-rgb), 0.05); border: 1.5px solid var(--border-color); border-radius: 14px; box-sizing: border-box; font-size: 14px; font-family: 'Poppins', sans-serif; color: var(--text-color); transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.2s ease; box-shadow: var(--shadow-depth-2-inset); } select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239C6644' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 36px; } /* Fix for Select Dropdown Options */ select option { background-color: #FFFFFF !important; color: #000000 !important; font-weight: 500; } body.dark-mode input[type="text"], body.dark-mode input[type="number"], body.dark-mode input[type="date"], body.dark-mode input[type="email"], body.dark-mode select { box-shadow: none; } body.dark-mode input[type="date"], body.dark-mode input[type="time"] { color-scheme: dark; } input[type="text"]:focus, input[type="number"]:focus, input[type="date"]:focus, input[type="email"]:focus, select:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.15); outline: none; } input[type="number"] { -moz-appearance: textfield; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } body.dark-mode input::placeholder { color: var(--text-secondary-color); opacity: 0.7; } body:not(.dark-mode) input::placeholder { color: var(--text-secondary-color); opacity: 0.8; } /* Buttons */ button { width: 100%; padding: 12px; margin-top: 10px; border: none; border-radius: 14px; font-size: 15px; font-family: 'Poppins', sans-serif; font-weight: 600; cursor: pointer; transition: background-color 0.2s ease-in-out, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease, box-shadow 0.3s ease; color: var(--light-text-color); background-size: 200% auto; box-shadow: var(--shadow-depth-button); text-transform: none; text-align: center; display: inline-flex; justify-content: center; align-items: center; -webkit-tap-highlight-color: transparent; } button:active { transform: translateY(0) scale(0.98); box-shadow: var(--shadow-depth-button-pressed); } button:disabled { opacity: 0.45 !important; transform: none !important; box-shadow: none !important; cursor: not-allowed; } button.primary { background-image: linear-gradient(to right, var(--gradient-primary-start) 0%, var(--gradient-primary-end) 51%, var(--gradient-primary-start) 100%); box-shadow: 0 4px 15px rgba(var(--primary-color-rgb), 0.35); } button.primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(var(--primary-color-rgb), 0.5); } button.danger { background-image: linear-gradient(to right, var(--gradient-danger-start) 0%, var(--gradient-danger-end) 51%, var(--gradient-danger-start) 100%); box-shadow: 0 4px 15px rgba(var(--danger-color-rgb), 0.35); } button.danger:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(var(--danger-color-rgb), 0.5); } button.secondary { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--border-color); color: var(--text-color); } body.dark-mode button.secondary { background: rgba(255, 255, 255, 0.05); color: var(--text-color); } button.secondary:hover { background: rgba(var(--primary-color-rgb), 0.1); border-color: var(--primary-color); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); } button.accent-bg-button { background-image: linear-gradient(to right, var(--gradient-accent-start) 0%, var(--gradient-accent-end) 51%, var(--gradient-accent-start) 100%); color: #1F2937; } body.dark-mode button.accent-bg-button { color: #1C3327; } /* Total Balance Section */ .total-balance { font-size: 0.9rem; font-weight: 500; text-align: center; margin-bottom: 6px; padding: 4px 10px; border-radius: 16px; background: transparent; color: var(--text-color); } #currencySymbolTotalBalance, #totalBalance { font-size: 2.4rem; font-weight: 700; background: linear-gradient(90deg, var(--primary-color), var(--accent-color)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; line-height: 1.2; } /* Modals */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; justify-content: center; align-items: center; z-index: 1050; /* Increased to sit above notifications */ opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .modal-overlay.active { opacity: 1; visibility: visible; } .modal-content { background-color: var(--card-bg); backdrop-filter: blur(12px); /* Reduced for sharper text rendering */ -webkit-backdrop-filter: blur(12px); color: var(--text-color); padding: 25px; border-radius: 28px; border: 1.5px solid var(--border-color); /* Added clear outline */ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); width: 90%; max-width: 380px; text-align: center; transform: translateY(30px); /* Removed scale() to fix text blurriness */ transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); -webkit-font-smoothing: antialiased; /* Ensure text sharpness inside modal */ } body.dark-mode .modal-content { box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05), 0 10px 40px rgba(0, 0, 0, 0.5); } .modal-overlay.active .modal-content { transform: translateY(0); /* Removed scale() */ } .modal-buttons { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; } .modal-buttons button { width: auto; min-width: 90px; padding: 10px 15px; font-size: 14px; margin-top: 0; } /* ─── Log Transaction Page: hide all UI behind it ─────────────── */ body.ltp-open .bottom-nav, body.ltp-open .fab, body.ltp-open .chatbot-fab, body.ltp-open .daiko-insights-fab, body.ltp-open #modeToggleBar, body.ltp-open .floating-notification-area { visibility: hidden !important; pointer-events: none !important; opacity: 0 !important; transition: none !important; } /* ─── Log Transaction Page (Full-Screen, GPay-style) ───────────── */ #logTransactionModal { position: fixed; inset: 0; z-index: 9999; background: var(--body-bg); visibility: hidden; transform: translateX(100%); /* Slide in from right — hardware accelerated */ transition: visibility 0s linear 0.26s, transform 0.26s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } #logTransactionModal.active { visibility: visible; transform: translateX(0); transition: visibility 0s linear 0s, transform 0.26s cubic-bezier(0.4, 0, 0.2, 1); } /* Outer wrapper — fills the fixed inset, clamps to 600px for desktop */ .ltp-wrap { width: 100%; max-width: 600px; height: 100dvh; height: 100vh; /* fallback */ margin: 0 auto; display: flex; flex-direction: column; overflow: hidden; } /* ── Hero zone (gradient top, big amount) ── */ .ltp-hero { background: linear-gradient(160deg, var(--gradient-primary-start) 0%, var(--gradient-primary-end) 100%); flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: stretch; padding-bottom: 32px; /* overlap space for the rounded bottom sheet */ position: relative; max-height: 38vh; /* reduce hero height for more space below */ } /* Top bar: back button + title + mode chip */ .ltp-topbar { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 16px 8px; flex-shrink: 0; } .ltp-back-btn { width: 38px !important; height: 38px !important; min-width: 38px !important; max-width: 38px !important; padding: 0 !important; margin: 0 !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.2) !important; color: #fff !important; font-size: 1.25rem !important; line-height: 1 !important; box-shadow: none !important; border: none !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer; flex-shrink: 0 !important; -webkit-tap-highlight-color: transparent; transition: background 0.15s ease !important; } .ltp-back-btn:hover { background: rgba(255, 255, 255, 0.3) !important; transform: none !important; box-shadow: none !important; } .ltp-back-btn:active { background: rgba(255, 255, 255, 0.35) !important; transform: scale(0.93) !important; box-shadow: none !important; } .ltp-title { flex: 1; text-align: center; font-size: 0.95rem; font-weight: 600; color: rgba(255, 255, 255, 0.9); letter-spacing: 0.03em; } .ltp-mode-chip { font-size: 0.68rem; font-weight: 600; color: rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.2); padding: 4px 12px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.3); letter-spacing: 0.04em; flex-shrink: 0; white-space: nowrap; } /* Compact selectors inside hero */ .ltp-selectors { display: flex; gap: 8px; padding: 0 16px; flex-shrink: 0; } .ltp-select { flex: 1 !important; min-width: 0 !important; display: block !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 8px 28px 8px 10px !important; border: 1px solid rgba(255, 255, 255, 0.35) !important; border-radius: 12px !important; background-color: rgba(255, 255, 255, 0.15) !important; color: rgba(255, 255, 255, 0.95) !important; font-size: 0.8rem !important; font-family: 'Poppins', sans-serif !important; appearance: none !important; -webkit-appearance: none !important; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 10px center !important; background-size: 13px !important; box-sizing: border-box !important; cursor: pointer !important; box-shadow: none !important; } .ltp-select:focus { outline: none; border-color: rgba(255, 255, 255, 0.7) !important; box-shadow: none !important; } /* Hero center: big amount number */ .ltp-amount-area { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; width: 100%; padding: 0 10px; } .ltp-amount-row { display: flex; align-items: baseline; gap: 6px; } .ltp-currency { font-size: clamp(1rem, 3vw, 1.2rem); font-weight: 300; color: rgba(255, 255, 255, 0.65); line-height: 1; } .ltp-amount-value { font-size: clamp(2.1rem, 8vw, 3.2rem); font-weight: 700; color: #fff; line-height: 1; letter-spacing: -3px; min-width: 30px; text-align: left; } .ltp-amount-value.placeholder { color: rgba(255, 255, 255, 0.3); } /* ── Bottom sheet (rounded over hero edge) ── */ .ltp-bottom { flex: 1 1 auto; min-height: 0; background: var(--body-bg); border-radius: 24px 24px 0 0; padding: 8px 8px 0; padding-bottom: env(safe-area-inset-bottom, 4px); margin-top: -24px; /* pulls the sheet up over the hero gradient */ position: relative; z-index: 1; overflow: hidden; display: flex; flex-direction: column; } /* Payment method pills */ .ltp-methods { display: flex; gap: 8px; margin-bottom: 10px; flex-shrink: 0; } .ltp-method-pill { flex: 1; display: flex; align-items: center; justify-content: center; padding: 13px 6px; border-radius: 13px; border: 1.5px solid var(--border-color); background: var(--card-bg); box-shadow: 0 2px 6px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.06); cursor: pointer; font-size: 0.78rem; font-weight: 600; color: var(--text-secondary-color); text-align: center; line-height: 1.3; transition: border-color 0.18s, background 0.18s, color 0.18s, box-shadow 0.18s; -webkit-tap-highlight-color: transparent; } .ltp-method-pill input[type="radio"] { display: none; } .ltp-method-pill:has(input:checked) { border-color: var(--primary-color); background: linear-gradient(145deg, rgba(var(--primary-color-rgb), 0.18) 0%, rgba(var(--primary-color-rgb), 0.08) 100%); color: var(--primary-color); font-weight: 700; box-shadow: 0 3px 10px rgba(var(--primary-color-rgb), 0.25), inset 0 1px 0 rgba(255,255,255,0.1); } /* Hidden payAmount input */ #logTransactionModal #payAmount { position: absolute !important; width: 0 !important; height: 0 !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; border: none !important; } /* Numpad grid */ .ltp-numpad { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: clamp(4px, 1.5vmin, 8px); margin-bottom: 8px; flex: 1 1 auto; min-height: 0; } .ltp-key { height: 100%; min-height: 40px; border-radius: 13px; background: var(--card-bg); border: 1.5px solid var(--border-color); color: var(--text-color); font-size: 1.35rem; font-weight: 500; font-family: 'Poppins', sans-serif; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 100%; padding: 0; margin: 0; box-shadow: var(--shadow-depth-1); transition: transform 0.07s ease, background 0.1s ease; -webkit-tap-highlight-color: transparent; } .ltp-key:active { transform: scale(0.91); box-shadow: none; background: rgba(var(--primary-color-rgb), 0.1); } .ltp-key-backspace { color: var(--danger-color); font-size: 1.1rem; } /* Action row */ .ltp-actions { display: flex; gap: 10px; padding-bottom: 4px; flex-shrink: 0; } .ltp-log-btn { flex: 1; padding: clamp(11px, 3vmin, 15px) 10px; border-radius: 16px; border: none; background: linear-gradient(135deg, var(--gradient-primary-start) 0%, var(--gradient-primary-end) 100%); color: var(--light-text-color); font-size: 1rem; font-weight: 700; font-family: 'Poppins', sans-serif; cursor: pointer; box-shadow: 0 4px 18px rgba(var(--primary-color-rgb), 0.4); margin: 0; transition: transform 0.1s ease, box-shadow 0.1s ease; -webkit-tap-highlight-color: transparent; } .ltp-log-btn:active { transform: scale(0.97); box-shadow: none; } .ltp-revert-btn { flex: 0 0 52px; width: 52px; padding: clamp(11px, 3vmin, 15px) 0; border-radius: 16px; border: 1.5px solid rgba(220, 53, 69, 0.45); background: linear-gradient(145deg, rgba(220,53,69,0.14) 0%, rgba(220,53,69,0.06) 100%); color: #dc3545; font-size: 1.25rem; font-family: 'Poppins', sans-serif; cursor: pointer; box-shadow: 0 2px 8px rgba(220,53,69,0.18); margin: 0; transition: transform 0.1s ease, box-shadow 0.1s ease; -webkit-tap-highlight-color: transparent; } .ltp-revert-btn:active { transform: scale(0.95); box-shadow: none; } /* ── Log Transaction: responsive height fixes for small phones ── */ /* Phones shorter than ~700px (e.g. SE, older Androids, notched phones with less usable height) */ @media (max-height: 700px) { .ltp-hero { max-height: 34vh; padding-bottom: 24px; } .ltp-amount-value { font-size: clamp(2rem, 9vw, 3.5rem); } .ltp-currency { font-size: clamp(1rem, 3vw, 1.4rem); } .ltp-topbar { padding: 6px 14px 4px; } .ltp-selectors { padding: 0 14px; } .ltp-amount-area { padding: 0 16px; } .ltp-bottom { padding: 8px 12px 0; padding-bottom: env(safe-area-inset-bottom, 6px); } .ltp-methods { margin-bottom: 6px; } .ltp-method-pill { padding: 9px 4px; font-size: 0.72rem; } .ltp-numpad { gap: clamp(3px, 1vmin, 5px); margin-bottom: 5px; } .ltp-key { min-height: 34px; font-size: 1.15rem; border-radius: 10px; } .ltp-log-btn { padding: 10px 8px; font-size: 0.9rem; border-radius: 13px; } .ltp-revert-btn { padding: 10px 0; flex: 0 0 46px; width: 46px; border-radius: 13px; } .ltp-actions { padding-bottom: 6px; } /* Even smaller screens: <500px height */ @media (max-height: 500px) { .ltp-hero { max-height: 22vh; padding-bottom: 10px; } .ltp-amount-value { font-size: clamp(1.2rem, 6vw, 2rem); } .ltp-currency { font-size: clamp(0.8rem, 2vw, 1rem); } .ltp-topbar { padding: 2px 8px 2px; } .ltp-selectors { padding: 0 8px; } .ltp-amount-area { padding: 0 6px; } .ltp-bottom { padding: 4px 4px 0; padding-bottom: env(safe-area-inset-bottom, 2px); border-radius: 12px 12px 0 0; margin-top: -10px; } .ltp-methods { margin-bottom: 2px; } .ltp-method-pill { padding: 5px 2px; font-size: 0.62rem; border-radius: 8px; } .ltp-numpad { gap: clamp(2px, 0.5vmin, 3px); margin-bottom: 2px; } .ltp-key { min-height: 22px; font-size: 0.8rem; border-radius: 6px; } .ltp-log-btn { padding: 6px 4px; font-size: 0.7rem; border-radius: 8px; } .ltp-revert-btn { padding: 6px 0; flex: 0 0 32px; width: 32px; border-radius: 8px; } .ltp-actions { padding-bottom: 2px; } } } /* Very short screens (<600px height, e.g. landscape or tiny phones) */ @media (max-height: 600px) { .ltp-hero { max-height: 28vh; padding-bottom: 18px; } .ltp-amount-value { font-size: clamp(1.6rem, 7vw, 2.8rem); } .ltp-topbar { padding: 4px 12px 2px; } .ltp-method-pill { padding: 7px 3px; font-size: 0.68rem; border-radius: 10px; } .ltp-key { min-height: 28px; font-size: 1rem; border-radius: 8px; } .ltp-bottom { border-radius: 18px 18px 0 0; margin-top: -18px; } } /* Revert Transactions Modal */ #revertTransactionsModal { align-items: flex-start; padding-top: 25px; z-index: 10000; } /* QR Scanner Modal — must sit above the log transaction page (9999) */ #qrScannerModal { z-index: 10000; } /* Custom alert/confirm modal — topmost layer above everything */ #customModal { z-index: 10001; } .revert-modal-content { max-width: 440px; text-align: left; } .revert-select-all-row { padding: 4px 0 10px; border-bottom: 1px solid var(--border-color); margin-bottom: 6px; } .revert-transactions-list { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow-y: auto; padding-right: 2px; } .revert-txn-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--gauge-track-color); border: 1.5px solid var(--border-color); cursor: pointer; transition: border-color 0.15s, background 0.15s; -webkit-tap-highlight-color: transparent; user-select: none; } .revert-txn-item.selected { border-color: var(--accent-color, #6366f1); background: rgba(99, 102, 241, 0.08); } .revert-txn-item.revert-txn-disabled { opacity: 0.45; cursor: not-allowed; } .revert-txn-item input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent-color, #6366f1); } .revert-txn-item.revert-txn-disabled input[type="checkbox"] { cursor: not-allowed; } .revert-txn-details { flex: 1; min-width: 0; } .revert-txn-desc { font-size: 13px; font-weight: 500; color: var(--text-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .revert-txn-meta { font-size: 11px; opacity: 0.55; margin-top: 3px; } @keyframes dropDownSpring { from { transform: translateY(-100%); opacity: 0; } /* Drops smoothly from the top */ to { transform: translateY(0); opacity: 1; } } /* Payment App Selector in Log Transaction Modal */ .payment-app-selector-modal { width: 89%; padding: 12px 14px; margin-bottom: 15px; border: 2px solid var(--border-color); border-radius: 15px; background-color: rgba(156, 102, 68, 0.08); color: var(--text-color); font-size: 1rem; font-family: inherit; cursor: pointer; transition: all 0.3s ease; box-sizing: border-box; } .payment-app-selector-modal:hover { background-color: rgba(156, 102, 68, 0.12); border-color: var(--primary-color); } .payment-app-selector-modal:focus { outline: none; background-color: rgba(156, 102, 68, 0.15); border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(156, 102, 68, 0.1); } body.dark-mode .payment-app-selector-modal { background-color: rgba(156, 102, 68, 0.12); border-color: rgba(156, 102, 68, 0.3); } body.dark-mode .payment-app-selector-modal:hover { background-color: rgba(156, 102, 68, 0.18); } body.dark-mode .payment-app-selector-modal:focus { background-color: rgba(156, 102, 68, 0.22); box-shadow: 0 0 0 3px rgba(156, 102, 68, 0.2); } /* LOADING OVERLAY STYLES */ .loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%); display: flex; justify-content: center; align-items: center; z-index: 99999; opacity: 1; transition: opacity 0.5s ease-out, visibility 0.5s ease-out; visibility: visible; } .loading-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; } body.dark-mode .loading-overlay { background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%); } .loading-container { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 24px; text-align: center; } .loading-spinner { width: 60px; height: 60px; border: 5px solid rgba(156, 102, 68, 0.15); border-top: 5px solid #9c6644; border-radius: 50%; animation: spinnerRotate 1s linear infinite; } @keyframes spinnerRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .loading-text { font-size: 1.1rem; font-weight: 600; color: #9c6644; margin: 0; letter-spacing: 0.5px; } body.dark-mode .loading-text { color: #d4a574; } .loading-progress-bar-container { width: 280px; height: 6px; background-color: rgba(156, 102, 68, 0.1); border-radius: 3px; overflow: hidden; box-shadow: 0 2px 8px rgba(156, 102, 68, 0.1); } .loading-progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #9c6644 0%, #d4a574 50%, #9c6644 100%); border-radius: 3px; transition: width 0.3s ease-out; box-shadow: 0 0 10px rgba(156, 102, 68, 0.3); background-size: 200% 100%; animation: progressShimmer 1.5s infinite; } @keyframes progressShimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } } .loading-percentage { font-size: 0.9rem; font-weight: 700; color: #9c6644; margin: 0; min-width: 40px; } body.dark-mode .loading-percentage { color: #d4a574; } /* Daiko Insights Specifics */ .daiko-insights-modal-content { max-height: 84vh; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0 2px; } .daiko-insights-modal-content::-webkit-scrollbar { display: none; } .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid var(--border-color); padding-bottom: 15px; } .modal-header h3 { margin: 0; font-size: 1.3rem; font-weight: 600; color: var(--primary-color); } .modal-close-btn { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-secondary-color); padding: 0; width: 30px; height: 30px; box-shadow: none; transition: color 0.2s ease; } .modal-close-btn:hover { color: var(--text-color); transform: none; box-shadow: none; } /* Forgot Password specific */ #forgotPasswordModal { display: flex !important; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 1050; /* Increased to sit above notifications */ opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } #forgotPasswordModal.active { opacity: 1; visibility: visible; } #forgotPasswordModal .modal-content { max-width: 380px; } #forgotPasswordModal input[type="email"] { width: 100%; } /* ─── Daiko Insights Card System ──────────────────────────────── */ /* Greeting bar */ .di-greeting { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.12) 0%, rgba(var(--primary-color-rgb), 0.04) 100%); border-radius: 14px; margin-bottom: 16px; border: 1px solid rgba(var(--primary-color-rgb), 0.2); } .di-greeting-avatar { font-size: 1.8rem; } .di-greeting-text { font-size: 0.88rem; font-weight: 500; line-height: 1.5; } /* Section title */ .di-section-title { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary-color); margin: 18px 0 8px; } /* Stats grid */ .di-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } /* Base card */ .di-card { background: var(--card-bg); border-radius: 14px; padding: 13px 14px; border: 1.5px solid var(--border-color); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); display: flex; flex-direction: column; gap: 4px; position: relative; overflow: hidden; } .di-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 14px 14px 0 0; } /* Severity variants */ .di-card--green { border-color: rgba(34, 197, 94, 0.3); } .di-card--green::before { background: #22c55e; } .di-card--amber { border-color: rgba(234, 179, 8, 0.35); } .di-card--amber::before { background: #eab308; } .di-card--red { border-color: rgba(239, 68, 68, 0.35); } .di-card--red::before { background: #ef4444; } .di-card--blue { border-color: rgba(59, 130, 246, 0.3); } .di-card--blue::before { background: #3b82f6; } .di-card--purple { border-color: rgba(168, 85, 247, 0.3); } .di-card--purple::before { background: #a855f7; } .di-card--primary { border-color: rgba(var(--primary-color-rgb), 0.3); } .di-card--primary::before { background: var(--primary-color); } /* Card internals */ .di-card-icon { font-size: 1.3rem; } .di-card-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; color: var(--text-secondary-color); } .di-card-value { font-size: 1.15rem; font-weight: 700; } .di-card-sub { font-size: 0.72rem; color: var(--text-secondary-color); } .di-card-badge { font-size: 0.62rem; font-weight: 700; padding: 2px 7px; border-radius: 20px; align-self: flex-start; margin-top: 2px; } .di-card-badge--green { background: rgba(34, 197, 94, 0.15); color: #15803d; } .di-card-badge--amber { background: rgba(234, 179, 8, 0.15); color: #92400e; } .di-card-badge--red { background: rgba(239, 68, 68, 0.15); color: #b91c1c; } .di-card-badge--blue { background: rgba(59, 130, 246, 0.15); color: #1d4ed8; } .di-card-badge--purple { background: rgba(168, 85, 247, 0.15); color: #6b21a8; } .di-card--full { grid-column: 1 / -1; } /* Progress bar */ .di-progress-track { height: 6px; background: rgba(var(--primary-color-rgb), 0.1); border-radius: 10px; margin-top: 6px; overflow: hidden; } .di-progress-fill { height: 100%; border-radius: 10px; transition: width 0.6s ease; } .di-progress-fill--green { background: #22c55e; } .di-progress-fill--amber { background: #eab308; } .di-progress-fill--red { background: #ef4444; } .di-progress-fill--blue { background: #3b82f6; } .di-progress-fill--purple { background: #a855f7; } .di-progress-fill--primary { background: var(--primary-color); } /* Budget rule list */ .di-rule-list { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 9px; } .di-rule-list li { display: flex; align-items: center; font-size: 0.8rem; gap: 8px; } .di-rule-name { font-weight: 600; min-width: 70px; flex-shrink: 0; } .di-rule-target { font-size: 0.65rem; color: var(--text-secondary-color); min-width: 28px; flex-shrink: 0; } .di-rule-bar-wrap { flex: 1; min-width: 40px; height: 5px; border-radius: 10px; overflow: hidden; background: rgba(var(--primary-color-rgb), 0.1); } .di-rule-bar-fill { height: 100%; border-radius: 10px; transition: width 0.6s ease; } .di-rule-pct { font-weight: 700; min-width: 38px; text-align: right; flex-shrink: 0; } /* Alert items */ .di-alert-list { display: flex; flex-direction: column; gap: 7px; } .di-alert-item { display: flex; align-items: flex-start; gap: 10px; border: 1.5px solid var(--border-color); border-radius: 11px; padding: 10px 12px; font-size: 0.8rem; line-height: 1.45; } .di-alert-item--red { border-color: rgba(239, 68, 68, 0.3); background: rgba(239, 68, 68, 0.04); } .di-alert-item--amber { border-color: rgba(234, 179, 8, 0.3); background: rgba(234, 179, 8, 0.04); } .di-alert-item--blue { border-color: rgba(59, 130, 246, 0.3); background: rgba(59, 130, 246, 0.04); } .di-alert-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; } .di-alert-text { flex: 1; } /* Rule feedback */ .di-rule-feedback { list-style: none; padding: 0; margin: 10px 0 0; font-size: 0.78rem; color: var(--text-secondary-color); line-height: 1.5; display: flex; flex-direction: column; gap: 5px; } .di-rule-feedback li { padding-left: 14px; position: relative; } .di-rule-feedback li::before { content: "→"; position: absolute; left: 0; color: var(--primary-color); } /* Disclaimer */ .di-disclaimer { font-size: 0.72rem; color: var(--text-secondary-color); font-style: italic; text-align: center; margin-top: 16px; padding: 10px; background: rgba(var(--primary-color-rgb), 0.04); border-radius: 10px; } /* ─── History Table ────────────────────────────────────────────── */ #history { overflow-x: auto; overflow-y: auto; max-height: 480px; display: block; scrollbar-width: thin; scrollbar-color: rgba(var(--primary-color-rgb), 0.25) transparent; margin-top: 4px; /* Enable horizontal scroll + pinch-zoom on touch devices */ touch-action: pan-x pan-y pinch-zoom; -webkit-overflow-scrolling: touch; } #history::-webkit-scrollbar { width: 4px; height: 4px; } #history::-webkit-scrollbar-track { background: transparent; } #history::-webkit-scrollbar-thumb { background: rgba(var(--primary-color-rgb), 0.25); border-radius: 4px; } #historyTable { width: 100%; min-width: 380px; border-collapse: separate; border-spacing: 0 5px; margin-top: 6px; table-layout: auto; } #historyTable th { background: transparent; color: var(--text-secondary-color); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 5px 8px; border: none; white-space: nowrap; } #historyTable td { border: none; padding: 10px 5px; font-size: 0.80em; white-space: nowrap; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; } /* Column widths — browser distributes leftovers to desc */ #historyTable .col-icon { width: 34px; text-align: center; } #historyTable .col-date { width: 60px; } #historyTable .col-desc { /* Allow description to wrap — it gets remaining space */ white-space: normal; word-break: break-word; min-width: 70px; max-width: 110px; } #historyTable .col-amount { width: 76px; text-align: right; } #historyTable .col-type { width: 72px; text-align: right; } #historyTable tbody tr { background-color: rgba(var(--primary-color-rgb), 0.04); transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; animation: historyRowIn 0.3s ease both; } #historyTable tbody tr:hover { background-color: rgba(var(--primary-color-rgb), 0.09); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.08); } body.dark-mode #historyTable tbody tr:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.3); } #historyTable tbody td:first-child { border-top-left-radius: 14px; border-bottom-left-radius: 14px; } #historyTable tbody td:last-child { border-top-right-radius: 14px; border-bottom-right-radius: 14px; } @keyframes historyRowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ─── Type icon circle ─────────────────────────────────────────── */ .tx-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; font-size: 14px; background: rgba(var(--primary-color-rgb), 0.1); flex-shrink: 0; } .tx-icon.icon-expense { background: rgba(220, 53, 69, 0.12); } .tx-icon.icon-income { background: rgba(40, 167, 69, 0.12); } .tx-icon.icon-transfer { background: rgba(var(--primary-color-rgb), 0.12); } .tx-icon.icon-fund { background: rgba(var(--primary-color-rgb), 0.08); } .tx-icon.icon-revert { background: rgba(255, 153, 0, 0.12); } /* ─── Amount color coding ──────────────────────────────────────── */ .amount-expense { color: var(--error-red, #e53935); font-weight: 600; } .amount-income { color: var(--success-green, #43a047); font-weight: 600; } .amount-neutral { color: var(--text-color); font-weight: 500; } /* Date secondary style */ .tx-date-relative { display: block; font-size: 0.78em; color: var(--text-secondary-color); line-height: 1.3; } /* ─── Type badge chip ──────────────────────────────────────────── */ .type-chip { display: inline-block; padding: 3px 7px; border-radius: 20px; font-size: 0.70em; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .type-chip.chip-expense { background: rgba(220,53,69,0.1); color: var(--error-red, #e53935); } .type-chip.chip-income { background: rgba(40,167,69,0.1); color: var(--success-green, #43a047); } .type-chip.chip-transfer { background: rgba(var(--primary-color-rgb),0.1); color: var(--primary-color); } .type-chip.chip-fund { background: rgba(var(--primary-color-rgb),0.07); color: var(--text-secondary-color); } .type-chip.chip-revert { background: rgba(255,153,0,0.1); color: #e65c00; } /* Bottom Navigation */ /* === MODE TOGGLE BAR (top-level Personal / Shared switcher) === */ .mode-toggle-bar { position: sticky; top: 0; z-index: 940; display: flex; justify-content: center; padding: 10px 16px 6px; background: var(--bg-color); transition: background 0.3s ease; } .mode-toggle-pills { display: flex; gap: 6px; background: transparent; border-radius: 16px; padding: 4px; width: 100%; max-width: 360px; } .mode-pill { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 14px; border: none; border-radius: 13px; background: var(--card-bg); color: var(--text-color); font-size: 0.88rem; font-weight: 500; cursor: pointer; transition: all 0.25s ease; position: relative; box-shadow: 0 1px 4px rgba(0,0,0,0.1); } .mode-pill:hover { color: var(--primary-color); background: var(--card-bg); opacity: 0.85; } .mode-pill.active { background: var(--primary-color); color: #fff; font-weight: 600; box-shadow: 0 2px 10px rgba(var(--primary-color-rgb), 0.3); } .mode-pill.active:hover { background: var(--primary-color); color: #fff; } .mode-pill-icon { font-size: 1rem; } .mode-pill-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: rgba(255, 255, 255, 0.3); font-size: 0.7rem; font-weight: 700; line-height: 1; } .mode-pill.active .mode-pill-badge { background: rgba(255, 255, 255, 0.35); color: #fff; } body.dark-mode .mode-toggle-pills { background: transparent; } body.dark-mode .mode-pill:not(.active) { background: var(--card-bg); color: var(--text-color); } /* Shared mode prompt card */ .shared-mode-prompt { margin: 0 16px 12px; text-align: center; padding: 20px; border: 1.5px dashed rgba(var(--primary-color-rgb), 0.3); background: rgba(var(--primary-color-rgb), 0.03); } .shared-mode-prompt h4 { margin-bottom: 8px; } /* === SHARED PLANNER SETTINGS === */ .sp-info-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border-color); } .sp-info-row:last-of-type { border-bottom: none; } .sp-label { font-size: 0.88rem; color: var(--text-secondary-color); font-weight: 500; } .sp-value { font-size: 0.9rem; font-weight: 600; color: var(--text-color); } .sp-invite-code-box { display: flex; flex-direction: column; align-items: center; background: rgba(var(--primary-color-rgb), 0.08); border: 2px dashed var(--primary-color); border-radius: 12px; padding: 14px 16px; text-align: center; } .sp-invite-code-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 2px; color: var(--text-secondary-color); margin-bottom: 4px; } .sp-invite-code { font-family: 'Courier New', monospace; font-size: 1.6rem; font-weight: 700; letter-spacing: 6px; color: var(--primary-color); } .sp-member-list { margin-top: 8px; } .sp-member-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(var(--primary-color-rgb), 0.06); } .sp-member-item:last-child { border-bottom: none; } .sp-member-avatar { width: 32px; height: 32px; border-radius: 50%; background: rgba(var(--primary-color-rgb), 0.12); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 600; color: var(--primary-color); flex-shrink: 0; } .sp-member-info { flex: 1; min-width: 0; } .sp-member-name { font-size: 0.88rem; font-weight: 600; color: var(--text-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sp-member-email { font-size: 0.78rem; color: var(--text-secondary-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sp-member-badge { font-size: 0.7rem; padding: 2px 8px; border-radius: 8px; background: rgba(var(--primary-color-rgb), 0.1); color: var(--primary-color); font-weight: 600; flex-shrink: 0; } /* === BOTTOM NAVIGATION === */ .bottom-nav { position: fixed; bottom: 0; width: 100%; max-width: 600px; left: 50%; transform: translateX(-50%); display: flex; justify-content: space-around; background-color: rgba(255, 255, 255, 0.85); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-top: 1px solid rgba(255, 255, 255, 0.3); padding: 5px 0; padding-bottom: env(safe-area-inset-bottom); /* iOS notch support */ box-shadow: 0 -8px 25px rgba(0,0,0,0.05); z-index: 950; border-radius: 20px 20px 0 0; } body.dark-mode .bottom-nav { background-color: rgba(15, 17, 23, 0.88); border-top: 1px solid rgba(255, 255, 255, 0.05); } .bottom-nav button { flex: 1; background-color: transparent; border: none; box-shadow: none; border-radius: 14px; color: var(--text-secondary-color); font-size: 12px; font-weight: 500; padding: 10px 5px; margin: 0 4px; transition: color 0.2s ease, background-color 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .bottom-nav button:hover { transform: translateY(-2px); color: var(--primary-color); } .bottom-nav button.active { background-color: rgba(var(--primary-color-rgb), 0.1); color: var(--primary-color); font-weight: 600; transform: scale(0.92); } /* --- FAB BUTTONS --- */ @keyframes fab-pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--primary-color-rgb), 0.7); } 70% { box-shadow: 0 0 0 15px rgba(var(--primary-color-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--primary-color-rgb), 0); } } @keyframes floatUpDown { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .fab, .chatbot-fab, .daiko-insights-fab { position: fixed; border-radius: 50%; box-shadow: var(--shadow-depth-button); transition: background-color 0.3s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease; display: flex; justify-content: center; align-items: center; border: none; z-index: 900; cursor: pointer; padding: 0; } /* Base Add button (Right) */ .fab { width: 50px; height: 50px; font-size: 24px; bottom: 85px; right: 15px; background-image: linear-gradient(135deg, var(--gradient-primary-start), var(--gradient-primary-end)); color: white; animation: fab-pulse 2s infinite; } .fab:hover { transform: scale(1.1); box-shadow: 0 8px 25px rgba(var(--primary-color-rgb), 0.6); } .fab:active { transform: scale(0.95); box-shadow: var(--shadow-depth-button-pressed); } /* AI Chatbot Button (Left) - Image Only & Float */ .chatbot-fab { width: 60px; height: 60px; font-size: 24px; bottom: 75px; left: 15px; background-image: url('assets/daiko.png'); background-size: cover; background-position: center; /* Restored solid background */ background-color: var(--card-bg); border: 1.5px solid var(--border-color); box-shadow: var(--shadow-depth-button); /* Hover up and down animation */ animation: floatUpDown 3s ease-in-out infinite; } body:not(.dark-mode) .chatbot-fab { background-color: var(--card-bg); mix-blend-mode: normal; } body.dark-mode .chatbot-fab { background-color: var(--card-bg); mix-blend-mode: normal; } .chatbot-fab:hover { animation-play-state: paused; /* Pause float when hovered */ transform: translateY(-4px) scale(1.1); box-shadow: 0 8px 25px rgba(var(--primary-color-rgb), 0.4); } .chatbot-fab:active { transform: scale(0.95); box-shadow: var(--shadow-depth-button-pressed); } /* Daiko Insights Button (Top Left) - Glass Effect */ .daiko-insights-fab { width: 56px; height: 56px; font-size: 28px; bottom: 145px; left: 15px; background-image: none; /* Remove old solid gradient */ /* New Glass Effect */ background-color: rgba(255, 255, 255, 0.7); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1.5px solid var(--border-color); color: var(--primary-color); } body.dark-mode .daiko-insights-fab { background-color: rgba(22, 24, 32, 0.6); color: var(--accent-color); } .daiko-insights-fab .fab-icon { font-size: 18px; line-height: 1; } .daiko-insights-fab:hover { transform: translateY(-4px) scale(1.05); box-shadow: 0 0 12px 2px rgba(var(--primary-color-rgb), 0.4), var(--shadow-depth-button); } body.dark-mode .daiko-insights-fab:hover { box-shadow: 0 0 12px 2px rgba(216, 250, 148, 0.4), var(--shadow-depth-button); } .daiko-insights-fab:active { transform: scale(0.95); box-shadow: var(--shadow-depth-button-pressed); } /* Chat Container */ .chat-container { position: fixed; bottom: 155px; right: 15px; left: auto; width: auto; min-width: 280px; max-width: min(90vw, 320px); max-height: calc(100vh - 170px); max-height: calc(100dvh - 170px); height: 80vh; height: 80dvh; background-color: rgba(255, 255, 255, 0.92); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-radius: 28px; border: 1.5px solid var(--border-color); box-shadow: 0 12px 40px rgba(0,0,0,0.25); display: flex; flex-direction: column; overflow: hidden; z-index: 999; transform: scale(0.8) translateY(20px); opacity: 0; visibility: hidden; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease-out, visibility 0.3s ease-out; } body.dark-mode .chat-container { background-color: rgba(18, 20, 28, 0.94); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05), 0 12px 40px rgba(0,0,0,0.5); } .chat-container.open { transform: scale(1) translateY(0); opacity: 1; visibility: visible; } .chat-header { background-image: linear-gradient(135deg, var(--gradient-primary-start), var(--gradient-primary-end)); color: var(--light-text-color); padding: 12px 18px; font-weight: 600; font-size: 1rem; display: flex; justify-content: space-between; align-items: center; } body.dark-mode .chat-header { color: #FFFFFF; } .chat-header .close-btn { background: rgba(0,0,0,0.2); border: none; color: white; font-size: 1rem; cursor: pointer; padding: 0; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: none; } .chat-header .close-btn:hover { background: rgba(0,0,0,0.4); transform: none; box-shadow: none; } .chat-messages { flex: 1 1 0; min-height: 0; padding: 12px; overflow-y: auto; -webkit-overflow-scrolling: touch; background-color: transparent; color: var(--text-color); font-size: 0.85rem; } /* Visible scrollbar for chat messages */ .chat-messages::-webkit-scrollbar { width: 5px; } .chat-messages::-webkit-scrollbar-track { background: transparent; } .chat-messages::-webkit-scrollbar-thumb { background: rgba(var(--primary-color-rgb), 0.3); border-radius: 10px; } .chat-messages::-webkit-scrollbar-thumb:hover { background: rgba(var(--primary-color-rgb), 0.5); } /* Firefox scrollbar */ .chat-messages { scrollbar-width: thin; scrollbar-color: rgba(var(--primary-color-rgb), 0.3) transparent; } .chat-message { margin-bottom: 8px; line-height: 1.4; } .chat-message.user { text-align: right; } .chat-message.bot { text-align: left; } .chat-message span { display: inline-block; max-width: 85%; padding: 10px 14px; border-radius: 16px; word-wrap: break-word; } .chat-message.user span { background-color: var(--primary-color); color: var(--light-text-color); border-bottom-right-radius: 4px; } body.dark-mode .chat-message.user span { color: #FFFFFF; } .chat-message.bot span { background-color: rgba(var(--primary-color-rgb), 0.1); color: var(--text-color); border-bottom-left-radius: 4px; border: 1px solid var(--border-color); } .chat-input-area { display: flex; padding: 10px; border-top: 1px solid var(--border-color); gap: 8px; align-items: center; } .chat-input-area input { flex-grow: 1; padding: 10px 14px; border-radius: 14px; margin-bottom: 0; } .chat-input-area button { width: auto; padding: 10px 14px; border-radius: 14px; margin-top: 0; flex-shrink: 0; } .chat-icon-btn { width: 40px; height: 40px; border-radius: 14px; background-image: linear-gradient(to right, var(--gradient-secondary-start) 0%, var(--gradient-secondary-end) 51%, var(--gradient-secondary-start) 100%); color: #1F2937; font-size: 18px; display: inline-flex; justify-content: center; align-items: center; } body.dark-mode .chat-icon-btn { color: #0D0F17; } .chat-icon-btn.listening { background-image: none; background-color: var(--danger-color); animation: pulse 1s infinite alternate; color: white; } .chat-options { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; padding: 8px 12px; border-top: 1px solid var(--border-color); font-size: 0.75rem; color: var(--text-secondary-color); gap: 8px; } /* Notifications & Toast */ .floating-notification-area { position: fixed; top: 15px; right: 20px; z-index: 1005; } .floating-notification-icon { font-size: 1.3em; /* Smaller Icon */ cursor: pointer; color: var(--primary-color); background-color: var(--card-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1.5px solid var(--border-color); padding: 8px; border-radius: 50%; box-shadow: 0 4px 15px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; width: 36px; /* Smaller container */ height: 36px; /* Smaller container */ transition: transform 0.3s ease; } .floating-notification-icon:hover { transform: scale(1.05); } .floating-notification-area .notifications-dropdown { position: absolute; top: 55px; /* Ensures drop down aligns perfectly without pushing icon */ right: 0; } .notifications-dropdown { background-color: rgba(255, 255, 255, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1.5px solid var(--border-color); border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); z-index: 1010; display: none; padding: 15px; width: 280px; max-height: 300px; overflow-y: auto; scrollbar-width: none; } body.dark-mode .notifications-dropdown { background-color: rgba(15, 17, 23, 0.9); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05), 0 10px 30px rgba(0,0,0,0.5); } .notifications-dropdown.visible { display: block; } .notification-item { padding: 12px 16px; font-size: 0.85em; color: var(--notification-text); cursor: pointer; border-radius: 16px; margin-bottom: 12px; position: relative; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .notification-item.unread { background-color: var(--notification-unread-bg); color: var(--notification-unread-text) !important; } .notification-item:hover { background-color: rgba(var(--primary-color-rgb), 0.1); color: var(--text-color); } .notification-badge { background: linear-gradient(135deg, #FF6B6B, #E53E3E); box-shadow: 0 2px 8px rgba(229, 62, 62, 0.5); color: white; border-radius: 50%; padding: 2px 6px; font-size: 0.7em; font-weight: bold; position: absolute; top: -5px; right: -5px; display: none; } .notification-badge.visible { display: block; } .toast-notification { position: fixed; bottom: 160px; left: 50%; transform: translateX(-50%); background-color: rgba(0, 0, 0, 0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: white; padding: 12px 24px; border-radius: 50px; font-size: 14px; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 1100; white-space: nowrap; box-shadow: 0 8px 20px rgba(0,0,0,0.2); } .toast-notification.show { opacity: 1; visibility: visible; } /* Utilities & Miscellaneous */ .row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .fund-details { display: flex; flex-direction: column; align-items: flex-start; flex-grow: 1; } .fund-details strong { margin-bottom: 3px; } .row > span:not(.fund-due-day) { text-align: center; flex-basis: 120px; flex-shrink: 0; font-weight: 500; } .fund-details + span { text-align: center; min-width: 80px; } .fund-item-controls { display: flex; gap: 10px; align-items: center; } .delete-fund-btn { width: 26px; height: 26px; border-radius: 50%; background-image: linear-gradient(to right, var(--gradient-danger-start) 0%, var(--gradient-danger-end) 51%, var(--gradient-danger-start) 100%); color: white; font-size: 14px; display: flex; justify-content: center; align-items: center; padding: 0; margin: 0; flex-shrink: 0; box-shadow: 0 2px 5px rgba(229,62,62,0.4); } .highlight-tutorial { border: 2px solid var(--tutorial-highlight-color) !important; box-shadow: 0 0 15px var(--tutorial-highlight-color) !important; border-radius: 24px; transition: all 0.4s ease-in-out; transform: scale(1.01); position: relative; z-index: 1001; } /* --- SELECTABLE TABLET UI FOR RADIO/CHECKBOX OPTIONS --- */ .radio-group, .checkbox-group, #logTransactionSectionCard .payment-method-options, .payment-method-options { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; align-items: center; justify-content: center; /* Center the tablets neatly */ width: 100%; box-sizing: border-box; } /* Hide Native Radio Buttons and Checkboxes entirely */ .radio-group input[type="radio"], .checkbox-group input[type="checkbox"], #logTransactionSectionCard .payment-method-options input[type="radio"], .payment-method-options input[type="radio"] { display: none; } /* Pill/Tablet styling for labels */ .radio-group label, .checkbox-group label, #logTransactionSectionCard .payment-method-options label, .payment-method-options label { display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text-secondary-color); padding: 10px 8px; /* Slightly reduced side padding to allow more text before wrapping */ margin: 0; background-color: rgba(var(--primary-color-rgb), 0.04); border: 1.5px solid var(--border-color); border-radius: 12px; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); text-align: center; white-space: normal; /* ALLOW WRAPPING instead of nowrap */ flex: 1 1 0%; /* FORCES tablets to share row equally */ min-width: 0; min-height: 48px; /* Ensure uniform height if text wraps */ line-height: 1.3; /* Better spacing for wrapped text */ } /* Distinct styling for Auto-Deduct Checkbox Tablet */ .checkbox-group label { background-color: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.08); } body.dark-mode .checkbox-group label { background-color: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.08); } /* Tablet Hover State */ .radio-group label:hover, #logTransactionSectionCard .payment-method-options label:hover, .payment-method-options label:hover { background-color: rgba(var(--primary-color-rgb), 0.08); border-color: rgba(var(--primary-color-rgb), 0.4); color: var(--text-color); transform: translateY(-1px); } .checkbox-group label:hover { background-color: rgba(0, 0, 0, 0.06); border-color: rgba(0, 0, 0, 0.15); color: var(--text-color); transform: translateY(-1px); } body.dark-mode .checkbox-group label:hover { background-color: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); } /* Tablet Selected/Checked State — .is-checked class toggled by JS for full compatibility */ .radio-group label.is-checked, #logTransactionSectionCard .payment-method-options label.is-checked, .payment-method-options label.is-checked { background-color: rgba(var(--primary-color-rgb), 0.15); border-color: var(--primary-color); color: var(--primary-color); font-weight: 600; box-shadow: 0 4px 12px rgba(var(--primary-color-rgb), 0.15); transform: translateY(-2px); } body.dark-mode .radio-group label.is-checked, body.dark-mode #logTransactionSectionCard .payment-method-options label.is-checked, body.dark-mode .payment-method-options label.is-checked { background-color: rgba(var(--primary-color-rgb), 0.25); color: #FFFFFF; } /* Distinct Checked State for Auto-Deduct Checkbox */ .checkbox-group label.is-checked { background-color: rgba(74, 124, 89, 0.12); /* Forest Green tint */ border-color: var(--secondary-color); color: var(--secondary-color); font-weight: 600; box-shadow: 0 4px 12px rgba(74, 124, 89, 0.15); transform: translateY(-2px); } body.dark-mode .checkbox-group label.is-checked { background-color: rgba(108, 210, 189, 0.2); /* Mint Green tint */ border-color: var(--secondary-color); color: #FFFFFF; box-shadow: 0 4px 12px rgba(108, 210, 189, 0.15); } /* Extra toggle button styles */ #toggleCreditAmountBtn { background: rgba(var(--secondary-color-rgb), 0.15); border: 1px solid var(--secondary-color); color: var(--text-color); } #toggleCreditAmountBtn:hover { background: rgba(var(--secondary-color-rgb), 0.3); transform: translateY(-2px); } .emi-amount-input { display: none; margin-top: 10px; margin-bottom: 10px; } .emi-amount-input.show { display: block; } #logTransactionSectionCard > h4 { display: none; } #logTransactionSectionCard > select, #logTransactionSectionCard > input[type="number"], #logTransactionSectionCard > button { display: block; width: 90%; max-width: 350px; margin-left: auto; margin-right: auto; margin-top: 10px; margin-bottom: 12px; } #logTransactionSectionCard, #creditAmountCard { max-height: 0; overflow: hidden; visibility: hidden; margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; border-width: 0 !important; opacity: 0; transition: all 0.35s ease-out; } #logTransactionSectionCard.open, #creditAmountCard.open { max-height: 500px; visibility: visible; opacity: 1; margin-top: 15px !important; margin-bottom: 15px !important; padding-top: 18px !important; padding-bottom: 18px !important; border-width: 1px !important; transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } .month-navigation { margin-top: 0; margin-bottom: 4px; text-align: center; padding: 3px; } .month-navigation #currentDateDisplay { font-weight: 600; font-size: 1.1em; color: var(--text-color); display: block; margin-bottom: 10px; } .month-nav-buttons { display: flex; justify-content: space-between; gap: 8px; } .month-nav-buttons button { width: 48%; margin: 0; padding: 8px; font-size: 0.85em; } .month-actions { display: flex; gap: 10px; margin-top: 10px; } .month-actions button { flex: 1; margin-top: 0; font-size: 0.9em; } /* Log New Transaction Button */ .log-transaction-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 12px 20px; margin: 8px 0 12px; font-size: 1rem; font-weight: 600; color: #fff; background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); border: none; border-radius: 14px; box-shadow: 0 4px 12px rgba(var(--primary-color-rgb), 0.35), 0 2px 4px rgba(0, 0, 0, 0.1); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; } .log-transaction-btn:active { transform: scale(0.97); box-shadow: 0 2px 6px rgba(var(--primary-color-rgb), 0.25); } .log-transaction-btn span { font-size: 1.2rem; } .income-expense-summary { display: flex; justify-content: space-around; gap: 10px; margin-bottom: 15px; text-align: center; } #incomeCollapsibleBody { overflow: hidden; transition: max-height 0.35s ease, opacity 0.35s ease, padding 0.35s ease; max-height: 500px; opacity: 1; } #incomeCollapsibleBody.collapsed { max-height: 0; opacity: 0; pointer-events: none; } .income-expense-summary div { flex: 1; padding: 12px; border-radius: 16px; background: rgba(var(--primary-color-rgb), 0.05); font-weight: 500; border: 1.5px solid var(--border-color); } .income-expense-summary span { font-size: 0.85em; color: var(--text-secondary-color); } .income-expense-summary span.amount { display: block; font-size: 1.1em; font-weight: 600; margin-top: 4px; color: var(--text-color); } .dark-mode-toggle { display: flex; justify-content: flex-start; margin-bottom: 10px; align-items: center; gap: 10px; } .dark-mode-toggle label.switch { position: relative; display: inline-block; width: 50px; height: 28px; } .dark-mode-toggle input[type="checkbox"] { opacity: 0; width: 0; height: 0; } .dark-mode-toggle .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(var(--primary-color-rgb), 0.2); transition: .4s; border-radius: 28px; } .dark-mode-toggle .slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2); } body:not(.dark-mode) .dark-mode-toggle input:checked + .slider { background-color: var(--primary-color); } body.dark-mode .dark-mode-toggle input:checked + .slider { background-color: var(--primary-color); } .dark-mode-toggle input:focus + .slider { box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb),0.25); } .dark-mode-toggle input:checked + .slider:before { transform: translateX(22px); } .dark-mode-toggle span { font-size: 13px; color: var(--text-secondary-color); font-weight: 500; } #toggleDaikoSpeakBtn { background: transparent; color: var(--primary-color); border: 1px solid var(--primary-color); box-shadow: none; margin-right: 10px; } #toggleDaikoSpeakBtn:hover { background-color: rgba(var(--primary-color-rgb), 0.1); transform: none; box-shadow: none; } #toggleDaikoSpeakBtn.muted { color: var(--text-secondary-color); border-color: var(--border-color); } .faq-item { margin-bottom: 10px; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; } .faq-item:last-child { border-bottom: none; } .faq-question { font-weight: 600; cursor: pointer; padding: 8px 0; display: flex; justify-content: space-between; align-items: center; color: var(--primary-color); font-size: 0.9rem; } .faq-answer { display: none; padding: 5px 0 0 15px; font-size: 0.85rem; color: var(--text-color); } .faq-answer.active { display: block; } .faq-toggle-icon { font-size: 1.1em; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .faq-question.active .faq-toggle-icon { transform: rotate(180deg); } .expense-summary-text { margin-bottom: 18px; color: var(--text-color); } /* Analytics metric pills */ .analytics-pills-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .analytics-pill { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px; border-radius: 18px; background: rgba(var(--primary-color-rgb), 0.07); border: 1.5px solid rgba(var(--primary-color-rgb), 0.15); } .analytics-pill.pill-expense { background: rgba(224, 123, 57, 0.09); border-color: rgba(224, 123, 57, 0.22); } .analytics-pill.pill-auto { background: rgba(91, 155, 213, 0.09); border-color: rgba(91, 155, 213, 0.22); } .analytics-pill.pill-invest { background: rgba(112, 183, 126, 0.1); border-color: rgba(112, 183, 126, 0.25); } .analytics-pill.pill-total { background: rgba(var(--primary-color-rgb), 0.12); border-color: rgba(var(--primary-color-rgb), 0.28); } .pill-label { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary-color); line-height: 1; } .pill-value { font-size: 0.98rem; font-weight: 700; color: var(--text-color); line-height: 1.2; } /* Doughnut chart container — drop-shadow for 3D depth */ .analytics-chart-wrap { position: relative; margin: 0 auto 8px; max-width: 300px; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.13)); } .settings-group { margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px dashed var(--border-color); } .settings-group:last-child { border-bottom: none; } /* ===== SETTINGS ACCORDION (Android 16-style) ===== */ .settings-profile-hero { display: flex; align-items: center; gap: 16px; padding: 20px 4px 20px; border-bottom: 1px solid var(--border-color); margin-bottom: 4px; } .settings-hero-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid var(--primary-color); flex-shrink: 0; } .settings-hero-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .settings-hero-info .profile-name { font-size: 1.15rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .settings-hero-info .profile-email { font-size: 0.82rem; color: var(--text-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .settings-accordion-list { display: flex; flex-direction: column; } .settings-accordion-item { border-bottom: 1px solid var(--border-color); } .settings-accordion-item:last-child { border-bottom: none; } .settings-accordion-header { width: 100%; display: flex; align-items: center; gap: 12px; padding: 16px 4px; background: none; border: none; cursor: pointer; text-align: left; color: var(--text-color); font-size: 1rem; font-family: inherit; -webkit-tap-highlight-color: transparent; transition: background 0.15s ease; border-radius: 8px; } .settings-accordion-header:active { background: rgba(var(--primary-color-rgb), 0.07); } .sah-icon { font-size: 1.1rem; width: 24px; text-align: center; flex-shrink: 0; } .sah-title { flex: 1; font-weight: 500; } .sah-chevron { font-size: 1.2rem; color: var(--text-secondary-color); transition: transform 0.25s ease; display: inline-block; line-height: 1; } .settings-accordion-item.open .sah-chevron { transform: rotate(90deg); } .settings-accordion-body { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.25s ease; padding: 0 4px; } .settings-accordion-item.open .settings-accordion-body { max-height: 3000px; padding: 0 4px 16px; } /* Keep nested settings-group styled cleanly inside accordion */ .settings-accordion-body .settings-group { margin-bottom: 16px; padding-bottom: 12px; } .settings-accordion-body .settings-group:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } /* ===== END SETTINGS ACCORDION ===== */ .profile-name { font-size: 1.3rem; font-weight: 600; color: var(--text-color); } .profile-email { font-size: 0.85rem; color: var(--text-secondary-color); } .about-app-content p { font-size: 0.85rem; margin-bottom: 8px; } #mainContentWrapper { position: relative; overflow: hidden; flex-grow: 1; display: flex; flex-direction: column; width: 100%; } .app-section { width: 100%; display: none; opacity: 1; flex-direction: column; } .app-section.active { display: flex !important; opacity: 1; flex-grow: 1; animation: fadeInEffect 0.3s ease-out forwards; } @keyframes fadeInEffect { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes fadeOutEffect { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(10px); } } .app-section.fade-in-start { opacity: 0; animation: fadeInEffect 0.3s ease-out forwards; } .app-section.fade-out-start { animation: fadeOutEffect 0.3s ease-out forwards; } .qr-scanner-wrapper { position: relative; width: 100%; max-width: 320px; margin: 0 auto; } #qrScannerView { width: 100%; height: 320px; background-color: rgba(var(--primary-color-rgb), 0.05); border: 1.5px solid var(--border-color); border-radius: 16px; display: flex; align-items: center; justify-content: center; overflow: hidden; } #qrScannerView video { width: 100% !important; height: 100% !important; object-fit: cover; } #qrScannerView p { color: var(--text-secondary-color); opacity: 0.7; font-size: 0.85rem; } /* Corner bracket scan overlay */ .qr-corner-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 10; border-radius: 16px; overflow: hidden; } .qr-corner { position: absolute; width: 24px; height: 24px; border-color: var(--primary-color); border-style: solid; } .qr-corner.tl { top: 12px; left: 12px; border-width: 3px 0 0 3px; border-radius: 4px 0 0 0; } .qr-corner.tr { top: 12px; right: 12px; border-width: 3px 3px 0 0; border-radius: 0 4px 0 0; } .qr-corner.bl { bottom: 12px; left: 12px; border-width: 0 0 3px 3px; border-radius: 0 0 0 4px; } .qr-corner.br { bottom: 12px; right: 12px; border-width: 0 3px 3px 0; border-radius: 0 0 4px 0; } .qr-scan-line { position: absolute; left: 12px; right: 12px; height: 2px; background: linear-gradient(90deg, transparent, var(--primary-color), transparent); animation: qrScanLineMove 2s linear infinite; border-radius: 1px; } @keyframes qrScanLineMove { 0% { top: 12px; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: calc(100% - 12px); opacity: 0; } } /* Scanner action buttons row */ .qr-scanner-actions { display: flex; gap: 10px; justify-content: center; margin: 12px 0; flex-wrap: wrap; } .qr-scanner-actions button { font-size: 0.85rem; padding: 8px 14px; } #qrScanResult { font-size: 0.85rem; color: var(--text-color); word-break: break-all; margin-top: 4px; } /* UPI confirmation card */ .qr-confirm-card { background: var(--card-bg); border: 1.5px solid var(--border-color); border-radius: 12px; padding: 14px 16px; text-align: left; } .qr-confirm-title { font-weight: 600; color: var(--secondary-color); margin-bottom: 10px; font-size: 0.95rem; } .qr-confirm-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 0.85rem; gap: 10px; } .qr-confirm-row > span:first-child { color: var(--text-secondary-color); flex-shrink: 0; } .qr-confirm-row strong, .qr-confirm-row > span:last-child, .qr-confirm-row code { color: var(--text-color); word-break: break-all; text-align: right; } .qr-confirm-row code { font-size: 0.78rem; background: var(--input-bg, rgba(0, 0, 0, 0.05)); padding: 2px 6px; border-radius: 4px; } .qr-confirm-amount-input { width: 110px; text-align: right; padding: 5px 8px; font-size: 0.9rem; border: 1.5px solid var(--border-color); border-radius: 6px; background: var(--input-bg, var(--card-bg)); color: var(--text-color); } .qr-confirm-actions { display: flex; gap: 10px; margin-top: 12px; } .qr-confirm-actions button { flex: 1; font-size: 0.9rem; padding: 10px; } /* Non-UPI QR error message */ .qr-not-upi-msg { padding: 10px; text-align: center; } .qr-not-upi-msg p { color: var(--warning-orange); font-size: 0.85rem; margin-bottom: 6px; } .qr-not-upi-msg code { font-size: 0.75rem; word-break: break-all; display: block; opacity: 0.7; color: var(--text-secondary-color); text-align: left; background: var(--input-bg, rgba(0, 0, 0, 0.04)); padding: 6px 8px; border-radius: 6px; margin-top: 4px; } .mt-15 { margin-top: 15px; } .label-mt-10 { margin-top: 10px; } /* Sign Up Banner Ticker */ .sign-up-banner-ticker { background: linear-gradient(135deg, rgba(183, 106, 242, 0.15) 0%, rgba(108, 210, 189, 0.15) 100%); border: 1.5px solid var(--primary-color); border-radius: 16px; padding: 12px 16px; margin-top: 12px; margin-bottom: 15px; cursor: pointer; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 4px 15px rgba(183, 106, 242, 0.2); } .sign-up-banner-ticker:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(183, 106, 242, 0.3); background: linear-gradient(135deg, rgba(183, 106, 242, 0.2) 0%, rgba(108, 210, 189, 0.2) 100%); } .sign-up-banner-ticker:active { transform: translateY(0) scale(0.98); } .banner-content { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--text-color); } .banner-icon { font-size: 1.4rem; flex-shrink: 0; } .banner-text { flex: 1; font-size: 0.9rem; font-weight: 500; line-height: 1.4; } .banner-text strong { color: var(--primary-color); font-weight: 600; } .banner-arrow { font-size: 1.2rem; flex-shrink: 0; animation: slideArrow 1s ease-in-out infinite; } @keyframes slideArrow { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } } /* Sign Up Benefits Modal */ .sign-up-benefits-modal { max-width: 420px; } #signUpBenefitsModal { align-items: flex-start; padding-top: 40px; } #signUpBenefitsModal .modal-content { transform: translateY(30px); } #signUpBenefitsModal.active .modal-content { transform: translateY(0); } .sign-up-benefits-body { text-align: left; padding: 15px 0; } .benefits-intro { font-size: 0.95rem; color: var(--text-color); margin-bottom: 15px; text-align: center; font-weight: 500; } .features-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .features-list li { display: flex; align-items: flex-start; gap: 12px; padding: 10px; background: rgba(183, 106, 242, 0.05); border-radius: 12px; transition: background 0.3s ease; } .features-list li:hover { background: rgba(183, 106, 242, 0.1); } .feature-icon { font-size: 1.2rem; flex-shrink: 0; } .features-list strong { color: var(--primary-color); font-weight: 600; } .features-list li span:not(.feature-icon) { font-size: 0.9rem; line-height: 1.4; } .legal-links { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--border-color); font-size: 0.85rem; text-align: center; color: var(--text-secondary-color); } .legal-links p { margin: 0 0 8px 0; } .legal-link { color: var(--primary-color); text-decoration: none; font-weight: 600; transition: text-decoration 0.2s ease; } .legal-link:hover { text-decoration: underline; } .link-separator { margin: 0 6px; color: var(--text-secondary-color); } body.dark-mode .sign-up-banner-ticker { background: linear-gradient(135deg, rgba(183, 106, 242, 0.1) 0%, rgba(108, 210, 189, 0.1) 100%); box-shadow: 0 4px 15px rgba(183, 106, 242, 0.15); } body.dark-mode .sign-up-banner-ticker:hover { box-shadow: 0 6px 20px rgba(183, 106, 242, 0.25); } body.dark-mode .features-list li { background: rgba(183, 106, 242, 0.08); } body.dark-mode .features-list li:hover { background: rgba(183, 106, 242, 0.15); } /* Payment App Selection Modal */ /* ===== PWA UPDATE NOTIFICATION BANNER ===== */ .pwa-update-banner { position: fixed; top: 0; left: 0; right: 0; background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 0; z-index: 2000; /* Above all other elements */ max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); } .pwa-update-banner.show { max-height: 100px; } .update-banner-content { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; color: white; font-weight: 500; } .update-icon { font-size: 1.4rem; flex-shrink: 0; animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } .update-text { flex: 1; font-size: 0.9rem; line-height: 1.4; color: rgba(255, 255, 255, 0.95); } .update-text strong { color: white; font-weight: 600; } .update-action-btn { background: rgba(255, 255, 255, 0.25); color: white; border: 1px solid rgba(255, 255, 255, 0.5); padding: 8px 14px; border-radius: 8px; font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; flex-shrink: 0; font-family: 'Poppins', sans-serif; } .update-action-btn:hover { background: rgba(255, 255, 255, 0.35); border-color: rgba(255, 255, 255, 0.8); transform: scale(1.05); } .update-action-btn:active { transform: scale(0.98); } .update-action-btn:disabled { opacity: 0.7; cursor: not-allowed; } .update-close-btn { background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer; padding: 4px 8px; transition: transform 0.2s ease; flex-shrink: 0; } .update-close-btn:hover { transform: scale(1.2); } body.dark-mode .pwa-update-banner { background: linear-gradient(135deg, rgba(183, 106, 242, 0.95) 0%, rgba(108, 210, 189, 0.95) 100%); } /* Small screens */ @media (max-width: 480px) { .update-banner-content { flex-wrap: wrap; gap: 10px; padding: 10px 12px; } .update-text { font-size: 0.85rem; width: 100%; order: 1; } .update-action-btn { order: 2; flex: 1; min-width: 100px; } .update-close-btn { order: 3; } .pwa-update-banner.show { max-height: 140px; } } @media (max-width: 400px) { body { padding: 10px; padding-bottom: 80px; } .card { padding: 16px; border-radius: 20px; } input[type="text"], input[type="number"], input[type="email"], select, button { font-size: 13px; padding: 10px; } .fund-grid-container { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; } .fund-tablet { padding: 10px; } .fund-tablet-header strong { font-size: 0.9em; } .fund-tablet-amount { font-size: 1.1em; } .dashboard-gauges-container { gap: 6px; } .gauge-widget { min-width: 80px; height: 120px; /* Adjusted height for mobile too */ padding: 12px 5px; border-radius: 16px; } .gauge-widget .gauge-label { font-size: 10px; } .gauge-widget .gauge-percentage { font-size: 1em; } .gauge-widget canvas { max-height: 40px; } #currencySymbolTotalBalance, #totalBalance { font-size: 2.2rem; } .modal-content, .log-transaction-modal-content { border-radius: 24px; padding: 20px; } } /* ============ PIN/PATTERN LOCK STYLES ============ */ /* Lock Screen Overlay */ .lock-screen-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, var(--gradient-primary-start), var(--gradient-primary-end)); display: flex; align-items: center; justify-content: center; z-index: 9999; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .lock-screen-content { text-align: center; padding: 40px 20px; background: var(--card-bg); border-radius: 24px; max-width: 400px; width: 90%; box-shadow: var(--shadow-depth-1); animation: slideUp 0.3s ease-out; } .lock-screen-content h2 { color: var(--text-color); margin-bottom: 10px; font-size: 1.8rem; } .lock-screen-content p { color: var(--text-secondary-color); margin-bottom: 30px; font-size: 0.95rem; } /* High z-index for forget PIN and confirm disable modals to appear on top of lock screen */ #forgotPinModal { z-index: 10000 !important; display: flex !important; opacity: 0 !important; visibility: hidden !important; transition: opacity 0.3s ease, visibility 0.3s ease !important; } #forgotPinModal.active { opacity: 1 !important; visibility: visible !important; display: flex !important; } #confirmDisableLockModal { z-index: 10001 !important; display: flex !important; opacity: 0 !important; visibility: hidden !important; transition: opacity 0.3s ease, visibility 0.3s ease !important; } #confirmDisableLockModal.active { opacity: 1 !important; visibility: visible !important; display: flex !important; } /* PIN Input */ .pin-input-group { display: flex; justify-content: center; gap: 12px; margin: 20px 0 30px 0; } .pin-digit { width: 50px; height: 50px; border: 2px solid var(--border-color); border-radius: 12px; background: rgba(0, 0, 0, 0.02); font-size: 24px; font-weight: bold; display: flex; align-items: center; justify-content: center; color: var(--text-color); transition: all 0.2s ease; } .pin-digit.filled::before { content: '●'; font-size: 20px; color: var(--primary-color); font-weight: bold; } .pin-digit.filled { border-color: var(--primary-color); background: rgba(156, 102, 68, 0.08); color: var(--light-text-color); box-shadow: inset 0 0 8px rgba(156, 102, 68, 0.15); } .pin-digit.error { border-color: var(--danger-color); animation: shake 0.4s ease-in-out; } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } } /* PIN Keypad */ .pin-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 30px 0; } .pin-key { padding: 18px; border: none; border-radius: 12px; background: var(--body-bg); color: var(--text-color); font-size: 1.2rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; border: 1px solid var(--border-color); } .pin-key:active { transform: scale(0.95); background: var(--primary-color); color: var(--light-text-color); } .pin-key.delete { grid-column: 3; background: var(--danger-color); color: white; font-size: 1rem; } .pin-key.delete:active { background: var(--button-hover-danger); } .pin-key.zero { grid-column: 2; } /* Pattern Lock Canvas */ .pattern-container { display: flex; justify-content: center; margin: 30px 0; } #patternCanvas { border: 2px solid var(--border-color); border-radius: 15px; background: rgba(0, 0, 0, 0.02); cursor: crosshair; max-width: 300px; width: 100%; height: auto; aspect-ratio: 1; } /* Lock Setup Modal */ .lock-setup-section { background: var(--card-bg); border-radius: 16px; padding: 20px; margin: 20px 0; border: 1px solid var(--border-color); } .lock-toggle-group { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; } .lock-toggle-group label { font-weight: 600; color: var(--text-color); margin: 0; } .toggle-switch { position: relative; width: 60px; height: 34px; background: var(--border-color); border-radius: 17px; cursor: pointer; transition: all 0.3s ease; } .toggle-switch input { display: none; } .toggle-switch input:checked + .toggle-slider { background: var(--primary-color); } .toggle-switch input:checked + .toggle-slider:before { transform: translateX(26px); } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: var(--text-secondary-color); transition: 0.4s; border-radius: 34px; } .toggle-slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; transition: 0.4s; border-radius: 50%; } .lock-type-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 15px 0; } .lock-type-btn { padding: 12px; border: 2px solid var(--border-color); border-radius: 12px; background: transparent; color: var(--text-color); cursor: pointer; transition: all 0.3s ease; font-weight: 600; } .lock-type-btn.active { border-color: var(--primary-color); background: var(--primary-color); color: var(--light-text-color); } .lock-type-btn:hover { background: rgba(156, 102, 68, 0.1); } /* Forgot PIN Modal */ .forgot-pin-form { display: flex; flex-direction: column; gap: 15px; margin-top: 20px; } .forgot-pin-form input { padding: 12px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--body-bg); color: var(--text-color); font-size: 1rem; } .forgot-pin-form input::placeholder { color: var(--text-secondary-color); } .verification-message { padding: 12px; border-radius: 8px; text-align: center; margin: 15px 0; font-size: 0.9rem; } .verification-message.info { background: rgba(156, 102, 68, 0.1); color: var(--primary-color); border: 1px solid var(--primary-color); } .verification-message.success { background: rgba(74, 124, 89, 0.1); color: var(--secondary-color); border: 1px solid var(--secondary-color); } .verification-message.error { background: rgba(192, 87, 70, 0.1); color: var(--danger-color); border: 1px solid var(--danger-color); } /* Status Indicators */ .lock-status { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; background: rgba(74, 124, 89, 0.1); color: var(--secondary-color); font-size: 0.9rem; } .lock-status.disabled { background: rgba(99, 83, 75, 0.1); color: var(--text-secondary-color); } .lock-status-indicator { width: 8px; height: 8px; border-radius: 50%; background: var(--secondary-color); } .lock-status.disabled .lock-status-indicator { background: var(--text-secondary-color); } @keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .lock-loading { animation: pulse 1.5s ease-in-out infinite; } /* ===== ACCESSIBILITY: Reduced Motion ===== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }