/* CashNote workspace system. Login and sidebar are intentionally excluded. Existing layout, permissions, chart data and motion controllers remain intact. */ :is(#appShell > main.content, body:has(#appShell:not([hidden])) > .modal-backdrop, body:has(#appShell:not([hidden])) > dialog) { --ws-canvas: #f3f5f7; --ws-surface: #fff; --ws-ink: #303735; --ws-muted: #747a75; --ws-line: #e1e5ea; --ws-accent: #137fab; --ws-accent-hover: #086c97; --ws-selected: #edf6fb; --ws-radius: 16px; --ws-shadow: 0 2px 8px #24344708; --ws-ease: cubic-bezier(.22,1,.36,1); color: var(--ws-ink); font-variant-numeric: tabular-nums; } #appShell > main.content { background: var(--ws-canvas) !important; --ink: var(--ws-ink); --muted: var(--ws-muted); --line: var(--ws-line); --surface-muted: #f7f9fb; --theme: var(--ws-accent); } #appShell .content .topbar { background: var(--ws-canvas); border: 0; min-height: 104px; margin-bottom: 20px; padding-block: 24px; } #appShell .content #mainTitle { font-size: 28px; font-weight: 750; color: var(--ws-ink); letter-spacing: -.8px; } #appShell .content #mainSubtitle { color: var(--ws-muted); font-size: 13px; } #appShell .content .ledger-scope-summary strong { color: #405767; font-size: 14px; } #appShell .content .panel { background: var(--ws-surface); border: 1px solid var(--ws-line); border-radius: var(--ws-radius); box-shadow: var(--ws-shadow); } /* Keep the final content clear of its enclosing panel, including tabbed views. */ #appShell .content #budgetsView.budget-approved-screen .budget-overview-panel, #appShell .content #transactionsView .registered-history-panel, #appShell .content #supportView .support-admin-workspace { padding-bottom: 24px !important; } @media (max-width: 600px) { #appShell .content #budgetsView.budget-approved-screen .budget-overview-panel, #appShell .content #transactionsView .registered-history-panel, #appShell .content #supportView .support-admin-workspace { padding-bottom: 20px !important; } } #appShell .content .panel-heading { margin-bottom: 22px; } #appShell .content .panel-heading h2 { color: var(--ws-ink); font-size: 17px; font-weight: 700; letter-spacing: -.4px; } #appShell .content .panel-heading :is(p, span) { color: var(--ws-muted); } #appShell .content :is(.dashboard-heading-link, .ma-link) { color: var(--ws-accent); font-size: 12px; font-weight: 650; } /* Action hierarchy: primary, secondary, destructive, and compact icon actions. */ #appShell .content :is(.primary-button, .page-action--primary), body:has(#appShell:not([hidden])) :is(.modal-backdrop, dialog) .primary-button { background: linear-gradient(135deg, #3aa3d6 0%, #1683c3 100%) !important; color: #fff !important; border: 1px solid transparent; border-radius: 10px; min-height: 42px; padding: 10px 18px; font-size: 13px; font-weight: 650; box-shadow: 0 8px 20px rgba(22, 131, 195, .22) !important; filter: none; } #appShell .content :is(.primary-button, .page-action--primary):hover:not(:disabled), body:has(#appShell:not([hidden])) :is(.modal-backdrop, dialog) .primary-button:hover:not(:disabled) { background: linear-gradient(135deg, #3aa3d6 0%, #1683c3 100%) !important; box-shadow: 0 10px 24px rgba(22, 131, 195, .28) !important; filter: brightness(1.05); } #appShell .content :is(.secondary-button, .page-action--secondary, .mini-button), #settingsView button:not(.primary-button):not(.settings-text-button):not(.danger), body:has(#appShell:not([hidden])) :is(.modal-backdrop, dialog) :is(.secondary-button, .mini-button) { background: #fff !important; color: #354c5d; border: 1px solid #d8e1e9; border-radius: 10px; min-height: 38px; padding: 8px 14px; font-size: 13px; font-weight: 600; box-shadow: none; } #appShell .content :is(.secondary-button, .page-action--secondary, .mini-button):hover:not(:disabled), body:has(#appShell:not([hidden])) :is(.modal-backdrop, dialog) :is(.secondary-button, .mini-button):hover:not(:disabled) { background: #f0f5f8 !important; border-color: #b9cad7; color: #163f57; } #appShell .content :is(button.danger, .page-action--danger), body:has(#appShell:not([hidden])) :is(.modal-backdrop, dialog) button.danger { color: #b43e42; background: #fff; border: 1px solid #edc9cd; box-shadow: none; } #appShell .content :is(button.danger, .page-action--danger):hover:not(:disabled) { background: #fff1f2; } #appShell .content button:disabled { cursor: not-allowed; opacity: .45; box-shadow: none; } #appShell .content .month-control { gap: 12px; } #appShell .content .month-control strong { color: var(--ws-ink); font-size: 16px; font-weight: 650; } #appShell .content .month-control button { width: 38px; height: 38px; border: 1px solid var(--ws-line); border-radius: 10px; background: #fff; box-shadow: none; } #appShell .content .month-control button:hover { background: #edf3f7; } /* Inputs share a clear resting boundary and an accessible focus state. */ #appShell .content :is(input, select, textarea):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), body:has(#appShell:not([hidden])) :is(.modal-backdrop, dialog) :is(input, select, textarea):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]) { background: #fff; color: #172b3a; border: 1px solid #cdd8e2; border-radius: 9px; min-height: 42px; padding-block: 10px; font-size: 13px; box-shadow: none; color-scheme: light; } /* Preserve component-specific horizontal space for inset icons and units. */ #appShell .content :is(.transaction-search, .investment-search) input { padding-inline: 40px 12px; } body:has(#appShell:not([hidden])) .transaction-amount-input input { padding-right: 40px; } #appShell .content .support-admin-search input { padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; } #appShell .content :is(input, textarea)::placeholder { color: #82909d; } #appShell .content :is(input, select, textarea):focus-visible, body:has(#appShell:not([hidden])) :is(.modal-backdrop, dialog) :is(input, select, textarea):focus-visible { border-color: #137fab; outline: 3px solid #137fab25; outline-offset: 1px; box-shadow: none; } #appShell .content :is(button, summary, [role=button]):focus-visible { outline: 3px solid #137fab55; outline-offset: 2px; } /* Segmented navigation: one treatment for equivalent view/type switches. */ #appShell .content :is(.transaction-view-controls, .money-map-section-tabs, .budget-board-tabs, .security-tabs, .support-filter-tabs, .support-admin-filter-tabs) { display: flex; gap: 4px; padding: 4px; background: #eaf0f5; border: 0; border-radius: 11px; box-shadow: none; width: fit-content; max-width: 100%; flex-wrap: wrap; } #appShell .content :is(.transaction-view-controls, .money-map-section-tabs, .budget-board-tabs, .security-tabs, .support-filter-tabs, .support-admin-filter-tabs) > button { color: #607383; background: transparent; border: 0; border-radius: 8px; min-height: 36px; padding: 8px 16px; font-size: 13px; font-weight: 600; box-shadow: none; } #appShell .content :is(.transaction-view-controls, .money-map-section-tabs, .budget-board-tabs, .security-tabs, .support-filter-tabs, .support-admin-filter-tabs) > button:is(.active, [aria-selected=true], [aria-pressed=true]) { background: #fff !important; color: #126e96 !important; box-shadow: 0 1px 4px #203b5114 !important; } #appShell .content :is(.transaction-view-controls, .money-map-section-tabs, .budget-board-tabs, .security-tabs, .support-filter-tabs, .support-admin-filter-tabs) > button:hover { color: #135b7b; background-color: #ffffff80; } /* Tables: quiet headers, aligned numbers, hover as interaction not decoration. */ #appShell .content :is(.primary-button, .secondary-button, .mini-button, .dashboard-heading-link, .ma-link, .budget-detail-link), body:has(#appShell:not([hidden])) :is(.modal-backdrop, dialog) :is(.primary-button, .secondary-button, .mini-button) { column-gap: 8px; line-height: 1.5; } #appShell .content :is(.primary-button, .secondary-button, .mini-button, .dashboard-heading-link, .ma-link) > svg { flex-shrink: 0; } #appShell .content #moneyMapView :is(.approved-detail-label, button.approved-flow-disclosure) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 10px; min-width: 88px; min-height: 36px; line-height: 1.5; white-space: nowrap; flex-shrink: 0; box-sizing: border-box; } #appShell .content #moneyMapView button.approved-flow-disclosure { border: 1px solid #1683ff !important; border-radius: 11px; background: #fff !important; color: #0877f9; font-size: 12px; font-weight: 600; box-shadow: none; } #appShell .content #moneyMapView button.approved-flow-disclosure:hover { background: #eaf2ff !important; color: #075cbd; } #appShell .content #moneyMapView :is(.approved-detail-label, .approved-flow-disclosure)::after { content: ''; display: block; width: 6px; height: 6px; flex: 0 0 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 200ms ease; } #appShell .content #moneyMapView :is(.approved-payment-row[aria-expanded=true] .approved-detail-label, .approved-flow-disclosure[aria-expanded=true])::after { transform: translateY(2px) rotate(225deg); } #appShell .content #moneyMapView .approved-flow-row { column-gap: 14px; } @media (min-width: 1152px) { #appShell .content #moneyMapView :is(.approved-flow-columns, .approved-flow-item .approved-flow-row) { grid-template-columns: 52px minmax(150px, 1fr) clamp(90px, 10vw, 144px) 124px 76px 78px 88px; column-gap: 14px; } } @media (prefers-reduced-motion: reduce) { #appShell .content #moneyMapView :is(.approved-detail-label, .approved-flow-disclosure)::after { transition: none; } } #appShell .content :is(.dashboard-category-columns, .dashboard-recent-columns, .transaction-table-columns, .approved-flow-columns, th, .adm-table-head) { background: transparent; color: #73808c; border-radius: 0; font-size: 11px; font-weight: 600; } #appShell .content :is(.dashboard-stat-row, .dashboard-money-point, .dashboard-budget-row, .dashboard-recent-item, .approved-payment-row, .approved-flow-row, .ma-category, .adm-row) { color: #243b4c; box-shadow: none; border-color: #edf0f4; } #appShell .content :is(.dashboard-stat-row, .dashboard-money-point, .dashboard-budget-row, .dashboard-recent-item, .approved-payment-row, .approved-flow-row, .ma-category, .adm-row):is(:hover, :focus-visible) { background: #edf5fa; transform: none; box-shadow: none; } #appShell .content :is(.dashboard-category-delta, .dashboard-budget-ratio) { background: transparent; } /* Overview: hierarchy comes from typography and complete panels, not text chips. */ #appShell .content #dashboardView .dashboard-hero-card { background: #fff; border: 1px solid #dce6ed; box-shadow: var(--ws-shadow); background-image: none; padding: 28px; border-radius: 18px; } #appShell .content #dashboardView .dashboard-hero-copy > strong { color: #16394f; font-size: 38px; font-weight: 750; } #appShell .content #dashboardView .dashboard-hero-copy > span { color: #657585; font-size: 13px; font-weight: 550; } #appShell .content #dashboardView .dashboard-hero-flow { background: #f7f9fb; border: 0; border-radius: 12px; padding: 20px; } #appShell .content #dashboardView .dashboard-panel-footer { background: transparent; border-top: 1px solid #e6ebf0; border-radius: 0; padding: 16px 12px 0; } #appShell .content #dashboardView .dashboard-analysis-preview { background: transparent; gap: 16px; } #appShell .content #dashboardView .dashboard-analysis-preview article { background: #f7f9fb; border-radius: 12px; padding: 20px; } #appShell .content #dashboardView :is(.dashboard-recent-panel, .dashboard-category-panel, .dashboard-budget-panel, .dashboard-money-panel) { padding: 24px; } /* Transactions: separate neutral summary cards and a readable calendar. */ #appShell .content #transactionsView { background: transparent; } #appShell .content #transactionsView .transaction-overview-grid { background: transparent; border: 0; box-shadow: none; gap: 14px; overflow: visible; } #appShell .content #transactionsView .transaction-overview-card, #appShell .content #transactionsView .transaction-overview-card.net.login-gradient-card { background: #fff !important; border: 1px solid #e1e7ee !important; border-radius: 14px !important; box-shadow: var(--ws-shadow) !important; padding: 20px; min-width: 0; } #appShell .content #transactionsView .transaction-overview-card[aria-pressed=true] { border-color: #459fc2 !important; box-shadow: 0 0 0 1px #459fc2 !important; } #appShell .content #transactionsView .transaction-overview-icon { width: 38px; height: 38px; flex-basis: 38px; box-shadow: none; } #appShell .content #transactionsView .transaction-overview-card > div > span { color: #657585; font-size: 12px; font-weight: 550; } #appShell .content #transactionsView .transaction-overview-card > div > strong { font-size: 21px; letter-spacing: -.5px; font-weight: 750; } #appShell .content #transactionsView .transaction-command-bar { background: var(--ws-canvas); border: 0; box-shadow: none; gap: 16px; padding-block: 12px; } #appShell .content #transactionsView .transaction-calendar-panel { background: #fff; border: 1px solid var(--ws-line); padding: 22px; border-radius: 16px; } #appShell .content #transactionsView .calendar-day { border: 1px solid #e6ebf1; background: #fff; border-radius: 10px; box-shadow: none; } #appShell .content #transactionsView .calendar-day.active { background: #f0f8fc; border-color: #3e9cc3; box-shadow: 0 0 0 1px #3e9cc3; } #appShell .content #transactionsView .calendar-day.is-today:not(.active) { background: #fffaf0; border-color: #ddba67; } #appShell .content #transactionsView .calendar-day.outside-day { background: #f7f9fb; border-color: transparent; } #appShell .content #transactionsView .calendar-day-number { color: #334b5d; } #appShell .content #transactionsView .calendar-day-add { border: 0; background: #eef4f8; color: #237ca7; } #appShell .content #transactionsView .transaction-table-row { background: #fff; border-bottom-color: #edf0f4; } #appShell .content #transactionsView .transaction-table-row:hover { background: #f3f8fb; } /* Budgets, analysis, accounts, support, investment and settings share surfaces. */ #appShell .content #budgetsView.budget-approved-screen :is(.budget-summary-strip, .budget-card, .budget-chart, .budget-board-support > section), #appShell .content #budgetDetailView :is(.budget-analysis-summary, .budget-analysis-transactions-panel, .budget-analysis-metric), #appShell .content #moneyMapView :is(.approved-pay-group, .approved-flow-item, .approved-flow-stats > div), #appShell .content #investmentsView :is(.investment-summary-card, .investment-picker-card), #appShell .content #supportView :is(.support-summary-grid > article, .support-user-ticket-card, .support-admin-ticket), #appShell .content #insightsView .ma-allocation { background: #fff; border: 1px solid #e1e7ee; border-radius: 16px; box-shadow: var(--ws-shadow); } #appShell .content #budgetsView .budget-chart-board { background: transparent; border: 0; box-shadow: none; } #appShell .content #budgetDetailView .budget-analysis-detail { padding: 24px; gap: 24px; } #appShell .content #budgetDetailView .budget-analysis-header { padding: 0; gap: 16px; } #appShell .content #budgetDetailView .budget-analysis-summary { gap: 12px; padding: 16px; } #appShell .content #budgetDetailView .budget-analysis-metric { padding: 16px 12px; } body:has(#appShell:not([hidden])) .budget-edit-preview { gap: 20px; padding: 16px; } body:has(#appShell:not([hidden])) :is(.budget-edit-preview-copy, .budget-edit-preview-metric) { display: grid; gap: 6px; align-content: start; line-height: 1.5; } #appShell .content #insightsView :is(.insight-more-panel, .insight-goal-section, .insight-risk-section, .insight-badge-panel, .insight-evidence-panel), #appShell .content #moneyMapView .money-point-registry-panel { padding: 24px; } #appShell .content #budgetsView .budget-summary-title h2 { color: #263e50; } #appShell .content #moneyMapView .approved-bank-heading { background: #fff; border-bottom: 1px solid #edf0f4; color: #233c4f; } #appShell .content #moneyMapView .approved-pay-group > header { background: #f7f9fb; border-bottom: 1px solid #e6ebf1; } #appShell .content #moneyMapView .money-map-canvas .money-map-node { background: color-mix(in srgb, var(--node-color) 9%, #fff); box-shadow: 0 3px 12px #18344910; } #appShell .content #moneyMapView .money-point-registry-card { background: color-mix(in srgb, var(--node-color) 9%, #fff); } #appShell .content #moneyMapView .money-point-registry-card:is(:hover, :focus-visible, .is-selected), #appShell .content #moneyMapView .money-map-canvas .money-map-node:is(:hover, :focus-visible, .selected-for-detail) { background: color-mix(in srgb, var(--node-color) 17%, #fff); } #appShell .content #moneyMapView .approved-flow-day { background: #f0f5f9; color: #246786; box-shadow: none; border-radius: 10px; } #appShell .content #moneyMapView .approved-flow-row { background: transparent; border-radius: 15px; } #appShell .content #moneyMapView .approved-flow-item.is-expanded { border-color: #84b7d0; } #appShell .content #moneyMapView .approved-flow-item.is-expanded .approved-flow-row { background: #f4f9fc; } #appShell .content #moneyMapView :is(.approved-payment-detail footer, .approved-flow-detail) { background: #f8fafc; } #appShell .content #moneyMapView .transfer-owner-badge { background: transparent; color: #536b7c; padding-inline: 0; } #appShell .content #investmentsView :is(.security-holdings-table th, .security-detail-table th) { background: #f7f9fb; font-weight: 600; color: #667b8a; } #appShell .content #investmentsView :is(.security-holdings-table td, .security-detail-table td) { color: #263e50; font-weight: 550; } #appShell .content #investmentsView .investment-summary-card.accent { background: #163f57; border-color: #163f57; } #appShell .content #investmentsView .investment-summary-card.accent strong { color: #fff; } #appShell .content #investmentsView .investment-summary-card.accent :is(span, small) { color: #d4e7f1; } #appShell .content #insightsView :is(.ma-comparison, .ma-categories) { background: #fff; border: 1px solid #e1e7ee; border-radius: 16px; padding: 24px; margin-top: 20px; } #appShell .content #insightsView .ma-category { background: transparent; border-radius: 8px; } #appShell .content #insightsView .ma-category:hover { background: #f1f7fb; } #appShell .content #insightsView .ma-income > strong { font-size: 36px; color: #16394f; } #appShell .content #settingsView .settings-b-section { background: #fff; border: 1px solid #e1e7ee; border-radius: 16px; padding: 24px; margin-bottom: 16px; } #appShell .content #settingsView .settings-b-heading { margin-bottom: 24px; } #appShell .content #settingsView .settings-editor-inner { border: 1px solid #e4ebf1; background: #f8fafc; border-radius: 12px; box-shadow: none; } #appShell .content #settingsView button.settings-text-button { color: #137fab; background: transparent; border: 0; } #appShell .content #supportView .support-faq-list details { border-color: #e6ebf1; border-radius: 10px; } #appShell .content #supportView .support-faq-list summary:hover { background: #f1f7fb; } #appShell .content #supportView .support-user-ticket-card:hover { background: #f3f8fb; border-color: #afc9d9; } /* Product dialogs and side panels, never login/sign-up screens. */ #moneyPointDetails { display: flow-root; overflow-anchor: none; } body:has(#appShell:not([hidden])) #moneyPointDeleteDialog { border-top: 4px solid #dc2626; max-width: 460px; } body:has(#appShell:not([hidden])) #moneyPointDeleteDialog h2 { color: #b91c1c; line-height: 1.4; } #moneyPointDeleteDialog .account-delete-warning-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fee2e2; color: #b91c1c; font-size: 26px; font-weight: 800; } #moneyPointDeleteDialog .account-delete-summary { line-height: 1.65; } #moneyPointDeleteDialog .money-point-delete-impact li { background: #fff1f2; } #moneyPointDeleteDialog .money-point-delete-impact strong { color: #b91c1c; } body:has(#appShell:not([hidden])) #moneyPointDeleteDialog .danger-button { color: #fff; background: #dc2626; border-color: #dc2626; } #moneyMapView .money-map-viewport { height: clamp(560px, 62vh, 740px); } #moneyMapTabMap:not(.is-money-map-hidden) { max-height: 1200px; } /* Flow-editor geometry only: preserve the existing account and workspace palette. */ #moneyMapTabMap { position: relative; } #moneyMapView .money-map-stage-sizer { width: 100%; height: 100%; min-width: 0; min-height: 0; } #moneyMapView .money-map-canvas { width: var(--money-map-width); height: var(--money-map-height); transform: translate(var(--map-camera-x, 0px), var(--map-camera-y, 0px)) scale(var(--money-map-zoom)); transform-origin: 0 0; overflow: visible; } #moneyMapView .money-map-viewport { overflow: hidden; background: #fff; } #moneyMapView .money-map-lines { overflow: visible; } #appShell .content #moneyMapView .money-map-canvas .money-map-node, #appShell .content #moneyMapView .money-map-canvas .money-map-node:hover, #appShell .content #moneyMapView .money-map-canvas .money-map-node:focus-visible, #appShell .content #moneyMapView .money-map-canvas .money-map-node.selected-for-detail, #moneyMapView .money-map-line-label { transform: translate(-50%, -50%); } #moneyMapView #moneyMapTabMap > .money-map-zoom-controls { position: absolute; left: 18px; bottom: 18px; z-index: 20; display: flex; align-items: center; gap: 4px; } #moneyMapView #moneyMapTabMap > .money-map-zoom-controls button { min-width: 36px; width: 36px; min-height: 36px; height: 36px; padding: 0; border-radius: 8px; font-size: 20px; } #moneyMapView #moneyMapTabMap > .money-map-zoom-controls span { min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; } #appShell .content #moneyMapView .money-map-canvas .money-map-node { border-radius: 10px; border-width: 1px; } #appShell .content #moneyMapView .money-map-canvas .money-map-node::before { width: 4px; border-radius: 9px 0 0 9px; } #moneyMapView .money-map-node .money-point-heading strong { line-height: 1.4; } #moneyMapView .money-map-node .money-point-heading small { line-height: 1.5; } #moneyMapView .money-map-node .money-point-balance { align-items: baseline; } #moneyMapView .money-map-node .money-point-balance strong { line-height: 1.3; } #appShell .content #moneyMapView .money-map-selected-context, #appShell .content #moneyMapView .money-map-selected-context.align-up { top: auto; bottom: calc(100% + 14px); width: max-content; min-width: 0; display: flex; gap: 8px; padding: 8px; border-radius: 10px; } #appShell .content #moneyMapView .money-map-selected-context > div { display: none; } #moneyMapView .money-map-selected-context .money-map-context-action { min-height: 34px; padding: 8px 12px; white-space: nowrap; } #moneyMapView .money-map-line-label { border-radius: 6px; padding: 5px 8px; gap: 6px; } #moneyMapView .money-map-mini-map { border-radius: 10px; } @media (max-width: 760px) { #moneyMapView .money-map-viewport { height: clamp(520px, 72svh, 680px); } } #appShell .content .account-inline-connections { margin-top: 26px; padding-top: 24px; border-top: 1px solid #aebbc5; } #appShell .content .account-inline-connections h4 { margin: 0 0 18px; font-size: 14px; color: #283f50; } #appShell .content .account-inline-connection-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 20px; } #appShell .content .account-inline-connections .connection-timeline-item { display: flex; align-items: center; position: relative; } #appShell .content .account-inline-connections .connection-timeline-button { flex: 1; min-width: 0; width: auto; grid-template-columns: 32px minmax(0, 1fr) auto; } #appShell .content .account-inline-connections .connection-timeline-button:not(:has(.connection-timeline-amount)) { grid-template-columns: 32px minmax(0, 1fr); } #appShell .content .account-inline-connections .connection-timeline-amount { text-align: right; } #appShell .content .account-inline-connections .connection-row-actions { display: flex; flex: 0 0 auto; width: 0; overflow: hidden; gap: 6px; padding-right: 0; opacity: 0; pointer-events: none; transition: width 220ms ease, padding 220ms ease, opacity 180ms ease; } #appShell .content .account-inline-connections .connection-row-actions > button { flex: 0 0 52px; padding-inline: 10px; } #appShell .content .account-inline-connections .connection-timeline-item:is(:hover, :focus-within) .connection-row-actions { width: 124px; padding-right: 14px; opacity: 1; pointer-events: auto; } #appShell .content .account-inline-connections .connection-timeline-item:is(:hover, :focus-within) { background: #f2f7fb; } #appShell .content .account-inline-connections .connection-timeline-button:hover { background: transparent; } #appShell .content .account-inline-connections .connection-menu-toggle { display: none; } #appShell .content .account-inline-connections .connection-timeline-chevron { display: none; } @media (hover: none), (max-width: 760px) { #appShell .content .account-inline-connections .connection-menu-toggle { display: inline-flex; margin-right: 12px; min-width: 36px; font-size: 22px; } #appShell .content .account-inline-connections .connection-row-actions { display: none; } #appShell .content .account-inline-connections .connection-actions-open { flex-wrap: wrap; } #appShell .content .account-inline-connections .connection-actions-open .connection-row-actions { display: flex; flex-basis: 100%; width: 100%; justify-content: flex-end; padding: 0 12px 12px; opacity: 1; pointer-events: auto; } } @media (prefers-reduced-motion: reduce) { #appShell .content .account-inline-connections .connection-row-actions { transition: none; } } #appShell .content .account-monthly-flow dl { margin: 0; display: grid; gap: 6px; font-size: 12px; line-height: 1.5; } #appShell .content .account-monthly-flow dl > div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; } #appShell .content .account-monthly-flow dt { color: #596875; } #appShell .content .account-monthly-flow dd { margin: 0; color: #283f50; font-weight: 650; font-variant-numeric: tabular-nums; } #appShell .content .account-target-progress { width: 100%; height: 6px; accent-color: var(--account-detail-color); } #moneyPointConnectionModal .money-point-connection-modal { background: #f0f6fa; } :is(#moneyPointConnectionList, .connection-timeline-list) { position: relative; padding-left: 26px; gap: 12px; } :is(#moneyPointConnectionList, .connection-timeline-list):has(.connection-timeline-item)::before { content: ''; position: absolute; left: 9px; top: 24px; bottom: 24px; width: 2px; background: #b9cede; } :is(#moneyPointConnectionList, .connection-timeline-list) .connection-timeline-item { position: relative; display: block; padding: 0; border: 1px solid #dce5eb; border-left: 3px solid var(--connection-color); border-radius: 12px; background: #fff; } :is(#moneyPointConnectionList, .connection-timeline-list) .connection-timeline-item::before { content: ''; position: absolute; left: -24px; top: calc(50% - 6px); width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: var(--connection-color); box-shadow: 0 0 0 1px var(--connection-color); } :is(#moneyPointConnectionList, .connection-timeline-list) .connection-timeline-item::after { content: ''; position: absolute; left: -12px; top: 50%; width: 10px; height: 1px; background: var(--connection-color); } :is(#moneyPointConnectionList, .connection-timeline-list) .connection-timeline-button { display: grid; grid-template-columns: 32px minmax(0,1fr) auto 14px; align-items: center; gap: 12px; width: 100%; min-height: 82px; padding: 16px; text-align: left; border: 0; border-radius: 10px; background: transparent; color: #283f50; } :is(#moneyPointConnectionList, .connection-timeline-list) .connection-timeline-button:not(:has(.connection-timeline-amount)) { grid-template-columns: 32px minmax(0,1fr) 14px; } :is(#moneyPointConnectionList, .connection-timeline-list) .connection-timeline-button:hover { background: #f2f7fb; } :is(#moneyPointConnectionList, .connection-timeline-list) .connection-timeline-button:focus-visible { outline: 3px solid #137fab70; outline-offset: 3px; } :is(#moneyPointConnectionList, .connection-timeline-list) .connection-timeline-copy { display: grid; gap: 6px; min-width: 0; } :is(#moneyPointConnectionList, .connection-timeline-list) .connection-timeline-copy strong { font-size: 14px; font-weight: 700; color: #283f50; } :is(#moneyPointConnectionList, .connection-timeline-list) .connection-timeline-copy small { font-size: 12px; color: #627788; line-height: 1.5; font-weight: 400; } :is(#moneyPointConnectionList, .connection-timeline-list) .connection-timeline-icon { display: grid; place-items: center; color: var(--connection-color); } :is(#moneyPointConnectionList, .connection-timeline-list) .connection-timeline-icon > svg { width: 24px; height: 24px; } :is(#moneyPointConnectionList, .connection-timeline-list) .connection-timeline-amount { font-size: 14px; white-space: nowrap; color: #283f50; } :is(#moneyPointConnectionList, .connection-timeline-list) .connection-timeline-chevron { width: 14px; height: 14px; color: #829aac; } @media (max-width: 520px) { #moneyPointConnectionModal .money-point-connection-modal { padding: 20px 16px; } :is(#moneyPointConnectionList, .connection-timeline-list) .connection-timeline-button { grid-template-columns: 28px minmax(0,1fr) 14px; gap: 10px; padding: 14px 12px; } :is(#moneyPointConnectionList, .connection-timeline-list) .connection-timeline-amount { grid-column: 2; } :is(#moneyPointConnectionList, .connection-timeline-list) .connection-timeline-chevron { grid-column: 3; grid-row: 1; } } #appShell .content #moneyMapView .approved-payment-detail { padding: 24px; background: color-mix(in srgb, var(--linked-account-color, #64748b) 9%, white); border-top: 1px solid #cbd5df; color: #263642; } #appShell .content #moneyMapView .approved-detail-stats { gap: 14px; margin-bottom: 26px; } #appShell .content #moneyMapView .approved-detail-stats > div { padding: 18px; border: 1px solid #d6dfe6; gap: 10px; } #appShell .content #moneyMapView .approved-detail-stats small { color: #596875; font-size: 13px; } #appShell .content #moneyMapView .approved-detail-stats strong { color: #243642; font-size: 17px; line-height: 1.5; } #appShell .content #moneyMapView .approved-payment-detail h3 { font-size: 16px; color: #243642; margin: 0 0 14px; } #appShell .content #moneyMapView .approved-history { padding: 0 16px; background: #fff; border: 1px solid #d6dfe6; border-radius: 12px; } #appShell .content #moneyMapView .approved-history > div { padding: 16px 0; min-height: 64px; font-size: 14px; line-height: 1.5; gap: 14px; border-bottom-color: #e1e6eb; } #appShell .content #moneyMapView .approved-history > div:last-child { border-bottom: 0; } #appShell .content #moneyMapView .approved-history time { font-size: 12px; color: #596875; font-variant-numeric: tabular-nums; } #appShell .content #moneyMapView .approved-history > div > strong { color: #dc2626; font-size: 15px; font-weight: 700; white-space: nowrap; } #appShell .content #moneyMapView .approved-history .history-actions { display: flex; gap: 6px; justify-content: flex-end; } #appShell .content #moneyMapView .approved-payment-detail footer { background: color-mix(in srgb, var(--linked-account-color, #64748b) 15%, white); border: 1px solid #cbd6df; padding: 16px; gap: 12px; font-size: 13px; flex-wrap: wrap; color: #344855; } #appShell .content #moneyMapView .approved-payment-detail footer > strong { color: #087345; } @media (max-width: 760px) { #appShell .content #moneyMapView .approved-payment-detail { padding: 16px; } #appShell .content #moneyMapView .approved-detail-stats { grid-template-columns: 1fr; gap: 10px; } #appShell .content #moneyMapView .approved-detail-stats > div { padding: 14px; } #appShell .content #moneyMapView .approved-history { padding-inline: 12px; } #appShell .content #moneyMapView .approved-history > div { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; } #appShell .content #moneyMapView .approved-history time { grid-column: 1 / -1; } #appShell .content #moneyMapView .approved-history > div > span:nth-child(3) { grid-column: 1 / -1; grid-row: 3; } #appShell .content #moneyMapView .approved-history .history-actions { grid-column: 1 / -1; } } #appShell .content #moneyMapView .approved-flow-item { border-color: #cbd5dd; box-shadow: 0 2px 5px #24344708; } #appShell .content #moneyMapView .approved-flow-day { background: #344c5b; color: #fff; } #appShell .content #moneyMapView .approved-flow-path p { color: #465968; line-height: 1.65; } #appShell .content #moneyMapView .approved-flow-amount strong { color: #223743; font-size: 20px; } #appShell .content #moneyMapView .approved-flow-item.is-expanded { border-color: #8eabbc; } #appShell .content #moneyMapView .approved-flow-item.is-expanded .approved-flow-row { background: #e7eef2; } #appShell .content #moneyMapView .approved-flow-detail { background: #edf1f4; padding: 22px; border-top: 1px solid #cbd8e1; } #appShell .content #moneyMapView .approved-flow-detail dl > div { border: 0; box-shadow: 0 1px 3px #2434470b; padding: 18px; } #appShell .content #moneyMapView .approved-flow-detail dl > div:first-child { background: #344c5b; } #appShell .content #moneyMapView .approved-flow-detail dl > div:first-child dt { color: #d6e2ea; } #appShell .content #moneyMapView .approved-flow-detail dl > div:first-child dd { color: #fff; } #appShell .content #moneyMapView .approved-flow-detail dt { color: #596c7b; } #appShell .content #moneyMapView .approved-flow-detail dd { color: #263c4a; } #appShell .content #moneyMapView .approved-flow-memo { border-color: #d4dee5; } #appShell .content #moneyMapView .approved-account-detail { padding: 28px; margin-block: 20px; background: color-mix(in srgb, var(--account-detail-color) 9%, #fff); color: #303b45; border: 1px solid #e1e5ea; border-radius: 20px; box-shadow: 0 6px 24px #24344708; } #appShell .content #moneyMapView .approved-account-detail header { gap: 14px; margin-bottom: 28px; } #appShell .content #moneyMapView .approved-account-identity { display: grid; gap: 5px; min-width: 0; } #appShell .content #moneyMapView .approved-account-identity h3 { margin: 0; font-size: 20px; color: #253542; } #appShell .content #moneyMapView .approved-account-identity > span { color: #74808a; font-size: 12px; } #appShell .content #moneyMapView .approved-account-metrics { grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); gap: 0; align-items: stretch; } #appShell .content #moneyMapView .approved-account-metrics > div { padding: 12px 20px; gap: 12px; border: 0; border-left: 1px solid #aebbc5; border-radius: 0; background: transparent; align-content: center; } #appShell .content #moneyMapView .approved-account-metrics > div:first-child { padding: 20px; border-left: 0; border-radius: 14px; background: #526b7a; background: oklch(from var(--account-detail-color) 49% 0.04 h); } #appShell .content #moneyMapView .approved-account-metrics > div:first-child small { color: #d6e2ea; } #appShell .content #moneyMapView .approved-account-metrics > div:first-child strong { font-size: 30px; color: #fff; letter-spacing: -.8px; } #appShell .content #moneyMapView .approved-account-metrics strong { font-size: 15px; line-height: 1.5; color: #394b59; } #appShell .content #moneyMapView .approved-account-detail footer { margin-top: 26px; padding-top: 22px; border-top: 1px solid #aebbc5; gap: 18px; flex-wrap: wrap; line-height: 1.7; } #appShell .content #moneyMapView .approved-account-detail footer > div { gap: 8px; min-width: 220px; } #appShell .content #moneyMapView .approved-account-detail footer > div > strong { font-size: 13px; } @media (max-width: 760px) { #appShell .content #moneyMapView .approved-account-detail { padding: 20px; } #appShell .content #moneyMapView .approved-account-detail header { margin-bottom: 20px; } #appShell .content #moneyMapView .approved-account-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; } #appShell .content #moneyMapView .approved-account-metrics > div { padding: 8px 12px; } #appShell .content #moneyMapView .approved-account-metrics > div:nth-child(odd):not(:first-child) { border-left: 0; padding-left: 0; } #appShell .content #moneyMapView .approved-account-metrics > div:first-child strong { font-size: 23px; } } body:has(#appShell:not([hidden])) :is(.modal-backdrop, dialog) :is(.transaction-type-choices, .transaction-payment-segments) { gap: 4px; padding: 4px; border: 0; border-radius: 11px; background: #eaf0f5; } body:has(#appShell:not([hidden])) :is(.modal-backdrop, dialog) :is(.transaction-type-choices, .transaction-payment-segments) button { border: 0; border-radius: 8px; background: transparent; color: #607383; min-height: 36px; box-shadow: none; } body:has(#appShell:not([hidden])) :is(.modal-backdrop, dialog) :is(.transaction-type-choices, .transaction-payment-segments) button[aria-pressed=true] { background: #fff; color: #126e96; box-shadow: 0 1px 4px #203b5114; } body:has(#appShell:not([hidden])) .transaction-type-choices button[data-transaction-type-choice] { color: var(--transaction-type-color) !important; } body:has(#appShell:not([hidden])) [data-transaction-type-choice=income] { --transaction-type-color: #0877f9; } body:has(#appShell:not([hidden])) [data-transaction-type-choice=expense] { --transaction-type-color: #dc2626; } body:has(#appShell:not([hidden])) [data-transaction-type-choice=saving] { --transaction-type-color: #168347; } body:has(#appShell:not([hidden])) [data-transaction-type-choice=transfer] { --transaction-type-color: #242424; } body:has(#appShell:not([hidden])) :is(.modal-backdrop, dialog) :is(.modal-panel, .goal-modal, .transaction-modal, .recurring-transaction-modal, .settings-dialog), body:has(#appShell:not([hidden])) > dialog { background: #fff; color: #172b3a; border: 1px solid #e1e7ee; border-radius: 18px; box-shadow: 0 24px 80px #142c4733; } body:has(#appShell:not([hidden])) .modal-backdrop { background: #12273c55; backdrop-filter: blur(4px); } body:has(#appShell:not([hidden])) :is(.modal-backdrop, dialog) :is(h2, h3) { color: #1b3446; letter-spacing: -.4px; } body:has(#appShell:not([hidden])) :is(.modal-backdrop, dialog) label { color: #425a6c; font-size: 13px; } body:has(#appShell:not([hidden])) :is(.modal-backdrop, dialog) .modal-close-button { width: 36px; height: 36px; padding: 0; border: 0; background: #f1f4f7; color: #597080; box-shadow: none; border-radius: 10px; } /* Field rhythm: keep label spacing separate from spacing between fields. */ #moneyPointForm { align-content: start; } #moneyPointForm .money-point-optional-fields { display: block; padding: 18px; overflow-anchor: none; } #moneyPointForm .money-point-optional-fields[open] > summary { margin-bottom: 20px; } /* Details content is not laid out as direct grid children in every browser. */ #moneyPointForm .money-point-optional-fields > :not(summary) + :not([hidden]) { margin-top: 20px; } body:has(#appShell:not([hidden])) :is(#moneyPointForm, #moneyCardForm, #moneyFlowForm, #transactionForm, #recurringTransactionForm, #budgetForm, #securityForm, #supportForm, #noticeForm) { row-gap: 20px; } body:has(#appShell:not([hidden])) :is(.money-point-form-grid, .money-flow-point-selects, .transaction-form-row, .admin-form-grid) { row-gap: 20px; column-gap: 16px; } body:has(#appShell:not([hidden])) :is(#moneyPointForm, #moneyCardForm, #moneyFlowForm, #transactionForm, #recurringTransactionForm, #budgetForm, #securityForm, #supportForm, #noticeForm, #settingsView) label:not(:has(input[type=checkbox], input[type=radio])), body:has(#appShell:not([hidden])) #transactionForm .form-field { gap: 8px; line-height: 1.55; } body:has(#appShell:not([hidden])) :is(#moneyPointForm, #moneyCardForm, #moneyFlowForm, #transactionForm, #recurringTransactionForm, #budgetForm, #securityForm, #supportForm, #settingsView) label small { line-height: 1.6; } #moneyPointForm .money-point-savings-toggle > span { display: grid; gap: 6px; } /* Admin uses the same workspace; state tones remain meaningful. */ /* Cool neutral surfaces complement the sidebar; expense remains red. */ #appShell .content :is(.panel-heading h2, .approved-payment-name strong, .settings-b-section h2) { color: #303735; } #appShell .content :is(.transaction-view-controls, .money-map-section-tabs, .budget-board-tabs, .security-tabs, .support-filter-tabs) { background: #e9edf1; } #appShell .content #dashboardView .dashboard-hero-flow { background: #f3f5f7; } #appShell .content #dashboardView .dashboard-analysis-preview article { background: #f3f5f7; } #appShell .content #moneyMapView .approved-pay-group > header { background: color-mix(in srgb, var(--linked-account-color, #64748b) 9%, white); padding: 20px 24px; gap: 16px; } #appShell .content #moneyMapView .approved-bank-balance { gap: 6px; padding: 4px 0; flex-shrink: 0; } #appShell .content #moneyMapView .approved-bank-balance small { font-size: 11px; line-height: 1.5; } #appShell .content #moneyMapView .approved-bank-balance strong { line-height: 1.5; white-space: nowrap; } #appShell .content #moneyMapView .approved-bank-balance + button { margin-left: 12px; flex-shrink: 0; } @media (max-width: 600px) { #appShell .content #moneyMapView .approved-pay-group > header { padding: 18px 16px; gap: 14px; } #appShell .content #moneyMapView .approved-bank-balance + button { margin-left: auto; } } #appShell .content #budgetsView .clickable-budget-card { transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease; } #appShell .content #budgetsView .clickable-budget-card:focus-within { border-color: var(--budget-row-color, #52718a); box-shadow: 0 0 0 1px var(--budget-row-color, #52718a), 0 8px 20px #24364214; } @media (hover: hover) { #appShell .content #budgetsView .clickable-budget-card:hover { border-color: var(--budget-row-color, #52718a); background: color-mix(in srgb, var(--budget-row-color, #52718a) 4%, white); box-shadow: 0 0 0 1px var(--budget-row-color, #52718a), 0 8px 20px #24364214; } } @media (prefers-reduced-motion: reduce) { #appShell .content #budgetsView .clickable-budget-card { transition: none; } } #appShell .content #budgetsView .budget-card-direct-actions { display: flex; gap: 8px; margin-left: auto; } #appShell .content #budgetsView .budget-card-direct-actions button { min-width: 56px; min-height: 38px; padding: 8px 12px; border: 1px solid #cbd8e5; border-radius: 10px; background: #fff; color: #344f63; font-size: 13px; font-weight: 700; } #appShell .content #budgetsView .budget-card-direct-actions button.danger { border-color: #f7b9bf; color: #dc2626; } #appShell .content #budgetsView .budget-card-direct-actions button:hover { background: #f3f6f9; } #appShell .content #budgetsView .budget-card-direct-actions button.danger:hover { background: #fff1f2; } #appShell .content #budgetsView.budget-approved-screen .budget-list::before { font-size: 17px; line-height: 24px; font-weight: 700; } #appShell .content #budgetsView.budget-approved-screen .budget-attention-panel { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible; } #appShell .content #budgetsView.budget-approved-screen .budget-attention-panel h2 { margin: 0 0 14px; font-size: 17px; line-height: 24px; font-weight: 700; } #appShell .content #budgetsView.budget-approved-screen .budget-attention-list { padding: 8px 18px; border: 1px solid #e1e5ea; border-radius: 16px; background: #fff; } #appShell .content #budgetsView.budget-approved-screen .budget-fund-panel { background: #f3fcf6 !important; border: 1px solid #afe3bf !important; border-radius: 12px; } #appShell .content #budgetsView.budget-approved-screen .budget-fund-panel h2 { color: #16834d; } #appShell .content #budgetsView.budget-approved-screen .budget-board-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 264px; max-width: 100%; min-width: 0; gap: 4px; padding: 4px; } #appShell .content #budgetsView.budget-approved-screen .budget-board-tabs > .budget-board-tab { width: 100%; min-width: 0; margin: 0; padding: 10px 14px; } #appShell .content #budgetsView.budget-approved-screen .budget-fund-panel .budget-risk-empty { background: #f8fafc; border: 1px dashed #d3dfeb; color: #627486; } /* Budget editor: neutral surfaces and consistent actions. */ html.mobile-mode body #budgetForm.budget-modal-open.form-panel { inset: 50% auto auto 50% !important; transform: translate(-50%, -50%) !important; height: auto !important; background: #fff !important; box-shadow: 0 0 0 9999px #111c287a, 0 24px 64px #192e4640 !important; } body #budgetForm.budget-modal-open.form-panel { width: min(540px, calc(100vw - 32px)) !important; max-height: calc(100dvh - 48px) !important; padding: 28px !important; gap: 20px !important; border-radius: 20px !important; scroll-padding: 28px; } body #budgetForm.budget-modal-open > * { flex-shrink: 0; } body #budgetForm.budget-modal-open .budget-modal-kicker { color: #64748b !important; font-weight: 600 !important; } body #budgetForm.budget-modal-open .budget-modal-heading h2 { line-height: 1.4 !important; } body #budgetForm.budget-modal-open .budget-edit-preview { background: #f6f7f9 !important; border-color: #e3e7ec !important; padding: 18px !important; gap: 20px !important; border-radius: 12px !important; } body #budgetForm.budget-modal-open .budget-modal-actions { position: sticky; bottom: -28px; padding: 18px 0; margin: 0 !important; background: #fff; border-top: 1px solid #e5e9ee; z-index: 2; } body #budgetForm.budget-modal-open .budget-modal-actions button { min-height: 42px; padding: 10px 16px; font-size: 13px; font-weight: 700; border-radius: 10px; box-shadow: none !important; } body #budgetForm.budget-modal-open #deleteEditingBudget { background: #fff !important; color: #dc2626 !important; border: 1px solid #f7b9bf !important; } body #budgetForm.budget-modal-open #deleteEditingBudget:hover { background: #fff1f2 !important; } body #budgetForm.budget-modal-open #cancelBudgetModal { background: #fff !important; color: #344f63 !important; border: 1px solid #cbd8e5 !important; } body #budgetForm.budget-modal-open #budgetSubmitButton { background: linear-gradient(135deg, #3aa3d6 0%, #1683c3 100%) !important; box-shadow: 0 8px 20px rgba(22, 131, 195, .22) !important; } @media (max-width: 600px) { body #budgetForm.budget-modal-open.form-panel { padding: 22px !important; max-height: calc(100dvh - 32px) !important; } body #budgetForm.budget-modal-open .budget-modal-actions { bottom: -22px; gap: 8px !important; } body #budgetForm.budget-modal-open .budget-modal-actions button { padding: 10px 12px; } } /* Linked transactions use balanced columns, with dates in group headings. */ #appShell .content #budgetDetailView.budget-approved-screen :is(.budget-analysis-table-columns, .budget-analysis-table-row) { grid-template-columns: minmax(140px, 1fr) minmax(180px, 1.35fr) minmax(180px, 1.35fr) minmax(104px, 1fr) minmax(120px, 1fr) 88px; column-gap: 24px; min-width: 1008px; padding: 12px 24px; } #appShell .content #budgetDetailView.budget-approved-screen .budget-analysis-table-columns > :first-child, #appShell .content #budgetDetailView.budget-approved-screen .budget-analysis-row-date { display: none; } #appShell .content #budgetDetailView.budget-approved-screen .budget-analysis-date-group { min-width: 1008px; } #appShell .content #budgetDetailView.budget-approved-screen .budget-analysis-row-category { gap: 14px; } #appShell .content #budgetDetailView.budget-approved-screen .budget-analysis-row-icon { flex-shrink: 0; } #appShell .content #budgetDetailView.budget-approved-screen .budget-analysis-table-row { min-height: 68px; font-size: 13px; line-height: 1.6; } #appShell .content #budgetDetailView.budget-approved-screen .budget-analysis-table-row > * { min-width: 0; overflow-wrap: anywhere; } #appShell .content #budgetDetailView.budget-approved-screen :is(.budget-analysis-table-columns, .budget-analysis-table-row) > :nth-child(6) { text-align: right; white-space: nowrap; } #appShell .content #budgetDetailView.budget-approved-screen .budget-analysis-table-columns > :last-child { text-align: center; } #appShell .content #budgetDetailView.budget-approved-screen .budget-analysis-date-group h4 { padding: 12px 24px; } #appShell .content #budgetDetailView.budget-approved-screen .budget-analysis-row-actions { gap: 8px; justify-content: flex-end; } #appShell .content #budgetDetailView.budget-approved-screen .budget-analysis-row-actions button { min-width: 56px; min-height: 38px; padding: 8px 12px; border: 1px solid #cbd8e5; border-radius: 10px; background: #fff; color: #344f63; font-size: 13px; font-weight: 700; line-height: 1.4; } #appShell .content #budgetDetailView.budget-approved-screen .budget-analysis-row-actions button.danger { border-color: #f7b9bf; color: #dc2626; } #appShell .content #budgetDetailView.budget-approved-screen .budget-analysis-row-actions button:hover { background: #f3f6f9; } #appShell .content #budgetDetailView.budget-approved-screen .budget-analysis-row-actions button.danger:hover { background: #fff1f2; } #appShell .content #budgetDetailView.budget-approved-screen .budget-analysis-table-columns { background: #e9eef2; color: #445563; font-size: 13px; font-weight: 700; border-block: 1px solid #cbd5df; } #appShell .content #budgetDetailView.budget-approved-screen .budget-analysis-date-group h4 { background: #f0f3f6; color: #344553; border-top: 1px solid #cbd5df; border-bottom: 1px solid #dce3e9; font-size: 13px; font-weight: 700; } #appShell .content #budgetDetailView.budget-approved-screen .budget-analysis-table-row { background: #fff; color: #283640; font-size: 14px; border-top-color: #dce3e9; } #appShell .content #budgetDetailView.budget-approved-screen .budget-analysis-table-row > span { color: #344553; } #appShell .content #budgetDetailView.budget-approved-screen .budget-analysis-table-row > :nth-child(3) { color: #202e39; font-weight: 600; } #appShell .content #budgetDetailView.budget-approved-screen .budget-analysis-table-row:hover, #appShell .content #budgetDetailView.budget-approved-screen .budget-analysis-table-row:focus-within { background: #edf3f7; } /* Workspace popups share neutral surfaces; authentication stays unchanged. */ body:has(#appShell:not([hidden])) .modal-backdrop:not(#signupModal):not(#passwordResetModal) { background: #17253366 !important; } body:has(#appShell:not([hidden])) .modal-backdrop:not(#signupModal):not(#passwordResetModal) > :is(.goal-modal, .panel, form, .transaction-modal) { background: #fff !important; color: #283640; border: 1px solid #dce3e9 !important; border-radius: 18px !important; max-height: calc(100dvh - 40px) !important; overflow-y: auto; overscroll-behavior: contain; } body:has(#appShell:not([hidden])) .modal-backdrop :is(.modal-actions, .transaction-modal-actions, .account-form-actions) { gap: 10px; padding-top: 18px; border-top: 1px solid #e5e9ee; background: #fff !important; } body:has(#appShell:not([hidden])) .modal-backdrop :is(.danger-button, button.danger) { color: #dc2626 !important; border: 1px solid #f7b9bf !important; background: #fff !important; border-radius: 10px; min-height: 38px; padding: 8px 14px; font-size: 13px; font-weight: 700; box-shadow: none !important; } body:has(#appShell:not([hidden])) #budgetDeleteModal #confirmBudgetDelete { background: #dc2626 !important; color: #fff !important; border-color: #dc2626 !important; } html.mobile-mode body:has(#appShell:not([hidden])) .modal-backdrop:not(#signupModal):not(#passwordResetModal):not([hidden]) { padding: 12px !important; align-items: center !important; } html.mobile-mode body:has(#appShell:not([hidden])) .modal-backdrop:not(#signupModal):not(#passwordResetModal) > :is(.goal-modal, .panel, form, .transaction-modal) { height: auto !important; max-height: calc(100dvh - 24px) !important; padding: 22px 18px !important; background: #fff !important; border-radius: 18px !important; } html.mobile-mode body:has(#appShell:not([hidden])) .modal-backdrop :is(input, select, textarea):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]) { border: 1px solid #cdd8e2 !important; background: #fff !important; } html.mobile-mode body:has(#appShell:not([hidden])) :is(#appShell, .modal-backdrop, dialog) :is(.primary-button, .page-action--primary) { background: linear-gradient(135deg, #3aa3d6 0%, #1683c3 100%) !important; } #appShell .content #budgetDetailView.budget-approved-screen .budget-analysis-summary { padding: 20px 0; gap: 0; border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none !important; } #appShell .content #budgetDetailView.budget-approved-screen .budget-analysis-metric { padding: 4px 24px; align-content: start; justify-items: start; gap: 10px; border: 0 !important; border-right: 1px solid #dce3e9 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } #appShell .content #budgetDetailView.budget-approved-screen .budget-analysis-metric:last-child { border-right: 0 !important; } #appShell .content #budgetDetailView.budget-approved-screen .budget-analysis-metric:not(.over) strong { color: #243642; } #appShell .content #budgetDetailView.budget-approved-screen .budget-analysis-progress { margin: 0 24px; height: 8px; } #appShell .content #budgetDetailView.budget-approved-screen .budget-analysis-progress-text { margin: 0; padding: 0 24px 16px; border: 0 !important; border-radius: 0; text-align: left; } #appShell .content #budgetDetailView.budget-approved-screen .budget-analysis-layout { position: relative; padding: 64px 24px 24px; min-height: 260px; background: #f8fafb !important; border: 0 !important; border-radius: 16px; align-items: center; } #appShell .content #budgetDetailView.budget-approved-screen .budget-analysis-pie h3 { position: absolute; top: 24px; left: 24px; right: 24px; line-height: 1.5; } #appShell .content #budgetDetailView.budget-approved-screen .budget-analysis-transactions-panel { border: 1px solid #e5ecf5 !important; border-radius: 12px; overflow: hidden; box-shadow: none !important; background: #fff !important; } #appShell .content #budgetDetailView.budget-approved-screen .budget-analysis-table-columns { min-height: 40px; padding-block: 8px; background: #fff; color: #7c8cab; font-size: 12px; font-weight: 500; border: 0; border-top: 1px solid #edf1f6; border-radius: 0; } #appShell .content #budgetDetailView.budget-approved-screen .budget-analysis-date-group h4 { background: #fafbfe; border: 0; border-block: 1px solid #edf1f6; padding: 8px 24px; color: #344d82; font-size: 13px; } #appShell .content #budgetDetailView.budget-approved-screen .budget-analysis-table-row { min-height: 54px; padding-block: 8px; font-size: 12px; color: #48618e; border-top: 0; border-bottom: 1px solid #edf1f6; } #appShell .content #budgetDetailView.budget-approved-screen .budget-analysis-table-row > span { color: #526a94; } #appShell .content #budgetDetailView.budget-approved-screen .budget-analysis-table-row > :nth-child(3) { color: #526a94; font-weight: 400; } #appShell .content #budgetDetailView.budget-approved-screen .budget-analysis-table-row:hover, #appShell .content #budgetDetailView.budget-approved-screen .budget-analysis-table-row:focus-within { background: #f5f9ff; } #appShell .content #budgetDetailView.budget-approved-screen .budget-analysis-row-actions { justify-content: center; } #appShell .content #budgetDetailView.budget-approved-screen .budget-analysis-row-actions button { min-width: 36px; min-height: 32px; padding: 6px 4px; border: 0; border-radius: 5px; background: transparent; color: #2186f5; font-size: 12px; box-shadow: none; } #appShell .content #budgetDetailView.budget-approved-screen .budget-analysis-row-actions button.danger { border: 0; color: #f04452; } #appShell .content #budgetDetailView.budget-approved-screen .budget-analysis-row-actions button:only-child { min-width: 72px; border: 1px solid #7885cd; color: #465394; } @media (max-width: 600px) { #appShell .content #budgetDetailView.budget-approved-screen .budget-analysis-metric { padding: 12px; } #appShell .content #budgetDetailView.budget-approved-screen .budget-analysis-metric:nth-child(2n) { border-right: 0 !important; } #appShell .content #budgetDetailView.budget-approved-screen .budget-analysis-layout { padding: 76px 18px 20px; } #appShell .content #budgetDetailView.budget-approved-screen .budget-analysis-pie h3 { left: 18px; right: 18px; top: 20px; } } /* Shared destructive confirmations: calm content, explicit red action. */ html.mobile-mode body:has(#appShell:not([hidden])) #transactionModal .transaction-modal-heading { background: #fff !important; border-bottom: 1px solid #e5e9ee; color: #283640; } body .settings-dialog.delete-confirm-dialog, body #budgetDeleteModal .budget-confirm-modal { box-sizing: border-box; width: min(460px, calc(100vw - 32px)); height: fit-content; min-height: 0; max-height: calc(100dvh - 40px); overflow-y: auto; inset: 0; margin: auto; padding: 28px; border: 1px solid #fecaca; border-top: 4px solid #dc2626; border-radius: 20px; background: #fff; color: #263642; box-shadow: 0 24px 80px #17203333; } body .delete-confirm-dialog::backdrop { background: #17203366; backdrop-filter: blur(4px); } body .delete-confirm-dialog form { display: flex; flex-direction: column; gap: 18px; } body .delete-confirm-dialog h2 { margin: 0; color: #991b1b; font-size: 22px; line-height: 1.4; } body .delete-confirm-dialog p { margin: 0; font-size: 14px; line-height: 1.75; } body .delete-confirm-dialog ul { margin: 0; padding-left: 20px; line-height: 1.8; } body .delete-confirm-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: #fff1f2; color: #dc2626; font-size: 26px; font-weight: 800; } body .delete-confirm-description { white-space: pre-line; overflow-wrap: anywhere; } body .delete-confirm-dialog .settings-form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; padding-top: 18px; border-top: 1px solid #e5e7eb; } body .delete-confirm-dialog .settings-form-actions button { min-height: 44px; min-width: 88px; padding: 10px 18px; border-radius: 10px; font-weight: 700; } body .delete-confirm-dialog .settings-form-actions .danger-button, body #budgetDeleteModal .danger-button { background: #dc2626; border-color: #dc2626; color: #fff; } body .delete-confirm-dialog .settings-form-actions .danger-button:hover { background: #b91c1c; } body .delete-confirm-dialog .settings-form-actions .danger-button:disabled { opacity: .45; cursor: not-allowed; } @media (max-width: 600px) { body .settings-dialog.delete-confirm-dialog { padding: 22px; } body .delete-confirm-dialog .settings-form-actions button { flex: 1; } } #appShell .content #moneyMapView .approved-flow-day { background: #344c5b; color: #fff; } #appShell .content #settingsView .settings-editor-inner { background: #f5f7f9; } #appShell .content #dashboardView .dashboard-hero-flow .expense :is(em, strong), #appShell .content #transactionsView .transaction-overview-card.expense strong { color: #dc2626; } #appShell .content #dashboardView .dashboard-hero-flow .expense .dashboard-hero-flow-icon, #appShell .content #transactionsView .transaction-overview-card.expense .transaction-overview-icon { background: #dc2626; color: #fff; } #appShell .content #insightsView .ma-segment-0 { background: #dc2626; } #appShell .content #insightsView .ma-label-0 strong { color: #dc2626; } #appShell > main.content.admin-page { --adm-bg: #f3f5f7; --adm-panel: #fff; --adm-line: #e1e7ee; --adm-ink: #172b3a; --adm-muted: #657585; --adm-accent: #137fab; background: #f3f5f7; } #appShell .content #adminView :is(.adm-panel, .adm-metrics article, .adm-metrics .adm-metric-button) { background: #fff; border: 1px solid #e1e7ee; border-radius: 16px; box-shadow: var(--ws-shadow); } #appShell .content #adminView .adm-row { background: transparent; color: #263e50; } #appShell .content #adminView .adm-row:hover { background: #f0f6fa; } #appShell .content #adminView .admin-tabs { gap: 20px; } #appShell .content #adminView .admin-tab { background: transparent; color: #657585; } #appShell .content #adminView .admin-tab.active { color: #137fab; border-bottom-color: #137fab; } @media (prefers-reduced-motion: no-preference) { #appShell .content :is(button, summary, [role=button]), body:has(#appShell:not([hidden])) :is(.modal-backdrop, dialog) button { transition: background-color 200ms var(--ws-ease, ease), color 200ms ease, border-color 200ms ease, box-shadow 240ms ease, transform 220ms var(--ws-ease, ease), opacity 200ms ease; } } @media (max-width: 1450px) and (min-width: 761px) { #appShell .content #transactionsView .transaction-overview-card { padding: 16px 12px; gap: 12px; } #appShell .content #transactionsView .transaction-overview-card > div > strong { font-size: 17px; } } @media (max-width: 760px) { #appShell .content #budgetDetailView .budget-analysis-detail { padding: 18px; gap: 20px; } #appShell .content #budgetDetailView .budget-analysis-summary { padding: 12px; gap: 10px; } #appShell .content #insightsView :is(.insight-more-panel, .insight-goal-section, .insight-risk-section, .insight-badge-panel, .insight-evidence-panel), #appShell .content #moneyMapView .money-point-registry-panel { padding: 18px; } .mobile-mode body:has(#appShell:not([hidden])), body.mobile-mode:has(#appShell:not([hidden])), .mobile-mode #appShell > main.content { background: #f3f5f7 !important; } .mobile-mode #appShell .content .panel { background: #fff !important; border-color: #e1e7ee !important; } #appShell > main.content { background: var(--ws-canvas); } #appShell .content .panel { border-radius: 14px; } #appShell .content #settingsView .settings-b-section { padding: 18px; } #appShell .content #insightsView :is(.ma-comparison, .ma-categories) { padding: 18px; } #appShell .content #transactionsView .transaction-overview-grid { gap: 8px; } #appShell .content #transactionsView .transaction-overview-card { padding: 12px; } #appShell .content #transactionsView .transaction-overview-card > div > strong { font-size: 16px; } #appShell .content #dashboardView .dashboard-hero-copy > strong { font-size: 32px; } }