/* ============================================================================ Design tokens. Every color in this stylesheet resolves through a token declared here, so a theme is a matter of redefining this block rather than hunting literals. The page ground sits meaningfully below card white (rather than the two-point gap it used to have) so cards read as raised instead of dissolving into the page. Three viewer states are covered: an explicit choice stamps data-theme on , and the default "system" setting stamps nothing, leaving only prefers-color-scheme to separate light from dark. ============================================================================ */ :root { color-scheme: light; /* Surfaces */ --bg-primary: #e6e8ec; --bg-secondary: #ffffff; --bg-card: #ffffff; --bg-card-hover: #ffffff; --bg-inset: #f4f6f9; --bg-track: #e4e7ec; --bg-elevated: #ffffff; --bg-frost: rgba(255, 255, 255, 0.85); --bg-frost-strong: rgba(255, 255, 255, 0.95); --bg-pill-idle: rgba(255, 255, 255, 0.4); --bg-scrim: rgba(20, 25, 40, 0.32); /* Lines */ --border-color: #d6d9df; --border-subtle: #e7e9ee; --border-strong: #c2c7d0; --border-hairline: rgba(20, 25, 40, 0.08); --border-focus: rgba(0, 113, 227, 0.4); /* Text */ --text-primary: #1d1d1f; --text-secondary: #5c6270; --text-muted: #858b97; --text-on-accent: #ffffff; /* Accents — Apple system palette, the app's single source of hue */ --accent-blue: #0071e3; --accent-blue-hover: #0077ed; --accent-green: #248a3d; --accent-green-text: #1b7a3e; --accent-red: #d70015; --accent-amber: #b25e00; --accent-purple: #862e9c; --accent-teal: #0ca678; --accent-cyan: #1098ad; --accent-indigo: #3b5bdb; /* Tinted pills: a wash, a hairline and a legible foreground per hue */ --tint-blue-bg: #eef6fc; --tint-blue-border: #bfdbfe; --tint-blue-fg: #1d4ed8; --tint-green-bg: #ecfdf5; --tint-green-border: #a7f3d0; --tint-green-fg: #047857; --tint-teal-bg: #e6fcf5; --tint-teal-border: #96f2d7; --tint-teal-fg: #0ca678; --tint-cyan-bg: #e3fafc; --tint-cyan-border: #99e9f2; --tint-cyan-fg: #1098ad; --tint-indigo-bg: #f0f4ff; --tint-indigo-border: #c7d2fe; --tint-indigo-fg: #3b5bdb; --tint-purple-bg: #f8f0fc; --tint-purple-border: #eebefa; --tint-purple-fg: #862e9c; --tint-yellow-bg: #fffbeb; --tint-yellow-border: #fde68a; --tint-yellow-fg: #b7791f; --tint-amber-bg: #fff8eb; --tint-amber-border: #fce3b8; --tint-amber-fg: #b45309; --tint-orange-bg: #fff4eb; --tint-orange-border: #ffd8a8; --tint-orange-fg: #b54708; --tint-red-bg: #fef2f2; --tint-red-border: #fecaca; --tint-red-fg: #b91c1c; /* Saturated fills for badges and status chips that must read as solid */ --solid-info-bg: #0071e3; --solid-success-bg: #10b981; --solid-warn-bg: #b25e00; --solid-danger-bg: #d70015; /* Data visualization */ --chart-line: var(--accent-blue); --chart-fill-top: rgba(0, 113, 227, 0.18); --chart-fill-bottom: rgba(0, 113, 227, 0); --chart-grid: rgba(20, 25, 40, 0.10); --chart-axis-text: #858b97; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-full: 9999px; --shadow-sm: 0 1px 2px rgba(20, 25, 40, 0.06); --shadow-md: 0 2px 10px rgba(20, 25, 40, 0.07), 0 1px 2px rgba(20, 25, 40, 0.04); --shadow-lg: 0 12px 32px rgba(20, 25, 40, 0.10), 0 2px 8px rgba(20, 25, 40, 0.05); } /* Dark, for viewers who never stamped a preference (system default). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg-primary: #121417; --bg-secondary: #1a1d23; --bg-card: #1a1d23; --bg-card-hover: #1f232a; --bg-inset: #22262e; --bg-track: #2a2f38; --bg-elevated: #22262e; --bg-frost: rgba(22, 25, 30, 0.85); --bg-frost-strong: rgba(28, 32, 39, 0.95); --bg-pill-idle: rgba(255, 255, 255, 0.05); --bg-scrim: rgba(0, 0, 0, 0.6); --border-color: #2e333c; --border-subtle: #262a32; --border-strong: #3c424d; --border-hairline: rgba(255, 255, 255, 0.08); --border-focus: rgba(10, 132, 255, 0.55); --text-primary: #e8eaee; --text-secondary: #9aa1ad; --text-muted: #737a86; --text-on-accent: #ffffff; /* Apple's dark-mode variants: the light-mode accents go muddy on a dark ground, so these are lifted rather than inverted. */ --accent-blue: #0a84ff; --accent-blue-hover: #409cff; --accent-green: #30d158; --accent-green-text: #34c759; --accent-red: #ff453a; --accent-amber: #ff9f0a; --accent-purple: #bf5af2; --accent-teal: #2dd4bf; --accent-cyan: #40c8e0; --accent-indigo: #7c8cf8; --tint-blue-bg: rgba(10, 132, 255, 0.15); --tint-blue-border: rgba(10, 132, 255, 0.32); --tint-blue-fg: #6cb6ff; --tint-green-bg: rgba(48, 209, 88, 0.14); --tint-green-border: rgba(48, 209, 88, 0.30); --tint-green-fg: #5ddb84; --tint-teal-bg: rgba(45, 212, 191, 0.14); --tint-teal-border: rgba(45, 212, 191, 0.30); --tint-teal-fg: #5fdfcd; --tint-cyan-bg: rgba(64, 200, 224, 0.14); --tint-cyan-border: rgba(64, 200, 224, 0.30); --tint-cyan-fg: #6ad6ea; --tint-indigo-bg: rgba(124, 140, 248, 0.15); --tint-indigo-border: rgba(124, 140, 248, 0.32); --tint-indigo-fg: #9aa7fa; --tint-purple-bg: rgba(191, 90, 242, 0.14); --tint-purple-border: rgba(191, 90, 242, 0.30); --tint-purple-fg: #d18cf7; --tint-yellow-bg: rgba(255, 214, 10, 0.13); --tint-yellow-border: rgba(255, 214, 10, 0.28); --tint-yellow-fg: #f5d06a; --tint-amber-bg: rgba(255, 159, 10, 0.14); --tint-amber-border: rgba(255, 159, 10, 0.30); --tint-amber-fg: #ffb95c; --tint-orange-bg: rgba(255, 122, 41, 0.14); --tint-orange-border: rgba(255, 122, 41, 0.30); --tint-orange-fg: #ff9d63; --tint-red-bg: rgba(255, 69, 58, 0.14); --tint-red-border: rgba(255, 69, 58, 0.30); --tint-red-fg: #ff8078; --solid-info-bg: #0a84ff; --solid-success-bg: #30d158; --solid-warn-bg: #ff9f0a; --solid-danger-bg: #ff453a; --chart-fill-top: rgba(10, 132, 255, 0.26); --chart-fill-bottom: rgba(10, 132, 255, 0); --chart-grid: rgba(255, 255, 255, 0.09); --chart-axis-text: #737a86; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3); } } /* Dark, chosen explicitly — wins over a light OS setting. */ :root[data-theme="dark"] { color-scheme: dark; --bg-primary: #121417; --bg-secondary: #1a1d23; --bg-card: #1a1d23; --bg-card-hover: #1f232a; --bg-inset: #22262e; --bg-track: #2a2f38; --bg-elevated: #22262e; --bg-frost: rgba(22, 25, 30, 0.85); --bg-frost-strong: rgba(28, 32, 39, 0.95); --bg-pill-idle: rgba(255, 255, 255, 0.05); --bg-scrim: rgba(0, 0, 0, 0.6); --border-color: #2e333c; --border-subtle: #262a32; --border-strong: #3c424d; --border-hairline: rgba(255, 255, 255, 0.08); --border-focus: rgba(10, 132, 255, 0.55); --text-primary: #e8eaee; --text-secondary: #9aa1ad; --text-muted: #737a86; --text-on-accent: #ffffff; --accent-blue: #0a84ff; --accent-blue-hover: #409cff; --accent-green: #30d158; --accent-green-text: #34c759; --accent-red: #ff453a; --accent-amber: #ff9f0a; --accent-purple: #bf5af2; --accent-teal: #2dd4bf; --accent-cyan: #40c8e0; --accent-indigo: #7c8cf8; --tint-blue-bg: rgba(10, 132, 255, 0.15); --tint-blue-border: rgba(10, 132, 255, 0.32); --tint-blue-fg: #6cb6ff; --tint-green-bg: rgba(48, 209, 88, 0.14); --tint-green-border: rgba(48, 209, 88, 0.30); --tint-green-fg: #5ddb84; --tint-teal-bg: rgba(45, 212, 191, 0.14); --tint-teal-border: rgba(45, 212, 191, 0.30); --tint-teal-fg: #5fdfcd; --tint-cyan-bg: rgba(64, 200, 224, 0.14); --tint-cyan-border: rgba(64, 200, 224, 0.30); --tint-cyan-fg: #6ad6ea; --tint-indigo-bg: rgba(124, 140, 248, 0.15); --tint-indigo-border: rgba(124, 140, 248, 0.32); --tint-indigo-fg: #9aa7fa; --tint-purple-bg: rgba(191, 90, 242, 0.14); --tint-purple-border: rgba(191, 90, 242, 0.30); --tint-purple-fg: #d18cf7; --tint-yellow-bg: rgba(255, 214, 10, 0.13); --tint-yellow-border: rgba(255, 214, 10, 0.28); --tint-yellow-fg: #f5d06a; --tint-amber-bg: rgba(255, 159, 10, 0.14); --tint-amber-border: rgba(255, 159, 10, 0.30); --tint-amber-fg: #ffb95c; --tint-orange-bg: rgba(255, 122, 41, 0.14); --tint-orange-border: rgba(255, 122, 41, 0.30); --tint-orange-fg: #ff9d63; --tint-red-bg: rgba(255, 69, 58, 0.14); --tint-red-border: rgba(255, 69, 58, 0.30); --tint-red-fg: #ff8078; --solid-info-bg: #0a84ff; --solid-success-bg: #30d158; --solid-warn-bg: #ff9f0a; --solid-danger-bg: #ff453a; --chart-fill-top: rgba(10, 132, 255, 0.26); --chart-fill-bottom: rgba(10, 132, 255, 0); --chart-grid: rgba(255, 255, 255, 0.09); --chart-axis-text: #737a86; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3); } /* @end-tokens */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Visibility is toggled by setting the hidden attribute (JS: el.hidden = true), never by writing an inline style.display — that leaves each call site guessing which display value the element's own class actually wants (flex? inline-flex? block?), and the two disagreed more than once. The !important guarantees this wins over any class's own display declaration regardless of source order, which a same-specificity attribute selector otherwise cannot promise. */ [hidden] { display: none !important; } body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "SF Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: var(--bg-primary); color: var(--text-primary); min-height: 100vh; display: flex; flex-direction: column; line-height: 1.47059; letter-spacing: -0.016em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Toast Notifications Container (Apple Floating Light Card) */ .toast-container { position: fixed; /* .navbar-container is 3.75rem tall; clear it with room to spare rather than overlapping the email/sign-out controls in its top-right corner. */ top: calc(3.75rem + 1rem); right: 1.5rem; z-index: 99999; display: flex; flex-direction: column; gap: 0.625rem; pointer-events: none; } .toast-item { pointer-events: auto; min-width: 280px; max-width: 420px; background: var(--bg-frost-strong); backdrop-filter: blur(25px) saturate(180%); -webkit-backdrop-filter: blur(25px) saturate(180%); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 0.75rem 1.125rem; color: var(--text-primary); font-size: 0.875rem; font-weight: 500; display: flex; align-items: center; gap: 0.625rem; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04); animation: toastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .toast-item.toast-success { border-left: 3px solid var(--accent-green); } .toast-item.toast-error { border-left: 3px solid var(--accent-red); } .toast-item.toast-info { border-left: 3px solid var(--accent-blue); } @keyframes toastSlideIn { from { opacity: 0; transform: translateY(-12px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes toastFadeOut { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-10px) scale(0.95); } } /* App Header & Navbar (Apple Translucent Frosted Glass Bar) */ .navbar { background: var(--bg-frost); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 50; } .navbar-container { max-width: 1320px; margin: 0 auto; padding: 0 1.75rem; height: 3.75rem; display: flex; align-items: center; justify-content: space-between; } .brand { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; cursor: pointer; } .brand-title { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.03em; color: var(--text-primary); } .brand-highlight { color: var(--accent-blue); font-weight: 500; margin-left: 1px; } .brand-logo-svg { display: block; border-radius: 7px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); } .brand:hover .brand-logo-svg { transform: scale(1.05); } /* Apple Segmented Navigation Pill */ .nav-links { display: flex; align-items: center; gap: 0.2rem; background: var(--bg-track); padding: 0.25rem; border-radius: var(--radius-full); border: 1px solid var(--border-hairline); } .nav-link { padding: 0.36rem 0.95rem; border-radius: var(--radius-full); color: var(--text-secondary); text-decoration: none; font-size: 0.8125rem; font-weight: 500; transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1); display: flex; align-items: center; gap: 0.45rem; cursor: pointer; border: 1px solid var(--border-hairline); background: var(--bg-pill-idle); } .nav-link:hover:not(.active) { color: var(--text-primary); background: var(--bg-frost); border-color: var(--border-hairline); } .nav-link.active { color: var(--text-primary); background: var(--bg-card); border-color: var(--border-color); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 1px rgba(0, 0, 0, 0.04); font-weight: 600; } .badge-counter { background: var(--solid-warn-bg); color: var(--text-on-accent); font-size: 0.7rem; font-weight: 700; padding: 0.12rem 0.48rem; border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center; line-height: 1.1; box-shadow: 0 1px 3px rgba(245, 158, 11, 0.4); letter-spacing: -0.01em; transition: transform 0.15s ease; } .nav-link:hover .badge-counter { transform: scale(1.08); } .nav-link.active .badge-counter { background: var(--solid-warn-bg); color: var(--text-on-accent); box-shadow: 0 1px 3px rgba(245, 158, 11, 0.5); } .nav-actions { display: flex; align-items: center; gap: 0.75rem; } .last-sync-badge { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.775rem; font-weight: 500; color: var(--text-secondary); background: var(--bg-track); padding: 0.3rem 0.7rem; border-radius: var(--radius-full); border: 1px solid var(--border-hairline); white-space: nowrap; transition: all 0.2s ease; } .last-sync-badge:hover { background: var(--bg-track); color: var(--text-primary); } .sync-icon-svg { width: 0.8125rem; height: 0.8125rem; color: var(--accent-blue); display: inline-block; flex-shrink: 0; } .tenant-badge { display: flex; align-items: center; gap: 0.45rem; font-size: 0.8125rem; color: var(--text-secondary); background: var(--bg-card); padding: 0.25rem 0.75rem 0.25rem 0.45rem; border-radius: var(--radius-full); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); } .user-avatar-initial { width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--bg-track); color: var(--text-primary); font-size: 0.6875rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; text-transform: uppercase; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); } .status-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background-color: var(--accent-green); box-shadow: 0 0 4px rgba(36, 138, 61, 0.4); display: inline-block; } .status-dot.warning { background-color: var(--accent-amber); box-shadow: 0 0 4px rgba(178, 94, 0, 0.4); } .status-dot.danger { background-color: var(--accent-red); box-shadow: 0 0 4px rgba(215, 0, 21, 0.4); } /* Main Container */ .main-container { max-width: 1320px; width: 100%; margin: 0 auto; padding: 2rem 1.75rem; flex: 1; } .view-section { display: none; animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .view-section.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Headings & Subheadings */ .section-header { margin-bottom: 1.75rem; display: flex; align-items: center; justify-content: space-between; } .section-title { font-size: 1.875rem; font-weight: 700; letter-spacing: -0.03em; color: var(--text-primary); } .section-desc { color: var(--text-secondary); font-size: 0.875rem; margin-top: 0.25rem; } /* ROW 1: Executive KPI Grid (Strict 4 on Desktop, 2x2 on Tablet, 1 on Mobile) */ .dashboard-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-bottom: 1.75rem; } @media (max-width: 1024px) { .dashboard-kpi-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .dashboard-kpi-grid { grid-template-columns: 1fr; } } .metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-bottom: 1.75rem; } @media (max-width: 1024px) { .metrics-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .metrics-grid { grid-template-columns: 1fr; } } /* Apple Cards (Clean, Uniform, Minimalist with Refined Icon Badges) */ .card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 1.375rem; position: relative; overflow: hidden; box-shadow: var(--shadow-md); transition: box-shadow 0.2s ease, border-color 0.2s ease; } .card:hover { box-shadow: var(--shadow-lg); border-color: var(--border-strong); } .kpi-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; } .kpi-icon-badge { width: 2.125rem; height: 2.125rem; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; flex-shrink: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); } .kpi-badge-orange { background: var(--tint-orange-bg); border: 1px solid var(--tint-orange-border); color: var(--tint-orange-fg); } .kpi-badge-green { background: var(--tint-green-bg); border: 1px solid var(--tint-green-border); color: var(--tint-green-fg); } .kpi-badge-blue { background: var(--tint-blue-bg); border: 1px solid var(--tint-blue-border); color: var(--tint-blue-fg); } .kpi-badge-amber { background: var(--tint-yellow-bg); border: 1px solid var(--tint-yellow-border); color: var(--tint-yellow-fg); } /* KPI cards carry no top bar at all: the four of them are the same kind of thing and should look it. Colouring one card's edge singled it out as though it were selected, and the direction it was reporting is already carried by the delta pill inside the card, where a reader is looking anyway. */ .metric-title { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); display: flex; align-items: center; justify-content: space-between; } .metric-value { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.03em; color: var(--text-primary); margin-bottom: 0.5rem; /* A figure counting up gains digits as it goes, and a figure allowed to wrap would change the card's height while it does — nudging everything below it. One line, always. */ white-space: nowrap; } .metric-delta { font-size: 0.75rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.2rem 0.55rem; border-radius: var(--radius-full); } .delta-positive { color: var(--tint-green-fg); background: var(--tint-green-bg); border: 1px solid var(--tint-green-border); } .delta-negative { color: var(--tint-red-fg); background: var(--tint-red-bg); border: 1px solid var(--tint-red-border); } .metric-subtext { font-size: 0.8125rem; color: var(--text-muted); } /* Category Tint Badges (Apple Wallet-Style) */ .cat-select { padding: 0.35rem 0.65rem; border-radius: 8px; font-size: 0.8125rem; font-weight: 600; font-family: inherit; outline: none; cursor: pointer; transition: all 0.15s ease; border: 1px solid transparent; } /* Selectors are lowercase only: categoryPillClass in format.js is the sole source of a pill's class and always emits one of these nine, never the category text itself — see its own comment for why. */ .cat-groceries { background: var(--tint-green-bg); color: var(--tint-green-fg); border-color: var(--tint-green-border); } .cat-dining { background: var(--tint-orange-bg); color: var(--tint-orange-fg); border-color: var(--tint-orange-border); } .cat-transport { background: var(--tint-indigo-bg); color: var(--tint-indigo-fg); border-color: var(--tint-indigo-border); } .cat-utilities { background: var(--tint-blue-bg); color: var(--tint-blue-fg); border-color: var(--tint-blue-border); } .cat-shopping { background: var(--tint-red-bg); color: var(--tint-red-fg); border-color: var(--tint-red-border); } .cat-entertainment { background: var(--tint-purple-bg); color: var(--tint-purple-fg); border-color: var(--tint-purple-border); } .cat-healthcare { background: var(--tint-teal-bg); color: var(--tint-teal-fg); border-color: var(--tint-teal-border); } .cat-income { background: var(--tint-green-bg); color: var(--tint-green-fg); border-color: var(--tint-green-border); } .cat-uncategorized { background: var(--bg-inset); color: var(--text-secondary); border-color: var(--border-color); } /* Tables & Lists (Strong Visual Contrast & Structure) */ .table-container { background: var(--bg-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 16px -2px rgba(0, 0, 0, 0.03); margin-bottom: 2rem; } .table-header-bar { padding: 1.125rem 1.5rem; background: var(--bg-inset); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .pagination-bar { padding: 1rem 1.5rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-top: 1px solid var(--border-color); } .pagination-bar button:disabled { opacity: 0.4; cursor: not-allowed; } .table-title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em; color: var(--text-primary); } .data-table { width: 100%; border-collapse: separate; border-spacing: 0; text-align: left; font-size: 0.875rem; } .data-table th { padding: 0.75rem 1.25rem; background: var(--bg-inset); color: var(--text-secondary); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); } .data-table tbody tr { transition: background-color 0.12s ease; } .data-table tbody tr:nth-child(even) td { background-color: var(--bg-inset); } .data-table tbody tr:nth-child(odd) td { background-color: var(--bg-card); } .data-table tbody tr:hover td { background-color: var(--bg-inset) !important; } /* Historical Snapshot Row Active Selection */ .data-table tbody tr.selected-snapshot-row td { background-color: var(--tint-blue-bg) !important; } .data-table tbody tr.selected-snapshot-row td:first-child { border-left: 4px solid var(--accent-blue); font-weight: 600; } .data-table tbody tr.selected-snapshot-row:hover td { background-color: var(--tint-blue-bg) !important; } .data-table tbody tr.snapshot-clickable-row { cursor: pointer; } .data-table td { padding: 0.95rem 1.25rem; border-bottom: 1px solid var(--border-subtle); color: var(--text-primary); vertical-align: middle; transition: background-color 0.12s ease; } .tx-row-link, .acc-row-link { color: var(--text-primary); font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 0.25rem; transition: color 0.15s ease; } .tx-row-link:hover, .acc-row-link:hover { color: var(--accent-blue); text-decoration: underline; } .data-table tr:last-child td { border-bottom: none; } /* Filter controls */ .filter-bar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .filter-select, .form-input { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-strong); padding: 0.4rem 0.8rem; border-radius: var(--radius-sm); font-size: 0.8125rem; font-weight: 500; font-family: inherit; outline: none; transition: all 0.2s ease; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } .filter-select:focus, .form-input:focus { border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15); } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; font-weight: 500; font-size: 0.8125rem; padding: 0.42rem 1.125rem; border-radius: var(--radius-full); border: 1px solid transparent; cursor: pointer; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); text-decoration: none; font-family: inherit; letter-spacing: -0.01em; } .btn-primary { background: var(--accent-blue); color: var(--text-on-accent); box-shadow: 0 1px 3px rgba(0, 113, 227, 0.25); } .btn-primary:hover:not(:disabled) { background: var(--accent-blue-hover); box-shadow: 0 4px 12px rgba(0, 113, 227, 0.35); transform: translateY(-1px); } .btn-secondary { background: var(--bg-track); color: var(--text-primary); border: 1px solid var(--border-color); } .btn-secondary:hover:not(:disabled) { background: var(--bg-track); border-color: var(--border-strong); transform: translateY(-1px); } .btn-success { background: var(--accent-green); color: var(--text-on-accent); font-weight: 600; } .btn-warning { background: var(--solid-warn-bg); color: var(--text-on-accent); font-weight: 600; box-shadow: 0 1px 3px rgba(245, 158, 11, 0.3); } .btn-warning:hover:not(:disabled) { background: var(--solid-warn-bg); box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4); transform: translateY(-1px); } .bs-stale-banner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--tint-yellow-bg); border: 1px solid var(--tint-yellow-border); border-radius: var(--radius-md); padding: 0.875rem 1.25rem; margin-bottom: 1.25rem; box-shadow: 0 1px 3px rgba(245, 158, 11, 0.08); animation: fadeIn 0.25s ease-out; } /* Mixed-currency notice. Same shape as .bs-stale-banner, in the informational blue: staleness means "act on this", mixed currency means "read the totals differently". */ .bs-currency-banner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--tint-blue-bg); border: 1px solid var(--tint-blue-border); border-radius: var(--radius-md); padding: 0.875rem 1.25rem; margin-bottom: 1.25rem; box-shadow: 0 1px 3px rgba(0, 113, 227, 0.08); animation: fadeIn 0.25s ease-out; } /* Shown in place of a page's content when it fails to load, so a broken fetch reads as "something went wrong" rather than as "you have no data" — the two look identical once a page silently falls back to empty state, and only one of them is true. Same shape as .action-alert-card (icon + title/detail on the left, an action on the right), in red rather than amber: amber means "act on this when you get a chance", red means "the page you're looking at right now didn't load". */ .load-error-banner { display: flex; align-items: center; justify-content: space-between; gap: 0.85rem; padding: 1rem 1.25rem; background: var(--tint-red-bg); border: 1px solid var(--tint-red-border); border-radius: var(--radius-md); box-shadow: 0 1px 3px rgba(215, 0, 21, 0.08); animation: modalPop 0.3s cubic-bezier(0.16, 1, 0.3, 1); margin-bottom: 1.5rem; } .load-error-icon { font-size: 1.25rem; line-height: 1; flex-shrink: 0; } .load-error-body { flex: 1; } .load-error-title { font-size: 0.875rem; font-weight: 600; color: var(--accent-red); margin-bottom: 0.2rem; } .load-error-detail { font-size: 0.8125rem; color: var(--tint-red-fg); line-height: 1.45; } .currency-tag-mixed { background: var(--tint-blue-bg); color: var(--tint-blue-fg); border: 1px solid var(--tint-blue-border); } /* Per-currency subtotals under the statement's net worth row. */ .statement-currency-split { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.75rem 1.25rem 0.9rem; background: var(--bg-inset); border-top: 1px solid var(--border-color); } .statement-currency-split-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.15rem; } .statement-currency-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: 0.875rem; } .statement-currency-row .cur-code { font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; } .statement-currency-row .cur-meta { color: var(--text-muted); font-size: 0.75rem; margin-left: 0.4rem; font-weight: 400; } .statement-currency-row .cur-amount { font-variant-numeric: tabular-nums; font-weight: 600; } .btn-sm { padding: 0.32rem 0.8rem; font-size: 0.75rem; } /* Loading & Disabled Button States */ .btn:disabled, .btn.loading { opacity: 0.5; cursor: not-allowed; pointer-events: none; transform: none !important; } .btn-spinner { width: 12px; height: 12px; border: 2px solid var(--border-strong); border-top-color: var(--text-primary); border-radius: 50%; animation: spin 0.6s linear infinite; display: inline-block; } .btn-primary .btn-spinner { border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: var(--text-on-accent); } @keyframes spin { to { transform: rotate(360deg); } } /* Badges & Tags */ .tag { display: inline-flex; align-items: center; gap: 0.3125rem; font-size: 0.75rem; font-weight: 600; padding: 0.18rem 0.55rem; border-radius: var(--radius-sm); } .tag-blue { background: var(--bg-inset); color: var(--accent-blue); border: 1px solid var(--tint-blue-border); } .tag-green { background: var(--tint-green-bg); color: var(--accent-green-text); border: 1px solid var(--tint-green-border); } .tag-red { background: var(--tint-red-bg); color: var(--accent-red); border: 1px solid var(--tint-red-border); } .tag-amber { background: var(--tint-amber-bg); color: var(--accent-amber); border: 1px solid var(--tint-amber-border); } .tag-orange { background: var(--tint-orange-bg); color: var(--tint-orange-fg); border: 1px solid var(--tint-orange-border); } .tag-purple { background: var(--tint-purple-bg); color: var(--accent-purple); border: 1px solid var(--tint-purple-border); } .tag-indigo { background: var(--tint-indigo-bg); color: var(--accent-indigo); border: 1px solid var(--tint-blue-border); } .tag-teal { background: var(--tint-teal-bg); color: var(--accent-teal); border: 1px solid var(--tint-teal-border); } .tag-yellow { background: var(--tint-yellow-bg); color: var(--tint-amber-fg); border: 1px solid var(--tint-yellow-border); } .tag-cyan { background: var(--tint-cyan-bg); color: var(--accent-cyan); border: 1px solid var(--tint-cyan-border); } /* Pending vs Posted Badges (Refined Apple Pill Badges) */ .badge-pending { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; font-weight: 600; padding: 0.15rem 0.55rem; border-radius: 6px; background: var(--tint-amber-bg); color: var(--accent-amber); border: 1px solid var(--tint-amber-border); } .badge-pending::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-amber); } .badge-posted { display: inline-flex; align-items: center; font-size: 0.75rem; font-weight: 500; padding: 0.15rem 0.55rem; border-radius: 6px; background: var(--bg-track); color: var(--text-secondary); border: 1px solid var(--border-color); } /* Truncated inline preview of a transaction note, shown next to the edit button so a note's presence and gist are visible without opening the modal. The full text rides along in the title attribute for a native hover tooltip. */ .notes-preview { display: inline-block; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; margin-right: 0.5rem; font-size: 0.8125rem; color: var(--text-secondary); } /* Bank Reference ID Pill */ .bank-ref-pill { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.6875rem; background: var(--bg-track); border: 1px solid var(--border-color); padding: 0.18rem 0.45rem; border-radius: 6px; color: var(--text-secondary); cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 0.25rem; } .bank-ref-pill:hover { background: var(--bg-track); color: var(--text-primary); border-color: var(--border-strong); } /* Dashboard Macro Visuals Grid (Net Worth History + Balance Composition) */ .dashboard-visuals-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.5rem; margin-top: 1.5rem; align-items: stretch; } @media (max-width: 1024px) { .dashboard-visuals-grid { grid-template-columns: 1fr; } } .balance-composition-card { display: flex; flex-direction: column; justify-content: space-between; margin-bottom: 0; } /* History Chart Visual */ .chart-container { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 1.75rem; box-shadow: var(--shadow-md); } .chart-svg { width: 100%; height: 300px; overflow: visible; display: block; } @media (max-width: 768px) { .chart-svg { height: 200px; } } /* Statement Update Flash Pulse Animation */ @keyframes statementPulse { 0% { background-color: rgba(0, 113, 227, 0.12); } 100% { background-color: transparent; } } .statement-updated-pulse { animation: statementPulse 1.2s cubic-bezier(0.16, 1, 0.3, 1); } /* Modal Overlay */ .modal-backdrop { position: fixed; inset: 0; background: var(--bg-scrim); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); display: none; align-items: center; justify-content: center; z-index: 100; } .modal-backdrop.active { display: flex; } .modal { background: var(--bg-frost-strong); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border: 1px solid var(--border-color); border-radius: var(--radius-lg); width: 100%; max-width: 500px; padding: 2rem; box-shadow: var(--shadow-lg); animation: modalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes modalPop { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } } .modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; } .modal-title { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); } .modal-close { background: none; border: none; color: var(--text-secondary); font-size: 1.5rem; cursor: pointer; transition: color 0.2s; } .modal-close:hover { color: var(--text-primary); } .modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; margin-top: 1.5rem; } /* Balance Sheet Navigation Toolbar & Statement Header */ .bs-nav-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; padding: 0.75rem 1.25rem; background: var(--bg-inset); border-bottom: 1px solid var(--border-color); } .bs-nav-group { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .bs-nav-label { font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.03em; } /* Custom Date Picker Trigger & Popover */ .bs-datepicker-trigger { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.85rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); font-size: 0.8125rem; font-weight: 600; color: var(--text-primary); cursor: pointer; transition: all 0.2s ease; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } .bs-datepicker-trigger:hover { border-color: var(--accent-blue); background: var(--bg-inset); } .bs-trigger-arrow { transition: transform 0.2s ease; color: var(--text-secondary); } .bs-datepicker-trigger.open .bs-trigger-arrow { transform: rotate(180deg); } .bs-datepicker-popover { position: absolute; top: calc(100% + 8px); left: 0; z-index: 1000; width: 340px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.14), 0 6px 14px -2px rgba(0, 0, 0, 0.06); padding: 1rem; animation: popoverSlide 0.2s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes popoverSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .bs-dp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; } .bs-dp-title-group { display: flex; align-items: center; gap: 0.35rem; } .bs-dp-select { padding: 0.3rem 0.5rem; font-size: 0.8125rem; font-weight: 600; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-inset); color: var(--text-primary); cursor: pointer; outline: none; } .bs-dp-select:focus { border-color: var(--accent-blue); } .bs-dp-nav-btn { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-card); cursor: pointer; font-size: 1.1rem; font-weight: bold; color: var(--text-secondary); transition: all 0.15s ease; } .bs-dp-nav-btn:hover { background: var(--bg-inset); color: var(--text-primary); border-color: var(--border-strong); } .bs-dp-presets { margin-bottom: 0.85rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border-color); } .bs-dp-preset-label { font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.03em; } .bs-dp-preset-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.25rem; } .bs-dp-preset-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; padding: 0.35rem 0.2rem; font-size: 0.75rem; font-weight: 600; border-radius: var(--radius-sm); } .bs-dp-preset-btn.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; background: var(--bg-inset); border-color: var(--border-color); color: var(--text-muted); } .bs-dp-calendar { display: flex; flex-direction: column; gap: 0.35rem; } .bs-dp-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.25rem; } .bs-dp-days-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; text-align: center; } .bs-dp-day { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 36px; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.8125rem; font-weight: 500; color: var(--text-primary); transition: all 0.15s ease; position: relative; user-select: none; } .bs-dp-day:hover:not(.bs-dp-day-future) { background: var(--bg-inset); } .bs-dp-day-selected { background: var(--accent-blue) !important; color: var(--text-on-accent) !important; font-weight: 700; } .bs-dp-day-selected .dp-dot { border: 1px solid var(--text-on-accent); } .bs-dp-day-future { opacity: 0.3; cursor: not-allowed; pointer-events: none; color: var(--text-muted); } .bs-dp-day-empty { height: 36px; pointer-events: none; } /* Freshness Dots */ .dp-dot { width: 5px; height: 5px; border-radius: 50%; display: inline-block; margin-top: 1px; flex-shrink: 0; } .dp-dot-fresh { background-color: var(--solid-success-bg); } .dp-dot-moderate { background-color: var(--solid-warn-bg); } .dp-dot-stale { background-color: var(--solid-danger-bg); } .dp-dot-none { background-color: transparent; border: 1.5px solid var(--border-strong); box-sizing: border-box; } .bs-dp-legend { display: flex; align-items: center; justify-content: space-between; margin-top: 0.75rem; padding-top: 0.6rem; border-top: 1px solid var(--border-color); font-size: 0.7rem; color: var(--text-secondary); } .bs-dp-legend-item { display: flex; align-items: center; gap: 0.3rem; } .bs-statement-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-color); background: var(--bg-card); } .bs-statement-info { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .bs-statement-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .bs-btn-recalc { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 500; transition: all 0.2s ease; } .recalc-icon { display: inline-block; vertical-align: middle; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .bs-btn-recalc:hover .recalc-icon { transform: rotate(60deg); } .recalc-icon.spinning { animation: spin 0.8s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Corporate Financial Statement Styles (Apple Clean Light Mode) */ .corporate-statement { padding: 1.75rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); font-family: inherit; } .statement-date-badge { background: var(--bg-inset); color: var(--accent-blue); border: 1px solid var(--tint-blue-border); padding: 0.25rem 0.75rem; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 600; } .statement-section { margin-bottom: 2rem; } .statement-section-title { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-primary); border-bottom: 2px solid var(--border-color); padding-bottom: 0.5rem; margin-bottom: 0.75rem; } .statement-category-title { font-size: 0.8125rem; font-weight: 600; color: var(--accent-blue); margin: 1rem 0 0.5rem 0.5rem; display: flex; justify-content: space-between; } .statement-row { display: flex; align-items: baseline; justify-content: space-between; padding: 0.45rem 0.6rem 0.45rem 1.25rem; font-size: 0.875rem; border-radius: var(--radius-sm); transition: background-color 0.15s ease; } .statement-row:hover { background-color: var(--bg-inset); } .statement-row-left { display: flex; flex-direction: column; min-width: 0; } .statement-row-title-wrap { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; } .statement-row-dots { flex: 1 1 auto; border-bottom: 1px dotted var(--border-strong); margin: 0 0.6rem 0.3rem 0.6rem; min-width: 1.5rem; opacity: 0.7; } .statement-row-amount { font-variant-numeric: tabular-nums; font-size: 0.875rem; font-weight: 450; color: var(--text-primary); white-space: nowrap; text-align: right; } .statement-subtotal { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 0.6rem 0.6rem 0.75rem; font-size: 0.875rem; font-weight: 700; color: var(--text-primary); border-top: 1px solid var(--border-color); margin-top: 0.35rem; margin-bottom: 0.75rem; } .statement-subtotal-amount { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-primary); } .statement-total-row { display: flex; justify-content: space-between; align-items: center; padding: 0.85rem 0.75rem; font-size: 1rem; font-weight: 700; border-top: 2px solid var(--border-color); border-bottom: 2px solid var(--border-color); margin-top: 0.75rem; } .statement-total-row span { font-variant-numeric: tabular-nums; } .statement-equity-row { display: flex; justify-content: space-between; align-items: center; padding: 1.125rem 1rem; font-size: 1.125rem; font-weight: 800; background: var(--bg-inset); border: 1px solid var(--border-color); border-radius: var(--radius-md); margin-top: 1rem; } .statement-equity-row span { font-variant-numeric: tabular-nums; } /* Freshness & Staleness Indicator Styles */ .badge-freshness { font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.65rem; border-radius: 9999px; display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; } .freshness-tag-fresh { background: var(--tint-green-bg); color: var(--tint-green-fg); border: 1px solid var(--tint-green-border); } .freshness-tag-moderate { background: var(--tint-yellow-bg); color: var(--tint-amber-fg); border: 1px solid var(--tint-yellow-border); } .freshness-tag-stale { background: var(--tint-red-bg); color: var(--tint-red-fg); border: 1px solid var(--tint-red-border); } /* Same neutral gray as .dp-dot-none: this date has no accounts yet, which is a different fact than "data exists and is fresh" and must not read as the same green badge. */ .freshness-tag-none { background: var(--bg-inset); color: var(--text-muted); border: 1px solid var(--border-strong); } .row-staleness-pill { font-size: 0.7rem; font-weight: 500; padding: 0.15rem 0.45rem; border-radius: 6px; margin-left: 0.5rem; display: inline-flex; align-items: center; gap: 0.25rem; } .row-timestamp-detail { font-size: 0.725rem; color: var(--text-muted); margin-top: 0.15rem; font-weight: 400; } /* Apple-Style Toggle Switch */ .apple-toggle-switch { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; user-select: none; font-size: 0.8125rem; color: var(--text-secondary); font-weight: 500; } .apple-toggle-switch input { position: absolute; opacity: 0; width: 34px; height: 20px; top: 0; left: 0; margin: 0; cursor: pointer; z-index: 1; } .apple-toggle-slider { position: relative; display: inline-block; width: 34px; height: 20px; background-color: var(--border-strong); border-radius: 20px; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); flex-shrink: 0; } .apple-toggle-slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px; background-color: var(--bg-card); border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .apple-toggle-switch input:checked + .apple-toggle-slider { background-color: var(--solid-success-bg); } .apple-toggle-switch input:focus-visible + .apple-toggle-slider { box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.35); } .apple-toggle-switch input:checked + .apple-toggle-slider:before { transform: translateX(14px); } .btn-group .btn { border-radius: 0; margin: 0; } .btn-group .btn:first-child { border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); } .btn-group .btn:last-child { border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); } .form-input-sm { padding: 0.35rem 0.6rem; font-size: 0.8125rem; } /* Authentication Overlay Screen (Apple Light Theme) */ .auth-overlay { position: fixed; inset: 0; background: radial-gradient(circle at 50% 30%, rgba(0, 113, 227, 0.06) 0%, rgba(245, 245, 247, 0.98) 70%); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 1.5rem; } .auth-card { background: var(--bg-frost-strong); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border: 1px solid var(--border-color); border-radius: var(--radius-lg); width: 100%; max-width: 440px; padding: 2.5rem 2rem; box-shadow: var(--shadow-lg); text-align: center; animation: modalPop 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .auth-title { font-size: 1.625rem; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 0.5rem; color: var(--text-primary); } .auth-subtitle { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.5; } /* Action Alert Card */ .action-alert-card { display: flex; align-items: flex-start; gap: 0.85rem; padding: 1rem 1.25rem; background: var(--tint-amber-bg); border: 1px solid var(--tint-amber-border); border-radius: var(--radius-md); box-shadow: 0 1px 3px rgba(181, 71, 8, 0.08); animation: modalPop 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .action-alert-icon { font-size: 1.25rem; line-height: 1; flex-shrink: 0; margin-top: 0.1rem; } .action-alert-body { flex: 1; } .action-alert-title { font-size: 0.875rem; font-weight: 600; color: var(--tint-orange-fg); margin-bottom: 0.2rem; } .action-alert-desc { font-size: 0.8125rem; color: var(--tint-orange-fg); line-height: 1.45; } /* Account Type Dropdown Selector */ .account-type-select { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-strong); padding: 0.25rem 0.6rem; border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 500; font-family: inherit; outline: none; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } .account-type-select:focus { border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15); } .account-type-select.unknown-type { border-color: var(--tint-amber-border); background: var(--tint-yellow-bg); color: var(--tint-orange-fg); font-weight: 600; } .account-type-select:disabled { opacity: 0.6; cursor: not-allowed; } .override-tag { font-size: 0.625rem; font-weight: 600; color: var(--accent-blue); background: var(--tint-blue-bg); border: 1px solid var(--tint-blue-border); border-radius: var(--radius-full); padding: 0.1rem 0.4rem; margin-left: 0.35rem; display: inline-block; vertical-align: middle; } /* Full-Screen Blocking Migration Screen */ .blocking-overlay { position: fixed; inset: 0; background: rgba(245, 245, 247, 0.96); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 1.5rem; animation: fadeIn 0.3s ease; } .blocking-card { background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.06); padding: 2.75rem 2.25rem; max-width: 480px; width: 100%; text-align: center; animation: modalPop 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .migration-icon-wrapper { width: 64px; height: 64px; border-radius: var(--radius-full); background: var(--tint-blue-bg); color: var(--accent-blue); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; font-size: 1.75rem; } .migration-icon-wrapper.error { background: var(--tint-red-bg); color: var(--accent-red); } .migration-spin-svg { animation: spin 2s linear infinite; } .blocking-title { font-size: 1.3rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.5rem; letter-spacing: -0.02em; } .blocking-subtitle { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.5; margin-bottom: 0.5rem; } .progress-track { width: 100%; height: 8px; background: var(--bg-track); border-radius: var(--radius-full); overflow: hidden; position: relative; } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent-blue), var(--accent-blue-hover)); border-radius: var(--radius-full); transition: width 0.4s ease; position: relative; } .progress-fill.indeterminate { width: 100%; background: linear-gradient(90deg, var(--bg-track) 0%, var(--accent-blue) 50%, var(--bg-track) 100%); background-size: 200% 100%; animation: shimmer 1.5s infinite linear; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .blocking-footnote { font-size: 0.75rem; color: var(--text-muted); line-height: 1.4; } /* ============================================================================ Currency and figures Every number that lines up in a column gets tabular figures, so digits keep a constant width instead of shifting as values change. ============================================================================ */ body { font-variant-numeric: tabular-nums; } .metric-value, .statement-row-amount, .statement-subtotal-amount, .data-table td, .data-table th { font-variant-numeric: tabular-nums; } .data-table td.amount-cell, .data-table th.amount-cell { text-align: right; white-space: nowrap; } /* A date like "Sep 1" has a breakable space in it, so once the Date column is squeezed by its neighbours the browser wraps "Sep" and "1" onto separate lines rather than shrinking further. It's one of the narrowest, most frequently-read columns in the table, so it should never be the one that gives up its width. */ .data-table td[data-cell="date"] { white-space: nowrap; } /* ============================================================================ Shared layout & detail patterns Small pieces reused across the dashboard, the two inspector modals and Settings: a form field's label, a muted loading/empty message, a row that splits its label from its value, and the "amount + label" grid the two modals both open with. Extracted because each one used to be typed out as a full inline style at every call site — the same declarations, repeated letter for letter, with no name connecting the copies. ============================================================================ */ /* The small uppercase caption above a form control. */ .field-label { display: block; margin-bottom: 0.35rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; color: var(--text-secondary); } /* A or