/* ================================================================
MOBILE-FIRST DESIGN SYSTEM — Phase A Foundation
Personal Finance App · Dark theme · Blue/Cyan accent
----------------------------------------------------------------
Loading order: AFTER style.css (overrides desktop defaults)
Include:
================================================================ */
/* ================================================================
1. DESIGN TOKENS — extends :root from style.css
================================================================ */
:root {
/* ---- Responsive breakpoints (Tailwind-aligned) ---------------------
Use these vars in JS via getComputedStyle, or reference the literal
value in @media queries (CSS custom properties cannot appear inside
@media expressions).
--------------------------------------------------------------------
sm = 640px mobile-large / landscape phone
md = 768px tablet portrait
lg = 1024px laptop / tablet landscape — ⚠️ PIN cutoff threshold
xl = 1280px desktop
2xl = 1536px wide desktop
-------------------------------------------------------------------- */
--bp-sm: 640px;
--bp-md: 768px;
--bp-lg: 1024px;
--bp-xl: 1280px;
--bp-2xl: 1536px;
/* ---- Spacing scale (4px base) ---- */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px; /* base padding for containers */
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
/* ---- Border radius ---- */
--r-sm: 8px;
--r-md: 12px;
--r-lg: 16px;
--r-xl: 20px;
--r-2xl: 24px;
--r-full: 9999px;
/* ---- Typography (mobile-first) ---- */
--fs-caption: 13px;
--fs-body: 16px; /* 16 = ป้องกัน iOS auto-zoom on input focus */
--fs-h3: 17px;
--fs-h2: 18px;
--fs-h1: 22px;
--fs-display: 28px;
--fs-money: 32px;
--fs-money-xl: 40px;
--lh-tight: 1.15;
--lh-normal: 1.45;
--lh-loose: 1.6;
--fw-regular: 400;
--fw-medium: 500;
--fw-semi: 600;
--fw-bold: 700;
/* ---- Semantic colors (money) ---- */
--money-income: #34d399; /* emerald-400 */
--money-income-bg: rgba(52, 211, 153, 0.12);
--money-expense: #fb7185; /* rose-400 */
--money-expense-bg:rgba(251, 113, 133, 0.12);
--money-neutral: var(--text-primary);
/* ---- Surfaces (deeper than login card) ---- */
--surface-1: rgba(255, 255, 255, 0.04);
--surface-2: rgba(255, 255, 255, 0.06);
--surface-3: rgba(255, 255, 255, 0.08);
/* ---- Elevation (shadows) ---- */
--elev-1: 0 1px 2px rgba(0, 0, 0, 0.25);
--elev-2: 0 4px 12px -2px rgba(0, 0, 0, 0.35);
--elev-3: 0 10px 30px -6px rgba(0, 0, 0, 0.5);
--elev-fab: 0 8px 24px -4px rgba(59, 130, 246, 0.55),
0 4px 10px -2px rgba(6, 182, 212, 0.35);
/* ---- Tab bar height (for content padding-bottom) ---- */
--tab-bar-h: 64px;
/* 🆕 v3.1.1 rev4 — extra 12px lifts the tab bar / keyboards above the
iOS home-indicator "chin" so they don't hug the curved screen edge.
Was: calc(64px + env(safe-area-inset-bottom)).
Now: calc(64px + env(safe-area-inset-bottom) + 12px). */
--tab-bar-safe: calc(64px + env(safe-area-inset-bottom, 0px) + 12px);
/* ---- Z-index scale ---- */
--z-tab-bar: 100;
--z-fab: 110;
--z-sheet-bg: 200;
--z-sheet: 210;
--z-toast: 9999;
}
/* ================================================================
2. BASE — mobile-first body / app shell
================================================================ */
html {
/* iOS landscape auto-resize is already prevented by the viewport meta
(user-scalable=no, maximum-scale=1) so text-size-adjust is redundant. */
-webkit-tap-highlight-color: transparent;
/* 🆕 v3.1.0 Phase O polish sweep (round 2) — smooth in-page anchor jumps
(benefits: Accounts jump-chips, Security row expand, Health scroll-to-error). */
scroll-behavior: smooth;
}
/* 🆕 v3.1.0 Phase O polish sweep (round 2) — consistent focus-visible ring
across all interactive elements (buttons, links, inputs). Keyboard-only;
mouse clicks suppress it via :focus-visible selector. */
:where(button, a, [role="button"], [tabindex]):focus-visible {
outline: 2px solid var(--brand-500, #3b82f6);
outline-offset: 2px;
border-radius: 6px;
}
/* 🆕 v3.1.0 Phase O polish sweep (round 2) — respect reduced-motion pref.
Disables scroll-behavior + all transitions/animations for users who
enable "Reduce motion" in system settings. */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
body.app-shell {
margin: 0;
/* 🔧 Override style.css's `body { height: 100vh; overflow: hidden }`
— เพื่อให้ page scroll ได้ตามปกติ */
height: auto;
min-height: 100vh;
overflow-x: hidden;
overflow-y: visible;
/* 🆕 v3.1.1 rev4 — iOS PWA first-paint fuzzy-top fix.
`isolation: isolate` creates a new stacking context on body WITHOUT
the containing-block side-effect of `transform: translateZ(0)`, so
fixed children (bottom tab bar, FAB, modals) still anchor to the
viewport correctly. Combined effect: iOS composites body as its own
layer up front, matching what happens when the FAB sheet opens
(position:fixed body) — so the "fuzzy top" that only cleared after
a sheet open/close is cleared on initial paint instead. */
isolation: isolate;
background: linear-gradient(180deg, #0c1224 0%, #0f172a 100%);
color: var(--text-primary);
font-family: var(--font-main, "Poppins", system-ui, sans-serif);
font-size: var(--fs-body);
line-height: var(--lh-normal);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Disable text selection on UI chrome (tabs, FAB, etc.) */
.no-select {
-webkit-user-select: none;
user-select: none;
}
/* Main scrollable area — leave room for fixed bottom tab bar */
.app-main {
padding: var(--space-4) var(--space-4) calc(var(--tab-bar-safe) + var(--space-6));
min-height: 100vh;
}
/* ================================================================
3. UTILITY — money display, layout helpers
================================================================ */
.money {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
font-weight: var(--fw-semi);
}
.money--income { color: var(--money-income); }
.money--expense { color: var(--money-expense); }
/* 🆕 Option B — additional transaction types */
.money--transfer { color: #2563eb; } /* blue — sideways move */
.money--opening { color: #64748b; } /* slate — neutral baseline */
.money--other { color: #64748b; } /* slate — uncategorized */
.money--lg { font-size: var(--fs-money); }
.money--xl { font-size: var(--fs-money-xl); }
.row { display: flex; align-items: center; }
.row-between { display: flex; align-items: center; justify-content: space-between; }
.col { display: flex; flex-direction: column; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-caption { font-size: var(--fs-caption); color: var(--text-muted); }
.text-h2 { font-size: var(--fs-h2); font-weight: var(--fw-semi); }
.text-h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); }
/* ================================================================
4. CARD — basic + summary variant
================================================================ */
.card {
background: var(--surface-1);
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
padding: var(--space-4);
/* 🆕 v3.1.1 rev3 — removed `backdrop-filter: blur(10px)` from the
card primitive. On iOS Safari PWA, every card running backdrop
blur sampled the wrong source pixels on first paint — showing as
a fuzzy halo across the top of every page. Opening any modal/
sheet (e.g. the FAB add-transaction sheet) triggered a full
recomposite that fixed the sampling, so the halo "disappeared"
after the first sheet open/close; navigating to another page
reset the first-paint and the halo came back.
The filter was decorative on solid --surface-1 cards (no visible
translucency to blur), so dropping it has no visual cost and
eliminates the iOS rendering bug across the whole app. */
/* 🆕 v3.1.0 Phase O polish — brand-tinted lift matching draft Hi-Fi */
box-shadow: var(--shadow-card-brand,
0 10px 24px -8px rgba(37, 99, 235, 0.14),
0 2px 8px -2px rgba(15, 23, 42, 0.06));
}
.card--clickable {
cursor: pointer;
transition: background 0.2s ease, transform 0.1s ease;
}
.card--clickable:active {
background: var(--surface-2);
transform: scale(0.99);
}
/* 🆕 v3.1.0 Phase Q Round 1 — Net Worth hero per draft §1a line 394.
Switched from deep navy to brand-bright blue gradient (#2563eb → #1d3fae)
with brand-tinted lift shadow. Keeps the cyan glow for depth at the top. */
/* 🆕 v3.1.1 rev4 — Net Worth "Premium Snapshot" card.
Mid-refresh (Level 2) matching the Aurora Debit Card reference the user
shared. Keeps the Phase Q brand-blue hero as the base, adds:
• Deeper lift shadow + inner-border highlight (feels lifted off the page)
• Matte dot pattern via ::after (subtle texture, no backdrop-filter)
• Soft glow blob via ::before (depth without blur-rendering risk)
• New .card__tag (WEALTH SNAPSHOT chip, matches the Debit tag style)
• New .card__timestamp (AS OF {date}, bottom-right)
• Numeric font tightened via tabular-nums for consistent digit widths. */
.card--summary {
position: relative; /* anchor for the balance toggle */
/* 🆕 v3.1.1 rev4d — match the Reports page .bs-headline EXACTLY.
Previous rev4c kept decorative extras (glow blob + matte dots +
deeper shadow + border) that the Reports hero does NOT have, so
the two cards still looked different. This revision strips all
the extras down to the Reports formula so Home and Reports read
identically side-by-side. The sparkline, chip, and timestamp
added by Phase α still live inside the card — only the chrome
changed. */
background: var(--brand-gradient-hero);
border: none;
border-radius: 16px;
color: #ffffff;
padding: var(--space-5);
box-shadow:
0 6px 20px -4px rgba(37, 99, 235, 0.35),
0 2px 6px -1px rgba(15, 23, 42, 0.12);
}
/* 🆕 "WEALTH SNAPSHOT" chip — tiny status tag at the top-left, next to the
NET WORTH label. Matches the "DEBIT" tag style on the Aurora reference
(uppercase, tracked, hairline border, semi-transparent fill). */
.card__tag {
display: inline-block;
font-size: 9px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
background: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.88);
border: 1px solid rgba(255, 255, 255, 0.18);
padding: 3px 8px;
border-radius: 999px;
margin-left: 8px;
vertical-align: middle;
line-height: 1;
}
/* 🆕 "AS OF Oct 16, 2026" timestamp — bottom-right corner of the hero. */
.card__timestamp {
position: absolute;
bottom: var(--space-4);
right: var(--space-5);
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
font-feature-settings: "tnum" 1;
z-index: 2;
}
.card__timestamp strong {
color: rgba(255, 255, 255, 0.85);
font-weight: 500;
margin-left: 4px;
}
/* 🆕 Tighten the big number so it reads as "amount", not "paragraph".
tabular-nums keeps the digits a consistent width so a changing balance
doesn't shift the layout. */
.card--summary .money--xl {
font-feature-settings: "tnum" 1;
letter-spacing: -0.02em;
}
/* 🆕 Eye toggle pinned to the top-RIGHT corner of the Net Worth card.
Uses light-on-dark colors so it reads on the navy gradient. */
.balance-toggle--in-card {
position: absolute;
top: 12px;
right: 12px;
width: 32px;
height: 32px;
border-radius: 50%;
border: none;
background: rgba(255, 255, 255, 0.16);
color: #fff;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 17px;
/* 🆕 v3.1.1 rev3 — backdrop-filter removed (iOS first-paint fuzzy fix).
The toggle sits inside the solid blue Net Worth hero card so blur
had nothing translucent to work on — pure cost, no visible gain. */
transition: background 0.15s ease, transform 0.08s ease;
-webkit-tap-highlight-color: transparent;
z-index: 2;
}
.balance-toggle--in-card:hover { background: rgba(255, 255, 255, 0.24); }
.balance-toggle--in-card:active { transform: scale(0.92); }
.balance-toggle--in-card i { font-size: 17px; }
/* 🆕 Brighter delta colors — visible on dark navy gradient */
.card--summary .card__hint .money--income {
color: #d9f99d; /* lime-300 */
font-weight: var(--fw-semi, 600);
}
.card--summary .card__hint .money--expense {
color: #fda4af; /* rose-300 */
font-weight: var(--fw-semi, 600);
}
.card--summary .card__hint {
color: rgba(255, 255, 255, 0.90);
font-weight: var(--fw-medium, 500);
}
.card__label {
font-size: var(--fs-caption);
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--space-2);
}
.card__value {
font-size: var(--fs-money);
font-weight: var(--fw-bold);
font-variant-numeric: tabular-nums;
}
.card__hint {
margin-top: var(--space-2);
font-size: var(--fs-caption);
color: var(--text-secondary);
}
/* ================================================================
5. LIST ITEM — transaction / account row
================================================================ */
.list-item {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
background: transparent;
border-radius: var(--r-md);
transition: background 0.15s ease;
cursor: pointer;
}
.list-item:active {
background: var(--surface-2);
}
.list-item__icon {
flex-shrink: 0;
width: 40px; /* 🆕 Phase Q Round 2 — tightened to 40×40 per draft §1a line 406 */
height: 40px;
border-radius: 11px; /* 🆕 Phase Q Round 2 — rounded square (was .pill) per draft */
background: var(--surface-2);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: var(--text-primary);
}
.list-item__body {
flex: 1;
min-width: 0; /* let text truncate */
}
/* 🆕 v3.1.0 Phase S §11 Round 6 — tighter typography per draft §11 lines
2663-2665: title 13px/600, subtitle 11px muted. Reads more compact and
matches the icon-tile scale from Round 2. */
.list-item__title {
font-size: 13.5px;
font-weight: var(--fw-semi, 600);
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.list-item__subtitle {
margin-top: 3px;
font-size: 11.5px;
color: var(--text-muted, #94a3b8);
font-weight: var(--fw-medium, 500);
line-height: 1.4;
}
.list-item__trailing {
flex-shrink: 0;
text-align: right;
}
/* 🆕 v3.1.0 Phase S §11 Round 6 — consistent chevron size + color inside
.list-item. Matches draft §11 chevrons (color #cbd5e1, ~20px). Any
trailing `.bx-chevron-right` inside a list-item picks up these styles. */
.list-item > .bx-chevron-right,
.list-item .list-item__chevron {
font-size: 20px;
color: var(--border-light, #cbd5e1);
flex-shrink: 0;
transition: color .14s ease, transform .14s ease;
}
.list-item:hover > .bx-chevron-right,
.list-item:hover .list-item__chevron {
color: var(--text-muted, #94a3b8);
transform: translateX(2px);
}
/* Date/Type group header (Today / Yesterday / ASSET / LIABILITIES) */
/* Now STICKY — stays at top while scrolling within section */
.list-group__header {
position: sticky;
top: 0;
/* 🆕 v3.1.1 rev3 — solid #fff (was rgba 0.95 + backdrop blur 8px).
The sticky header sits at the top of every list page and uses
backdrop-filter: blur(8px). On iOS PWA that filter samples the
wrong source pixels on first paint — the whole top of the page
reads as a fuzzy halo until a modal (e.g. the FAB sheet) opens
and forces a recomposite. 0.95 → 1 is visually unchanged on a
light body gradient, and dropping the backdrop-filter kills the
first-paint fuzziness across every list page (Activity, Accounts,
Budget, Reports, etc.). */
background: #fff;
padding: var(--space-3) var(--space-4) var(--space-2);
font-size: var(--fs-caption);
font-weight: var(--fw-semi);
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
z-index: 5;
border-bottom: 1px solid var(--border-soft);
/* bleed to card edges so bg covers full width */
margin: 0 calc(-1 * var(--space-2));
}
/* ================================================================
6. BOTTOM TAB BAR — primary navigation
================================================================ */
.bottom-tab-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: var(--tab-bar-safe);
/* 🆕 v3.1.1 rev4 — add 12px to the padding-bottom so icons sit higher
above the home-indicator chin (was: env(safe-area-inset-bottom)). */
padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
/* 🆕 v3.1.1 rev3 — solid #0f172a (was rgba 0.92 + backdrop blur 20px
+ saturate 140%). The tab bar is fixed on every page; its backdrop
filter was one of the sources of iOS first-paint fuzziness. 0.92
→ 1 is a tiny visual change against solid content; losing the
frosted-glass "see-through-to-scrollable" effect is the only
cosmetic cost. Benefit: clean renders on every page load, no
halo-until-FAB-opens anymore. */
background: #0f172a;
border-top: 1px solid var(--border-soft);
display: flex;
align-items: stretch;
justify-content: space-around;
z-index: var(--z-tab-bar);
-webkit-user-select: none;
user-select: none;
}
.bottom-tab-bar__item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
padding: var(--space-2) var(--space-1);
color: var(--text-muted);
background: transparent;
border: none;
cursor: pointer;
text-decoration: none;
transition: color 0.15s ease;
min-width: 44px; /* touch target */
}
.bottom-tab-bar__icon {
font-size: 22px;
line-height: 1;
}
.bottom-tab-bar__label {
font-size: 11px;
font-weight: var(--fw-medium);
line-height: 1;
}
.bottom-tab-bar__item:active {
color: var(--text-secondary);
}
/* 🆕 v3.1.0 Phase Q Round 5 — active tab in brand blue (was cyan-light);
consistent with every other active-state in the app now. */
.bottom-tab-bar__item {
position: relative; /* anchor for the ::before dot indicator */
}
.bottom-tab-bar__item.is-active {
color: var(--brand-400, #60a5fa);
}
.bottom-tab-bar__item.is-active .bottom-tab-bar__icon {
transform: scale(1.05);
transition: transform 0.15s ease;
}
/* 🆕 Phase Q Round 5 — subtle brand indicator dot above the active tab.
Reads clearly on the dark tab-bar; absent when the tab isn't active. */
.bottom-tab-bar__item.is-active::before {
content: '';
position: absolute;
top: 4px;
left: 50%;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--brand-400, #60a5fa);
transform: translateX(-50%);
box-shadow: 0 0 6px rgba(96, 165, 250, 0.75);
}
/* Centered slot for FAB — tab item รับช่องว่างไว้ */
.bottom-tab-bar__fab-slot {
width: 64px;
visibility: hidden;
}
/* ================================================================
7. FAB — Floating Action Button (Add Transaction)
================================================================ */
/* 🆕 v3.1.0 Phase Q Round 6 — FAB polish: stronger brand shadow,
icon-rotate hover micro-interaction, slightly tightened border. */
.fab {
position: fixed;
bottom: calc(var(--tab-bar-safe) - 28px); /* ครึ่งหนึ่งทับ tab bar */
left: 50%;
transform: translateX(-50%);
width: 56px;
height: 56px;
border-radius: var(--r-full);
/* Round 1 — now matches profile-avatar via --brand-gradient
(was --accent-gradient-2 cyan). Shadow uses the brand token stack. */
background: var(--brand-gradient);
color: #ffffff;
border: 3px solid #0f172a; /* outline match dark tab-bar */
box-shadow: var(--brand-shadow-lg);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: var(--z-fab);
transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.25s ease,
filter 0.18s ease;
-webkit-tap-highlight-color: transparent;
}
.fab:hover {
transform: translateX(-50%) translateY(-3px);
filter: brightness(1.06) saturate(1.08);
box-shadow: 0 14px 36px -4px rgba(37, 99, 235, 0.55),
0 6px 14px -2px rgba(37, 99, 235, 0.35);
}
.fab:active {
transform: translateX(-50%) scale(0.92);
box-shadow: var(--brand-shadow-md);
}
.fab__icon {
font-size: 28px;
line-height: 1;
transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* 🆕 Playful hover: + icon rotates 90° (becomes ×, hints "tap to open sheet") */
.fab:hover .fab__icon {
transform: rotate(90deg);
}
.fab:active .fab__icon {
transform: rotate(90deg) scale(1.08);
}
@media (prefers-reduced-motion: reduce) {
.fab, .fab__icon { transition: none; }
.fab:hover .fab__icon,
.fab:active .fab__icon { transform: none; }
}
/* ================================================================
8. SHEET SYSTEM
See section 71 (.app-sheet) for the unified bottom-sheet
implementation. The old .bottom-sheet and .budget-sheet
classes were removed on June 14, 2026 (Phase 4 cleanup).
================================================================ */
/* ================================================================
8.1 SCREEN STACK — Multi-screen navigation within bottom sheet
Used by Add Transaction: Form → Picker → Review
================================================================ */
.tx-screens {
flex: 1 1 auto;
min-height: 0;
position: relative;
overflow: hidden; /* clip slide-out screens */
}
.tx-screen {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
background: var(--surface-1, #fff);
transform: translateX(100%);
transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
visibility: hidden;
will-change: transform;
}
.tx-screen.is-active {
transform: translateX(0);
visibility: visible;
/* 🆕 2026-10-21 — Equal-z stacking is DOM-order based, so a screen that
appears later in the partial (e.g. the Agency screens appended after
the picker) would otherwise visually cover the picker when the user
taps a combobox from Agency. Pulling the active screen above
everything else makes DOM order irrelevant for the Z stack. */
z-index: 2;
}
.tx-screen.is-prev {
transform: translateX(-25%); /* slight parallax behind */
visibility: visible;
pointer-events: none;
z-index: 1;
}
/* Per-screen header */
.tx-screen__header {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--border-soft);
min-height: 56px;
}
.tx-screen__title {
flex: 1;
margin: 0;
font-size: var(--fs-h2, 1.125rem);
font-weight: var(--fw-semi, 600);
color: var(--text-primary);
}
/* 🆕 Unified with .app-sheet__close visual (June 14, 2026)
— circle 36×36, subtle bg, 22px icon. Inside .app-sheet--full
(dark navy) they get the light-on-dark variant below. */
.tx-screen__close,
.tx-screen__back {
flex: none;
width: 36px; height: 36px;
padding: 0;
border: none;
border-radius: 50%;
background: rgba(15, 23, 42, 0.06);
color: #475569;
font-size: 22px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.15s ease, transform 0.15s ease;
-webkit-tap-highlight-color: transparent;
}
/* 🆕 v3.1.0 Phase Z §3a Add-TX Round 2 — close/back hover gets brand tint
(matches .page-header__back pattern from Phase U Round 6). */
.tx-screen__close:hover,
.tx-screen__back:hover {
background: rgba(37, 99, 235, 0.10);
color: var(--brand-600, #2563eb);
}
.tx-screen__close:active,
.tx-screen__back:active {
background: rgba(37, 99, 235, 0.16);
transform: scale(0.92);
}
/* Dark variant — tx-screens live inside .app-sheet--full (dark navy panel) */
.app-sheet--full .tx-screen__close,
.app-sheet--full .tx-screen__back {
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.85);
}
.app-sheet--full .tx-screen__close:hover,
.app-sheet--full .tx-screen__back:hover,
.app-sheet--full .tx-screen__close:active,
.app-sheet--full .tx-screen__back:active {
background: rgba(255, 255, 255, 0.16);
}
/* Per-screen content */
.tx-screen__content {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
padding: var(--space-4);
}
/* Picker content — no top padding, the sticky search wrap owns its own padding
so items can scroll completely UNDER it with zero gap */
.tx-screen__content--picker {
padding: 0 var(--space-4) var(--space-4);
}
/* ============================================
🆕 v3.1.0 Phase G1 — Type Grid launcher (Screen 0)
Draft §3a step 1 (4a grid). 4-col grid · 7 preset tiles · Advanced row.
Tap tile → applySubtype() → push to Form screen.
============================================ */
.tx-screen__content--typegrid {
padding: 14px 18px 20px;
}
.tx-typegrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 9px;
margin: 0 0 18px;
}
/* 🆕 v3.1.0 Phase Z §3a Add-TX Round 1 — typegrid tile polish:
brand lift on hover (previously only on active) + icon scale animation
so tiles feel tappable before you tap. */
.tx-typegrid__tile {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 10px 4px;
border: none;
border-radius: 14px;
background: var(--pf-card, #ffffff);
box-shadow: var(--shadow-card-brand,
0 10px 24px -8px rgba(37, 99, 235, 0.14),
0 2px 8px -2px rgba(15, 23, 42, 0.06));
cursor: pointer;
color: inherit;
-webkit-tap-highlight-color: transparent;
transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 180ms ease,
background 160ms ease;
}
.tx-typegrid__tile:hover {
transform: translateY(-2px);
box-shadow: 0 14px 32px -8px rgba(37, 99, 235, 0.20),
0 4px 10px -2px rgba(15, 23, 42, 0.08);
background: #fff;
}
.tx-typegrid__tile:active {
transform: scale(0.94);
background: rgba(37, 99, 235, 0.08);
box-shadow: 0 2px 6px rgba(37, 99, 235, 0.15);
}
.tx-typegrid__tile:focus-visible {
outline: 2px solid var(--brand-500, #3b82f6);
outline-offset: 2px;
}
.tx-typegrid__icon {
width: 40px; height: 40px;
border-radius: 12px;
display: grid;
place-items: center;
font-size: 20px;
transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tx-typegrid__tile:hover .tx-typegrid__icon { transform: scale(1.08); }
.tx-typegrid__tile:active .tx-typegrid__icon { transform: scale(1); }
.tx-typegrid__label {
font-size: 10.5px;
font-weight: 700;
color: var(--text-primary, #1e293b);
line-height: 1.3;
text-align: center;
}
@media (prefers-reduced-motion: reduce) {
.tx-typegrid__tile, .tx-typegrid__icon { transition: none; }
.tx-typegrid__tile:hover .tx-typegrid__icon { transform: none; }
}
/* Color variants per subtype (Money-In green / Money-Out red / neutral grey) */
.tx-typegrid__tile--income .tx-typegrid__icon { background: #f0fdf4; color: #16a34a; }
.tx-typegrid__tile--expense .tx-typegrid__icon { background: #fef2f2; color: #dc2626; }
.tx-typegrid__tile--neutral .tx-typegrid__icon { background: #f8fafc; color: #64748b; }
/* 🆕 2026-10-21 — Agency tile · purple accent so it stands apart from
income/expense/transfer at a glance. */
.tx-typegrid__tile--agency .tx-typegrid__icon { background: #faf5ff; color: #7c3aed; }
/* =========================================================
AGENCY FLOW — aligned with Add-TX / Payment form design
(brand blue tokens · .tx-field label pattern · .tx-review-hero)
The Agency *tile* in typegrid keeps its purple accent to stand
out from income/expense/neutral; inside the form everything
follows the standard tx look so nothing feels foreign.
========================================================= */
.tx-screen__content--agency {
padding: var(--space-4);
}
.tx-screen__title-icon {
font-size: 20px;
margin-right: 6px;
vertical-align: -3px;
color: var(--brand-700, #1d4ed8);
}
/* 🆕 2026-10-21 — Withdraw locked-destination chip · shown in place of the
TO picker when a Cash account is detected. Non-interactive · communicates
"money is going to Cash" visually so the user still sees the destination. */
.tx-withdraw-lock {
display: flex;
align-items: center;
gap: 10px;
margin-top: var(--space-4);
padding: 12px 14px;
background: rgba(37, 99, 235, 0.06);
border: 1px dashed rgba(37, 99, 235, 0.3);
border-radius: var(--r-md);
font-size: var(--fs-body);
color: var(--text-primary);
}
.tx-withdraw-lock > i:first-child {
font-size: 20px;
color: var(--brand-700, #1d4ed8);
flex-shrink: 0;
}
.tx-withdraw-lock__label {
font-size: 11px;
font-weight: 700;
color: var(--pf-muted-2, #64748b);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.tx-withdraw-lock__name {
flex: 1;
font-weight: var(--fw-semi, 600);
color: var(--brand-700, #1d4ed8);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tx-withdraw-lock__icon {
font-size: 16px;
color: var(--text-secondary);
flex-shrink: 0;
}
/* Help button on screen header (reuse close size + hover) */
.tx-screen__help {
flex: none;
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(37, 99, 235, 0.08);
border: none;
color: var(--brand-700, #1d4ed8);
font-size: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin-right: 6px;
transition: background 0.12s ease, transform 0.08s ease;
-webkit-tap-highlight-color: transparent;
}
.tx-screen__help:hover { background: rgba(37, 99, 235, 0.14); }
.tx-screen__help:active { transform: scale(0.92); background: rgba(37, 99, 235, 0.22); }
/* ===== Agency help screen · scrollable guide ===== */
.agency-help {
padding: var(--space-4);
}
.agency-help-section {
margin-bottom: 20px;
padding: 14px;
background: var(--pf-card, #fff);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
box-shadow: var(--shadow-card-brand,
0 6px 16px -6px rgba(37, 99, 235, 0.08),
0 2px 4px -2px rgba(15, 23, 42, 0.05));
}
.agency-help-section > h3 {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 10px;
font-size: 15px;
font-weight: var(--fw-semi, 600);
color: var(--text-primary, #0f172a);
}
.agency-help-section > h3 > i {
color: var(--brand-700, #1d4ed8);
font-size: 20px;
flex-shrink: 0;
}
.agency-help-section > p,
.agency-help-section > ul,
.agency-help-section > ol {
margin: 0 0 10px;
font-size: 13.5px;
line-height: 1.55;
color: var(--text-primary);
}
.agency-help-section > ul,
.agency-help-section > ol {
padding-left: 20px;
}
.agency-help-section > ul > li,
.agency-help-section > ol > li {
margin-bottom: 6px;
}
/* Intro meta hint */
.agency-help-intro {
background: linear-gradient(135deg, rgba(37, 99, 235, 0.05), rgba(37, 99, 235, 0.02));
border-color: rgba(37, 99, 235, 0.2);
}
.agency-help-meta {
font-size: 12.5px !important;
color: var(--text-secondary) !important;
font-style: italic;
margin-top: 4px !important;
}
/* Per-situation header · icon + title inline */
.agency-help-sit-title {
display: flex !important;
align-items: center !important;
gap: 10px !important;
margin-bottom: 10px !important;
}
.agency-help-sit-title > .agency-chooser-item__icon {
width: 36px;
height: 36px;
font-size: 18px;
}
.agency-help-when {
font-size: 13px !important;
color: var(--text-secondary) !important;
margin-bottom: 10px !important;
}
.agency-help-when strong { color: var(--text-primary); }
/* Example block inside a section */
.agency-help-example {
margin: 10px 0;
padding: 10px 12px;
background: rgba(15, 23, 42, 0.03);
border-left: 3px solid var(--brand-500, #3b82f6);
border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.agency-help-example p {
margin: 0 0 6px;
font-size: 12.5px;
line-height: 1.5;
color: var(--text-primary);
}
.agency-help-example p:last-child { margin-bottom: 0; }
.agency-help-example__scenario { font-weight: var(--fw-semi, 600); }
.agency-help-example__steps { color: var(--text-secondary); }
.agency-help-example__result em { color: var(--brand-700, #1d4ed8); font-style: normal; font-weight: 600; }
/* Warning variant (amber) · for surplus/shortfall */
.agency-help-example--warn {
background: rgba(245, 158, 11, 0.08);
border-left-color: #f59e0b;
}
.agency-help-example--warn ul {
margin: 6px 0 0;
padding-left: 18px;
font-size: 12.5px;
}
/* Inline chip (used in intro) */
.agency-help-chip {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px; height: 24px;
background: rgba(37, 99, 235, 0.08);
color: var(--brand-700, #1d4ed8);
border-radius: 6px;
vertical-align: middle;
margin: 0 2px;
}
/* Tip line (follows examples) */
.agency-help-tip {
margin-top: 10px !important;
padding: 8px 10px;
background: rgba(37, 99, 235, 0.06);
border-radius: var(--r-sm);
font-size: 12.5px !important;
color: var(--text-secondary) !important;
}
/* Full-flow ordered list with per-step state */
.agency-help-flow {
background: linear-gradient(135deg, rgba(37, 99, 235, 0.04), rgba(37, 99, 235, 0.01));
border-color: rgba(37, 99, 235, 0.18);
}
.agency-help-flow-list {
padding-left: 24px !important;
}
.agency-help-flow-list > li {
margin-bottom: 10px !important;
padding-left: 2px;
font-size: 13px;
line-height: 1.5;
}
.agency-help-flow-state {
display: block;
margin-top: 2px;
padding: 4px 8px;
background: rgba(15, 23, 42, 0.04);
border-radius: var(--r-sm);
font-size: 11.5px;
color: var(--text-secondary);
font-family: 'IBM Plex Mono', monospace;
}
/* ===== Agency chooser screen · 4 full-row list items with icon + desc ===== */
.agency-chooser-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.agency-chooser-item {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
padding: 14px 14px;
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
background: var(--pf-card, #fff);
text-align: left;
cursor: pointer;
transition: transform 0.12s ease, box-shadow 0.15s ease, border-color 0.15s ease;
box-shadow: var(--shadow-card-brand,
0 10px 24px -8px rgba(37, 99, 235, 0.10),
0 2px 6px -2px rgba(15, 23, 42, 0.05));
-webkit-tap-highlight-color: transparent;
}
.agency-chooser-item:hover {
transform: translateY(-1px);
border-color: rgba(37, 99, 235, 0.3);
box-shadow: 0 14px 30px -10px rgba(37, 99, 235, 0.18),
0 4px 8px -2px rgba(15, 23, 42, 0.08);
}
.agency-chooser-item:active {
transform: scale(0.98);
background: rgba(37, 99, 235, 0.03);
}
.agency-chooser-item__icon {
flex-shrink: 0;
width: 44px; height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 12px;
font-size: 22px;
}
.agency-chooser-item__icon--pay { background: rgba(37, 99, 235, 0.1); color: var(--brand-700, #1d4ed8); }
.agency-chooser-item__icon--collect { background: #f0fdf4; color: #16a34a; }
.agency-chooser-item__icon--receive { background: rgba(37, 99, 235, 0.1); color: var(--brand-700, #1d4ed8); }
.agency-chooser-item__icon--settle { background: rgba(100, 116, 139, 0.12); color: #475569; }
.agency-chooser-item__body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.agency-chooser-item__name {
font-size: var(--fs-body);
font-weight: var(--fw-semi, 600);
color: var(--text-primary);
line-height: 1.3;
}
.agency-chooser-item__desc {
font-size: var(--fs-caption);
color: var(--text-secondary);
line-height: 1.4;
}
.agency-chooser-item__chev {
flex-shrink: 0;
font-size: 22px;
color: var(--text-secondary);
transition: transform 0.15s ease;
}
.agency-chooser-item:hover .agency-chooser-item__chev { transform: translateX(2px); color: var(--brand-700, #1d4ed8); }
/* Agency form fields — rely on existing .tx-field + .tx-field__label spacing */
.tx-screen__content--agency .agency-amount-wrap,
.tx-screen__content--agency .agency-account-wrap,
.tx-screen__content--agency label.agency-label {
display: block;
margin-top: var(--space-4);
}
/* Labels wear the exact same uppercase caption treatment as other tx forms */
.agency-label {
display: block;
font-size: 11px;
font-weight: 700;
color: var(--pf-muted-2, #64748b);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 6px;
}
/* Person row — select + "Add new" square plus button */
.agency-person-row {
display: flex;
gap: 8px;
}
.agency-person { flex: 1; }
.agency-add-person {
width: 48px; height: 48px;
flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
border: 1.5px dashed rgba(37, 99, 235, 0.35);
background: rgba(37, 99, 235, 0.05);
color: var(--brand-700, #1d4ed8);
border-radius: var(--r-md);
cursor: pointer;
transition: background 0.12s ease, transform 0.08s ease, border-color 0.12s ease;
-webkit-tap-highlight-color: transparent;
}
.agency-add-person:hover { background: rgba(37, 99, 235, 0.1); border-color: var(--brand-500, #3b82f6); }
.agency-add-person:active { transform: scale(0.92); background: rgba(37, 99, 235, 0.16); }
.agency-add-person i { font-size: 22px; }
/* Balance hint — brand-tinted info strip (matches .tx-balance-hint pattern) */
.agency-balance-hint {
margin: 8px 0 0;
padding: 8px 12px;
background: rgba(37, 99, 235, 0.06);
border-left: 3px solid var(--brand-500, #3b82f6);
border-radius: 0 var(--r-sm) var(--r-sm) 0;
font-size: var(--fs-caption);
color: var(--text-secondary);
}
/* Error strip — matches .totp-err / toast error color */
.agency-err {
margin-top: var(--space-3);
padding: 8px 12px;
background: rgba(239, 68, 68, 0.08);
color: #dc2626;
border-radius: var(--r-sm);
font-size: var(--fs-caption);
}
/* Surplus / shortfall banner — amber, matches .tx-balance-hint--warn tone */
.agency-diff {
margin-top: var(--space-4);
padding: 12px 14px;
background: rgba(245, 158, 11, 0.08);
border: 1px solid rgba(245, 158, 11, 0.3);
border-radius: var(--r-md);
display: flex;
flex-direction: column;
gap: 10px;
}
.agency-diff__msg {
margin: 0;
font-size: var(--fs-caption);
color: #92400e;
font-weight: var(--fw-semi);
}
.agency-diff__opts {
display: flex;
flex-direction: column;
gap: 6px;
}
.agency-diff__opt {
display: flex;
align-items: center;
gap: 8px;
font-size: var(--fs-caption);
color: var(--text-primary);
cursor: pointer;
}
.agency-diff__opt input[type="radio"] {
width: 16px; height: 16px;
accent-color: var(--brand-600, #2563eb);
}
.agency-diff__cat { margin-top: 2px; }
/* ===== Agency review screen — reuse .tx-review-hero look ===== */
.agency-review-hero {
text-align: center;
padding: 22px 18px;
margin: var(--space-4);
border-radius: 16px;
background: var(--brand-gradient-deep);
color: #fff;
box-shadow: 0 10px 28px -4px rgba(37, 99, 235, 0.35),
0 3px 8px -2px rgba(15, 23, 42, 0.14);
animation: txReviewHeroPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media (prefers-reduced-motion: reduce) {
.agency-review-hero { animation: none; }
}
.agency-review-chip {
display: inline-block;
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 99px;
padding: 3px 12px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #fff;
}
.agency-review-amount {
margin: 14px 0 4px;
font-size: 28px;
font-weight: 800;
color: #fff;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.agency-review-person {
margin: 0;
font-size: 12.5px;
color: rgba(255, 255, 255, 0.82);
}
.agency-review-lines {
padding: 0 var(--space-4);
}
.agency-review-heading {
margin: 0 0 10px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--pf-muted-2, #64748b);
font-weight: 700;
}
.agency-review-leg { margin-bottom: 8px; }
/* Each ledger line in review — adopts .card shadow pattern */
.agency-leg {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
background: var(--pf-card, #fff);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
box-shadow: var(--shadow-card-brand,
0 10px 24px -8px rgba(37, 99, 235, 0.12),
0 2px 8px -2px rgba(15, 23, 42, 0.05));
}
.agency-leg__dr-cr {
flex-shrink: 0;
width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
}
.agency-leg__dr-cr--dr { background: rgba(37, 99, 235, 0.12); color: var(--brand-700, #1d4ed8); }
.agency-leg__dr-cr--cr { background: rgba(220, 38, 38, 0.12); color: #b91c1c; }
.agency-leg__body { flex: 1; min-width: 0; }
.agency-leg__account {
font-size: var(--fs-body);
font-weight: var(--fw-semi);
color: var(--text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.agency-leg__hint {
font-size: 11.5px;
color: var(--text-secondary);
margin-top: 2px;
}
.agency-leg__amount {
font-size: var(--fs-body);
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--text-primary);
}
.agency-review-note {
margin: var(--space-4) var(--space-4) 0;
padding: 10px 12px;
background: var(--surface-2);
border-radius: var(--r-sm);
font-size: var(--fs-caption);
font-style: italic;
color: var(--text-secondary);
}
/* Advanced section — "Custom Dr/Cr multi-line" full-width row */
.tx-typegrid__section-heading {
margin: 0 2px 8px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--pf-muted-2, #94a3b8);
}
/* 🆕 v3.1.0 Phase Z §3a Add-TX Round 2 — advanced row (Custom Dr/Cr):
brand lift + hover + chevron slide + icon color intensify. Pattern matches
.list-item row behavior for cross-sheet consistency. */
.tx-typegrid__advanced-row {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 12px 14px;
border: none;
border-radius: 14px;
background: var(--pf-card, #ffffff);
box-shadow: var(--shadow-card-brand,
0 10px 24px -8px rgba(37, 99, 235, 0.14),
0 2px 8px -2px rgba(15, 23, 42, 0.06));
cursor: pointer;
color: inherit;
-webkit-tap-highlight-color: transparent;
transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 180ms ease,
background 160ms ease;
}
.tx-typegrid__advanced-row:hover {
transform: translateY(-1px);
box-shadow: 0 14px 30px -8px rgba(37, 99, 235, 0.20),
0 4px 10px -2px rgba(15, 23, 42, 0.08);
}
.tx-typegrid__advanced-row:hover .tx-typegrid__advanced-icon {
background: var(--brand-50, #eef2ff);
color: var(--brand-600, #2563eb);
}
.tx-typegrid__advanced-row:hover .tx-typegrid__advanced-chev {
color: var(--brand-600, #2563eb);
transform: translateX(3px);
}
.tx-typegrid__advanced-row:active {
transform: scale(0.98);
background: rgba(37, 99, 235, 0.06);
}
.tx-typegrid__advanced-icon {
width: 36px; height: 36px;
border-radius: 10px;
background: var(--surface-2, #f1f5f9);
color: #64748b;
display: grid; place-items: center;
font-size: 18px;
flex-shrink: 0;
transition: background .14s ease, color .14s ease;
}
.tx-typegrid__advanced-label {
flex: 1;
font-size: 13.5px;
color: var(--text-primary, #0f172a);
font-weight: 600;
text-align: left;
}
.tx-typegrid__advanced-chev {
color: var(--border-light, #cbd5e1);
font-size: 20px;
transition: color .14s ease, transform .14s ease;
}
/* Typegrid footer — single-button Close, subtle grey */
.tx-screen__footer--typegrid {
display: flex;
justify-content: center;
}
.tx-typegrid__cancel {
min-width: 140px;
justify-content: center;
}
/* 🆕 Per-screen footer — padding aligned with .tx-screen__footer--view
(12px / 22px / 16px + safe-area-inset-bottom) so EVERY footer variant
(view, is-split, --split review) has identical total height — including
safe-area on iOS home-indicator devices. */
.tx-screen__footer {
flex: 0 0 auto;
padding: 12px 22px calc(16px + env(safe-area-inset-bottom, 0px));
border-top: 1px solid var(--border-soft);
background: var(--surface-1, #fff);
}
/* 🆕 UNIFIED height with .tx-screen__footer--view (44px via .pw-btn).
Form footer (is-split: Delete | Save) and View footer (single Delete)
now share the same button height for visual consistency. */
.tx-screen__footer .btn--primary,
.tx-screen__footer .btn--secondary {
width: 100%;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 20px;
border-radius: 12px;
font-size: 14px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.15s ease, border-color 0.15s ease, filter 0.18s ease;
-webkit-tap-highlight-color: transparent;
line-height: 1;
}
.tx-screen__footer .btn--primary i,
.tx-screen__footer .btn--secondary i {
font-size: 17px;
line-height: 1;
}
/* PRIMARY — filled gradient brand button */
.tx-screen__footer .btn--primary {
background: var(--brand-gradient);
color: #ffffff;
border: 1px solid transparent;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.28);
}
.tx-screen__footer .btn--primary:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(59, 130, 246, 0.38);
}
.tx-screen__footer .btn--primary:active:not(:disabled) {
transform: translateY(0) scale(0.99);
box-shadow: 0 2px 6px rgba(59, 130, 246, 0.32);
}
.tx-screen__footer .btn--primary:disabled {
opacity: 0.6;
cursor: not-allowed;
box-shadow: none;
}
/* SECONDARY — 🆕 v3.1.0 Phase G6d: draft §5 line 630 style
Grey filled bg (no border) + muted text → clear hierarchy vs primary Save */
.tx-screen__footer .btn--secondary {
background: #f8fafc;
color: #64748b;
border: 1px solid transparent;
box-shadow: none;
}
.tx-screen__footer .btn--secondary:hover:not(:disabled) {
background: #eef2f7;
color: #475569;
transform: translateY(-1px);
}
.tx-screen__footer .btn--secondary:active:not(:disabled) {
transform: translateY(0) scale(0.99);
background: #e2e8f0;
}
.tx-screen__footer .btn--secondary:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Split footer — Edit + Confirm side-by-side, equal width */
.tx-screen__footer--split {
display: flex;
gap: var(--space-3);
align-items: stretch;
}
.tx-screen__footer--split .btn--primary,
.tx-screen__footer--split .btn--secondary {
flex: 1;
width: auto;
}
/* 🆕 v3.1.0 Phase G6d — draft §5 line 630: Cancel = auto content width,
Save fills the rest. Save gets max visual weight as primary CTA. */
.tx-screen__footer--split .btn--secondary {
flex: 0 0 auto;
padding: 0 16px;
}
.tx-screen__footer--split .btn--primary {
flex: 1 1 auto;
}
/* ================================================================
8.2 ACCOUNT PICKER SCREEN — Big search + grouped item list
================================================================ */
/* Sticky search wrap — full-bleed solid bar; items disappear behind it when scrolled */
.picker-search-wrap {
position: sticky;
top: 0;
z-index: 5;
/* Full-bleed: cancel parent .tx-screen__content--picker side padding */
margin: 0 calc(var(--space-4) * -1) var(--space-3);
padding: var(--space-3) var(--space-4) var(--space-3);
/* OPAQUE background — items scroll UNDER, never show through */
background: var(--surface-1, #fff);
border-bottom: 1px solid var(--border-soft, #e2e8f0);
box-shadow: 0 4px 12px -8px rgba(15, 23, 42, 0.18);
/* Make input itself the positioning context for the icon */
display: flex;
align-items: center;
}
.picker-search-icon {
position: absolute;
left: calc(var(--space-4) + var(--space-3));
top: 50%;
transform: translateY(-50%);
color: var(--text-secondary);
font-size: 20px;
pointer-events: none;
z-index: 1;
}
.picker-search {
width: 100%;
height: 44px;
padding: 0 var(--space-3) 0 44px;
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
background: var(--surface-2);
font-size: var(--fs-body);
color: var(--text-primary);
box-sizing: border-box;
-webkit-appearance: none;
appearance: none;
}
.picker-search:focus {
outline: none;
border-color: var(--accent-blue, #3b82f6);
background: var(--surface-1, #fff);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.picker-search::-webkit-search-cancel-button {
-webkit-appearance: none;
}
.picker-list {
display: flex;
flex-direction: column;
}
.picker-group {
margin-bottom: var(--space-3);
}
.picker-group__title {
font-size: 11px;
font-weight: var(--fw-semi, 600);
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.6px;
padding: var(--space-2) var(--space-1);
margin: 0 0 var(--space-1);
}
/* 🆕 v3.1.0 Phase AC account-picker Round 1 — picker-item lift + hover
with brand lift and better selected state. */
.picker-item {
display: flex;
align-items: center;
gap: var(--space-2);
width: 100%;
padding: var(--space-3);
background: var(--surface-1, #fff);
border: 1.5px solid var(--border-soft, #eef1f5);
border-radius: var(--r-md);
margin-bottom: var(--space-2);
cursor: pointer;
text-align: left;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
transition: background .18s ease, border-color .18s ease,
box-shadow .18s ease, transform .14s cubic-bezier(0.16, 1, 0.3, 1);
-webkit-tap-highlight-color: transparent;
font-family: inherit;
}
.picker-item:hover {
background: var(--surface-2);
border-color: #93c5fd;
box-shadow: 0 6px 16px -4px rgba(37, 99, 235, 0.16),
0 2px 6px -1px rgba(15, 23, 42, 0.06);
transform: translateY(-1px);
}
.picker-item:active {
transform: scale(0.98);
}
.picker-item.is-selected {
border-color: var(--brand-500, #3b82f6);
background: rgba(37, 99, 235, 0.08);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14),
0 4px 12px -4px rgba(37, 99, 235, 0.22);
}
.picker-item__badge {
flex-shrink: 0;
padding: 2px 8px;
border-radius: var(--r-sm);
font-size: 10px;
font-weight: var(--fw-bold, 700);
text-transform: uppercase;
letter-spacing: 0.4px;
min-width: 56px;
text-align: center;
}
.picker-item__name {
flex: 1;
font-weight: var(--fw-medium, 500);
color: var(--text-primary);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.picker-item__balance {
font-size: var(--fs-caption, 0.75rem);
color: var(--text-secondary);
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
.picker-item__check {
color: var(--accent-blue, #3b82f6);
font-size: 20px;
margin-left: var(--space-1);
}
.picker-empty {
text-align: center;
padding: var(--space-6) var(--space-4);
color: var(--text-secondary);
}
.picker-empty i {
font-size: 48px;
opacity: 0.4;
display: block;
margin-bottom: var(--space-2);
}
.picker-empty p {
margin: 0;
font-size: var(--fs-body);
}
/* ============================================
🆕 v3.1.0 Phase H — Account Picker (draft §24 Hi-Fi)
Adds: Recent chip row · "+ Add new" sticky footer
============================================ */
/* Recent chips section (top-3 most recently selected accounts of matching type) */
/* 🆕 v3.1.0 Phase G10 rev2 — Recent uses .picker-item (identical to main list).
Section separated from list below by a divider line. Hidden while searching. */
.picker-recent {
/* 🆕 v3.1.0 Phase G10 rev6 rev2 — bg tint removed per user request.
Keep clock icons + stronger 2px divider as the visual distinction. */
margin: 0 0 12px;
padding-bottom: 12px;
border-bottom: 2px solid var(--pf-line, #eaedf1);
}
/* 🆕 v3.1.0 Phase G10 rev3 — safety rule ensuring [hidden] wins over any inherited display */
.picker-recent[hidden] {
display: none !important;
}
.picker-recent__heading {
/* 🆕 v3.1.0 Phase G10 rev6 — heading now flexes with a leading clock icon */
margin: 0 0 8px;
padding-left: 12px;
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--pf-muted-2, #94a3b8);
}
.picker-recent__heading > i {
font-size: 12px;
color: var(--pf-muted-2, #94a3b8);
line-height: 1;
}
/* 🆕 v3.1.0 Phase G10 rev6 — Clock icon prepended to each recent .picker-item.
Placed BEFORE the badge so users read "🕒 [BANK] Kasikorn ..." top-to-bottom. */
.picker-recent__mark {
font-size: 14px;
color: #94a3b8;
flex-shrink: 0;
line-height: 1;
margin-right: 2px;
}
.picker-recent__row {
display: flex;
flex-direction: column;
/* 🆕 v3.1.0 Phase G10 rev5 — match main list spacing (var(--space-2) = 8px between items) */
gap: var(--space-2);
margin: 0;
padding: 0;
list-style: none;
}
.picker-recent__cell {
display: block;
min-width: 0;
}
/* Recent .picker-item: drop its own margin-bottom since .picker-recent__row uses `gap`.
Prevents double spacing between items + keeps last item flush with divider. */
.picker-recent .picker-item {
margin-bottom: 0;
}
/* Picker footer — "+ Add new" sticky action */
.tx-screen__footer--picker {
padding: 12px 18px calc(16px + env(safe-area-inset-bottom, 0px));
}
.picker-new-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
height: 48px;
border: 1.5px dashed #93c5fd;
border-radius: 12px;
background: #f8fafc;
color: var(--pf-primary, #2563eb);
font-size: 14px;
font-weight: 600;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background 140ms var(--pf-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
border-color 140ms var(--pf-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
transform 140ms var(--pf-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.picker-new-btn i { font-size: 18px; }
.picker-new-btn:hover {
background: #eff6ff;
border-color: var(--pf-primary, #2563eb);
}
.picker-new-btn:active { transform: scale(0.99); }
/* Ensure the account form sheet floats ABOVE the picker sheet (nested).
.app-sheet base has z-index:var(--z-sheet,1200). Since acctSheet opens
AFTER addSheet is already open, we lift its whole stacking context.
🆕 v3.1.0 Phase H hotfix — z-index MUST stay under VKB layers so the
virtual keyboard/NumPad can paint on top of the form:
addSheet 1200 < acctSheet 5000 < NumPad 9500 < TextKeyboard 9600 < Toast 9999
Full z-index scale refactor deferred to Phase O (design token pass). */
#acctSheet {
z-index: 5000 !important;
}
#acctSheet .app-sheet__panel {
z-index: 5000;
}
/* ================================================================
8.3 REVIEW SCREEN — Read-only confirmation page
================================================================ */
/* 🆕 v3.1.0 Phase O §15 — gradient hero per draft §3a Review (Step 4).
Replaces the stacked Type/Amount/Date rows at the top of the review
body with a single bold summary card. */
/* 🆕 v3.1.0 Phase Z §3a Round 4 — Review hero animations:
bounce-in on screen reveal (0.5s spring), 2-layer type-tinted shadow
for better depth over the body background. */
.tx-review-hero {
text-align: center;
padding: 22px 18px;
margin-bottom: 18px;
border-radius: 16px;
background: var(--brand-gradient-deep);
color: #fff;
box-shadow: 0 10px 28px -4px rgba(37, 99, 235, 0.35),
0 3px 8px -2px rgba(15, 23, 42, 0.14);
animation: txReviewHeroPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tx-review-hero--expense {
background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
box-shadow: 0 10px 28px -4px rgba(220, 38, 38, 0.35),
0 3px 8px -2px rgba(15, 23, 42, 0.14);
}
.tx-review-hero--income {
background: linear-gradient(135deg, #059669 0%, #065f46 100%);
box-shadow: 0 10px 28px -4px rgba(5, 150, 105, 0.35),
0 3px 8px -2px rgba(15, 23, 42, 0.14);
}
.tx-review-hero--transfer {
background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
box-shadow: 0 10px 28px -4px rgba(8, 145, 178, 0.35),
0 3px 8px -2px rgba(15, 23, 42, 0.14);
}
@keyframes txReviewHeroPop {
0% { opacity: 0; transform: scale(0.9) translateY(10px); }
60% { opacity: 1; transform: scale(1.02) translateY(0); }
100% { opacity: 1; transform: scale(1) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.tx-review-hero { animation: none; }
}
.tx-review-hero__chip {
display: inline-block;
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 99px;
padding: 3px 12px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #fff;
}
.tx-review-hero__amount {
margin: 14px 0 4px;
font-size: 28px;
font-weight: 800;
color: #fff;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.tx-review-hero__date {
margin: 0;
font-size: 12.5px;
color: rgba(255, 255, 255, 0.82);
}
.review-meta {
display: flex;
flex-direction: column;
gap: 0;
margin-bottom: var(--space-4);
}
.review-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-3) 0;
border-bottom: 1px solid var(--border-soft);
}
.review-row:last-child {
border-bottom: none;
}
.review-row__label {
flex-shrink: 0;
color: var(--text-secondary);
font-size: 11px;
font-weight: var(--fw-semi, 600);
text-transform: uppercase;
letter-spacing: 0.6px;
}
.review-row__value {
text-align: right;
font-weight: var(--fw-medium, 500);
color: var(--text-primary);
word-break: break-word;
}
.review-row__value.is-big {
font-size: var(--fs-h2, 1.25rem);
font-weight: var(--fw-bold, 700);
}
.review-section {
margin-top: var(--space-4);
padding-top: var(--space-3);
border-top: 2px solid var(--border-soft);
}
.review-section__title {
font-size: 13px;
font-weight: var(--fw-semi, 600);
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.6px;
margin: 0 0 var(--space-2);
}
.review-line {
display: grid;
grid-template-columns: 48px 1fr auto;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) 0;
border-bottom: 1px dashed var(--border-soft);
}
.review-line:last-of-type {
border-bottom: none;
}
.review-line__entry {
padding: 4px 0;
border-radius: var(--r-sm);
text-align: center;
font-weight: var(--fw-bold, 700);
font-size: 13px;
letter-spacing: 0.3px;
}
.review-line__entry.is-dr {
background: rgba(59, 130, 246, 0.12);
color: #1d4ed8;
}
.review-line__entry.is-cr {
background: rgba(16, 185, 129, 0.12);
color: #047857;
}
.review-line__name {
font-weight: var(--fw-medium, 500);
color: var(--text-primary);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.review-line__amount {
font-variant-numeric: tabular-nums;
font-weight: var(--fw-medium, 500);
color: var(--text-primary);
}
.review-totals {
margin-top: var(--space-3);
padding-top: var(--space-3);
border-top: 2px solid var(--border-soft);
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.review-total-row {
display: flex;
justify-content: space-between;
align-items: center;
font-variant-numeric: tabular-nums;
}
.review-total-row__label {
color: var(--text-secondary);
font-weight: var(--fw-medium, 500);
}
.review-total-row__value {
font-weight: var(--fw-bold, 700);
color: var(--text-primary);
}
/* 🆕 v3.1.0 Phase Z §3a Round 4 — balance check: deeper tint + glow +
icon color intensity + check-mark bounce on balanced state. */
.review-balance-check {
margin-top: var(--space-3);
padding: var(--space-3) var(--space-4);
border-radius: var(--r-md);
display: flex;
align-items: center;
gap: var(--space-2);
font-weight: var(--fw-semi, 600);
font-size: 13.5px;
transition: background .18s ease, border-color .18s ease;
}
.review-balance-check i { font-size: 20px; }
.review-balance-check.is-balanced {
background: #f0fdf4;
color: #047857;
border: 1.5px solid #86efac;
box-shadow: 0 4px 14px -4px rgba(16, 185, 129, 0.22);
}
.review-balance-check.is-balanced i {
color: #059669;
animation: reviewBalanceCheckPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes reviewBalanceCheckPop {
0% { transform: scale(0.4) rotate(-20deg); }
60% { transform: scale(1.2) rotate(5deg); }
100% { transform: scale(1) rotate(0); }
}
.review-balance-check.is-unbalanced {
background: #fef2f2;
color: #991b1b;
border: 1.5px solid #fca5a5;
box-shadow: 0 4px 14px -4px rgba(220, 38, 38, 0.22);
animation: reviewUnbalancedShake 0.4s ease;
}
.review-balance-check.is-unbalanced i {
color: #dc2626;
}
@keyframes reviewUnbalancedShake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-4px); }
75% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
.review-balance-check.is-balanced i,
.review-balance-check.is-unbalanced { animation: none; }
}
.review-warn {
margin-top: var(--space-4);
padding: var(--space-3);
border-radius: var(--r-md);
background: rgba(251, 191, 36, 0.1);
border: 1px solid rgba(251, 191, 36, 0.35);
color: #92400e;
display: flex;
align-items: flex-start;
gap: var(--space-2);
font-size: var(--fs-caption, 0.875rem);
}
.review-warn i {
font-size: 20px;
flex-shrink: 0;
}
/* ================================================================
9. CHIP — filter / category tag
================================================================ */
.chip-row {
display: flex;
gap: var(--space-2);
overflow-x: auto;
padding: var(--space-2) var(--space-4);
margin: 0 calc(var(--space-4) * -1); /* bleed full width */
scrollbar-width: none;
}
.chip-row::-webkit-scrollbar { display: none; }
.chip {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 6px 14px;
height: 32px;
border-radius: var(--r-full);
background: var(--surface-2);
border: 1px solid transparent;
color: var(--text-secondary);
font-size: var(--fs-caption);
font-weight: var(--fw-medium);
cursor: pointer;
transition: all 0.15s ease;
white-space: nowrap;
}
.chip:active {
transform: scale(0.96);
}
.chip.is-active {
background: rgba(6, 182, 212, 0.15);
border-color: rgba(6, 182, 212, 0.45);
color: var(--accent-cyan-light);
}
.chip__icon { font-size: 14px; }
/* ================================================================
10. SEGMENTED CONTROL — Income/Expense/Transfer
================================================================ */
.segmented {
display: inline-flex;
width: 100%;
padding: 3px;
border-radius: var(--r-md);
background: var(--surface-2);
border: 1px solid var(--border-soft);
}
/* HTML `hidden` attribute must beat display:inline-flex above */
.segmented[hidden] {
display: none !important;
}
.segmented__option {
flex: 1;
padding: var(--space-2) var(--space-3);
background: transparent;
border: none;
border-radius: calc(var(--r-md) - 3px);
font-size: var(--fs-caption);
font-weight: var(--fw-semi);
color: var(--text-secondary);
cursor: pointer;
transition: all 0.2s ease;
}
.segmented__option.is-active {
background: var(--brand-gradient);
color: #ffffff;
box-shadow: var(--elev-1);
}
/* ================================================================
11. SKELETON LOADER
================================================================ */
.skeleton {
background: linear-gradient(
90deg,
var(--surface-2) 0%,
var(--surface-3) 50%,
var(--surface-2) 100%
);
background-size: 200% 100%;
animation: skeletonShimmer 1.4s ease-in-out infinite;
border-radius: var(--r-sm);
}
.skeleton--line { height: 14px; }
.skeleton--title { height: 22px; width: 50%; }
.skeleton--circle{ border-radius: var(--r-full); }
.skeleton--card { height: 80px; }
/* 🆕 v3.1.0 Phase O polish sweep (round 3) — new skeleton variants */
.skeleton--pill { height: 24px; width: 72px; border-radius: 999px; }
.skeleton--amount { height: 28px; width: 140px; border-radius: 6px; }
.skeleton--icon { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; }
.skeleton--row {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
border-bottom: 1.5px solid var(--border-soft, #eaedf1);
background: transparent;
animation: none; /* parent children shimmer independently */
}
.skeleton--row:last-child { border-bottom: 0; }
.skeleton--row .skeleton__body {
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
}
/* 🆕 v3.1.0 Phase O polish round 4 — Chart.js canvas skeletons.
Positioned absolute over the (initially empty) canvas; auto-hidden
using the :has() selector once Chart.js writes inline width/height
onto the canvas. No JS hook needed. */
.report-chart-wrap,
.report-donut-wrap { position: relative; }
.chart-skel {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
transition: opacity 0.25s ease;
}
/* Chart.js sets inline style="display: block; ...; width: Xpx; height: Ypx;"
on the canvas once the chart has rendered. We use that as our ready signal. */
.report-chart-wrap:has(canvas[style*="width"]) .chart-skel,
.report-donut-wrap:has(canvas[style*="width"]) .chart-skel {
opacity: 0;
visibility: hidden;
}
/* Bars variant — monthly trend chart */
.chart-skel--bars {
display: flex;
align-items: flex-end;
justify-content: space-around;
gap: 10%;
padding: 10px 8px;
}
.chart-skel--bars span {
flex: 1;
max-width: 32px;
border-radius: 6px 6px 0 0;
background: linear-gradient(
90deg,
var(--surface-2) 0%,
var(--surface-3) 50%,
var(--surface-2) 100%
);
background-size: 200% 100%;
animation: skeletonShimmer 1.4s ease-in-out infinite;
}
/* Donut variant — ring with transparent center */
.chart-skel--donut {
display: grid;
place-items: center;
}
.chart-skel--donut::before {
content: '';
width: 80%;
aspect-ratio: 1 / 1;
border-radius: 50%;
background: conic-gradient(
var(--surface-3) 0 25%,
var(--surface-2) 25% 50%,
var(--surface-3) 50% 75%,
var(--surface-2) 75% 100%
);
mask: radial-gradient(circle, transparent 42%, #000 44%);
-webkit-mask: radial-gradient(circle, transparent 42%, #000 44%);
animation: skeletonSpin 2.4s linear infinite;
}
@keyframes skeletonSpin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.chart-skel--bars span,
.chart-skel--donut::before { animation: none !important; }
}
@keyframes skeletonShimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ================================================================
12. EMPTY STATE
================================================================ */
.empty-state {
text-align: center;
padding: var(--space-12) var(--space-4);
color: var(--text-secondary);
}
.empty-state__icon {
font-size: 56px;
color: var(--text-muted);
margin-bottom: var(--space-3);
display: block;
}
.empty-state__title {
font-size: var(--fs-h2);
font-weight: var(--fw-semi);
color: var(--text-primary);
margin: 0 0 var(--space-2);
}
.empty-state__message {
font-size: var(--fs-body);
color: var(--text-secondary);
margin: 0 0 var(--space-5);
max-width: 320px;
margin-left: auto;
margin-right: auto;
}
/* ================================================================
13. NUMBER PAD (สำหรับ amount input ใน Add Transaction)
================================================================ */
.number-pad {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-2);
padding: var(--space-3);
}
.number-pad__key {
height: 56px;
border-radius: var(--r-md);
background: var(--surface-2);
border: none;
color: var(--text-primary);
font-size: 22px;
font-weight: var(--fw-medium);
cursor: pointer;
transition: background 0.1s ease;
}
.number-pad__key:active {
background: var(--surface-3);
}
/* ================================================================
12b. ADD TRANSACTION FORM — Simple + Advanced
================================================================ */
/* 🆕 v3.1.0 Phase G6a — Amount input restyle per draft §5 line 624:
[฿ bold blue 15px] [mono right-align 22px input] inside bordered box.
Also #txSimple gets display:flex so per-subtype flex-order (Deposit) works. */
#txSimple {
display: flex;
flex-direction: column;
}
.tx-amount-wrap {
display: block;
text-align: left;
/* 🆕 v3.1.0 Phase G6a fix — match .tx-field margin pattern (space-4 top)
so Amount doesn't visually stick to the field above (FEE/Account). */
margin: var(--space-4) 0 var(--space-3);
}
.tx-amount-label {
/* 🆕 v3.1.0 Phase G6a fix7 — RESTORED to bold uppercase style (user pref).
.tx-field__label below is updated to match this — all form labels consistent. */
display: block;
font-size: 11px;
font-weight: 700;
color: var(--pf-muted-2, #64748b);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 6px;
}
.tx-amount-row {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
background: var(--pf-card, #ffffff);
border: 1.5px solid var(--border-soft, #eaedf1);
border-radius: 12px;
transition: border-color 160ms ease, box-shadow 180ms ease, background 160ms ease;
}
/* 🆕 v3.1.0 Phase Z §3a Round 3 — deeper 2-tone focus glow (match
login input + security-method rename input). */
.tx-amount-row:focus-within {
border-color: var(--brand-500, #3b82f6);
background: var(--surface-1, #fff);
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12),
0 4px 12px -4px rgba(37, 99, 235, 0.22);
}
.tx-amount-currency {
font-size: 15px;
color: var(--pf-primary, #2563eb);
font-weight: 700;
flex-shrink: 0;
}
.tx-amount-input {
flex: 1;
/* 🆕 v3.1.0 Phase G6a fix — reset ALL UA input styling.
Some browsers (particularly iOS Safari) render an inset border/background
on even when CSS says border:none — appearance:none
forces the native "field" look off completely. box-shadow:none clears any
inset shadow that some browsers use to simulate the border. */
-webkit-appearance: none;
appearance: none;
background: transparent;
border: none;
outline: none;
box-shadow: none;
color: var(--pf-ink, #0e1f44);
font-family: 'IBM Plex Mono', monospace;
font-size: 22px;
font-weight: 700;
text-align: right;
padding: 0;
font-variant-numeric: tabular-nums;
min-width: 0;
}
.tx-amount-input::placeholder { color: #cbd5e1; font-weight: 500; }
/* 🆕 v3.1.0 Phase G6a fix3 — ID-based override (specificity 1,0,0 — guaranteed win).
Previous class-based override wasn't beating the shared .is-kb-active rule in
some browsers/scenarios. #txAmount targets the specific input directly, forcing
transparent bg/no border under ALL states (idle, hover, focus, kb-active). */
#txAmount,
#txAmount:focus,
#txAmount.is-kb-active,
#txAmount:focus-visible {
-webkit-appearance: none !important;
appearance: none !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
}
/* 🟢 Item 1: hide placeholder on focus */
.tx-amount-input:focus::placeholder {
color: transparent;
}
/* 🟡 Balance warning under amount — shown only when amount fails validation */
.tx-amount-warn {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
margin-top: var(--space-2);
padding: var(--space-2) var(--space-3);
background: rgba(245, 158, 11, 0.12);
border: 1px solid rgba(245, 158, 11, 0.4);
color: #b45309;
border-radius: var(--r-sm);
font-size: var(--fs-caption);
font-weight: var(--fw-medium);
}
.tx-amount-warn i { font-size: 16px; }
/* Force [hidden] attribute to override display:flex above */
.tx-amount-warn[hidden] { display: none !important; }
/* 🛡️ DEFENSIVE — any element with the HTML `hidden` attribute must be hidden,
regardless of how aggressive its class's display: flex/grid rule is.
This prevents the "shows when it shouldn't" bug class-wide. */
[hidden] { display: none !important; }
.tx-field { margin-top: var(--space-4); }
.tx-field__label {
/* 🆕 v3.1.0 Phase G6a fix7 — Match .tx-amount-label bold uppercase style
(user pref: labels bold + smaller/tighter for better visual hierarchy).
Affects all forms using .tx-field__label (Add Tx + Account form). */
display: block;
font-size: 11px;
font-weight: 700;
color: var(--pf-muted-2, #64748b);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 6px;
}
/* 🆕 v3.1.0 Phase Z §3a Round 3 — form inputs: 1→1.5 border + brand focus
glow matching login/security-method rename input pattern. */
.tx-select, .tx-input {
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
height: 48px;
padding: 0 var(--space-3);
background: var(--surface-2);
border: 1.5px solid var(--border-soft);
border-radius: var(--r-md);
color: var(--text-primary);
font-size: var(--fs-body);
color-scheme: light;
font-family: inherit;
font-weight: var(--fw-medium, 500);
transition: border-color 160ms ease, box-shadow 180ms ease, background 160ms ease;
}
.tx-select:focus, .tx-input:focus {
outline: none;
border-color: var(--brand-500, #3b82f6);
background: var(--surface-1, #fff);
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}
/* 🆕 Date input — Add/Edit Transaction (tx-input).
We REPLACED the native iOS calendar popup with our custom calendar-grid
date picker (date-picker.js), so we can now safely use appearance:none
to clean up native rendering. Native fields used to expand past the
container, especially on iOS where "yyyy-mm-dd" + calendar icon have a
fixed intrinsic width. */
input[type="date"].tx-input {
appearance: none;
-webkit-appearance: none;
display: block;
text-align: left;
line-height: 48px;
font-family: inherit;
font-size: var(--fs-body);
font-weight: var(--fw-medium, 500);
letter-spacing: normal;
width: 100%;
min-width: 0;
box-sizing: border-box;
overflow: hidden;
}
/* iOS native picker pieces — keep typography consistent if anything leaks */
input[type="date"].tx-input::-webkit-date-and-time-value,
input[type="date"].tx-input::-webkit-datetime-edit,
input[type="date"].tx-input::-webkit-datetime-edit-fields-wrapper,
input[type="date"].tx-input::-webkit-datetime-edit-year-field,
input[type="date"].tx-input::-webkit-datetime-edit-month-field,
input[type="date"].tx-input::-webkit-datetime-edit-day-field,
input[type="date"].tx-input::-webkit-datetime-edit-text {
text-align: left;
font-family: inherit;
font-size: var(--fs-body);
font-weight: var(--fw-medium, 500);
color: var(--text-primary);
line-height: 48px;
}
/* Hide native calendar-icon indicator — custom calendar-grid picker
opens on focus instead, so the native icon is redundant. */
input[type="date"].tx-input::-webkit-calendar-picker-indicator {
display: none;
-webkit-appearance: none;
}
.tx-grid-2 {
margin-top: var(--space-4);
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3);
}
.tx-mode-toggle {
background: transparent;
border: 1px dashed var(--border-soft);
color: var(--text-secondary);
padding: var(--space-2) var(--space-4);
border-radius: var(--r-full);
font-size: var(--fs-caption);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: var(--space-2);
transition: all 0.15s ease;
}
.tx-mode-toggle:hover {
background: var(--surface-2);
color: var(--text-primary);
}
.tx-mode-toggle i { font-size: 16px; }
/* 🟢 Item 8: Note textarea */
.tx-textarea {
height: auto !important;
min-height: 56px;
padding: var(--space-2) var(--space-3) !important;
font-family: var(--font-main);
resize: vertical;
line-height: 1.4;
}
.tx-textarea__count {
text-align: right;
font-size: 11px;
color: var(--text-muted);
margin-top: 4px;
}
/* ===== Advanced mode ===== */
.tx-help {
font-size: var(--fs-caption);
color: var(--text-secondary);
background: rgba(6, 182, 212, 0.08);
border-left: 3px solid var(--accent-cyan);
padding: var(--space-3) var(--space-3);
/* 🟢 Item 7: extra spacing between Smart-mode label & segmented control */
margin-top: var(--space-4);
margin-bottom: var(--space-4);
border-radius: var(--r-sm);
}
.tx-help strong { color: var(--accent-cyan-light); }
/* ===== Advanced lines = vertical cards ===== */
.tx-lines {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-bottom: var(--space-3);
}
.tx-line {
position: relative;
padding: var(--space-3) var(--space-3) var(--space-4);
background: var(--surface-1);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
/* --- Header with line number + remove button (top-right) --- */
.tx-line__header {
display: flex;
align-items: center;
justify-content: space-between;
}
.tx-line__num {
font-size: var(--fs-caption);
font-weight: var(--fw-semi);
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.tx-line__remove {
background: transparent;
border: 1px solid transparent;
color: var(--text-muted);
cursor: pointer;
font-size: 20px;
width: 32px;
height: 32px;
border-radius: var(--r-sm);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
}
.tx-line__remove:hover {
background: rgba(244, 63, 94, 0.1);
color: #e11d48;
border-color: rgba(244, 63, 94, 0.25);
}
/* --- Field (label + control) --- */
.tx-line__field {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.tx-line__label {
font-size: 11px;
font-weight: var(--fw-semi);
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
display: flex;
align-items: center;
justify-content: space-between;
}
.tx-line__label-hint {
font-weight: var(--fw-regular);
text-transform: none;
letter-spacing: 0;
color: var(--text-muted);
font-size: 11px;
}
/* --- Native