/* ================================================================ Pulse · styles.css v7 Live Finance Engine — orange→magenta gradient brand Dark is the default; light remains as a togglable theme. ================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300..900;1,14..32,300..900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&display=swap'); /* ── DESIGN TOKENS ───────────────────────────────────────────── Pulse brand: orange (#f97316) → magenta (#ec4899) gradient. Theme switches via [data-theme="light"|"dark"] on . ──────────────────────────────────────────────────────────── */ :root, [data-theme="light"] { /* Light mode: clean, warm off-white surfaces */ --bg-page: #f5f6fa; --bg-surface: #ffffff; --bg-surface-2: #f1f2f7; --bg-overlay: rgba(15,18,30,0.45); --border: #dde1ec; --border-strong: #b8bfd0; --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); --shadow-md: 0 6px 22px rgba(15,18,30,.10), 0 2px 6px rgba(15,18,30,.05); --shadow-lg: 0 18px 50px rgba(15,18,30,.16); --text-primary: #0f1623; --text-secondary: #3d4757; --text-muted: #8c95a6; --text-inverse: #ffffff; /* Pulse brand: orange primary, magenta secondary */ --accent: #ea580c; --accent-2: #db2777; --accent-light: #fff1e6; --accent-2-light: #fdf2f8; --accent-hover: #c2410c; --accent-glow: rgba(234, 88, 12, 0.20); --accent-2-glow: rgba(219, 39, 119, 0.18); --pulse-grad: linear-gradient(135deg, #f97316 0%, #fb7185 50%, #ec4899 100%); --pulse-grad-soft:linear-gradient(135deg, rgba(249,115,22,0.10), rgba(236,72,153,0.10)); --green: #047857; --green-light: #eafaf4; --green-glow: rgba(4,120,87,.14); --red: #dc2626; --red-light: #fef1f1; --red-glow: rgba(220,38,38,.14); --yellow: #d97706; --yellow-light: #fff7ed; --yellow-glow: rgba(217,119,6,.14); --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 22px; --radius-2xl: 32px; } [data-theme="dark"] { /* Pulse Dark — deep slate base with warm Pulse accents */ --bg-page: #07090f; --bg-surface: #0f131c; --bg-surface-2: #161b27; --bg-overlay: rgba(0,0,0,.78); --border: #1e2433; --border-strong: #2d3548; --shadow-sm: 0 1px 3px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.02); --shadow-md: 0 6px 28px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03); --shadow-lg: 0 22px 60px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04); --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-muted: #64748b; --text-inverse: #0a0e17; /* Pulse brand colors — vivid in dark */ --accent: #fb923c; --accent-2: #f472b6; --accent-light: rgba(251, 146, 60, 0.12); --accent-2-light: rgba(244, 114, 182, 0.12); --accent-hover: #fdba74; --accent-glow: rgba(251, 146, 60, 0.32); --accent-2-glow: rgba(244, 114, 182, 0.30); --pulse-grad: linear-gradient(135deg, #f97316 0%, #fb7185 50%, #ec4899 100%); --pulse-grad-soft:linear-gradient(135deg, rgba(249,115,22,0.18), rgba(236,72,153,0.18)); --green: #34d399; --green-light: rgba(52, 211, 153, 0.10); --green-glow: rgba(52, 211, 153, 0.28); --red: #f87171; --red-light: rgba(248, 113, 113, 0.10); --red-glow: rgba(248, 113, 113, 0.30); --yellow: #fbbf24; --yellow-light: rgba(251, 191, 36, 0.10); --yellow-glow: rgba(251, 191, 36, 0.28); } /* ── RESET ─────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg-page); color: var(--text-primary); min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background 0.25s, color 0.25s; line-height: 1.5; } /* ── SCROLLBAR ─────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* ── LAYOUT ────────────────────────────────────────────────── */ .app-wrapper { max-width: 1380px; margin: 0 auto; padding: 28px 24px 60px; } @media (max-width: 640px) { .app-wrapper { padding: 16px 14px 40px; } } /* ── HEADER ────────────────────────────────────────────────── */ .app-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; padding: 0 0 20px; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .header-left { display: flex; align-items: center; gap: 14px; } .header-logo { width: 42px; height: 42px; background: linear-gradient(135deg, var(--accent), var(--accent-hover)); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; box-shadow: 0 4px 14px var(--accent-glow); } .app-title { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.03em; color: var(--text-primary); line-height: 1.1; } .app-subtitle { font-size: 0.72rem; color: var(--text-muted); letter-spacing: 0.04em; font-weight: 500; margin-top: 1px; } .header-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* Sync status chip */ .header-sync { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 999px; color: var(--text-muted); font: 600 0.74rem Inter, sans-serif; cursor: pointer; transition: border-color .15s, color .15s; } .header-sync:hover { border-color: var(--accent); color: var(--text-primary); } .header-sync-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); flex-shrink: 0; transition: background .2s; } .header-sync[data-state="ok"] .header-sync-dot { background: var(--green, #16a34a); } .header-sync[data-state="syncing"] .header-sync-dot { background: var(--yellow, #eab308); animation: syncPulse 1s ease-in-out infinite; } .header-sync[data-state="error"] .header-sync-dot { background: var(--red, #dc2626); } .header-sync[data-state="offline"] .header-sync-dot, .header-sync[data-state="loggedout"] .header-sync-dot { background: var(--text-muted); } @keyframes syncPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } } @media (max-width: 720px) { .header-sync span:last-child { display: none; } } /* Profile chip (avatar + name) */ .header-profile { display: inline-flex; align-items: center; gap: 9px; padding: 4px 12px 4px 4px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 999px; text-decoration: none; color: var(--text-primary); font: 600 0.8rem Inter, sans-serif; transition: border-color .15s, box-shadow .15s; } .header-profile:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } .header-profile .header-avatar { width: 30px; height: 30px; border: none; box-shadow: none; } .header-profile .header-avatar:hover { border: none; box-shadow: none; } .header-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .header-name:empty { display: none; } .header-profile:has(.header-name:empty) { padding-right: 4px; } @media (max-width: 720px) { .header-name { display: none; } .header-profile { padding-right: 4px; } } /* Menu section label */ .header-menu-label { padding: 6px 12px 3px; font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); } /* Month selector */ .month-selector { display: flex; align-items: center; gap: 6px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 6px 10px; box-shadow: var(--shadow-sm); } .month-nav-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 3px 7px; border-radius: var(--radius-xs); font-size: 0.9rem; transition: color 0.15s, background 0.15s; line-height: 1; } .month-nav-btn:hover { color: var(--text-primary); background: var(--bg-surface-2); } .month-label { font-size: 0.82rem; font-weight: 700; color: var(--text-primary); min-width: 110px; text-align: center; letter-spacing: 0.01em; } /* ── HEADER: Overflow-Menü + Avatar (Workhorse-Rework) ─────── */ .month-today-btn { font-size: .65rem; font-weight: 700; color: var(--accent); padding: 3px 8px; } .header-menu-wrap { position: relative; } .header-menu-btn { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-secondary); cursor: pointer; font-size: .9rem; transition: border-color .15s, color .15s, background .15s; } .header-menu-btn:hover, .header-menu-btn[aria-expanded="true"] { border-color: var(--border-strong); color: var(--text-primary); } .header-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 230px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 6px; z-index: 500; display: flex; flex-direction: column; } .header-menu.hidden { display: none; } .header-menu button, .header-menu a { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; background: none; border: none; border-radius: 8px; color: var(--text-primary); font: 500 .82rem Inter, sans-serif; text-align: left; text-decoration: none; cursor: pointer; transition: background .12s; } .header-menu button:hover, .header-menu a:hover { background: var(--bg-page); } .header-menu i { width: 16px; text-align: center; color: var(--text-muted); font-size: .8rem; } .header-menu .header-menu-danger { color: var(--red, #dc2626); } .header-menu .header-menu-danger i { color: var(--red, #dc2626); } .header-menu-sep { height: 1px; background: var(--border); margin: 5px 8px; } .header-avatar { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-muted); font: 700 .8rem Inter, sans-serif; text-decoration: none; overflow: hidden; flex-shrink: 0; transition: border-color .15s, box-shadow .15s; } .header-avatar:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } .header-avatar img { width: 100%; height: 100%; object-fit: cover; } /* Theme toggle */ .theme-toggle { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 7px 10px; cursor: pointer; font-size: 0.95rem; color: var(--text-secondary); transition: all 0.15s; box-shadow: var(--shadow-sm); line-height: 1; } .theme-toggle:hover { border-color: var(--border-strong); color: var(--text-primary); } /* ── SALARY STRIP ──────────────────────────────────────────── */ .salary-strip { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 20px 24px; margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; box-shadow: var(--shadow-sm); } .salary-input-group { flex: 1; min-width: 180px; } .salary-divider { width: 1px; height: 48px; background: var(--border); flex-shrink: 0; } @media (max-width: 640px) { .salary-divider { display: none; } } .salary-available { flex: 1; min-width: 160px; display: flex; flex-direction: column; align-items: center; } .salary-available-label { font-size: 0.7rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 3px; } .salary-available-amount { font-size: 1.55rem; font-weight: 900; letter-spacing: -0.04em; line-height: 1; } .amount-positive { color: var(--green); } .amount-negative { color: var(--red); } /* ── STAT BOXES ────────────────────────────────────────────── */ .stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 28px; } @media (max-width: 768px) { .stats-row { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .stats-row { grid-template-columns: 1fr; } } .stat-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 22px 20px; text-align: center; position: relative; overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s; cursor: default; } .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } /* Light mode: subtle tinted background per stat type */ [data-theme="light"] .stat-card.stat-due { background: linear-gradient(160deg, #fff 60%, var(--red-light)); } [data-theme="light"] .stat-card.stat-open { background: linear-gradient(160deg, #fff 60%, var(--yellow-light)); } [data-theme="light"] .stat-card.stat-paid { background: linear-gradient(160deg, #fff 60%, var(--green-light)); } .stat-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; border-radius: 0 0 var(--radius-xl) var(--radius-xl); } .stat-card.stat-due::after { background: var(--red); } .stat-card.stat-open::after { background: var(--yellow); } .stat-card.stat-paid::after { background: var(--green); } .stat-icon { font-size: 1.3rem; margin-bottom: 6px; display: block; } .stat-label { font-size: 0.68rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; } .stat-value { font-size: 2rem; font-weight: 900; letter-spacing: -0.04em; line-height: 1; } .stat-card.stat-due .stat-value { color: var(--red); } .stat-card.stat-open .stat-value { color: var(--yellow); } .stat-card.stat-paid .stat-value { color: var(--green); } .stat-sub { font-size: 0.7rem; color: var(--text-muted); margin-top: 4px; font-weight: 500; } /* ── KANBAN ────────────────────────────────────────────────── */ .kanban-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; } @media (max-width: 1024px) { .kanban-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .kanban-grid { grid-template-columns: 1fr; } } .kanban-col { background: var(--bg-surface-2); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 18px; min-height: 200px; transition: border-color 0.18s, background 0.18s, box-shadow 0.18s; } .kanban-col.drag-over { border-color: var(--accent); background: var(--accent-light); box-shadow: inset 0 0 0 2px var(--accent-glow), 0 0 20px var(--accent-glow); } .kanban-col-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .kanban-col-title { font-size: 0.8rem; font-weight: 700; color: var(--text-secondary); letter-spacing: 0.05em; text-transform: uppercase; display: flex; align-items: center; gap: 7px; } .kanban-col-count { font-size: 0.68rem; font-weight: 700; background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-muted); padding: 2px 8px; border-radius: 99px; min-width: 26px; text-align: center; } .kanban-cards { display: flex; flex-direction: column; gap: 9px; } /* ── ENTRY CARDS ───────────────────────────────────────────── */ .entry-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; cursor: grab; transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s, opacity 0.15s; position: relative; } .entry-card:hover { border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--shadow-md); } .entry-card:active { cursor: grabbing; } .entry-card.dragging { opacity: 0.4; transform: rotate(1deg) scale(1.03); box-shadow: var(--shadow-lg); } .entry-card.urgent { border-color: var(--red) !important; box-shadow: 0 0 0 1px var(--red-glow), 0 0 16px var(--red-glow) !important; } .entry-card.done { opacity: 0.6; } /* Preview cards (installment starts next month) — calm dashed accent border */ .entry-card.preview { border-style: dashed !important; border-color: var(--accent) !important; opacity: 0.92; } .entry-card.preview .entry-amount { color: var(--text-muted); } /* Action row: pay + reverse side by side */ .entry-action-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .reverse-btn { color: var(--text-muted); border: 1px dashed var(--border); background: transparent; } .reverse-btn:hover { color: var(--red); border-color: var(--red); background: var(--red-light); } /* 3-tier urgency scaling */ .entry-card.urgency-overdue { border-color: var(--red) !important; background: var(--red-light); animation: pulse-red-glow 1.4s ease-in-out infinite; } .entry-card.urgency-0-2 { border: 1.5px solid rgba(239,68,68,.55) !important; background: var(--red-light); } .entry-card.urgency-3-5 { border: 3px solid var(--yellow) !important; box-shadow: 0 0 0 3px var(--yellow-glow) !important; } @keyframes pulse-red-glow { 0%,100% { box-shadow: 0 0 0 2px var(--red-glow); } 50% { box-shadow: 0 0 0 8px transparent; } } /* Light mode: slightly lifted card look */ [data-theme="light"] .entry-card { box-shadow: 0 1px 4px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.03); } [data-theme="light"] .entry-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.05); } .entry-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 4px; } .entry-title { font-size: 0.88rem; font-weight: 700; color: var(--text-primary); line-height: 1.35; } .entry-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; /* Workhorse: Sekundäraktionen erst bei Hover/Fokus sichtbar */ opacity: 0; transition: opacity .15s ease; } .entry-card:hover .entry-actions, .entry-card:focus-within .entry-actions { opacity: 1; } @media (hover: none) { .entry-actions { opacity: 1; } } /* Touch: immer sichtbar */ .entry-amount { font-size: 1.45rem; font-weight: 900; letter-spacing: -0.03em; color: var(--text-primary); line-height: 1.1; margin-bottom: 7px; } .entry-amount.done { color: var(--green); } /* ── BADGES ────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.63rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 8px; border-radius: 99px; margin-bottom: 5px; margin-right: 4px; } .badge-bill { background: var(--accent-light); color: var(--accent); border: 1px solid var(--accent-glow); } .badge-installment { background: var(--green-light); color: var(--green); border: 1px solid var(--green-glow); } .badge-done { background: var(--green-light); color: var(--green); border: 1px solid var(--green-glow); } .badge-due-normal { background: var(--bg-surface-2); color: var(--text-muted); border: 1px solid var(--border); } .badge-due-soon { background: var(--yellow-light); color: var(--yellow); border: 1px solid var(--yellow-glow); } .badge-due-urgent { background: var(--red-light); color: var(--red); border: 1px solid var(--red-glow); } .badge-preview { background: var(--accent-light); color: var(--accent); border: 1px dashed var(--accent-glow); font-style: italic; } .badge-paid-month { background: var(--green-light); color: var(--green); border: 1px solid var(--green-glow); } .badge-due-overdue { background: var(--red); color: #fff; animation: badge-pulse 1.6s ease-in-out infinite; } @keyframes badge-pulse { 0%,100% { box-shadow: 0 0 0 0 var(--red-glow); } 50% { box-shadow: 0 0 0 5px transparent; } } /* ── PROGRESS ──────────────────────────────────────────────── */ .progress-section { margin-top: 10px; } .progress-ring-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .progress-ring { transform: rotate(-90deg); flex-shrink: 0; } .progress-ring-bg { fill: none; stroke: var(--border); stroke-width: 4; } .progress-ring-fill { fill: none; stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset 0.75s cubic-bezier(.4,0,.2,1); } .ring-red { stroke: var(--red); } .ring-yellow { stroke: var(--yellow); } .ring-green { stroke: var(--green); } .progress-text-col { display: flex; flex-direction: column; gap: 1px; } .progress-count { font-size: 1.1rem; font-weight: 800; color: var(--text-primary); line-height: 1; } .progress-label { font-size: 0.72rem; color: var(--text-muted); font-weight: 500; } .progress-rate { font-size: 0.68rem; color: var(--text-muted); margin-top: 2px; } .progress-bar-track { height: 5px; background: var(--border); border-radius: 99px; overflow: hidden; } .progress-bar-fill { height: 100%; border-radius: 99px; transition: width 0.75s cubic-bezier(.4,0,.2,1); } .fill-red { background: linear-gradient(90deg, var(--red), #f97316); } .fill-yellow { background: linear-gradient(90deg, var(--yellow), #fbbf24); } .fill-green { background: linear-gradient(90deg, var(--green), #34d399); } .progress-pct-row { display: flex; justify-content: flex-end; margin-top: 3px; } .progress-pct { font-size: 0.68rem; color: var(--text-muted); font-weight: 600; font-variant-numeric: tabular-nums; } /* ── ACTION BUTTONS ────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: inherit; font-weight: 600; font-size: 0.8rem; padding: 7px 14px; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid transparent; transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.12s; letter-spacing: 0.01em; white-space: nowrap; } .btn:active { transform: scale(0.97); } .btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 2px 8px var(--accent-glow); } .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); box-shadow: 0 4px 14px var(--accent-glow); } .btn-ghost { background: transparent; color: var(--text-secondary); border-color: var(--border); } .btn-ghost:hover { background: var(--bg-surface-2); color: var(--text-primary); border-color: var(--border-strong); } .btn-danger { background: var(--red-light); color: var(--red); border-color: var(--red-glow); } .btn-danger:hover { background: var(--red); color: #fff; } .btn-success { background: var(--green-light); color: var(--green); border-color: var(--green-glow); } .btn-success:hover { background: var(--green); color: #fff; } .btn-lg { padding: 10px 22px; font-size: 0.88rem; border-radius: var(--radius-md); } .btn-icon { padding: 6px; border-radius: var(--radius-sm); font-size: 0.85rem; line-height: 1; } /* ── MODAL ─────────────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; background: var(--bg-overlay); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity 0.2s ease; } .modal-overlay.open { opacity: 1; } .modal-overlay.hidden { display: none; } .modal-box { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; padding: 28px; transform: translateY(18px) scale(0.98); transition: transform 0.22s cubic-bezier(.34,1.36,.64,1); } .modal-overlay.open .modal-box { transform: translateY(0) scale(1); } /* Light mode: modal slightly lighter than page bg */ [data-theme="light"] .modal-box { background: #f9fafb; box-shadow: 0 24px 60px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.09); } .modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .modal-title { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.025em; color: var(--text-primary); } .modal-close { background: var(--bg-surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 5px 9px; cursor: pointer; font-size: 0.85rem; color: var(--text-muted); transition: all 0.15s; line-height: 1; } .modal-close:hover { color: var(--red); border-color: var(--red-glow); background: var(--red-light); } .modal-footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border); } /* File viewer modal */ .file-modal-box { background: var(--bg-surface); border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); width: 100%; max-width: 860px; max-height: 90vh; overflow-y: auto; padding: 24px; } .file-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); } .file-modal-title { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); } /* ── TYPE TOGGLE ───────────────────────────────────────────── */ .type-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 20px; background: var(--bg-surface-2); border: 1px solid var(--border); padding: 5px; border-radius: var(--radius-lg); } .type-toggle-btn { background: transparent; border: none; border-radius: var(--radius-md); padding: 9px 10px; cursor: pointer; font-family: inherit; font-size: 0.82rem; font-weight: 600; color: var(--text-muted); transition: background 0.18s, color 0.18s, box-shadow 0.18s; text-align: center; } .type-toggle-btn:hover { color: var(--text-primary); } .type-toggle-btn.active-bill { background: var(--bg-surface); color: var(--accent); box-shadow: var(--shadow-sm); } .type-toggle-btn.active-install { background: var(--bg-surface); color: var(--green); box-shadow: var(--shadow-sm); } /* ── FORM ──────────────────────────────────────────────────── */ .form-group { margin-bottom: 16px; } .form-label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; letter-spacing: 0.02em; } .form-input { width: 100%; background: var(--bg-surface-2); border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 9px 12px; font-family: inherit; font-size: 0.88rem; color: var(--text-primary); transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; outline: none; appearance: none; } .form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); background: var(--bg-surface); } .form-input::placeholder { color: var(--text-muted); } /* Light mode: inputs slightly lighter than surface for contrast */ [data-theme="light"] .form-input { background: #f9fafb; border-color: #cdd2de; } [data-theme="light"] .form-input:focus { border-color: var(--accent); background: #ffffff; } .form-input[readonly] { opacity: 0.7; cursor: not-allowed; background: var(--bg-page); } .input-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; } .input-row .form-input:last-child { width: 72px; } /* OCR highlight */ .ocr-uncertain { border-color: var(--yellow) !important; box-shadow: 0 0 0 3px var(--yellow-glow) !important; animation: flash-yellow 0.55s 3; } @keyframes flash-yellow { 0%,100% { background: var(--yellow-light); border-color: var(--yellow); } 50% { background: #fffde0; } } .ocr-uncertain-hint { font-size: 0.68rem; color: var(--yellow); font-weight: 600; margin-top: 4px; } /* ── OCR STATUS BAR ────────────────────────────────────────── */ .ocr-bar { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; font-weight: 600; padding: 8px 12px; border-radius: var(--radius-sm); margin-top: 8px; transition: all 0.2s; } .ocr-bar.hidden { display: none; } .ocr-scanning { background: var(--accent-light); color: var(--accent); border: 1px solid var(--accent-glow); } .ocr-success { background: var(--green-light); color: var(--green); border: 1px solid var(--green-glow); } .ocr-partial { background: var(--yellow-light); color: var(--yellow); border: 1px solid var(--yellow-glow); } .ocr-error { background: var(--red-light); color: var(--red); border: 1px solid var(--red-glow); } .ocr-spinner { width: 12px; height: 12px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; flex-shrink: 0; } @keyframes spin { to { transform: rotate(360deg); } } /* ── DROP ZONE ─────────────────────────────────────────────── */ .drop-zone { border: 2px dashed var(--border-strong); border-radius: var(--radius-lg); padding: 24px 16px; text-align: center; cursor: pointer; transition: border-color 0.18s, background 0.18s, box-shadow 0.18s; position: relative; } .drop-zone:hover { border-color: var(--accent); background: var(--accent-light); } .drop-zone.drag-over { border-color: var(--accent); background: var(--accent-light); box-shadow: 0 0 0 4px var(--accent-glow); } .drop-zone-icon { font-size: 1.5rem; margin-bottom: 6px; } .drop-zone-text { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.6; } .drop-zone-file { font-size: 0.8rem; font-weight: 600; color: var(--accent); padding: 4px 0; } /* ── QR GROUP PANEL ────────────────────────────────────────── */ /* Combined all-in-one layout */ .qr-group-panel { background: var(--bg-surface-2); border: 1.5px solid var(--accent-glow); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 16px; } [data-theme="light"] .qr-group-panel { background: #f5f6ff; border-color: rgba(74,67,232,.18); box-shadow: 0 2px 10px rgba(74,67,232,.06); } /* Header bar */ .qr-panel-header { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: var(--accent-light); border-bottom: 1px solid var(--accent-glow); } .qr-panel-header-title { font-size: 0.72rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; flex: 1; } .qr-panel-badge { font-size: 0.6rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; white-space: nowrap; } .qr-badge-ok { background: var(--green-light); color: var(--green); border: 1px solid var(--green-glow); } .qr-badge-url { background: var(--yellow-light); color: var(--yellow); border: 1px solid var(--yellow-glow); } .qr-badge-partial { background: var(--yellow-light); color: var(--yellow); border: 1px solid var(--yellow-glow); } /* Creditor info block */ .qr-creditor-block { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px 10px; border-bottom: 1px solid var(--border); } .qr-creditor-icon { font-size: 1.25rem; flex-shrink: 0; margin-top: 1px; } .qr-creditor-name { font-size: 0.82rem; font-weight: 700; color: var(--text-primary); line-height: 1.2; } .qr-creditor-meta { font-size: 0.68rem; color: var(--text-muted); margin-top: 3px; display: flex; flex-wrap: wrap; gap: 4px 14px; } .qr-creditor-meta span { display: flex; align-items: center; gap: 4px; } /* Summary totals row */ .qr-summary-row { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .qr-summary-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 0.69rem; font-weight: 700; padding: 3px 10px; border-radius: 99px; white-space: nowrap; } .qr-chip-rate { background: var(--green-light); color: var(--green); border: 1px solid var(--green-glow); } .qr-chip-final { background: var(--yellow-light); color: var(--yellow); border: 1px solid var(--yellow-glow); } .qr-chip-total { background: var(--accent-light); color: var(--accent); border: 1px solid var(--accent-glow); } /* Documents table */ .qr-docs-table { display: flex; flex-direction: column; gap: 0; } .qr-doc-row { display: grid; grid-template-columns: 22px 1fr auto auto; align-items: center; gap: 8px; padding: 7px 14px; border-bottom: 1px solid var(--border); font-size: 0.74rem; transition: background 0.12s; } .qr-doc-row:last-child { border-bottom: none; } .qr-doc-row:hover { background: var(--bg-surface); } .qr-doc-row.qr-doc-final { background: var(--yellow-light); border-color: var(--yellow-glow); } [data-theme="dark"] .qr-doc-row.qr-doc-final { background: rgba(245,158,11,.06); } .qr-doc-num { font-size: 0.62rem; font-weight: 700; color: var(--text-muted); width: 20px; height: 20px; background: var(--bg-page); border: 1px solid var(--border); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .qr-doc-label { font-weight: 600; color: var(--text-secondary); } .qr-doc-label small { display: block; font-weight: 400; font-size: .62rem; color: var(--text-muted); margin-top: 1px; } .qr-doc-amt { font-weight: 800; color: var(--text-primary); white-space: nowrap; } .qr-doc-badge { font-size: 0.58rem; font-weight: 700; padding: 1px 6px; border-radius: 99px; white-space: nowrap; background: var(--yellow-light); color: var(--yellow); border: 1px solid var(--yellow-glow); } /* URL-QR warning strip */ .qr-url-warning { display: flex; align-items: flex-start; gap: 8px; padding: 9px 14px; background: var(--yellow-light); border-bottom: 1px solid var(--yellow-glow); font-size: 0.72rem; color: var(--yellow); font-weight: 600; line-height: 1.45; } [data-theme="dark"] .qr-url-warning { background: rgba(245,158,11,.07); } /* Multi-file drop zone hint */ .drop-zone-multi-hint { font-size: 0.68rem; color: var(--accent); margin-top: 5px; font-weight: 600; } /* ── TOAST ─────────────────────────────────────────────────── */ #toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px); background: var(--text-primary); color: var(--text-inverse); padding: 10px 22px; border-radius: var(--radius-md); font-size: 0.82rem; font-weight: 600; box-shadow: var(--shadow-lg); z-index: 999; opacity: 0; transition: transform 0.25s cubic-bezier(.34,1.36,.64,1), opacity 0.2s; white-space: nowrap; pointer-events: none; } #toast.show { transform: translateX(-50%) translateY(0); opacity: 1; } /* ── STORAGE WARNING ───────────────────────────────────────── */ .storage-warning { background: var(--yellow-light); border: 1px solid var(--yellow-glow); color: var(--yellow); font-size: 0.75rem; font-weight: 600; padding: 8px 16px; border-radius: var(--radius-sm); margin-bottom: 12px; display: none; } .storage-warning.show { display: block; } /* ── EMPTY STATE ───────────────────────────────────────────── */ .empty-state { text-align: center; padding: 30px 12px; color: var(--text-muted); font-size: 0.8rem; line-height: 1.8; } .empty-icon { font-size: 1.75rem; margin-bottom: 6px; opacity: 0.4; } /* ── UTILITY ───────────────────────────────────────────────── */ .hidden { display: none !important; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .flex-row { display: flex; align-items: center; gap: 8px; } /* ================================================================ LANDING PAGE (index.html) ================================================================ */ .landing-body { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg-page); } /* Hero */ .landing-hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px 24px; position: relative; overflow: hidden; } /* Subtle grid background */ .landing-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 48px 48px; opacity: 0.4; pointer-events: none; } /* Gradient fade over grid */ .landing-hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 50%, transparent 30%, var(--bg-page) 100%); pointer-events: none; } .landing-content { position: relative; z-index: 1; max-width: 600px; } .landing-logo { width: 72px; height: 72px; background: linear-gradient(135deg, var(--accent), var(--accent-hover)); border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 28px; box-shadow: 0 8px 30px var(--accent-glow), 0 2px 8px rgba(0,0,0,.1); } .landing-eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; } .landing-headline { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 900; letter-spacing: -0.04em; line-height: 1.1; color: var(--text-primary); margin-bottom: 18px; } .landing-headline em { font-style: normal; color: var(--accent); } .landing-sub { font-size: 1rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 36px; max-width: 460px; margin-left: auto; margin-right: auto; } .landing-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .btn-cta { display: inline-flex; align-items: center; gap: 8px; font-family: inherit; font-weight: 700; font-size: 0.92rem; padding: 13px 28px; border-radius: var(--radius-md); cursor: pointer; border: none; text-decoration: none; transition: all 0.18s; letter-spacing: 0.01em; } .btn-cta-primary { background: var(--accent); color: #fff; box-shadow: 0 4px 16px var(--accent-glow); } .btn-cta-primary:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 8px 24px var(--accent-glow); } .btn-cta-ghost { background: var(--bg-surface); color: var(--text-secondary); border: 1px solid var(--border); } .btn-cta-ghost:hover { color: var(--text-primary); border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--shadow-sm); } /* Feature Grid */ .landing-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 900px; margin: 48px auto 0; padding: 0 24px; position: relative; z-index: 1; width: 100%; } @media (max-width: 768px) { .landing-features { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .landing-features { grid-template-columns: 1fr; } } .feature-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 20px; box-shadow: var(--shadow-sm); transition: transform 0.2s, box-shadow 0.2s; } .feature-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .feature-icon { width: 38px; height: 38px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; margin-bottom: 12px; } .feature-icon.icon-accent { background: var(--accent-light); } .feature-icon.icon-green { background: var(--green-light); } .feature-icon.icon-yellow { background: var(--yellow-light); } .feature-icon.icon-red { background: var(--red-light); } .feature-title { font-size: 0.85rem; font-weight: 700; color: var(--text-primary); margin-bottom: 5px; } .feature-desc { font-size: 0.75rem; color: var(--text-muted); line-height: 1.6; } /* Landing Nav */ .landing-nav { display: flex; align-items: center; justify-content: space-between; padding: 18px 32px; border-bottom: 1px solid var(--border); background: var(--bg-surface); position: sticky; top: 0; z-index: 50; } .landing-nav-logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1rem; letter-spacing: -0.02em; color: var(--text-primary); text-decoration: none; } .landing-nav-logo-icon { width: 30px; height: 30px; background: linear-gradient(135deg, var(--accent), var(--accent-hover)); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; } /* Landing Footer */ .landing-footer { border-top: 1px solid var(--border); padding: 20px 32px; text-align: center; font-size: 0.72rem; color: var(--text-muted); font-weight: 500; } /* ════════════════════════════════════════════════════════════ PHASE 2 ADDITIONS — Recurring · Terminal · Odometer · Archive ════════════════════════════════════════════════════════════ */ /* ── Type toggle: Recurring active state ──────────────────── */ .type-toggle-btn.active-recurring { background: var(--accent-light, #ede9fe); color: var(--accent, #6366f1); border-color: var(--accent-glow, rgba(99,102,241,.4)); box-shadow: 0 0 0 2px var(--accent-glow, rgba(99,102,241,.18)); } /* ── Recurring badge on cards ─────────────────────────────── */ .badge-recurring { background: linear-gradient(135deg, var(--accent-light, #ede9fe), #f0fdfa); color: var(--accent, #6366f1); border: 1px solid var(--accent-glow, rgba(99,102,241,.35)); font-weight: 700; } /* ── Live OCR Terminal ────────────────────────────────────── */ .ocr-terminal { margin-top: 10px; border-radius: 10px; background: #0f172a; color: #e2e8f0; font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace; font-size: 0.72rem; border: 1px solid #1e293b; box-shadow: 0 6px 22px rgba(15, 23, 42, .35), inset 0 0 0 1px rgba(99, 102, 241, .08); overflow: hidden; transition: opacity .25s ease, transform .25s ease; } .ocr-terminal.hidden { display: none; } .ocr-terminal-header { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: linear-gradient(180deg, #1e293b, #0f172a); border-bottom: 1px solid #1e293b; font-size: 0.7rem; } .ocr-terminal-dots { display: inline-flex; gap: 5px; } .ocr-terminal-dots .dot { width: 9px; height: 9px; border-radius: 50%; } .ocr-terminal-dots .dot-r { background: #ef4444; box-shadow: 0 0 6px rgba(239,68,68,.5); } .ocr-terminal-dots .dot-y { background: #f59e0b; box-shadow: 0 0 6px rgba(245,158,11,.5); } .ocr-terminal-dots .dot-g { background: #10b981; box-shadow: 0 0 6px rgba(16,185,129,.5); } .ocr-terminal-title { flex: 1; letter-spacing: .04em; color: #94a3b8; font-weight: 600; } .ocr-terminal-status { font-weight: 700; letter-spacing: .03em; padding: 2px 8px; border-radius: 999px; background: #1e293b; color: #94a3b8; border: 1px solid #334155; } .ocr-terminal-status.term-status-running { color: #fbbf24; border-color: rgba(251, 191, 36, .35); background: rgba(251, 191, 36, .08); animation: term-status-pulse 1.4s ease-in-out infinite; } .ocr-terminal-status.term-status-success { color: #34d399; border-color: rgba(52, 211, 153, .35); background: rgba(52, 211, 153, .08); } .ocr-terminal-status.term-status-error { color: #fca5a5; border-color: rgba(252, 165, 165, .4); background: rgba(220, 38, 38, .12); } @keyframes term-status-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } .ocr-terminal-body { padding: 10px 14px; max-height: 220px; overflow-y: auto; background: #0b1220; scroll-behavior: smooth; } .ocr-terminal-body::-webkit-scrollbar { width: 6px; } .ocr-terminal-body::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; } .ocr-term-line { padding: 2px 0; line-height: 1.5; white-space: pre-wrap; word-break: break-word; display: flex; gap: 8px; align-items: baseline; border-left: 2px solid transparent; padding-left: 8px; margin-left: -8px; } .ocr-term-line.ocr-term-success { border-left-color: #10b981; } .ocr-term-line.ocr-term-warn { border-left-color: #f59e0b; } .ocr-term-line.ocr-term-error { border-left-color: #ef4444; } .ocr-term-line.ocr-term-info { border-left-color: #475569; } .ocr-term-ts { color: #64748b; font-size: 0.65rem; flex-shrink: 0; font-variant-numeric: tabular-nums; } .ocr-term-tag { font-weight: 700; font-size: 0.66rem; letter-spacing: .04em; flex-shrink: 0; } .ocr-term-tag.tag-system, .ocr-term-tag.tag-info { color: #93c5fd; } .ocr-term-tag.tag-scan, .ocr-term-tag.tag-scanning { color: #c4b5fd; } .ocr-term-tag.tag-qr { color: #6ee7b7; } .ocr-term-tag.tag-ocr { color: #fcd34d; } .ocr-term-tag.tag-plan { color: #fb7185; font-weight: 800; } .ocr-term-tag.tag-success { color: #34d399; } .ocr-term-tag.tag-warn, .ocr-term-tag.tag-partial { color: #fbbf24; } .ocr-term-tag.tag-error { color: #fca5a5; } .ocr-term-msg { color: #cbd5e1; flex: 1; } /* Pulsing cursor while running */ .ocr-terminal.running .ocr-terminal-body::after { content: '▋'; display: block; color: #6ee7b7; animation: term-cursor-blink 0.95s steps(1) infinite; margin-left: 8px; margin-top: 2px; } @keyframes term-cursor-blink { 50% { opacity: 0; } } /* ── Odometer counter ─────────────────────────────────────── */ .odometer-segment { display: inline-block; font-variant-numeric: tabular-nums; transition: transform .3s ease, color .3s ease; } .stat-value.odometer-pulsing { text-shadow: 0 0 12px var(--accent-glow, rgba(99,102,241,.25)); } .stat-value.odometer-done { animation: odometer-bump .25s ease-out; } @keyframes odometer-bump { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } } .salary-available-amount.odometer-pulsing, #availableAmount.odometer-pulsing { transition: text-shadow .3s ease; } /* ── Archive Modal ────────────────────────────────────────── */ .archive-modal { max-width: 720px; } .archive-list-info { font-size: 0.78rem; color: var(--text-muted); padding: 0 32px 12px; border-bottom: 1px solid var(--border); margin-bottom: 12px; } .archive-list { padding: 0 32px 32px; max-height: 60vh; overflow-y: auto; } .archive-row { display: grid; grid-template-columns: 36px 1fr auto; gap: 14px; align-items: center; padding: 12px 14px; margin-bottom: 8px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px; transition: border-color .15s, box-shadow .15s, transform .15s; } .archive-row:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); } .archive-row-icon { font-size: 1.4rem; text-align: center; line-height: 1; } .archive-row-title { font-weight: 700; font-size: 0.92rem; color: var(--text-primary); margin-bottom: 2px; } .archive-row-meta { font-size: 0.72rem; color: var(--text-muted); font-variant-numeric: tabular-nums; } .archive-row-actions { display: flex; gap: 6px; flex-shrink: 0; } .archive-row-actions .btn-sm { padding: 6px 10px; font-size: 0.72rem; } /* ── Edit-Button hover ────────────────────────────────────── */ .entry-actions .btn-icon[title="Bearbeiten"]:hover { color: var(--accent, #6366f1); background: var(--accent-light, #ede9fe); } .entry-actions .btn-icon[title="Archivieren"]:hover { color: #475569; background: #f1f5f9; } /* ── Soft micro-transitions on cards ──────────────────────── */ .entry-card { transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease, background 0.25s ease; } .kanban-cards .entry-card { animation: card-fade-in .28s ease-out; } @keyframes card-fade-in { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ════════════════════════════════════════════════════════════ PHASE 3 — SESSION SAVE/RESTORE (FS Access API) ════════════════════════════════════════════════════════════ */ /* End-Session button in header */ .end-session-btn { border: 1px solid var(--accent-glow, rgba(99,102,241,.35)) !important; color: var(--accent, #6366f1) !important; font-weight: 700 !important; background: linear-gradient(180deg, var(--accent-light, #ede9fe), transparent) !important; } .end-session-btn:hover { background: var(--accent-light, #ede9fe) !important; box-shadow: 0 0 0 3px var(--accent-glow, rgba(99,102,241,.18)) !important; transform: translateY(-1px); } /* ── LOGIN MODAL ──────────────────────────────────────────── */ .login-modal { max-width: 640px; } .login-info { font-size: 0.82rem; color: var(--text-muted); padding: 0 32px 14px; line-height: 1.5; } .login-list { padding: 0 24px; max-height: 56vh; overflow-y: auto; } .login-row { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; margin-bottom: 8px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px; transition: border-color .15s, transform .15s, box-shadow .15s; } .login-row:hover { border-color: var(--accent, #6366f1); box-shadow: var(--shadow-md); transform: translateY(-1px); } .login-row-latest { border-color: var(--accent, #6366f1); background: linear-gradient(135deg, var(--accent-light, #ede9fe), var(--bg-surface)); box-shadow: 0 0 0 2px var(--accent-glow, rgba(99,102,241,.15)); } .login-row-icon { font-size: 1.3rem; text-align: center; line-height: 1; } .login-row-title { font-weight: 700; font-size: 0.86rem; color: var(--text-primary); margin-bottom: 3px; font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace; } .login-row-meta { font-size: 0.72rem; color: var(--text-muted); font-variant-numeric: tabular-nums; } .login-row-actions { display: flex; gap: 6px; flex-shrink: 0; } .login-row-actions .btn-sm { padding: 6px 10px; font-size: 0.72rem; } .login-footer { display: flex; gap: 10px; justify-content: space-between; padding: 18px 32px 24px; border-top: 1px solid var(--border); margin-top: 12px; flex-wrap: wrap; } .login-footer .btn-lg { font-size: .82rem; padding: 10px 18px; } /* ── BEENDET-OVERLAY ──────────────────────────────────────── */ .ended-modal { max-width: 460px; text-align: center; padding: 36px 32px 32px !important; } .ended-icon { font-size: 3rem; margin-bottom: 12px; filter: drop-shadow(0 0 14px var(--accent-glow, rgba(99,102,241,.4))); animation: ended-pop .5s cubic-bezier(.34,1.56,.64,1); } .ended-title { font-size: 1.4rem; font-weight: 800; color: var(--text-primary); margin-bottom: 14px; letter-spacing: -0.01em; } .ended-info { font-size: 0.84rem; color: var(--text-muted); margin-bottom: 22px; line-height: 1.55; } .ended-info code { background: var(--bg-page); padding: 2px 8px; border-radius: 5px; font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace; font-size: 0.78rem; color: var(--accent, #6366f1); font-weight: 700; } .ended-file { margin: 6px 0 8px; word-break: break-all; } .ended-time { font-size: 0.7rem; color: var(--text-muted); font-variant-numeric: tabular-nums; letter-spacing: .03em; } @keyframes ended-pop { 0% { transform: scale(.5) rotate(-12deg); opacity: 0; } 60% { transform: scale(1.1) rotate(4deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } } /* ════════════════════════════════════════════════════════════ PULSE BRAND — Logo, Title, Live Engine effects, Notes/IDs ════════════════════════════════════════════════════════════ */ /* ── Pulse logo SVG ───────────────────────────────────────── */ .pulse-logo-link { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: var(--pulse-grad-soft); border: 1px solid var(--accent-glow); position: relative; transition: transform .25s ease, box-shadow .25s ease; } .pulse-logo-link::before { content: ''; position: absolute; inset: -2px; border-radius: 16px; background: var(--pulse-grad); z-index: -1; filter: blur(14px); opacity: 0.35; transition: opacity .25s ease; } .pulse-logo-link:hover { transform: translateY(-1px) scale(1.04); box-shadow: 0 0 0 3px var(--accent-glow), 0 8px 22px var(--accent-2-glow); } .pulse-logo-link:hover::before { opacity: 0.55; } .pulse-logo { width: 38px; height: 38px; display: block; } .pulse-wave { stroke-dasharray: 120; stroke-dashoffset: 0; animation: pulse-wave-draw 2.6s ease-in-out infinite; } .pulse-wave-glow { animation: pulse-wave-glow 2.6s ease-in-out infinite; } @keyframes pulse-wave-draw { 0% { stroke-dashoffset: 120; } 35% { stroke-dashoffset: 0; } 60% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -120; } } @keyframes pulse-wave-glow { 0%, 100% { opacity: 0.3; } 35% { opacity: 0.85; } 60% { opacity: 0.85; } } /* ── Pulse title with gradient ────────────────────────────── */ .app-title { background: var(--pulse-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 900; font-size: 1.55rem; letter-spacing: -0.04em; line-height: 1; position: relative; } .app-title-dot { display: inline-block; margin-left: 4px; background: var(--pulse-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: pulse-dot-blink 1.4s ease-in-out infinite; } @keyframes pulse-dot-blink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.3; transform: scale(0.7); } } .app-subtitle { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); margin-top: 2px; } /* ── Notes & invoice ID fields ────────────────────────────── */ .meta-section { margin: 18px 0 6px; padding: 18px; background: var(--bg-surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); position: relative; } .meta-section::before { content: 'META'; position: absolute; top: -8px; left: 14px; background: var(--bg-surface); padding: 0 8px; font-size: 0.62rem; font-weight: 700; letter-spacing: .14em; color: var(--accent); } .form-textarea { font-family: 'Inter', system-ui, sans-serif; resize: vertical; min-height: 64px; line-height: 1.5; } /* Card display: invoice ID + notes preview */ .entry-meta-line { display: flex; gap: 6px; align-items: center; font-size: 0.7rem; color: var(--text-muted); margin-top: 4px; font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace; } .entry-meta-line .meta-id-wrap { display: inline-flex; align-items: center; gap: 0; background: var(--accent-light); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 5px; overflow: hidden; max-width: 100%; } .entry-meta-line .meta-id { color: var(--accent); padding: 2px 8px; font-weight: 700; letter-spacing: .03em; cursor: text; user-select: all; -webkit-user-select: all; -webkit-touch-callout: default; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; } .entry-meta-line .meta-id::selection { background: var(--accent); color: #0a0e17; } .entry-meta-line .meta-id-copy { background: transparent; border: none; border-left: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); color: var(--accent); padding: 2px 8px; cursor: pointer; font-size: .75rem; line-height: 1; transition: background .15s ease, color .15s ease, transform .15s ease; display: inline-flex; align-items: center; justify-content: center; } .entry-meta-line .meta-id-copy:hover { background: var(--accent); color: #0a0e17; } .entry-meta-line .meta-id-copy.copied { background: var(--green); color: #0a0e17; transform: scale(1.08); } .entry-meta-line .meta-id-copy:active { transform: scale(.92); } .entry-notes { margin-top: 6px; padding: 8px 10px; background: var(--bg-surface-2); border-left: 3px solid var(--accent-2); border-radius: 0 6px 6px 0; font-size: 0.74rem; color: var(--text-secondary); line-height: 1.45; font-style: italic; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .entry-notes-toggle { font-size: 0.66rem; color: var(--accent); cursor: pointer; margin-top: 2px; font-style: normal; font-weight: 700; letter-spacing: .04em; } .entry-notes-toggle:hover { text-decoration: underline; } .entry-notes.expanded { -webkit-line-clamp: unset; display: block; } /* ── Quick-Note modal ─────────────────────────────────────── */ .quick-note-modal { max-width: 520px; } /* ── Recurring badge with Pulse gradient ──────────────────── */ .badge-recurring { background: var(--pulse-grad-soft); color: var(--accent); border: 1px solid var(--accent-glow); font-weight: 700; } [data-theme="dark"] .badge-recurring { color: var(--accent); } /* ── Type-toggle for recurring uses Pulse colors ──────────── */ .type-toggle-btn.active-recurring { background: var(--pulse-grad-soft); color: var(--accent); border-color: var(--accent-glow); box-shadow: 0 0 0 2px var(--accent-glow); } /* ── Stat cards live-engine wave shimmer (top accent line) ── */ .stat-card { position: relative; overflow: hidden; } .stat-card::after { content: ''; position: absolute; bottom: 0; left: -100%; width: 100%; height: 2px; background: var(--pulse-grad); animation: stat-shimmer 3.8s ease-in-out infinite; } .stat-card.stat-due::after { animation-delay: 0s; } .stat-card.stat-open::after { animation-delay: 1.2s; } .stat-card.stat-paid::after { animation-delay: 2.4s; background: linear-gradient(90deg, transparent, var(--green), transparent); } @keyframes stat-shimmer { 0% { left: -100%; } 50% { left: 100%; } 100% { left: 100%; } } /* ── Buttons get Pulse-glow on hover ──────────────────────── */ .btn-primary { background: var(--pulse-grad); border: none; color: #fff; font-weight: 700; position: relative; transition: transform .15s ease, box-shadow .25s ease, filter .15s ease; box-shadow: 0 4px 14px var(--accent-glow); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 22px var(--accent-2-glow), 0 2px 8px var(--accent-glow); filter: brightness(1.06); } .btn-primary:active { transform: translateY(0); filter: brightness(0.95); } /* End-Session uses Pulse colors instead of generic accent */ .end-session-btn { border: 1px solid var(--accent-glow) !important; color: var(--accent) !important; font-weight: 700 !important; background: var(--pulse-grad-soft) !important; } .end-session-btn:hover { background: var(--accent-light) !important; box-shadow: 0 0 0 3px var(--accent-glow), 0 4px 16px var(--accent-2-glow) !important; transform: translateY(-1px); } /* ── Header logo container layout shim ────────────────────── */ .header-left { display: flex; align-items: center; gap: 12px; } /* ── Live engine: subtle background pulse on body ─────────── */ [data-theme="dark"] body { background: radial-gradient(ellipse at top right, rgba(249,115,22,0.06) 0%, transparent 50%), radial-gradient(ellipse at bottom left, rgba(236,72,153,0.04) 0%, transparent 50%), var(--bg-page); background-attachment: fixed; } /* ── Theme toggle gets a pulse aura in dark ───────────────── */ [data-theme="dark"] .theme-toggle:hover { box-shadow: 0 0 0 2px var(--accent-glow); } /* ── Card urgency-overdue uses Pulse-magenta tint ─────────── */ [data-theme="dark"] .entry-card.urgency-overdue { background: linear-gradient(135deg, rgba(248,113,113,0.06), rgba(236,72,153,0.04)); } /* ── Confetti burst behind on completion (layered) ────────── */ .boom-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 9999; } /* ── Modals: dark-mode-tuned glow border ──────────────────── */ [data-theme="dark"] .modal-box { background: var(--bg-surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg), 0 0 60px rgba(249,115,22,0.04); } [data-theme="dark"] .modal-overlay { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: rgba(7, 9, 15, 0.65); } /* ════════════════════════════════════════════════════════════ PHASED INSTALLMENTS — Toggle, Phases, Frozen-History UI ════════════════════════════════════════════════════════════ */ /* ── Phased toggle row ────────────────────────────────────── */ .phased-toggle-row { display: flex; gap: 14px; align-items: flex-start; margin: 14px 0 18px; padding: 14px 16px; background: var(--pulse-grad-soft); border: 1px dashed var(--accent-glow); border-radius: var(--radius-md); transition: border-color .2s, background .2s; } .phased-toggle-row:hover { border-color: var(--accent); } .phased-toggle-label { flex: 1; } .phased-toggle-title { font-size: 0.86rem; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; letter-spacing: -0.01em; } .phased-toggle-sub { font-size: 0.72rem; color: var(--text-muted); line-height: 1.5; } /* ── Toggle switch (iOS-style) ────────────────────────────── */ .toggle-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; margin-top: 2px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-switch-slider { position: absolute; cursor: pointer; inset: 0; background: var(--bg-surface-2); border: 1px solid var(--border-strong); border-radius: 14px; transition: background .25s ease, border-color .25s ease; } .toggle-switch-slider::before { content: ''; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: var(--text-secondary); border-radius: 50%; transition: transform .25s cubic-bezier(.34,1.56,.64,1), background .25s; box-shadow: 0 1px 3px rgba(0,0,0,.18); } .toggle-switch input:checked + .toggle-switch-slider { background: var(--pulse-grad); border-color: var(--accent); } .toggle-switch input:checked + .toggle-switch-slider::before { transform: translateX(20px); background: #ffffff; box-shadow: 0 2px 8px var(--accent-glow); } /* ── Phases container ─────────────────────────────────────── */ .phases-container { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; } .phase-row { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 12px 14px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: border-color .15s, transform .15s, box-shadow .15s; animation: phase-row-in .25s ease-out; } .phase-row:hover { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow); } @keyframes phase-row-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .phase-row-num { font-weight: 800; font-size: 1.1rem; background: var(--pulse-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-align: center; line-height: 1.6; } .phase-row-grid { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; } .phase-row-cell { display: flex; flex-direction: column; gap: 4px; } .phase-cell-label { font-size: 0.68rem; font-weight: 700; color: var(--text-muted); letter-spacing: .06em; text-transform: uppercase; } .phase-row-cell .form-input { padding: 8px 10px; font-size: 0.84rem; } .phase-remove-btn { width: 32px; height: 32px; border-radius: 8px; background: transparent; color: var(--text-muted); border: 1px solid var(--border); cursor: pointer; font-size: 0.8rem; align-self: end; transition: all .15s ease; } .phase-remove-btn:hover:not(:disabled) { background: var(--red-light); color: var(--red); border-color: var(--red); } .phase-remove-btn:disabled { opacity: 0.4; cursor: not-allowed; } /* ── Frozen phase (ledger lock) ───────────────────────────── */ .phase-row.phase-frozen { background: var(--bg-surface-2); border-style: dashed; opacity: 0.85; position: relative; } .phase-row.phase-frozen::after { content: '🔒 history-locked'; position: absolute; top: 6px; right: 10px; font-size: 0.6rem; color: var(--text-muted); letter-spacing: .08em; font-weight: 700; text-transform: uppercase; } .phase-row.phase-frozen .phase-row-num { filter: grayscale(.5); } /* ── Add-Phase button ─────────────────────────────────────── */ .btn-add-phase { margin-top: 10px; width: 100%; border: 1px dashed var(--accent); background: transparent; color: var(--accent); font-weight: 700; padding: 12px; border-radius: var(--radius-sm); transition: background .2s, transform .15s; } .btn-add-phase:hover { background: var(--accent-light); transform: translateY(-1px); } /* ── Phased summary pills ─────────────────────────────────── */ .phased-summary { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .phased-summary-pill { padding: 6px 14px; background: var(--bg-surface-2); border: 1px solid var(--border); border-radius: 999px; font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); font-variant-numeric: tabular-nums; } .phased-summary-pill.phased-summary-amount { background: var(--pulse-grad-soft); border-color: var(--accent-glow); color: var(--accent); } /* Card display: ledger-frozen rate badge */ .entry-card .badge-paid-month[data-frozen="1"]::before { content: '🔒 '; } /* ════════════════════════════════════════════════════════════ ANCHOR HINT + REST-PHASE BLOCK ════════════════════════════════════════════════════════════ */ /* ── Anker-Hinweis über den Phasen ────────────────────────── */ .phased-anchor-hint { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 14px; background: var(--accent-light); border: 1px solid var(--accent-glow); border-radius: var(--radius-sm); font-size: 0.78rem; color: var(--text-secondary); line-height: 1.5; } .phased-anchor-badge { background: var(--pulse-grad); color: #ffffff; font-weight: 800; font-size: 0.62rem; letter-spacing: .12em; padding: 3px 8px; border-radius: 999px; flex-shrink: 0; box-shadow: 0 2px 8px var(--accent-glow); } /* ── REST-PHASE block ─────────────────────────────────────── */ .rest-phase-block { margin-top: 14px; padding: 14px 16px; background: var(--bg-surface-2); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius-md); position: relative; animation: rest-phase-in .25s ease-out; } @keyframes rest-phase-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .rest-phase-block.rest-ready { border-left-color: var(--accent); background: linear-gradient(135deg, var(--accent-light), var(--bg-surface-2)); } .rest-phase-block.rest-covered { border-left-color: var(--green); background: var(--green-light); } .rest-phase-block.rest-overshoot { border-left-color: var(--red); background: var(--red-light); } .rest-phase-block.rest-needs-rate { border-left-color: var(--yellow); background: var(--yellow-light); } .rest-phase-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .rest-phase-badge { font-size: 0.66rem; font-weight: 800; letter-spacing: .12em; padding: 3px 10px; border-radius: 999px; background: var(--pulse-grad); color: #ffffff; box-shadow: 0 2px 8px var(--accent-glow); } .rest-phase-block.rest-covered .rest-phase-badge { background: var(--green); box-shadow: 0 2px 8px var(--green-glow); } .rest-phase-block.rest-overshoot .rest-phase-badge { background: var(--red); box-shadow: 0 2px 8px var(--red-glow); } .rest-phase-subtitle { font-size: 0.7rem; color: var(--text-muted); font-style: italic; } .rest-phase-info { font-size: 0.86rem; color: var(--text-primary); line-height: 1.6; margin: 6px 0 10px; } .rest-phase-info strong { font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 800; } .rest-covered .rest-phase-info strong { color: var(--green); } .rest-covered-msg { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.88rem; color: var(--green); } .rest-overshoot-msg { font-weight: 600; color: var(--red); line-height: 1.55; } .rest-overshoot-msg strong { font-variant-numeric: tabular-nums; color: var(--red); font-weight: 800; } .rest-phase-rate-row { display: grid; grid-template-columns: 1fr; gap: 4px; margin: 10px 0 6px; padding: 8px 10px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-sm); } .rest-phase-rate-row .form-input { padding: 8px 10px; font-size: 0.92rem; font-weight: 700; font-variant-numeric: tabular-nums; } .rest-phase-rate-row .form-input:disabled { opacity: 0.45; cursor: not-allowed; } .rest-phase-schedule { font-size: 0.84rem; line-height: 1.55; margin-top: 6px; } .rest-schedule-desc { color: var(--text-secondary); } .rest-schedule-detail { margin-top: 4px; padding: 6px 10px; background: var(--bg-surface); border-radius: var(--radius-xs); border-left: 2px solid var(--accent); font-variant-numeric: tabular-nums; } .rest-schedule-detail strong { color: var(--accent); font-weight: 800; } .rest-schedule-split { display: block; margin-top: 2px; color: var(--text-muted); font-size: 0.78rem; } .rest-override-tag { display: inline-block; margin-left: 8px; padding: 2px 8px; background: var(--accent-2-light); color: var(--accent-2); border: 1px solid var(--accent-2-glow); border-radius: 999px; font-size: 0.64rem; font-weight: 700; letter-spacing: .04em; } .rest-hint { font-style: italic; color: var(--text-muted); font-size: 0.78rem; } /* Subtle pulse effect on the rest-block when it's the "active" calculation */ .rest-phase-block.rest-ready::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: var(--radius-md); box-shadow: 0 0 0 0 var(--accent-glow); animation: rest-ready-pulse 2.4s ease-in-out infinite; } @keyframes rest-ready-pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); } 50% { box-shadow: 0 0 0 6px transparent; } } /* ════════════════════════════════════════════════════════════ PAYMENT CELEBRATION EFFECTS ════════════════════════════════════════════════════════════ */ /* ── 1. Card border flash (green glow ring) ───────────────── */ .entry-card.just-paid { border-color: var(--green) !important; animation: card-paid-pulse 1.4s cubic-bezier(.34,1.56,.64,1); position: relative; z-index: 5; } .entry-card.just-paid-final { animation: card-paid-final 1.4s cubic-bezier(.34,1.56,.64,1); } @keyframes card-paid-pulse { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,0.0), 0 0 0 0 rgba(16,185,129,0.0); transform: scale(1); } 20% { box-shadow: 0 0 0 4px rgba(16,185,129,0.55), 0 0 32px rgba(16,185,129,0.45); transform: scale(1.025); } 60% { box-shadow: 0 0 0 8px rgba(16,185,129,0.0), 0 0 60px rgba(16,185,129,0.15); transform: scale(1); } 100% { box-shadow: 0 0 0 0 transparent; transform: scale(1); } } @keyframes card-paid-final { 0% { box-shadow: 0 0 0 0 var(--accent-glow); transform: scale(1); } 18% { box-shadow: 0 0 0 6px var(--accent-glow), 0 0 40px var(--accent-2-glow); transform: scale(1.04) rotate(-0.5deg); } 40% { box-shadow: 0 0 0 14px transparent, 0 0 80px var(--accent-glow); transform: scale(1.0) rotate(0.5deg); } 100% { box-shadow: 0 0 0 0 transparent; transform: scale(1) rotate(0); } } /* ── 2. Progress ring/bar shimmer for installments ────────── */ .entry-card.just-paid-installment .progress-bar-fill { animation: progress-shimmer 1.2s ease-out; background-image: linear-gradient( 90deg, currentColor 0%, rgba(255,255,255,0.85) 40%, currentColor 80% ); background-size: 200% 100%; } @keyframes progress-shimmer { from { background-position: 200% 0%; } to { background-position: -200% 0%; } } .entry-card.just-paid-installment .progress-ring-fill { animation: ring-glow 1.2s ease-out; } @keyframes ring-glow { 0% { filter: drop-shadow(0 0 0 transparent); } 40% { filter: drop-shadow(0 0 8px var(--green)); } 100% { filter: drop-shadow(0 0 0 transparent); } } /* ── 3. Floating "+CHF X.XX" badge ────────────────────────── */ .pay-float-amount { position: fixed; transform: translate(-50%, 0); z-index: 10000; font-size: 1.7rem; font-weight: 900; letter-spacing: -0.02em; color: #10b981; text-shadow: 0 0 20px rgba(16,185,129,0.65), 0 2px 4px rgba(0,0,0,0.35); pointer-events: none; font-variant-numeric: tabular-nums; animation: pay-float-up 1.8s cubic-bezier(.16,1,.3,1) forwards; white-space: nowrap; } .pay-float-amount.pay-float-final { font-size: 2.2rem; background: var(--pulse-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; filter: drop-shadow(0 0 12px var(--accent-glow)) drop-shadow(0 0 24px var(--accent-2-glow)); animation-duration: 2.2s; } @keyframes pay-float-up { 0% { transform: translate(-50%, 0) scale(0.5); opacity: 0; } 18% { transform: translate(-50%, -10px) scale(1.3); opacity: 1; } 35% { transform: translate(-50%, -28px) scale(1.0); opacity: 1; } 70% { transform: translate(-50%, -70px) scale(0.95); opacity: 0.95; } 100% { transform: translate(-50%, -120px) scale(0.8); opacity: 0; } } /* Secondary "Rate N / M" label */ .pay-float-sub { position: fixed; transform: translate(-50%, 0); z-index: 9999; font-size: 0.78rem; font-weight: 700; letter-spacing: .04em; color: var(--text-secondary); background: rgba(15, 19, 28, 0.85); padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.08); pointer-events: none; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: pay-float-sub 1.6s ease-out forwards; } [data-theme="light"] .pay-float-sub { background: rgba(255,255,255,0.95); border-color: rgba(0,0,0,.06); color: var(--text-primary); } @keyframes pay-float-sub { 0% { opacity: 0; transform: translate(-50%, -4px) scale(0.7); } 25% { opacity: 1; transform: translate(-50%, -12px) scale(1.0); } 70% { opacity: 1; transform: translate(-50%, -40px) scale(1.0); } 100% { opacity: 0; transform: translate(-50%, -70px) scale(0.9); } } /* ── 4. Sparkle emoji DOM particles ───────────────────────── */ .pay-sparkle { position: fixed; transform: translate(-50%, -50%); z-index: 9998; font-size: 1.2rem; pointer-events: none; animation: pay-sparkle-scatter 1.2s cubic-bezier(.16,1,.3,1) forwards; filter: drop-shadow(0 0 6px rgba(251,191,36,.6)); } @keyframes pay-sparkle-scatter { 0% { transform: translate(-50%, -50%) scale(0.4) rotate(0); opacity: 0; } 15% { transform: translate(-50%, -50%) scale(1.2) rotate(calc(var(--rot) * 0.2)); opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.5) rotate(var(--rot)); opacity: 0; } } /* ── 5. Top-edge glow on payment ──────────────────────────── */ .pay-edge-glow { position: fixed; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, transparent, #10b981, #34d399, #10b981, transparent); z-index: 10001; pointer-events: none; animation: edge-glow-flash 1.1s ease-out forwards; box-shadow: 0 0 24px rgba(16,185,129,0.7); } .pay-edge-glow.edge-final { background: linear-gradient(90deg, transparent, #f97316, #fb7185, #ec4899, #fb7185, #f97316, transparent); box-shadow: 0 0 24px var(--accent-glow), 0 0 40px var(--accent-2-glow); } @keyframes edge-glow-flash { 0% { opacity: 0; transform: scaleX(0.2); } 20% { opacity: 1; transform: scaleX(1); } 80% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } } /* ── 6. Card slide-out when archiving ─────────────────────── */ .entry-card.card-leaving { animation: card-leaving 0.62s cubic-bezier(.5,0,.75,0) forwards; pointer-events: none; } @keyframes card-leaving { 0% { opacity: 1; transform: scale(1) rotate(0) translateY(0); filter: blur(0); } 30% { opacity: 1; transform: scale(1.04) rotate(-1deg) translateY(-4px); } 100% { opacity: 0; transform: scale(0.86) rotate(-3deg) translateY(-30px); filter: blur(4px); } } /* Reduce motion accessibility */ @media (prefers-reduced-motion: reduce) { .pay-float-amount, .pay-float-sub, .pay-sparkle, .pay-edge-glow, .entry-card.just-paid, .entry-card.just-paid-installment, .entry-card.just-paid-final, .entry-card.card-leaving { animation-duration: .01ms !important; } } /* ════════════════════════════════════════════════════════════ v6 — CATEGORY & TAG ENGINE · BULK TIMELINE · CAMERA BRIDGE DOC VIEWER · DOPAMIN-THERMOMETER · NEXT-ACTION ALARM ════════════════════════════════════════════════════════════ */ /* ─── Category Filter Bar (dashboard) ─── */ .category-filter-bar { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 6px 4px 10px; scrollbar-width: thin; } .category-filter-bar::-webkit-scrollbar { height: 6px; } .cat-filter-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: var(--bg-surface); border: 1.5px solid var(--border); color: var(--text-secondary); font-size: .8rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all .18s ease; } .cat-filter-pill:hover { transform: translateY(-1px); border-color: var(--accent); color: var(--text-primary); } .cat-filter-pill.active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #0a0e17; border-color: transparent; box-shadow: 0 6px 18px var(--accent-glow); } .cat-filter-pill.zero-amount { opacity: .55; } .cat-filter-pill.zero-amount.active { opacity: 1; } .cat-filter-icon { font-size: .95rem; } .cat-filter-amount { font-weight: 800; background: rgba(0,0,0,.10); padding: 2px 8px; border-radius: 99px; font-size: .75rem; } .cat-filter-pill.active .cat-filter-amount { background: rgba(255,255,255,.18); color: #0a0e17; } /* ─── Category Picker (form modal) ─── */ .category-picker { display: flex; flex-wrap: wrap; gap: 8px; } .cat-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; background: var(--bg-surface-2); border: 1.5px solid var(--border); color: var(--text-secondary); font-size: .82rem; font-weight: 600; cursor: pointer; transition: all .15s ease; } .cat-pill:hover { border-color: var(--accent); color: var(--text-primary); } .cat-pill.active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; color: #0a0e17; box-shadow: 0 4px 14px var(--accent-glow); } .cat-pill-emoji { font-size: 1rem; } .cat-hint { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 12px; background: var(--accent-light); border-radius: 999px; font-size: .72rem; color: var(--accent); font-weight: 600; } /* ─── Tag Chips ─── */ .tag-input-row { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; } .tag-chips-container { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 100%; } .tag-input { flex: 1 1 200px; min-width: 200px; } .tag-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 11px; border-radius: 99px; background: var(--accent-light); border: 1px solid var(--accent); color: var(--accent); font-size: .76rem; font-weight: 700; } .tag-chip-remove { border: none; background: transparent; color: var(--accent); font-size: 1.05rem; line-height: 1; cursor: pointer; padding: 0 2px; opacity: .7; } .tag-chip-remove:hover { opacity: 1; } .tag-chip-mini { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 99px; background: rgba(251,146,60,.10); color: var(--accent); font-size: .68rem; font-weight: 700; } .entry-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 4px; } /* ─── Category badge on cards ─── */ .badge-category { background: color-mix(in srgb, var(--cat-color, var(--accent)) 14%, transparent); color: var(--cat-color, var(--accent)); border: 1px solid color-mix(in srgb, var(--cat-color, var(--accent)) 40%, transparent); } .badge-bulk { background: rgba(167,139,250,.14); color: #a78bfa; border: 1px solid rgba(167,139,250,.35); } .entry-badge-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; } /* ─── Communications block ─── */ .comms-add-row { margin-bottom: 6px; } .comms-actions { display: flex; gap: 8px; margin-top: 6px; } .communications-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } .comms-empty { color: var(--text-muted); font-size: .8rem; font-style: italic; padding: 6px 0; } .comm-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; background: var(--bg-surface-2); border: 1px solid var(--border); border-radius: 10px; } .comm-icon { color: var(--accent); font-size: 1rem; padding-top: 2px; } .comm-main { flex: 1; min-width: 0; } .comm-title { font-weight: 700; font-size: .85rem; } .comm-meta { color: var(--text-muted); font-size: .7rem; margin-top: 2px; } .comm-body { color: var(--text-secondary); font-size: .78rem; margin-top: 6px; padding: 6px 8px; background: var(--bg-surface); border-radius: 6px; white-space: pre-wrap; word-break: break-word; } .btn-icon-x { background: transparent; border: none; color: var(--text-muted); cursor: pointer; padding: 4px 8px; font-size: .9rem; border-radius: 6px; } .btn-icon-x:hover { color: var(--red); background: var(--red-light); } .btn-eye { background: var(--bg-surface); border: 1px solid var(--border); color: var(--accent); padding: 6px 10px; border-radius: 8px; cursor: pointer; font-size: .9rem; transition: all .15s ease; } .btn-eye:hover { background: var(--accent-light); border-color: var(--accent); transform: scale(1.05); } /* ─── Uploaded files list ─── */ .uploaded-files-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } .uploaded-file-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bg-surface-2); border: 1px solid var(--border); border-radius: 10px; } .uploaded-file-icon { color: var(--accent); font-size: 1rem; } .uploaded-file-name { flex: 1; font-size: .82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ─── Camera Bridge button + modal ─── */ .btn-camera-bridge { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; margin-top: 8px; padding: 12px 16px; background: linear-gradient(135deg, rgba(251,146,60,.10), rgba(244,114,182,.10)); border: 1.5px dashed var(--accent); border-radius: 12px; color: var(--accent); font-weight: 700; font-size: .88rem; cursor: pointer; transition: all .15s ease; } .btn-camera-bridge:hover { background: linear-gradient(135deg, rgba(251,146,60,.18), rgba(244,114,182,.18)); transform: translateY(-1px); box-shadow: 0 6px 16px var(--accent-glow); } .btn-camera-bridge i { font-size: 1.3rem; } .btn-camera-bridge-hint { font-size: .68rem; color: var(--text-muted); font-weight: 500; } .modal-cam-bridge { max-width: 420px; } .cam-bridge-body { padding: 16px 20px 24px; text-align: center; } .cam-bridge-instructions { color: var(--text-secondary); font-size: .85rem; margin-bottom: 16px; line-height: 1.5; } .cam-bridge-qr { display: flex; justify-content: center; align-items: center; margin: 0 auto 14px; padding: 12px; background: white; border-radius: 12px; width: 244px; height: 244px; } .cam-bridge-qr img { display: block; } .cam-bridge-url { font-family: 'SF Mono', Consolas, monospace; font-size: .68rem; color: var(--text-muted); margin-bottom: 14px; word-break: break-all; padding: 6px 10px; background: var(--bg-surface-2); border-radius: 6px; } .cam-bridge-status { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; font-size: .82rem; font-weight: 600; } .cam-loading { background: var(--yellow-light); color: var(--yellow); } .cam-waiting { background: var(--accent-light); color: var(--accent); } .cam-connected { background: var(--green-light); color: var(--green); } .cam-receiving { background: var(--accent-2-light); color: var(--accent-2); } .cam-success { background: var(--green-light); color: var(--green); } .cam-error { background: var(--red-light); color: var(--red); } .cam-bridge-tip { margin-top: 14px; color: var(--text-muted); font-size: .72rem; line-height: 1.4; } .btn-lan-link { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 99px; background: var(--accent-light); color: var(--accent); border: 1px solid var(--accent); font-size: .72rem; font-weight: 700; cursor: pointer; transition: all .15s ease; } .btn-lan-link:hover { background: var(--accent); color: #0a0e17; transform: translateY(-1px); } .cam-bridge-status code { background: rgba(0,0,0,.20); padding: 1px 5px; border-radius: 4px; font-size: .85em; } /* ─── Bulk-Serienrechnung toggle + matrix ─── */ .bulk-toggle-row { margin-bottom: 12px; border: 1.5px dashed rgba(167,139,250,.4); background: rgba(167,139,250,.05); } .bulk-matrix-section { margin-bottom: 14px; padding: 12px; border-radius: 12px; background: var(--bg-surface-2); border: 1px solid var(--border); } .bulk-drop-zone { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px; border-radius: 10px; background: var(--bg-surface); border: 1.5px dashed var(--border-strong); color: var(--text-secondary); font-weight: 600; font-size: .88rem; cursor: pointer; transition: all .15s ease; } .bulk-drop-zone:hover, .bulk-drop-zone.drag-over { border-color: #a78bfa; background: rgba(167,139,250,.08); color: #a78bfa; } .bulk-drop-zone i { font-size: 1.25rem; } .bulk-matrix-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; } .bulk-empty { color: var(--text-muted); font-size: .82rem; text-align: center; padding: 14px; } .bulk-row { display: grid; grid-template-columns: 28px 1fr 110px 140px auto auto; gap: 8px; align-items: center; padding: 8px 10px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px; } .bulk-row .form-input { padding: 7px 10px; font-size: .8rem; } .bulk-idx { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-light); color: var(--accent); font-weight: 800; font-size: .75rem; } .bulk-fname { font-size: .78rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bulk-fname i { color: var(--accent); margin-right: 4px; } .bulk-paid-badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 99px; background: var(--green-light); color: var(--green); font-size: .65rem; font-weight: 700; margin-left: 6px; } .bulk-summary { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .bulk-summary-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; background: var(--bg-surface); border: 1px solid var(--border); font-size: .76rem; font-weight: 700; } .bulk-summary-total { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #0a0e17; border-color: transparent; } /* ─── Document Viewer (right slide-in panel) ─── */ .doc-viewer-panel { position: fixed; top: 0; right: 0; width: min(640px, 50vw); height: 100vh; background: var(--bg-surface); border-left: 1px solid var(--border); box-shadow: -12px 0 40px rgba(0,0,0,.35); z-index: 1100; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .28s cubic-bezier(.32,.72,.42,1); } .doc-viewer-panel.open { transform: translateX(0); } .doc-viewer-panel.hidden { display: none; } .doc-viewer-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); } .doc-viewer-title-row { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: .95rem; flex: 1; min-width: 0; } .doc-viewer-title-row i { color: var(--accent); } .doc-viewer-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .doc-viewer-body { flex: 1; overflow: auto; padding: 14px; } .doc-viewer-iframe { width: 100%; height: 100%; border: none; border-radius: 8px; min-height: 70vh; } .doc-viewer-img { max-width: 100%; height: auto; display: block; border-radius: 8px; margin: 0 auto; } @media (max-width: 768px) { .doc-viewer-panel { width: 100vw; } } /* ─── Dopamin-Thermometer (installment cards) ─── */ .dopamin-thermometer { margin-top: 12px; padding: 10px 12px; background: linear-gradient(135deg, rgba(251,146,60,.06), rgba(244,114,182,.06)); border: 1px solid var(--border); border-radius: 10px; } .dopamin-track { position: relative; height: 10px; border-radius: 99px; background: var(--bg-surface-2); overflow: hidden; } .dopamin-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 99px; box-shadow: 0 0 12px var(--accent-glow); transition: width .55s cubic-bezier(.4,0,.2,1); } .dopamin-shine { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.30) 50%, transparent 100%); animation: dopamin-shine-sweep 2.6s ease-in-out infinite; pointer-events: none; } @keyframes dopamin-shine-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .dopamin-label { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; gap: 10px; font-size: .76rem; font-weight: 700; } .dopamin-achieved { color: var(--green); display: inline-flex; align-items: center; gap: 6px; } .dopamin-achieved i { color: var(--accent); } .dopamin-rest { color: var(--text-muted); } .dopamin-rest.dopamin-done { color: var(--accent); background: linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .dopamin-thermometer.dopamin-high .dopamin-fill { background: linear-gradient(90deg, var(--green), #6ee7b7); box-shadow: 0 0 18px var(--green-glow); } .dopamin-thermometer.dopamin-mid .dopamin-fill { background: linear-gradient(90deg, #fbbf24, var(--accent)); } /* ─── Next-Action Alarm (ambient red glow + pin) ─── */ .entry-card.next-action-alert { border-color: var(--red) !important; box-shadow: 0 0 0 2px var(--red-glow), 0 6px 22px rgba(248,113,113,.18); animation: next-action-pulse 2.4s ease-in-out infinite; position: relative; } .entry-card.next-action-alert::before { content: ''; position: absolute; inset: -2px; border-radius: inherit; background: linear-gradient(135deg, rgba(248,113,113,.12), transparent 60%); pointer-events: none; z-index: 0; } @keyframes next-action-pulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(248,113,113,.30), 0 6px 22px rgba(248,113,113,.18); } 50% { box-shadow: 0 0 0 6px rgba(248,113,113,.08), 0 8px 28px rgba(248,113,113,.30); } } .next-action-banner { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: -2px -2px 10px; background: linear-gradient(135deg, rgba(248,113,113,.14), rgba(248,113,113,.06)); border: 1px solid var(--red); border-radius: 10px; position: relative; z-index: 1; } .next-action-banner i { color: var(--red); font-size: 1.1rem; } .next-action-text { font-size: .78rem; color: var(--text-primary); line-height: 1.4; } .next-action-text strong { color: var(--red); } .next-action-desc { color: var(--text-secondary); font-weight: 500; margin-top: 2px; } /* ─── Disabled email button ─── */ .btn-email-stub { opacity: .55; cursor: not-allowed !important; font-size: .72rem !important; } .btn-email-stub:hover { opacity: .75; } /* ─── v6 form section spacing ─── */ .v6-section { border-top: 1px dashed var(--border); padding-top: 14px; margin-top: 14px; } .next-action-row { display: flex; gap: 8px; flex-wrap: wrap; } .next-action-row .form-input { flex: 1; min-width: 160px; }