/* mubu UI contract. Shared presentation for existing screens; no financial rules. */
:root {
 --ui-ink:#0A0F1E; --ui-text:#1B2A41; --ui-muted:#64748B; --ui-blue:#3B82F6;
 --ui-line:#E2E8F0; --ui-surface:#fff; --ui-subtle:#F4F8FC;
 --ui-green:#009F77; --ui-red:#E11D48; --ui-amber:#B45309;
 --ui-radius:10px; --ui-control-radius:8px; --ui-control:40px; --ui-compact:32px;
 --ui-panel-space:20px; --ui-gap:16px;
 --bg:var(--ui-subtle); --text:var(--ui-ink); --muted:var(--ui-muted); --line:var(--ui-line);
 --accent:var(--ui-blue); --green:var(--ui-green); --red:var(--ui-red);
 --workspace-control:var(--ui-control); --workspace-radius:var(--ui-radius); --workspace-caption:var(--ui-muted);
}
.ui-empty {padding:24px 16px;margin:0;color:var(--ui-muted);font-size:13px;line-height:1.5;text-align:center}
.ui-help {font-size:12px;color:var(--ui-muted);line-height:1.5;margin:12px 0}
.ui-help>summary {cursor:pointer;padding:4px 0;color:var(--ui-text)}
.ui-help>p {margin:8px 0}
:is(button,a,input,select,textarea,summary,[tabindex]):focus-visible {outline:2px solid var(--ui-blue);outline-offset:3px}
.green,.planning-positive {color:var(--ui-green)}
.red,.planning-negative {color:var(--ui-red)}
.btn {font-weight:500;box-shadow:none}
.btn.primary {background:var(--ui-blue);border-color:var(--ui-blue);color:#fff}
.btn.primary:hover {background:#2563EB;border-color:#2563EB}
.btn:disabled {cursor:not-allowed;box-shadow:none}
:is(.panel,.planning-panel,.pp-panel,.settings-group,.finance-dialog,.modal,.ksef-dialog) {border-color:var(--ui-line);border-radius:var(--ui-radius)}
:is(.panelhead,.planning-panel-head,.pp-panel-head) {gap:12px;align-items:center}
:is(.panelhead,.planning-panel-head,.pp-panel-head) :is(h2,h3),#forecast .planning-panel-head h2,#paymentPlanRoot .pp-panel-head h3,#settings .settings-section-head h2 {font-size:18px;line-height:24px;letter-spacing:-.3px;font-weight:650;margin:0}
.planning-caption,.pp-caption,.planning-chart-caption,.chart-help {color:var(--ui-muted);font-size:12px;line-height:1.5}

/* Shared chart language: compact flow chart and full comparison chart. */
#dashboard .chart-legend,.planning-legend,#paymentPlanRoot .pp-legend {display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px 16px;font-size:12px;color:var(--ui-text);line-height:18px}
.planning-legend span,#paymentPlanRoot .pp-legend span {display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.planning-legend span::before,#paymentPlanRoot .pp-legend span::before {content:'';display:inline-block;width:18px;height:0;border-top:2.5px solid var(--ui-blue);background:none}
.planning-legend .variant::before,#paymentPlanRoot .pp-legend .variant::before {border-color:var(--ui-green);border-top-style:dashed;background:none}
.planning-legend .buffer::before {border-color:var(--ui-amber);border-top-style:dashed;background:none}
.chart-legend .legend-line {width:18px;height:3px}
.chart-legend .legend-bar {width:10px;height:10px;border-radius:2px}
#dashboard .chart-frame {min-width:0;height:236px}
#dashboard .chart-plot-scroll {height:236px}
#dashboard .chart-grid>.panel {height:auto;min-height:0}
#dashboard .chart-frame .financial-chart,#dashboard .chart-fixed-axis {height:220px;min-height:220px;max-height:220px}
#dashboard .chart-frame .chart-axis {font-size:12px}
.chart-axis,.chart-axis-headings {font-size:12px}
.ui-balance-chart {width:100%;height:252px;display:block;overflow:visible}
.ui-balance-chart text {font:12px system-ui,sans-serif;fill:var(--ui-muted)}
.ui-chart-grid {stroke:var(--ui-line);stroke-width:1}
.ui-chart-zero,.chart-zero-balance {stroke:#94A3B8;stroke-width:1.5;stroke-dasharray:5 4}
.ui-chart-hit {fill:transparent}
.ui-balance-chart g:hover .ui-chart-hit,.ui-balance-chart g:focus .ui-chart-hit {fill:#3B82F60A}
.ui-balance-chart g:focus {outline:none}
.ui-balance-chart g:focus .ui-chart-dot {stroke:var(--ui-ink);stroke-width:2}
.ui-balance-chart .ui-chart-minimum {fill:var(--ui-red);font-size:12px;font-weight:650;paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
#dashboard .chart-values,#forecast .planning-chart-caption,#paymentPlanRoot #paymentChartCaption {padding:12px 14px;border:1px solid transparent;border-radius:8px;background:var(--ui-subtle);color:var(--ui-text);font-size:12px;line-height:18px;min-height:44px;margin:16px 0 0;white-space:pre-line}
.chart-values.is-negative {background:#FFF1F2;border-color:#FECDD3}
.chart-risk-summary {font-size:12px;line-height:18px;border-radius:8px}
#forecast .planning-chart-convention,#paymentPlanRoot .pp-chart-convention {margin:0 0 16px;font-size:12px;line-height:18px}
#forecast .planning-forecast-layout .planning-panel-head,#paymentPlanRoot .pp-panel-head {margin-bottom:12px}
#forecast .planning-forecast-layout>.planning-chart-panel,#forecast .planning-forecast-layout>.planning-balance-summary,#paymentPlanRoot .pp-chart-panel,#paymentPlanRoot .pp-summary {padding:var(--ui-panel-space);border:1px solid var(--ui-line);border-radius:var(--ui-radius);background:white}
#forecast .planning-overview.planning-forecast-layout,#paymentPlanRoot .pp-middle {grid-template-columns:minmax(0,2.6fr) minmax(265px,1fr);gap:var(--ui-gap);align-items:stretch}
#paymentPlanRoot .pp-summary .pp-kpis {display:flex;flex-direction:column;gap:0}
#paymentPlanRoot .pp-kpis article {display:block;border:0;border-bottom:1px solid var(--ui-line);border-radius:0;padding:16px 0;min-height:0;box-shadow:none;background:transparent}
#paymentPlanRoot .pp-kpis article:first-child {padding-top:0;order:3;border:0;padding:16px 0 8px}
#paymentPlanRoot .pp-kpis article:nth-child(2) {order:1;padding-top:0}
#paymentPlanRoot .pp-kpis article:nth-child(3) {order:2}
#paymentPlanRoot .pp-kpi-icon {display:none}
#forecast .planning-balance-item h3,#paymentPlanRoot .pp-kpis h3 {font-size:13px;font-weight:550;color:var(--ui-text);line-height:18px;margin:0 0 12px}
#forecast .planning-balance-item>strong,#paymentPlanRoot .pp-kpis strong {font-size:28px;line-height:1.2;font-weight:700;letter-spacing:-.5px;font-variant-numeric:tabular-nums;display:block;overflow-wrap:anywhere}
#paymentPlanRoot .pp-kpis small {display:block;font-size:12px;line-height:18px;color:var(--ui-muted);margin-top:8px}
#forecast .planning-chart svg,#paymentPlanRoot .pp-chart-scroll svg {height:252px;max-height:none}
#paymentPlanRoot .pp-chart-panel {display:flex;flex-direction:column}
#paymentPlanRoot .pp-chart-scroll,#forecast .planning-forecast-layout .planning-chart {margin:auto 0;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}

/* One period toolbar, while keeping the two controllers independent. */
#forecast .planning-mode-switch {display:inline-flex;align-self:flex-start;width:auto;max-width:100%;gap:0;border:1px solid var(--ui-line);border-radius:8px;background:#fff;padding:0;margin:0 0 12px}
#forecast .planning-mode-switch .btn {border:0;border-right:1px solid var(--ui-line);border-radius:0;margin:0;padding:0 16px;height:38px;font-size:13px;text-decoration:none;color:var(--ui-muted);background:transparent}
#forecast .planning-mode-switch .btn:first-child {border-radius:7px 0 0 7px}
#forecast .planning-mode-switch .btn:last-child {border:0;border-radius:0 7px 7px 0}
#forecast .planning-mode-switch .btn.active {color:#fff;background:var(--ui-blue);box-shadow:none}
#forecast .planning-toolbar {display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid var(--ui-line)}
#forecast .planning-toolbar>div:first-child {flex:1;min-width:0}
.ui-planning-tools {display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ui-planning-tools .btn,#forecast .planning-builder-actions .btn {display:inline-flex;align-items:center;justify-content:center;gap:8px}
#forecast .planning-period {margin-top:10px;font-size:12px}
#paymentPlanRoot .pp-heading {display:none}
#paymentPlanRoot .pp-toolbar {display:block;margin:0}
#paymentPlanRoot .pp-tools {width:100%;gap:8px;flex-wrap:wrap}
#paymentPlanRoot .pp-tools>[data-payment-action=refresh] {margin-left:auto}
#paymentPlanRoot #paymentPlanAccount {min-width:160px;max-width:220px}
#paymentPlanRoot .planning-fixed-tools {padding-bottom:16px;border-bottom:1px solid var(--ui-line)}
#paymentPlanRoot .pp-scope {font-size:12px;line-height:18px;margin:12px 0}
#paymentPlanRoot .pp-risk-banner {padding:12px 16px;border-radius:var(--ui-radius);gap:16px;font-size:13px}
#paymentPlanRoot .pp-risk-banner.is-safe {background:#fff;border:1px solid var(--ui-line);border-left:3px solid var(--ui-green);color:var(--ui-text)}
#paymentPlanRoot .pp-risk-banner.is-calm p {display:none}
#paymentPlanRoot .pp-risk-banner strong {font-size:14px}
#paymentPlanRoot .pp-risk-banner span {font-size:12px;white-space:nowrap}
#paymentPlanRoot .pp-footer {gap:12px;border-top:1px solid var(--ui-line);padding-top:16px}
#paymentPlanRoot .pp-footer p {font-size:12px;max-width:none;margin:0}
#paymentPlanRoot .pp-footer p .ui-icon {width:16px;height:16px}
#paymentPlanRoot .pp-footer .pp-footer-actions {flex-wrap:wrap}

/* Scenario rows: shared fields, a stable removal action and one main action. */
#forecast .planning-builder {padding:20px;border-radius:var(--ui-radius)}
#forecast .planning-builder legend {font-size:18px;font-weight:650;line-height:24px;margin-bottom:16px}
#forecast .planning-item:not(.planning-item-collapsed) {display:grid;grid-template-columns:120px minmax(0,1fr) 32px;gap:12px;align-items:start;padding:16px;background:#F8FAFC}
#forecast .planning-item-head {display:block;margin:0}
#forecast .planning-item label {font-size:12px;line-height:18px;color:var(--ui-muted);display:block;margin:0}
#forecast .planning-item label>:is(input,select) {display:block;margin-top:6px;width:100%}
#forecast .planning-item-fields {display:grid;grid-template-columns:minmax(160px,1.3fr) minmax(145px,1fr) minmax(160px,1.2fr);gap:12px}
#forecast .planning-money {display:grid;grid-template-columns:minmax(80px,1fr) 78px;gap:8px}
#forecast .planning-description-label {grid-column:1/-1}
#forecast .planning-item-description {height:40px}
#forecast .planning-item>.ui-remove-item {margin-top:24px;width:32px;height:32px;min-height:32px;padding:6px;display:grid;place-items:center;border:1px solid var(--ui-line);background:white;border-radius:8px;color:var(--ui-muted)}
#forecast .planning-item>.ui-remove-item:hover {color:var(--ui-red);background:#FFF1F2;border-color:#FECDD3}
#forecast .planning-item>.ui-remove-item .ui-icon {width:16px;height:16px}
#forecast .planning-item-collapsed {display:flex;align-items:center;gap:12px;padding:12px 16px}
#forecast .planning-item-collapsed>.ui-remove-item {margin:0;flex:none}
#forecast .planning-builder-actions {display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
#forecast .planning-simulation-note {margin:12px 0 0}
#forecast .planning-more-decisions {margin-top:8px}
#forecast .planning-source-notice {font-size:13px;padding:12px 16px;border-radius:var(--ui-radius);gap:12px}
#forecast .planning-source-notice .btn {flex:none}

/* Shared form shell and document drawer. */
.modal-bg .modal h2,.finance-dialog h2,.ksef-dialog h2,#planningDialog h2 {font-size:20px;line-height:28px;font-weight:650}
.finance-dialog .form-actions,.modal .form-actions,#ksefReviewForm .form-actions,#planningForm .planning-dialog-actions {gap:8px;justify-content:flex-end;border-top:1px solid var(--ui-line);padding-top:16px}
#ksefReviewExtras {padding:0;margin-top:16px}
#ksefReviewExtras label {display:block}
#ksefReviewForm .decision-menu {margin-right:auto;order:0}
#ksefReviewForm #cancelKsefReview {margin:0;order:1}
#ksefReviewForm #saveKsefInvoiceDate {order:2}
.transaction-drawer .drawer-footer.ui-detail-footer {display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:16px 20px;border-top:1px solid var(--ui-line);background:white}
.transaction-drawer .ui-detail-footer .mobile-detail-actions {display:contents}
.transaction-drawer .ui-detail-footer #mobileActionError:not(:empty) {flex-basis:100%;margin:0;font-size:12px;color:var(--ui-red)}
.transaction-drawer .ui-detail-footer #mobileActionError:empty {display:none}
.transaction-drawer .ui-detail-footer>.btn,.transaction-drawer .ui-detail-footer .mobile-detail-actions>.btn {flex:1;min-width:150px;margin:0}
.transaction-drawer .ui-detail-footer #editTransactionDetails {flex-basis:100%}
.transaction-drawer .ui-detail-footer #editTransactionDetails:not(.primary) {border:0;background:transparent;color:var(--ui-blue);height:32px;min-height:32px}
.transaction-drawer .detail-section {border-color:var(--ui-line)}
.transaction-drawer dt {color:var(--ui-muted)}
.transaction-drawer .drawer-heading h2 {font-size:20px;line-height:28px}

/* Imports grow only when their results need more room. */
#documentImportDialog {width:min(640px,calc(100vw - 40px));max-width:1080px;border-radius:var(--ui-radius)}
#documentImportDialog:has(#documentReview:not(.hidden)) {width:min(1080px,calc(100vw - 40px))}
#bankImportDialog {width:min(640px,calc(100vw - 40px));max-width:1040px}
#bankImportDialog:has(#bankReviewStep:not(.hidden)),#bankImportDialog:has(#bankWallets:not(.hidden)) {width:min(1040px,calc(100vw - 40px))}
#documentImportDialog .document-upload {flex-wrap:wrap;gap:12px;padding:16px}
input[type=file]::file-selector-button {font:inherit;color:var(--ui-text);background:white;border:1px solid var(--ui-line);border-radius:8px;padding:9px 12px;margin-right:10px;cursor:pointer}
.ksef-sync-panel {background:var(--ui-subtle);border-radius:var(--ui-radius);padding:16px}
.ksef-sync-panel .ui-help {margin:8px 0 0}
.ksef-list-toolbar {margin:16px 0 12px}
.ksef-results:has(.ui-empty) {border:0}
#ksefSyncStatus:empty {display:none}
.agent-notice {border-radius:8px;font-size:12px;line-height:18px;gap:8px}
.agent-notice .ui-icon {width:18px;height:18px}
.agent-notice .ui-help {margin:6px 0 0;color:inherit}

@media(min-width:761px) {
 .main>.top h1,.main:has(:is(#dashboard,#transactions,#history,#forecast,#settings).active)>.top h1 {font-size:28px;line-height:34px;letter-spacing:-.7px}
 .main>.top p {font-size:13px;line-height:20px}
 .btn,.input,.select {height:var(--ui-control);font-size:13px;border-radius:var(--ui-control-radius)}
 .btn {display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 14px}
 .btn .ui-icon {width:18px;height:18px}
 .segmented button,#forecast .planning-horizons button,#paymentPlanRoot .pp-horizons button {height:40px;min-height:40px;font-size:13px;padding:0 14px;line-height:1.2}
 :is(.table,.pp-table,.planning-table,.settings-row-actions,.settings-rate-row,.settings-contractor-row) .btn {height:32px;min-height:32px;font-size:12px;padding:0 10px}
 .icon-btn,.table .icon-btn {width:28px;height:28px;min-height:28px;padding:5px}
 .table .icon-btn .ui-icon {width:16px;height:16px}
 .upcoming-filter button,.chart-switch button,.cash-flow-period button {height:32px;min-height:32px;font-size:12px;padding:0 10px}
 .transaction-toolbar .btn,#transactions .transaction-toolbar :is(.input,.select) {height:40px}
 #transactions .weekly-layout>.new-ksef-notice {order:0}
 #transactions .new-ksef-notice {flex:none;margin:0 0 12px;font-size:12px}
 .table th,.pp-table th,.planning-table th {background:#F5F8FC;color:var(--ui-muted);font-size:12px;font-weight:600;padding:12px 10px;border-bottom:1px solid var(--ui-line)}
 .table td,.pp-table td,.planning-table td {font-size:13px;border-color:var(--ui-line)}
 .history-toolbar {background:transparent;padding:0;border:0;border-radius:0;gap:12px}
 #settings .settings-section-head {align-items:center;margin-bottom:16px}
 #settings .settings-shell {gap:20px}
 #settings .settings-group {border-radius:var(--ui-radius)}
 #settings .settings-subgroup {border:0;border-radius:0;border-bottom:1px solid var(--ui-line)}
 #settings .settings-subgroup>summary {border-radius:0;background:var(--ui-subtle)}
 #settings .settings-group-body {padding:16px}
 #settings .settings-group .settings-group-body .settings-subgroup:last-child {border-bottom:0}
 #settings .settings-account-row,#settings .settings-contractor-row {padding:12px;gap:12px}
 #settings .settings-row-actions .btn {font-size:12px;height:32px;min-height:32px;padding:0 10px}
 #settings .settings-search {position:sticky;top:60px;z-index:3;background:var(--ui-subtle);padding:10px 0;margin-bottom:8px}
 #settings :is(.input,.select) {height:40px;min-height:40px}
 #settings .settings-credit-card {background:white;border-radius:var(--ui-radius);padding:16px}
 #settings .settings-credit-card dl>div:first-child dd {font-size:18px;font-weight:650;color:var(--ui-text)}
 #settings .settings-credit-card dl>div:first-child dd.red {color:var(--ui-red)}
 #settings .settings-credit-card dl>div {font-size:12px}
 #settings .settings-rate-head {background:var(--ui-subtle);font-size:12px;padding:12px}
 #settings .settings-rate-row {padding:12px}
 #documentImportDialog .document-head .btn,.ksef-dialog .drawer-heading .icon-btn {height:32px;width:32px;padding:6px}
 #forecast .planning-item :is(input,select) {height:40px;font-size:13px;border-radius:8px}
}
@media(min-width:761px) and (max-width:1100px) {
 #forecast .planning-overview.planning-forecast-layout,#paymentPlanRoot .pp-middle {grid-template-columns:minmax(0,1fr) 240px}
 #forecast .planning-balance-item>strong,#paymentPlanRoot .pp-kpis strong {font-size:24px}
 #forecast .planning-item-fields {grid-template-columns:minmax(150px,1fr) minmax(145px,1fr)}
 #forecast .planning-item-account {grid-column:1/-1}
}
@media(max-width:760px) {
 .main>.top h1,.main:has(:is(#dashboard,#transactions,#history,#forecast,#settings).active)>.top h1 {font-size:26px;line-height:32px;letter-spacing:-.7px}
 :root {--ui-control:44px;--ui-panel-space:16px}
 .ui-balance-chart {min-width:var(--ui-chart-width,720px)!important}
 .ui-balance-chart text {font-size:12px}
 #forecast .planning-overview.planning-forecast-layout,#paymentPlanRoot .pp-middle {grid-template-columns:minmax(0,1fr);gap:12px}
 #forecast .planning-balance-item>strong,#paymentPlanRoot .pp-kpis strong {font-size:25px}
 #forecast .planning-mode-switch {width:100%;display:flex}
 #forecast .planning-mode-switch .btn {flex:1;min-height:44px;padding:0 12px}
 #forecast .planning-toolbar {gap:8px}
 .ui-planning-tools {width:100%}
 .ui-planning-tools .btn {min-height:44px;flex:1}
 #paymentPlanRoot .pp-tools {display:grid;grid-template-columns:minmax(0,1fr) auto}
 #paymentPlanRoot .pp-risk-banner {flex-wrap:wrap;gap:8px}
 #paymentPlanRoot .pp-panel-head {flex-direction:column;align-items:flex-start}
 #forecast .planning-item:not(.planning-item-collapsed) {grid-template-columns:minmax(0,1fr) 36px;gap:12px;padding:12px}
 #forecast .planning-item-head {grid-column:1;grid-row:1}
 #forecast .planning-item-fields {grid-column:1/-1;grid-row:2;grid-template-columns:1fr 1fr}
 #forecast .planning-money,#forecast .planning-item-account {grid-column:1/-1}
 #forecast .planning-item>.ui-remove-item {grid-column:2;grid-row:1;min-height:44px;width:36px;margin-top:20px}
 #forecast .planning-item :is(input,select) {font-size:16px;height:44px}
 #forecast .planning-builder-actions .btn {min-height:44px;flex:1}
 #forecast .planning-description-label {grid-column:1/-1}
 .transaction-drawer .ui-detail-footer {padding:12px}
 .transaction-drawer .ui-detail-footer .btn {min-height:44px;height:auto}
 #documentImportDialog {width:calc(100vw - 20px)}
 #transactions .new-ksef-notice {font-size:12px;flex:none;margin:0 0 10px}
 #transactions .weekly-after,#transactions .weekly-after strong,#transactions .weekly-card-footer {font-size:12px}
}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Keep the login screen independent of the empty application behind it. */
body:has(#loginModal[style*="display:flex"]) :is(.main,.side,.global-tools),body:has(#loginModal[style*="display: flex"]) :is(.main,.side,.global-tools) {visibility:hidden}