/* The spending plan (Pages/PlanPage.razor). Self-contained, like the main view: it does not rely on XAF's layout or theme. The editing popup
   it opens uses the main view's .home-modal styles (home.css). */
.plan { position: relative; box-sizing: border-box; max-width: 1400px; margin: 0 auto; padding: 14px 20px 48px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #1f2933; }
.plan h1 { font-size: 1.3rem; margin: 0; }
.plan h2 { font-size: 1.1rem; margin: 0 0 8px; }
.plan h3 { font-size: 1rem; margin: 0; }
.plan-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.plan-header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.plan-home { color: #0b5cad; text-decoration: none; font-size: 0.95rem; }
.plan-home:hover { text-decoration: underline; }
.plan-add { padding: 6px 14px; border: 1px solid #bcccdc; border-radius: 6px; background: #fff; color: #0b5cad; font: inherit; font-weight: 600; cursor: pointer; }
.plan-add:hover { background: #eef4fb; }

.plan-message { margin: 8px 0; padding: 12px 14px; border-radius: 6px; background: #f5f7fa; }
.plan-error { background: #fdecea; color: #8a1c13; }
.plan-help { margin: 6px 0 0; color: #52606d; font-size: 0.88rem; }
.plan-muted { color: #7b8794; font-size: 0.88rem; font-weight: 400; }
.plan-empty { margin: 0; padding: 10px 14px; border-radius: 6px; background: #f5f7fa; color: #52606d; }
.plan-note { margin: 8px 0 0; padding: 8px 12px; border-radius: 6px; background: #fff4e0; color: #7a4a00; font-size: 0.9rem; }

.plan-card { margin: 0 0 14px; padding: 14px 16px; border: 1px solid #d9e2ec; border-radius: 8px; background: #fff; }
.plan-card p { margin: 0 0 6px; }
.plan-page-tabs { margin: 0 0 14px; }
.plan-guidance { border-left: 4px solid #2f80ed; }
.plan-guidance strong { color: #102a43; }
.plan-field { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; max-width: 480px; }
.plan-field label { font-size: 0.82rem; font-weight: 600; color: #3e4c59; }
.plan-field select { padding: 6px 8px; border: 1px solid #bcccdc; border-radius: 6px; background: #fff; font: inherit; }

.plan-section { margin: 0 0 18px; }
.plan-table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.plan-table th, .plan-table td { padding: 5px 8px; border-bottom: 1px solid #e4e7eb; text-align: left; font-weight: 400; vertical-align: middle; }
.plan-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan-table thead .plan-columns th { padding-top: 0; color: #7b8794; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid #d9e2ec; }
.plan-table .plan-actual { color: #334e68; }
.plan-table .plan-difference { color: #52606d; font-size: 0.88rem; }
.plan-table .plan-difference.plan-over { color: #b42318; }
.plan-actual-link { font-variant-numeric: tabular-nums; }
.plan-made-of { margin-top: 12px; border-top: 1px solid #d9e2ec; padding-top: 8px; }
.plan-made-of-head { display: flex; justify-content: space-between; align-items: center; }
.plan-made-of-head h3 { margin: 0; font-size: 0.95rem; }
.plan-made-of-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.plan-made-of-table th, .plan-made-of-table td { padding: 4px 6px; border-bottom: 1px solid #e4e7eb; text-align: left; }
.plan-made-of-table .num { text-align: right; white-space: nowrap; }
.plan-short-by-due { display: block; color: #b42318; }
.plan-table .positive { color: #067647; }
.plan-table .plan-group th { padding-top: 12px; color: #52606d; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid #d9e2ec; }
.plan-table .plan-line { padding-left: 16px; }
.plan-item-name { font-weight: 600; color: #102a43; }
.plan-item-name + .plan-muted::before { content: " · "; }
.plan-line .plan-happened { display: inline-block; margin-right: 8px; }
.plan-line .plan-link { margin-left: 8px; padding: 0; }
.plan-table .plan-total th, .plan-table .plan-total td { padding-top: 10px; border-top: 2px solid #d9e2ec; border-bottom: 0; font-weight: 700; font-size: 1.02rem; }
.plan-over td, .plan-over th { color: #7a4a00; }
.plan-cycles thead th { color: #52606d; font-weight: 600; box-shadow: inset 0 -2px 0 #d9e2ec; border-bottom: 0; white-space: nowrap; }
.plan-cycles tbody th { white-space: nowrap; }
.plan-scroll { max-width: 100%; overflow-x: auto; }
.plan-badge { display: inline-block; margin-left: 8px; padding: 0 7px; border-radius: 10px; background: #e4f0fd; color: #1b4f8a; font-size: 0.75rem; font-weight: 600; }

.plan-bill, .plan-goal { margin: 0 0 10px; padding: 12px 14px; border: 1px solid #d9e2ec; border-radius: 8px; background: #fff; }
.plan-bill-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.plan-bar { height: 8px; margin: 8px 0 6px; border-radius: 4px; background: #e4e7eb; overflow: hidden; }
.plan-bar span { display: block; height: 100%; background: #2f80ed; }
.plan-bill-line { margin: 0; font-size: 0.92rem; }
.plan-flag { margin: 6px 0 0; padding: 4px 10px; border-radius: 6px; background: #fff4e0; color: #7a4a00; font-size: 0.86rem; }
.plan-ontrack { margin: 6px 0 0; padding: 4px 10px; border-radius: 6px; background: #e8f5ee; color: #05603a; font-size: 0.86rem; }

.plan-setaside { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; }
.plan-setaside input { width: 7rem; padding: 5px 8px; border: 1px solid #bcccdc; border-radius: 6px; font: inherit; }
.plan-primary { padding: 6px 14px; border: 0; border-radius: 6px; background: #2f80ed; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.plan-primary:hover { background: #1f6fdc; }
.plan-link { border: 0; background: none; color: #0b5cad; font: inherit; font-size: 0.88rem; cursor: pointer; }
.plan-link:hover { text-decoration: underline; }
.plan-ok { color: #05603a; font-size: 0.88rem; }
.plan-error-text { color: #8a1c13; font-size: 0.88rem; }
.plan-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Looking back: the reward, the run of cycles that followed the plan, how the last one went, and the settings behind them. */
.plan-reward { margin: 0 0 12px; padding: 12px 14px; border: 1px solid #b6d4f2; border-radius: 8px; background: #f4f9fe; }
.plan-reward h3 { margin-bottom: 4px; }
.plan-choice { padding: 7px 18px; border: 1px solid #2f80ed; border-radius: 6px; background: #fff; color: #1b4f8a; font: inherit; font-weight: 600; cursor: pointer; }
.plan-choice:hover { background: #eef4fb; }
.plan-setaside select { padding: 5px 8px; border: 1px solid #bcccdc; border-radius: 6px; background: #fff; font: inherit; }
.plan-setaside label:not(.plan-sr) { font-size: 0.85rem; font-weight: 600; color: #3e4c59; }
.plan-saved-reward, .plan-balance, .plan-streak { margin: 6px 0; }
.plan-streak { color: #3e4c59; }
.plan-last { margin: 10px 0; padding: 10px 14px; border: 1px solid #d9e2ec; border-radius: 8px; background: #fff; }
.plan-last h3 { margin-bottom: 4px; }
.plan-last ul { margin: 0; padding-left: 20px; color: #3e4c59; font-size: 0.9rem; }
.plan-achievements { margin: 10px 0 0; padding-left: 20px; }
.plan-achievements li { margin: 2px 0; }
.plan-settings-toggle { margin-bottom: 8px; padding: 0; font-weight: 600; }

/* Whose plan is showing: same look as Home's "viewing" choice. */
.plan-entity { max-width: 100%; padding: 2px 6px; border: 1px solid #bcccdc; border-radius: 6px; background: #fff; font: inherit; font-size: 0.85rem; }

/* This pay cycle and the next, as two tabs of the one card. */
.plan-tabs { display: flex; gap: 4px; margin: -2px 0 10px; border-bottom: 1px solid #d9e2ec; }
.plan-tab { padding: 6px 12px; border: 0; border-bottom: 3px solid transparent; background: none; color: #52606d; font: inherit; font-size: 0.95rem; cursor: pointer; }
.plan-tab:hover { color: #102a43; }
.plan-tab[aria-selected="true"] { border-bottom-color: #0b5cad; color: #102a43; font-weight: 600; }

/* What has already happened this pay cycle: a line that is done is ticked and stands back, so what is still to come stands out. */
.plan-check { color: #067647; font-weight: 700; }
.plan-happened { color: #7b8794; font-size: 0.88rem; }
.plan-happened-done { color: #067647; }
.plan-table .plan-line-done .num { color: #7b8794; }
/* Words that have an explanation a hover (or a focus) away, instead of a paragraph on the page. */
.plan-explained { border-bottom: 1px dotted #9aa5b1; cursor: help; }
.plan-hint { margin-left: 8px; padding: 1px 6px; border-radius: 10px; background: #e6f0fa; color: #0b5cad; font-size: 0.78rem; font-weight: 400; cursor: help; }.plan-label-row { display: flex; align-items: center; gap: 0; }
.plan-builder { display: grid; grid-template-columns: minmax(300px, .8fr) minmax(520px, 1.4fr); gap: 14px; align-items: start; }
.plan-builder-left, .plan-builder-right { min-width: 0; }
.plan-chart-card, .plan-ai-summary { min-width: 0; padding: 14px 16px; border: 1px solid #d9e2ec; border-radius: 6px; background: #fff; }
.plan-chart-card, .plan-ai-summary { margin-bottom: 14px; }
.plan-chart-card { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: center; }
.plan-pie { width: 150px; aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(16,42,67,.12); }
.plan-chart-legend { min-width: 0; }
.plan-legend-group { display: grid; grid-template-columns: 10px minmax(0,1fr) auto 12px; gap: 7px; align-items: center; width: 100%; margin: 2px 0; padding: 2px 0; border: 0; background: none; color: inherit; font: inherit; font-size: .84rem; text-align: left; cursor: pointer; }
.plan-legend-group:hover strong { text-decoration: underline; }
.plan-legend-swatch { width: 10px; height: 10px; border-radius: 2px; }
.plan-legend-caret { color: #7b8794; font-style: normal; font-size: .75rem; }
.plan-legend-items { margin: 0 0 6px 17px; padding: 0 0 0 8px; border-left: 2px solid #e4e7eb; list-style: none; font-size: .8rem; }
.plan-legend-items li { display: flex; justify-content: space-between; gap: 8px; margin: 2px 19px 2px 0; }
.plan-legend-items em { color: #52606d; font-style: normal; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan-chart-legend strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-chart-legend em { color: #52606d; font-style: normal; font-variant-numeric: tabular-nums; }
.plan-ai-summary p { line-height: 1.5; }
.plan-goal-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: center; }
.plan-goal-form input { min-width: 0; padding: 7px 9px; border: 1px solid #bcccdc; border-radius: 6px; font: inherit; }
.plan-goal-form .plan-help { grid-column: 1 / -1; }
.plan-chat { margin: 0 0 14px; padding: 0 0 12px; border: 1px solid #d9e2ec; border-radius: 6px; background: #fff; }
.plan-chat > h2 { padding: 10px 14px; border-bottom: 1px solid #e4e7eb; color: #102a43; }
.plan-chat-history { min-height: 180px; max-height: 45vh; margin: 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.plan-chat-empty { color: #627d98; }
.plan-chat-message { max-width: 92%; padding: 8px 10px; border-radius: 6px; background: #f0f4f8; }
.plan-chat-message p { margin: 3px 0 0; white-space: pre-wrap; }
.plan-chat-user { align-self: flex-end; background: #e6f0ff; }
.plan-chat-assistant { align-self: flex-start; }
.plan-chat-compose { display: grid; gap: 7px; margin: 12px; }
.plan-chat-compose textarea { min-height: 76px; resize: vertical; }
.plan-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; }   /* what does not fit goes on to the next line, never over the next figure */
.plan-summary > span { min-width: 0; }
.plan-reward-terms { margin-top: 4px; font-size: .85rem; color: #243b53; }
.plan-reward-earned { color: #0b6b3a; }
.plan-reward-badge { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 10px; background: #e3f9e5; color: #0b6b3a; font-weight: 600; font-size: .75rem; }
.plan-spent-link { padding: 0; border: 0; background: none; font: inherit; color: #1f5fbf; text-decoration: underline; cursor: pointer; }
.plan-comparison-total th, .plan-comparison-total td { border-top: 2px solid #9fb3c8; font-weight: 600; }
.plan-comparison-act { text-align: right; white-space: nowrap; }
.plan-adjust-row td { background: #f0f4f8; }
.plan-adjust-row td > * { margin-right: 8px; vertical-align: middle; }
.plan-adjust-amount { width: 8em; padding: 4px 6px; border: 1px solid #9fb3c8; border-radius: 4px; font: inherit; text-align: right; }
.plan-spent { margin-top: 14px; padding: 12px; border: 1px solid #d9e2ec; border-radius: 8px; background: #fbfcfe; }
.plan-spent-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plan-spent-head h3 { margin: 0; font-size: 1rem; }
.plan-spent-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: .9rem; }
.plan-spent-table th, .plan-spent-table td { padding: 5px 6px; border-bottom: 1px solid #e4e7eb; text-align: left; }
.plan-spent-table .num { text-align: right; }
.plan-spent-category { max-width: 100%; padding: 3px 4px; border: 1px solid #bcccdc; border-radius: 4px; font: inherit; }
.plan-ok-text { color: #0b6b3a; font-weight: 600; }
.plan-comparison-choose { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 4px 0 10px; }
.plan-comparison-choose select { min-height: 34px; padding: 4px 30px 4px 10px; border: 1px solid #bcccdc; border-radius: 6px; background: #fff; color: #102a43; font: inherit; font-size: .88rem; }
.plan-summary strong { white-space: nowrap; }
.plan-period { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.plan-period-dates { color: #52606d; font-size: .85rem; white-space: nowrap; }
.plan-period select { min-height: 34px; padding: 4px 30px 4px 10px; border: 1px solid #bcccdc; border-radius: 6px; background: #fff; color: #102a43; font: inherit; font-size: .88rem; }
.plan-editable { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.plan-edit-value input { width: 88px; text-align: right; }
.plan-priority-list { margin: 0 0 14px; padding: 12px 14px; border: 1px solid #d9e2ec; border-radius: 6px; background: #fff; }
.plan-priority-list h2 { margin-bottom: 6px; }
.plan-priority-item { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 8px; align-items: center; padding: 7px 0; border-top: 1px solid #e4e7eb; }
.plan-purchase-priority-item { grid-template-columns: 22px 24px minmax(0,1fr); }
.plan-priority-number { color: #334e68; font-size: .85rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.plan-priority-item:first-of-type { border-top: 0; }
.plan-reward-item { grid-template-columns: minmax(0,1fr); }   /* a reward has no place in a funding order to drag it to: its card is the whole width */
.plan-priority-content { min-width: 0; }
.plan-priority-head { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 8px; align-items: baseline; font-size: .88rem; }
.plan-priority-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-priority-head span, .plan-priority-content small { color: #52606d; font-variant-numeric: tabular-nums; }
.plan-priority-content .plan-bar { height: 5px; margin: 4px 0 3px; }
.plan-priority-content small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }
.plan-priority-content small.plan-short-by-due { white-space: normal; }   /* what becomes of a shortfall is read in full */
.plan-drag-handle { display: grid; grid-template-columns: repeat(2, 4px); grid-template-rows: repeat(3, 4px); gap: 2px; align-content: center; justify-content: center; width: 22px; height: 28px; padding: 0; border: 0; background: transparent; cursor: grab; }
.plan-drag-handle:active { cursor: grabbing; }
.plan-drag-handle span { width: 4px; height: 4px; border-radius: 50%; background: #7b8794; }
@media (max-width: 1000px) { .plan-builder { grid-template-columns: 1fr; } .plan-period { flex-basis: 100%; } .plan-period select { width: 100%; } }
@media (max-width: 520px) { .plan-chart-card { grid-template-columns: 110px minmax(0,1fr); } .plan-pie { width: 110px; } .plan-priority-head { grid-template-columns: minmax(0,1fr) auto; } .plan-priority-head .plan-link { grid-column: 2; } }

/* Morgan's review of the plan: what it said, kept as written, and under it when. */
.plan-review { white-space: pre-line; }
/* A group of items in Income and expenses: the same group as its slice of the pie, its items beneath it. */
.plan-table tr.plan-subgroup th, .plan-table tr.plan-subgroup td { padding-top: 8px; font-weight: 600; font-size: 0.9rem; color: #334e68; border-bottom: 1px solid #e4e7eb; }
.plan-table tr.plan-subgroup .plan-legend-swatch { display: inline-block; margin-right: 6px; vertical-align: -1px; }
.plan-comparison-write { margin: 10px 0 4px; }
.plan-review-when { margin-top: 4px; font-size: 0.82rem; }
.plan-review-waiting { margin-bottom: 8px; }

.plan-review-find { margin: 8px 0; }
.plan-review-find a { display: inline-block; margin: 2px 6px 2px 0; padding: 1px 8px; border: 1px solid #c9d3e0; border-radius: 10px; text-decoration: none; }

.plan-focus-dial { display: flex; align-items: center; gap: 10px; }
.plan-focus-dial input[type=range] { flex: 1; min-width: 160px; }
.plan-focus-dial span { white-space: nowrap; font-size: 0.9rem; }
.plan-loan-after { font-size: 0.85rem; font-weight: normal; }

.plan-review-found { display: block; margin: 2px 0; }

/* Plan vs actual: spending against the plan over the last finished pay periods. */
.plan-comparison { margin-bottom: 16px; }
.plan-comparison h3 { margin: 14px 0 6px; font-size: 1rem; }
.plan-comparison-scroll { overflow-x: auto; }
.plan-comparison-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.plan-comparison-table th, .plan-comparison-table td { padding: 5px 8px; border-bottom: 1px solid #e4e7eb; text-align: left; white-space: nowrap; }
.plan-comparison-table .num { text-align: right; }
.plan-comparison-again td:first-child { border-left: 3px solid #c2410c; }
.plan-comparison-well td:first-child { border-left: 3px solid #2f6f4f; }
.plan-comparison-unfiled td { color: #52606d; font-style: italic; }
.plan-comparison-suggestions { margin: 0; padding-left: 20px; }
.plan-comparison-analysis { white-space: pre-line; }