/* SnapTax — MVP stylesheet. Dark theme, mobile-first, leaning on the same visual language as stepai-livebot (so Eugene's eye is at home). One file for the MVP. */ :root { --bg: #0b0d12; --bg-2: #131720; --bg-3: #1b2030; --surface: #181d28; --border: #2a3142; --text: #e6e8ec; --muted: #8c93a3; --accent: #6ba8d6; --accent-2: #82d496; --danger: #ff9b9b; --ok: #82d496; --warn: #f0c674; --fn: 'JetBrains Mono', 'Fira Mono', ui-monospace, SFMono-Regular, monospace; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* Dark base lives on ; is TRANSPARENT so the aurora SVG (a fixed-position div inside body) is actually visible. Before this fix, body's `background: var(--bg)` covered the z-index: -1 aurora and Eugene 2026-05-20 quite reasonably said "nothing changed". */ html { background: var(--bg); min-height: 100vh; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: transparent; color: var(--text); -webkit-font-smoothing: antialiased; position: relative; min-height: 100vh; overflow-x: hidden; } /* Aurora ribbons removed 2026-06-16 — Eugene asked for a clean, professional, crystal-clear look. SVGs still in HTML but hidden; replaced with soft gradient "wallpaper" blobs that give the frosted glass cards (.card, .stat-card) something to refract — iOS/macOS style — without the chaos of animated aurora ribbons. Static, no animation cost, clean on mobile. */ .aurora-bg { display: none !important; } html { background: /* Soft blue glow top-left — gives frost a cool refraction */ radial-gradient(ellipse 70% 50% at 15% 0%, rgba(107,168,214,0.18) 0%, transparent 55%), /* Soft green glow bottom-right — warmth contrast */ radial-gradient(ellipse 60% 50% at 90% 95%, rgba(130,212,150,0.12) 0%, transparent 55%), /* Subtle warm accent mid-right for depth */ radial-gradient(ellipse 35% 30% at 95% 35%, rgba(240,198,116,0.06) 0%, transparent 65%), var(--bg); background-attachment: fixed; } /* ─── Auth pages ──────────────────────────────────────────── */ .auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; } .auth-card { width: 100%; max-width: 380px; background: rgba(24, 29, 40, 0.72); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); border: 1px solid rgba(255,255,255,0.10); border-radius: 16px; padding: 28px 24px 24px; box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 -1px 0 rgba(0,0,0,0.45) inset, 0 32px 64px rgba(0,0,0,0.65), 0 2px 12px rgba(0,0,0,0.40); } .auth-brand { text-align: center; margin-bottom: 22px; } .auth-title { font-size: 26px; font-weight: 800; margin-top: 10px; letter-spacing: -0.4px; } /* Bank-import verification status badges + row tints. */ .bank-stat { display: inline-block; margin-bottom: 4px; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; } .bank-stat-ok { background: rgba(155,224,173,0.18); color: var(--ok); } .bank-stat-income { background: rgba(130,192,228,0.18); color: var(--accent); } .bank-stat-new { background: rgba(240,198,116,0.18); color: var(--warn); } .admin-table tr.bank-verified td { background: rgba(155,224,173,0.05); } .admin-table tr.bank-income td { background: rgba(130,192,228,0.05); } /* Category advisor — describe-it search + suggestion chips. */ .cat-advisor { margin: -4px 0 10px 0; } .cat-advisor-row { display: flex; gap: 8px; align-items: center; } .cat-advisor-row input { flex: 1; } .cat-suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .cat-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; cursor: pointer; font-size: 12px; border: 1px solid var(--border); background: var(--bg-2); color: var(--text); } .cat-chip:hover { border-color: var(--accent); } .cat-chip.high { border-color: rgba(155,224,173,0.5); } .cat-chip-conf { font-size: 9px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); } .cat-chip-new { color: var(--accent); border-style: dashed; } /* Profile "tax to set aside" estimate box. */ .tax-estimate { margin-top: 14px; padding: 12px 14px; background: var(--bg-3); border: 1px solid var(--border); border-radius: 10px; } .tax-est-row { display: flex; justify-content: space-between; align-items: baseline; padding: 3px 0; } .tax-est-label { font-size: 12px; color: var(--muted); } .tax-est-val { font-family: var(--fn); font-weight: 700; font-variant-numeric: tabular-nums; } .tax-est-val.accent { color: var(--accent); font-size: 16px; } /* Password show/hide toggle — sits inside the input on the right. */ .pw-wrap { position: relative; display: flex; align-items: center; } .pw-wrap input { width: 100%; padding-right: 58px; } .pw-toggle { position: absolute; right: 8px; background: transparent; border: none; cursor: pointer; color: var(--accent); font-size: 12px; font-weight: 700; padding: 4px 6px; border-radius: 6px; letter-spacing: 0.3px; } .pw-toggle:hover { color: var(--text); background: rgba(255,255,255,0.06); } .auth-title .accent { color: var(--accent); } .auth-sub { font-size: 11px; color: var(--muted); letter-spacing: 2.4px; margin-top: 4px; font-weight: 600; } /* ─── Animated logo (login / register pages) ───────────── Three-stage entrance: 0.00s: card scales up + fades in (cubic-bezier overshoot bounce) 0.30s: green fold corner pops with overshoot from the inside corner 0.50s: Rand "R" strokes draw themselves via stroke-dashoffset 1.30s: currency horizontal bar fades in 1.50s+: gentle breathing scale (3.5% range over 4s, infinite) Reduced-motion users get the static logo (no animations). */ .animated-logo { width: 84px; height: 84px; display: inline-block; filter: drop-shadow(0 16px 28px rgba(0,0,0,0.45)); animation: logo-entrance 0.6s cubic-bezier(.34,1.56,.64,1) both, logo-breath 4s ease-in-out 1.5s infinite; transform-origin: center; } .animated-logo .al-fold { transform-origin: 168px 88px; animation: al-fold-pop 0.55s cubic-bezier(.34,1.56,.64,1) 0.3s both; } .animated-logo .al-stroke { stroke-dasharray: 220; stroke-dashoffset: 220; animation: al-draw-r 1.0s cubic-bezier(.55,.08,.42,1.05) 0.5s forwards; } .animated-logo .al-stroke.s2 { animation-delay: 0.7s; } .animated-logo .al-stroke.s3 { animation-delay: 1.0s; } .animated-logo .al-bar { opacity: 0; transform-origin: left center; transform: scaleX(0); animation: al-bar-slide 0.4s cubic-bezier(.34,1.56,.64,1) 1.3s forwards; } @keyframes logo-entrance { from { opacity: 0; transform: translateY(14px) scale(0.85); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes logo-breath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } } @keyframes al-fold-pop { 0% { opacity: 0; transform: scale(0.2); } 65% { opacity: 1; transform: scale(1.15); } 100% { opacity: 1; transform: scale(1); } } @keyframes al-draw-r { to { stroke-dashoffset: 0; } } @keyframes al-bar-slide { to { opacity: 1; transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { .animated-logo, .animated-logo .al-fold, .animated-logo .al-stroke, .animated-logo .al-bar { animation: none !important; } .animated-logo .al-stroke { stroke-dashoffset: 0; } .animated-logo .al-bar { opacity: 1; transform: none; } } .auth-form { display: flex; flex-direction: column; gap: 14px; } /* `.auth-form` is `display: flex` (class beats UA default), so the [hidden] attribute alone gets ignored. This rule is the same trap we hit with .modal-backdrop — without it, all three login-page forms stack on top of each other. */ .auth-form[hidden] { display: none; } /* Engraved "Forgot password?" link — sits directly under the Sign in button, feels carved into the card rather than a separate CTA. Subtle, low-contrast at rest; lifts on hover. */ .auth-forgot-link { display: block; text-align: center; margin-top: 4px; padding: 8px 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.4px; color: var(--muted); text-decoration: none; border-radius: 8px; background: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(255,255,255,0.02)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), inset 0 -1px 0 rgba(0,0,0,0.35); transition: color .12s, background .12s; } .auth-forgot-link:hover { color: var(--accent); background: linear-gradient(180deg, rgba(0,0,0,0.28), rgba(107,168,214,0.06)); } .auth-label { display: flex; flex-direction: column; gap: 5px; } .auth-label > span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1.4px; } .auth-label input, .auth-label select { background: rgba(11, 13, 18, 0.55); border: 1px solid rgba(255,255,255,0.07); border-radius: 8px; padding: 10px 12px; color: var(--text); font-size: 14px; box-shadow: 0 1px 2px rgba(0,0,0,0.45) inset, 0 1px 0 rgba(255,255,255,0.03); transition: border-color .15s, box-shadow .15s; } .auth-label input:focus, .auth-label select:focus { outline: none; border-color: var(--accent); box-shadow: 0 1px 2px rgba(0,0,0,0.5) inset, 0 0 0 3px rgba(107,168,214,0.18); } /* Required T&C consent tick box on the signup form. */ .auth-check { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--muted); line-height: 1.4; cursor: pointer; margin-top: 2px; } .auth-check input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; accent-color: var(--accent-2, #9be0ad); cursor: pointer; } .auth-check a { color: var(--accent, #82c0e4); } .auth-btn { margin-top: 4px; background: linear-gradient(180deg, #82c0e4, #4a86b3); color: #0b0d12; border: 1px solid rgba(255,255,255,0.18); border-radius: 10px; padding: 12px 14px; font-weight: 700; letter-spacing: 0.5px; cursor: pointer; text-shadow: 0 1px 1px rgba(0,0,0,0.15); box-shadow: 0 1px 0 rgba(255,255,255,0.45) inset, 0 -1px 0 rgba(0,0,0,0.30) inset, 0 8px 18px rgba(74,134,179,0.50), 0 2px 4px rgba(0,0,0,0.35); transition: transform .08s, filter .12s, box-shadow .12s; } .auth-btn:hover { filter: brightness(1.08); } .auth-btn:active { transform: translateY(1px); background: linear-gradient(180deg, #4a86b3, #6ba8d6); box-shadow: 0 2px 4px rgba(0,0,0,0.55) inset; } .auth-feedback { font-size: 12px; padding: 7px 10px; border-radius: 6px; } .auth-feedback.err { background: rgba(217,118,118,.14); color: var(--danger); border: 1px solid rgba(217,118,118,.4); } .auth-feedback.ok { background: rgba(120,210,140,.14); color: var(--ok); border: 1px solid rgba(120,210,140,.4); } .auth-link-row { margin-top: 18px; text-align: center; font-size: 12px; color: var(--muted); } .auth-link-row a { color: var(--accent); text-decoration: none; margin-left: 6px; } .auth-link-row a:hover { text-decoration: underline; } /* ─── App layout ──────────────────────────────────────────── */ /* App shell = header on top, sidebar + main below. The sidebar is a fixed-width column on desktop; on mobile it slides in/out via the burger button. */ .app { display: flex; flex-direction: column; min-height: 100vh; } .app-head { display: flex; align-items: center; gap: 14px; padding: 12px 18px; background: rgba(19, 23, 32, 0.78); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); border-bottom: 1px solid rgba(255,255,255,0.06); position: sticky; top: 0; z-index: 30; box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 4px 12px rgba(0,0,0,0.30); } .app-burger { display: none; background: transparent; border: none; color: var(--text); font-size: 22px; cursor: pointer; padding: 0 4px; } .app-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: 0.4px; color: var(--text); text-decoration: none; } .app-brand:hover { color: var(--text); } .app-logo { width: 28px; height: 28px; display: block; border-radius: 6px; transition: transform .25s cubic-bezier(.34,1.56,.64,1), filter .25s; } .app-brand:hover .app-logo { /* Subtle 4° tilt + brightness lift on hover — the dog-eared fold seems to "catch the light". Keeps the brand alive without being distracting. */ transform: rotate(-4deg) scale(1.08); filter: drop-shadow(0 0 8px rgba(130, 212, 150, 0.45)); } .app-wordmark { font-size: 16px; } .app-wordmark .accent { color: var(--accent); } /* Environment badge — LIVE (deployed) vs LOCAL (dev/sandbox). */ .env-badge { margin-left: 10px; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; vertical-align: middle; } .env-badge.env-live { background: rgba(155,224,173,0.18); color: var(--ok); border: 1px solid rgba(155,224,173,0.4); } .env-badge.env-local { background: rgba(240,198,116,0.18); color: var(--warn); border: 1px solid rgba(240,198,116,0.45); } /* Push profile pill to the right side */ .user-menu { margin-left: auto; position: relative; } /* ── Sidebar ── */ .app-shell { flex: 1; display: grid; grid-template-columns: 220px 1fr; min-height: 0; } .app-side { background: rgba(19, 23, 32, 0.65); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); border-right: 1px solid rgba(255,255,255,0.06); padding: 16px 10px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 57px; /* below sticky header */ align-self: start; height: calc(100vh - 57px); overflow-y: auto; box-shadow: inset -1px 0 0 rgba(0,0,0,0.4); } .nav-item { display: flex; align-items: center; gap: 12px; background: transparent; border: none; color: var(--muted); padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 13.5px; font-weight: 600; letter-spacing: 0.2px; text-align: left; font-family: inherit; transition: background .12s, color .12s; } /* The .nav-item display rule above beats the UA [hidden]{display:none}, so the hidden Admin nav item stayed visible to non-admins. Restore it — same hidden-attribute trap handled elsewhere in this file. */ .nav-item[hidden] { display: none !important; } .nav-item:hover { background: var(--bg-3); color: var(--text); } .nav-item.active { background: linear-gradient(90deg, rgba(107,168,214,0.14), transparent); color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); } .nav-icon { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; color: currentColor; } .nav-icon .ic-svg { display: block; } /* SARS eFiling external shortcut — warm accent so it visually pops as the "send it to government" action, distinct from the in-app tabs. */ .nav-sars-link { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--warn); background: rgba(240,198,116,0.06); border: 1px solid rgba(240,198,116,0.20); margin-top: 14px; } .nav-sars-link:hover { background: rgba(240,198,116,0.12); color: var(--warn); border-color: rgba(240,198,116,0.35); } .nav-ext { font-size: 11px; opacity: 0.75; margin-left: 2px; } /* Generic icon helper — inline SVG that inherits text color + spacing. Used in buttons (.btn .ic), dashboard CTAs, etc. */ .ic { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; color: currentColor; } .btn .ic, .btn .ic-svg { vertical-align: -3px; margin-right: 4px; } .action-icon.ic { width: 26px; height: 26px; } .action-icon .ic-svg { color: var(--accent); } .stat-eye .ic-svg { color: currentColor; } .nav-label { flex: 1; } .nav-spacer { flex: 1; } .nav-foot { font-size: 10px; padding: 8px 12px; line-height: 1.4; } /* Government-info disclaimer (Play Store Misleading Claims policy compliance): permanent, always-visible notice that SnapTax is independent and provides the official SARS source. */ .nav-gov-notice { margin-top: 10px; padding: 8px 10px; border: 1px solid rgba(240,198,116,0.30); border-radius: 8px; background: rgba(240,198,116,0.05); font-size: 10px; line-height: 1.4; color: var(--muted); } .nav-gov-notice a { color: var(--warn); text-decoration: none; } .nav-gov-notice a:hover { text-decoration: underline; } /* Top-of-content independence banner — always visible to users and to Play Store reviewers, regardless of screen size. */ .gov-banner { display: flex; align-items: center; gap: 8px; margin: -6px 0 16px; padding: 8px 12px; background: rgba(240,198,116,0.08); border: 1px solid rgba(240,198,116,0.30); border-radius: 8px; font-size: 12px; line-height: 1.4; color: var(--text); } .gov-banner a { color: var(--warn); text-decoration: none; font-weight: 600; } .gov-banner a:hover { text-decoration: underline; } /* Email-verified indicator in the admin user table. Distinct from approval status — green = OTP entered, amber = awaiting OTP. */ .otp-pill { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; vertical-align: middle; } .otp-pill.otp-verified { background: rgba(46, 160, 67, 0.16); color: #4ade80; border: 1px solid rgba(46, 160, 67, 0.35); } .otp-pill.otp-unverified { background: rgba(240, 198, 116, 0.14); color: var(--warn); border: 1px solid rgba(240, 198, 116, 0.40); } /* Main content area */ .app-main { padding: 28px 32px 80px; width: 100%; max-width: 1100px; margin: 0 auto; /* Grid items default to min-width:auto, so a wide child (e.g. the bank review table) would force the whole page wider than the viewport and push controls — like the review close (×) — off-screen on mobile. min-width:0 lets the column shrink so the table's own overflow-x:auto scrolls it instead. */ min-width: 0; } .tab-panel { display: none; } .tab-panel.active { display: block; } /* Mobile: hide sidebar by default, show burger; sidebar slides over the main content when open. */ @media (max-width: 760px) { .app-burger { display: inline-block; } .app-shell { grid-template-columns: 1fr; } .app-side { position: fixed; top: 57px; left: 0; width: 240px; transform: translateX(-100%); transition: transform .18s ease; z-index: 40; box-shadow: 16px 0 30px rgba(0,0,0,0.5); } .app-side.open { transform: translateX(0); } .app-main { padding: 18px 14px 80px; } /* Tap-to-close backdrop behind the open menu (under the sidebar, over content). */ body.nav-open .sidenav-backdrop { display: block; position: fixed; inset: 57px 0 0 0; background: rgba(0,0,0,0.5); z-index: 39; } /* ── Mobile overflow guards (Eugene 2026-06-17) ── Hard-clamp anything inside a card / table / modal that has a fixed pixel width — fixed-width inputs (like the Edit-in-Excel grid's 120px date fields) were forcing the layout wider than the viewport on phones, pushing close-× buttons off-screen. Constrain to 100% of the parent and let the table's own overflow-x:auto scroll instead. */ html, body { max-width: 100vw; overflow-x: hidden; } .card input, .card select, .card textarea, .card img:not(.user-avatar):not(.doc-thumb img), .tut-card input, .tut-card select, .tut-card textarea, .admin-table input, .admin-table select { max-width: 100%; box-sizing: border-box; } /* Make close-× buttons easier to tap + a touch larger on mobile. */ .modal-close, .tut-close, .user-dd-close, .tab-close { padding: 6px 10px; font-size: 24px; } } .sidenav-backdrop { display: none; } /* ─── Profile pill (top-right) ────────────────────────────── */ .user-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-3); border: 1px solid var(--border); border-radius: 999px; padding: 5px 10px 5px 5px; color: var(--text); font-size: 13px; cursor: pointer; } .user-pill:hover { border-color: var(--accent); } .user-avatar { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #0b0d12; font-weight: 700; font-size: 12px; text-transform: uppercase; background-size: cover; background-position: center; } .user-avatar.has-image { color: transparent; } .user-pill-name { font-weight: 600; /* Cap width + ellipsis so long names never blow up the header bar. */ max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-pill-caret { color: var(--muted); font-size: 10px; } /* The display:flex below beats the UA [hidden]{display:none}, so the dropdown couldn't be hidden (stayed open / wouldn't close). Restore the attribute. */ .user-dropdown[hidden] { display: none !important; } .user-dropdown { position: absolute; top: calc(100% + 8px); right: 0; width: min(380px, calc(100vw - 24px)); max-height: calc(100vh - 80px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px; box-shadow: 0 12px 30px rgba(0,0,0,.55); z-index: 50; } .user-dd-header { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .user-dd-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: #0b0d12; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; text-transform: uppercase; background-size: cover; background-position: center; } .user-dd-avatar.has-image { color: transparent; } .user-dd-name { font-weight: 700; font-size: 14px; } .user-dd-email { font-size: 11px; color: var(--muted); } .user-dd-grid { display: grid; grid-template-columns: 90px 1fr; gap: 4px 10px; margin: 12px 0 14px; font-size: 12px; } .user-dd-grid dt { color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px; font-size: 10px; align-self: center; } .user-dd-grid dd { margin: 0; font-family: var(--fn); } .user-dd-tax { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: rgba(45, 212, 191, 0.10); border: 1px solid rgba(45, 212, 191, 0.25); } .user-dd-tax-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .user-dd-tax-label { color: var(--muted); font-size: 11px; } .user-dd-tax-val { font-family: var(--fn); font-weight: 600; font-size: 15px; color: var(--accent, #2dd4bf); } .user-dd-tax-sub { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.35; } .user-dd-actions { display: flex; gap: 8px; justify-content: flex-end; flex: 0 0 auto; border-top: 1px solid var(--border); padding-top: 10px; } /* Profile-in-dropdown (Eugene 2026-05-21: full editable profile lives in the top-right menu, no separate page). Scrolls internally; compact spacing. */ .user-dd-header { flex: 0 0 auto; } /* min-height:0 is REQUIRED for a flex child to scroll — without it the body refuses to shrink and the content overflows the panel unreachably. */ .user-dd-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; margin: 12px 0; padding-right: 4px; } .user-dd-close { margin-left: auto; align-self: flex-start; background: none; border: none; color: var(--muted); font-size: 24px; line-height: 1; cursor: pointer; padding: 0 2px; } .user-dd-close:hover { color: var(--text); } /* Mobile: render the profile as a near-fullscreen sheet so it always fits, scrolls, and has a reachable close button. */ @media (max-width: 560px) { .user-dropdown { position: fixed; top: 8px; left: 8px; right: 8px; width: auto; max-height: calc(100vh - 16px); } } .user-dd-body .prof-form { gap: 12px; } .user-dd-body .form-label span { font-size: 11px; } .user-dd-body .upload-grid { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; } .user-dd-section-label { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin: 14px 0 6px; } .user-dd-invite { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; } .user-dd-invite > summary { cursor: pointer; font-size: 12px; font-weight: 600; } .user-dd-invite .share-grid { display: block; margin-top: 10px; } .user-dd-invite .share-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .user-dd-invite .share-qr { text-align: center; margin-top: 10px; } .user-dd-invite #share-qr-canvas { display: block; } .user-dd-invite #share-qr-canvas img, .user-dd-invite #share-qr-canvas canvas { width: 184px !important; height: 184px !important; display: block !important; margin: 0 auto !important; } .user-dd-invite .share-btn { width: 100%; margin-top: 12px; } /* ─── Cards & forms ──────────────────────────────────────── */ /* 3D glassmorphism: semi-transparent dark surface + backdrop blur lets the aurora bleed through; layered shadows (outer drop + top highlight inset + bottom shade inset) give the card real depth instead of sitting flat on the page. Browsers that don't support backdrop-filter fall back to the solid var(--surface) colour gracefully. */ .card { background: rgba(24, 29, 40, 0.72); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 14px; padding: 22px 24px; box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, /* top highlight */ 0 -1px 0 rgba(0,0,0,0.40) inset, /* bottom shade */ 0 24px 48px rgba(0,0,0,0.55), /* outer drop */ 0 2px 8px rgba(0,0,0,0.30); /* near depth */ } .card h2 { margin: 0 0 12px; font-size: 18px; letter-spacing: 0.3px; } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; } .card-head h2 { margin: 0 !important; } .card .muted { font-size: 13px; color: var(--muted); margin: 4px 0 18px; line-height: 1.55; } .form { display: flex; flex-direction: column; gap: 14px; } .form-label { display: flex; flex-direction: column; gap: 5px; } .form-label > span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1.2px; } .form-label input, .form-label select, .form-label textarea { background: rgba(11, 13, 18, 0.55); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 10px 12px; color: var(--text); font-size: 14px; font-family: inherit; /* Pressed-in look: a subtle inset shadow on the top edge makes the field feel recessed into the card surface. */ box-shadow: 0 1px 2px rgba(0,0,0,0.45) inset, 0 1px 0 rgba(255,255,255,0.03); transition: border-color .15s, box-shadow .15s; } .form-label input:focus, .form-label select:focus, .form-label textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 1px 2px rgba(0,0,0,0.5) inset, 0 0 0 3px rgba(107,168,214,0.18); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 540px) { .form-row { grid-template-columns: 1fr; } } .form-feedback { font-size: 13px; padding: 8px 12px; border-radius: 6px; } .form-feedback.err { background: rgba(217,118,118,.14); color: var(--danger); border: 1px solid rgba(217,118,118,.4); } .form-feedback.ok { background: rgba(120,210,140,.14); color: var(--ok); border: 1px solid rgba(120,210,140,.4); } .form-toggle { display: flex; align-items: center; gap: 10px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; font-size: 13px; } .form-toggle input { width: 18px; height: 18px; accent-color: var(--accent); } /* 3D buttons: every button gets a top-highlight + bottom-shade inset pair (cheap bevel) plus an outer drop shadow that compresses when the button is :active — visceral "press" feedback. */ .btn { background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.18)); color: var(--text); border: 1px solid rgba(255,255,255,0.07); border-radius: 9px; padding: 9px 16px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 -1px 0 rgba(0,0,0,0.35) inset, 0 4px 10px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.25); transition: transform .08s, box-shadow .12s, filter .12s, border-color .12s; } .btn:hover { border-color: rgba(107,168,214,0.4); filter: brightness(1.1); } .btn:active { transform: translateY(1px); box-shadow: 0 1px 3px rgba(0,0,0,0.55) inset, 0 0 0 rgba(0,0,0,0); } .btn-primary { background: linear-gradient(180deg, #82c0e4, #4a86b3); color: #0b0d12; border: 1px solid rgba(255,255,255,0.18); font-weight: 700; text-shadow: 0 1px 1px rgba(0,0,0,0.15); box-shadow: 0 1px 0 rgba(255,255,255,0.45) inset, 0 -1px 0 rgba(0,0,0,0.30) inset, 0 6px 16px rgba(74,134,179,0.45), 0 2px 4px rgba(0,0,0,0.30); } .btn-primary:hover { filter: brightness(1.08); } .btn-primary:active { background: linear-gradient(180deg, #4a86b3, #6ba8d6); box-shadow: 0 1px 3px rgba(0,0,0,0.45) inset, 0 0 0 rgba(0,0,0,0); } .btn-ghost { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.10)); color: var(--muted); border: 1px solid rgba(255,255,255,0.06); } .btn-ghost:hover { color: var(--text); border-color: rgba(107,168,214,0.4); } .btn-danger { background: linear-gradient(180deg, rgba(217,118,118,0.30), rgba(217,118,118,0.10)); color: var(--danger); border: 1px solid rgba(217,118,118,.45); } .btn-tiny { padding: 3px 9px; font-size: 12px; box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 -1px 0 rgba(0,0,0,0.30) inset, 0 2px 6px rgba(0,0,0,0.30); } /* ─── Dashboard ────────────────────────────────────────── */ .dash-welcome { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 22px; } .dash-greet { font-size: 24px; font-weight: 700; letter-spacing: 0.2px; } .dash-greet span { color: var(--accent); } .dash-sub { font-size: 13px; margin-top: 4px; } .dash-cta { display: flex; gap: 10px; } .dash-h { margin: 26px 0 12px; font-size: 12px; text-transform: uppercase; letter-spacing: 1.6px; color: var(--muted); } .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 8px; } @media (max-width: 720px) { .stat-grid { grid-template-columns: 1fr; } } .stat-card { background: rgba(24, 29, 40, 0.70); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 -1px 0 rgba(0,0,0,0.35) inset, 0 16px 32px rgba(0,0,0,0.45); } .stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--muted); } .stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .stat-row > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .stat-key { font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--muted); } .stat-val { font-family: var(--fn); font-size: 16px; font-weight: 700; } .stat-val.ok { color: var(--ok); } .stat-val.accent { color: var(--accent); } .stat-val.muted { color: var(--muted); font-weight: 500; } .action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .action-card { background: rgba(24, 29, 40, 0.72); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; font-family: inherit; text-align: left; color: var(--text); box-shadow: 0 1px 0 rgba(255,255,255,0.07) inset, 0 -1px 0 rgba(0,0,0,0.30) inset, 0 12px 24px rgba(0,0,0,0.40), 0 2px 6px rgba(0,0,0,0.25); transition: transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .15s, border-color .15s; } .action-card:hover { border-color: rgba(107,168,214,0.4); transform: translateY(-3px) scale(1.01); box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 -1px 0 rgba(0,0,0,0.30) inset, 0 20px 36px rgba(0,0,0,0.55), 0 4px 8px rgba(107,168,214,0.20); } .action-card:active { transform: translateY(0); } .action-icon { font-size: 26px; } .action-title { font-size: 14px; font-weight: 700; letter-spacing: 0.2px; } .action-sub { font-size: 11.5px; color: var(--muted); line-height: 1.4; } /* ─── Entries list ────────────────────────────────────────── */ .filter-row { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; font-size: 12px; color: var(--muted); } .filter-row input, .filter-row select { background: var(--bg-2); border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; color: var(--text); font-size: 12px; } .entries-list { display: flex; flex-direction: column; gap: 8px; } .empty { padding: 28px 14px; text-align: center; color: var(--muted); font-size: 13px; } .empty.err { color: var(--danger); } .entry-row { display: grid; grid-template-columns: 88px 1fr auto auto auto; align-items: center; gap: 10px; padding: 9px 12px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; } .entry-row.kind-income { border-left: 3px solid var(--ok); } .entry-row.kind-certificate { border-left: 3px solid var(--warn); } .entry-row.kind-expense, .entry-row.kind-deduction, .entry-row.kind-asset { border-left: 3px solid var(--accent); } .entry-date { font-family: var(--fn); font-size: 12px; color: var(--muted); } .entry-main { min-width: 0; } .entry-vendor { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; } .entry-cat { font-size: 11px; color: var(--muted); letter-spacing: 0.4px; } .entry-notes { font-size: 11px; color: var(--muted); margin-top: 2px; font-style: italic; } .entry-ref { font-size: 10px; font-weight: 500; color: var(--muted); font-family: ui-monospace, "JetBrains Mono", monospace; } .entry-amount { font-family: var(--fn); font-size: 13px; font-weight: 700; white-space: nowrap; } .entry-doc { color: var(--accent); text-decoration: none; font-size: 16px; } @media (max-width: 540px) { .entry-row { grid-template-columns: 70px 1fr auto auto; } .entry-row .entry-doc { display: none; } } /* ─── OCR auto-extract row ────────────────────────────────── */ .ocr-row { display: flex; align-items: center; gap: 10px; margin: -4px 0 4px; flex-wrap: wrap; } /* [hidden] would otherwise lose to the class selector — same trap as .modal-backdrop. Without this rule the Auto-extract button stays visible even when the server reports ocr_enabled: false. */ .ocr-row[hidden] { display: none; } .ocr-row .btn { padding: 8px 14px; font-size: 13px; } .ocr-row .btn[disabled] { opacity: 0.55; cursor: progress; } .ocr-status { font-size: 12px; } .ocr-status.err { color: var(--danger); } .ocr-status.ok { color: var(--ok); } .ocr-chip { display: inline-block; padding: 1px 7px; margin-left: 6px; font-size: 10px; font-weight: 600; border-radius: 999px; background: var(--bg-3); color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; } .ocr-chip.high { background: rgba(130, 212, 150, 0.15); color: var(--ok); } .ocr-chip.medium { background: rgba(240, 198, 116, 0.15); color: var(--warn); } .ocr-chip.low { background: rgba(255, 155, 155, 0.15); color: var(--danger); } /* ─── Modal (Edit profile / Edit entry) ───────────────────── */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: flex-start; justify-content: center; z-index: 100; padding: 30px 20px; overflow-y: auto; } /* See note on .ocr-row[hidden] above — same hidden-attribute trap. */ .modal-backdrop[hidden] { display: none; } .modal { background: rgba(24, 29, 40, 0.85); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); border: 1px solid rgba(255,255,255,0.10); border-radius: 16px; width: 100%; max-width: 540px; padding: 22px; box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 -1px 0 rgba(0,0,0,0.40) inset, 0 32px 64px rgba(0,0,0,0.75), 0 4px 16px rgba(0,0,0,0.50); } .modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .modal-head h3 { margin: 0; font-size: 16px; } .modal-close { background: transparent; border: none; color: var(--muted); font-size: 22px; cursor: pointer; line-height: 1; padding: 0 6px; } .modal-close:hover { color: var(--text); } /* Review panels (bank import, logbook upload) aren't modals — they're long in-page tables. A sticky header keeps the close (×) reachable on mobile without scrolling past every row. Sits just under the app header. */ .review-head { position: sticky; top: 57px; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; padding: 10px 2px; background: var(--surface); border-bottom: 1px solid var(--border); } .review-head h3 { margin: 0; font-size: 15px; } /* Close (✕) injected at the top of every non-dashboard tab panel — gives mobile users an obvious way back to the dashboard (no sidebar there). */ .tab-close-row { display: flex; justify-content: flex-end; margin-bottom: 8px; } .tab-close { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: var(--bg-3); border: 1px solid var(--border); border-radius: 50%; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; } .tab-close:hover { color: var(--text); border-color: var(--accent); } /* ─── Billing: trial banner + subscription plans ───────────── */ .trial-banner { display: flex; align-items: center; gap: 10px; padding: 8px 18px; background: linear-gradient(90deg, rgba(107,168,214,0.18), rgba(107,168,214,0.04)); border-bottom: 1px solid rgba(107,168,214,0.4); color: var(--text); font-size: 13px; position: sticky; top: 57px; z-index: 28; } .trial-banner[hidden] { display: none; } .trial-banner .btn-tiny { margin-left: auto; } .trial-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; } .trial-banner.is-ended { background: linear-gradient(90deg, rgba(240,198,116,0.18), rgba(240,198,116,0.04)); border-bottom-color: rgba(240,198,116,0.4); } .trial-banner.is-ended .trial-dot { background: var(--warn); } .billing-current { margin-bottom: 6px; font-size: 13px; } .billing-current.ok { color: var(--ok); } .billing-current.warn { color: var(--warn); } .plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 16px 0; } .plan-card { position: relative; background: var(--bg-2); border: 1px solid var(--border); border-radius: 14px; padding: 20px 18px; display: flex; flex-direction: column; gap: 8px; } .plan-card.plan-best { border-color: var(--accent); } .plan-badge { position: absolute; top: -10px; right: 14px; background: var(--accent); color: #0b0d12; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; padding: 3px 8px; border-radius: 999px; text-transform: uppercase; } .plan-name { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); } .plan-price { font-family: var(--fn); font-size: 30px; font-weight: 700; } .plan-price span { font-size: 14px; font-weight: 400; color: var(--muted); } .plan-card .btn { margin-top: 6px; } .crypto-pay[hidden] { display: none; } .billing-terms { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; } .billing-terms > summary { cursor: pointer; font-size: 13px; color: var(--muted); } .billing-terms > summary:hover { color: var(--text); } .billing-terms p { margin: 8px 0; line-height: 1.5; } .nav-legal { display: block; margin-top: 8px; color: var(--muted); font-size: 11px; text-decoration: none; } .nav-legal:hover { color: var(--accent); } .modal-sub { margin: 22px 0 6px; font-size: 13px; letter-spacing: 0.3px; padding-top: 18px; border-top: 1px solid var(--border); } /* ─── Profile modal: section-grouped, breathing room ───── */ .prof-form { gap: 24px; } .prof-section { display: flex; flex-direction: column; gap: 14px; background: rgba(11, 13, 18, 0.35); border: 1px solid rgba(255,255,255,0.05); border-radius: 12px; padding: 18px 16px 16px; box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset; } .prof-section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px; color: var(--accent); margin-bottom: 4px; } .prof-hint { margin: 4px 0 0; line-height: 1.55; } .prof-hint strong { color: var(--text); } /* ─── Profile upload tiles ─────────────────────────────── */ .upload-grid { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; } .upload-tile { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 14px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; } .upload-thumb { width: 48px; height: 48px; border-radius: 8px; background: var(--bg-3); display: flex; align-items: center; justify-content: center; font-size: 22px; background-size: cover; background-position: center; } .upload-info { min-width: 0; } .upload-title { font-size: 13px; font-weight: 600; } .upload-status { margin-top: 2px; } .upload-status.ok { color: var(--ok); } .upload-tile label.btn { cursor: pointer; } /* ─── Admin nav + table + impersonation banner ──────────── */ .nav-admin { margin-top: 12px; border-top: 1px dashed var(--border); padding-top: 16px !important; } .nav-admin .nav-icon { filter: drop-shadow(0 0 6px rgba(240,198,116,0.4)); } .nav-admin.active { box-shadow: inset 3px 0 0 var(--warn); color: var(--warn); background: linear-gradient(90deg, rgba(240,198,116,0.12), transparent); } .imp-banner { display: flex; align-items: center; gap: 12px; padding: 8px 18px; background: linear-gradient(90deg, rgba(240,198,116,0.18), rgba(240,198,116,0.04)); border-bottom: 1px solid rgba(240,198,116,0.4); color: var(--text); font-size: 13px; position: sticky; top: 57px; z-index: 25; } .imp-banner[hidden] { display: none; } .imp-banner strong { color: var(--warn); } .imp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 0 rgba(240,198,116,0.5); animation: impPulse 1.6s ease-out infinite; } @keyframes impPulse { 0% { box-shadow: 0 0 0 0 rgba(240,198,116,0.55); } 100% { box-shadow: 0 0 0 10px rgba(240,198,116,0); } } /* ─── Offline / pending-sync banner ────────────────────────── Amber while offline, green-tinted "back online, syncing" otherwise. */ .offline-banner { display: flex; align-items: center; gap: 10px; padding: 8px 18px; background: linear-gradient(90deg, rgba(130,212,150,0.16), rgba(130,212,150,0.03)); border-bottom: 1px solid rgba(130,212,150,0.35); color: var(--text); font-size: 13px; position: sticky; top: 57px; z-index: 26; } .offline-banner[hidden] { display: none; } .offline-banner .btn-tiny { margin-left: auto; } .offline-banner strong { color: var(--text); } .offline-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; } .offline-banner.is-offline { background: linear-gradient(90deg, rgba(240,198,116,0.18), rgba(240,198,116,0.04)); border-bottom-color: rgba(240,198,116,0.4); } .offline-banner.is-offline .offline-dot { background: var(--warn); } /* ─── KM reminder: profile toggle + in-app banner ─────────── */ .reminder-setting { border-top: 1px dashed var(--border); padding-top: 12px; margin-top: 4px; display: flex; flex-direction: column; gap: 6px; } .reminder-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; } .reminder-label { display: flex; flex-direction: column; gap: 1px; } .reminder-row input[type="checkbox"] { flex: none; width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; } #reminder-enable-btn { align-self: flex-start; } /* KM-reminder banner — warm/amber so it stands out against the dark UI instead of blending into the blue chrome. Subtle pulse on the icon draws the eye on login. Eugene 2026-06-17. */ .reminder-banner { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: linear-gradient(90deg, rgba(240,198,116,0.22), rgba(240,198,116,0.06)); border-top: 1px solid rgba(240,198,116,0.55); border-bottom: 2px solid rgba(240,198,116,0.55); color: var(--text); font-size: 14px; font-weight: 600; position: sticky; top: 57px; z-index: 27; box-shadow: 0 4px 12px rgba(240,198,116,0.10); } .reminder-banner[hidden] { display: none; } .reminder-banner .reminder-ic { color: var(--warn); display: inline-flex; animation: reminderPulse 1.8s ease-in-out infinite; } @keyframes reminderPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.15); opacity: 0.75; } } .reminder-banner .btn-tiny { margin-left: auto; } .reminder-close { background: none; border: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; } .reminder-close:hover { color: var(--text); } .admin-table-wrap { background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; overflow-x: auto; } .admin-table { width: 100%; border-collapse: collapse; font-size: 13px; } .admin-table thead th { background: var(--bg-3); text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--muted); padding: 9px 8px; border-bottom: 1px solid var(--border); } .admin-table td { padding: 9px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; } /* Let long emails/names break instead of forcing the table wider than its card. */ .admin-table td.email, .admin-table td[data-label="Name"] { overflow-wrap: anywhere; word-break: break-word; } /* Action buttons wrap into a compact block on the right so the column never blows the table width out past the viewport. */ .admin-table td.actions-cell { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center; max-width: 168px; } .admin-table tr:hover td { background: rgba(107,168,214,0.05); } .admin-table td.num { text-align: right; font-family: var(--fn); font-variant-numeric: tabular-nums; } .admin-table .role-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; } .admin-table .role-admin { background: rgba(240,198,116,0.2); color: var(--warn); } .admin-table .role-user { background: var(--bg-3); color: var(--muted); } /* Approval-status pill — colour by state so the row scans at a glance. */ .admin-table .status-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; } .admin-table .status-approved { background: rgba(155,224,173,0.15); color: var(--ok); } .admin-table .status-pending { background: rgba(240,198,116,0.18); color: var(--warn); } .admin-table .status-declined { background: rgba(232,112,77,0.18); color: var(--danger); } .admin-table .status-revoked { background: var(--bg-3); color: var(--muted); } /* Round count chip next to "Pending approvals" heading. */ .pending-count { display: inline-block; min-width: 22px; padding: 2px 8px; margin-left: 6px; font-size: 12px; font-weight: 700; background: var(--warn); color: #1a1300; border-radius: 999px; text-align: center; vertical-align: middle; } .admin-table td.email { font-family: var(--fn); font-size: 12px; } .admin-table td.created { font-size: 11px; color: var(--muted); white-space: nowrap; } .admin-table .empty { text-align: center; color: var(--muted); padding: 28px 14px; } /* ─── Admin user table → stacked cards on phones ────────────────── Below 720px an 11-column table can't fit, so each row becomes a card and every cell shows its column name (from data-label) on the left with the value on the right. No horizontal scrolling needed. */ @media (max-width: 720px) { .admin-table-wrap { overflow-x: visible; background: transparent; border: 0; border-radius: 0; } .admin-table { font-size: 13px; } .admin-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .admin-table tr { display: block; background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; padding: 6px 12px; margin-bottom: 10px; } .admin-table td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); text-align: right; } .admin-table tr td:last-child { border-bottom: 0; } .admin-table td::before { content: attr(data-label); flex: 0 0 auto; font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--muted); font-weight: 700; text-align: left; } .admin-table td.email, .admin-table td[data-label="Name"] { word-break: break-all; } /* Actions row: full-width buttons block, no data-label prefix. */ .admin-table td.actions-cell { max-width: none; justify-content: flex-start; flex-wrap: wrap; padding-top: 10px; } .admin-table td.actions-cell::before { content: ""; display: none; } .admin-table td.actions-cell .btn { flex: 1 1 auto; } } /* ─── Admin · Share with testers ───────────────────────────────── Two-column layout (URL+actions left, QR right) on desktop; stacks to one column on narrow viewports so it stays usable when Eugene's checking the dashboard from his phone too. */ .share-grid { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: start; margin: 16px 0 4px 0; } .share-url-text { display: inline-block; font-family: var(--fn); font-size: 14px; color: var(--accent); word-break: break-all; text-decoration: none; padding: 8px 12px; background: var(--bg-3); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 12px; } .share-url-text:hover { background: var(--bg-2); color: var(--text); } .share-actions { display: flex; gap: 8px; flex-wrap: wrap; } .share-qr { background: #0b0d12; padding: 14px; border-radius: 12px; border: 1px solid var(--border); } .share-qr #share-qr-canvas { width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; } .share-qr #share-qr-canvas canvas, .share-qr #share-qr-canvas img { display: block; } @media (max-width: 720px) { .share-grid { grid-template-columns: 1fr; } .share-qr { justify-self: center; } } /* ─── Tax advisor ───────────────────────────────────────── */ .nav-advisor.active { box-shadow: inset 3px 0 0 var(--accent-2); color: var(--accent-2); background: linear-gradient(90deg, rgba(130,212,150,0.12), transparent); } .advisor-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 14px 0 8px; } .advisor-tile { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; } .advisor-tile .t-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); } .advisor-tile .t-value { font-family: var(--fn); font-size: 20px; font-weight: 700; } .advisor-tile .t-value.warn { color: var(--warn); } .advisor-tile .t-value.ok { color: var(--ok); } .advisor-tile .t-value.accent { color: var(--accent); } .advisor-tile .t-sub { margin-top: 2px; } /* Allocation breakdown — where uploaded/entered expenses landed. */ .adv-allocations { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; } .adv-alloc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 8px; background: var(--bg-2, rgba(255,255,255,0.03)); border-left: 3px solid var(--ok, #2dd4bf); } .adv-alloc-row.nondeductible { border-left-color: var(--muted, #888); opacity: 0.8; } .adv-alloc-label { font-size: 13px; } .adv-alloc-tag { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); border: 1px solid var(--muted); border-radius: 4px; padding: 1px 5px; margin-left: 6px; vertical-align: middle; } .adv-alloc-amt { font-family: var(--fn); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } /* Retention warning banner — prompts download before a tax year rolls off. */ .retention-banner { margin: 10px 0 14px; padding: 11px 14px; border-radius: 8px; background: rgba(240, 198, 116, 0.12); border: 1px solid rgba(240, 198, 116, 0.38); color: var(--text); font-size: 13px; line-height: 1.5; } /* Entertainment "who + why" prompt shown when the entertainment category is selected in the capture form / expense edit modal. */ .entertain-hint { margin: -4px 0 10px; padding: 9px 12px; border-radius: 8px; background: rgba(240, 198, 116, 0.10); border: 1px solid rgba(240, 198, 116, 0.30); color: var(--text); line-height: 1.4; } /* ─── Tax help assistant ─────────────────────────────────── */ .help-ask { display: flex; gap: 8px; margin: 8px 0 14px; } .help-ask input { flex: 1 1 auto; padding: 11px 13px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-2, rgba(0,0,0,0.25)); color: var(--text); font-family: inherit; font-size: 14px; } .help-ask input:focus { outline: none; border-color: var(--accent, #2dd4bf); } .help-suggestions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; } .help-chip { border: 1px solid var(--border); background: var(--bg-2, rgba(255,255,255,0.04)); color: var(--text); border-radius: 999px; padding: 6px 13px; font-size: 12px; cursor: pointer; font-family: inherit; } .help-chip:hover { background: var(--bg-3); } .help-answer { background: var(--bg-2, rgba(255,255,255,0.03)); border: 1px solid var(--border); border-left: 3px solid var(--accent, #2dd4bf); border-radius: 10px; padding: 16px 18px; margin-bottom: 10px; } .help-a-text { line-height: 1.55; } .help-a-cta { margin-top: 12px; } .help-a-links { margin-top: 14px; display: flex; flex-direction: column; gap: 5px; } .help-a-links a { color: var(--accent, #2dd4bf); font-size: 13px; text-decoration: none; } .help-a-links a:hover { text-decoration: underline; } .help-related { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .help-disclaimer { font-style: italic; } /* ── Chat-style Q&A bubbles (Eugene 2026-06-17) ───────────────── #help-answer holds a scrolling history of turns. Each turn = the user's question (right-aligned, accent border) + SnapTax's answer (left-aligned, full-width). After the last answer, a single "Ask another question" CTA clears the input + focuses it. */ #help-answer { display: flex; flex-direction: column; gap: 14px; padding: 0; background: transparent; border: 0; } .help-turn { display: flex; flex-direction: column; gap: 8px; } .help-bubble-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); margin-bottom: 4px; display: block; } .help-q-bubble { align-self: flex-end; max-width: 88%; background: rgba(107, 168, 214, 0.10); border: 1px solid rgba(107, 168, 214, 0.35); border-radius: 12px 12px 4px 12px; padding: 10px 14px; color: var(--text); font-size: 14px; } .help-q-bubble .help-bubble-label { text-align: right; color: var(--accent); } .help-a-bubble { align-self: stretch; background: var(--bg-2); border: 1px solid var(--border); border-left: 3px solid var(--accent, #2dd4bf); border-radius: 4px 12px 12px 12px; padding: 12px 16px; color: var(--text); } .help-ask-another { align-self: flex-start; margin-top: 4px; } /* Compact reminder pill — replaces the big "Daily km reminders" card on the KMS tab so it doesn't eat the mobile viewport. */ .reminder-pill { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 14px; border: 1px solid var(--border); background: var(--bg-2, rgba(255,255,255,0.03)); border-radius: 999px; font-size: 13px; margin-bottom: 14px; } .reminder-pill input[type="checkbox"] { transform: scale(1.1); cursor: pointer; } .reminder-pill .reminder-pill-label { font-weight: 600; } /* KMS sub-tab strip — same look as Tax-advisor finance-tabs (already styled). */ .kms-tabs { margin-bottom: 14px; } .kms-pane { display: none; } .kms-pane.active { display: block; } /* Catch-up: auto-fill button row */ .gap-autofill-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0 10px; } .gap-day-row { align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; } .gap-day-row .gap-biz-wrap { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); white-space: nowrap; } .gap-day-row .gap-biz-wrap input { transform: scale(1.05); } /* ── Onboarding tutorial modal (Eugene 2026-06-16) ──────────────── */ .tut-modal { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 16px; } .tut-modal[hidden] { display: none !important; } .tut-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.65); backdrop-filter: blur(4px); } .tut-card { position: relative; z-index: 1; max-width: 560px; width: 100%; max-height: 88vh; overflow: auto; background: var(--bg-2); border: 1px solid var(--border); border-radius: 14px; padding: 22px 22px 18px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); color: var(--text); } .tut-close { position: absolute; top: 10px; right: 12px; background: none; border: 0; color: var(--muted); font-size: 26px; line-height: 1; cursor: pointer; padding: 4px 8px; } .tut-close:hover { color: var(--text); } .tut-pane h2 { margin: 0 0 10px; } .tut-intro-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .tut-step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .tut-step-num { background: var(--bg-3); color: var(--muted); padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; flex-shrink: 0; } .tut-step-head h2 { margin: 0; font-size: 18px; } .tut-step-body { line-height: 1.6; font-size: 14px; } .tut-step-body strong { color: var(--accent, #2dd4bf); } .tut-step-foot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; justify-content: flex-end; } .tut-step-foot .btn:disabled { opacity: 0.4; cursor: not-allowed; } @media (max-width: 480px) { .tut-card { padding: 18px 16px 14px; max-height: 92vh; } .tut-intro-actions .btn, .tut-step-foot .btn { flex: 1 1 100%; } .tut-step-foot { justify-content: stretch; } } /* Collapsible info + suggestions on Tax help (mobile-first: input + answer are the focus, everything else tucks behind a tap). */ .help-info-drop, .help-suggest-drop { margin: 6px 0 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-2, rgba(255,255,255,0.03)); overflow: hidden; } .help-info-drop > summary, .help-suggest-drop > summary { cursor: pointer; padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--text); list-style: none; user-select: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .help-info-drop > summary::-webkit-details-marker, .help-suggest-drop > summary::-webkit-details-marker { display: none; } .help-info-drop > summary::after, .help-suggest-drop > summary::after { content: "▾"; transition: transform .15s ease; color: var(--muted); } .help-info-drop[open] > summary::after, .help-suggest-drop[open] > summary::after { transform: rotate(180deg); } .help-info-drop > summary:hover, .help-suggest-drop > summary:hover { background: var(--bg-3, rgba(255,255,255,0.04)); } .help-info-drop > p { margin: 0; padding: 0 14px 12px; } .help-suggest-drop > .muted { padding: 0 14px; } .help-suggest-drop > .help-suggestions { padding: 8px 14px 12px; margin-bottom: 0; } .advisor-checklist { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; } /* Each checklist row is a

. Closed = single-line summary (mark + truncated message + potential amount + chevron). Open = also shows the help text and the quick-action CTA. */ .advisor-item { background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .advisor-item.high { border-left: 3px solid var(--danger); } .advisor-item.medium { border-left: 3px solid var(--warn); } .advisor-item.low { border-left: 3px solid var(--accent); } .advisor-item.info { border-left: 3px solid var(--ok); } .advisor-item > summary { display: grid; grid-template-columns: 28px 1fr auto 18px; gap: 10px; align-items: center; padding: 12px 14px; cursor: pointer; list-style: none; user-select: none; } .advisor-item > summary::-webkit-details-marker { display: none; } .advisor-item > summary::marker { content: ""; } .advisor-item > summary:hover { background: var(--bg-3); } .advisor-item .a-mark { font-size: 18px; line-height: 1; } /* Closed state: headline is single-line w/ ellipsis. Open state: wraps. */ .advisor-item .a-headline { font-size: 13px; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .advisor-item[open] .a-headline { white-space: normal; } .advisor-item .a-chev { width: 16px; height: 16px; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; transition: transform 200ms ease; } .advisor-item .a-chev::before { content: "▾"; font-size: 11px; } .advisor-item:not([open]) .a-chev { transform: rotate(-90deg); } .advisor-item .a-body { padding: 0 14px 14px 52px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; line-height: 1.5; } .advisor-item .a-action { font-size: 11px; color: var(--accent); } .advisor-item .a-actions { display: flex; gap: 8px; flex-wrap: wrap; } .advisor-item .a-cta { font-size: 11px; padding: 5px 10px; border-radius: 6px; } .advisor-item .a-help-body { padding: 8px 10px; background: var(--bg-3); border-radius: 6px; font-size: 11.5px; color: var(--muted); line-height: 1.5; } .advisor-item .a-potential { font-family: var(--fn); font-size: 13px; font-weight: 700; color: var(--ok); text-align: right; white-space: nowrap; } /* ─── Vehicle odometer summary (KM logbook) ───────────────────── Three-up stat strip showing total / business / private km. Private is the auto-derived balance. Stacks on narrow screens. */ .odo-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0 8px 0; } .odo-stat { background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; } .odo-stat-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; } .odo-stat-val { font-family: var(--fn); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; } .odo-stat-val.accent { color: var(--accent); } @media (max-width: 560px) { .odo-summary { grid-template-columns: 1fr; } } /* Preview / Generate buttons under the odometer summary. */ .odo-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; } /* Live total/business/private preview under the add-entry + edit forms. */ .trip-preview { display: flex; gap: 18px; flex-wrap: wrap; margin: 4px 0 12px 0; padding: 10px 14px; background: var(--bg-3); border-radius: 8px; font-size: 13px; color: var(--muted); } .trip-preview strong { font-family: var(--fn); font-variant-numeric: tabular-nums; color: var(--text); font-weight: 700; } /* ─── Money-value privacy toggle (per dashboard card) ───── */ /* Eugene 2026-05-20: "show values tab should be able to do individually on the 2 marked windows. use eye emoji." Per-card eye button toggles a .values-hidden class on the card itself — text-security masks just that card's amounts. Each card remembers its own state in localStorage so a privacy preference for one card doesn't bleed across to the other. */ .stat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .stat-eye { background: transparent; border: none; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 6px; } .stat-eye:hover { color: var(--text); background: var(--bg-3); } .stat-head-actions { display: flex; align-items: center; gap: 6px; } .dash-year-select { background: var(--bg-3); color: var(--text); border: 1px solid var(--border, rgba(255,255,255,.12)); border-radius: 6px; font-size: 12px; padding: 3px 6px; cursor: pointer; max-width: 150px; } .dash-year-select:hover { border-color: var(--accent, #4ea1ff); } .dash-sub.viewing-past { color: var(--accent, #4ea1ff); font-weight: 600; } .stat-card.values-hidden .stat-val, .card.advisor-hidden .t-value, .card.advisor-hidden .a-potential, .amt-masked { -webkit-text-security: disc; -moz-text-security: disc; text-security: disc; letter-spacing: 0.08em; } /* Tile header row: label + tiny eye toggle on the right. */ .amt-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .amt-eye { background: transparent; border: 0; color: var(--muted); cursor: pointer; padding: 2px 6px; border-radius: 6px; font-size: 12px; line-height: 1; } .amt-eye:hover { color: var(--text); background: var(--bg-3); } /* Per-card mask switch — toggles all .budget-row amounts inside the card. */ .card.amounts-masked .budget-row input[type="number"] { -webkit-text-security: disc; -moz-text-security: disc; text-security: disc; letter-spacing: 0.08em; } /* ─── Success banner (shown after Save / Process completes) ── */ /* Eugene 2026-05-20: predictable "Done" pattern across every upload window — task finishes, banner appears, user explicitly clicks Done to land back on Dashboard (no auto-redirect surprise). */ .success-banner { margin-top: 16px; padding: 16px 18px; background: rgba(130,212,150,0.10); border: 1px solid rgba(130,212,150,0.45); border-left: 4px solid var(--ok); border-radius: 10px; display: flex; flex-direction: column; gap: 12px; } .success-banner[hidden] { display: none; } .success-msg { font-weight: 700; color: var(--ok); font-size: 14px; } .success-actions { display: flex; flex-wrap: wrap; gap: 10px; } .success-actions .btn-primary { flex: 1; min-width: 180px; } /* ─── Duplicate finder modal ────────────────────────────── */ .modal-wide { max-width: 760px; } .dedupe-list { display: flex; flex-direction: column; gap: 14px; margin: 10px 0 14px; } .dedupe-group { background: var(--bg-2); border: 1px solid var(--border); border-left: 3px solid var(--warn); border-radius: 10px; padding: 12px 14px; } .dedupe-group-head { font-size: 12px; font-weight: 700; color: var(--warn); letter-spacing: 0.4px; margin-bottom: 6px; display: flex; align-items: center; justify-content: space-between; } .dedupe-row { display: grid; grid-template-columns: 28px 80px 1fr auto auto; align-items: center; gap: 10px; padding: 6px 4px; font-size: 12.5px; border-top: 1px dashed var(--border); } .dedupe-row:first-of-type { border-top: none; } .dedupe-row.keep { color: var(--text); } .dedupe-row.delete { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(217,118,118,0.7); } .dedupe-row input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--danger); } .dedupe-row .dr-date { font-family: var(--fn); font-size: 11px; color: var(--muted); } .dedupe-row .dr-vendor { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dedupe-row .dr-cat { font-size: 10px; color: var(--muted); } .dedupe-row .dr-amount { font-family: var(--fn); font-weight: 700; } .dedupe-foot { display: flex; gap: 10px; margin-top: 12px; } .dedupe-foot[hidden] { display: none; } /* ─── Bulk receipts queue ───────────────────────────────── */ .bulk-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; } .bulk-row { display: grid; grid-template-columns: 44px 1fr auto auto; align-items: center; gap: 12px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; } .bulk-row.done { border-left: 3px solid var(--ok); } .bulk-row.err { border-left: 3px solid var(--danger); } .bulk-row.busy { border-left: 3px solid var(--accent); } .bulk-row.queued { border-left: 3px solid var(--border); } .bulk-thumb { width: 44px; height: 44px; border-radius: 6px; background: var(--bg-3) center / cover no-repeat; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--muted); overflow: hidden; } .bulk-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Per-row Edit button on the bulk receipts page — appears once the row's entry has been saved so the user can correct a mis-extracted amount / vendor / category without leaving the page. */ /* Bank-import discovery hint at the top of Snap a receipt. */ .bank-import-hint { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; padding: 10px 14px; background: rgba(107, 168, 214, 0.08); border: 1px solid rgba(107, 168, 214, 0.30); border-radius: 10px; font-size: 13px; line-height: 1.5; color: var(--text); } .bank-import-hint .btn { display: inline-flex; vertical-align: middle; } .bulk-edit-btn, .bulk-del-btn { margin-left: 6px; } .bulk-edit-btn[hidden], .bulk-del-btn[hidden] { display: none; } .bulk-row.bulk-deleted { opacity: 0.45; text-decoration: line-through; } .bulk-row.bulk-deleted .bulk-thumb { filter: grayscale(1); } .bulk-main { min-width: 0; font-size: 13px; } .bulk-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bulk-meta { font-size: 11px; color: var(--muted); margin-top: 2px; } .bulk-status { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; padding: 3px 8px; border-radius: 999px; background: var(--bg-3); color: var(--muted); white-space: nowrap; } .bulk-row.done .bulk-status { background: rgba(130,212,150,0.18); color: var(--ok); } .bulk-row.err .bulk-status { background: rgba(217,118,118,0.18); color: var(--danger); } .bulk-row.busy .bulk-status { background: rgba(107,168,214,0.18); color: var(--accent); } .bulk-amount { font-family: var(--fn); font-size: 13px; font-weight: 700; white-space: nowrap; } /* ─── Voice note (browser SpeechRecognition) ────────────── */ .mic-btn { display: inline-flex; align-items: center; gap: 6px; } .mic-btn.recording { background: rgba(217,118,118,.18); color: var(--danger); border-color: rgba(217,118,118,.5); animation: micPulse 1.2s ease-out infinite; } @keyframes micPulse { 0% { box-shadow: 0 0 0 0 rgba(217,118,118,0.55); } 100% { box-shadow: 0 0 0 12px rgba(217,118,118,0); } } .voice-row { background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; margin: -6px 0 6px; } .voice-row[hidden] { display: none; } .voice-row-head { display: flex; align-items: center; justify-content: space-between; } .voice-close { background: transparent; border: none; color: var(--muted); font-size: 20px; cursor: pointer; line-height: 1; padding: 0 6px; } .voice-close:hover { color: var(--text); } /* Save / Cancel pair at the bottom of each form. Cancel sits side-by-side with the primary action; on mobile they stack. */ .form-actions { display: flex; gap: 10px; align-items: stretch; margin-top: 4px; } .form-actions .btn-primary { flex: 1; } @media (max-width: 540px) { .form-actions { flex-direction: column; } } .voice-row textarea { background: var(--bg-3); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; color: var(--text); font-size: 13px; font-family: inherit; resize: vertical; } /* ─── Receipt preview pane (Capture + Income tabs) ──────── */ /* Eugene's call 2026-05-20: when a file is picked, show it next to the form so the user can visually verify each auto-extracted field. */ .receipt-preview { background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .receipt-preview[hidden] { display: none; } .receipt-preview-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: var(--bg-3); border-bottom: 1px solid var(--border); font-size: 12px; } .receipt-preview-body { max-height: 420px; overflow: auto; display: flex; align-items: center; justify-content: center; background: #0a0c11; } .receipt-preview-body img, .receipt-preview-body embed { display: block; max-width: 100%; max-height: 420px; } .receipt-preview-body embed { width: 100%; height: 420px; } .receipt-preview-body .pdf-fallback { padding: 28px 14px; text-align: center; color: var(--muted); font-size: 13px; } .receipt-preview.collapsed .receipt-preview-body { display: none; } /* ─── Bank-statement review ─────────────────────────────── */ .bank-scan-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .bank-scan-row .btn[disabled] { opacity: 0.65; cursor: progress; } .bank-statement-link { margin-top: 6px; padding: 6px 10px; background: rgba(130, 212, 150, 0.06); border: 1px solid rgba(130, 212, 150, 0.25); border-radius: 6px; line-height: 1.4; } .bank-statement-link a { color: var(--accent); text-decoration: none; } .bank-statement-link a:hover { text-decoration: underline; } .bank-summary { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 8px; font-size: 12.5px; color: var(--muted); } .bank-table-wrap { background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; overflow-x: auto; max-height: 60vh; overflow-y: auto; } .bank-table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .bank-table thead th { position: sticky; top: 0; background: var(--bg-3); text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--border); } .bank-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; } .bank-table tr:hover td { background: rgba(107,168,214,0.05); } .bank-table td.num { text-align: right; font-family: var(--fn); font-weight: 600; white-space: nowrap; } .bank-table td.income .amount { color: var(--ok); } .bank-table input[type=date] { background: transparent; color: var(--text); border: 1px solid transparent; border-radius: 4px; font-size: 12px; padding: 2px 4px; font-family: var(--fn); } .bank-table input[type=date]:hover { border-color: var(--border); } .bank-table input[type=date]:focus { border-color: var(--accent); outline: none; } .bank-table input[type=text] { background: transparent; color: var(--text); border: 1px solid transparent; border-radius: 4px; font-size: 12.5px; padding: 3px 4px; width: 100%; } .bank-table input[type=text]:hover { border-color: var(--border); } .bank-table input[type=text]:focus { border-color: var(--accent); outline: none; background: var(--bg-3); } .bank-table select { background: var(--bg-3); color: var(--text); border: 1px solid var(--border); border-radius: 4px; font-size: 11.5px; padding: 3px 6px; max-width: 240px; } .bank-table tr.uncategorised { background: rgba(240,198,116,0.05); } .bank-table tr.uncategorised td.warn { color: var(--warn); font-size: 10px; } .bank-table tr.duplicate { background: rgba(255,155,155,0.06); opacity: 0.72; } .bank-table tr.duplicate:hover { opacity: 1; } .bank-table .warn { color: var(--warn); font-size: 10px; margin-top: 3px; } .bank-table tr.duplicate .warn { color: var(--danger); } .bank-foot { display: flex; gap: 10px; margin-top: 14px; } /* ─── History drawer (KM trip history) ───────────────────── */ .history-drawer { margin-top: 18px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .history-drawer > summary { cursor: pointer; list-style: none; padding: 12px 14px; font-size: 13px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; } .history-drawer > summary::-webkit-details-marker { display: none; } .history-drawer > summary::after { content: "▾"; color: var(--muted); transition: transform .15s ease; } .history-drawer[open] > summary::after { transform: rotate(180deg); } .history-drawer .history-count { background: var(--bg-3); color: var(--muted); font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 999px; margin-left: auto; margin-right: 12px; } .history-drawer > .entries-list { padding: 0 12px 12px; } /* ─── Documents grid ─────────────────────────────────────── */ /* Document section headings (Receipts / Income / Bank statements). */ .docs-section-h { font-size: 12px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--muted); margin: 22px 0 10px; font-weight: 700; display: flex; align-items: center; gap: 8px; } .docs-section-h:first-child { margin-top: 4px; } .docs-section-count { background: var(--bg-3); color: var(--muted); border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 700; } /* Outer container is a plain vertical stack of sections — NOT a grid (a grid here turned the section headings into columns). Only the inner per-section grid lays the tiles out responsively. */ .docs-grid { display: block; } .docs-grid-inner { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .doc-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; text-align: left; padding: 0; cursor: pointer; font: inherit; color: inherit; transition: border-color .12s ease, transform .12s ease; } .doc-card:hover { border-color: var(--accent); transform: translateY(-2px); } .doc-thumb { position: relative; aspect-ratio: 4 / 3; background: var(--bg-3); display: flex; align-items: center; justify-content: center; color: var(--muted); overflow: hidden; } /* The thumbnail image overlays the icon; if it fails to load it removes itself (onerror) and the icon shows through. */ .doc-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: var(--bg-3); } .doc-thumb .doc-icon { color: var(--muted); opacity: 0.8; } .doc-meta { padding: 9px 11px; display: flex; flex-direction: column; gap: 3px; min-width: 0; } .doc-meta .doc-title { font-weight: 600; color: var(--text); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .doc-meta .doc-sub { font-size: 11px; color: var(--muted); } /* Document preview inside the modal. */ .doc-preview { background: var(--bg-3); border-radius: 10px; margin-bottom: 14px; min-height: 320px; max-height: 60vh; overflow: auto; display: flex; align-items: center; justify-content: center; } .doc-preview img { max-width: 100%; max-height: 60vh; display: block; } .doc-preview iframe { width: 100%; height: 60vh; border: none; background: #fff; border-radius: 8px; } .doc-modal-actions { display: flex; gap: 10px; justify-content: flex-end; align-items: center; margin-top: 6px; } /* ─── Reports tab ────────────────────────────────────────── */ .report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 16px; } .report-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 10px; } .report-card h3 { margin: 0; font-size: 14px; letter-spacing: 0.3px; } .report-actions { display: flex; gap: 8px; } .report-efiling { margin-top: 8px; padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--border); border-left: 3px solid var(--warn); border-radius: 6px; line-height: 1.5; } /* Tenure-gate notice in the Reports panel — appears when a report excluded months the user hasn't paid for, with a back-date call to action. */ .coverage-notice { margin-top: 14px; padding: 12px 14px; background: rgba(240,198,116,0.1); border: 1px solid rgba(240,198,116,0.4); border-left: 3px solid var(--warn); border-radius: 8px; font-size: 13px; line-height: 1.5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .coverage-notice .btn { margin-left: auto; } /* Entry row edit button — sits next to delete */ .btn-edit { color: var(--accent); } /* Register-page optional details */ .auth-extra { border-top: 1px dashed var(--border); padding-top: 12px; margin-top: 4px; } .auth-extra > summary { cursor: pointer; font-size: 12px; color: var(--muted); padding: 4px 0 10px; list-style: none; } .auth-extra > summary::-webkit-details-marker { display: none; } .auth-extra > summary::before { content: "+ "; color: var(--accent); } .auth-extra[open] > summary::before { content: "− "; } .auth-extra .auth-label { margin-top: 10px; } .small { font-size: 11px; } /* Subtle pulse on fields the OCR just filled — fades after a beat. */ .ocr-filled { animation: ocrPulse 1.4s ease-out; } @keyframes ocrPulse { 0% { box-shadow: 0 0 0 2px rgba(107, 168, 214, 0.55); } 100% { box-shadow: 0 0 0 0 rgba(107, 168, 214, 0); } } /* KMs tab reminder card — visually distinct from regular cards. */ .reminder-card { background: linear-gradient(90deg, rgba(107,168,214,0.12), rgba(107,168,214,0.02)); border-color: rgba(107,168,214,0.25) !important; margin-bottom: 16px; } .reminder-card .reminder-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; } .reminder-card .reminder-label { display: flex; flex-direction: column; gap: 2px; } .reminder-card input[type="checkbox"] { width: 20px; height: 20px; cursor: pointer; flex: 0 0 auto; } /* ─── Tax-hub sub-tab strip (Advisor / Calculator / Budget) ── */ .finance-tabs { display: flex; gap: 4px; background: rgba(24, 29, 40, 0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 4px; margin: 0 0 16px; width: 100%; } .finance-tab { flex: 1; background: transparent; border: 0; color: var(--muted); padding: 9px 12px; border-radius: 8px; cursor: pointer; font-size: 13.5px; font-weight: 600; font-family: inherit; transition: background .12s, color .12s; white-space: nowrap; } .finance-tab:hover { color: var(--text); } .finance-tab.active { background: var(--accent); color: #0b0d12; } @media (max-width: 480px) { .finance-tab { font-size: 12px; padding: 8px 6px; } } /* ─── Budget ─────────────────────────────────────────────── */ .budget-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 10px; } @media (max-width: 600px) { .budget-tiles { grid-template-columns: 1fr; } } .budget-tile { background: rgba(11, 13, 18, 0.55); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; } .budget-side { margin-top: 14px; } .budget-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } /* Desktop: single row [name | amount | essential | delete]. */ .budget-row { display: grid; grid-template-columns: minmax(0, 1fr) 140px 90px 36px; gap: 10px; align-items: center; padding: 10px 12px; background: rgba(11, 13, 18, 0.45); border: 1px solid var(--border); border-radius: 10px; min-width: 0; } /* Mobile: stack to 2 rows. Row 1: name (full-width). Row 2: amount | essential | delete. */ @media (max-width: 600px) { .budget-row { grid-template-columns: minmax(0, 1fr) 70px 36px; grid-template-areas: "name name name" "amt ess del"; row-gap: 8px; padding: 12px; } .budget-row > input[type="text"] { grid-area: name; } .budget-row > input[type="number"] { grid-area: amt; } .budget-row > .ess-cell { grid-area: ess; } .budget-row > .del-btn { grid-area: del; } } .budget-row.essential { border-left: 3px solid var(--accent); } .budget-row input[type="text"], .budget-row input[type="number"] { background: rgba(11,13,18,0.55); border: 1px solid rgba(255,255,255,0.06); color: var(--text); font-size: 14px; padding: 8px 10px; border-radius: 6px; font-family: inherit; min-width: 0; width: 100%; } .budget-row input[type="text"]:focus, .budget-row input[type="number"]:focus { outline: 0; border-color: var(--accent); } .budget-row input[type="number"] { text-align: right; font-family: var(--fn); } .budget-row .ess-cell { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; color: var(--muted); white-space: nowrap; } .budget-row .ess-cell input { margin: 0; cursor: pointer; width: 16px; height: 16px; flex: 0 0 auto; } .budget-row .del-btn { background: transparent; border: 0; color: var(--muted); cursor: pointer; font-size: 20px; line-height: 1; padding: 6px 8px; border-radius: 6px; } .budget-row .del-btn:hover { color: var(--danger); background: rgba(255,155,155,0.10); } .budget-empty[hidden] { display: none; } .budget-suggest { border: 1px solid rgba(240,198,116,0.30); } .budget-suggest .card-head h2 { color: var(--warn); } .suggest-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 9px 12px; background: rgba(240,198,116,0.05); border: 1px solid rgba(240,198,116,0.20); border-radius: 8px; margin-top: 6px; } .suggest-row.applied { opacity: 0.55; } .suggest-row .s-cum { font-family: var(--fn); color: var(--ok); font-size: 13px; } #bud-net.ok-net { color: var(--ok); } #bud-net.bad-net { color: var(--danger); } /* Claims-block category headers — small uppercase divider between groups. */ .claims-group-h { text-transform: uppercase; letter-spacing: 1.4px; font-size: 11px; margin: 12px 0 6px; } /* ─── SARS calculator ────────────────────────────────────── */ .calc-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 16px 0 10px; } .calc-tab { background: var(--bg-2); border: 1px solid var(--border); color: var(--muted); border-radius: 999px; padding: 7px 15px; font-size: 13px; cursor: pointer; } .calc-tab:hover { color: var(--text); border-color: var(--accent); } .calc-tab.active { background: var(--accent); border-color: var(--accent); color: #0b0d12; font-weight: 600; } .calc-pane { margin-top: 4px; } .calc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 14px; } .calc-tile { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; } .calc-tile .t-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); } .calc-tile .t-value { font-family: var(--fn); font-size: 20px; font-weight: 700; } .calc-tile .t-value.warn { color: var(--warn); } .calc-tile .t-value.ok { color: var(--ok); } .calc-tile .t-value.accent { color: var(--accent); } .calc-tile .t-sub { margin-top: 2px; } /* ─── Bottom SARS news ticker ──────────────────────────────── Fixed to the bottom of the viewport. A track holding two identical runs scrolls left; -50% lands the second run exactly where the first began, so the loop is seamless. Pauses on hover. */ .news-ticker { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: flex; align-items: center; height: 34px; background: rgba(19, 23, 32, 0.96); border-top: 1px solid var(--border); font-size: 12.5px; } .news-ticker-tag { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 100%; padding: 0 12px; background: var(--accent); color: #0b0d12; font-weight: 700; font-size: 11px; letter-spacing: 0.5px; } .news-ticker-viewport { flex: 1; overflow: hidden; height: 100%; display: flex; align-items: center; } .news-ticker-track { display: inline-flex; white-space: nowrap; animation: ticker 60s linear infinite; } .news-ticker:hover .news-ticker-track { animation-play-state: paused; } .news-run { display: inline-flex; align-items: center; padding-left: 24px; } .news-item { color: var(--text); text-decoration: none; } .news-item:hover { color: var(--accent); text-decoration: underline; } .news-sep { color: var(--muted); padding: 0 14px; } @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .news-ticker-track { animation: none; } .news-ticker-viewport { overflow-x: auto; } } /* ─── Mobile bottom tab bar ────────────────────────────────── Hidden on desktop (the sidebar is always visible there). On narrow screens it's the always-present nav so the user can get back to the dashboard / any function without opening the burger drawer. */ .mobile-tabbar { display: none; } /* Desktop: leave room so the fixed ticker never covers content. */ .app-main { padding-bottom: 56px; } @media (max-width: 760px) { .mobile-tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; height: 56px; background: var(--bg-2); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom, 0px); } .mtab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: none; border: none; color: var(--muted); cursor: pointer; padding: 6px 0; } .mtab.active { color: var(--accent); } .mtab-label { font-size: 10px; letter-spacing: 0.3px; } /* Icon + label must not steal the tap — the button is the click target. */ .mtab > * { pointer-events: none; } /* Ticker sits just above the tab bar on mobile. */ .news-ticker { bottom: calc(56px + env(safe-area-inset-bottom, 0px)); } /* Clear both the ticker (34px) and the tab bar (56px) + breathing room. */ .app-main { padding-bottom: 150px; } } /* ── In-app report overlay (replaces window.open which trapped phone users) 2026-06-01: full-screen modal with Back + Print buttons; report HTML lives in a sandboxed iframe so its styles don't conflict with the app. */ #report-overlay { position: fixed; inset: 0; z-index: 9000; background: #fff; display: flex; flex-direction: column; } .report-overlay-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top, 0px)); background: var(--bg-1, #f7f8fa); border-bottom: 1px solid var(--border, #e3e5ea); flex: 0 0 auto; } .report-overlay-title { flex: 1 1 auto; text-align: center; font-size: 14px; font-weight: 600; color: var(--text, #1a1d24); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .report-overlay-back, .report-overlay-print { appearance: none; border: 1px solid var(--border, #d6d9de); background: #fff; color: var(--text, #1a1d24); font-size: 14px; font-weight: 600; padding: 8px 14px; border-radius: 8px; cursor: pointer; flex: 0 0 auto; min-height: 40px; } .report-overlay-back:hover, .report-overlay-print:hover { background: var(--bg-2, #eef0f3); } .report-overlay-back { color: #1a73e8; border-color: #1a73e8; } .report-overlay-frame { flex: 1 1 auto; width: 100%; border: 0; background: #fff; } /* Stop the main app from scrolling behind the overlay (iOS) */ body.report-overlay-open { overflow: hidden; position: fixed; width: 100%; } /* ── Two-stage km logbook form (morning / end of day) ─────────── */ .trip-stage { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px 10px; margin-top: 10px; /* --bg-1 was never defined → light fallback was winning. Use the dark token that matches the rest of the cards. */ background: var(--bg-3, rgba(255,255,255,0.03)); } .trip-stage-head { font-size: 13px; font-weight: 600; color: var(--text, #1a1d24); margin: -2px 0 8px; display: flex; align-items: baseline; gap: 8px; } .trip-stage .form-row { margin: 0; } .trip-stage .form-label { margin-bottom: 6px; } /* ── Submit-button double-tap guard ────────────────────────────── */ /* Inactive (disabled) state — for the in-flight and the post-save states. Pointer-events:none means a stray double tap also can't fire. */ .btn:disabled, .btn[disabled] { opacity: 0.6; cursor: not-allowed; pointer-events: none; filter: grayscale(0.2); } .btn.is-saved { background: #e7f5ec !important; color: #1b6b3a !important; border-color: #b6dec3 !important; } /* ─── Sidebar nav hover tooltips (2026-06-10) ─── */ .nav-tip { position: fixed; z-index: 9999; display: none; max-width: 268px; padding: 11px 13px; background: var(--bg-3, #1b2030); border: 1px solid var(--border, #2a3142); border-radius: 11px; box-shadow: 0 10px 30px rgba(0,0,0,.45); color: var(--text, #e6e8ec); font-size: 12px; line-height: 1.46; opacity: 0; transform: translateX(-5px); transition: opacity .13s ease, transform .13s ease; pointer-events: none; } .nav-tip.show { opacity: 1; transform: translateX(0); } .nav-tip b { display: block; font-size: 12.5px; font-weight: 800; margin-bottom: 3px; color: var(--accent, #6ba8d6); letter-spacing: .01em; } .nav-tip span { display: block; color: var(--muted, #8c93a3); } .nav-tip::before { content: ""; position: absolute; left: -6px; top: 22px; border: 6px solid transparent; border-right-color: var(--border, #2a3142); border-left: 0; }