/* Brief 2026-10-09: palette and targeted layout overrides. Existing forms retained. */ .bank-row-correction summary{font-size:12px;line-height:1.5;cursor:pointer;color:#1B2A41;overflow-wrap:anywhere}.bank-row-correction summary span{color:#3B82F6;font-size:11px;margin-left:6px}.bank-row-correction .select{margin-top:8px}.bank-all-rows{display:flex;align-items:center;gap:7px;font-size:12px;margin:8px 0 12px}.bank-commit-note{max-width:680px;line-height:1.5} :root{--bg:#f5f8fc;--card:#fff;--text:#0A0F1E;--muted:#64748b;--line:#E2E8F0;--accent:#3B82F6;--navy:#1B2A41;--green:#078659;--red:#dc3545} body{font-size:14px}.side{width:190px;flex:0 0 190px;background:linear-gradient(160deg,#0A0F1E,#1B2A41);padding:24px 10px}.brand{font-size:16px;letter-spacing:-.4px;padding:4px 8px 30px;line-height:1.5}.brand span{display:block;color:#94A3B8;font-size:15px}.nav button{color:#c4d2e7;margin:4px 0;padding:13px 14px;border-radius:9px;position:relative}.nav button.active{background:#233956;box-shadow:inset 3px 0 #3B82F6}.nav button:hover{background:#1B2A41}.main{max-width:1900px;padding:24px 28px}.top{margin-bottom:22px;gap:16px}.top h1{font-size:28px;letter-spacing:-.7px}.top p{font-size:13px}.top .actions{align-items:center;justify-content:flex-end}.btn{font-size:12px;padding:10px 14px;color:#1B2A41;border-radius:7px;white-space:nowrap}.btn:hover{background:#f0f5fd;border-color:#b8c9df}.btn.primary{background:#3B82F6;border-color:#3B82F6;color:white}.btn.primary:hover{background:#2563eb}.btn.danger{color:var(--red)}.btn:focus-visible,.nav button:focus-visible,.profile-button:focus-visible,.menu-item:focus-visible{outline:3px solid #93c5fd;outline-offset:2px}.input:focus,.select:focus,.inline-field:focus{outline:2px solid #bfdbfe;border-color:#3B82F6}.card,.panel{border-radius:10px;box-shadow:0 2px 5px #1b2a4103}.panel{padding:20px}.panel h2{font-size:17px;letter-spacing:-.3px}.panelhead{margin-bottom:14px}.cards{gap:12px;margin-bottom:8px}.card{padding:19px 16px}.value{font-size:25px;letter-spacing:-.7px;font-variant-numeric:tabular-nums;white-space:nowrap}.label{color:#607594}.kpi-secondary{font-size:11px;color:var(--muted);margin-top:12px;line-height:1.5}.kpi-secondary strong{display:block;color:#1B2A41;font-size:13px;letter-spacing:0}.kpi-explanation{margin:0 0 18px;line-height:1.6}.grid2{gap:16px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.dashboard-toolbar{justify-content:flex-start;flex-wrap:wrap;gap:12px;margin:0 0 18px}.horizon-select{width:auto;min-width:220px;max-width:340px}.dashboard-toolbar>.small{max-width:90px;font-size:12px}.account{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:13px;border-color:#e1e9f4}.account strong{font-size:13px}.account small{font-size:11px}.account-transfer{margin-top:13px;border-color:#bfdbfe;color:#2563eb}.weekgrid{grid-template-columns:1.35fr 1fr 1fr 1fr;gap:8px}.week .money,.month b{font-variant-numeric:tabular-nums;white-space:nowrap}.month{border-color:#e1e9f4}.profile-menu,.split-menu,.filter-menu{position:relative}.profile-button{display:flex;align-items:center;gap:8px;border:0;background:transparent;color:#1B2A41;font-weight:600;padding:0 2px 0 9px;cursor:pointer}#profileInitials{display:grid;place-items:center;background:#e3edff;color:#2563eb;border-radius:50%;width:36px;height:36px}#profileName{max-width:100px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:12px}.popover{position:absolute;top:calc(100% + 9px);right:0;min-width:210px;padding:6px;background:white;border:1px solid var(--line);border-radius:9px;box-shadow:0 10px 28px #1b2a411c;z-index:16}.split-menu .popover{left:0;right:auto}.menu-item{width:100%;text-align:left;background:transparent;border:0;padding:11px;border-radius:5px;color:#1B2A41;cursor:pointer;font-size:13px}.menu-item:hover{background:#eff6ff}.transaction-toolbar{position:relative;display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}.split-button{display:flex}.split-button .btn:first-child{border-radius:7px 0 0 7px}.split-button .btn:last-child{border-radius:0 7px 7px 0;border-left:1px solid #73a6fc;padding-inline:12px}.transaction-toolbar .suggestions{min-width:170px;max-width:300px!important}.transaction-toolbar .view-menu{margin-left:auto}.filter-menu{position:static}.filter-panel{position:absolute;top:calc(100% + 12px);left:0;right:auto;width:620px;max-width:100%;background:#fff;border:1px solid #d9e5f5;box-shadow:0 15px 36px #1b2a4117;border-radius:10px;padding:20px;z-index:14}.filter-heading{display:flex;align-items:center;justify-content:space-between}.filter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.filter-grid>.select{max-width:none!important}.filter-grid .date-filter{grid-column:1/-1;display:grid;grid-template-columns:1.4fr 1fr auto 1fr;gap:10px}.filter-grid .date-filter .input{width:100%;min-width:0}.filter-grid .clear-btn{grid-column:1/-1;justify-self:start;border:0;color:#2563eb;padding-left:0}#filterBtn[aria-expanded=true]{color:#2563eb;border-color:#3B82F6;background:#eff6ff}#filterCount{font-size:11px}.table{font-size:12px}.table th{padding:14px 10px;color:#587091;background:#f8fafc;font-size:11px;line-height:1.4;border-bottom:1px solid #dce5f0}.table td{padding:13px 10px;border-color:#edf1f7}.table td[data-col=amount],.table td[data-col=balance_after]{font-variant-numeric:tabular-nums;white-space:nowrap;overflow:visible;text-overflow:clip}.inline-field{padding:7px 4px;min-width:100px}.inline-field[type=number]{min-width:120px;text-align:right;font-variant-numeric:tabular-nums}.inline-field[type=date]{min-width:132px}.table tr:hover td{background:#f8fbff}.table td[data-col=actions] .actions{flex-wrap:nowrap;gap:4px}.selection-cell{width:28px!important;padding-inline:6px!important}input[type=checkbox]{accent-color:#3B82F6;width:15px;height:15px}.bulk-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#eff6ff;border:1px solid #bfdbfe;padding:12px;border-radius:8px;margin-bottom:14px}.bulk-bar .select{max-width:170px}.security-settings{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}.security-settings h2{margin-bottom:3px}.nbp-controls{margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line)}.nbp-controls>label{font-size:13px;display:inline-flex;align-items:center;gap:8px;margin-right:10px}.range-summary{display:flex;gap:20px;flex-wrap:wrap;font-size:12px;padding:12px 0}.range-summary strong{display:block;margin-top:4px;font-size:16px}.modal{box-shadow:0 24px 80px #0a0f1e30}.import-modal{max-width:980px}.import-modal h3{font-size:14px;margin-top:22px}.import-modal #validateImport{margin-top:16px}.import-preview{max-height:320px;margin:14px 0}.import-preview td:last-child{white-space:normal;min-width:180px}.import-modal .form label{font-size:12px}.red:empty{display:none} @media(min-width:1101px) and (max-width:1300px){.card .value{font-size:22px}.account-list{grid-template-columns:1fr}.weekgrid{grid-template-columns:1.4fr 1fr 1fr 1fr}.week .money{font-size:11px}} @media(max-width:1100px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.top{align-items:flex-start}.top .actions{max-width:55%}.filter-panel{position:fixed;left:210px;right:20px;top:165px;width:auto;max-width:none}.weekgrid{grid-template-columns:repeat(3,minmax(0,1fr))}.weekname{grid-column:1/-1}} @media(max-width:850px){.side{width:100px;flex-basis:100px;padding:20px 6px}.brand{font-size:0}.brand span{display:none}.brand:after{font-size:18px;color:#dbeafe}.nav button{font-size:11px;padding:13px 6px}.main{padding:18px}.grid2{grid-template-columns:1fr}.filter-panel{left:118px;right:18px;top:130px}.top h1{font-size:25px}#profileName{display:none}.top .actions{max-width:100%}.top{flex-wrap:wrap}.value{font-size:23px}.account-list{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:600px){.side{width:82px;flex-basis:82px;padding:16px 4px}.nav button{padding:12px 4px;font-size:10px}.main{padding:14px 10px}.top{gap:12px}.top .actions{justify-content:flex-start;gap:6px}.top .btn{font-size:10px;padding:9px}.profile-button{padding-left:0}#profileInitials{width:30px;height:30px}.top h1{font-size:24px}.panel{padding:14px}.card{padding:12px 9px}.value{font-size:17px;white-space:normal;overflow-wrap:anywhere;letter-spacing:-.5px}.kpi-secondary{font-size:10px}.kpi-secondary strong{font-size:11px}.kpi-explanation{font-size:10px}.label{font-size:11px}.cards{gap:8px}.horizon-select{min-width:0;width:100%;max-width:none}.dashboard-toolbar{gap:8px}.dashboard-toolbar>.small{max-width:none}.account-list{grid-template-columns:1fr}.transaction-toolbar{gap:8px}.transaction-toolbar .suggestions{order:3;min-width:100%;max-width:none!important}.transaction-toolbar .view-menu{margin-left:0}.btn{font-size:11px;padding:9px 10px}.filter-panel{left:12px;right:12px;top:70px;max-height:calc(100vh - 90px);overflow:auto;padding:16px}.filter-grid{grid-template-columns:1fr}.filter-grid .date-filter{grid-template-columns:1fr auto 1fr}.filter-grid .date-filter .select{grid-column:1/-1}.filter-grid>.select{width:100%}.date-filter .input{width:116px;max-width:100%}.week .money{font-size:10px;white-space:normal}.security-settings{flex-wrap:wrap}.nbp-controls .btn{margin-top:10px}.form{grid-template-columns:1fr}.modal-bg{padding:10px}.modal{padding:18px}.popover{max-width:calc(100vw - 30px)}.profile-menu .popover{right:0}.range-summary{gap:10px}.range-summary strong{font-size:14px}} /* mubu · October 2026 UX brief. Shared shell; scoped Dashboard/Transactions/forms. */ :root { --bg:#F4F8FC; --text:#0A0F1E; --muted:#647B9C; --line:#E2E8F0; --green:#009F77; --red:#E11D48; --header-height:60px; } body { background:var(--bg); color:var(--text); } .icon-library { position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; } .ui-icon { width:24px; height:24px; display:inline-block; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; pointer-events:none; } .global-topbar { height:var(--header-height); position:sticky; top:0; z-index:30; background:#0A0F1E; display:flex; align-items:center; justify-content:space-between; padding:0 28px; color:#E2E8F0; } .global-topbar .brand { height:auto; padding:0; margin:0; display:flex; align-items:center; } .brand::after { content:none; } .flux-logo { display:block; width:108px; height:34px; max-width:100%; object-fit:contain; } .global-tools { display:flex; gap:16px; align-items:center; } .export-menu,.notifications-menu,.profile-menu { position:relative; } .header-icon { width:42px; height:40px; padding:8px; border:1px solid transparent; border-radius:6px; color:#E2E8F0; background:transparent; cursor:pointer; position:relative; } .header-icon:hover,.header-icon[aria-expanded=true] { background:#1B2A41; border-color:#334F74; } .notification-count { position:absolute; top:0; right:0; min-width:15px; height:15px; padding:0 3px; font-size:10px; line-height:15px; border-radius:20px; background:#3B82F6; color:#fff; } .global-topbar .profile-button { display:flex; align-items:center; gap:10px; min-height:44px; color:#E2E8F0; padding:0; border:0; background:transparent; } #profileInitials { display:flex; align-items:center; justify-content:center; background:#1D3B65; color:#D9E8FF; width:36px; height:36px; border-radius:50%; font-size:15px; } #profileName { max-width:145px; font-size:13px; color:#E2E8F0; } .profile-button>.ui-icon { width:17px; height:17px; color:#E2E8F0; } .popover { position:absolute; top:calc(100% + 10px); right:0; z-index:35; padding:8px; border:1px solid #DCE7F4; border-radius:8px; background:#fff; color:#0A0F1E; box-shadow:0 12px 32px #1B2A411A; } .menu-item { display:flex; align-items:center; gap:10px; min-height:40px; font-size:14px; padding:10px 12px; white-space:nowrap; color:#0A0F1E; } .menu-item .ui-icon { width:20px; height:20px; } #notificationsPanel { width:330px; padding:18px; font-size:13px; line-height:1.5; } #notificationMessages p { margin:12px 0 0; padding-top:12px; border-top:1px solid #E2E8F0; } body:has(#dashboard.active) .export-menu { display:none; } .app { min-height:calc(100vh - var(--header-height)); align-items:flex-start; } .side { width:100px; flex:0 0 100px; position:sticky; top:var(--header-height); height:calc(100vh - var(--header-height)); padding:8px; background:#0A0F1E; } .nav button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:80px; padding:12px 2px; margin:0 0 9px; color:#E2E8F0; font-size:12px; font-weight:400; line-height:1.25; border-radius:7px; text-align:center; } .nav button::before { content:none; } .nav button .ui-icon { order:-1; width:26px; height:26px; } .nav button.active { background:#1B2A41; color:#fff; box-shadow:inset 4px 0 #3B82F6; font-weight:500; } .nav button.active .ui-icon { color:#3B82F6; } .nav button:hover { background:#1B2A41; } .main { min-width:0; max-width:none; padding:18px 32px 28px; position:relative; } .top { min-height:64px; display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:16px; } .top h1 { font-size:36px; font-weight:730; line-height:1.15; letter-spacing:-1.1px; } .top p { font-size:16px; margin:5px 0 0; color:var(--muted); line-height:1.5; } .top>.actions { display:flex; align-items:center; gap:10px; } .btn { transition:background-color .15s,border-color .15s; } :is(.top,#dashboard,#transactions,#modalBg,#editTxModal,#transferModal) .btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; height:42px; padding:0 17px; border:1px solid #D9E4F2; border-radius:6px; background:#fff; color:#0A0F1E; font-size:14px; font-weight:500; line-height:1.2; } :is(.top,#dashboard,#transactions,#modalBg,#editTxModal,#transferModal) .btn.primary { background:#3B82F6; border-color:#3B82F6; color:#fff; } :is(.top,#dashboard,#transactions,#modalBg,#editTxModal,#transferModal) .btn:hover { background:#EFF6FF; border-color:#AFC4E4; } :is(.top,#dashboard,#transactions,#modalBg,#editTxModal,#transferModal) .btn.primary:hover { background:#2563EB; } :is(.top,#dashboard,#transactions) .btn.danger { color:var(--red); } .btn .ui-icon { width:21px; height:21px; } button:focus-visible,summary:focus-visible { outline:2px solid #3B82F6; outline-offset:3px; } #dashboard .dashboard-toolbar { display:block; margin:0 0 16px; } #dashboard .dashboard-toolbar h2 { font-size:21px; line-height:1.25; margin:0 0 9px; letter-spacing:-.45px; } .horizon-row { display:flex; align-items:center; justify-content:space-between; gap:18px; } .segmented { display:inline-flex; border:1px solid #DFE8F5; background:#fff; border-radius:7px; padding:0; } .segmented button { appearance:none; background:transparent; border:0; border-right:1px solid #E2E8F0; color:#526F99; cursor:pointer; font:inherit; font-size:13px; padding:0 18px; min-height:38px; border-radius:0; white-space:nowrap; } .segmented button:first-child { border-radius:6px 0 0 6px; } .segmented button:last-child { border-right:0; border-radius:0 6px 6px 0; } .segmented button[aria-pressed=true] { background:#3B82F6; color:#fff; border-color:#3B82F6; box-shadow:0 2px 5px #3B82F630; border-radius:6px; } .segmented button:hover:not([aria-pressed=true]) { background:#EFF6FF; } .horizon-buttons button { min-width:106px; min-height:40px; } #dashboardAddBtn { min-width:154px; flex-shrink:0; } #dashboardRange { margin-top:12px; justify-content:flex-start; } #dashboardRangeError:empty { display:none; } #dashboard .cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:14px; } #dashboard .kpi-card { display:flex; align-items:flex-start; gap:18px; padding:20px 18px; min-height:140px; border:1px solid #DFE8F4; border-radius:9px; box-shadow:0 2px 8px #1B2A4103; } .kpi-icon { width:48px; height:48px; flex:0 0 48px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#F0F4FA; color:#6B82A3; } .kpi-icon .ui-icon { width:28px; height:28px; } .kpi-1 { background:#DDFAEF; color:#009F77; }.kpi-1 .ui-icon { transform:none; } .kpi-2 { background:#FFE5EC; color:#E11D48; }.kpi-3 { background:#E8F0FF; color:#3B82F6; } .kpi-content { min-width:0; flex:1; } #dashboard .label { color:#617BA0; font-size:13px; line-height:1.35; } #dashboard .value { font-size:clamp(22px,2vw,32px); font-weight:740; line-height:1.25; letter-spacing:-.7px; margin-top:9px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; } #dashboard .kpi-secondary { font-size:11px; line-height:1.4; margin-top:7px; color:#617BA0; } #dashboard .kpi-secondary strong { font-size:12px; font-weight:650; color:#1B2A41; } #periodMinimum { margin-top:8px; font-size:12px; line-height:1.45; color:#617BA0; } #periodMinimum strong { display:block; color:#1B2A41; font-size:15px; font-variant-numeric:tabular-nums; } #periodMinimum strong.red { color:var(--red); }.transfer-valuation { display:block; font-size:10px; } #dashboard .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; align-items:stretch; } #dashboard .panel { padding:16px 18px; border:1px solid #DFE8F4; border-radius:9px; box-shadow:0 2px 8px #1B2A4103; } #dashboard .panelhead { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:14px; } #dashboard .panel h2 { font-size:21px; line-height:1.25; margin:0 0 4px; letter-spacing:-.45px; } #dashboard .panelhead .small { font-size:12px; line-height:1.45; } .account-tools { display:flex; flex-direction:column; align-items:flex-end; gap:5px; flex-shrink:0; } #dashboard .account-transfer { border:0; background:transparent; padding:0; height:26px; color:#3B82F6; font-size:12px; gap:6px; } .account-transfer .ui-icon { width:19px; height:19px; } #dashboard .account-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:1fr; gap:10px; align-items:stretch; } #dashboard .account { display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:10px; padding:12px; min-height:80px; border:1px solid #DFE8F5; border-radius:7px; } .account-icon { color:#7587AC; }.account-icon .ui-icon { width:28px; height:28px; } .account-name { min-width:0; }.account-name strong { font-size:13px; line-height:1.25; overflow-wrap:anywhere; } .account-name small { display:block; margin-top:3px; font-size:11px; color:#7186A5; } .account-balance { text-align:right; font-size:15px; font-weight:650; font-variant-numeric:tabular-nums; white-space:nowrap; } .account-balance .small { font-size:11px; font-weight:400; margin-top:3px; } #dashboard .table th { font-size:12px; padding:9px 8px; background:transparent; color:#617BA0; border-bottom:1px solid #E2E8F0; } #dashboard .table td { padding:10px 8px; font-size:12px; border-bottom:1px solid #EDF1F6; } #dashboard .table th:last-child,#dashboard .table td:last-child { text-align:right; font-variant-numeric:tabular-nums; } #dashboard .table td:nth-child(2) { white-space:normal; } .payment-date { display:block; white-space:nowrap; } .due-marker { display:block; width:max-content; margin-top:3px; color:#946211; font-size:10px; font-weight:600; } #dashboard .payment-overdue td:first-child { border-left:3px solid #E11D48; }.payment-overdue .due-marker { color:#B82342; } #dashboard .payment-today td:first-child { border-left:3px solid #3B82F6; }.payment-today .due-marker { color:#2563EB; } .empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; min-height:170px; color:#6D84A7; font-size:13px; text-align:center; } .empty-state .ui-icon { width:42px; height:42px; stroke-width:1.6; } .chart-switch { flex-shrink:0; }.chart-switch button { padding:0 18px; min-height:29px; font-size:12px; } .chart-grid .panelhead { flex-wrap:wrap; }.chart-grid .panelhead>div:first-child { flex:1; } .chart-legend { display:flex; justify-content:flex-end; gap:16px; flex-wrap:wrap; color:#647B9C; font-size:11px; margin:3px 0 6px; } .chart-legend span { display:inline-flex; align-items:center; gap:6px; }.chart-legend i { width:8px; height:8px; border-radius:50%; }.chart-unit { color:#94A3B8; } .financial-chart { display:block; width:100%; height:auto; min-height:150px; max-height:195px; overflow:visible; } .chart-gridline { stroke:#DFE8F5; stroke-width:1; stroke-dasharray:2 3; }.chart-axis { fill:#647B9C; font-size:12px; font-family:inherit; } .week-table-heading,.weekgrid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:10px; } .week-table-heading { font-size:11px; color:#647B9C; padding:8px 0; border-bottom:1px solid #E2E8F0; }.week-table-heading span:not(:first-child) { text-align:right; } #dashboard .week { padding:12px 0; }.weekname { font-size:11px; }.week .money { font-size:12px; text-align:right; white-space:nowrap; } #dashboard #months { display:grid; grid-template-columns:1fr 1fr; gap:10px; } #dashboard .month { margin:0!important; border:1px solid #DFE8F5; padding:14px; }.mname { font-size:13px; margin-bottom:10px; }.mrow { font-size:12px; padding:5px 0; } .kpi-explanation { font-size:11px; line-height:1.6; color:#7B8CA5; } #transactions .transaction-panel { padding:0; border:0; background:transparent; } #transactions .transaction-toolbar { display:flex; align-items:center; gap:12px; padding:18px; min-height:94px; margin:0; border:1px solid #DFE8F4; border-radius:9px; background:#fff; } #transactions .split-menu { flex:0 0 auto; position:relative; } #transactions .split-button { display:flex; }#transactions .split-button .btn:first-child { border-radius:6px 0 0 6px; }#transactions .split-button .btn:last-child { border-radius:0 6px 6px 0; width:40px; padding:0; border-left-color:#71A5FA; } #transactions .split-menu .popover { left:0; right:auto; min-width:220px; } #transactions .search-control { position:relative; flex:1 1 360px; min-width:200px; max-width:520px!important; } .search-control>.ui-icon { position:absolute; top:50%; left:14px; transform:translateY(-50%); width:22px; height:22px; color:#1B2A41; } #search { width:100%; height:44px; padding:10px 14px 10px 45px; border:1px solid #D9E4F2; border-radius:6px; font-size:14px; color:#1B2A41; } #search::placeholder { color:#6D83A5; } #transactions .filter-menu { position:relative; flex:0 0 170px; } #transactions #filterBtn { width:100%; justify-content:flex-start; height:44px; } #filterBtn .filter-chevron { margin-left:auto; width:17px; height:17px; } #filterBtn[aria-expanded=true] .filter-chevron { transform:rotate(180deg); } #transactions .view-menu { margin:0; flex:0 0 auto; } #transactions #viewBtn { height:44px; min-width:178px; } #transactions .filter-panel { position:absolute; top:calc(100% + 10px); left:auto; right:0; width:650px; max-width:calc(100vw - 155px); padding:20px; background:#fff; border:1px solid #DFE8F5; border-radius:9px; box-shadow:0 12px 30px #1B2A411A; z-index:18; } .filter-heading { display:flex; align-items:center; gap:12px; }.filter-heading strong { font-size:16px; }.filter-heading .clear-btn { margin-left:auto; padding:0!important; height:auto!important; border:0!important; color:#3B82F6!important; font-size:12px!important; } #closeFilters { float:none; width:24px; height:24px; padding:0; color:#7186A5; }#closeFilters .ui-icon { width:18px; height:18px; } #transactions .filter-panel>p { margin:8px 0 20px; font-size:12px; line-height:1.5; } #transactions .filter-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px 12px; } .filter-field>label { display:block; font-size:12px; color:#526F99; margin-bottom:7px; } .select-control,.date-control,.inline-date,.inline-select { position:relative; } .select-control>.ui-icon,.date-control>.ui-icon,.inline-date>.ui-icon,.inline-select>.ui-icon { position:absolute; right:11px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:#526F99; pointer-events:none; } .select-control select { appearance:none; padding-right:32px; } #transactions .filter-field .select,#transactions .filter-field .input { height:40px; border-color:#D9E4F2; font-size:13px; } .filter-date-row { display:grid; grid-column:1/-1; grid-template-columns:1fr 1.4fr; gap:12px; } #transactions .filter-date-row .date-filter { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:8px; } .date-control input::-webkit-calendar-picker-indicator,.inline-date input::-webkit-calendar-picker-indicator { opacity:0; cursor:pointer; width:19px; } #transactions .view-panel { top:54px; right:0; max-height:65vh; overflow:auto; min-width:325px; border-color:#DFE8F4; } #transactions .transaction-panel>.table-wrap { max-height:calc(100vh - 310px); min-height:150px; overflow:auto; border:1px solid #DFE8F4; border-radius:9px; background:#fff; scrollbar-color:#B9C8DD #F3F7FC; } #transactions .table { border-collapse:separate; border-spacing:0; font-size:13px; width:100%; } #transactions .table th { position:sticky; top:0; z-index:3; font-size:12px; padding:12px 10px; height:60px; line-height:1.4; color:#526F99; background:#F4F9FE; border-bottom:1px solid #DFE8F4; font-weight:550; } #transactions .table td { height:54px; padding:7px 10px; border-bottom:1px solid #E8EEF6; color:#1B2A41; } #transactions .table tr:last-child td { border-bottom:0; } #transactions .table tr:hover td { background:#F8FBFF; } #transactions .table tr:has(input[data-select-tx]:checked) td { background:#EAF3FF; } #transactions .selection-cell { min-width:34px; padding-inline:10px!important; } #transactions .sort { display:inline-flex; vertical-align:middle; color:#8296B4; margin-left:3px; }.sort .ui-icon { width:11px; height:13px; stroke-width:1.6; } #transactions th[aria-sort=ascending],#transactions th[aria-sort=descending] { color:#2563EB; } #transactions td[data-col=type] { min-width:135px; } #transactions td[data-col=contractor] { min-width:155px; } .tx-party { font-weight:500; }.tx-document { display:block; margin-top:3px; color:#7A8EA9; font-size:11px; font-weight:400; } #txTable:has(th[data-col=invoiceNumber]:not(.hidden)) .tx-document { display:none; } .tx-type-label { display:inline-flex; align-items:center; gap:6px; }.tx-type-warning { display:inline-flex; color:#E11D48; cursor:help; }.tx-type-warning .ui-icon { width:17px; height:17px; } .cell-date { font-variant-numeric:tabular-nums; } #transactions .inline-field { min-height:34px; height:34px; border:1px solid #DFE8F4; background:#fff; border-radius:5px; padding:5px 8px; font:inherit; color:inherit; } #transactions .inline-field:hover { border-color:#A7BDDE; }#transactions .inline-field:focus { outline:2px solid #BFDBFE; outline-offset:1px; border-color:#3B82F6; } .inline-date,.inline-select { display:inline-flex; } #transactions .inline-date input { min-width:144px; width:144px; max-width:none; padding-right:7px; } #transactions .inline-select select { appearance:none; padding-right:27px; min-width:144px; max-width:none; width:auto; } #transactions td[data-col=status] .inline-select select { min-width:124px; } #transactions td[data-col=amount],#transactions td[data-col=balance_after] { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; } #transactions th[data-col=amount],#transactions th[data-col=balance_after] { text-align:right; } .tx-money { display:inline-flex; align-items:center; justify-content:flex-end; gap:6px; font-variant-numeric:tabular-nums; font-weight:550; } #transactions .tx-money.green { color:var(--green); }#transactions .tx-money.red { color:var(--red); }.tx-money.neutral { color:#1B2A41; } #transactions .tx-money input { min-width:100px; text-align:right; color:inherit; font-variant-numeric:tabular-nums; font-weight:550; } .tx-currency { color:#7D8CA2; font-weight:400; font-size:11px; } #transactions .pill { padding:4px 8px; background:#EFF3F8; color:#64748B; font-size:11px; }#transactions .pill.red { background:#FFE7EC; color:#C51A3E; }#transactions .pill.green { background:#DFF8ED; color:#00865C; } #transactions .icon-btn { width:30px; height:30px; padding:0; background:transparent; border:0; }.icon-btn .ui-icon { width:18px; height:18px; } #transactions td[data-col=comment] { min-width:160px; max-width:280px; white-space:normal; overflow-wrap:anywhere; } #transactions .bulk-bar { margin:10px 0; padding:10px 14px; }#selectedCount { font-size:14px; font-weight:650; color:#1B2A41; } #transactions .bulk-bar .btn { height:36px; }.transaction-panel>p { margin:12px 2px 0; line-height:1.5; } #txForm [data-field-group=comment],#editTxForm [data-field-group=comment] { grid-column:1/-1; } #txForm [data-field-group=contractor] .actions { flex-wrap:nowrap; }#txForm [data-field-group=contractor] input { width:0; min-width:0; } .fx-fields { padding:14px; background:#F6F9FE; border-radius:7px; gap:14px; } .document-details { border:1px solid #DFE8F4; border-radius:7px; padding:0 14px; } .document-details summary { cursor:pointer; display:flex; justify-content:space-between; align-items:center; padding:12px 0; font-size:13px; color:#526F99; list-style:none; }.document-details summary::-webkit-details-marker { display:none; } .document-details summary .ui-icon { width:17px; height:17px; }.document-details[open] summary .ui-icon { transform:rotate(180deg); } .document-details>div { padding:0 0 14px; }.document-details .form { gap:14px; } .type-hint { margin:0; line-height:1.5; color:#87621C; }.type-hint:empty { display:none; } .form-actions { display:flex; gap:10px; justify-content:flex-end; border-top:1px solid #EDF1F7; padding-top:16px; } .exchange-note { display:flex; align-items:center; gap:10px; font-size:13px; color:#526F99; padding:2px 0; }.exchange-note .ui-icon { width:21px; height:21px; } @media(min-width:1700px) { .side { width:112px; flex-basis:112px; }.nav button { min-height:86px; font-size:13px; }.main { padding-top:18px; } } @media(max-width:1300px) { #dashboard .kpi-card { gap:10px; padding:16px 12px; }.kpi-icon { width:36px; height:36px; flex-basis:36px; }.kpi-icon .ui-icon { width:24px; height:24px; } #dashboard .account { grid-template-columns:24px minmax(0,1fr); }.account-balance { grid-column:2; text-align:left; }.account-icon { grid-row:1/3; } #transactions .transaction-toolbar { gap:8px; padding:14px; }#transactions .search-control { min-width:150px; }#transactions .filter-menu { flex-basis:130px; }#transactions #viewBtn { min-width:154px; padding-inline:10px; } } @media(max-width:1100px) { .main { padding:20px; }#dashboard .cards { grid-template-columns:repeat(2,minmax(0,1fr)); }#dashboard .value { font-size:28px; } #dashboard .grid2 { grid-template-columns:1fr; }#dashboard .account { grid-template-columns:28px minmax(0,1fr) auto; }.account-icon { grid-row:auto; }.account-balance { grid-column:auto; text-align:right; } .horizon-buttons button { min-width:0; padding-inline:16px; }#dashboardAddBtn { min-width:135px; } #transactions .transaction-toolbar { flex-wrap:wrap; }#transactions .search-control { max-width:none!important; flex-basis:calc(100% - 220px); }#transactions .filter-menu { flex-basis:170px; } #transactions .filter-panel { position:fixed; top:130px; left:120px; right:20px; width:auto; max-width:none; max-height:calc(100vh - 150px); overflow:auto; } } @media(max-width:650px) { :root { --header-height:54px; }.global-topbar { padding-inline:14px; }.global-tools { gap:8px; }.flux-logo { width:94px; height:30px; }#profileName { display:none; }#profileInitials { width:32px; height:32px; } .global-topbar .profile-button { gap:5px; }.header-icon { width:32px; height:36px; padding:6px; }#notificationsPanel { position:fixed; top:60px; left:12px; right:12px; width:auto; } .side { width:72px; flex-basis:72px; padding:6px 4px; }.nav button { min-height:72px; font-size:9px; gap:6px; padding:10px 0; }.nav button .ui-icon { width:23px; height:23px; } .main { padding:16px 12px 24px; }.top { min-height:56px; margin-bottom:18px; }.top h1 { font-size:27px; }.top p { font-size:12px; } #dashboard .dashboard-toolbar h2 { font-size:18px; }.horizon-row { display:flex; flex-wrap:wrap; gap:10px; }.horizon-buttons { display:flex; flex-wrap:wrap; width:100%; }.horizon-buttons button { min-height:35px; padding:0 10px; font-size:11px; flex:1 1 auto; }#dashboardAddBtn { margin-left:auto; height:38px; font-size:12px; } #dashboardRange { display:grid; grid-template-columns:1fr auto 1fr; gap:6px; }#dashboardRange input { width:100%; min-width:0; padding:6px; font-size:11px; }#dashboardRange .btn { grid-column:1/-1; } #dashboard .cards { gap:8px; }#dashboard .kpi-card { flex-direction:column; gap:9px; padding:12px; min-height:168px; }#dashboard .value { font-size:21px; }#dashboard .label { font-size:11px; }#dashboard .kpi-secondary { font-size:10px; }#dashboard .kpi-secondary strong { font-size:11px; }#periodMinimum { font-size:10px; }#periodMinimum strong { font-size:12px; } #dashboard .panel { padding:13px; }#dashboard .panel h2 { font-size:18px; }#dashboard .panelhead { flex-wrap:wrap; gap:8px; }#dashboard .panelhead .small { font-size:10px; }.account-tools { width:100%; flex-direction:row; justify-content:space-between; flex-wrap:wrap; }#dashboard .account-transfer { font-size:10px; } #dashboard .account-list { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:auto; align-content:start; }#dashboard .account { grid-template-columns:25px minmax(0,1fr) auto; min-height:76px; padding:10px; gap:7px; }.account-name strong { font-size:12px; }.account-balance { font-size:13px; }.account-balance .small { font-size:10px; } #dashboard .table { min-width:390px; }#dashboard .table td,#dashboard .table th { font-size:11px; }.financial-chart { min-height:130px; }.chart-legend { font-size:10px; gap:9px; }.chart-switch button { font-size:11px; padding-inline:12px; } #weeksTable { overflow-x:auto; }.week-table-heading,.weekgrid { min-width:440px; }#dashboard #months { grid-template-columns:1fr; }.kpi-explanation { font-size:10px; } #transactions .transaction-toolbar { display:grid; grid-template-columns:1fr 1fr; padding:12px; gap:10px; }#transactions .split-menu { grid-column:1/-1; }#transactions .search-control { grid-column:1/-1; width:100%; min-width:0; order:0; }#transactions .filter-menu { min-width:0; }#transactions .view-menu { min-width:0; } #transactions #filterBtn,#transactions #viewBtn { width:100%; min-width:0; height:40px; padding:0 8px; font-size:11px; gap:5px; }#transactions #viewBtn .ui-icon { width:16px; height:16px; }#filterBtn>.ui-icon { width:18px; height:18px; }#filterBtn .filter-chevron { width:13px; } #transactions .filter-panel { top:64px; left:12px; right:12px; max-height:calc(100vh - 80px); padding:16px; }#transactions .filter-grid { grid-template-columns:1fr; gap:12px; }.filter-date-row { grid-template-columns:1fr; }.filter-heading { flex-wrap:wrap; }.filter-heading strong { font-size:15px; } #transactions .view-panel { position:fixed; top:64px; left:12px; right:12px; min-width:0; max-width:none; max-height:calc(100vh - 80px); }#transactions .split-menu .popover { min-width:0; width:230px; max-width:calc(100vw - 112px); }.menu-item { white-space:normal; } #transactions .transaction-panel>.table-wrap { max-height:62vh; }#transactions .table td { height:54px; }.transaction-panel>p { font-size:10px; } .document-details .form,.fx-fields { grid-template-columns:1fr; }.form-actions { flex-wrap:wrap; } #txForm [data-field-group=contractor] .actions { flex-wrap:wrap; }#txForm [data-field-group=contractor] input { width:100%; flex-basis:100%!important; } } @media(prefers-reduced-motion:reduce) { .btn { transition:none; } } .main:has(#dashboard.active) .top { margin-bottom:8px; } /* Targeted corrections requested after the dashboard review. */ .app { background:#0A0F1E; } .main { background:#F4F8FC; border-top-left-radius:14px; min-height:calc(100vh - var(--header-height)); } #dashboard .accounts-heading { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:4px 12px; } #dashboard .accounts-heading h2 { margin:0; } .account-rate { text-align:right; } #dashboard .account-transfer { margin:0; justify-self:end; padding:0; height:26px; } #dashboard .account-caption { min-width:0; } #modalBg .modal,#editTxModal .modal,#transferModal .modal { max-width:720px; padding:22px; background:#fff; } #modalBg h2,#editTxModal h2,#transferModal h2 { margin:0 35px 20px 0; padding:0; font-size:24px; color:#0A0F1E; } #modalBg .close,#editTxModal .close,#transferModal .close { position:static; float:right; margin:0; padding:0; width:26px; height:26px; color:#1B2A41; } #txForm,#editTxForm,#transferForm { padding:0; gap:12px; } #txForm>div,#editTxForm>div,#transferForm>div { min-width:0; } #txForm .input,#txForm .select,#editTxForm .input,#editTxForm .select,#transferForm .input,#transferForm .select { min-width:0; height:38px; font:inherit; font-size:13px; padding:8px 9px; } #txForm label,#editTxForm label,#transferForm label { font-size:11px; color:var(--muted); margin-bottom:5px; } #txForm .btn,#editTxForm .btn,#transferForm .btn { height:38px; font-size:13px; padding:0 12px; } #txForm [data-field-group=contractor] .actions { flex-wrap:nowrap; } #txForm [data-field-group=contractor] input { flex:1; width:0; } @media(max-width:650px) { #dashboard .accounts-heading { grid-template-columns:1fr; gap:6px; } .account-rate { text-align:left; grid-row:3; } #dashboard .account-transfer { justify-self:start; } #txForm,#editTxForm,#transferForm { grid-template-columns:1fr; } #modalBg .modal,#editTxModal .modal,#transferModal .modal { padding:18px; } #txForm [data-field-group=contractor] input { flex-basis:auto!important; } } .financial-chart { min-height:0; max-height:none; } .chart-balance-axis { fill:#2563EB; } .chart-axis-title { font-size:11px; font-weight:600; } .chart-legend .legend-bar { width:9px; height:10px; border-radius:2px; } .chart-legend .legend-line { width:18px; height:3px; border-radius:1px; } .chart-hit { fill:transparent; } .chart-period { cursor:crosshair; outline:none; } .chart-period:hover .chart-hit,.chart-period:focus .chart-hit { fill:#3B82F60D; stroke:#93BFFC; stroke-width:1; } .chart-balance-line { pointer-events:none; } .chart-values { min-height:38px; font-size:12px; line-height:1.65; color:#1B2A41; padding:8px 10px; border-radius:6px; background:#F3F7FC; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; } .chart-help { font-size:10px; color:#7B8CA5; margin:7px 0 0; } @media(max-width:650px) { .chart-values { font-size:11px; }.chart-help { font-size:9px; }.financial-chart { min-width:340px; }#weeksChart,#monthsChart { overflow-x:auto; padding-bottom:4px; } } #transferForm input[readonly] { background:#F5F8FC; color:#526F99; } #transferForm>p { margin:0; line-height:1.5; } #transferModal { z-index:40; } #transferForm { gap:10px 12px; } #transferForm .input,#transferForm .select { height:34px; padding:6px 9px; } /* Keep the shell corner anchored to the sticky sidebar while content scrolls. */ .side { z-index:10; } .side::after { content:""; position:absolute; left:100%; top:0; width:14px; height:14px; pointer-events:none; background:radial-gradient(circle at 100% 100%,transparent 14px,#0A0F1E 14.5px); } .horizon-controls { display:flex; align-items:center; gap:12px; min-width:0; max-width:100%; overflow-x:auto; padding:3px 3px 5px; } .horizon-controls .horizon-buttons { flex:0 0 auto; flex-wrap:nowrap; width:auto; } .horizon-controls:has(#dashboardRange:not(.hidden)) .horizon-buttons button { min-width:66px; padding-inline:14px; } #dashboardRange { display:flex; flex:0 0 auto; flex-wrap:nowrap; align-items:center; margin:0; gap:8px; } #dashboardRange input { width:132px; min-width:132px; height:40px; font-size:12px; padding:6px 8px; } #dashboardRange .btn { height:40px; padding-inline:12px; font-size:12px; } #nearest tr[data-open-transaction] { cursor:pointer; } .payment-link { appearance:none; border:0; background:transparent; padding:0; color:inherit; font:inherit; text-align:left; cursor:pointer; } #nearest tr[data-open-transaction]:hover td,#nearest tr:focus-within td { background:#EFF6FF; } .payment-link:hover,.payment-link:focus-visible { color:#2563EB; text-decoration:underline; } #transactions tr.transaction-highlight td { background:#EAF3FF; border-bottom-color:#BED7FF; } #transactions tr.transaction-highlight td:first-child { box-shadow:inset 3px 0 #3B82F6; } #transactions tr.transaction-highlight { outline:2px solid #93C5FD; outline-offset:-2px; scroll-margin-top:calc(var(--header-height) + 16px); } @media(max-width:650px) { .horizon-controls { flex-basis:100%; } .horizon-controls .horizon-buttons button { flex:0 0 auto; } #dashboardRange input { width:120px; min-width:120px; } } /* Dashboard structure charts, using the existing forecast and shared palette. */ .structure-grid .panelhead h2 { margin-bottom:5px; } .donut-layout { display:grid; grid-template-columns:minmax(180px,1.1fr) minmax(140px,1fr); align-items:center; gap:8px; min-height:240px; } .donut-chart { display:block; width:100%; max-width:300px; margin:auto; overflow:visible; } .donut-slice { cursor:pointer; outline:none; transition:stroke-width .15s; } .donut-slice:hover,.donut-slice:focus-visible { stroke-width:34px; filter:brightness(1.06); } .donut-leader { fill:none; stroke:#B4C3D6; stroke-width:1; pointer-events:none; } .donut-percent { fill:#526F99; font:600 11px system-ui,sans-serif; pointer-events:none; } .donut-center-label { fill:#647B9C; font-size:12px; pointer-events:none; } .donut-center-amount { fill:#1B2A41; font-weight:700; font-variant-numeric:tabular-nums; pointer-events:none; } .donut-legend { display:flex; flex-direction:column; gap:6px; min-width:0; } .donut-legend-item { display:flex; align-items:center; gap:8px; width:100%; padding:9px 6px; border:0; border-radius:6px; background:transparent; color:#1B2A41; text-align:left; font:inherit; font-size:12px; cursor:pointer; } .donut-legend-item:hover,.donut-legend-item:focus-visible { background:#F0F5FC; } .donut-swatch { width:9px; height:9px; border-radius:3px; flex:0 0 auto; } .donut-category { flex:1; overflow-wrap:anywhere; } .donut-legend-item strong { flex:0 0 auto; font-size:11px; font-variant-numeric:tabular-nums; } .donut-detail { min-height:37px; padding:8px 10px; border-radius:6px; background:#F3F7FC; font-size:12px; color:#526F99; line-height:1.6; overflow-wrap:anywhere; } .structure-note { margin:9px 0 0; color:#7B8CA5; font-size:10px; line-height:1.5; } .donut-empty { display:flex; align-items:center; justify-content:center; gap:18px; min-height:250px; color:#647B9C; font-size:13px; } .donut-empty svg { width:150px; flex:0 0 150px; }.donut-empty text { fill:#94A3B8; font-size:24px; }.donut-empty p { max-width:220px; line-height:1.6; } .donut-unavailable { min-height:287px; display:flex; align-items:center; justify-content:center; color:#647B9C; font-size:13px; line-height:1.6; } @media(max-width:650px) { .donut-layout { grid-template-columns:1fr; gap:0; }.donut-chart { max-width:280px; }.donut-legend { gap:0; }.donut-legend-item { padding:8px 4px; }.donut-empty { flex-direction:column; gap:0; text-align:center; }.donut-detail { font-size:11px; } } @media(prefers-reduced-motion:reduce) { .donut-slice { transition:none; } } /* Transaction review: fixed column order, semantic type colors, readable details. */ #transactions .table th { height:48px; white-space:nowrap; max-width:none; } #transactions td[data-col=original] { min-width:128px; } #transactions td[data-col=type] { min-width:140px; } #transactions td[data-col=contractor] { min-width:150px; white-space:normal; } #transactions td[data-col=delay] { text-align:center; } #transactions th[data-col=delay] { text-align:center; } #transactions td[data-col=balance_after] { min-width:135px; } .type-badge { display:inline-flex; align-items:center; padding:5px 11px; border-radius:99px; font-size:11px; line-height:1.35; font-weight:550; white-space:nowrap; } .type-income { color:#006B50; background:#D9F6EC; }.type-cost,.type-salary { color:#A71B36; background:#FFE3E9; } .type-tax { color:#9A3E06; background:#FFEDD5; }.type-social { color:#806000; background:#FFF4BF; } .type-loan { color:#6636A3; background:#EEE4FC; }.type-refund { color:#427321; background:#EDF7DF; } .type-transfer { color:#1F5CAE; background:#E1EDFF; }.type-other { color:#475569; background:#F1F5F9; } #transactions td[data-col="delay"] .delay-pill.delay-late, #transactionDetailsDialog .delay-pill.delay-late { background:#FEE2E2; color:#B91C1C; } #transactions td[data-col="delay"] .delay-pill.delay-on-time, #transactionDetailsDialog .delay-pill.delay-on-time { background:#DCFCE7; color:#166534; } #transactions .status-wrap .inline-select select,#transactions .status-wrap>.pill { border:0; border-radius:99px; padding:5px 28px 5px 12px; min-width:120px; } #transactions .status-wrap.is-planned .inline-select select,#transactions .status-wrap.is-planned>.pill { background:#FFF0DA; color:#96530A; } #transactions .status-wrap.is-paid>.pill { background:#DDF6EA; color:#006C4F; padding-right:12px; text-align:center; justify-content:center; } #transactions .status-wrap .inline-select>.ui-icon { color:#A76515; width:13px; right:10px; } #transactions td[data-col=account] .inline-select select { border-radius:7px; color:#1B2A41; background:#FAFCFF; } .account-pill { display:inline-flex; align-items:center; padding:7px 9px; border:1px solid #DFE8F4; border-radius:7px; background:#FAFCFF; font-size:12px; } #transactions tr[data-id]:focus-visible { outline:2px solid #93C5FD; outline-offset:-2px; } #transactions .transaction-details-row>td { height:auto; white-space:normal; padding:12px 16px 16px; background:#F0F6FD; } .transaction-details { min-width:0; border:1px solid #CCDDF4; border-radius:10px; padding:16px 20px 18px; background:#fff; box-shadow:0 5px 16px #1B2A4110; color:#1B2A41; } .details-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; } .details-heading strong { display:flex; align-items:center; gap:9px; font-size:14px; }.details-heading strong>.ui-icon { color:#3B82F6; width:23px; height:23px; } .transaction-details dl { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0; gap:14px 22px; } .detail-item { min-width:0; border-left:1px solid #E6EDF6; padding-left:12px; }.detail-item dt { font-size:11px; color:#647B9C; margin:0 0 5px; }.detail-item dd { margin:0; font-size:12px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; white-space:normal; } .detail-item dd.green { color:#008161; }.detail-item dd.red { color:#C21E43; } #txForm [name=entry_date],#editTxForm [name=entry_date] { background:#F4F7FB; color:#64748B; } .plain-details { border:0; padding:0; }.plain-details>summary { display:none; }.plain-details>div { padding:0; } .document-details[open]>div { padding-bottom:12px; }.plain-details[open]>div { padding-bottom:0; } #transferForm>.actions { justify-content:flex-end; } @media(max-width:850px) { .transaction-details dl { grid-template-columns:repeat(2,minmax(0,1fr)); }.transaction-details { max-width:calc(100vw - 180px); } } @media(max-width:650px) { .transaction-details { max-width:calc(100vw - 140px); padding:14px; }.transaction-details dl { grid-template-columns:1fr; }.details-heading strong { font-size:12px; } } /* The details card stays within the visible table area while its columns scroll. */ .transaction-details { position:sticky; left:16px; width:calc(100vw - 210px); max-width:none; } @media(min-width:1700px) { .transaction-details { width:calc(100vw - 222px); } } @media(max-width:1100px) { .transaction-details { width:calc(100vw - 186px); } } @media(max-width:650px) { .transaction-details { width:calc(100vw - 138px); } } #transactions .transaction-details .pill.yellow { background:#FFF0DA; color:#96530A; } /* Pinned workspaces: title/tools stay put; only dashboard data or table rows scroll. */ body:has(:is(#dashboard,#transactions).active) { overflow:hidden; } .main:has(:is(#dashboard,#transactions).active) { display:flex; flex-direction:column; height:calc(100dvh - var(--header-height)); min-height:0; padding-bottom:12px; } .main:has(:is(#dashboard,#transactions).active)>.top { flex:none; min-height:54px; margin-bottom:12px; } .main:has(:is(#dashboard,#transactions).active)>.top h1 { font-size:30px; } .main:has(:is(#dashboard,#transactions).active)>.top p { font-size:14px; } .main:has(:is(#dashboard,#transactions).active)>#appMessage { flex:none; } :is(#dashboard,#transactions).section.active { display:flex; flex:1; flex-direction:column; min-height:0; } #dashboard .dashboard-toolbar { flex:none; margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid #E2E8F0; } #dashboard .dashboard-toolbar h2 { font-size:13px; color:#526F99; letter-spacing:0; margin-bottom:5px; font-weight:550; } #dashboardRangeError { flex:none; margin:0 0 8px; } .dashboard-content { min-height:0; overflow:auto; overscroll-behavior:contain; padding:2px 6px 20px 0; scrollbar-color:#B9C8DD #F3F7FC; } .dashboard-content:focus-visible { outline:2px solid #93C5FD; outline-offset:-2px; } #dashboard .kpi-secondary { border-top:1px solid #E2E8F0; padding-top:9px; margin-top:12px; } #dashboard .kpi-explanation { font-size:11px; line-height:1.6; color:#61718A; margin:0 2px 16px; max-width:1150px; } #dashboard .kpi-explanation summary { cursor:pointer; width:fit-content; } #dashboard .kpi-explanation p { margin:8px 0 0; } #periodMinimum.minimum-warning { border-radius:6px; background:#FFF0F3; padding:8px; color:#B91C3D; } #dashboard .danger-box { display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:13px; } #dashboard #riskForecast { margin-left:auto; height:34px; color:#B91C3D; border-color:#F9BECE; font-size:12px; } #dashboard .accounts-payments-grid { align-items:stretch; } #dashboard .account-list { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:auto; align-content:start; } #dashboard .account { grid-template-columns:28px minmax(0,1fr) auto; min-height:72px; } #dashboard .account-icon { grid-row:auto; } #dashboard .account-balance { grid-column:auto; text-align:right; } .payment-accounts { display:block; margin-top:5px; font-size:10px; font-weight:400; color:#647B9C; } #transactions .transaction-panel { display:flex; flex-direction:column; flex:1; min-height:0; } #transactions .transaction-toolbar { flex:none; z-index:20; min-height:72px; padding:12px 16px; margin-bottom:0; border-radius:9px 9px 0 0; } #transactions .transaction-panel>.table-wrap { flex:1; min-height:0; max-height:none; border-radius:0 0 9px 9px; overscroll-behavior:contain; } #transactions .bulk-bar,#transactions #filterError { flex:none; } #transactions .filter-panel { max-height:calc(100dvh - 255px); overflow:auto; } #transactions .view-panel { max-height:calc(100dvh - 255px); } .transaction-help { flex:none; color:#647B9C; font-size:11px; padding:9px 2px 0; line-height:1.6; } .transaction-help summary { cursor:pointer; width:max-content; } .transaction-help p { margin:6px 0 0; max-height:15vh; overflow:auto; } #transactions tr.transaction-preview-active td { background:#EAF3FF; } #transactions tr.transaction-preview-active td:first-child { box-shadow:inset 3px 0 #3B82F6; } #transactions tr[data-id] { scroll-margin-top:50px; } /* Native dialog gives intentional focus, Escape and keyboard containment. */ .transaction-drawer { position:fixed; inset:0 0 auto auto; margin:0; padding:0; width:420px; max-width:100vw; height:auto; max-height:100dvh; border:0; border-left:1px solid #E2E8F0; background:#fff; color:#1B2A41; box-shadow:-16px 0 48px #0A0F1E26; } .transaction-drawer[open] { display:flex; flex-direction:column; } .transaction-drawer::backdrop { background:#0A0F1E30; } .drawer-heading { flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px; border-bottom:1px solid #E2E8F0; } .drawer-heading h2 { margin:0; font-size:15px; color:#0A0F1E; } .drawer-heading .icon-btn { width:32px; height:32px; padding:7px; border:0; background:#F4F8FC; } .drawer-content { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; padding:16px 18px; } .detail-hero { padding-bottom:14px; } .detail-badges { display:flex; align-items:center; flex-wrap:wrap; gap:8px; } .detail-badges .pill { font-size:11px; }.detail-badges .pill.yellow { background:#FFF0DA; color:#96530A; } .detail-hero h3 { margin:10px 0 5px; color:#0A0F1E; font-size:19px; line-height:1.35; overflow-wrap:anywhere; } .detail-amount { font-size:25px; font-weight:700; font-variant-numeric:tabular-nums; margin:0; overflow-wrap:anywhere; letter-spacing:-.5px; } .detail-section { padding:12px 0; border-top:1px solid #E2E8F0; } .detail-section h3 { margin:0 0 10px; font-size:12px; color:#0A0F1E; } .transaction-drawer dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:0; gap:10px 16px; } .transaction-drawer .detail-item { border:0; padding:0; } .transaction-drawer dt { font-size:11px; color:#64748B; margin:0 0 5px; } .transaction-drawer dd { font-size:13px; line-height:1.5; color:#1B2A41; margin:0; white-space:pre-wrap; overflow-wrap:anywhere; } .detail-saved { border-top:1px solid #E2E8F0; padding-top:12px; } .detail-saved summary { font-size:12px; color:#526F99; cursor:pointer; } .detail-saved dl { margin-top:12px; } .detail-note { margin:0; font-size:13px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; } .drawer-footer { flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px; border-top:1px solid #E2E8F0; background:#FAFCFF; } .drawer-footer>span { font-size:11px; color:#64748B; } .drawer-footer .btn { display:flex; align-items:center; gap:8px; height:36px; } @media(max-width:650px) { .main:has(:is(#dashboard,#transactions).active) { padding:12px 10px 8px; } .main:has(:is(#dashboard,#transactions).active)>.top { min-height:48px; margin-bottom:8px; } .main:has(:is(#dashboard,#transactions).active)>.top h1 { font-size:25px; } .main:has(:is(#dashboard,#transactions).active)>.top p { font-size:11px; } #dashboard .dashboard-toolbar { position:relative; padding-bottom:6px; margin-bottom:8px; } #dashboard .dashboard-toolbar h2 { min-height:32px; display:flex; align-items:center; font-size:11px; } #dashboard #dashboardAddBtn { position:absolute; top:0; right:0; min-width:0; height:30px; padding:0 8px; font-size:11px; gap:5px; } #dashboard #dashboardAddBtn .ui-icon { width:16px; } .horizon-row { display:block; } .dashboard-content { padding-right:2px; } #dashboard .account { grid-template-columns:22px minmax(0,1fr); } #dashboard .account-icon { grid-row:1/3; } #dashboard .account-balance { grid-column:2; text-align:left; } #dashboard .kpi-card { min-height:156px; padding:10px; } #dashboard .value { font-size:20px; } #transactions .transaction-toolbar { grid-template-columns:minmax(0,1fr) 108px; gap:8px; padding:10px; } #transactions .split-menu { grid-column:1; grid-row:1; } #transactions .view-menu { grid-column:2; grid-row:1; } #transactions .search-control { grid-column:1; grid-row:2; } #transactions .filter-menu { grid-column:2; grid-row:2; } #transactions .split-button .btn { height:36px; padding:0 8px; font-size:11px; gap:5px; } #transactions .split-button .btn .ui-icon { width:16px; } #transactions .split-button .btn:last-child { padding:0 6px; } #transactions #viewBtn,#transactions #filterBtn { height:36px; font-size:10px; } #transactions #search { height:36px; font-size:12px; padding-left:30px; } #transactions .search-control>.ui-icon { width:16px; left:9px; } #transactions .filter-panel,#transactions .view-panel { position:fixed; top:64px; left:12px; right:12px; width:auto; max-width:none; max-height:calc(100dvh - 80px); } .transaction-help { font-size:10px; padding-top:6px; } .transaction-drawer { width:100vw; border:0; } .drawer-heading { padding:12px 16px; } .drawer-content { padding:14px 16px; } .drawer-footer { padding:12px 18px max(12px,env(safe-area-inset-bottom)); } .detail-hero h3 { font-size:19px; } .detail-amount { font-size:25px; } } @media(max-height:500px) and (max-width:850px) { .main:has(:is(#dashboard,#transactions).active)>.top { min-height:36px; margin-bottom:4px; } .main:has(:is(#dashboard,#transactions).active)>.top h1 { font-size:21px; } .main:has(:is(#dashboard,#transactions).active)>.top p { margin-top:0; font-size:10px; } #transactions .transaction-toolbar { padding:5px 8px; gap:4px; } #dashboard .dashboard-toolbar { margin-bottom:4px; padding-bottom:2px; } } /* Explicit KSeF setup and invoice review, using existing mubu tokens. */ .ksef-preview .panelhead{display:flex;align-items:center;justify-content:space-between;gap:12px} .integrations-panel{margin:18px 0}.integration-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:18px}.integration-card{border:1px solid #E2E8F0;border-radius:10px;padding:18px;min-width:0}.integration-card h3{margin:0;font-size:16px}.integration-card>label,.ksef-query label,.ksef-preview label:not(.ksef-confirm){display:block;font-size:12px;color:#1B2A41;margin:12px 0 6px}.integration-card>.actions{margin-top:16px;flex-wrap:wrap}.integration-card a{font-size:12px;color:#2563eb}.integration-card .form{gap:12px}.integration-card .form label{font-size:12px}.integration-card>.small{line-height:1.6} .ksef-dialog{width:min(960px,calc(100vw - 36px));max-width:none;max-height:calc(100dvh - 40px);padding:0;border:1px solid #E2E8F0;border-radius:14px;color:#1B2A41;box-shadow:0 20px 80px #0A0F1E30}.ksef-dialog::backdrop{background:#0A0F1E66}.ksef-dialog .drawer-heading{position:sticky;top:0;background:white;z-index:2}.ksef-dialog h2{margin:0}.ksef-dialog .drawer-heading p{margin:5px 0 0}.ksef-content{padding:18px 24px}.ksef-query{display:grid;grid-template-columns:1.25fr 1fr 1fr auto;gap:12px;align-items:end}.ksef-query label{margin-top:0}.ksef-results{max-height:280px;border:1px solid #E2E8F0;border-radius:9px;margin:16px 0}.ksef-results .table{width:100%;min-width:580px;table-layout:auto}.ksef-results small{display:block;color:#64748b;margin-top:5px}.ksef-results td{white-space:normal}.ksef-results td:nth-child(3){white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}.ksef-pagination{justify-content:space-between}.ksef-preview{margin-top:22px;padding:18px;border:1px solid #BFDBFE;border-radius:10px;background:#F8FAFC}.ksef-preview:focus{outline:none}.ksef-preview h3{margin:0;font-size:16px}.ksef-amount{font-size:24px;font-weight:650;margin:10px 0}.ksef-preview .small{overflow-wrap:anywhere;line-height:1.6}.ksef-confirm{display:flex;align-items:flex-start;gap:9px;font-size:12px;line-height:1.6;margin-top:16px}.ksef-confirm input{flex-shrink:0;margin-top:2px}.ksef-preview .form{gap:12px}.ksef-preview .actions{flex-wrap:wrap} @media(max-width:900px){.integration-grid{grid-template-columns:1fr}.ksef-query{grid-template-columns:1fr 1fr}.ksef-query .btn{align-self:end}.ksef-content{padding:14px}.ksef-dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 20px)}} @media(max-width:480px){.integration-card{padding:14px}.integration-card .form{grid-template-columns:1fr}.ksef-preview .panelhead{flex-wrap:wrap;gap:10px}.ksef-query{gap:8px}.ksef-preview{padding:12px}} /* KSeF decisions, separate from the existing payment status. */ .ksef-approval{display:inline-flex;align-items:center;border-radius:6px;padding:5px 8px;font-size:11px;font-weight:650;white-space:nowrap}.ksef-approval.approved{background:#DCFCE7;color:#166534}.ksef-approval.pending{background:#FEF3C7;color:#92400E}.ksef-approval.rejected{background:#FEE2E2;color:#991B1B}.ksef-tx-approval{display:block;margin-top:4px}.ksef-sync-panel{padding:16px;background:#F8FAFC;border:1px solid #E2E8F0;border-radius:10px;margin-bottom:20px}.ksef-sync-form{display:flex;align-items:end;flex-wrap:wrap;gap:12px}.ksef-sync-form label{font-size:12px}.ksef-sync-form .ksef-confirm{flex:1;min-width:210px}.ksef-dialog.inbox-mode #ksefSyncPanel,.ksef-dialog.inbox-mode .ksef-manual-info,.ksef-dialog.inbox-mode #ksefQueryForm,.ksef-dialog.inbox-mode .ksef-results,.ksef-dialog.inbox-mode .ksef-pagination,.ksef-dialog.inbox-mode #ksefGoSettings{display:none}.ksef-dialog.inbox-mode{max-width:720px}.ksef-dialog.inbox-mode .ksef-preview{margin:0}#ksefReviewForm .actions{margin-top:16px}#ksefReviewForm .hidden{display:none!important}@media(max-width:650px){.ksef-sync-form>*{width:100%}} .ksef-payment-pending{display:block;font-size:10px;color:#92400E} /* KSeF approval lives in the main transaction row; payment status stays independent. */ .ksef-row-source{display:block;color:#64748B;font-size:10px;line-height:1.4;margin-top:4px;white-space:normal} .ksef-decision{display:flex;align-items:center;position:relative;border-radius:8px;background:#FEF3C7;color:#92400E;min-width:148px} .ksef-decision.rejected{background:#FEE2E2;color:#991B1B} #txTable .ksef-decision select.inline-field{width:100%;background:transparent;border:1px solid transparent;border-radius:8px;color:inherit;font-weight:600;font-size:11px;padding:8px 24px 8px 10px;appearance:none;cursor:pointer} .ksef-decision>.ui-icon{position:absolute;right:7px;width:14px;height:14px;pointer-events:none} #txTable .ksef-decision select:focus-visible{outline:2px solid #3B82F6;outline-offset:2px} .ksef-document-button{border:0;background:transparent;padding:0;cursor:pointer;font:inherit}.ksef-document-button:focus-visible{outline:2px solid #3B82F6;outline-offset:2px;border-radius:6px}.ksef-document-button:hover .ksef-approval{text-decoration:underline} /* Download, select, then add: invoice approval stays in the main table. */ .ksef-list-toolbar,.ksef-add-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:16px 0}.ksef-list-toolbar h3{margin:0}.ksef-list-toolbar p{margin:6px 0}.ksef-list-toolbar label{display:block;font-size:12px;margin-bottom:5px}.ksef-list-toolbar .select{max-width:300px}.ksef-add-actions{position:sticky;bottom:0;background:#fff;border-top:1px solid #E2E8F0;padding:16px 0;margin-bottom:0}.ksef-results input[type=checkbox]{width:17px;height:17px;accent-color:#3B82F6}.ksef-results td:first-child{width:30px}.ksef-results td{vertical-align:top}.ksef-results td:nth-child(4){white-space:nowrap;font-variant-numeric:tabular-nums}.ksef-results small{display:block;max-width:260px;color:#64748B;margin-top:4px}.ksef-in-table{color:#475569;font-weight:600}.ksef-detail-link{display:block;color:#2563EB;font:inherit;font-size:12px;background:none;border:0;padding:6px 0;cursor:pointer}.ksef-detail-link:hover{text-decoration:underline}.ksef-dialog.inbox-mode .ksef-list-toolbar,.ksef-dialog.inbox-mode .ksef-add-actions{display:none}#backKsefList{margin-bottom:14px} @media(max-width:650px){.ksef-list-toolbar,.ksef-add-actions{align-items:stretch;flex-direction:column}.ksef-list-toolbar .select{max-width:none;width:100%}.ksef-results{overflow-x:auto}.ksef-results table{min-width:650px}.ksef-add-actions{gap:8px}} .ksef-results td:nth-child(3){text-align:left}.ksef-results td:nth-child(4){text-align:right} /* Keep imported invoices at the same compact height as ordinary payments. */ #transactions td[data-col=contractor]{width:240px;min-width:220px;max-width:280px} #transactions .tx-party{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px;line-height:1.4} .tx-nip{display:block;margin-top:3px;color:#718096;font-size:10px;line-height:1.3;white-space:nowrap} #transactions td[data-col=status],#transactions td[data-col=ksefApproval]{white-space:nowrap;min-width:145px} #transactions .ksef-decision{min-width:142px;border-radius:16px} #transactions .ksef-decision select.inline-field{height:30px;min-height:30px;padding-block:4px} #transactions .ksef-approval{border-radius:16px;padding:6px 12px} .tx-status-source{display:block;font-size:9px;color:#64748B;line-height:1.1;margin-top:2px} .ksef-defaults{margin-top:18px}#ksefReviewFields .wide{grid-column:1/-1} /* Compact financial table: bounded names and matching independent status controls. */ #transactions .table th,#transactions .table td{padding-inline:5px} #transactions .table th{white-space:normal;line-height:1.25} #transactions td[data-col=original]{min-width:84px} #transactions td[data-col=type]{min-width:94px} #transactions td[data-col=contractor]{width:150px;min-width:140px;max-width:160px} #transactions .tx-party{max-width:148px} #transactions td[data-col=balance_after]{min-width:88px} #transactions .inline-date input{width:112px;min-width:112px;font-size:12px} #transactions td[data-col=account] .inline-select select,#transactions .account-pill{width:120px;min-width:120px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px} #transactions td[data-col=status],#transactions td[data-col=ksefApproval]{width:112px;min-width:112px} #transactions .status-wrap,#transactions .ksef-decision{display:inline-flex;width:110px;min-width:110px;height:30px;vertical-align:middle} #transactions .status-wrap>.pill,#transactions .status-wrap .inline-select,#transactions .status-wrap .inline-select select,#transactions .ksef-approval,#transactions .ksef-decision select.inline-field{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;width:110px;min-width:110px;max-width:110px;height:30px;min-height:30px;border:0;border-radius:99px;padding:5px 6px;font-size:11px;font-weight:500;line-height:20px;white-space:nowrap} #transactions .status-wrap .inline-select select,#transactions .ksef-decision select.inline-field{padding-right:19px;text-align:center;appearance:none} #transactions .ksef-decision>.ui-icon{right:9px;width:13px} #transactions .ksef-document-button{height:30px} #transactions td[data-col=actions] .actions{gap:3px;flex-wrap:nowrap} #transactions td[data-col=actions] .icon-btn{width:27px;height:30px;padding:5px} .invoice-source{user-select:text}.invoice-source dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0}.invoice-source dt{font-size:11px;color:#64748B;margin-bottom:4px}.invoice-source dd{margin:0;font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere} .invoice-source h3{font-size:12px;margin:15px 0 10px}.invoice-source .invoice-party{padding:10px 0;border-top:1px solid #E2E8F0}.invoice-source .invoice-party p{white-space:pre-wrap;font-size:12px;line-height:1.5;margin:3px 0;overflow-wrap:anywhere}.invoice-lines{margin-top:12px}.invoice-line{padding:10px 0;border-bottom:1px solid #E2E8F0;font-size:12px}.invoice-line strong{display:block;font-weight:500;margin-bottom:6px}.invoice-line dl{gap:8px}.copy-field{display:inline-flex;vertical-align:middle;padding:2px;margin-left:4px;border:0;background:transparent;color:#64748B;cursor:pointer}.copy-field:hover{color:#2563EB}.copy-field .ui-icon{width:14px;height:14px}.copy-feedback{font-size:11px;color:#166534;min-height:16px}.invoice-source details summary{font-size:12px;cursor:pointer;padding:10px 0}.ksef-copy-actions{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}.ksef-copy-actions .btn{font-size:11px;padding:6px 10px} /* Explicit starting balances and separately displayed credit liabilities. */ .balance-onboarding,.credit-card-panel{margin-bottom:18px} .balance-onboarding .form,.credit-card-panel .form,.finance-dialog .form{gap:14px;max-width:850px} .reconciliation-preview{font-size:14px;line-height:1.6;margin-top:14px;color:#1B2A41} .credit-card-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 0;border-bottom:1px solid #E2E8F0} .credit-card-panel details{margin-top:18px}.credit-card-panel summary{cursor:pointer;color:#1B2A41;font-weight:600;margin-bottom:16px} .finance-dialog{width:min(640px,calc(100vw - 32px));max-height:90vh;overflow:auto;border:1px solid #E2E8F0;border-radius:16px;padding:24px;color:#0A0F1E} .finance-dialog::backdrop{background:rgba(10,15,30,.3)} #partialRemaining{display:flex;align-items:center;background:#F5F8FC;font-variant-numeric:tabular-nums} .dashboard-credit-cards{display:flex;gap:20px;flex-wrap:wrap;border:1px solid #E2E8F0;background:white;border-radius:12px;padding:14px 18px;margin-bottom:16px} .dashboard-credit-cards>div{display:grid;gap:5px}.dashboard-credit-cards span{font-size:14px;color:#1B2A41}.dashboard-credit-cards small{color:#64748b} .ksef-invoice-heading{display:grid;gap:5px;margin:8px 0 16px}.ksef-invoice-heading span{font-size:14px;color:#64748b} #ksefPreviewSummary>details>summary{cursor:pointer;margin-bottom:16px;color:#1B2A41;font-size:14px} #transactions td[data-col=status] .inline-select select{width:110px;min-width:110px;max-width:110px} /* Account assets and credit liabilities share the panel, never the cash total. */ #dashboard .accounts-panel { min-height:244px; } #dashboard .account { grid-template-columns:28px minmax(0,1fr); align-content:start; gap:8px; } #dashboard .account-balance { grid-column:2; text-align:left; overflow-wrap:anywhere; } #dashboard .account-balance>small { display:block; color:#647B9C; font-size:10px; font-weight:400; margin-bottom:4px; } #dashboard .account-name strong { overflow-wrap:anywhere; } #dashboard .credit-account .account-icon { color:#3B82F6; } .credit-account-limits { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:12px; border-top:1px solid #E2E8F0; padding-top:8px; } .credit-account-limits span { flex:1; color:#647B9C; font-size:10px; } .credit-account-limits strong { display:block; color:#1B2A41; font-size:12px; margin-top:4px; overflow-wrap:anywhere; } #dashboard .nearest-panel { display:flex; flex-direction:column; min-height:244px; contain:size; } #dashboard .nearest-panel .panelhead { flex:none; } #dashboard .nearest-panel .table-wrap { flex:1; height:0; min-height:115px; overflow:auto; scrollbar-gutter:stable; } #dashboard .nearest-panel thead { position:sticky; top:0; background:white; z-index:1; } .cash-flow-period { margin:10px 0; width:max-content; } #dashboardDays { max-height:294px; overflow:auto; scrollbar-gutter:stable; overscroll-behavior:contain; } #dashboardDays .week { margin:0; height:42px; box-sizing:border-box; padding:0; border:0; border-bottom:1px solid #E2E8F0; border-radius:0; } #dashboardDays .weekgrid { height:100%; align-items:center; gap:8px; padding:0 8px; } #dashboardDays .weekname,#dashboardDays .money { font-size:11px; white-space:nowrap; } #dashboard .chart-grid>.panel { min-width:0; } #transactions .tx-type-warning { color:#D97706; } #settings>.grid2 { align-items:start; } #settingsAccounts .account { display:flex; flex-wrap:wrap; gap:8px; } #settingsAccounts .account strong,#settingsAccounts .account small { flex-basis:100%; } #settings .credit-card-panel { margin-bottom:0; } #settings .credit-card-row { flex-wrap:wrap; } #reconcileDialog h2 { font-size:22px; } @media(max-width:1000px){ #dashboard .accounts-payments-grid { grid-template-columns:1fr; } #dashboard .nearest-panel { contain:none; } #dashboard .nearest-panel .table-wrap { flex:none; height:auto; max-height:260px; } } @media(max-width:600px){ #dashboard .account-list { grid-template-columns:1fr; } #dashboardDays .weekgrid { grid-template-columns:1.3fr 1fr 1fr 1.2fr; } } .credit-account-limits strong.red { color:#E11D48; } /* Dashboard / Transactions: one visual scale, with content scrolling inside modules. */ :root { --workspace-gap:16px; --workspace-radius:12px; --workspace-control:40px; --workspace-module:400px; --workspace-caption:#52657F; } .main:has(:is(#dashboard,#transactions).active)>.top { min-height:54px; margin-bottom:12px; } .main:has(:is(#dashboard,#transactions).active)>.top h1 { font-size:28px; letter-spacing:-.7px; } .main:has(:is(#dashboard,#transactions).active)>.top p { font-size:13px; color:var(--workspace-caption); } :is(#dashboard,#transactions,#modalBg,#editTxModal,#transferModal) .btn { height:var(--workspace-control); border-radius:8px; font-size:13px; } :is(#dashboard,#transactions) .btn .ui-icon { width:20px; height:20px; } #dashboard .dashboard-toolbar { display:flex; align-items:center; gap:16px; padding-bottom:12px; margin-bottom:16px; } #dashboard .dashboard-toolbar h2 { flex:none; margin:0; font-size:12px; color:var(--workspace-caption); } #dashboard .horizon-row { flex:1; min-width:0; gap:12px; } #dashboard .horizon-controls { gap:12px; padding:3px 3px 5px; } #dashboard .horizon-buttons button { min-width:65px; min-height:38px; padding-inline:14px; font-size:13px; } #dashboardAddBtn { min-width:138px; } #dashboard .cards { gap:var(--workspace-gap); margin-bottom:var(--workspace-gap); } #dashboard .kpi-card { min-height:164px; padding:18px 16px; gap:12px; border-color:var(--line); border-radius:var(--workspace-radius); } #dashboard .kpi-icon { width:40px; height:40px; flex-basis:40px; } #dashboard .kpi-icon .ui-icon { width:24px; height:24px; } #dashboard .label { color:var(--workspace-caption); font-size:12px; } #dashboard .value { font-size:clamp(21px,1.85vw,28px); margin-top:8px; } #dashboard .kpi-secondary { font-size:12px; color:var(--workspace-caption); } #dashboard .kpi-secondary strong { font-size:13px; margin-top:2px; } #dashboard .grid2 { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--workspace-gap); margin-bottom:var(--workspace-gap); } #dashboard .grid2>.panel { display:flex; flex-direction:column; height:var(--workspace-module); min-height:0; min-width:0; padding:20px; border:1px solid var(--line); border-radius:var(--workspace-radius); box-sizing:border-box; contain:none; } #dashboard .panelhead { flex:none; min-height:64px; margin-bottom:12px; gap:6px 12px; } #dashboard .panel h2 { font-size:18px; line-height:24px; font-weight:650; letter-spacing:-.3px; margin:0; } #dashboard .panelhead .small { font-size:12px; color:var(--workspace-caption); line-height:18px; } #dashboard .accounts-heading { display:grid; grid-template-columns:minmax(0,1fr) auto; align-content:start; align-items:center; } #dashboard .account-transfer { height:28px; font-size:12px; margin:0; padding:0; border-radius:4px; } #dashboard #accounts { flex:1; min-height:0; overflow:auto; scrollbar-gutter:stable; padding-right:2px; } #dashboard .account-list { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:minmax(110px,auto); gap:12px; } #dashboard .account { min-height:110px; margin:0; border-color:var(--line); border-radius:8px; padding:12px; gap:8px; } #dashboard .account-icon .ui-icon { width:24px; height:24px; } #dashboard .account-name strong { font-size:13px; line-height:18px; } #dashboard .account-name small,#dashboard .account-balance>small,#dashboard .credit-account-limits span { font-size:11px; line-height:16px; color:var(--workspace-caption); } #dashboard .account-balance { font-size:16px; white-space:normal; } #dashboard .credit-account-limits { gap:8px; } #dashboard .credit-account-limits strong { font-size:12px; } #dashboard .nearest-panel .table-wrap { flex:1; min-height:0; height:auto; max-height:none; overflow:auto; } #dashboard .nearest-panel .table th { font-size:12px; height:34px; padding:7px 6px; background:#fff; } #dashboard .nearest-panel .table td { font-size:12px; padding:10px 6px; height:46px; } #dashboard .chart-grid .panelhead { min-height:88px; } #dashboard .chart-grid .panelhead>div:first-child { min-width:0; } #dashboard .chart-switch button,#dashboard .cash-flow-period button { min-height:30px; font-size:12px; padding-inline:12px; } #dashboard .cash-flow-period { margin:8px 0 6px; } #dashboard :is(#weeksChart,#monthsChart,#weeksTable,#monthsTable,#dashboardDailyTable) { flex:1; min-height:0; overflow:auto; } #dashboard :is(#weeksChart,#monthsChart) { display:flex; flex-direction:column; } #dashboard .chart-legend { flex:none; font-size:12px; margin:0 0 4px; gap:12px; color:var(--workspace-caption); } #dashboard .financial-chart { flex:1; height:160px; min-height:135px; max-height:185px; } #dashboard .chart-values { flex:none; min-height:40px; padding:8px 10px; font-size:12px; line-height:18px; margin-top:auto; } #dashboard .week-table-heading { font-size:12px; padding:6px 8px; line-height:18px; color:var(--workspace-caption); } #dashboard .weekgrid { grid-template-columns:1.4fr 1fr 1fr 1fr; } #dashboard .weekname { grid-column:auto; } #dashboardDays { max-height:238px; } #dashboard #dashboardDays .week { height:34px; min-height:34px; } #dashboard #dashboardDays .weekname,#dashboard #dashboardDays .money { font-size:12px; } #dashboard .structure-grid .panelhead { flex-direction:column; justify-content:flex-start; align-items:flex-start; } #dashboard :is(#flowStructure,#expenseStructure) { flex:1; min-height:0; display:flex; flex-direction:column; overflow:auto; } #dashboard .donut-layout { flex:1; min-height:0; grid-template-columns:minmax(175px,1.1fr) minmax(130px,1fr); } #dashboard .donut-chart { max-width:260px; max-height:238px; } #dashboard .donut-legend { gap:2px; } #dashboard .donut-legend-item { font-size:12px; min-height:32px; padding:6px; } #dashboard .donut-legend-item strong { font-size:12px; } #dashboard .donut-detail { flex:none; min-height:40px; margin-top:8px; color:var(--workspace-caption); line-height:18px; } #dashboard .donut-empty,#dashboard .donut-unavailable { flex:1; min-height:0; } #dashboard .kpi-explanation { margin:4px 2px 0; font-size:12px; color:var(--workspace-caption); } #dashboard .kpi-explanation .small { font-size:12px; line-height:1.6; } #transactions .transaction-toolbar { min-height:72px; padding:16px; border-color:var(--line); border-radius:var(--workspace-radius) var(--workspace-radius) 0 0; gap:12px; } #transactions :is(#search,#filterBtn,#viewBtn) { height:var(--workspace-control); font-size:13px; } #transactions .search-control { flex:1 1 220px; max-width:none!important; } #transactions .filter-menu { flex-basis:128px; } #transactions #viewBtn { min-width:154px; } #transactions .filter-panel { width:560px; padding:20px; border-color:var(--line); border-radius:var(--workspace-radius); } #transactions .filter-heading { margin-bottom:20px; } #transactions .filter-heading strong { font-size:16px; } #transactions #closeFilters { width:32px; height:32px; } #transactions .filter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } #transactions .filter-date-row { grid-template-columns:1fr; gap:16px; } #transactions .filter-field>label { font-size:12px; color:var(--workspace-caption); } #transactions .filter-field :is(.select,.input) { border-radius:8px; } #transactions .transaction-panel>.table-wrap { border-color:var(--line); border-radius:0; } #transactions .table th { height:52px; font-size:12px; color:var(--workspace-caption); } #transactions .table td { height:54px; } #transactions .table .tx-scroll-space>td { height:0; padding:0; border:0; pointer-events:none; background:#fff; } #transactions .inline-field { height:32px; min-height:32px; border-radius:6px; } #transactions .tx-nip { font-size:11px; color:var(--workspace-caption); } #transactions :is(.status-wrap,.ksef-decision) { width:122px; min-width:122px; height:32px; } #transactions :is(.status-wrap>.pill,.status-wrap .inline-select,.status-wrap .inline-select select,.ksef-approval,.ksef-decision select.inline-field),#transactions td[data-col=status] .inline-select select { width:122px; min-width:122px; max-width:122px; height:32px; min-height:32px; font-size:12px; } #transactions :is(th,td)[data-col=actions] { padding-inline:8px; } #transactions td[data-col=actions] .actions { gap:4px; } #transactions td[data-col=actions] .icon-btn { width:32px; height:32px; padding:7px; border-radius:6px; } #transactions td[data-col=actions] .icon-btn:hover:not(:disabled) { background:#EAF2FF; } #transactions .transaction-footer { flex:none; display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:10px 14px; background:white; border:1px solid var(--line); border-top:0; border-radius:0 0 var(--workspace-radius) var(--workspace-radius); font-size:12px; color:var(--workspace-caption); } #transactionCount { flex:none; font-variant-numeric:tabular-nums; } #transactions .transaction-help { padding:0; font-size:12px; color:var(--workspace-caption); max-width:650px; } #transactions .transaction-help summary { margin-left:auto; } #transactions .transaction-help p { margin:8px 0 0; } #transactions .tx-empty { gap:12px; min-height:240px; color:var(--workspace-caption); } #transactions .tx-empty strong { font-size:16px; color:#1B2A41; } :is(#modalBg,#editTxModal,#transferModal) .modal { padding:24px; border-radius:var(--workspace-radius); } :is(#modalBg,#editTxModal,#transferModal) h2 { font-size:20px; line-height:28px; margin-bottom:20px; } :is(#modalBg,#editTxModal,#transferModal) .close { width:32px; height:32px; border-radius:6px; } :is(#txForm,#editTxForm,#transferForm) { gap:16px; } :is(#txForm,#editTxForm,#transferForm) label { font-size:12px; color:var(--workspace-caption); line-height:16px; margin-bottom:6px; } :is(#txForm,#editTxForm,#transferForm) :is(.input,.select,.btn) { height:var(--workspace-control); border-radius:8px; font-size:13px; } :is(#txForm,#editTxForm,#transferForm)>.full.actions { justify-content:flex-end; border-top:1px solid var(--line); padding-top:16px; gap:12px; } .transaction-drawer .drawer-heading h2 { font-size:18px; line-height:24px; } .transaction-drawer .drawer-heading,.transaction-drawer .drawer-content { padding-inline:20px; } .transaction-drawer dt { font-size:12px; color:var(--workspace-caption); } .transaction-drawer .detail-section h3 { font-size:13px; } @media(max-width:1100px) { #dashboard .cards { grid-template-columns:repeat(2,minmax(0,1fr)); } #dashboard .grid2 { grid-template-columns:1fr; } #dashboard .dashboard-toolbar { display:block; } #dashboard .dashboard-toolbar h2 { margin-bottom:6px; } #dashboard .account-list { grid-template-columns:repeat(2,minmax(0,1fr)); } #transactions .transaction-toolbar { gap:10px; } #transactions .filter-menu { flex-basis:112px; } #transactions #viewBtn { min-width:144px; } } /* Shared form language, also used by KSeF, recurrence and account editors. */ .modal-bg .modal,.finance-dialog { max-width:720px; max-height:calc(100dvh - 40px); padding:24px; border-radius:var(--workspace-radius); border:1px solid var(--line); background:#fff; color:#1B2A41; } .modal-bg .import-modal { max-width:980px; } .modal-bg .modal h2,.finance-dialog h2,.ksef-dialog h2 { font-size:20px; line-height:28px; margin-top:0; letter-spacing:-.3px; } .modal-bg .modal .form,.finance-dialog .form { gap:16px; } .modal-bg .modal label,.finance-dialog label,.ksef-dialog label:not(.ksef-confirm) { display:block; font-size:12px; color:var(--workspace-caption); line-height:16px; margin:0 0 6px; } .modal-bg .modal :is(.input,.select,.btn),.finance-dialog :is(.input,.select,.btn),.ksef-dialog :is(.input,.select,.btn) { height:var(--workspace-control); border-radius:8px; font-size:13px; } .modal-bg .modal .btn,.finance-dialog .btn,.ksef-dialog .btn { display:inline-flex; justify-content:center; align-items:center; gap:8px; padding:0 14px; line-height:1.2; } .modal-bg .modal .ui-icon,.finance-dialog .ui-icon,.ksef-dialog .ui-icon { width:20px; height:20px; } .modal-bg .modal .close { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:6px; border-radius:6px; color:#52657F; } .modal-bg .modal .form>.full.actions,.finance-dialog .form>.full.actions { border-top:1px solid var(--line); padding-top:16px; gap:12px; justify-content:flex-end; } .modal-bg .modal .small,.finance-dialog .small { font-size:12px; line-height:18px; } .modal-bg .modal p:empty,.finance-dialog p:empty { display:none; } .ksef-dialog { border-radius:var(--workspace-radius); } .ksef-dialog.inbox-mode { width:min(720px,calc(100vw - 32px)); } .ksef-dialog .drawer-heading { padding:16px 24px; } .ksef-dialog .drawer-heading p { font-size:12px; color:var(--workspace-caption); } .ksef-dialog .drawer-heading .icon-btn { width:32px; height:32px; padding:6px; } .ksef-content { padding:20px 24px; } .ksef-dialog .ksef-preview { padding:0; background:white; border:0; } .ksef-preview .panelhead { margin-bottom:12px; } .ksef-preview .panelhead h3 { font-size:14px; margin:0; } .ksef-dialog #backKsefList { font-size:12px; height:32px; margin:0 0 12px; } .ksef-dialog #downloadKsefXml { font-size:12px; height:32px; } .ksef-dialog .ksef-invoice-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin:0 0 12px; } .ksef-invoice-heading>div { min-width:0; } .ksef-invoice-heading>div>strong { display:block; font-size:16px; line-height:22px; color:#0A0F1E; overflow-wrap:anywhere; } .ksef-invoice-heading :is(small,span) { display:block; font-size:12px; line-height:18px; color:var(--workspace-caption); margin-top:2px; } .ksef-invoice-heading .ksef-summary-amount { flex:none; font-size:22px; font-variant-numeric:tabular-nums; } #ksefPreviewSummary>details>summary { font-size:12px; margin:0; padding:4px 0; } #ksefReviewState { display:flex; align-items:center; gap:8px; font-size:12px; margin:12px 0 16px; } #ksefReviewForm .ksef-approval { height:28px; padding:4px 10px; border-radius:99px; font-size:12px; } #ksefReviewFields { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 16px; } #ksefReviewFields>div { min-width:0; } #ksefReviewFields .field-action { height:24px; padding:0; border:0; background:transparent; border-radius:4px; color:#2563EB; font-size:12px; margin-top:4px; } #ksefReviewFields .field-action:hover { text-decoration:underline; } #ksefReviewExtras { margin-top:12px; padding-inline:12px; } #ksefReviewExtras summary { font-size:12px; padding-block:10px; } #ksefReviewExtras label { display:none; } #ksefReviewExtras>div { padding-bottom:12px; } #ksefPaymentPolicy,#ksefReviewNote,#ksefPreviewNotice { font-size:12px; line-height:18px; margin:12px 0; color:var(--workspace-caption); } #ksefReviewNote:empty,#ksefPreviewNotice:empty,#ksefPaymentPolicy:empty { display:none; } #ksefPreviewNotice:not(:empty) { padding:10px 12px; background:#FFF7ED; border-left:3px solid #D97706; border-radius:6px; color:#92400E; } #ksefReviewForm .ksef-confirm { font-size:12px; line-height:18px; margin:12px 0; } #ksefReviewForm .form-actions { justify-content:flex-end; gap:8px; margin-top:16px; } #ksefReviewForm .form-actions .btn { padding-inline:12px; } #cancelKsefReview { margin-right:auto; } #ksefReviewForm #approveKsefInvoice { order:4; } #ksefReviewForm #saveKsefInvoiceDate { order:3; } #ksefReviewForm #rejectKsefInvoice { order:2; } .invoice-source { margin-top:12px; } .invoice-source>dl { padding:12px; background:#F8FAFC; border-radius:8px; } .invoice-source dt { font-size:12px; color:var(--workspace-caption); } .invoice-source dd { font-size:13px; } .invoice-source details { border-bottom:1px solid var(--line); } .invoice-source details summary { color:var(--workspace-caption); font-size:12px; padding:12px 0; } .invoice-source .copy-feedback:empty { display:none; } .transaction-drawer .detail-nip { margin:0 0 10px; font-size:12px; color:var(--workspace-caption); } .transaction-drawer .drawer-footer .btn { height:40px; font-size:13px; border-radius:8px; } #dashboard .chart-axis { font-size:13px; } #dashboard .chart-axis-title { font-size:12px; } .visually-hidden { position:absolute!important; width:1px!important; height:1px!important; margin:-1px!important; padding:0!important; overflow:hidden!important; clip-path:inset(50%); white-space:nowrap; border:0; } .ksef-dialog .ksef-preview #backKsefList { margin:0; } .ksef-preview .panelhead { justify-content:space-between; min-height:32px; } #reconcileDialog h2 { font-size:20px; } /* Compact document decisions: native selection and keyboard behavior are retained. */ #transactions :is(th,td)[data-col=ksefApproval] { width:60px; min-width:60px; max-width:60px; text-align:center; white-space:nowrap; } #transactions td[data-col=ksefApproval] .ksef-document-button { display:inline-flex; width:32px; height:32px; padding:0; vertical-align:middle; } #transactions td[data-col=ksefApproval] :is(.ksef-icon-status,.ksef-icon-control) { display:inline-flex; position:relative; align-items:center; justify-content:center; width:32px; min-width:32px; max-width:32px; height:32px; min-height:32px; padding:5px; border:1px solid transparent; border-radius:6px; background:transparent; vertical-align:middle; } #transactions :is(.ksef-icon-status,.ksef-icon-control).pending { color:#64748B; } #transactions :is(.ksef-icon-status,.ksef-icon-control).approved { color:#00865C; } #transactions :is(.ksef-icon-status,.ksef-icon-control).rejected { color:#BE123C; } #transactions :is(.ksef-icon-status,.ksef-icon-control).attention { color:#C66A0A; } #transactions .ksef-icon-control select.inline-field { position:absolute; inset:0; z-index:1; width:32px; min-width:32px; max-width:32px; height:32px; opacity:0; cursor:pointer; font-size:13px; } #transactions .ksef-icon-control select option { color:#1B2A41; background:white; font-size:13px; } #transactions .ksef-icon-control>.ui-icon { position:static; transform:none; width:20px; height:20px; } #transactions .ksef-icon-status>.ui-icon { width:20px; height:20px; } #transactions .ksef-icon-control:hover,#transactions .ksef-document-button:hover .ksef-icon-status { background:#EFF6FF; border-color:#CBD5E1; } #transactions .ksef-icon-control:focus-within { outline:2px solid #3B82F6; outline-offset:2px; } /* The balance is a primary decision value; retain complete amounts and currency. */ #transactions .table th[data-col=balance_after] { color:#1B2A41; background:#E9EDF2; font-weight:700; padding-inline:10px; } #transactions .table th[data-col=balance_after][aria-sort]:not([aria-sort=none]) { color:#2563EB; } #transactions .table td[data-col=balance_after] { min-width:142px; padding-inline:10px; background:#F3F4F6; } #transactions .table tr:hover td[data-col=balance_after] { background:#EBEEF2; } #transactions .table tr:has(input[data-select-tx]:checked) td[data-col=balance_after] { background:#EAF3FF; } #transactions .tx-balance { font-size:14px; line-height:20px; font-weight:700; color:#1B2A41; font-variant-numeric:tabular-nums; white-space:nowrap; } #transactions .tx-balance.is-negative { color:#BE123C; } #transactions .tx-account-balance { display:flex; align-items:baseline; justify-content:flex-end; gap:5px; margin-top:2px; font-size:11px; line-height:16px; color:#52657F; white-space:nowrap; } #transactions .tx-account-balance strong { font-size:12px; font-weight:650; color:#1B2A41; font-variant-numeric:tabular-nums; } #transactions .tx-account-balance strong.is-negative { color:#BE123C; } /* Transfers share the ordinary row geometry; each account appears once. */ #transactions .tx-transfer-target,#transactions .tx-transfer-account { display:flex; align-items:center; gap:5px; white-space:nowrap; } #transactions .tx-transfer-account { height:32px; box-sizing:border-box; } #transactions .transfer-prefix { flex:none; color:#52657F; font-weight:400; } #transactions .transfer-account-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #transactions .tx-transfer-received { display:block; margin-top:2px; font-size:11px; line-height:16px; color:#52657F; font-variant-numeric:tabular-nums; white-space:nowrap; } .detail-transfer-route { display:grid; grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr); align-items:stretch; gap:12px; margin-top:16px; } .detail-transfer-route>.ui-icon { width:16px; height:16px; margin-top:25px; color:#94A3B8; transform:rotate(90deg); } .detail-transfer-leg { display:flex; flex-direction:column; gap:6px; min-width:0; } .detail-transfer-leg>span { font-size:12px; line-height:16px; color:var(--workspace-caption); } .detail-transfer-leg>strong { flex:1; color:#1B2A41; font-size:13px; line-height:20px; font-weight:500; overflow-wrap:anywhere; } .detail-transfer-leg>b { color:#1B2A41; font-size:17px; line-height:24px; font-weight:700; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; } /* A compact 24px badge inside the unchanged 32px payment-status hit area. */ #transactions .status-wrap { position:relative; isolation:isolate; align-items:center; width:110px; min-width:110px; height:32px; } #transactions .status-wrap::before { content:""; position:absolute; inset:4px 0; border-radius:99px; z-index:-1; pointer-events:none; } #transactions .status-wrap.is-planned::before { background:#FFF0DA; } #transactions .status-wrap.is-paid::before { background:#DDF6EA; } #transactions td[data-col=status] .status-wrap>.pill,#transactions td[data-col=status] .status-wrap .inline-select,#transactions td[data-col=status] .status-wrap .inline-select select.inline-field { width:110px; min-width:110px; max-width:110px; font-size:11px; font-weight:500; } #transactions td[data-col=status] .status-wrap>.pill { height:24px; min-height:24px; line-height:16px; padding:4px 10px; } #transactions td[data-col=status] .status-wrap .inline-select { height:32px; min-height:32px; padding:0; } #transactions .status-wrap .inline-select select.inline-field { height:32px; min-height:32px; padding:0 22px 0 10px; line-height:20px; } #transactions .status-wrap.is-planned .inline-select select.inline-field,#transactions .status-wrap.is-planned>.pill,#transactions .status-wrap.is-paid>.pill { background:transparent; } /* Checkbox selection supports any combination, including all except paid. */ #transactions .filter-multiselect { min-width:0; } #transactions .filter-multiselect>summary { display:flex; align-items:center; justify-content:space-between; gap:8px; height:40px; padding:8px 12px; border:1px solid var(--line); border-radius:8px; cursor:pointer; list-style:none; font-size:13px; background:#fff; } #transactions .filter-multiselect>summary::-webkit-details-marker { display:none; } #transactions .filter-multiselect>summary span { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #transactions .filter-multiselect>summary .ui-icon { width:16px; height:16px; flex:none; } #transactions .filter-multiselect[open]>summary { border-color:#3B82F6; } #transactions .filter-multiselect>summary:focus-visible { outline:2px solid #93C5FD; outline-offset:2px; } #transactions .filter-options { margin-top:6px; border:1px solid var(--line); border-radius:8px; padding:6px; background:#F8FBFF; } #transactions .filter-selection-actions { display:flex; justify-content:space-between; gap:4px; border-bottom:1px solid var(--line); padding-bottom:4px; margin-bottom:4px; } #transactions .filter-selection-actions .btn { font-size:11px; padding:5px; border:0; background:transparent; color:#2563EB; height:auto; } #transactions .filter-options label { display:flex; align-items:center; gap:8px; padding:7px 5px; color:#1B2A41; font-size:12px; line-height:18px; cursor:pointer; } #transactions .filter-options label:hover { background:#EAF3FF; border-radius:4px; } #transactions .filter-options input { flex:none; margin:0; } /* Read-only History: fixed heading/period, compact KPIs, independently scrolling rows. */ .main:has(#history.active) { display:flex; flex-direction:column; height:calc(100dvh - var(--header-height)); min-height:0; padding-bottom:12px; } .main:has(#history.active)>.top { flex:none; min-height:54px; margin-bottom:12px; } .main:has(#history.active)>.top h1 { font-size:28px; letter-spacing:-.7px; } .main:has(#history.active)>.top p { font-size:13px; color:var(--workspace-caption); } #history.section.active { display:flex; flex:1; flex-direction:column; min-height:0; gap:12px; } #history .history-toolbar { flex:none; display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:16px; margin:0; } .history-toolbar>label { font-size:12px; color:var(--workspace-caption); } .history-toolbar .select-control { width:195px; } .history-toolbar :is(.input,.select,.btn) { height:40px; font-size:13px; } #historyRange { display:flex; align-items:center; gap:8px; } #historyRange .input { width:145px; min-width:0; } #historyPeriodLabel { margin-left:auto; font-variant-numeric:tabular-nums; white-space:nowrap; } #history .history-kpis { flex:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } #history .history-kpis .card { padding:16px 20px; margin:0; } #history .history-kpis .value { font-size:25px; margin-top:5px; } #history :is(#historyError,#historyWarning) { flex:none; margin:0; line-height:1.5; } #historyWarning { color:#9A6700; } #historyTableWrap { flex:1; min-height:100px; overflow:auto; border:1px solid var(--line); border-radius:var(--workspace-radius); background:#fff; scrollbar-color:#B9C8DD #F3F7FC; } #historyTable { width:100%; table-layout:fixed; border-collapse:separate; border-spacing:0; font-size:13px; } #historyTable th { position:sticky; top:0; z-index:1; height:52px; padding:10px; background:#F4F9FE; color:var(--workspace-caption); font-size:12px; font-weight:550; border-bottom:1px solid var(--line); } #historyTable th:nth-child(1) { width:110px; }#historyTable th:nth-child(2) { width:140px; }#historyTable th:nth-child(4) { width:15%; }#historyTable th:nth-child(5) { width:155px; }#historyTable th:nth-child(6) { width:16%; }#historyTable th:last-child { width:44px; } #historyTable td:last-child { padding-inline:6px; } #historyTable td { height:54px; padding:7px 10px; border-bottom:1px solid #E8EEF6; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #historyTable tr:last-child td { border-bottom:0; } #historyTable .history-party span { display:block; overflow:hidden; text-overflow:ellipsis; font-weight:600; } #historyTable .history-money { text-align:right; font-variant-numeric:tabular-nums; overflow:visible; } #historyTable td.history-money { font-weight:650; } #historyTable .icon-btn { width:28px; height:28px; min-height:28px; padding:5px; border:0; background:transparent; color:#64748B; } #historyTable .icon-btn .ui-icon { width:18px; height:18px; } #historyTable tr:focus-visible { outline:2px solid #3B82F6; outline-offset:-2px; } #historyTable .history-empty { text-align:center; color:var(--workspace-caption); height:100px; } .history-report-warning { display:inline-flex; color:#B76E00; margin-right:4px; vertical-align:middle; } .history-report-warning .ui-icon { width:16px; height:16px; } #history .transaction-footer { flex:none; margin:0; } /* Bank history follows the existing desktop form sizing and palette. */ .bank-import-dialog.finance-dialog{width:min(1040px,calc(100vw - 64px));max-width:1040px;padding:0;overflow:auto} .bank-import-dialog .drawer-heading{position:sticky;top:0;z-index:2;background:white;border-bottom:1px solid #E2E8F0;padding:20px 24px;display:flex;justify-content:space-between;align-items:center} .bank-import-dialog .drawer-heading h2{margin:0}.bank-import-dialog .drawer-heading p{margin:4px 0 0} .bank-import-content{padding:20px 24px}.bank-import-steps{display:flex;gap:28px;list-style:none;padding:0;margin:0 0 20px;font-size:13px;color:#64748B} .bank-import-steps [aria-current=step]{color:#1B2A41;font-weight:650;border-bottom:2px solid #3B82F6;padding-bottom:8px} .bank-file-picker{display:grid;gap:8px;padding:18px;border:1px dashed #94A3B8;background:#F8FAFC;border-radius:10px}.bank-file-picker label{color:#1B2A41!important;font-weight:600} .bank-file-picker input{font:inherit;font-size:13px}.bank-import-dialog .bank-import-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:16px 0} .bank-import-dialog .bank-mapping-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:12px 0} .bank-import-dialog .bank-balance-confirm{display:flex;gap:10px;align-items:flex-start;margin:20px 0;font-size:12px;line-height:18px;color:#475569}.bank-balance-confirm input{margin:2px 0;flex:none} .bank-header-control{display:flex;align-items:center;gap:12px;padding-top:12px}.bank-header-control .input{width:80px} .bank-import-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;border-top:1px solid #E2E8F0;margin-top:20px;padding-top:16px}.bank-import-actions .small{flex:1} .bank-review-summary{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;padding:14px 16px;border:1px solid #E2E8F0;border-radius:10px;background:#F8FAFC;margin-bottom:12px} .bank-review-summary>div{display:flex;flex-direction:column;gap:4px;font-size:13px}.bank-review-summary span{font-size:12px;color:#64748B} .bank-review-scroll{max-height:380px;overflow:auto;border:1px solid #E2E8F0;border-radius:10px}.bank-review-table{width:100%;min-width:0;table-layout:fixed;font-size:13px} .bank-review-table thead th{position:sticky;top:0;z-index:1;background:#F1F5F9;font-size:12px;padding:10px 12px} .bank-review-table th:nth-child(1){width:100px}.bank-review-table th:nth-child(3){width:125px;text-align:right}.bank-review-table th:nth-child(4){width:350px} .bank-review-table td{padding:10px 12px;vertical-align:top;white-space:normal;border-bottom:1px solid #E2E8F0}.bank-row-title{display:block;color:#64748B;font-size:12px;line-height:17px;overflow-wrap:anywhere;max-height:51px;overflow:hidden} .bank-review-table .select{width:100%;max-width:100%;height:34px}.bank-row-message{display:block;font-size:12px;line-height:17px;margin-top:5px}.bank-row-error{background:#fff8f6} .bank-row-amount{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap!important;font-weight:600}.bank-row-rate{font-size:11px;margin-top:7px;color:#64748B}.bank-row-rate .input{margin-top:6px;width:150px} .bank-history-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid #E2E8F0;padding-top:10px;margin-top:12px}.bank-history-footer .btn{height:32px;padding:0 10px;font-size:12px;flex-shrink:0}.bank-history-footer .small{font-size:11px} .bank-name-correction{margin-top:8px;font-size:12px;color:#475569}.bank-name-correction summary{cursor:pointer;padding:3px 0}.bank-name-correction label{margin:7px 0 4px!important}.bank-name-controls{display:flex;gap:6px;align-items:center}.bank-name-controls .input{min-width:0;font-size:12px;height:34px}.bank-name-controls .btn{flex:none;height:34px;padding:0 8px;font-size:11px;white-space:nowrap}.bank-name-correction .small{display:block;white-space:normal;overflow-wrap:anywhere} /* Revolut wallets share a bank group; amounts keep their own currency. */ .wallet-account{align-content:start}.wallet-balances{grid-column:1/-1;display:grid;gap:7px;margin-top:4px}.wallet-balances>div{display:flex;justify-content:space-between;gap:12px}.wallet-balances strong{font-variant-numeric:tabular-nums;font-size:15px}.wallet-balances span{font-size:12px;color:var(--muted,#64748b)} .bank-wallet-config{border:1px solid #E2E8F0;border-radius:10px;padding:14px;margin-bottom:12px}.bank-wallet-config h3{font-size:15px;margin:0 0 12px}.bank-wallet-config h3 span{font-weight:400;margin-left:8px}.bank-wallet-rate{max-width:440px;display:grid;gap:6px;margin:12px 0}.bank-wallet-summary{display:contents}.bank-review-summary:has(.bank-wallet-summary){grid-template-columns:1fr}.bank-wallet-summary>div{border-bottom:1px solid #E2E8F0;padding-bottom:7px}.bank-review-table td>strong+.small{display:block;font-size:11px}.bank-review-summary .bank-wallet-summary{display:grid;grid-template-columns:1.3fr 1.3fr 1.2fr 1fr;gap:12px} /* Compact desktop cash overview: bank assets first, credit capacity separately. */ #dashboard .account-list {grid-auto-rows:auto;gap:8px;align-items:start} #dashboard .account {grid-template-columns:20px minmax(0,1fr) auto;min-height:58px;padding:10px;gap:8px;align-items:center} #dashboard .account-icon {grid-row:auto;grid-column:1} #dashboard .account-icon .ui-icon {width:18px;height:18px} #dashboard .account-name {grid-column:2;min-width:0} #dashboard .account-name strong {display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px} #dashboard .account-balance {grid-column:3;grid-row:1;text-align:right;white-space:nowrap;font-size:13px;font-weight:650;font-variant-numeric:tabular-nums;margin:0} #dashboard .wallet-account {display:block} .account-header {display:flex;align-items:center;gap:8px;font-size:12px} .wallet-balances {margin-top:8px;gap:7px} .wallet-balances>div {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px} .wallet-balances>div>span {overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .wallet-balances strong {font-size:13px;white-space:nowrap} #dashboard .credit-account-limits {grid-column:1/-1;padding-top:7px;gap:8px} #dashboard .credit-account-limits span {display:flex;justify-content:space-between;gap:6px;white-space:nowrap} #dashboard .credit-account-limits strong {display:inline;margin:0;font-size:11px} .account-section-label {font-size:11px;font-weight:600;color:#64748b;margin:12px 0 7px} .available-funds {padding:0 0 10px;margin-bottom:9px;border-bottom:1px solid #E2E8F0} .available-funds>div {display:flex;justify-content:space-between;gap:12px;font-size:13px} .available-funds strong {font-size:17px;font-variant-numeric:tabular-nums} .available-funds>small {display:block;margin-top:4px;font-size:11px;color:#64748b} .risk-date {background:none;border:0;padding:0;color:inherit;font:inherit;font-weight:700;text-decoration:underline;cursor:pointer} .field-with-action {display:flex;align-items:center;gap:8px;min-width:0}.field-with-action .input {flex:1;min-width:0}.field-with-action .btn {flex-shrink:0} #ksefOriginalAmount,#accountRateStatus {font-size:11px;color:#64748b;display:block;margin-top:4px} .history-toolbar #historyType {width:auto;max-width:195px}.history-toolbar {flex-wrap:wrap} #historyTable [data-history-sort] {cursor:pointer;white-space:nowrap}#historyTable .sort .ui-icon {width:13px;height:13px;vertical-align:middle} #txBody .account-tag {display:inline-flex;align-items:center;gap:5px}#txBody .account-tag .ui-icon {width:16px;height:16px} /* Weekly board: shares the table's toolbar, filters and financial snapshot. */ .transaction-layout-bar {display:flex;flex:none;align-items:center;justify-content:space-between;gap:16px;padding:0 0 12px} .transaction-layout-bar .segmented button {font-size:12px;height:32px;padding:0 16px} #weeklyScope {display:flex;align-items:center;gap:14px;font-size:11px;color:#64748B;min-width:0} .weekly-outside {font:inherit;color:#365D91;border:0;background:none;padding:3px 0;text-decoration:underline;cursor:pointer} #transactions .weekly-layout>.table-wrap,#transactions .weekly-layout>.transaction-footer,#transactions .weekly-layout>#bulkBar {display:none} #transactions .weekly-layout .transaction-toolbar {border:0;background:transparent;padding:0 0 16px;min-height:56px;gap:10px;flex-wrap:nowrap} #transactions .weekly-layout .search-control {order:0;flex:1;min-width:180px} #transactions .weekly-layout .filter-menu {order:1;flex:0 0 110px} #transactions .weekly-layout #filterBtn {min-width:0;width:100%;justify-content:center} #transactions .weekly-layout #weeklyAccountButton {order:2;min-width:120px;max-width:190px;height:40px;display:flex;align-items:center;justify-content:space-between;gap:14px;background:#fff} #weeklyAccountLabel {overflow:hidden;text-overflow:ellipsis} #transactions .weekly-layout .view-menu {order:3;margin-left:0;flex:none} #transactions .weekly-layout #viewBtn {min-width:0;height:40px} #transactions .weekly-layout .split-menu {order:4;flex:none} #transactions .weekly-layout .split-button .btn {height:40px} #transactions .weekly-layout .input {height:40px} #transactions .weekly-layout #filterBtn {height:40px} .weekly-board {display:grid;grid-template-columns:repeat(4,minmax(292px,1fr));gap:10px;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding-bottom:8px;scrollbar-color:#B9C8DD #F3F7FC} .weekly-column {display:flex;flex-direction:column;border:1px solid #DFE8F4;border-radius:10px;background:linear-gradient(#F5F9FF,#EDF4FA);padding:12px 10px;min-width:0;min-height:100%;height:max-content;box-sizing:border-box} .weekly-heading {display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:2px 3px 14px;white-space:nowrap} #transactions .weekly-heading h2 {margin:0;font-size:23px;line-height:28px;color:#0A0F1E;letter-spacing:-.7px} .weekly-range {font-size:11px;color:#42618D} .weekly-closing {font-size:11px;color:#42618D;text-align:right;font-variant-numeric:tabular-nums} .weekly-closing strong {font-size:13px;font-weight:700;display:block;margin-top:2px} .weekly-dropzone {display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px;border:1px dashed #CAD9EA;border-radius:7px;background:#EFF5FB;color:#7490B3;font-size:11px;text-align:center;line-height:16px;margin-bottom:10px;box-sizing:border-box} .weekly-cards {display:flex;flex-direction:column;gap:10px} .weekly-card {padding:13px 14px 10px;background:#fff;border:1px solid #DEE8F3;border-radius:9px;min-width:0;box-shadow:0 1px 2px #1B2A4103;transition:border-color .12s,box-shadow .12s} .weekly-card[draggable=true] {cursor:grab} .weekly-card[draggable=true]:active {cursor:grabbing} .weekly-card:hover {border-color:#B7CBE5;box-shadow:0 3px 10px #1B2A4108} .weekly-card:focus-visible,.weekly-move-button:focus-visible {outline:2px solid #3B82F6;outline-offset:2px} .weekly-party {font-size:14px;font-weight:600;color:#0A0F1E;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-bottom:9px;line-height:19px} .weekly-values {display:flex;align-items:baseline;justify-content:space-between;gap:6px;flex-wrap:wrap;font-variant-numeric:tabular-nums} .weekly-amount {font-size:18px;font-weight:650;white-space:nowrap;letter-spacing:-.25px} .weekly-after {font-size:11px;color:#647D9E;white-space:nowrap;margin-left:auto} .weekly-after strong {font-size:12px;font-weight:600} .weekly-card-footer {display:flex;align-items:center;gap:10px;margin-top:11px;min-height:26px;color:#42618D;font-size:12px} .weekly-date {display:flex;align-items:center;gap:7px;white-space:nowrap} .weekly-date .ui-icon {width:16px;height:16px} .weekly-deviation {font-size:11px;padding:4px 6px;border-radius:4px;font-variant-numeric:tabular-nums;white-space:nowrap} .weekly-deviation.later {color:#BE123C;background:#FFF0F3}.weekly-deviation.earlier {color:#13845D;background:#E9F8F0}.weekly-deviation.on-date {color:#64748B;background:#F1F5F9} .weekly-move-button {display:grid;place-items:center;margin-left:auto;width:24px;height:26px;padding:3px;border:0;background:transparent;border-radius:4px;color:#42618D;cursor:pointer} .weekly-move-button:hover {background:#EFF6FF}.weekly-move-button .ui-icon {width:16px;height:16px} .weekly-locked {margin-left:auto;display:flex;color:#94A3B8}.weekly-locked .ui-icon {width:14px;height:14px} .weekly-empty {font-size:12px;color:#7187A5;text-align:center;margin:25px 4px} .weekly-board .green {color:#13845D}.weekly-board .red {color:#E11D48}.weekly-board .neutral {color:#1B2A41} .weekly-board.is-dragging .weekly-dropzone {background:#F4F8FF;border-color:#8DB8FA} .weekly-column.is-drop-target {border-color:#93B9F8;background:#EDF5FF} .weekly-column.is-drop-target .weekly-dropzone {border:2px dashed #3B82F6;color:#2563EB;background:#fff;box-shadow:0 0 0 3px #DBEAFE} .weekly-card.is-dragging {opacity:.45;border-color:#3B82F6;transform:rotate(-2deg);box-shadow:0 12px 22px #1B2A4126} .weekly-move-dialog {width:350px;max-width:calc(100vw - 40px);border:1px solid #DFE8F4;border-radius:12px;padding:22px 20px;color:#1B2A41;box-shadow:0 14px 45px #1B2A4133} .weekly-move-dialog::backdrop {background:#0A0F1E1A} .weekly-move-dialog h2 {font-size:15px;line-height:22px;margin:0 0 8px;color:#0A0F1E} #weeklyMoveParty {font-size:12px;margin:0 0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#64748B} #weeklyMoveRange {font-size:12px;line-height:18px;margin:12px 0;color:#42618D} #weeklyMoveWeekField {display:block;font-size:12px}.weekly-move-dialog .select {margin-top:5px} .weekly-move-dialog .input,.weekly-move-dialog .select {width:100%;height:42px;font-size:14px;box-sizing:border-box} .weekly-move-dialog .actions {display:flex;justify-content:flex-end;gap:10px;margin-top:18px;flex-wrap:nowrap} .weekly-move-dialog .btn {height:40px;font-size:12px;flex:1}.weekly-move-dialog button:disabled {opacity:.5;cursor:not-allowed} #weeklyMoveError {font-size:12px;line-height:18px;margin:10px 0 0} .weekly-move-date .sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} @media(min-width:1700px){.weekly-closing strong{display:inline;margin:0}.weekly-range{font-size:12px}.weekly-after{font-size:12px}.weekly-after strong{font-size:13px}} @media(max-width:1100px){#transactions .weekly-layout .transaction-toolbar{flex-wrap:wrap}#transactions .weekly-layout .search-control{flex-basis:250px}.weekly-board{grid-template-columns:repeat(4,minmax(300px,1fr))}#weeklyScope{font-size:10px;gap:8px}} /* Working-day board and compact grouped accounts. */ .daily-board {grid-template-columns:repeat(5,minmax(240px,1fr))} .daily-board .weekly-heading {grid-template-columns:auto 1fr;gap:5px 10px} .daily-board .weekly-closing {grid-column:1/-1;display:flex;justify-content:space-between;padding-top:4px} .daily-board .weekly-closing strong {margin:0} .daily-board .weekly-card {padding:12px 11px 9px} .daily-board .weekly-values {gap:8px} .daily-board .weekly-after {flex-basis:100%;margin:0} #dailyWeekNav {display:flex;align-items:center;gap:10px;font-size:12px;color:#42618D;white-space:nowrap} #dailyWeekNav.hidden {display:none} #dailyWeekNav .btn {height:28px;width:28px;padding:5px} #dailyWeekNav .ui-icon {width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8} #weeklyMoveSuggestion {font-size:12px;line-height:18px;color:#147757;margin:12px 0 0} #weeklyMoveSuggestion:empty {display:none} #weeklyMoveSuggestion.is-warning {color:#9A4D0B;background:#FFF7E8;border:1px solid #F5D5A5;border-radius:6px;padding:10px} .weekend-marker {color:#D97706;display:inline-flex;vertical-align:middle;flex:none;cursor:help} .weekend-marker .ui-icon {width:15px;height:15px} .weekend-marker:focus-visible {outline:2px solid #3B82F6;outline-offset:2px} .predicted-date-cell {display:inline-flex;align-items:center;gap:5px} .account-summary-currency {display:flex;align-items:center;justify-content:flex-end;gap:8px;color:#64748B;font-size:11px;margin-bottom:8px} .account-summary-currency .select {width:75px;min-height:28px;height:28px;font-size:12px;padding:3px 8px} .liquidity-summary {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:12px 0 16px;border-bottom:1px solid #E2E8F0;margin-bottom:14px} .liquidity-summary>div {min-width:0}.liquidity-summary span {display:block;font-size:11px;color:#64748B;margin-bottom:5px} .liquidity-summary strong {font-size:clamp(13px,1.1vw,17px);font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:650} #dashboard .account.bank-account-group {display:block;padding:0;min-width:0;min-height:0;border:1px solid #E2E8F0;border-radius:9px;overflow:hidden;background:#fff} .bank-group-header {display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;background:#F4F7FB;border-bottom:1px solid #E2E8F0;font-size:12px} .bank-group-header>span {display:flex;align-items:center;gap:7px;min-width:0}.bank-group-header>strong {white-space:nowrap;font-variant-numeric:tabular-nums} .bank-group-header .ui-icon {width:16px;height:16px;color:#52719B;flex:none} .bank-group-rows>div {display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;font-size:12px} .bank-group-rows>div+div {border-top:1px solid #EDF2F7} .bank-group-rows>div>span {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bank-group-rows small {font-size:10px;color:#94A3B8;margin-left:6px}.bank-group-rows strong {white-space:nowrap;font-variant-numeric:tabular-nums;font-size:12px} @media(max-width:1100px){.daily-board{grid-template-columns:repeat(5,minmax(260px,1fr))}} .demo-badge {font-size:11px;font-weight:600;letter-spacing:.2px;background:#FEF3C7;color:#92400E;padding:5px 9px;border-radius:5px;margin-right:12px} .bank-group-header>span strong {overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Available funds keep the same hierarchy and footprint as the other KPIs. */ #dashboard .liquidity-kpi {position:relative} #dashboard .liquidity-kpi .kpi-content {width:100%;min-width:0} #dashboard .liquidity-kpi .label {padding-right:60px} #dashboard .liquidity-currency {position:absolute;right:12px;top:14px;width:60px;min-height:28px;height:28px;padding:3px 5px;font-size:11px;border-color:#E2E8F0} #dashboard .liquidity-breakdown {display:grid;gap:5px} #dashboard .liquidity-breakdown>div {display:flex;justify-content:space-between;align-items:baseline;gap:6px} #dashboard .liquidity-breakdown strong {display:inline;white-space:nowrap;font-variant-numeric:tabular-nums;font-size:13px} #dashboard .liquidity-breakdown strong.red {color:var(--red)} .chart-negative-label {fill:#BE123C;font-size:11px;font-weight:700;paint-order:stroke;stroke:white;stroke-width:3px;stroke-linejoin:round} .chart-zero-balance {stroke:#E11D48;stroke-width:1.3;stroke-dasharray:5 4} .chart-negative-line {stroke-linecap:round} .ksef-not-required {color:#94A3B8;display:inline-block;min-width:26px;text-align:center} .transfer-rate-row {display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:end} .transfer-rate-row .small {margin:0;padding-bottom:7px;line-height:1.45} .transfer-rate-row.hidden {display:none} /* Dashboard and shared transaction toolbar — 14.10.2026. */ #periodMinimum {border-top:1px solid #E2E8F0;padding-top:9px;margin-top:12px} #periodMinimum.minimum-warning {border-top:1px solid #E2E8F0;border-radius:0;background:transparent;padding:9px 0 0;color:#617BA0} #periodMinimum.minimum-warning strong {display:block;background:#FFF0F3;border-radius:5px;padding:4px 6px;margin-top:3px;color:#B91C3D} #dashboard #accounts .account-list {grid-template-columns:minmax(0,1fr)} #dashboard .payment-predicted {display:block;font-size:10px;color:#94A3B8;font-weight:400;white-space:nowrap;line-height:1.5} #dashboard #nearest td {font-size:12px;padding:9px 12px;border-bottom:1px solid #EDF2F7} #dashboard #nearest .payment-link strong {font-size:12px;font-weight:500} #dashboard .payment-date {font-size:12px;font-weight:500} #dashboard #weeksChart {overflow:auto;max-width:100%;scrollbar-gutter:stable} @media(min-width:761px){ #transactions .transaction-toolbar {border:0;background:transparent;padding:0 0 16px;min-height:56px;gap:10px;flex-wrap:nowrap} #transactions .search-control {order:0;flex:1;min-width:180px} #transactions .filter-menu {order:1;flex:0 0 110px} #transactions #filterBtn {min-width:0;width:100%;justify-content:center;height:40px} #transactions #weeklyAccountButton {order:2;min-width:120px;max-width:190px;height:40px;display:flex;align-items:center;justify-content:space-between;gap:14px;background:#fff} #transactions .view-menu {order:4;margin-left:0;flex:none} #transactions #viewBtn {min-width:0;height:40px} #transactions .split-menu {order:-1;flex:none} #transactions .split-button .btn,#transactions .input {height:40px} } .weekly-quick-actions {display:inline-flex;align-items:center;gap:4px;margin-left:auto} .weekly-quick-actions button {width:28px;height:28px;padding:5px;border:1px solid #E2E8F0;border-radius:6px;background:#fff;color:#52719B;cursor:pointer;display:inline-flex;align-items:center;justify-content:center} .weekly-quick-actions button:hover {border-color:#3B82F6;color:#2563EB;background:#EFF6FF} .weekly-quick-actions .ui-icon {width:16px;height:16px} .weekly-card.is-drop-before {border-top:3px solid #3B82F6} .weekly-card.is-drop-after {border-bottom:3px solid #3B82F6} .automatic-date-marker {color:#D97706;display:inline-flex;align-items:center;cursor:help;flex:none} .automatic-date-marker .ui-icon {width:15px;height:15px} #transactions .weekly-card.protected-overdue,#txBody tr.protected-overdue td {background:#FFF0F3} #transactions .weekly-card.protected-overdue {border-color:#F3B9C8} @media(min-width:761px){ .side {width:84px;flex-basis:84px;padding:8px 6px} .side .nav button {font-size:11px;min-height:68px;gap:6px;padding:10px 2px;margin-bottom:6px} .side .nav button .ui-icon {width:22px;height:22px} } .weekly-card[draggable="true"]{user-select:none;-webkit-user-select:none} /* Calendar weeks and compact account disclosures. */ #dashboard .bank-group-header{display:grid;grid-template-columns:minmax(0,1fr) auto 16px;cursor:pointer;list-style:none;border-bottom:0} #dashboard details[open]>.bank-group-header{border-bottom:1px solid #E2E8F0} #dashboard summary::-webkit-details-marker{display:none} #dashboard summary>.ui-icon:last-child{width:16px;height:16px;color:#64748B;transition:transform .15s} #dashboard details[open]>summary>.ui-icon:last-child{transform:rotate(180deg)} #dashboard summary:focus-visible{outline:2px solid #3B82F6;outline-offset:-2px} #dashboard .account.credit-account{display:block;padding:0} #dashboard .credit-account-summary{display:grid;grid-template-columns:22px minmax(0,1fr) auto 16px;gap:10px;align-items:center;list-style:none;padding:10px 12px;cursor:pointer} #dashboard .credit-account-summary .account-icon,#dashboard .credit-account-summary .account-name,#dashboard .credit-account-summary .account-balance{grid-area:auto} #dashboard .credit-account-summary .account-balance{margin:0;font-size:13px;white-space:nowrap} #dashboard .credit-account-summary .account-name strong{font-size:12px} #dashboard .credit-account-summary .account-name small{font-size:10px} #dashboard .credit-account-limits{margin:0 12px;padding:10px 0} @media(min-width:761px){ .weekly-card-actions{display:inline-flex;align-items:center;gap:4px;margin-left:auto;flex:none} .weekly-card-actions .weekly-quick-actions{margin:0} .weekly-card-actions .weekly-move-button{margin:0;width:28px;height:28px;border:1px solid #E2E8F0;border-radius:6px;background:#fff;flex:none} .weekly-card-actions .weekly-locked{margin:0;width:28px;height:28px;justify-content:center;align-items:center} .weekly-card-footer{gap:6px;flex-wrap:wrap} } @media(max-width:760px){.weekly-card-actions{display:contents}} /* Preserve the supplied raster mark inside its tight SVG viewport. */ .flux-logo { object-fit:contain; object-position:left center; } /* KPI scopes: current liquidity, selected forecast, and full calendar month. */ #dashboard .kpi-scope {display:flex;flex-wrap:wrap;gap:0 5px;margin-top:6px;min-height:16px;font-size:11px;line-height:16px;color:#526C91;font-variant-numeric:tabular-nums} #dashboard .kpi-scope>span:last-child,#dashboard .kpi-dates {white-space:nowrap} #dashboard .kpi-note {display:block;margin-top:3px;font-size:11px;line-height:16px;color:#64748B;font-weight:400} #dashboard .kpi-month-heading {display:flex;flex-wrap:wrap;gap:0 6px;font-size:11px;line-height:16px} #dashboard .kpi-month-heading>span:first-child {font-weight:600;color:#526C91} #dashboard .kpi-month .kpi-note {margin-top:1px;font-size:10px} #dashboard .liquidity-breakdown>div {flex-wrap:wrap;gap:0 6px} #dashboard .liquidity-breakdown strong {margin-left:auto} /* A shared chart frame: fixed axes, horizontal scrolling only inside the plot. */ #dashboard .chart-grid>.panel {height:auto;min-height:460px} #dashboard .chart-grid .panelhead {height:94px;min-height:94px;align-items:flex-start;flex-wrap:nowrap} #dashboard :is(#weeksChart,#monthsChart) {overflow:visible;scrollbar-gutter:auto;gap:0;position:relative} #dashboard .chart-legend {min-height:18px;align-content:flex-start;gap:6px 12px;font-size:11px;justify-content:flex-end} .chart-axis-headings {display:flex;justify-content:space-between;font-size:10px;font-weight:600;color:#647B9C;line-height:16px} .chart-axis-headings>span:last-child {color:#2563EB} .chart-frame {display:grid;grid-template-columns:58px minmax(0,1fr) 58px;position:relative;flex:none;height:196px;min-width:0} .chart-plot-scroll {overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-color:#B9C8DD #F3F7FC;min-width:0;height:196px} #dashboard .chart-frame .financial-chart {width:100%;height:180px;min-height:180px;max-height:180px;flex:none;overflow:hidden} .chart-fixed-axis {width:58px;height:180px;overflow:visible} .chart-frame .chart-axis {font-size:11px} .chart-today {font-weight:700;fill:#1D4ED8} .chart-minimum {fill:none;stroke:#E11D48;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} #dashboard .chart-values {min-height:36px;padding:7px 9px;font-size:11px;margin-top:2px;line-height:17px} #dashboard .chart-help {margin:3px 0 0;font-size:10px;line-height:14px;color:#64748B} @media(max-width:760px){ #dashboard .chart-grid>.panel {height:auto;min-height:0} #dashboard .chart-grid .panelhead {height:auto;min-height:0;flex-wrap:wrap} .chart-frame {grid-template-columns:42px minmax(0,1fr) 42px} .chart-fixed-axis {width:42px} #dashboard .chart-frame .financial-chart {min-width:0} } .repeat-payment {border-top:1px solid #E2E8F0;padding-top:12px} #txForm .repeat-toggle {display:flex;align-items:center;gap:8px;color:#1B2A41;margin:0} #txForm .repeat-toggle input {flex:none;margin:0} #txRecurringOptions {margin-top:12px;gap:12px} #txRecurringOptions p,#txRecurringUnavailable {margin:0;font-size:11px;line-height:16px} #txRecurringUnavailable {margin-top:6px} .table-comment-text {font:inherit;color:#526F99;background:none;border:0;padding:4px 0;text-align:left;cursor:pointer;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .table-comment-text:hover {color:#2563EB;text-decoration:underline} .tx-comment-button.has-comment {color:#2563EB;background:#EFF6FF} .comment-dialog {width:440px;max-width:calc(100vw - 24px)} .comment-dialog textarea.input {display:block;width:100%;height:auto;min-height:96px;resize:vertical;font:inherit;font-size:13px;padding:10px;line-height:1.5} .comment-dialog .actions {justify-content:flex-end;margin-top:12px} /* Approved coin-and-flow mubu mark; retain the source colors and aspect ratio. */ #loginModal .login-brand {margin:0 0 12px;padding:0;line-height:0} .mubu-login-logo {display:block;width:144px;height:auto;max-width:100%;object-fit:contain} /* Quiet, native account balance; the company total stays on the Dashboard. */ #transactions .tx-company-balance{display:block;font-size:14px;line-height:20px;font-weight:700;color:#0A0F1E;white-space:nowrap;font-variant-numeric:tabular-nums} #transactions .tx-account-balance{font-size:12px;line-height:17px;font-weight:400;color:#64748B;white-space:nowrap;font-variant-numeric:tabular-nums} #transactions .tx-company-balance.is-negative,#transactions .tx-account-balance.is-negative{color:var(--red)} #transactions .table td[data-col=balance_after]{min-width:112px} #transactions td[data-col=balance_after]:has(.tx-funding-hint){position:relative;padding-left:32px;min-width:142px} #transactions .tx-funding-hint{position:absolute;left:4px;bottom:8px;display:inline-flex;align-items:center;justify-content:center;width:24px;height:22px;padding:2px;border:1px solid #CBD5E1;border-radius:5px;background:#fff;color:#2563EB;cursor:pointer} #transactions .tx-funding-hint .ui-icon{width:16px;height:16px} #transactions .tx-funding-hint:hover,#transactions .tx-funding-hint:focus-visible{background:#DBEAFE;border-color:#3B82F6} .mubu-tooltip{white-space:pre-line} #transactionHorizon{margin-bottom:8px;width:100%} .mubu-tooltip{position:fixed;z-index:1000;pointer-events:none;max-width:min(340px,calc(100vw - 16px));padding:8px 10px;background:#1B2A41;color:#fff;border-radius:6px;font-size:12px;line-height:1.45;box-shadow:0 4px 16px #0A0F1E26} .bulk-ksef-results{list-style:none;padding:0;max-height:55vh;overflow:auto} #bulkReconciliation .bulk-payment-decision{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,190px);align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #E2E8F0} .bulk-payment-decision strong,.bulk-payment-decision small{display:block}.bulk-payment-decision small{color:#64748B;font-size:12px;margin-top:4px} #bulkReconciliation{max-height:40vh;overflow:auto}#bulkReconciliation p{margin:0 0 6px} @media(max-width:600px){#bulkReconciliation .bulk-payment-decision{grid-template-columns:1fr;gap:6px}} .bulk-ksef-results li{display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding:12px 0;border-bottom:1px solid #E2E8F0} .bulk-ksef-results li span{grid-column:1;font-size:13px;color:#64748B}.bulk-ksef-results li .btn{grid-column:2;grid-row:1/3} /* Settings: scoped presentation, shared editors and financial rules. */ #settings [hidden]{display:none!important} #settings .settings-shell{display:grid;grid-template-columns:205px minmax(0,1fr);gap:22px;align-items:start} #settings .settings-nav{display:flex;flex-direction:column;gap:3px;background:#fff;border:1px solid #DCE4EF;border-radius:12px;padding:10px;position:sticky;top:100px} #settings .settings-nav-label{font-size:10px;letter-spacing:.1em;color:var(--muted);padding:8px 10px} #settings .settings-link{display:flex;align-items:center;gap:10px;border:0;border-radius:8px;padding:11px 10px;text-align:left;color:#62738E;background:transparent;font-size:13px;cursor:pointer;white-space:nowrap} #settings .settings-link:hover{background:#F5F8FD}#settings .settings-link[aria-selected=true]{background:#E8F0FF;color:#205ED0;font-weight:600} #settings .settings-link .ui-icon{width:18px;height:18px;flex-shrink:0} #settings .settings-content,#settings .settings-pane{min-width:0} #settings .settings-section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin:2px 0 18px} #settings .settings-section-head h2{font-size:19px;line-height:1.3;letter-spacing:-.3px;margin:0}#settings .settings-section-head p{margin:5px 0 0} #settings .settings-group{background:#fff;border:1px solid #DCE4EF;border-radius:11px;margin:0 0 14px;min-width:0} #settings .settings-group>summary{display:flex;align-items:center;gap:10px;padding:15px 17px;font-size:14px;font-weight:600;cursor:pointer;list-style:none;color:#1B2A41;border-radius:11px} #settings .settings-group>summary::-webkit-details-marker{display:none} #settings .settings-group>summary::after{content:'';width:7px;height:7px;border-right:1.7px solid #71829C;border-bottom:1.7px solid #71829C;transform:rotate(-45deg);margin-left:auto;margin-right:3px;flex-shrink:0} #settings .settings-group[open]>summary::after{transform:rotate(45deg)}#settings .settings-group[open]>summary{border-bottom:1px solid #E2E8F0;border-radius:11px 11px 0 0} #settings summary:focus-visible,#settings .settings-link:focus-visible{outline:3px solid #93C5FD;outline-offset:2px} #settings .settings-group-body{padding:16px;min-width:0}#settings .settings-count{font-size:12px;color:#62738E;font-weight:400} #settings .settings-subgroup:last-child{margin-bottom:0}#settings .settings-subgroup>.settings-group-body{padding:0}#settings .settings-subgroup>summary{background:#F8FAFD;padding:12px 15px;font-size:13px} #settings .settings-account-row{display:grid;grid-template-columns:minmax(130px,1fr) 40px minmax(100px,.65fr) auto;align-items:center;gap:14px;padding:12px 14px;border-bottom:1px solid #EDF1F6} #settings .settings-account-row:last-child,#settings .settings-contractor-row:last-child{border:0} #settings .settings-row-name{min-width:0}#settings .settings-row-name strong{display:block;font-size:13px;font-weight:600;overflow-wrap:anywhere} #settings .settings-row-name small,#settings .settings-inline .small{display:block;color:#62738E;font-size:12px;margin-top:4px} #settings .settings-currency{font-size:12px;color:#62738E}#settings .settings-balance{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;font-weight:500;font-size:13px} #settings .settings-row-actions{display:flex;gap:5px}#settings .settings-row-actions .btn{padding:7px 9px;min-height:32px;font-size:11px} #settings .settings-group-actions{margin-bottom:14px}#settings .settings-note{padding-left:12px;border-left:3px solid #BFD5FF;font-size:12px;color:#62738E;line-height:1.5;margin:16px 0 0} #settings #creditCardsList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} #settings .settings-credit-card{border:1px solid #DCE4EF;border-radius:9px;background:#FBFCFE;padding:14px;min-width:0} #settings .settings-credit-card h3{font-size:14px;margin:0;display:flex;align-items:center;justify-content:space-between;gap:8px} #settings .settings-credit-card dl{margin:14px 0}#settings .settings-credit-card dl>div{display:flex;justify-content:space-between;gap:10px;margin:8px 0;font-size:12px} #settings .settings-credit-card dt{color:#62738E}#settings .settings-credit-card dd{margin:0;text-align:right;font-variant-numeric:tabular-nums} #settings #newCreditCardDetails{border-top:1px solid #E2E8F0;padding-top:14px;margin-top:16px}#settings #newCreditCardDetails summary{cursor:pointer;color:#2563EB;font-size:13px;font-weight:600;padding:6px 0}#settings #creditCardForm{padding-top:12px} #settings .settings-search{display:flex;gap:10px;margin-bottom:14px}#settings .settings-search .input{flex:1;min-width:0}#settings .settings-search .select{width:165px} #settings .settings-contractor-row,#settings .settings-inline{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 15px;border-bottom:1px solid #EDF1F6} #settings .settings-inline{border:0;padding:0}#settings .settings-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:#62738E;padding:0 2px 14px}#settings .settings-pagination .actions{align-items:center;gap:10px} #settings .settings-empty{padding:16px;color:#62738E;font-size:13px} #settings .settings-rate-head,#settings .settings-rate-row{display:grid;grid-template-columns:100px minmax(150px,1fr) minmax(150px,1fr) auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid #EDF1F6;font-size:13px} #settings .settings-rate-head{color:#62738E;font-size:11px}#settings .settings-rate-row:last-child{border:0}#settings .settings-rate-value{font-variant-numeric:tabular-nums}#settings .settings-rate-source small{display:block;color:#62738E;font-size:11px;margin-top:4px}#settings .settings-rate-source small.settings-rate-warning{color:#A15C12} #settings .settings-rate-row strong{font-weight:600}#settings .form{max-width:none;gap:14px}#settings .input,#settings .select{min-width:0;max-width:100%;font-size:13px;min-height:38px}#settings .small{font-size:12px;line-height:1.5}#settings .actions{flex-wrap:wrap} #settings .integration-card{border:0;padding:0;background:none}#settings .ksef-defaults{margin:0}#settings .ksef-defaults .actions,#settings #ksefConnectForm .actions{margin-top:16px}#settings #ksefToken{margin-top:6px}#settings .nbp-controls{padding-bottom:14px}#settings .nbp-controls>label{font-size:13px}#settings #users .account{margin:0!important;border:0;border-bottom:1px solid #EDF1F6;border-radius:0;padding:12px 0}#settings #users .account:last-child{border:0}#settings #users .account strong{flex-basis:100%}#settings #users .account .actions{width:100%}#settings #users .select{width:auto} @media(max-width:1200px){#settings .settings-shell{grid-template-columns:180px minmax(0,1fr);gap:16px}#settings .settings-account-row{grid-template-columns:minmax(130px,1fr) 40px minmax(90px,.65fr)}#settings .settings-row-actions{grid-column:1/-1;justify-content:flex-end}#settings .settings-section-head{flex-wrap:wrap}#settings .settings-rate-head,#settings .settings-rate-row{grid-template-columns:85px minmax(120px,1fr) minmax(120px,1fr) auto;gap:10px}} @media(max-width:800px){#settings .settings-shell{grid-template-columns:minmax(0,1fr);gap:18px}#settings .settings-nav{position:static;flex-direction:row;overflow-x:auto;padding:7px;gap:4px}#settings .settings-nav-label{display:none}#settings .settings-link{flex:0 0 auto;font-size:12px}#settings .settings-link .ui-icon{width:16px;height:16px}#settings .settings-group-body{padding:14px}#settings .settings-group>summary{padding:14px}#settings .settings-rate-head{display:none}#settings .settings-rate-row{grid-template-columns:minmax(0,1fr) auto;gap:7px 10px}#settings .settings-rate-row>strong{grid-column:1}#settings .settings-rate-row>.settings-rate-value,#settings .settings-rate-row>.settings-rate-source{grid-column:1}#settings .settings-rate-row>.btn{grid-column:2;grid-row:1/4}#settings .settings-nav[role=tablist]{scrollbar-width:thin}} @media(max-width:560px){#settings #creditCardsList,#settings .form{grid-template-columns:minmax(0,1fr)}#settings .settings-account-row{grid-template-columns:minmax(0,1fr) auto;gap:5px 10px;padding:12px}#settings .settings-currency{grid-column:1;grid-row:2}#settings .settings-balance{grid-column:2;grid-row:1/3;font-size:13px}#settings .settings-row-actions{margin-top:8px;justify-content:flex-start;flex-wrap:wrap}#settings .settings-row-actions .btn{min-height:38px;font-size:12px}#settings .settings-search{flex-wrap:wrap}#settings .settings-search .input{flex-basis:100%}#settings .settings-search .select{width:100%}#settings .settings-pagination{flex-wrap:wrap}#settings .settings-contractor-row{padding:12px;gap:8px}#settings .settings-contractor-row .btn{padding:8px}#settings .settings-inline{align-items:flex-start;flex-wrap:wrap}#settings .settings-section-head h2{font-size:18px}#settings .field-with-action{flex-wrap:wrap}#settings #otherRateValue{flex:1;width:100px}#settings .nbp-controls>label{align-items:flex-start}} /* One presentation-only selector for the upcoming list, independent of forecast totals. */ #dashboard .upcoming-heading { gap:10px; flex-wrap:wrap; align-items:center; } #dashboard .upcoming-filter { margin-left:auto; flex:none; } #dashboard .upcoming-filter button { min-height:34px; padding:6px 10px; font-size:12px; } /* Compact selection summary next to the visible row counter. */ #transactions .transaction-footer { flex-wrap:wrap; } #transactions .selection-totals { display:flex; flex:1; flex-wrap:wrap; align-items:baseline; gap:8px 20px; font-variant-numeric:tabular-nums; } #transactions .selection-currency-group { display:flex; flex-wrap:wrap; gap:6px 18px; padding-left:16px; border-left:1px solid var(--line); } #transactions .selection-currency-group>span { white-space:nowrap; } #transactions .selection-totals b { font-weight:600; margin-left:4px; } #transactions .selection-count { white-space:nowrap; } #dashboard .chart-risk-summary{font-size:11px;color:#BE123C;background:#FFF1F2;padding:7px 10px;border-radius:5px;margin-top:6px;line-height:1.4} #dashboard .chart-minimum{stroke-width:2.5;fill:#FFF1F2} .chart-values{white-space:pre-line} #dashboard .chart-values{min-height:68px;box-sizing:border-box} #dashboard .chart-values.is-negative{border-left:3px solid #E11D48;background:#FFF1F2} #dashboard .chart-risk-summary[hidden]{display:none} /* Month headings share the table width, but are never selectable transactions. */ #txTable .tx-month-separator>td,#txTable .tx-status-separator>td{padding:0 12px;height:34px;background:#F0F4F9;border-top:1px solid #DCE4EE;border-bottom:1px solid #E2E8F0;cursor:default} #txTable .tx-month-heading{display:flex;align-items:center;gap:10px;min-height:34px;text-align:left;color:#1B2A41} #txTable .tx-month-heading strong{font-size:12px;font-weight:600;white-space:nowrap} #txTable .tx-month-count{font-size:11px;color:#64748B;font-weight:400;white-space:nowrap} #txTable .tx-month-line{height:1px;background:#DCE4EE;flex:1;margin-left:4px} /* Personal review markers: distinct from KSeF approval, payment and risk colors. */ #transactions tr.tx-ksef-new>td.selection-cell{box-shadow:inset 3px 0 #3B82F6} #transactions .tx-party-line{display:flex;align-items:center;gap:6px;min-width:0} #transactions .tx-party-line .tx-party{min-width:0;flex:0 1 auto} #transactions .tx-new-badge{flex:none;padding:2px 5px;border-radius:4px;background:#EAF2FF;color:#2563EB;font-size:10px;line-height:1.2;font-weight:600;white-space:nowrap} .new-ksef-notice{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:-2px 0 12px;min-height:28px;font-size:12px;color:#2563EB;flex-shrink:0} #newKsefCount{font-weight:600} .new-ksef-link{border:0;background:none;color:#2563EB;font:inherit;padding:5px 0;cursor:pointer} .new-ksef-link:hover{text-decoration:underline} .new-ksef-link:focus-visible{outline:2px solid #93C5FD;outline-offset:3px;border-radius:3px} #transactions td[data-col=comment]:has(.inline-comment-form){overflow:visible;white-space:normal;vertical-align:middle} .inline-comment-form{display:flex;flex-direction:column;gap:4px;width:100%;min-width:0;max-width:220px;contain:inline-size;padding:0} .inline-comment-controls{display:flex;align-items:center;gap:2px;min-width:0} #transactions .inline-comment-controls textarea{flex:1 1 0;width:0} #transactions .inline-comment-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 22px;width:22px;height:26px;padding:0;border:0;border-radius:4px;background:transparent;color:#64748B;cursor:pointer} #transactions .inline-comment-icon .ui-icon{width:14px;height:14px} #transactions .inline-comment-icon[data-comment-save]{color:var(--green)} #transactions .inline-comment-icon:hover{background:#EAF0F7} #transactions .inline-comment-icon[data-comment-clear]:hover{color:var(--red)} #transactions .inline-comment-icon:focus-visible{outline:2px solid #93C5FD;outline-offset:1px} #transactions .inline-comment-icon:disabled{opacity:.45;cursor:default} #transactions .inline-comment-form textarea{box-sizing:border-box;width:100%;min-width:0;height:30px;min-height:30px;max-height:30px;resize:none;overflow:auto;padding:5px 7px;font-family:inherit;font-size:12px;line-height:18px} .inline-comment-progress{color:var(--muted);font-size:11px;line-height:1.4} .inline-comment-progress:empty{display:none} .inline-comment-error{color:var(--red);font-size:11px;line-height:1.4;overflow-wrap:anywhere} #dashboard .cashflow-month-separator{display:flex;align-items:center;gap:10px;min-height:34px;padding:7px 10px;margin:9px 0 4px;background:#F0F4F9;border-top:1px solid #DCE4EE;border-bottom:1px solid #E2E8F0;color:#1B2A41} #dashboard .cashflow-month-separator:first-child{margin-top:0} #dashboard .cashflow-month-separator strong{font-size:12px;font-weight:600;line-height:1.4} #dashboard .cashflow-month-separator>span{height:1px;background:#DCE4EE;flex:1;min-width:12px} /* Direct editing: quiet cells, one compact editor anchored to the selected value. */ #transactions .table-cell-button{display:inline-flex;align-items:center;justify-content:space-between;gap:5px;max-width:100%;height:30px;border:1px solid transparent;border-radius:5px;background:transparent;color:inherit;font:inherit;text-align:left;padding:3px 5px;cursor:pointer} #transactions .table-cell-button>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #transactions .table-cell-button>.ui-icon{width:13px;height:13px;flex:none;color:#94A3B8;opacity:0} #transactions .table-cell-button:hover,#transactions .table-cell-button:focus-visible,#transactions .table-cell-button[aria-expanded=true]{border-color:#BDD3F5;background:#FFF;outline:none} #transactions .table-cell-button:hover>.ui-icon,#transactions .table-cell-button:focus-visible>.ui-icon,#transactions .table-cell-button[aria-expanded=true]>.ui-icon{opacity:1} #transactions .table-cell-button.cell-predicted_payment_date{font-variant-numeric:tabular-nums;min-width:104px} #transactions .table-cell-button.cell-account_id{width:120px} #transactions .table-cell-button.cell-status{padding:0 3px;width:126px} #transactions .table-cell-button.cell-status .pill{height:26px;min-height:26px;padding:3px 9px;font-size:11px;white-space:nowrap} #transactions .table-cell-button.cell-saved{box-shadow:inset 0 0 0 1px #34B791;background:#EFFAF5} .table-cell-popover{position:fixed;z-index:1300;box-sizing:border-box;padding:12px;background:#FFF;color:#1B2A41;border:1px solid #DCE5F1;border-radius:10px;box-shadow:0 6px 24px #0A0F1E24;font-size:13px;max-height:calc(100vh - 16px);overflow:auto} .table-cell-popover[hidden]{display:none} .table-editor-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-size:13px} .table-editor-heading button,.table-calendar-nav button,.table-date-save{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:4px;border:0;border-radius:4px;color:#64748B;background:transparent;cursor:pointer} .table-cell-popover .ui-icon{width:15px;height:15px;flex:none} .table-cell-popover button:focus-visible,.table-cell-popover input:focus-visible{outline:2px solid #3B82F6;outline-offset:1px} .table-cell-options{display:grid;gap:3px} .table-cell-options>button{display:flex;align-items:center;gap:8px;justify-content:space-between;text-align:left;min-height:36px;padding:7px 9px;border:0;border-radius:5px;background:transparent;color:#1B2A41;font:inherit;cursor:pointer} .table-cell-options>button:hover,.table-cell-options>button[aria-pressed=true]{background:#EFF5FF} .table-cell-options>button>span{flex:1}.table-cell-options .pill{flex:none;font-size:12px} .table-date-entry{display:flex;gap:6px}.table-date-entry input{min-width:0;flex:1;height:34px;border:1px solid #CDD9EA;border-radius:5px;padding:5px 7px;font:inherit;background:#FFF;color:#1B2A41;box-sizing:border-box} .table-date-save{color:#009B78;height:34px;width:34px;border:1px solid #CDD9EA} .table-calendar-nav{display:flex;align-items:center;justify-content:space-between;margin-top:10px;margin-bottom:4px}.table-calendar-nav strong{font-size:13px;font-weight:600}.table-calendar-nav button{font-size:22px} .table-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center} .table-calendar-grid button{height:31px;border:0;border-radius:5px;background:transparent;color:#1B2A41;font:inherit;cursor:pointer} .table-calendar-grid .weekday{font-size:11px;color:#64748B;padding:5px 0}.table-calendar-grid button:hover{background:#EDF4FF}.table-calendar-grid button.today{box-shadow:inset 0 0 0 1px #BCD3F6}.table-calendar-grid button.selected{color:#FFF;background:#3B82F6}.table-calendar-grid button:disabled{color:#A5AFBD;cursor:not-allowed;background:#F8FAFC} .table-today{width:100%;margin-top:8px;padding:7px;border:0;border-radius:5px;background:#F2F6FB;color:#315A91;font:inherit;cursor:pointer} .table-cell-popover [data-cell-error]{color:#D52948;margin:9px 0 0;font-size:12px;line-height:1.4}.table-cell-popover [data-cell-progress]{display:block;color:#64748B;font-size:12px;margin-top:5px}.table-cell-popover [data-cell-progress]:empty{display:none} .table-edit-notice{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:1400;padding:8px 14px;border:1px solid #C8DFD6;border-radius:7px;background:#F2FBF7;color:#25664F;box-shadow:0 3px 10px #0A0F1E12;font-size:13px;pointer-events:none}.table-edit-notice:empty{display:none}.table-edit-notice.is-error{background:#FFF7EB;color:#9A5B08;border-color:#F2D6A3} #transactions .status-wrap:has(.table-cell-button)::before{display:none} #transactions .table-cell-button.cell-status{width:110px;max-width:110px;gap:0;padding:0;border-radius:5px;position:relative} #transactions .table-cell-button.cell-status>span{width:100%;overflow:visible} #transactions .table-cell-button.cell-status .pill{display:flex;align-items:center;justify-content:center;width:100%;box-sizing:border-box;height:24px;min-height:24px;color:#96530A;background:#FFF0DA;padding:3px 13px 3px 7px} #transactions .table-cell-button.cell-status>.ui-icon{position:absolute;right:5px;width:11px;height:11px} @media(min-width:761px){ #transactions .transaction-toolbar,#transactions .weekly-layout .transaction-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0 0 12px;min-height:52px;border:0;background:none} #transactions .transaction-toolbar>.segmented{flex:0 0 auto;display:flex;white-space:nowrap} #transactions .transaction-toolbar>.segmented button{font-size:12px;padding:0 12px;height:40px} #transactions .transaction-toolbar .search-control{flex:1 1 160px;min-width:140px} #transactions .transaction-toolbar .split-button .btn{height:40px;font-size:12px;padding:0 10px} #transactions .transaction-toolbar #addOptionsBtn{width:32px;min-width:32px;padding:0} #transactions .transaction-toolbar :is(#filterBtn,#viewBtn,#weeklyAccountButton){height:40px;min-height:40px;font-size:12px;padding:0 10px;min-width:0} #transactions .transaction-layout-bar{padding:0;min-height:0;gap:12px;justify-content:space-between} #transactions .transaction-layout-bar:has(>#dailyWeekNav.hidden):has(>#weeklyScope.hidden){display:none} #transactions .transaction-layout-bar:has(>#weeklyScope:not(.hidden)){padding-bottom:10px} #transactions .transaction-layout-bar #weeklyScope{margin-left:auto} } /* Icon-only approval must not inherit the legacy full-width decision control. */ #transactions .table-ksef-button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;vertical-align:middle;width:28px;min-width:28px;max-width:28px;height:28px;padding:4px;border:1px solid transparent;border-radius:5px;background:transparent;cursor:pointer} #transactions .table-ksef-button>.ui-icon{position:static;flex:none;width:18px;height:18px} #transactions .table-ksef-button:hover,#transactions .table-ksef-button:focus-visible,#transactions .table-ksef-button[aria-expanded=true]{border-color:#BDD3F5;background:#FFF;outline:none} #transactions .table-ksef-button.pending{color:#94A3B8}#transactions .table-ksef-button.attention{color:#D97706}#transactions .table-ksef-button.rejected{color:var(--red)} /* A completed save is a status, never a retry warning. */ #appMessage.is-success{background:#ECFDF5;color:#047857;border:1px solid #A7F3D0} #appMessage.is-success::before{content:'✓';font-weight:700;margin-right:8px}