/* Ledger Overview design tokens and component styles, scoped to Runway Overview. */
@font-face{font-family:"DM Sans Variable";font-style:normal;font-weight:100 1000;font-display:swap;src:url("/assets/fonts/dm-sans-latin.woff2") format("woff2")}
#tab-overview *{ box-sizing: border-box; }
#tab-overview body{ margin: 0px; }
#tab-overview button, #tab-overview input, #tab-overview select{ font: inherit; }
#tab-overview button, #tab-overview a, #tab-overview input, #tab-overview select{ -webkit-tap-highlight-color: transparent; }
#tab-overview button, #tab-overview a{ touch-action: manipulation; }
#tab-overview button{ cursor: pointer; }
#tab-overview button:disabled{ cursor: wait; opacity: 0.5; }
#tab-overview a{ color: inherit; text-decoration: none; }
#tab-overview h1, #tab-overview h2, #tab-overview h3, #tab-overview p{ margin: 0px; }
#tab-overview h1{ font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 36px; letter-spacing: -1.3px; line-height: 1.16; }
#tab-overview h2{ font-size: 16px; letter-spacing: -0.25px; font-weight: 650; }
#tab-overview h3{ font-size: 15px; }
#tab-overview button:focus-visible, #tab-overview a:focus-visible{ outline: rgb(188, 141, 80) solid 3px; outline-offset: 4px; }
#tab-overview input, #tab-overview select{ color: rgb(41, 62, 54); background: rgb(255, 255, 255); border: 1px solid rgb(220, 226, 219); border-radius: 7px; padding: 11px 12px; min-width: 0px; }
#tab-overview input:focus, #tab-overview select:focus{ outline: rgb(112, 152, 136) solid 2px; outline-offset: 1px; }
#tab-overview select{ cursor: pointer; padding-right: 28px; }
#tab-overview input::placeholder{ color: rgb(153, 163, 156); }
#tab-overview .subtle{ color: rgb(129, 144, 135); font-size: 12px; line-height: 1.6; }
#tab-overview .primary, #tab-overview .secondary{ border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 16px; font-size: 12px; font-weight: 600; white-space: nowrap; transition: background 0.15s; }
#tab-overview .primary{ background: rgb(33, 79, 64); border: 1px solid rgb(33, 79, 64); color: rgb(255, 255, 255); box-shadow: rgba(20, 60, 53, 0.063) 0px 2px 3px; }
#tab-overview .primary:hover{ background: rgb(22, 63, 50); }
#tab-overview .secondary{ background: rgb(255, 255, 255); border: 1px solid rgb(217, 223, 216); color: rgb(61, 81, 69); }
#tab-overview .secondary:hover{ background: rgb(241, 244, 239); }
#tab-overview .text-btn{ border: 0px; background: none; color: rgb(63, 105, 88); padding: 0px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12px; cursor: pointer; }
#tab-overview .text-btn:hover{ color: rgb(25, 62, 45); }
#tab-overview .icon-btn{ border: 0px; background: transparent; display: inline-flex; justify-content: center; align-items: center; color: rgb(140, 152, 142); border-radius: 5px; padding: 6px; flex-shrink: 0; }
#tab-overview .icon-btn:hover{ color: rgb(48, 88, 69); background: rgb(237, 242, 235); }
#tab-overview .full{ width: 100%; }
#tab-overview .topbar{ height: 67px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgb(227, 232, 223); color: rgb(134, 146, 132); font-size: 9px; font-weight: 550; letter-spacing: 1.2px; }
#tab-overview .topbar-slash{ margin: 0px 11px; color: rgb(185, 193, 180); }
#tab-overview .today{ font-size: 11px; letter-spacing: 0px; display: flex; align-items: center; gap: 7px; color: rgb(132, 145, 128); }
#tab-overview .page-header{ display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 31px 0px 27px; }
#tab-overview .page-header p{ color: rgb(139, 151, 136); font-size: 12px; margin-top: 10px; }
#tab-overview .header-actions{ display: flex; gap: 10px; align-items: center; }
#tab-overview .account-settings{ padding: 10px; }
#tab-overview .account-cards{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 22px; }
#tab-overview .account-cards.single{ grid-template-columns: 1fr; }
#tab-overview .account-card{ padding: 22px 24px 0px; background: rgb(255, 255, 255); border: 1px solid rgb(223, 229, 219); border-radius: 10px; box-shadow: rgba(53, 80, 43, 0.01) 0px 2px 2px; }
#tab-overview .account-card-top{ display: flex; align-items: center; gap: 12px; }
#tab-overview .account-card-top > .icon-btn{ margin-left: auto; align-self: flex-start; }
#tab-overview .account-glyph{ width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 9px; flex-shrink: 0; }
#tab-overview .glyph-1{ background: rgb(234, 240, 231); color: rgb(82, 123, 99); }
#tab-overview .glyph-2{ background: rgb(246, 238, 226); color: rgb(183, 141, 94); }
#tab-overview .account-title{ padding: 0px; border: 0px; background: none; display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: 13px; color: rgb(52, 76, 62); }
#tab-overview .account-title > svg{ color: rgb(172, 182, 168); }
#tab-overview .account-card-top .subtle{ font-size: 10px; margin-top: 4px; display: block; }
#tab-overview .balance-label{ margin-top: 24px; font-size: 9px; letter-spacing: 1.25px; color: rgb(139, 151, 135); display: flex; align-items: center; gap: 7px; }
#tab-overview .balance-label span{ display: inline-flex; }
#tab-overview .big-balance{ font-size: 34px; letter-spacing: -1.25px; line-height: 1.25; margin: 6px 0px 22px; font-weight: 450; font-variant-numeric: tabular-nums; }
#tab-overview .card-balances{ display: flex; border-top: 1px solid rgb(233, 236, 229); padding: 15px 0px 17px; gap: 25px; }
#tab-overview .card-balances > div{ display: flex; flex: 1 1 0%; flex-direction: column; gap: 7px; }
#tab-overview .card-balances > div + div{ padding-left: 23px; border-left: 1px solid rgb(228, 233, 223); }
#tab-overview .card-balances span{ font-size: 10px; color: rgb(140, 151, 135); display: flex; align-items: center; gap: 5px; }
#tab-overview .card-balances strong{ font-size: 14px; font-weight: 550; font-variant-numeric: tabular-nums; }
#tab-overview .tiny-dot{ display: inline-block; border-radius: 50%; width: 4px; height: 4px; background: currentcolor; }
#tab-overview .panel{ border: 1px solid rgb(224, 230, 220); border-radius: 10px; background: rgb(255, 255, 255); overflow: hidden; }
#tab-overview .panel-header{ padding: 22px 24px 15px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#tab-overview .panel-header p{ font-size: 11px; color: rgb(141, 152, 136); margin-top: 7px; line-height: 1.5; }
#tab-overview .horizon{ font-size: 11px; padding: 8px 28px 8px 10px; background: rgb(250, 251, 248); border-color: rgb(227, 231, 223); }
#tab-overview .forecast-summary{ padding: 7px 24px 5px; display: flex; align-items: flex-end; gap: 19px; }
#tab-overview .forecast-summary > div > span{ display: block; font-size: 8px; letter-spacing: 1.15px; color: rgb(152, 161, 144); }
#tab-overview .forecast-summary strong{ font-size: 27px; letter-spacing: -0.7px; font-weight: 450; display: block; margin-top: 6px; }
#tab-overview .forecast-change{ display: flex; align-items: center; gap: 4px; color: rgb(140, 152, 131); font-size: 10px; padding-bottom: 5px; }
#tab-overview .chart-wrap{ padding: 8px 16px 15px; }
#tab-overview .chart-wrap svg{ width: 100%; height: clamp(218px, 16vw, 320px); display: block; overflow: visible; }
#tab-overview .axis-label{ fill: rgb(156, 166, 146); font-size: 10px; font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-variant-numeric: tabular-nums; }
#tab-overview .chart-caption{ display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 8px 0px; min-height: 30px; font-size: 10px; }
#tab-overview .chart-caption .subtle{ font-size: 10px; }
#tab-overview .legend{ display: flex; gap: 19px; font-size: 10px; color: rgb(141, 152, 133); }
#tab-overview .legend span{ display: flex; gap: 6px; align-items: center; }
#tab-overview .legend i{ display: block; width: 6px; height: 6px; border-radius: 50%; }
#tab-overview .chart-caption strong{ font-weight: 600; }
#tab-overview .forecast-footer{ background: rgb(251, 252, 248); border-top: 1px solid rgb(233, 237, 226); padding: 13px 24px; display: flex; align-items: center; gap: 7px; font-size: 10px; color: rgb(156, 167, 142); }
#tab-overview .forecast-footer .text-btn{ margin-left: auto; font-size: 10px; color: rgb(120, 146, 104); }
#tab-overview .balance-warning{ display: flex; align-items: center; gap: 8px; background: rgb(255, 245, 239); color: rgb(179, 84, 53); font-size: 11px; padding: 13px 23px; }
#tab-overview .bottom-grid{ display: grid; grid-template-columns: minmax(0px, 1.6fr) minmax(285px, 1fr); gap: 22px; margin-top: 22px; }
#tab-overview .register-panel .panel-header{ padding-bottom: 16px; }
#tab-overview .table-toolbar{ padding: 0px 23px 14px; display: flex; justify-content: space-between; gap: 10px; }
#tab-overview .search-box{ display: flex; gap: 8px; align-items: center; background: rgb(250, 251, 248); border: 1px solid rgb(230, 234, 223); border-radius: 6px; padding: 0px 10px; flex: 1 1 0%; color: rgb(161, 172, 150); }
#tab-overview .search-box input{ background: transparent; border: 0px; padding: 9px 0px; font-size: 11px; min-width: 0px; width: 100%; }
#tab-overview .search-box input:focus{ outline: none; }
#tab-overview .search-box:focus-within{ outline: rgb(112, 152, 136) solid 2px; }
#tab-overview .table-toolbar select{ font-size: 10px; padding: 8px 22px 8px 8px; color: rgb(135, 149, 123); background: rgb(250, 251, 248); border-color: rgb(230, 234, 223); }
#tab-overview .table-scroll{ overflow: auto; }
#tab-overview table{ border-collapse: collapse; width: 100%; text-align: left; white-space: nowrap; }
#tab-overview th{ font-size: 8px; letter-spacing: 0.9px; color: rgb(148, 160, 131); font-weight: 500; background: rgb(250, 251, 248); padding: 12px 14px; border-top: 1px solid rgb(237, 240, 231); border-bottom: 1px solid rgb(237, 240, 231); }
#tab-overview th:first-child, #tab-overview td:first-child{ padding-left: 23px; }
#tab-overview th:last-child, #tab-overview td:last-child{ padding-right: 18px; }
#tab-overview td{ padding: 15px 14px; border-bottom: 1px solid rgb(237, 240, 233); font-size: 11px; }
#tab-overview tbody tr:last-child td{ border-bottom: 0px; }
#tab-overview .transaction-cell{ display: flex; align-items: center; gap: 10px; }
#tab-overview .transaction-icon{ height: 31px; width: 31px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
#tab-overview .transaction-icon.withdrawal{ background: rgb(243, 241, 235); color: rgb(153, 150, 127); }
#tab-overview .transaction-icon.deposit{ background: rgb(234, 242, 233); color: rgb(113, 146, 98); }
#tab-overview .transaction-icon.transfer{ background: rgb(237, 240, 243); color: rgb(132, 148, 157); }
#tab-overview .transaction-cell strong{ font-size: 11px; font-weight: 550; color: rgb(69, 84, 61); display: block; }
#tab-overview .transaction-cell > div > span{ display: block; color: rgb(160, 170, 149); font-size: 9px; margin-top: 5px; }
#tab-overview .status-pill{ border: 0px; border-radius: 4px; padding: 5px 7px; display: inline-flex; gap: 4px; align-items: center; font-size: 8px; background: transparent; }
#tab-overview .status-pill.cleared{ background: rgb(237, 243, 231); color: rgb(131, 160, 105); }
#tab-overview .status-pill.pending{ background: rgb(249, 240, 220); color: rgb(188, 157, 96); }
#tab-overview .amount-cell{ text-align: right; font-variant-numeric: tabular-nums; font-weight: 550; color: rgb(75, 89, 66); font-size: 11px; }
#tab-overview .align-right{ text-align: right; }
#tab-overview .positive{ color: rgb(76, 130, 86) !important; }
#tab-overview .negative{ color: rgb(182, 92, 71) !important; }
#tab-overview .date-cell{ font-size: 10px; color: rgb(130, 144, 118); }
#tab-overview .row-actions{ display: flex; align-items: center; gap: 3px; justify-content: flex-end; }
#tab-overview .row-actions .icon-btn{ padding: 4px; }
#tab-overview .row-actions .icon-btn:hover{ color: rgb(61, 101, 71); }
#tab-overview .count-badge{ display: flex; align-items: center; justify-content: center; background: rgb(239, 243, 233); border-radius: 5px; font-size: 11px; color: rgb(140, 157, 123); min-width: 24px; padding: 5px; }
#tab-overview .upcoming-item{ display: flex; align-items: center; gap: 10px; width: 100%; padding: 17px 23px; text-align: left; border-width: 0px 0px 1px; border-style: none none solid; border-color: currentcolor currentcolor rgb(237, 240, 230); border-image: none; background: rgb(255, 255, 255); color: rgb(75, 93, 64); }
#tab-overview .upcoming-item:hover{ background: rgb(251, 252, 248); }
#tab-overview .upcoming-item > strong{ margin-left: auto; font-size: 11px; font-weight: 550; white-space: nowrap; }
#tab-overview .date-tile{ display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 34px; height: 38px; background: rgb(245, 247, 239); border: 1px solid rgb(232, 237, 223); border-radius: 5px; gap: 3px; }
#tab-overview .date-tile span{ font-size: 7px; text-transform: uppercase; letter-spacing: 0.6px; color: rgb(164, 174, 150); }
#tab-overview .date-tile strong{ font-size: 14px; font-weight: 500; color: rgb(117, 136, 101); }
#tab-overview .date-tile.late{ background: rgb(251, 240, 233); border-color: rgb(242, 224, 212); }
#tab-overview .date-tile.late strong{ color: rgb(180, 109, 80); }
#tab-overview .upcoming-description{ min-width: 0px; }
#tab-overview .upcoming-description > strong{ font-size: 11px; font-weight: 550; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tab-overview .upcoming-description > span{ display: block; font-size: 9px; color: rgb(160, 172, 148); margin-top: 5px; }
#tab-overview .overdue-text{ display: block; color: rgb(177, 125, 88); font-size: 9px; font-weight: 400; margin-top: 4px; }
#tab-overview .panel-bottom-link{ display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; padding: 14px; background: rgb(252, 253, 249); border: 0px; color: rgb(138, 158, 119); font-size: 10px; }
#tab-overview .empty{ padding: 44px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; color: rgb(148, 162, 138); gap: 12px; }
#tab-overview .empty > svg{ color: rgb(150, 170, 137); stroke-width: 1.3; }
#tab-overview .empty h3{ font-family: Georgia, serif; font-size: 19px; color: rgb(113, 133, 98); font-weight: 400; }
#tab-overview .empty p{ font-size: 11px; line-height: 1.7; max-width: 280px; color: rgb(156, 167, 143); }
#tab-overview .empty .primary, #tab-overview .empty .text-btn{ margin-top: 7px; }
#tab-overview .empty.small{ padding: 37px 24px; }
#tab-overview .empty.small h3{ font-size: 18px; }
#tab-overview .page-footer{ display: flex; justify-content: space-between; gap: 15px; margin: 27px 0px 24px; font-size: 9px; color: rgb(165, 175, 153); }
#tab-overview{ --rw-bg: #020713; --rw-surface: #0a1423; --rw-surface-raised: #102235; --rw-line: rgba(150, 200, 255, .19); --rw-line-soft: rgba(150, 200, 255, .1); --rw-text: #f7f9ff; --rw-muted: #afc7da; --rw-dim: #8da7bc; --rw-blue: #96c8ff; --rw-gold: #d2b75b; --rw-danger: #ffab9b; --rw-warning: #ffb05c; --chart-account-1: #96c8ff; --chart-account-2: #d2b75b; --chart-fill: #6ea8dc; --chart-grid: rgba(150, 200, 255, .12); --chart-zero: #ffab9b; --chart-hover: #afc7da; --chart-point-border: #0a1423; font-family: "DM Sans Variable", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--rw-text); background: var(--rw-bg); color-scheme: var(--rw-color-scheme); -webkit-font-smoothing: antialiased; --rw-input: #060d18; --rw-search: #07101c; --rw-select: #0a1524; --rw-placeholder: #839db4; --rw-primary-ink: #060b19; --rw-primary: #f7f9ff; --rw-primary-hover: #d7eaff; --rw-link-hover: #d2e9ff; --rw-selection: #355c81; --rw-selection-text: #ffffff; --rw-logo-start: #1c3b5b; --rw-logo-ring: #081321; --rw-slash: #506b82; --rw-card-start: #101e2e; --rw-card-end: #080f1b; --rw-card-second: #101b2b; --rw-balance: #dfedff; --rw-projection: #deedff; --rw-withdrawal: #b2c1d1; --rw-cleared: #b5dcff; --rw-pending: #e1c77d; --rw-error-surface: #2c1a22; --rw-error-text: #ffb4a4; --rw-toast: #152b43; --rw-dialog-start: #122237; --rw-dialog-end: #080f1c; --rw-segment: #254463; --rw-segment-text: #e1efff; --rw-toast-shadow: #0008; --rw-dialog-shadow: #000a; --rw-panel-start: rgba(18, 33, 51, .94); --rw-panel-end: rgba(7, 15, 27, .97); --rw-panel-shadow: rgba(0, 0, 0, .15); --rw-sidebar: rgba(5, 12, 23, .95); --rw-nav-end: rgba(6, 11, 25, .7); --rw-banner-end: rgba(7, 17, 30, .9); --rw-backdrop: rgba(0, 4, 12, .75); --rw-page-grid: rgba(150, 200, 255, .035); --rw-color-scheme: dark; }
:root[data-theme="light"] #tab-overview{ --rw-bg: #eaf1f6; --rw-surface: #ffffff; --rw-surface-raised: #dbeaf4; --rw-line: rgba(60, 120, 170, .24); --rw-line-soft: rgba(60, 120, 170, .13); --rw-text: #0c2035; --rw-muted: #3d5971; --rw-dim: #546f86; --rw-blue: #286499; --rw-gold: #8b6817; --rw-danger: #ac3e30; --rw-warning: #a84900; --chart-account-1: #3076b5; --chart-account-2: #9a761c; --chart-fill: #6ea8dc; --chart-grid: rgba(60, 120, 170, .16); --chart-zero: #bd5545; --chart-hover: #536c82; --chart-point-border: #ffffff; --rw-color-scheme: light; --rw-input: #ffffff; --rw-search: #f8fbfd; --rw-select: #f8fbfd; --rw-placeholder: #627d92; --rw-primary-ink: #ffffff; --rw-primary: #112b46; --rw-primary-hover: #1e466b; --rw-link-hover: #194c7a; --rw-selection: #c5dff5; --rw-selection-text: #0c2035; --rw-logo-start: #d7eaff; --rw-logo-ring: #f8fbfd; --rw-slash: #849bb0; --rw-card-start: #f3f9ff; --rw-card-end: #ffffff; --rw-card-second: #fcfaf2; --rw-balance: #122e49; --rw-projection: #122e49; --rw-withdrawal: #526b80; --rw-cleared: #245e90; --rw-pending: #826213; --rw-error-surface: #fff0ed; --rw-error-text: #a13d30; --rw-toast: #e1eef9; --rw-dialog-start: #f7fbff; --rw-dialog-end: #ffffff; --rw-segment: #d7e9f8; --rw-segment-text: #17476d; --rw-toast-shadow: #16334e20; --rw-dialog-shadow: #16334e2e; --rw-panel-start: rgba(255, 255, 255, .96); --rw-panel-end: rgba(247, 251, 255, .96); --rw-panel-shadow: rgba(27, 61, 91, .055); --rw-sidebar: rgba(248, 251, 253, .95); --rw-nav-end: rgba(247, 251, 255, .85); --rw-banner-end: rgba(248, 251, 253, .94); --rw-backdrop: rgba(29, 50, 72, .3); --rw-page-grid: rgba(60, 120, 170, .045); }
#tab-overview ::selection{ background: var(--rw-selection); color: var(--rw-selection-text); }
#tab-overview h1{ font-family: inherit; font-size: clamp(32px, 3.2vw, 46px); font-weight: 300; letter-spacing: -0.045em; }
#tab-overview h2{ font-weight: 500; font-size: 17px; letter-spacing: -0.02em; }
#tab-overview h3{ font-weight: 500; }
#tab-overview .subtle, #tab-overview .page-header p, #tab-overview .panel-header p, #tab-overview .bank-privacy, #tab-overview .bank-empty, #tab-overview .backup-card p, #tab-overview .backup-banner p, #tab-overview .storage-details p, #tab-overview .form-note, #tab-overview .confirm-message, #tab-overview .setup-intro p, #tab-overview .checkbox-label small, #tab-overview .info-box p{ color: var(--rw-muted); }
#tab-overview .eyebrow, #tab-overview .bank-step, #tab-overview .setup-intro .eyebrow, #tab-overview .setup-account .eyebrow{ color: var(--rw-blue); font-weight: 500; letter-spacing: 0.14em; }
#tab-overview button:focus-visible, #tab-overview a:focus-visible, #tab-overview input:focus-visible, #tab-overview select:focus-visible{ outline: 2px solid var(--rw-blue); outline-offset: 3px; }
#tab-overview button:disabled{ cursor: not-allowed; opacity: 0.5; }
#tab-overview input, #tab-overview select, #tab-overview .bank-fields input, #tab-overview .bank-fields select, #tab-overview .bank-review-item select{ background: var(--rw-input); color: var(--rw-text); border: 1px solid var(--rw-line); border-radius: 12px; font-family: inherit; min-height: 42px; }
#tab-overview input::placeholder{ color: var(--rw-placeholder); }
#tab-overview input:focus, #tab-overview select:focus, #tab-overview .money-input:focus-within, #tab-overview .search-box:focus-within{ outline: 2px solid var(--rw-blue); outline-offset: 2px; border-color: var(--rw-blue); }
#tab-overview input[type="checkbox"]{ accent-color: var(--rw-blue); min-height: 0px; }
#tab-overview select option{ background: var(--rw-surface); color: var(--rw-text); }
#tab-overview .primary, #tab-overview .secondary{ border-radius: 999px; min-height: 42px; font-size: 12px; font-weight: 500; padding: 11px 18px; transition: background 0.15s, border-color 0.15s, box-shadow 0.15s; }
#tab-overview .primary{ color: var(--rw-primary-ink); background: var(--rw-primary); border-color: var(--rw-primary); box-shadow: rgba(150, 200, 255, 0.1) 0px 0px 22px; }
#tab-overview .primary:hover{ background: var(--rw-primary-hover); border-color: var(--rw-primary-hover); box-shadow: rgba(150, 200, 255, 0.2) 0px 0px 24px; }
#tab-overview .secondary{ color: var(--rw-text); background: rgba(60, 120, 170, 0.1); border-color: var(--rw-line); }
#tab-overview .secondary:hover{ background: rgba(60, 120, 170, 0.22); border-color: rgba(150, 200, 255, 0.45); }
#tab-overview .text-btn, #tab-overview .bank-panel a:not(.primary){ color: var(--rw-blue); font-weight: 500; }
#tab-overview .text-btn:hover{ color: var(--rw-link-hover); }
#tab-overview .icon-btn{ color: var(--rw-dim); border-radius: 999px; }
#tab-overview .icon-btn:hover, #tab-overview .row-actions .icon-btn:hover{ background: rgba(60, 120, 170, 0.16); color: var(--rw-blue); }
#tab-overview .topbar{ color: var(--rw-dim); border-color: var(--rw-line-soft); height: 76px; }
#tab-overview .topbar-slash{ color: var(--rw-slash); }
#tab-overview .today{ color: var(--rw-muted); }
#tab-overview .appearance-select{ background: rgba(60, 120, 170, 0.1); color: var(--rw-blue); border-color: var(--rw-line); }
#tab-overview .page-header{ padding: 32px 0px 28px; }
#tab-overview .page-header h1{ font-size: clamp(32px, 3.2vw, 46px); }
#tab-overview .page-header p{ font-size: 13px; margin-top: 11px; line-height: 1.5; }
#tab-overview .account-cards{ gap: 20px; }
#tab-overview .account-card, #tab-overview .panel, #tab-overview .schedule-card, #tab-overview .setup-form{ background: linear-gradient(140deg,var(--rw-panel-start),var(--rw-panel-end)); border: 1px solid var(--rw-line); border-radius: 22px; box-shadow: 0 15px 40px var(--rw-panel-shadow),inset 0 1px #ffffff06; }
#tab-overview .account-card{ padding: 24px 26px 0px; position: relative; background: radial-gradient(ellipse at 100% 0%,rgba(60,120,170,.25),transparent 72%),linear-gradient(135deg,var(--rw-card-start),var(--rw-card-end)); border-color: rgba(150, 200, 255, 0.3); }
#tab-overview .account-card[data-account="2"]{ background: radial-gradient(ellipse at 100% 0%,rgba(194,166,51,.12),transparent 72%),linear-gradient(135deg,var(--rw-card-second),var(--rw-card-end)); }
#tab-overview .account-glyph{ border-radius: 12px; border: 1px solid var(--rw-line); background: rgba(60, 120, 170, 0.12); color: var(--rw-blue); }
#tab-overview .glyph-2{ color: var(--rw-gold); background: rgba(194, 166, 51, 0.08); border-color: rgba(194, 166, 51, 0.24); }
#tab-overview .account-title{ color: var(--rw-text); font-size: 14px; font-weight: 500; }
#tab-overview .account-title > svg{ color: var(--rw-dim); }
#tab-overview .account-card-top .subtle{ color: var(--rw-dim); font-size: 11px; margin-top: 5px; }
#tab-overview .balance-label{ color: var(--rw-muted); letter-spacing: 0.13em; font-size: 10px; margin-top: 26px; }
#tab-overview .big-balance{ color: var(--rw-balance); font-size: clamp(36px, 3.6vw, 50px); font-weight: 300; letter-spacing: -0.045em; margin: 8px 0px 26px; }
#tab-overview .card-balances{ border-color: var(--rw-line-soft); padding: 17px 0px 20px; }
#tab-overview .card-balances > div + div{ border-color: var(--rw-line-soft); }
#tab-overview .card-balances span{ color: var(--rw-muted); font-size: 11px; }
#tab-overview .card-balances strong{ font-size: 15px; font-weight: 400; }
#tab-overview .panel-header{ padding: 24px 26px 17px; }
#tab-overview .panel-header p{ font-size: 12px; }
#tab-overview .horizon{ color: var(--rw-muted); background: rgba(60, 120, 170, 0.1); border-color: var(--rw-line); border-radius: 999px; min-height: 38px; }
#tab-overview .forecast-summary{ padding: 8px 26px; gap: 24px; }
#tab-overview .forecast-summary > div > span{ color: var(--rw-muted); font-size: 9px; letter-spacing: 0.14em; }
#tab-overview .forecast-summary strong{ font-size: 34px; font-weight: 300; color: var(--rw-projection); letter-spacing: -0.04em; }
#tab-overview .forecast-change{ color: var(--rw-muted); font-size: 11px; }
#tab-overview .chart-wrap{ padding: 14px 20px 18px; }
#tab-overview .axis-label{ fill: var(--rw-dim); font-family: inherit; }
#tab-overview .chart-caption, #tab-overview .legend, #tab-overview .chart-caption .subtle{ color: var(--rw-muted); font-size: 11px; }
#tab-overview .legend i{ width: 7px; height: 7px; }
#tab-overview .forecast-footer{ background: rgba(60, 120, 170, 0.06); border-color: var(--rw-line-soft); color: var(--rw-dim); padding: 14px 26px; }
#tab-overview .forecast-footer .text-btn{ color: var(--rw-blue); }
#tab-overview .balance-warning{ color: var(--rw-danger); background: rgba(170, 62, 45, 0.15); }
#tab-overview .search-box{ color: var(--rw-dim); background: var(--rw-search); border-color: var(--rw-line); border-radius: 12px; }
#tab-overview .search-box input{ background: transparent; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; color: var(--rw-text); min-height: 38px; font-size: 12px; }
#tab-overview .table-toolbar select, #tab-overview .schedule-intro select{ color: var(--rw-muted); background: var(--rw-select); border-color: var(--rw-line); border-radius: 12px; }
#tab-overview th{ background: rgba(60, 120, 170, 0.067); color: var(--rw-dim); border-color: var(--rw-line-soft); font-size: 9px; letter-spacing: 0.1em; padding-top: 13px; padding-bottom: 13px; }
#tab-overview td{ border-color: var(--rw-line-soft); color: var(--rw-muted); font-size: 12px; padding-top: 17px; padding-bottom: 17px; }
#tab-overview tbody tr:hover{ background: rgba(60, 120, 170, 0.067); }
#tab-overview .transaction-icon{ border-radius: 10px; border: 1px solid var(--rw-line-soft); }
#tab-overview .transaction-icon.withdrawal{ color: var(--rw-withdrawal); background: rgba(175, 199, 218, 0.08); }
#tab-overview .transaction-icon.deposit{ color: var(--rw-blue); background: rgba(60, 120, 170, 0.14); }
#tab-overview .transaction-icon.transfer{ color: var(--rw-gold); background: rgba(194, 166, 51, 0.07); }
#tab-overview .transaction-cell strong{ color: var(--rw-text); font-size: 12px; font-weight: 400; }
#tab-overview .transaction-cell > div > span, #tab-overview .cell-subtext{ color: var(--rw-dim); font-size: 10px; }
#tab-overview .status-pill{ border-radius: 999px; padding: 6px 8px; font-size: 9px; font-weight: 500; }
#tab-overview .status-pill.cleared{ color: var(--rw-cleared); background: rgba(60, 120, 170, 0.18); }
#tab-overview .status-pill.pending{ color: var(--rw-pending); background: rgba(194, 166, 51, 0.14); }
#tab-overview .amount-cell{ color: var(--rw-text); font-size: 12px; font-weight: 400; }
#tab-overview .positive{ color: var(--rw-blue) !important; }
#tab-overview .negative{ color: var(--rw-danger) !important; }
#tab-overview .icon-btn.danger, #tab-overview .text-btn.danger{ color: var(--rw-danger); }
#tab-overview .low-forecast{ color: var(--rw-warning) !important; }
#tab-overview .date-cell{ color: var(--rw-muted); font-size: 11px; }
#tab-overview .count-badge{ font-weight: 400; }
#tab-overview .upcoming-item{ background: transparent; color: var(--rw-text); border-color: var(--rw-line-soft); }
#tab-overview .upcoming-item:hover{ background: rgba(60, 120, 170, 0.07); }
#tab-overview .upcoming-item > strong, #tab-overview .upcoming-description > strong{ font-size: 12px; font-weight: 400; }
#tab-overview .upcoming-description > span{ color: var(--rw-dim); font-size: 10px; }
#tab-overview .date-tile{ color: var(--rw-blue); border: 1px solid var(--rw-line); background: rgba(60, 120, 170, 0.09); border-radius: 10px; min-width: 40px; height: 44px; }
#tab-overview .date-tile span{ color: var(--rw-dim); font-size: 8px; }
#tab-overview .date-tile strong{ color: var(--rw-blue); font-size: 16px; }
#tab-overview .date-tile.late{ border-color: rgba(255, 171, 155, 0.22); background: rgba(170, 62, 45, 0.13); }
#tab-overview .date-tile.late strong, #tab-overview .overdue-text{ color: var(--rw-danger); }
#tab-overview .panel-bottom-link{ color: var(--rw-blue); background: rgba(60, 120, 170, 0.06); font-size: 11px; padding: 16px; }
#tab-overview .empty, #tab-overview .empty > svg{ color: var(--rw-blue); }

#tab-overview{font-size:14px;font-weight:400;font-synthesis:none;background:none;line-height:normal;color:var(--rw-text)}
#tab-overview button svg{width:16px;height:16px;flex-shrink:0}
#tab-overview .icon-btn{display:inline-flex;align-items:center;justify-content:center;border:0;background:none;padding:6px}
#tab-overview .text-btn{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:0;font-size:12px}
#tab-overview .ledger-topbar{display:flex;align-items:center;justify-content:space-between;height:76px;border-bottom:1px solid var(--rw-line-soft);font-size:9px;letter-spacing:1.2px;color:var(--rw-dim)}
#tab-overview .page-header{margin:0}#tab-overview .page-header h1{margin:0;line-height:1.16}
#tab-overview .account-card{min-width:0}#tab-overview .big-balance{line-height:1.25}
#tab-overview .account-title{height:auto;min-height:0;border-radius:0;box-shadow:none}
#tab-overview .chart-wrap{position:relative}#tab-overview .chart-wrap svg{touch-action:pan-y}
#tab-overview .chart-tooltip{position:absolute;pointer-events:none;background:var(--rw-surface);color:var(--rw-text);border:1px solid var(--rw-line);border-radius:10px;padding:10px;font-size:12px;box-shadow:0 4px 16px #0002;z-index:2}
#tab-overview .legend button{display:flex;align-items:center;gap:6px;background:none;border:0;color:inherit;font:inherit;padding:4px}
#tab-overview .legend button[aria-pressed="false"]{opacity:.45;text-decoration:line-through}
#tab-overview .legend i{background:var(--series-color)}
#tab-overview .table-scroll{border:0;border-radius:0;background:none}#tab-overview table{min-width:0}
#tab-overview .upcoming-panel{align-self:start}#tab-overview .upcoming-item{min-height:80px}
#tab-overview .overview-debt{margin-top:22px;padding:20px 26px;display:flex;align-items:center;justify-content:space-between;gap:16px}
#tab-overview .overview-debt p{font-size:12px;margin-top:7px;color:var(--rw-muted)}
#tab-overview .overview-note{margin:20px 0;font-size:10px;color:var(--rw-dim)}
#tab-overview [hidden]{display:none!important}
@media(max-width:900px){#tab-overview .bottom-grid{grid-template-columns:1fr}#tab-overview .page-header{flex-wrap:wrap}#tab-overview .chart-wrap svg{height:218px}}
@media(max-width:600px){#tab-overview .account-cards{grid-template-columns:1fr}#tab-overview .account-card{padding:20px 20px 0}#tab-overview .page-header h1{font-size:32px}#tab-overview .panel-header{padding:20px 17px;flex-wrap:wrap}#tab-overview .forecast-summary{padding:6px 17px;flex-wrap:wrap;gap:9px}#tab-overview .forecast-footer{padding:14px 17px;flex-wrap:wrap}#tab-overview .table-toolbar{padding:0 14px 14px}#tab-overview .transaction-cell{gap:6px}#tab-overview td{padding:12px 7px}#tab-overview th{padding:12px 7px}#tab-overview td:first-child,#tab-overview th:first-child{padding-left:12px}#tab-overview .transaction-icon{display:none}#tab-overview .transaction-cell strong{white-space:normal;max-width:130px}#tab-overview .overview-debt{align-items:start;flex-direction:column}#tab-overview .chart-caption{flex-wrap:wrap}#tab-overview .chart-wrap{padding:8px 5px 15px}}
#tab-overview select{width:auto;flex-shrink:0}#tab-overview .panel-header>div{min-width:0}#tab-overview .search-box{width:auto}#tab-overview .status-pill svg{width:11px;height:11px}
/* Match Ledger's page canvas while Overview is active. */
body:has(#tab-overview:not(.hide):not([hidden])){background-color:#020713;background-image:linear-gradient(rgba(150,200,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(150,200,255,.035) 1px,transparent 1px),radial-gradient(ellipse at 80% 0%,rgba(60,120,170,.18),transparent 55%);background-size:48px 48px,48px 48px,100% 100vh;background-attachment:fixed}
[data-theme="light"] body:has(#tab-overview:not(.hide):not([hidden])){background-color:#eaf1f6;background-image:linear-gradient(rgba(60,120,170,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(60,120,170,.045) 1px,transparent 1px),radial-gradient(ellipse at 80% 0%,rgba(60,120,170,.18),transparent 55%)}
body:has(#tab-overview:not(.hide):not([hidden])) #bg{display:none}
#tab-overview .account-title>svg{width:14px;height:14px}#tab-overview .row-actions svg{width:14px;height:14px}

#tab-overview .card-balances{flex-wrap:wrap}#tab-overview .card-balances>div{min-width:110px}#tab-overview .card-balances small{color:var(--rw-muted);font-size:11px;line-height:1.5}@media(max-width:480px){#tab-overview .card-balances{gap:16px}#tab-overview .card-balances>div{flex:1 1 100%}#tab-overview .card-balances>div+div{padding-left:0;border-left:0}}
/* Forecast money views share the existing Ledger palette and account identities. */
#tab-overview .forecast-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:12px 26px 18px;border-bottom:1px solid var(--rw-line-soft)}
#tab-overview .forecast-stats>div{display:flex;flex-direction:column;gap:5px;min-width:0}#tab-overview .forecast-stats span,#tab-overview .forecast-stats small{font-size:12px;color:var(--rw-muted)}#tab-overview .forecast-stats strong{font-size:21px;font-weight:500}
#tab-overview #overviewChart svg{width:100%;height:246px;display:block}#tab-overview .axis-label{font-size:11px}
#tab-overview .legend{flex-wrap:wrap}#tab-overview .legend i.total-swatch{height:0;width:18px;border-top:2px dashed var(--rw-text);border-radius:0;background:none}
#tab-overview .forecast-date{padding:0 26px 20px;display:grid;gap:10px}#tab-overview .forecast-date label{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--rw-muted)}#tab-overview .forecast-date label strong{font-weight:500;color:var(--rw-text)}#tab-overview .forecast-date input{width:100%;accent-color:var(--rw-blue);min-height:30px;padding:0;border:0;background:none}
#tab-overview .day-balances{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13px}#tab-overview .day-balances strong{font-weight:500;margin-right:5px}#tab-overview .forecast-date p{font-size:11px;line-height:1.6}
#tab-overview .money-visuals{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px;align-items:start}#tab-overview .money-visuals .panel{min-width:0}
#tab-overview .flow-totals{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 26px 20px}#tab-overview .flow-totals>div{display:flex;flex-direction:column;gap:6px}#tab-overview .flow-totals span{font-size:12px;color:var(--rw-muted)}#tab-overview .flow-totals strong{font-size:20px;font-weight:500}
#tab-overview .cashflow-months,#tab-overview .risk-accounts{list-style:none;padding:0 26px;margin:0}#tab-overview .flow-month{padding:16px 0;border-top:1px solid var(--rw-line-soft)}#tab-overview .flow-month-heading,#tab-overview .risk-heading{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13px;margin-bottom:12px}#tab-overview .flow-month-heading>span,#tab-overview .risk-heading>span{font-size:11px;color:var(--rw-muted)}
#tab-overview .flow-row{display:grid;grid-template-columns:60px minmax(20px,1fr) 96px;align-items:center;gap:10px;font-size:12px;margin:8px 0}#tab-overview .flow-row>span{color:var(--rw-muted)}#tab-overview .flow-row>strong{font-weight:500;text-align:right;font-variant-numeric:tabular-nums}#tab-overview .flow-track{height:10px;background:var(--rw-line-soft);border-left:1px solid var(--rw-muted)}#tab-overview .flow-bar{height:100%;display:block;max-width:100%;background:var(--rw-blue)}#tab-overview .flow-bar.payment{background:var(--rw-gold);background:repeating-linear-gradient(135deg,var(--rw-gold) 0 2px,transparent 2px 4px);border:1px solid var(--rw-gold)}
#tab-overview .flow-net{font-size:11px;color:var(--rw-muted);line-height:1.6;margin-top:10px}#tab-overview .money-chart-note{font-size:11px;line-height:1.7;padding:16px 26px;color:var(--rw-muted)}
#tab-overview .risk-legend{display:flex;flex-wrap:wrap;gap:10px 16px;padding:0 26px 20px;font-size:11px;color:var(--rw-muted)}#tab-overview .risk-legend>span{display:inline-flex;align-items:center;gap:6px}#tab-overview .risk-legend i{display:inline-block;width:14px;height:10px}#tab-overview .risk-legend .normal,#tab-overview .risk-run.normal{background:var(--rw-blue);opacity:.5}#tab-overview .risk-legend .low,#tab-overview .risk-run.low{background:repeating-linear-gradient(135deg,var(--rw-gold) 0 3px,transparent 3px 5px);border:1px solid var(--rw-gold)}#tab-overview .risk-legend .negative,#tab-overview .risk-run.negative{background:repeating-linear-gradient(90deg,var(--rw-error-text) 0 2px,transparent 2px 4px);border:1px solid var(--rw-error-text)}
#tab-overview .risk-account{padding:16px 0;border-top:1px solid var(--rw-line-soft)}#tab-overview .risk-track{display:flex;height:20px;overflow:hidden;background:var(--rw-line-soft)}#tab-overview .risk-run{height:100%;min-width:0;flex-shrink:0}#tab-overview .risk-axis{display:flex;justify-content:space-between;font-size:11px;color:var(--rw-muted);margin-top:7px}
@media(max-width:900px){#tab-overview .money-visuals{grid-template-columns:1fr}}
@media(max-width:600px){#tab-overview .forecast-stats{padding:10px 17px 18px;gap:12px;grid-template-columns:1fr 1fr}#tab-overview .forecast-stats strong{font-size:19px}#tab-overview .forecast-date{padding:0 17px 18px}#tab-overview .cashflow-months,#tab-overview .risk-accounts{padding:0 17px}#tab-overview .flow-totals,#tab-overview .risk-legend{padding-left:17px;padding-right:17px}#tab-overview .money-chart-note{padding:14px 17px}#tab-overview .flow-row{grid-template-columns:56px minmax(15px,1fr) 90px;gap:7px}#tab-overview .chart-caption{gap:12px}}
#tab-overview .chart-tooltip{width:240px;max-width:calc(100% - 10px);overflow-wrap:anywhere;line-height:1.6}