/* ===== Variables ===== */ :root { --bg: #f4f6f9; --surface: #ffffff; --surface-2: #f8fafc; --surface-hover: #f1f4f8; --border: #e4e8ef; --border-strong: #cdd5e0; --text: #1a2332; --text-muted: #64748b; --text-subtle: #94a3b8; --primary: #3b6ea5; --primary-hover: #2f5a87; --primary-light: #e8f0f8; --danger: #c44545; --danger-light: #fdf0f0; --success: #2f8f5b; --success-light: #ecf7f0; --warning-light: #fef8ec; --shadow-sm: 0 1px 2px rgba(26, 35, 50, 0.04), 0 1px 3px rgba(26, 35, 50, 0.03); --shadow: 0 4px 16px rgba(26, 35, 50, 0.08); --shadow-lg: 0 12px 32px rgba(26, 35, 50, 0.1); --radius: 12px; --radius-sm: 8px; --radius-pill: 999px; --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --sidebar-width: 268px; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 0.15s; --dur-med: 0.28s; --content-max: 760px; --aside-width: 380px; --layout-max: 1200px; --mobile-nav-height: 60px; --on-accent: #ffffff; --on-accent-soft: rgba(255, 255, 255, 0.15); --primary-bright: #4a7eb5; --primary-border: #c5d8eb; --primary-a08: rgba(59, 110, 165, 0.08); --primary-a12: rgba(59, 110, 165, 0.12); --primary-a15: rgba(59, 110, 165, 0.15); --primary-a20: rgba(59, 110, 165, 0.2); --primary-a22: rgba(59, 110, 165, 0.22); --primary-a28: rgba(59, 110, 165, 0.28); --primary-a35: rgba(59, 110, 165, 0.35); --bg-top: #f4f6f9; --bg-mid: #eef2f7; --bg-bottom: #e8edf4; --edge-faint: rgba(26, 35, 50, 0.02); --hairline: rgba(26, 35, 50, 0.08); --glass-strongest: rgba(255, 255, 255, 0.94); --glass-strong: rgba(255, 255, 255, 0.92); --glass-soft: rgba(255, 255, 255, 0.75); --overlay: rgba(17, 24, 39, 0.3); --scrim: rgba(44, 40, 37, 0.35); --lightbox: rgba(0, 0, 0, 0.85); --success-border: #c8e6d4; --success-bg: #e8f5ee; --success-bg-strong: #dcfce7; --success-chip-bg: #e4f2ea; --success-chip-text: #2d7a4f; --danger-border: #f0d0d0; --danger-border-soft: #ecd5d5; --danger-bg: #fef2f2; --danger-bg-soft: #fdf8f8; --danger-strong: #dc2626; --danger-strong-hover: #b91c1c; --warning: #d4922a; --warning-border: #ecd5b0; --warning-bg: #fdf8f0; --warning-bg-strong: #fdf3e3; --warning-text: #9a6418; --av-0: #5b8cbf; --av-1: #7a6aab; --av-2: #b0883d; --av-3: #b86b8a; --av-4: #4a9b6e; --av-5: #6a7cb8; --cat-jedzenie: #d97706; --cat-transport: #2563eb; --cat-zakwaterowanie: #7c3aed; --cat-rozrywka: #db2777; --cat-zakupy: #059669; --cat-inne: #6b7280; /* Etykiety kategorii: osiem gniazd, przydzielane po kolei w `app.js`. */ --tag-0-bg: #fef3e7; --tag-0-text: #b45309; --tag-0-border: #fde4c4; --tag-1-bg: #eff6ff; --tag-1-text: #2563eb; --tag-1-border: #dbeafe; --tag-2-bg: #f3efff; --tag-2-text: #6d28d9; --tag-2-border: #e9dfff; --tag-3-bg: #fdf2f8; --tag-3-text: #be185d; --tag-3-border: #fce7f3; --tag-4-bg: #ecfdf5; --tag-4-text: #047857; --tag-4-border: #d1fae5; --tag-5-bg: #f1f5f9; --tag-5-text: #475569; --tag-5-border: #e2e8f0; --tag-6-bg: #fff7ed; --tag-6-text: #c2410c; --tag-6-border: #ffedd5; --tag-7-bg: #f0fdf4; --tag-7-text: #15803d; --tag-7-border: #dcfce7; } /* ===== Ciemny motyw ===== * * Trzy stany, nie dwa. Jawny wybór stempluje `data-theme` na ``; * ustawienie „jak w systemie" nie stempluje nic i wtedy rozstrzyga * `prefers-color-scheme`. Dlatego reguła systemowa jest wyłączona, gdy * użytkownik jawnie wybrał jasny — inaczej przełącznik działałby tylko * w jedną stronę. * * Nadpisujemy wyłącznie tokeny. Żadna reguła niżej nie wie o motywie, * więc nowy element dostaje ciemną wersję za darmo — a jeśli ktoś wpisze * kolor dosłownie, wyjdzie to od razu. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #10151d; --bg-top: #10151d; --bg-mid: #0d1219; --bg-bottom: #090d13; --surface: #182029; --surface-2: #1e2732; --surface-hover: #253040; --border: #2a3542; --border-strong: #3d4a5c; --text: #e6ecf3; --text-muted: #9aa8b8; --text-subtle: #6d7c8c; /* Kolor akcentu rozjaśniony: #3b6ea5 na ciemnym tle nie wyrabia kontrastu na tekst ani na obrys pola z fokusem. */ --primary: #5b93cf; --primary-hover: #79aade; --primary-light: #1c2a3a; --primary-bright: #79aade; --primary-border: #35526f; --primary-a08: rgba(121, 170, 222, 0.1); --primary-a12: rgba(121, 170, 222, 0.16); --primary-a15: rgba(121, 170, 222, 0.18); --primary-a20: rgba(121, 170, 222, 0.24); --primary-a22: rgba(121, 170, 222, 0.26); --primary-a28: rgba(121, 170, 222, 0.3); --primary-a35: rgba(121, 170, 222, 0.4); /* Na ciemnym tle biel jako „szkło" rozjaśnia to, co ma przygasić — przezroczystość liczy się więc od tła, nie od bieli. */ --glass-strongest: rgba(24, 32, 41, 0.94); --glass-strong: rgba(24, 32, 41, 0.92); --glass-soft: rgba(24, 32, 41, 0.78); --edge-faint: rgba(0, 0, 0, 0.25); --hairline: rgba(255, 255, 255, 0.08); --overlay: rgba(4, 7, 11, 0.6); --scrim: rgba(4, 7, 11, 0.6); --danger: #e5817f; --danger-light: #2b1a1c; --danger-bg: #2b1a1c; --danger-bg-soft: #231719; --danger-border: #4d2e30; --danger-border-soft: #402729; --danger-strong: #e05a58; --danger-strong-hover: #c94745; --success: #5cbb87; --success-light: #16261e; --success-bg: #16261e; --success-bg-strong: #1b3126; --success-border: #2c4a39; --success-chip-bg: #1b3126; --success-chip-text: #7fd3a4; --warning: #d9a253; --warning-light: #2a2317; --warning-bg: #241f16; --warning-bg-strong: #2f2718; --warning-border: #4a3d24; --warning-text: #e0b673; /* Awatary i kategorie rozjaśnione: te same barwy, wyższa jasność, żeby biały napis na nich dalej się czytał. */ --av-0: #6f9fd0; --av-1: #8d7dc0; --av-2: #c19a4f; --av-3: #c97e9c; --av-4: #5aae80; --av-5: #7d8fca; --cat-jedzenie: #eb9333; --cat-transport: #5b91f0; --cat-zakwaterowanie: #a578f0; --cat-rozrywka: #ee6aa8; --cat-zakupy: #34b98a; --cat-inne: #93a1b2; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.22); --shadow: 0 4px 16px rgba(0, 0, 0, 0.4); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5); /* Odwrócone: tło przygaszone do poziomu powierzchni, napis rozjaśniony. */ --tag-0-bg: #2c2213; --tag-0-text: #e8a856; --tag-0-border: #4a3a20; --tag-1-bg: #16243d; --tag-1-text: #74a8f5; --tag-1-border: #27405f; --tag-2-bg: #241d3a; --tag-2-text: #ac8bf2; --tag-2-border: #3b3059; --tag-3-bg: #2f1a26; --tag-3-text: #ef7fb2; --tag-3-border: #4d2b3d; --tag-4-bg: #13291f; --tag-4-text: #4fc290; --tag-4-border: #234534; --tag-5-bg: #1f2733; --tag-5-text: #9fb0c4; --tag-5-border: #33404f; --tag-6-bg: #2e1e13; --tag-6-text: #ee8f5a; --tag-6-border: #4c3320; --tag-7-bg: #152a1b; --tag-7-text: #55c07a; --tag-7-border: #26472f; } } :root[data-theme="dark"] { --bg: #10151d; --bg-top: #10151d; --bg-mid: #0d1219; --bg-bottom: #090d13; --surface: #182029; --surface-2: #1e2732; --surface-hover: #253040; --border: #2a3542; --border-strong: #3d4a5c; --text: #e6ecf3; --text-muted: #9aa8b8; --text-subtle: #6d7c8c; /* Kolor akcentu rozjaśniony: #3b6ea5 na ciemnym tle nie wyrabia kontrastu na tekst ani na obrys pola z fokusem. */ --primary: #5b93cf; --primary-hover: #79aade; --primary-light: #1c2a3a; --primary-bright: #79aade; --primary-border: #35526f; --primary-a08: rgba(121, 170, 222, 0.1); --primary-a12: rgba(121, 170, 222, 0.16); --primary-a15: rgba(121, 170, 222, 0.18); --primary-a20: rgba(121, 170, 222, 0.24); --primary-a22: rgba(121, 170, 222, 0.26); --primary-a28: rgba(121, 170, 222, 0.3); --primary-a35: rgba(121, 170, 222, 0.4); /* Na ciemnym tle biel jako „szkło" rozjaśnia to, co ma przygasić — przezroczystość liczy się więc od tła, nie od bieli. */ --glass-strongest: rgba(24, 32, 41, 0.94); --glass-strong: rgba(24, 32, 41, 0.92); --glass-soft: rgba(24, 32, 41, 0.78); --edge-faint: rgba(0, 0, 0, 0.25); --hairline: rgba(255, 255, 255, 0.08); --overlay: rgba(4, 7, 11, 0.6); --scrim: rgba(4, 7, 11, 0.6); --danger: #e5817f; --danger-light: #2b1a1c; --danger-bg: #2b1a1c; --danger-bg-soft: #231719; --danger-border: #4d2e30; --danger-border-soft: #402729; --danger-strong: #e05a58; --danger-strong-hover: #c94745; --success: #5cbb87; --success-light: #16261e; --success-bg: #16261e; --success-bg-strong: #1b3126; --success-border: #2c4a39; --success-chip-bg: #1b3126; --success-chip-text: #7fd3a4; --warning: #d9a253; --warning-light: #2a2317; --warning-bg: #241f16; --warning-bg-strong: #2f2718; --warning-border: #4a3d24; --warning-text: #e0b673; /* Awatary i kategorie rozjaśnione: te same barwy, wyższa jasność, żeby biały napis na nich dalej się czytał. */ --av-0: #6f9fd0; --av-1: #8d7dc0; --av-2: #c19a4f; --av-3: #c97e9c; --av-4: #5aae80; --av-5: #7d8fca; --cat-jedzenie: #eb9333; --cat-transport: #5b91f0; --cat-zakwaterowanie: #a578f0; --cat-rozrywka: #ee6aa8; --cat-zakupy: #34b98a; --cat-inne: #93a1b2; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.22); --shadow: 0 4px 16px rgba(0, 0, 0, 0.4); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5); /* Odwrócone: tło przygaszone do poziomu powierzchni, napis rozjaśniony. */ --tag-0-bg: #2c2213; --tag-0-text: #e8a856; --tag-0-border: #4a3a20; --tag-1-bg: #16243d; --tag-1-text: #74a8f5; --tag-1-border: #27405f; --tag-2-bg: #241d3a; --tag-2-text: #ac8bf2; --tag-2-border: #3b3059; --tag-3-bg: #2f1a26; --tag-3-text: #ef7fb2; --tag-3-border: #4d2b3d; --tag-4-bg: #13291f; --tag-4-text: #4fc290; --tag-4-border: #234534; --tag-5-bg: #1f2733; --tag-5-text: #9fb0c4; --tag-5-border: #33404f; --tag-6-bg: #2e1e13; --tag-6-text: #ee8f5a; --tag-6-border: #4c3320; --tag-7-bg: #152a1b; --tag-7-text: #55c07a; --tag-7-border: #26472f; } /* Formanty przeglądarki — pola, listy rozwijane, paski przewijania — idą za tym, a nie za własnym domyślnym jasnym tłem. */ :root[data-theme="dark"] { color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; } body { font-family: var(--font); background-color: var(--bg-mid); background-image: radial-gradient(ellipse 120% 80% at 50% -20%, var(--primary-a08) 0%, transparent 55%), linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 45%, var(--bg-bottom) 100%); background-attachment: fixed; color: var(--text); line-height: 1.55; min-height: 100vh; min-height: 100dvh; font-size: 0.9375rem; -webkit-tap-highlight-color: transparent; } body.scroll-locked { overflow: hidden; touch-action: none; } .tabular { font-variant-numeric: tabular-nums; } /* ===== Layout ===== */ .app { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-width); background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; transition: transform 0.2s ease; box-shadow: 1px 0 0 var(--edge-faint); } .sidebar-header { padding: 1.125rem 1rem 1rem; border-bottom: 1px solid var(--border); } .logo { display: flex; align-items: center; gap: 0.625rem; font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.01em; color: var(--text); text-decoration: none; } .logo-icon { width: 34px; height: 34px; background: linear-gradient(145deg, var(--primary-bright) 0%, var(--primary) 100%); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--on-accent); font-size: 0.875rem; font-weight: 700; flex-shrink: 0; box-shadow: 0 2px 8px var(--primary-a28); } .sidebar-section { padding: 0.875rem 0.625rem 0.5rem; flex: 1; overflow-y: auto; } .sidebar-label { font-size: 0.75rem; font-weight: 500; color: var(--text-muted); padding: 0 0.5rem 0.5rem; } .group-list { list-style: none; } .group-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; border-radius: var(--radius-sm); cursor: pointer; border: none; background: none; width: 100%; text-align: left; font-family: inherit; color: inherit; transition: background var(--dur-fast) var(--ease-out); } .group-item:hover { background: var(--surface-hover); } .group-item.active { background: var(--primary-light); box-shadow: inset 0 0 0 1px var(--primary-a12); } .group-avatar { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.75rem; flex-shrink: 0; background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); } .group-item.active .group-avatar { background: var(--surface); color: var(--primary); border-color: var(--primary-border); } .group-info { flex: 1; min-width: 0; } .group-name { font-weight: 500; font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .group-item.active .group-name { font-weight: 600; color: var(--primary-hover); } .group-meta { font-size: 0.75rem; color: var(--text-muted); } .group-balance { font-size: 0.8125rem; font-weight: 600; white-space: nowrap; } .group-balance.positive { color: var(--success); } .group-balance.negative { color: var(--danger); } .group-balance.neutral { color: var(--text-muted); } .sidebar-footer { padding: 0.75rem; border-top: 1px solid var(--border); } .btn-new-group { width: 100%; } .main { flex: 1; width: 100%; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); } .topbar { background: var(--glass-strong); border-bottom: 1px solid var(--border); padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; position: sticky; top: 0; z-index: 50; backdrop-filter: blur(10px); } .topbar-left { display: flex; align-items: center; gap: 0.75rem; min-width: 0; flex: 1; } .topbar-group-row { display: flex; align-items: center; gap: 0.25rem; min-width: 0; } .topbar-group-settings { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; padding: 0; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .topbar-group-settings:hover { background: var(--surface-hover); color: var(--text); } .topbar-group-settings.is-active { background: var(--primary-light); color: var(--primary-hover); } .topbar-group-settings:disabled { opacity: 0.4; cursor: not-allowed; } .topbar-logo { width: 34px; height: 34px; background: linear-gradient(145deg, var(--primary-bright) 0%, var(--primary) 100%); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--on-accent); font-size: 0.875rem; font-weight: 700; flex-shrink: 0; box-shadow: 0 2px 8px var(--primary-a28); } .menu-toggle { display: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.5rem; min-width: 44px; min-height: 44px; cursor: pointer; color: var(--text); align-items: center; justify-content: center; flex-shrink: 0; } .menu-toggle:hover { background: var(--surface-hover); } .page-title { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .page-subtitle { font-size: 0.8125rem; color: var(--text-muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .group-switcher { display: flex; align-items: flex-start; gap: 0.375rem; min-width: 0; padding: 0.25rem 0.5rem 0.25rem 0; margin: -0.25rem 0; border: none; background: transparent; font-family: inherit; text-align: left; cursor: pointer; border-radius: var(--radius-sm); color: inherit; -webkit-tap-highlight-color: transparent; transition: background var(--dur-fast) var(--ease-out); } .group-switcher:hover { background: var(--surface-hover); } .group-switcher[aria-expanded="true"] .group-switcher-chevron { transform: rotate(180deg); } .group-switcher-text { display: flex; flex-direction: column; min-width: 0; } .group-switcher-chevron { flex-shrink: 0; color: var(--text-muted); margin-top: 0.375rem; transition: transform var(--dur-fast) var(--ease-out); } .page-title { display: block; } .topbar-actions { display: flex; gap: 0.5rem; flex-shrink: 0; } .content { padding: 1.5rem 1.5rem 2rem; flex: 1; width: 100%; max-width: var(--layout-max); margin: 0 auto; } .app-view { display: none; } .app-view.is-active { display: block; } .view-groups-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .view-groups-lead { font-size: 0.875rem; color: var(--text-muted); max-width: 28rem; line-height: 1.45; } .group-list--switcher { max-height: min(52vh, 360px); overflow-y: auto; } .group-list--switcher .group-item { border-radius: 0; border-bottom: 1px solid var(--border); } .group-list--switcher li:last-child .group-item { border-bottom: none; } .group-list--page { display: flex; flex-direction: column; gap: 0.375rem; } .group-list--page .group-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.875rem 1rem; } .stats-page { display: flex; flex-direction: column; gap: 1.25rem; } .stats-grid--page { margin-bottom: 0.25rem; } .content-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--aside-width); gap: 1.25rem; align-items: start; } .content-layout > * { max-width: none; margin-top: 0; } .content-main { display: flex; flex-direction: column; gap: 0.875rem; min-width: 0; } .content-aside { position: sticky; top: 4.75rem; } .content-main > * { max-width: none; } /* ===== Buttons ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.5625rem 1rem; font-size: 0.875rem; font-weight: 500; font-family: inherit; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.1s; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--primary); color: var(--on-accent); box-shadow: 0 1px 2px var(--primary-a20), 0 2px 6px var(--primary-a15); } .btn-primary:hover { background: var(--primary-hover); box-shadow: 0 2px 8px var(--primary-a22); } .btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); } .btn-secondary:hover { background: var(--surface-hover); } .btn-ghost { background: transparent; color: var(--text-muted); border-color: transparent; } .btn-ghost:hover { background: var(--surface-hover); color: var(--text); } .btn-filter { position: relative; } .btn-filter.has-filters { background: var(--primary-light); color: var(--primary-hover); border-color: var(--primary-a15); } .filter-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.125rem; height: 1.125rem; padding: 0 0.3125rem; margin-left: 0.25rem; border-radius: var(--radius-pill); background: var(--primary); color: var(--on-accent); font-size: 0.625rem; font-weight: 700; line-height: 1; } .btn-filter.is-open { background: var(--surface-hover); color: var(--text); } .btn-filter.is-open.has-filters { background: var(--primary-light); color: var(--primary-hover); } .btn-filter.is-active { background: var(--primary-light); color: var(--primary-hover); border-color: var(--primary-a15); } .btn-icon { padding: 0.5rem; width: 36px; height: 36px; } /* ===== Cards & Grid ===== */ .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-bottom: 1.25rem; } .stats-grid--aside { grid-template-columns: repeat(3, 1fr); gap: 0.625rem; margin-bottom: 1.25rem; } .stats-grid--aside .stat-card { padding: 1rem 0.875rem; } .stats-grid--aside .stat-card:last-child { grid-column: auto; } .stats-grid--aside .stat-label { font-size: 0.6875rem; letter-spacing: 0.02em; } .stats-grid--aside .stat-value { font-size: 1.0625rem; margin-top: 0.25rem; } .stat-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.875rem 1rem; } .stat-value { font-size: 1.25rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; } .stats-grid--compact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 1rem; } .stat-value.positive { color: var(--success); } .stat-value.negative { color: var(--danger); } .stat-hint { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem; } .content-grid { display: grid; grid-template-columns: 1fr 320px; gap: 1rem; align-items: start; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; } .card-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%); } .card-title { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; } .card-body { padding: 0; overflow-x: auto; } /* ===== Expense list ===== */ .expense-list { list-style: none; } @media (min-width: 769px) { .expense-list { min-width: 38rem; } .expense-amount-wrap { padding-left: 1rem; margin-left: 0.25rem; border-left: 1px solid var(--border); } } .expense-list-header, .expense-item { --expense-cols: 1.75rem 2.25rem minmax(0, 1fr) minmax(7.25rem, 8.5rem) minmax(5.5rem, 6.75rem); display: grid; grid-template-columns: var(--expense-cols); align-items: center; column-gap: 0.875rem; padding: 0.8125rem 1.25rem; } .expense-list-header { font-size: 0.75rem; font-weight: 500; color: var(--text-muted); padding-top: 0.5rem; padding-bottom: 0.625rem; border-bottom: 1px solid var(--border-strong); background: transparent; } .expense-list-header > span:nth-child(3), .expense-list-header > span:nth-child(4) { text-align: left; } .expense-list-header > span:nth-child(5) { text-align: right; } .expense-item { border-bottom: 1px solid var(--border); transition: background 0.15s ease; cursor: pointer; user-select: none; } .expense-item:last-child { border-bottom: none; } .expense-item:hover { background: var(--surface-2); } .expense-chevron { justify-content: center; flex-shrink: 0; width: 18px; height: 18px; position: relative; color: var(--text-subtle); transition: color var(--dur-fast); } .expense-cat-col { display: flex; align-items: center; justify-content: center; min-width: 0; } .cat-mark { display: inline-flex; align-items: center; justify-content: center; width: 1.625rem; height: 1.625rem; border-radius: 0.3125rem; background: var(--cat-bg, var(--surface-hover)); color: var(--cat-fg, var(--text-muted)); font-size: 0.5625rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1; flex-shrink: 0; user-select: none; } .expense-title-col { display: flex; flex-direction: column; justify-content: center; gap: 0.125rem; min-width: 0; } .expense-subtitle { font-size: 0.6875rem; font-weight: 400; color: var(--text-subtle); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .expense-title { font-weight: 500; font-size: 0.9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .expense-meta-box { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.4375rem 0.625rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); min-width: 0; max-width: 100%; width: 100%; } .expense-meta-row { display: grid; grid-template-columns: 3.25rem 1fr; gap: 0.25rem; align-items: baseline; min-width: 0; } .expense-meta-label { font-size: 0.625rem; font-weight: 500; color: var(--text-subtle); text-transform: uppercase; letter-spacing: 0.03em; } .expense-meta-name { font-size: 0.8125rem; font-weight: 600; color: var(--text); line-height: 1.2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .expense-meta-split { font-size: 0.6875rem; color: var(--text-muted); line-height: 1.2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .expense-item--you-paid .expense-meta-name { color: var(--primary); } .expense-amount-wrap { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; min-width: 0; max-width: 100%; overflow: hidden; justify-self: end; width: 100%; } .expense-amount-row { display: flex; align-items: stretch; justify-content: flex-end; gap: 0.625rem; max-width: 100%; } .expense-amount-stack { display: flex; flex-direction: column; align-items: flex-end; gap: 0.125rem; min-width: 0; } .expense-status-mark { flex-shrink: 0; width: 3px; border-radius: 2px; align-self: stretch; min-height: 1.375rem; } .expense-status-mark--yours { background: var(--primary); } .expense-status-mark--settled { background: var(--success); } .expense-status-mark--pending { background: var(--warning); } .expense-status-mark--unpaid { background: var(--danger); } .expense-amount { font-weight: 600; font-size: 0.9375rem; white-space: nowrap; text-align: right; color: var(--text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .expense-amount-sub { font-size: 0.6875rem; font-weight: 400; color: var(--text-muted); text-align: right; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .expense-has-receipt { flex-shrink: 0; font-size: 0.625rem; font-weight: 500; color: var(--primary); margin-top: 0.125rem; } /* ===== Members & balances ===== */ .member-list { list-style: none; } .member-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.125rem; border-bottom: 1px solid var(--border); } .member-item:last-child { border-bottom: none; } .member-avatar { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 0.6875rem; font-weight: 600; color: var(--on-accent); flex-shrink: 0; } .member-name { flex: 1; font-size: 0.875rem; font-weight: 500; } .member-balance { font-size: 0.875rem; font-weight: 600; } .member-balance.positive { color: var(--success); } .member-balance.negative { color: var(--danger); } .member-balance.neutral { color: var(--text-muted); } /* ===== Settlements ===== */ .settlement-list { list-style: none; padding: 0.5rem 1.125rem 0.875rem; } .settlement-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0; font-size: 0.875rem; border-bottom: 1px solid var(--border); } .settlement-item:last-child { border-bottom: none; } .settlement-to { color: var(--text-muted); font-size: 0.8125rem; font-weight: 400; } .settlement-amount { margin-left: auto; font-weight: 600; color: var(--primary); } .settlement-empty { padding: 1.75rem 1.125rem; text-align: center; color: var(--text-muted); font-size: 0.875rem; } .settlement-empty .icon { width: 40px; height: 40px; margin: 0 auto 0.75rem; background: var(--success-bg-strong); color: var(--success); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 1.125rem; font-weight: 600; } /* ===== Modal ===== */ .modal-overlay { position: fixed; inset: 0; background: var(--scrim); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 200; opacity: 0; visibility: hidden; transition: opacity var(--dur-med) var(--ease-out), visibility var(--dur-med); backdrop-filter: blur(3px); } .modal-overlay.open { opacity: 1; visibility: visible; } .modal { background: var(--surface); border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-lg); width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto; transform: translateY(12px) scale(0.98); opacity: 0; transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-med) var(--ease-out); } .modal-overlay.open .modal { transform: none; opacity: 1; } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1.125rem 1.25rem 0; } .modal-title { font-size: 1rem; font-weight: 600; } .modal-close { background: none; border: none; font-size: 1.375rem; line-height: 1; color: var(--text-muted); cursor: pointer; padding: 0.25rem; border-radius: var(--radius-sm); } .modal-close:hover { background: var(--surface-hover); color: var(--text); } .modal-body { padding: 1.125rem 1.25rem; } .modal-body--flush { padding-left: 0; padding-right: 0; padding-top: 0; } .modal-footer { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 0 1.25rem 1.125rem; } .modal-footer--block { display: block; } .btn-block { width: 100%; } /* ===== Forms ===== */ .form-group { margin-bottom: 1rem; } .form-group:last-child { margin-bottom: 0; } .form-label { display: block; font-size: 0.8125rem; font-weight: 500; margin-bottom: 0.375rem; color: var(--text); } .form-input, .form-select, .form-textarea { width: 100%; padding: 0.625rem 0.875rem; font-size: 0.875rem; font-family: inherit; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); transition: border-color 0.15s, box-shadow 0.15s; } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .form-group--recurring { margin-top: 0.375rem; margin-bottom: 0.625rem; padding-top: 0.25rem; } .recurring-enable { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--text); cursor: pointer; user-select: none; } .recurring-enable input { width: 1rem; height: 1rem; accent-color: var(--primary); } .recurring-fields { margin-top: 0.625rem; } .recurring-interval-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .recurring-interval-prefix { font-size: 0.875rem; color: var(--text-muted); } .recurring-interval-input { width: 4.5rem; min-width: 0; padding: 0.5rem 0.625rem; text-align: center; } .recurring-unit-select { flex: 1; min-width: 7rem; } .split-options { display: flex; gap: 0.5rem; flex-wrap: wrap; } .split-option { flex: 1; min-width: 80px; } .split-option input { position: absolute; opacity: 0; pointer-events: none; } .split-option label { display: block; text-align: center; padding: 0.5rem 0.75rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: 0.8125rem; font-weight: 500; cursor: pointer; transition: all 0.15s; } .split-option input:checked + label { background: var(--primary-light); border-color: var(--primary); color: var(--primary-hover); } .member-checkboxes { display: flex; flex-direction: column; gap: 0.5rem; max-height: 160px; overflow-y: auto; padding: 0.625rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); } .member-checkbox { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; cursor: pointer; } .member-checkbox input { accent-color: var(--primary); width: 16px; height: 16px; } /* ===== Toast ===== */ .toast-container { position: fixed; bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 0.75rem); right: 1.5rem; z-index: 300; display: flex; flex-direction: column; gap: 0.5rem; } .toast { background: var(--text); color: var(--on-accent); padding: 0.75rem 1rem; border-radius: var(--radius-sm); font-size: 0.875rem; font-weight: 500; box-shadow: var(--shadow); animation: toast-in 0.25s ease; } .toast.success { background: var(--success); } @keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ===== Empty state ===== */ .empty-state { text-align: center; padding: 3rem 1.5rem; color: var(--text-muted); } .empty-state .icon { width: 52px; height: 52px; margin: 0 auto 1rem; background: var(--primary-light); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.375rem; color: var(--primary); font-weight: 300; } .empty-state h3 { font-size: 0.9375rem; font-weight: 600; color: var(--text); margin-bottom: 0.25rem; } .empty-state p { font-size: 0.875rem; margin-bottom: 1rem; } .empty-state--groups .icon { font-size: 1.125rem; font-weight: 600; } .group-list-empty { padding: 1.25rem 1.125rem; font-size: 0.875rem; color: var(--text-muted); text-align: center; } .group-switcher-footer { display: flex; flex-direction: column; gap: 0.5rem; } .settings-page { display: flex; flex-direction: column; gap: 1rem; width: 100%; max-width: 640px; margin: 0 auto; } .settings-readonly-note { font-size: 0.875rem; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.875rem 1rem; line-height: 1.45; } .settings-form { display: flex; flex-direction: column; gap: 1rem; } .settings-section.card { padding: 1.125rem 1.25rem; } .settings-section--danger { border-color: var(--danger-border-soft); background: var(--danger-bg-soft); } .settings-section-title { font-size: 0.9375rem; font-weight: 600; margin-bottom: 0.625rem; } .settings-section-lead { font-size: 0.8125rem; color: var(--text-muted); line-height: 1.45; margin-bottom: 0.875rem; } .settings-owner-hint { margin-top: 0.375rem; margin-bottom: 0; } .settings-member-list { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.875rem; } .settings-member-row--pending { opacity: 0.78; } .settings-member-row--pending .settings-member-name { font-weight: 500; } .settings-member-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.625rem 0.75rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); } .settings-member-main { display: flex; align-items: center; gap: 0.625rem; min-width: 0; } .settings-member-text { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; } .settings-member-name { font-size: 0.875rem; font-weight: 500; } .settings-member-role { font-size: 0.75rem; color: var(--text-muted); line-height: 1.3; } .settings-member-add { display: flex; gap: 0.5rem; flex-wrap: wrap; } .settings-member-add .form-input { flex: 1; min-width: 10rem; } .visibility-options { display: flex; flex-direction: column; gap: 0.5rem; } .visibility-option { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.75rem 0.875rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast); } .visibility-option:has(input:checked) { border-color: var(--primary); background: var(--primary-light); } .visibility-option input { margin-top: 0.1875rem; accent-color: var(--primary); flex-shrink: 0; } .visibility-option-body { display: flex; flex-direction: column; gap: 0.1875rem; min-width: 0; } .visibility-option-label { font-size: 0.875rem; font-weight: 600; } .visibility-option-hint { font-size: 0.8125rem; color: var(--text-muted); line-height: 1.4; } .settings-actions { display: flex; justify-content: flex-end; } .delete-group-warning { font-size: 0.875rem; color: var(--danger); line-height: 1.45; margin-bottom: 0.875rem; } .delete-group-prompt { font-size: 0.875rem; color: var(--text-muted); line-height: 1.45; margin-bottom: 0.875rem; } .card--expenses.is-disabled .card-header--toolbar, .card--expenses.is-disabled .filters { opacity: 0.45; pointer-events: none; } .card--expenses.is-disabled .card-body { border-top: none; } /* ===== Avatar colors ===== */ .av-0 { background: var(--av-0); } .av-1 { background: var(--av-1); } .av-2 { background: var(--av-2); } .av-3 { background: var(--av-3); } .av-4 { background: var(--av-4); } .av-5 { background: var(--av-5); } /* ===== Responsive ===== */ @media (max-width: 1024px) { .content-layout { grid-template-columns: 1fr; } .content-aside { position: static; order: 2; } .content-grid { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: 1fr 1fr; } .stats-grid--aside { grid-template-columns: 1fr; } .stats-grid--aside .stat-card { padding: 0.875rem 1rem; } .stats-grid--aside .stat-value { font-size: 1.25rem; } } /* ===== Bottom nav & FAB ===== */ .app-nav { display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); padding: 0 0.5rem env(safe-area-inset-bottom); background: var(--glass-strongest); border-top: 1px solid var(--border); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .app-nav-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1875rem; min-height: var(--mobile-nav-height); padding: 0.375rem 0.5rem; border: none; background: transparent; color: var(--text-muted); font-family: inherit; font-size: 0.6875rem; font-weight: 500; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 0.15s; } .app-nav-btn:active { color: var(--primary); } .app-nav-btn.is-active { color: var(--primary); } .fab { display: none; position: fixed; bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 0.875rem); right: 1rem; width: 56px; height: 56px; border-radius: 50%; background: var(--primary); color: var(--on-accent); border: none; cursor: pointer; box-shadow: 0 4px 16px var(--primary-a35); z-index: 95; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; transition: background var(--dur-fast), transform var(--dur-fast) var(--ease-out); } .fab:not([hidden]) { display: flex; } .fab:hover { background: var(--primary-hover); transform: scale(1.06); } .fab:active { transform: scale(0.96); } @media (max-width: 768px) { .group-item { min-height: 48px; padding: 0.75rem 0.875rem; } .topbar { padding: 0.625rem 1rem; padding-top: max(0.625rem, env(safe-area-inset-top)); } .topbar-add-btn { display: none; } .content { padding: 0.875rem 1rem; padding-bottom: 1rem; } .content-layout { gap: 0.875rem; } .content-main { gap: 0.75rem; } .stats-grid { grid-template-columns: 1fr; } .stats-grid--aside { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; } .stats-grid--aside .stat-card { padding: 0.75rem 0.625rem; } .stats-grid--aside .stat-label { font-size: 0.625rem; line-height: 1.3; } .stats-grid--aside .stat-value { font-size: 0.9375rem; } .panel-card-trigger { min-height: 52px; padding: 0.875rem 1rem; } .form-row { grid-template-columns: 1fr; } .form-input, .form-select, .form-textarea, .filter-search, .filter-select { font-size: 16px; min-height: 44px; } .btn { min-height: 44px; } .btn-sm { min-height: 40px; } .filters-inner { flex-direction: column; align-items: stretch; } .filter-search, .filter-select, .filter-date-custom { width: 100%; min-width: 0; } .filter-date-input { flex: 1; width: auto; } .card-legend--mobile { display: block; } .expense-list-header { display: none; } .expense-list-header, .expense-item { --expense-cols: 1.125rem 1.75rem 1fr auto; column-gap: 0.5rem; padding: 0.6875rem 1rem; } .expense-cat-col { display: flex; padding-left: 0; border-left: none; justify-content: center; } .expense-title-col { grid-column: auto; padding-left: 0; } .expense-meta-box { display: none; } .expense-amount-wrap { grid-column: 4; } .expense-title { font-weight: 600; font-size: 0.875rem; } .expense-amount { font-size: 0.875rem; } .expense-amount-sub { font-size: 0.625rem; } .expense-has-receipt { display: none; } .expense-item:active:not(.expanded) { background: var(--surface-hover); } .expense-item { -webkit-tap-highlight-color: transparent; } .expense-chevron { grid-column: 1; opacity: 0.45; } .expense-group-header { padding: 0.4375rem 1rem; font-size: 0.625rem; letter-spacing: 0.05em; } .balance-card { padding: 1rem 1.125rem; gap: 0.875rem; } .balance-card-amount { font-size: 1.5rem; } .balance-card-note { font-size: 0.8125rem; } .balance-transfer-list { padding-top: 0.75rem; margin-top: 0; } .expense-detail { padding: 0 0.875rem 0.875rem 1rem; } .expense-detail-top { flex-direction: column; } .expense-detail-actions { width: 100%; } .expense-detail-actions .btn { flex: 1; } .split-table-head { grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.375rem 0.5rem; font-size: 0.6875rem; padding: 0 0.125rem 0.375rem; } .split-row { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-rows: auto; gap: 0.375rem 0.5rem; align-items: center; padding: 0.625rem 0.125rem; } .split-status { grid-column: auto; justify-content: flex-end; min-width: 0; } .split-amount { font-size: 0.8125rem; } .split-name { font-size: 0.8125rem; } .split-avatar { width: 22px; height: 22px; font-size: 0.5625rem; } .status-badge { font-size: 0.625rem; padding: 0.1875rem 0.4375rem; max-width: 5.25rem; } .status-cell { flex-direction: column; align-items: flex-end; flex-wrap: nowrap; } .btn-mark-transfer { font-size: 0.625rem; padding: 0.25rem 0.375rem; } .modal-overlay { align-items: flex-end; padding: 0; } .modal { width: 100%; max-width: 100%; max-height: min(92dvh, 100%); border-radius: 16px 16px 0 0; transform: translateY(100%); margin: 0; } .modal-overlay.open .modal { transform: translateY(0); } .modal::before { content: ""; display: block; width: 40px; height: 4px; margin: 0.625rem auto 0; background: var(--border-strong); border-radius: var(--radius-pill); flex-shrink: 0; } .modal-header { padding-top: 0.75rem; } .modal-body { padding-bottom: calc(1.125rem + env(safe-area-inset-bottom)); } .modal-footer { padding-bottom: calc(1.125rem + env(safe-area-inset-bottom)); } .toast-container { left: 1rem; right: 1rem; bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 0.75rem); } .toast { text-align: center; } .lightbox-close { top: max(1rem, env(safe-area-inset-top)); right: max(1rem, env(safe-area-inset-right)); min-width: 44px; min-height: 44px; } .category-add-form { flex-direction: column; } .category-add-form .btn { width: 100%; } } .sidebar-backdrop { display: none; position: fixed; inset: 0; background: var(--overlay); z-index: 99; } .sidebar-backdrop.visible { display: block; } #settlement-banner { max-width: none; } .panel-card--aside { max-width: none; } .card--expenses { max-width: none; } .balance-card { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem 1.25rem; padding: 1.25rem 1.375rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); } .balance-card--credit { background: linear-gradient(135deg, var(--surface) 0%, var(--success-light) 100%); border-color: var(--success-border); } .balance-card--owed { background: linear-gradient(135deg, var(--surface) 0%, var(--danger-light) 100%); border-color: var(--danger-border); } .balance-card--clear { background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%); } .balance-card-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); } .balance-card-icon--positive { background: var(--success-bg); color: var(--success); border-color: var(--success-border); } .balance-card-icon--negative { background: var(--danger-light); color: var(--danger); border-color: var(--danger-border); } .balance-card-icon--clear { background: var(--primary-light); color: var(--primary); border-color: var(--primary-border); } .balance-card-content { flex: 1; min-width: 180px; } .balance-card-label { font-size: 0.8125rem; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .balance-card-amount { font-size: 1.75rem; font-weight: 700; margin-top: 0.125rem; line-height: 1.15; letter-spacing: -0.02em; } .balance-card-amount.positive { color: var(--success); } .balance-card-amount.negative { color: var(--danger); } .balance-card-note { font-size: 0.875rem; color: var(--text-muted); margin: 0.375rem 0 0; max-width: 36ch; } .balance-transfer-list { list-style: none; width: 100%; margin: 0.25rem 0 0; padding-top: 1rem; border-top: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 0.5rem; } .balance-transfer { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.625rem 0.875rem; background: var(--glass-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.875rem; } .balance-transfer-names { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; } .balance-transfer-to { color: var(--text-subtle); font-size: 0.75rem; font-weight: 400; } .balance-transfer-amount { font-weight: 600; color: var(--primary); white-space: nowrap; } /* ===== Collapsible panel card ===== */ .panel-card--aside { max-width: none; } .panel-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; } .panel-card-trigger { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.875rem 1.125rem; background: transparent; border: none; cursor: pointer; font-family: inherit; font-size: 0.875rem; color: var(--text); text-align: left; transition: background 0.15s; } .panel-card-trigger:hover { background: var(--surface-hover); } .panel-card.is-open .panel-card-trigger { border-bottom: 1px solid var(--border); background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%); } .panel-card-trigger-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--primary-light); color: var(--primary); } .panel-card-trigger-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; } .panel-card-trigger-label { font-weight: 600; font-size: 0.9375rem; } .panel-card-trigger-hint { font-size: 0.8125rem; color: var(--text-muted); } .panel-card-chevron { width: 18px; height: 18px; position: relative; flex-shrink: 0; color: var(--text-subtle); } .panel-card-chevron::before { content: ""; position: absolute; top: 50%; left: 4px; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(-45deg); transition: transform var(--dur-med) var(--ease-out); } .panel-card.is-open .panel-card-chevron::before { transform: translateY(-30%) rotate(45deg); } .panel-card-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-med) var(--ease-out); } .panel-card.is-open .panel-card-body { grid-template-rows: 1fr; } .panel-card-body-inner { overflow: hidden; min-height: 0; } .panel-card.is-open .panel-card-body-inner { padding: 1.125rem 1.25rem 1.375rem; } .panel-card--aside .summary-section { margin-top: 1.375rem; } .panel-card--aside .summary-section:first-child { margin-top: 0; } .summary-section { margin-top: 1.125rem; } .summary-section:first-child { margin-top: 0; } .summary-heading { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.625rem; } .member-list--compact .member-item, .settlement-list--compact .settlement-item { padding-left: 0; padding-right: 0; } .settlement-list--compact { padding: 0; } .summary-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.625rem; } .summary-heading-row .summary-heading { margin-bottom: 0; } .chart-block { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1rem 1.125rem; } .chart-block--list { padding-top: 0.375rem; padding-bottom: 0.375rem; } .chart-block--list .member-list--compact .member-item, .chart-block--list .settlement-list--compact .settlement-item { padding-left: 0; padding-right: 0; } .chart-block--list .settlement-list--compact { padding: 0; } .chart-block--list .settlement-empty { padding: 0.5rem 0 0.375rem; } .chart-empty { font-size: 0.8125rem; color: var(--text-muted); text-align: center; padding: 0.75rem 0.5rem; } .timeline-chart-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.375rem; } .timeline-chart-caption { font-size: 0.75rem; color: var(--text-muted); } .timeline-chart-total { font-size: 0.875rem; font-weight: 600; color: var(--primary); } .timeline-bars { display: flex; align-items: flex-end; gap: 0.5rem; height: 148px; padding-top: 0.125rem; } .timeline-bars--scroll { overflow-x: auto; padding-bottom: 0.25rem; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .timeline-bar-col { flex: 1 1 0; min-width: 2.875rem; max-width: 5rem; display: flex; flex-direction: column; align-items: stretch; height: 100%; gap: 0.3125rem; } .timeline-bars--scroll .timeline-bar-col { flex: 0 0 3.25rem; min-width: 3.25rem; max-width: 3.25rem; } .timeline-bar-col--dense .timeline-bar-amount { font-size: 0.5625rem; } .timeline-bar-amount { font-size: 0.625rem; font-weight: 600; color: var(--text-muted); line-height: 1.15; text-align: center; white-space: nowrap; } .timeline-bar-track { flex: 1; min-height: 56px; display: flex; align-items: flex-end; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px 8px 4px 4px; overflow: hidden; } .timeline-bar-fill { width: 100%; background: linear-gradient(180deg, var(--primary-bright) 0%, var(--primary) 100%); border-radius: 4px 4px 0 0; min-height: 4px; transition: height var(--dur-med) var(--ease-out); } .timeline-bar-label { font-size: 0.6875rem; font-weight: 500; color: var(--text-subtle); text-align: center; line-height: 1.15; } .breakdown-row + .breakdown-row { margin-top: 0.625rem; } .breakdown-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.3125rem; } .breakdown-label { font-size: 0.8125rem; font-weight: 500; } .breakdown-amount { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); } .breakdown-bar-track { height: 8px; background: var(--border); border-radius: var(--radius-pill); overflow: hidden; } .breakdown-bar-fill { height: 100%; border-radius: var(--radius-pill); min-width: 4px; transition: width var(--dur-med) var(--ease-out); } .category-chips { display: flex; flex-wrap: wrap; gap: 0.5rem 1.125rem; } .cat-legend-item { display: inline-flex; align-items: center; gap: 0.4375rem; min-width: 0; } .cat-legend-name { font-size: 0.8125rem; color: var(--text-muted); } .category-edit-list { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; } .category-edit-item { display: flex; align-items: center; gap: 0.5rem; } .category-edit-input { flex: 1; padding: 0.5rem 0.75rem; font-size: 0.875rem; } .category-add-form { display: flex; gap: 0.5rem; align-items: stretch; } .category-add-form .form-input { flex: 1; } .stat-label { font-size: 0.75rem; font-weight: 500; color: var(--text-muted); margin-bottom: 0.25rem; } /* ===== Expenses card ===== */ .card-header--toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .card-header-title-wrap { min-width: 0; } .card-legend { display: none; font-size: 0.6875rem; color: var(--text-subtle); margin-top: 0.25rem; line-height: 1.35; } .card-legend--mobile { display: none; } .card-toolbar { display: flex; gap: 0.375rem; } #filter-toggle.is-active { background: var(--primary-light); color: var(--primary-hover); } .filters { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-med) var(--ease-out); border-bottom: 1px solid transparent; } .filters.is-open { grid-template-rows: 1fr; border-bottom-color: var(--border); } .filters > .filters-inner { overflow: hidden; min-height: 0; } .filters-inner { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .filters.is-open .filters-inner { padding: 0.75rem 1.25rem 1rem; } .filter-search { flex: 1; min-width: 160px; } .filter-select { min-width: 140px; width: auto; } .filter-date-custom { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; } .filter-date-input { width: 9.5rem; min-width: 0; padding: 0.5rem 0.75rem; font-size: 0.8125rem; } .filter-date-sep { color: var(--text-subtle); font-size: 0.8125rem; } /* ===== Balance indicator ===== */ .stat-value-wrap { display: flex; align-items: center; gap: 0.375rem; } .stat-indicator { font-size: 1rem; line-height: 1; } .stat-indicator.up { color: var(--success); } .stat-indicator.down { color: var(--danger); } .stat-card--balance.neutral .stat-value { color: var(--text); } /* ===== Filters (legacy helpers) ===== */ .card-header--filters { flex-direction: column; align-items: stretch; gap: 0.75rem; } .filter-search, .filter-select { padding: 0.5rem 0.75rem; font-size: 0.8125rem; } .btn-sm { padding: 0.375rem 0.75rem; font-size: 0.8125rem; } /* ===== Expense expand ===== */ .expense-group-header { padding: 0.625rem 1.25rem; font-size: 0.6875rem; font-weight: 600; color: var(--text-subtle); text-transform: uppercase; letter-spacing: 0.06em; background: var(--surface-2); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 1; } .expense-row { border-bottom: 1px solid var(--border); transition: background var(--dur-fast) var(--ease-out); } .expense-row:last-child { border-bottom: none; } .expense-row.row-expanded { background: var(--surface-2); } .expense-item { cursor: pointer; user-select: none; transition: background var(--dur-fast) var(--ease-out); } .expense-item:hover:not(.expanded) { background: var(--surface-hover); } .expense-item.expanded { background: var(--surface); } .expense-chevron::before { content: ""; position: absolute; top: 50%; left: 4px; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-65%) rotate(-45deg); transition: transform var(--dur-med) var(--ease-out); } .expense-item.expanded .expense-chevron { color: var(--primary); } .expense-item.expanded .expense-chevron::before { transform: translateY(-35%) rotate(45deg); } .expense-detail-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-med) var(--ease-out); } .expense-detail-panel.open { grid-template-rows: 1fr; } .expense-detail-panel__inner { overflow: hidden; min-height: 0; } .expense-detail-panel.open .expense-detail { opacity: 1; transform: none; transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out); transition-delay: 0.05s; } .expense-detail { padding: 0.25rem 1rem 1rem 2.125rem; opacity: 0; transform: translateY(-6px); transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .expense-detail-panel:not(.open) .expense-detail { transition-delay: 0s; } .expense-has-receipt { flex-shrink: 0; font-size: 0.6875rem; font-weight: 500; color: var(--primary); padding: 0.25rem 0.5rem; border: 1px solid var(--primary-border); border-radius: var(--radius-pill); background: var(--primary-light); } .expense-detail-inner { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.875rem 1rem; box-shadow: var(--shadow-sm); border-left: 3px solid var(--detail-accent, var(--border-strong)); } .expense-detail--jedzenie { --detail-accent: var(--cat-jedzenie); } .expense-detail--transport { --detail-accent: var(--cat-transport); } .expense-detail--zakwaterowanie { --detail-accent: var(--cat-zakwaterowanie); } .expense-detail--rozrywka { --detail-accent: var(--cat-rozrywka); } .expense-detail--zakupy { --detail-accent: var(--cat-zakupy); } .expense-detail--inne { --detail-accent: var(--cat-inne); } .expense-detail-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.875rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); } .expense-detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 1rem; font-size: 0.8125rem; color: var(--text-muted); } .expense-detail-meta strong { color: var(--text); font-weight: 600; } .expense-detail-actions { display: flex; gap: 0.375rem; flex-shrink: 0; } .btn-danger-text { color: var(--danger); } .btn-danger-text:hover { background: var(--danger-bg); color: var(--danger); } .btn-danger { background: var(--danger-strong); color: var(--on-accent); border: 1px solid var(--danger-strong); } .btn-danger:hover:not(:disabled) { background: var(--danger-strong-hover); border-color: var(--danger-strong-hover); } .btn-danger:disabled { opacity: 0.45; cursor: not-allowed; } .split-table { margin-bottom: 0.25rem; min-width: 0; } .split-you-action { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; flex-wrap: wrap; margin-bottom: 0.875rem; padding: 0.75rem 0.875rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); } .split-you-action--pending { background: var(--warning-bg); border-color: var(--warning-border); } .split-you-action-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; min-width: 0; } .split-you-action-label { font-size: 0.8125rem; color: var(--text-muted); } .split-you-action-amount { font-size: 0.9375rem; font-weight: 600; color: var(--text); } .split-you-action-note { font-size: 0.8125rem; color: var(--text-muted); } .split-table-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(4.25rem, auto) minmax(5.25rem, auto); gap: 0.5rem 0.75rem; padding: 0 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--text-muted); } .split-table-head span:nth-child(2), .split-table-head span:nth-child(3) { text-align: right; } .split-table-body { list-style: none; } .split-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(4.25rem, auto) minmax(5.25rem, auto); gap: 0.5rem 0.75rem; align-items: center; padding: 0.5rem 0.25rem; border-top: 1px solid var(--border); } .split-row:first-child { border-top: none; } .split-person { display: flex; align-items: center; gap: 0.5rem; min-width: 0; overflow: hidden; } .split-avatar { width: 26px; height: 26px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 0.625rem; font-weight: 600; color: var(--on-accent); flex-shrink: 0; } .split-name { font-size: 0.875rem; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .split-amount { font-size: 0.875rem; font-weight: 600; text-align: right; white-space: nowrap; justify-self: end; } .split-status { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 0.375rem; min-width: 0; } .split-status > .status-badge { align-self: flex-end; } .btn-confirm-payment { flex-shrink: 0; white-space: nowrap; } .status-badge { display: inline-block; font-size: 0.6875rem; font-weight: 600; padding: 0.25rem 0.5625rem; border-radius: var(--radius-pill); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .status-badge--payer { background: var(--primary-light); color: var(--primary-hover); } .status-badge--paid { background: var(--success-chip-bg); color: var(--success-chip-text); } .status-badge--awaiting { background: var(--warning-bg-strong); color: var(--warning-text); } .status-badge--pending { background: var(--surface-hover); color: var(--text-muted); } .status-badge--none { background: transparent; color: var(--border-strong); } .expense-detail-receipt { margin-top: 0.875rem; padding-top: 0.875rem; border-top: 1px solid var(--border); } .expense-detail-receipt-label { display: block; font-size: 0.75rem; font-weight: 500; color: var(--text-muted); margin-bottom: 0.5rem; } .receipt-thumb { max-width: 120px; max-height: 80px; border-radius: var(--radius-sm); border: 1px solid var(--border); cursor: pointer; object-fit: cover; } .receipt-preview { margin-top: 0.625rem; padding: 0.625rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); } .receipt-preview img { max-width: 100%; max-height: 120px; border-radius: var(--radius-sm); display: block; margin-bottom: 0.5rem; } .receipt-preview-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.8125rem; color: var(--text-muted); } .form-hint { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.375rem; } .form-hint code { font-size: 0.6875rem; background: var(--surface-hover); padding: 0.0625rem 0.25rem; border-radius: 3px; } .split-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; } .split-actions { display: flex; gap: 0.25rem; } .member-split-list { display: flex; flex-direction: column; gap: 0.5rem; max-height: 200px; overflow-y: auto; padding: 0.625rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); } .member-split-row { display: flex; align-items: center; gap: 0.5rem; } .member-split-row label { flex: 1; font-size: 0.875rem; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; } .member-split-row input[type="checkbox"] { accent-color: var(--primary); width: 16px; height: 16px; } .member-split-amount { width: 88px; padding: 0.375rem 0.5rem; font-size: 0.8125rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); text-align: right; } .member-split-amount:disabled { opacity: 0.4; background: var(--surface-hover); } .member-split-amount.hidden { display: none; } .modal--wide { max-width: 520px; } .no-results { padding: 2rem 1.125rem; text-align: center; color: var(--text-muted); font-size: 0.875rem; } /* ===== Lightbox ===== */ .lightbox { position: fixed; inset: 0; background: var(--lightbox); z-index: 400; display: flex; align-items: center; justify-content: center; padding: 1rem; } .lightbox[hidden] { display: none; } .lightbox img { max-width: 100%; max-height: 90vh; border-radius: var(--radius-sm); } .lightbox-close { position: absolute; top: 1rem; right: 1rem; background: var(--on-accent-soft); border: none; color: var(--on-accent); font-size: 2rem; line-height: 1; cursor: pointer; padding: 0.25rem 0.625rem; border-radius: var(--radius-sm); } .settlement-card-compact { margin-top: 1rem; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .expense-detail-panel { transition: none; } .expense-detail-panel.open { grid-template-rows: 1fr; } .expense-detail { opacity: 1; transform: none; } } /* ===== Rozliczenia osoba↔osoba ===== */ .settlement-item { flex-wrap: wrap; } .settlement-action { margin-left: auto; flex-shrink: 0; } .transfers-block { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); } .transfers-title { margin: 0 0 10px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-muted); } .transfer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .transfer-item { padding: 12px 14px; border: 1px solid var(--border); border-left: 3px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-2); display: flex; flex-direction: column; gap: 6px; } /* Kolor lewej krawędzi niesie stan — czeka na potwierdzenie czy już rozliczone. */ .transfer-item.is-pending { border-left-color: var(--primary); background: var(--warning-light); } .transfer-item.is-confirmed { border-left-color: var(--success); } .transfer-main { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .transfer-parties { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 0.9375rem; } .transfer-arrow { color: var(--text-subtle); } .transfer-amount { font-weight: 600; white-space: nowrap; } .transfer-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 0.8125rem; color: var(--text-muted); } .transfer-status { font-weight: 500; } .transfer-status.pending { color: var(--primary); } .transfer-status.confirmed { color: var(--success); } .transfer-note { font-style: italic; } .transfer-actions { display: flex; gap: 8px; margin-top: 2px; } /* ===== Data końca cyklu ===== */ .recurring-until-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .recurring-until-label { font-size: 0.875rem; color: var(--text-muted); white-space: nowrap; } .recurring-until-input { max-width: 190px; } /* ===== Przekazanie własności ===== */ .owner-transfer-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .owner-transfer-row .form-select { flex: 1; min-width: 180px; } /* ===== Kolejność kategorii ===== */ .category-order-controls { display: inline-flex; flex-direction: column; gap: 2px; flex-shrink: 0; } .btn-icon { width: 24px; height: 18px; padding: 0; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--text-muted); font-size: 0.75rem; line-height: 1; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .btn-icon:hover:not(:disabled) { background: var(--surface-hover); color: var(--text); } .btn-icon:disabled { opacity: 0.35; cursor: not-allowed; } .btn-icon:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; } .form-optional { font-weight: 400; color: var(--text-subtle); } .modal--narrow { max-width: 460px; } /* Wydatek zamknięty na zmiany — ktoś zgłosił już zwrot. */ .expense-locked-note { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.55rem; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); font-size: 0.8125rem; color: var(--text-muted); white-space: nowrap; cursor: help; } /* ===== Przełącznik motywu ===== */ .topbar-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-muted); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .topbar-icon-btn:hover { background: var(--surface-hover); border-color: var(--border-strong); color: var(--text); } /* Widoczna jest ikona wybranego trybu, nie tego, co widać na ekranie: przycisk mówi, w jakim stanie jest ustawienie, a nie jaki kolor ma tło. */ .theme-icon { display: none; } #btn-theme[data-mode="system"] .theme-icon--system, #btn-theme[data-mode="light"] .theme-icon--light, #btn-theme[data-mode="dark"] .theme-icon--dark { display: block; } /* ===== Powiadomienia ===== */ .topbar-bell { position: relative; } .notif-badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: var(--danger-strong); color: var(--on-accent); font-size: 0.6875rem; font-weight: 600; line-height: 1; /* Obwódka w kolorze paska: bez niej liczba zlewa się z ikoną dzwonka. */ box-shadow: 0 0 0 2px var(--surface); } /* `display: flex` wyżej bije domyślne `[hidden] { display: none }` z przeglądarki, więc ukryty licznik i tak by się rysował — tu wracamy mu ukrywanie. */ .notif-badge[hidden] { display: none; } .notif-list { list-style: none; margin: 0; padding: 0; max-height: min(60vh, 460px); overflow-y: auto; } .notif-bucket { padding: 0.75rem 1rem 0.375rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-subtle); background: var(--surface-2); position: sticky; top: 0; z-index: 1; } .notif-row + .notif-row .notif-item { border-top: 1px solid var(--border); } .notif-item { width: 100%; display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 1rem; border: 0; background: none; text-align: left; cursor: pointer; color: inherit; font: inherit; transition: background var(--dur-fast) var(--ease-out); } .notif-item:hover { background: var(--surface-hover); } .notif-row--unread .notif-item { background: var(--primary-light); } .notif-row--unread .notif-item:hover { background: var(--surface-hover); } /* Kropka niesie ten sam podział, co znaczniki na liście wydatków. */ .notif-mark { flex: none; width: 8px; height: 8px; margin-top: 0.4rem; border-radius: 50%; background: var(--text-subtle); } .notif-mark--info { background: var(--primary); } .notif-mark--success { background: var(--success); } .notif-mark--pending { background: var(--warning); } .notif-mark--muted { background: var(--text-subtle); } .notif-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1875rem; } .notif-headline { font-size: 0.875rem; color: var(--text); overflow-wrap: anywhere; } .notif-row--unread .notif-headline { font-weight: 600; } .notif-meta { font-size: 0.75rem; color: var(--text-muted); } .notif-sep { margin: 0 0.375rem; color: var(--text-subtle); } .notif-amount { flex: none; font-size: 0.875rem; font-weight: 600; color: var(--text); } .notif-empty { padding: 2.5rem 1.5rem; text-align: center; color: var(--text-muted); } .notif-empty h3 { font-size: 1rem; color: var(--text); margin-bottom: 0.375rem; } .notif-empty p { font-size: 0.8125rem; max-width: 34ch; margin: 0 auto; }