:root { --bg: #f5f6f8; --surface: #ffffff; --text: #1f2330; --muted: #6b7280; --border: #e3e5ea; --primary: #4f46e5; --primary-hover: #4338ca; --danger: #dc2626; --success: #16a34a; --shadow: 0 12px 32px rgba(15, 23, 42, .14); --radius: 10px; } :root { color-scheme: light; } /* Ciemny motyw — włączany przełącznikiem (atrybut data-theme na ) */ :root[data-theme="dark"] { color-scheme: dark; --bg: #14161b; --surface: #1d2027; --text: #e7e9ee; --muted: #9aa1ad; --border: #2d313a; --primary: #6d66f0; --primary-hover: #7f79f3; --danger: #ef4444; --success: #22c55e; --shadow: 0 16px 40px rgba(0, 0, 0, .35); } * { box-sizing: border-box; } [hidden] { display: none !important; } body { margin: 0; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); } a { color: var(--primary); } .muted { color: var(--muted); } .container { max-width: 1100px; margin: 0 auto; padding: 0 16px; } /* Nagłówek */ .topbar { background: var(--surface); border-bottom: 1px solid var(--border); } .topbar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 56px; padding-top: 8px; padding-bottom: 8px; } .brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; } .brand img { display: block; height: 30px; width: auto; } .brand .logo-dark, [data-theme="dark"] .brand .logo-light { display: none; } [data-theme="dark"] .brand .logo-dark { display: block; } .brand span { font-weight: 600; font-size: 15px; color: var(--muted); padding-left: 10px; border-left: 1px solid var(--border); line-height: 1; } .topbar-right { display: flex; align-items: center; gap: 8px; } main.container { padding-top: 32px; padding-bottom: 48px; } .page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .page-head h1 { margin: 0; font-size: 24px; } .page-sub { margin: 2px 0 0; font-size: 14px; } /* Przyciski */ .btn { display: inline-flex; align-items: center; gap: 4px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; } .btn:hover { border-color: var(--muted); } .btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; } .btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); } .btn-ghost { background: transparent; } .btn-danger { color: var(--danger); } .btn-danger:hover { border-color: var(--danger); } .btn-sm { padding: 4px 10px; font-size: 13px; } form.inline { display: inline; } /* Komunikaty */ .flash { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: var(--radius); margin-bottom: 16px; border: 1px solid; } .flash-success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; } .flash-error { background: #fef2f2; border-color: #fecaca; color: #991b1b; } [data-theme="dark"] .flash-success { background: #0d2a20; border-color: #145c43; color: #86efac; } [data-theme="dark"] .flash-error { background: #2d1414; border-color: #7f1d1d; color: #fca5a5; } .flash-undo { padding: 3px 12px; border-radius: 6px; border: 1px solid currentColor; background: transparent; color: inherit; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; } .flash-undo:hover { background: color-mix(in srgb, currentColor 12%, transparent); } /* Formularze */ input[type=text], input[type=search], input[type=password], input[type=number], input[type=date], select, textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary); outline-offset: -1px; border-color: transparent; } .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; } .panel-title { margin: 0 0 12px; font-size: 16px; } .form { display: flex; flex-direction: column; gap: 16px; } .form label { display: flex; flex-direction: column; gap: 6px; font-weight: 500; font-size: 14px; } .form label small { font-weight: 400; } .row { display: flex; gap: 16px; } .row > label { flex: 1; } .form-actions { display: flex; justify-content: flex-end; } @media (max-width: 600px) { .row { flex-direction: column; } .page-head h1 { font-size: 20px; } } .empty { text-align: center; padding: 48px 16px; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); color: var(--muted); } /* Przełącznik (włącz/wyłącz) */ .form label.switch { position: relative; flex-direction: row; align-items: center; gap: 10px; cursor: pointer; width: fit-content; } .switch input { position: absolute; opacity: 0; width: 1px; height: 1px; } .switch-track { position: relative; flex: 0 0 auto; width: 40px; height: 22px; border-radius: 999px; background: var(--border); transition: background .15s; } .switch-thumb { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .15s; } .switch input:checked + .switch-track { background: var(--primary); } .switch input:checked + .switch-track .switch-thumb { transform: translateX(18px); } .switch input:focus-visible + .switch-track { outline: 2px solid var(--primary); outline-offset: 2px; } .switch-label { font-weight: 500; font-size: 14px; } /* Tabele */ .data-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 8px; } .data-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--border); } .data-table td { padding: 8px; border-bottom: 1px solid var(--border); } .data-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .badge-current { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); } /* Logowanie */ .login-page { min-height: 100vh; display: grid; place-items: center; padding: 16px; } .login-box { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 16px; } .login-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 8px; } .login-brand img { height: 36px; } .login-brand .logo-dark, [data-theme="dark"] .login-brand .logo-light { display: none; } [data-theme="dark"] .login-brand .logo-dark { display: block; } .login-brand span { font-weight: 600; font-size: 18px; color: var(--muted); padding-left: 10px; border-left: 1px solid var(--border); } .login-form h1, .login-setup h1 { font-size: 20px; margin: 0; } .login-form p, .login-setup p { margin: 0; font-size: 14px; } .login-setup { display: flex; flex-direction: column; gap: 12px; } .hash-output { font-family: ui-monospace, Consolas, monospace; font-size: 12px; resize: none; } /* Menu ☰ i ustawienia ⚙ */ .dropdown { position: relative; } .dropdown > summary { list-style: none; } .dropdown > summary::-webkit-details-marker { display: none; } .icon-btn { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; } .icon-btn:hover, .dropdown[open] > .icon-btn { color: var(--text); border-color: var(--muted); } .dropdown[open] > .icon-btn { background: var(--bg); } .dropdown-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 220px; display: flex; flex-direction: column; gap: 2px; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); } .dropdown-panel hr { width: 100%; margin: 6px 0; border: 0; border-top: 1px solid var(--border); } .dropdown-title { padding: 4px 10px 6px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } .dropdown-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: 15px; text-align: left; text-decoration: none; cursor: pointer; } .dropdown-item:hover { background: var(--bg); } .dropdown-item.active { background: var(--bg); color: var(--primary); font-weight: 600; } .dropdown-danger { color: var(--danger); } .dropdown-muted { color: var(--muted); } .dropdown-count { margin-left: auto; min-width: 22px; padding: 0 7px; border-radius: 999px; font-size: 12px; font-weight: 600; text-align: center; background: var(--bg); border: 1px solid var(--border); color: var(--muted); } .dropdown-switch { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 8px; cursor: pointer; } .dropdown-switch:hover { background: var(--bg); } .dropdown-switch .switch-label { order: -1; font-weight: 400; font-size: 15px; white-space: nowrap; } #settings-menu .dropdown-panel { min-width: 270px; } .empty-inline { color: var(--muted); margin: 16px 0; text-align: center; font-size: 14px; } .row > label.shrink { flex: 0 0 auto; } .form-hint { margin: -8px 0 0; font-size: 13px; } .form-hint.switch-hint { margin: 6px 0 0; } .switch input:disabled + .switch-track { opacity: .6; } /* Wybór jednej opcji jako przyciski (kto zapłacił, rodzaj) */ .field { margin: 0; padding: 0; border: 0; min-width: 0; } .field legend { padding: 0; margin-bottom: 6px; font-weight: 500; font-size: 14px; } .segmented { display: flex; flex-wrap: wrap; gap: 8px; } .form .segmented label { flex: 1 1 160px; position: relative; display: block; cursor: pointer; } .segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; } .segmented span { display: flex; flex-direction: column; justify-content: center; min-height: 44px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-weight: 500; text-align: center; } .segmented small { font-weight: 400; font-size: 12px; color: var(--muted); } .segmented span:hover { border-color: var(--muted); } .segmented input:checked + span { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, var(--surface)); } .segmented input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; } .icon-btn-sm { width: 30px; height: 30px; border-radius: 6px; } .icon-btn-danger:hover { color: var(--danger); border-color: var(--danger); } /* Pulpit: kafelki modułów */ .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; } .tile { display: flex; flex-direction: column; gap: 4px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); border-top: 4px solid var(--accent, var(--primary)); color: var(--text); text-decoration: none; transition: border-color .15s, box-shadow .15s; } a.tile:hover { border-color: var(--muted); border-top-color: var(--accent, var(--primary)); box-shadow: var(--shadow); } .tile-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .tile-label { font-size: 17px; font-weight: 600; } .tile-more { color: var(--muted); font-size: 18px; transition: transform .15s; } a.tile:hover .tile-more { color: var(--primary); transform: translateX(3px); } .tile-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 14px; } .tile-row + .tile-row { border-top: 1px solid var(--border); } .tile-row > span { display: flex; flex-direction: column; min-width: 0; } .tile-row small { font-size: 12px; } .tile-value { flex: none; font-size: 20px; color: var(--danger); font-variant-numeric: tabular-nums; } .tile-value.is-even { color: var(--muted); } .tile-note { margin: 0; font-size: 14px; } .tile-value-plain { color: var(--text); } /* Pulpit: rząd małych kafelków i blok wydatków pod nimi */ .tiles-small { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .dash-expenses { margin-top: 16px; } /* boksy wydatków znajomych: obok siebie, pozycje w jednej kolumnie */ .dash-friends { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-top: 16px; } /* boksy w rzędzie równej wysokości */ .dash-friends .dash-expenses { margin-top: 0; } .dash-expenses.is-compact .expense-grid { grid-template-columns: 1fr; } .dash-expenses .panel-title .card-link:hover { color: var(--primary); } .expense-grid { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 24px; } .expense-grid li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 14px; } /* Powitanie i kartka z kalendarza */ .tile-today { gap: 12px; } .today { display: flex; align-items: center; gap: 16px; } .cal-page { flex: none; width: 68px; display: flex; flex-direction: column; align-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: 0 2px 6px rgba(0, 0, 0, .08); } .cal-month { width: 100%; padding: 2px 0; background: var(--danger); color: #fff; font-size: 12px; font-weight: 700; text-align: center; text-transform: uppercase; letter-spacing: .06em; } .cal-day { font-size: 32px; font-weight: 700; line-height: 1.3; } .today-text { display: flex; flex-direction: column; min-width: 0; } .today-text strong { font-size: 17px; } .today-text small { font-size: 12px; margin-top: 2px; } /* Pogoda */ .weather-city { font-size: 13px; } .weather-now { display: flex; align-items: center; gap: 10px; } .weather-icon { font-size: 34px; line-height: 1; } .weather-temp { font-size: 32px; font-weight: 700; font-variant-numeric: tabular-nums; } .weather-desc { font-size: 14px; } .tile-weather small { font-size: 12px; } .tile-amount { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; } .tile-total { margin-top: 2px; border-top: 1px solid var(--border); font-weight: 600; } .expense-row { flex-wrap: wrap; row-gap: 6px; } .expense-person { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; } .share-bar { flex-basis: 100%; height: 6px; border-radius: 999px; background: var(--bg); overflow: hidden; } .share-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); } /* Karty (Znajomi) */ .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); border-top: 4px solid var(--accent); padding: 16px; display: flex; flex-direction: column; } .card h2 { font-size: 17px; margin: 8px 0 4px; } .card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .card-top { flex-wrap: wrap; row-gap: 4px; } .card-tags { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .card-top .count { font-size: 13px; color: var(--muted); text-decoration: none; white-space: nowrap; } .badge-default { white-space: nowrap; } .card-top .count:hover { color: var(--primary); } .card-actions { margin-top: auto; padding-top: 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; } .card-actions > span { display: flex; gap: 6px; } .tag { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); } .dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); } .friend-balance { margin: 0; font-size: 14px; } .friend-balance strong { display: block; font-size: 18px; color: var(--primary); } .friend-note { margin: 8px 0 0; font-size: 13px; } .card-link { color: inherit; text-decoration: none; } .card-link:hover { color: var(--primary); } .friend-expenses { display: block; margin: 0 0 8px; font-size: 14px; color: var(--text); text-decoration: none; } .friend-expenses:hover strong { color: var(--primary); } /* Strona osoby: wydatki */ .friend-title { display: flex; align-items: center; gap: 10px; } .friend-title .dot { width: 14px; height: 14px; } .expenses-panel { border-top: 4px solid var(--accent); } .expenses-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; } .expenses-head .panel-title { margin: 0; } .expenses-total { color: var(--muted); font-size: 14px; } .expenses-total strong { color: var(--text); font-size: 20px; margin-left: 6px; font-variant-numeric: tabular-nums; } .expense-add { display: flex; gap: 8px; margin: 16px 0 8px; } /* input[type=text].… — musi przebić ogólne input[type=text] { width: 100% } */ .expense-add input[type=text][name=name] { flex: 1 1 0; width: auto; min-width: 0; } input[type=text].expense-amount-input { width: 140px; flex: none; text-align: right; } @media (max-width: 480px) { .expense-add { flex-wrap: wrap; } .expense-add input[type=text][name=name] { flex-basis: 100%; } .expense-add input[type=text].expense-amount-input { flex: 1 1 0; width: auto; } } .expense-list { list-style: none; margin: 0; padding: 0; } .expense-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); } .expense-name { flex: 1; min-width: 0; overflow-wrap: anywhere; } .expense-amount { flex: none; font-variant-numeric: tabular-nums; } /* wydatek roczny */ .expense-badge { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 600; border: 1px solid var(--border); color: var(--muted); white-space: nowrap; vertical-align: 1px; } .expense-badge.is-due { border-color: transparent; background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); } .expense-item.is-not-due .expense-name > .sensitive, .expense-item.is-not-due .expense-amount { opacity: .5; } .expense-add .schedule-select { width: auto; flex: none; } .shared-check { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 13px; color: var(--muted); white-space: nowrap; cursor: pointer; } .shared-check input { width: 16px; height: 16px; accent-color: var(--primary); } .shared-pick { display: flex; gap: 8px; margin-top: 16px; } .shared-pick select { flex: 1 1 0; min-width: 0; } .shared-pick + .expense-add { margin-top: 8px; } .expense-badge.is-shared { border-color: transparent; background: color-mix(in srgb, var(--accent, var(--primary)) 18%, transparent); color: var(--text); } /* Dymek z podpowiedzią (data-tip), np. podział wspólnego wydatku */ .has-tip { position: relative; cursor: help; text-decoration: underline dotted color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 3px; outline: none; } .has-tip::after { content: attr(data-tip); position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 20; padding: 6px 10px; border-radius: 8px; background: var(--text); color: var(--surface); font-size: 12px; font-weight: 600; line-height: 1.5; text-align: right; white-space: pre; box-shadow: var(--shadow); opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .15s, transform .15s; } .has-tip::before { content: ""; position: absolute; right: 14px; bottom: calc(100% + 2px); z-index: 20; border: 6px solid transparent; border-top-color: var(--text); border-bottom: 0; opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .15s, transform .15s; } .has-tip:hover::after, .has-tip:hover::before, .has-tip:focus-visible::after, .has-tip:focus-visible::before, .has-tip:focus::after, .has-tip:focus::before { opacity: 1; transform: none; } [data-hide-amounts] .has-tip::after, [data-hide-amounts] .has-tip::before { display: none; } /* dymek wyrównany do lewej (np. imię w nagłówku boksu) */ .has-tip.tip-left::after { right: auto; left: 0; text-align: left; font-weight: 500; } .has-tip.tip-left::before { right: auto; left: 14px; } /* „Opłacone” w boksie wydatków na Pulpicie */ .expenses-head-right { display: inline-flex; align-items: center; gap: 12px; } .pay-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; } .pay-toggle:hover { border-color: var(--muted); color: var(--text); } .pay-check { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; opacity: .6; } .pay-toggle.is-paid { border-color: transparent; background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); font-weight: 600; } .pay-toggle.is-paid .pay-check { border-color: var(--success); background: var(--success); color: #fff; opacity: 1; } .dash-expenses.is-paid .expense-grid { opacity: .6; } .dash-expenses.is-paid .expenses-total strong { color: var(--success); } .shared-summary { display: flex; flex-direction: column; gap: 2px; } .shared-summary strong { font-size: 18px; } .shared-summary b { color: var(--text); } .segmented input:disabled + span { opacity: .45; cursor: not-allowed; } .expense-amount-box { flex: none; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; } .expense-amount-box small { font-size: 12px; font-variant-numeric: tabular-nums; } @media (max-width: 480px) { .expense-add .schedule-select { flex: 1 1 100%; } } .trash-section { font-size: 16px; margin: 20px 0 8px; } .is-minus { color: var(--danger) !important; } input[type=color] { width: 56px; height: 38px; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); } /* Zakupy: wybór znajomego */ .friend-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .friend-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 6px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); text-decoration: none; font-weight: 500; } .friend-tab:hover { border-color: var(--muted); } .friend-tab.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .friend-tab small { font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }.friend-tab-add { justify-content: center; width: 38px; padding: 0; color: var(--muted); font-size: 18px; } .friend-tab.is-main { background: var(--bg); border-style: dashed; cursor: default; } .friend-tabs-sep { align-self: center; color: var(--muted); font-size: 18px; } .badge-default { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); } /* Zakupy: saldo */ .balance { border-left: 4px solid var(--accent, var(--border)); } .balance { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 16px; } .balance-main { display: flex; flex-direction: column; gap: 2px; } .balance-label { font-weight: 600; color: var(--muted); } .balance-amount { font-size: 30px; line-height: 1.2; color: var(--danger); font-variant-numeric: tabular-nums; } .balance.is-even .balance-amount { color: var(--muted); } /* Zakupy: dwie kolumny jak w arkuszu */ .purchase-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } @media (max-width: 800px) { .purchase-cols { grid-template-columns: 1fr; } } .purchase-col { padding: 16px; } .purchase-col-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .purchase-col-head h2 { margin: 0; font-size: 17px; } .purchase-col-sum { margin: 4px 0 8px; font-size: 14px; color: var(--muted); } .purchase-col-sum strong { color: var(--primary); font-size: 16px; } .purchase-list { list-style: none; margin: 0; padding: 0; } .purchase-list.panel { padding: 4px 16px; } .purchase-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); } .purchase-list.panel .purchase-item:first-child { border-top: 0; } .purchase-main { flex: 1; min-width: 0; } .purchase-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; } .purchase-date { flex: none; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; } .purchase-note { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .purchase-detail { display: flex; flex-wrap: wrap; gap: 0 6px; font-size: 13px; color: var(--muted); } .purchase-detail b { font-weight: 600; color: var(--text); } .purchase-detail .purchase-only { flex-basis: 100%; } /* „Tylko Rafała: …” zawsze w nowej linii */ .purchase-owed { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; } .purchase-actions { flex: none; display: flex; gap: 6px; } .purchase-item.is-trashed .purchase-note { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); } @media (max-width: 480px) { .purchase-item { flex-wrap: wrap; } .purchase-main { flex-basis: 100%; } .purchase-owed { margin-right: auto; } } .purchase-preview { margin: 0; min-height: 1.5em; font-size: 14px; color: var(--muted); } .purchase-preview b { color: var(--text); } .settlements-panel { margin-top: 16px; } .trash-note { margin: -8px 0 16px; font-size: 14px; } /* Ukryj wrażliwe dane: każdy element z klasą .sensitive jest rozmyty */ [data-hide-amounts] .sensitive { filter: blur(7px); user-select: none; transition: filter .15s; } /* w tabelach rozmywamy sam tekst (cień), a nie całą komórkę — tło wiersza zostaje ostre */ [data-hide-amounts] .data-table td.sensitive { filter: none; color: transparent; text-shadow: 0 0 9px var(--text); } /* Stopka */ .app-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 16px; padding-bottom: 24px; border-top: 1px solid var(--border); font-size: 13px; } .app-footer .footer-links { display: flex; gap: 16px; } .app-footer a { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; } .app-footer a:hover { color: var(--primary); } /* Kopie bazy */ .backups-note { margin: -8px 0 16px; font-size: 14px; } .backups-table td { vertical-align: middle; } .backups-panel + .backups-panel { margin-top: 16px; }