/* =========================== FAMILY EXPENSE TRACKER CSS RTL | Hebrew | Premium UI =========================== */ /* =========================== GLOBAL SCROLLBARS — primary→secondary gradient thumb on every scrollable surface Applies to body + all elements that scroll. Individual components may override (e.g. carousels hide it entirely with `scrollbar-width: none`). =========================== */ * { scrollbar-width: thin; scrollbar-color: rgba(99,102,241,.45) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: rgba(99,102,241,.05); border-radius: 999px; } *::-webkit-scrollbar-thumb { background: linear-gradient(135deg, rgba(99,102,241,.5), rgba(168,85,247,.5)); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: linear-gradient(135deg, rgba(99,102,241,.85), rgba(168,85,247,.85)); background-clip: padding-box; } *::-webkit-scrollbar-corner { background: transparent; } [data-theme="light"] *::-webkit-scrollbar-track { background: rgba(99,102,241,.04); } /* ---- CSS Variables ---- */ :root { --primary: #6366f1; --primary-light: #818cf8; --primary-dark: #4f46e5; --primary-rgb: 99, 102, 241; --secondary: #8b5cf6; --secondary-rgb: 139, 92, 246; --success: #10b981; --danger: #ef4444; --warning: #f59e0b; --info: #06b6d4; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --shadow-sm: 0 2px 8px rgba(0,0,0,.12); --shadow-md: 0 4px 20px rgba(0,0,0,.18); --shadow-lg: 0 8px 40px rgba(0,0,0,.24); --shadow-glow: 0 0 30px rgba(99,102,241,.35); --transition: 0.25s cubic-bezier(.4,0,.2,1); --font: 'Heebo', sans-serif; --sidebar-w: 270px; --topbar-h: 68px; } /* ---- Dark Theme (default) ---- */ [data-theme="dark"] { --bg: #0d1117; --bg2: #161b22; --bg3: #21262d; --card: rgba(22, 27, 34, 0.92); --card-border: rgba(var(--primary-rgb), .22); --glass: rgba(30, 41, 59, 0.75); --glass-hover: rgba(40, 55, 75, 0.88); --text: #e6edf3; --text-2: #8b949e; --text-3: #6e7681; --border: rgba(255,255,255,.08); --sidebar-bg: #0d1117; --topbar-bg: rgba(13, 17, 23, 0.95); --input-bg: rgba(22,27,34,.9); --input-border:rgba(var(--primary-rgb), .3); --overlay: rgba(0,0,0,.65); --gradient: linear-gradient(135deg, #0d1117 0%, #1a1040 50%, #0d1117 100%); } /* ---- Light Theme ---- */ [data-theme="light"] { --bg: #f0f4ff; --bg2: #e8eeff; --bg3: #dde5ff; --card: rgba(255,255,255,.97); --card-border: rgba(var(--primary-rgb), .18); --glass: rgba(255,255,255,.85); --glass-hover: rgba(255,255,255,.98); --text: #1e293b; --text-2: #475569; --text-3: #94a3b8; --border: rgba(0,0,0,.08); --sidebar-bg: #1e1b4b; --topbar-bg: rgba(240,244,255,.95); --input-bg: rgba(255,255,255,.95); --input-border:rgba(var(--primary-rgb), .35); --overlay: rgba(0,0,0,.4); --gradient: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 50%, #eef2ff 100%); } /* ============================================================ Color Themes (10 curated palettes) — applied via on every page. Each theme overrides the four accent variables (primary / primary-light / primary-dark / secondary) plus the matching `*-rgb` triplets used by rgba() shadows and overlays. Structural colors (bg/card/text) are NOT overridden so the layout stays intact across themes. ============================================================ */ [data-app-theme="indigo"] { /* default — inherits from :root */ --primary: #6366f1; --primary-light: #818cf8; --primary-dark: #4f46e5; --primary-rgb: 99,102,241; --secondary: #8b5cf6; --secondary-rgb: 139,92,246; } [data-app-theme="emerald"] { --primary: #10b981; --primary-light: #34d399; --primary-dark: #059669; --primary-rgb: 16,185,129; --secondary: #14b8a6; --secondary-rgb: 20,184,166; } [data-app-theme="sunset"] { --primary: #f97316; --primary-light: #fb923c; --primary-dark: #ea580c; --primary-rgb: 249,115,22; --secondary: #ec4899; --secondary-rgb: 236,72,153; } [data-app-theme="ocean"] { --primary: #0ea5e9; --primary-light: #38bdf8; --primary-dark: #0284c7; --primary-rgb: 14,165,233; --secondary: #06b6d4; --secondary-rgb: 6,182,212; } [data-app-theme="rose"] { --primary: #e11d48; --primary-light: #f43f5e; --primary-dark: #be123c; --primary-rgb: 225,29,72; --secondary: #ec4899; --secondary-rgb: 236,72,153; } [data-app-theme="gold"] { --primary: #d97706; --primary-light: #f59e0b; --primary-dark: #b45309; --primary-rgb: 217,119,6; --secondary: #eab308; --secondary-rgb: 234,179,8; } [data-app-theme="teal"] { --primary: #14b8a6; --primary-light: #2dd4bf; --primary-dark: #0d9488; --primary-rgb: 20,184,166; --secondary: #06b6d4; --secondary-rgb: 6,182,212; } [data-app-theme="lavender"] { --primary: #a855f7; --primary-light: #c084fc; --primary-dark: #9333ea; --primary-rgb: 168,85,247; --secondary: #d946ef; --secondary-rgb: 217,70,239; } [data-app-theme="sky"] { --primary: #3b82f6; --primary-light: #60a5fa; --primary-dark: #2563eb; --primary-rgb: 59,130,246; --secondary: #6366f1; --secondary-rgb: 99,102,241; } [data-app-theme="forest"] { --primary: #22c55e; --primary-light: #4ade80; --primary-dark: #16a34a; --primary-rgb: 34,197,94; --secondary: #16a34a; --secondary-rgb: 22,163,74; } /* ---- Reset & Base ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { margin: 0; padding: 0; background-color: var(--bg); } html { font-size: 16px; scroll-behavior: smooth; overflow-x: hidden; } body { font-family: var(--font); color: var(--text); min-height: 100vh; direction: rtl; text-align: right; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } body::before { content: ''; position: fixed; inset: 0; background: var(--gradient); z-index: -1; pointer-events: none; } /* ---- Layout ---- */ .layout-main { display: flex; min-height: 100vh; } /* ---- Sidebar ---- */ .sidebar { width: var(--sidebar-w); background: var(--sidebar-bg); border-left: 1px solid var(--card-border); display: flex; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0; z-index: 200; transition: transform var(--transition); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .sidebar-header { padding: 20px 18px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .sidebar-logo { display: flex; align-items: center; gap: 12px; } .logo-icon { width: 44px; height: 44px; background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: #fff; box-shadow: 0 4px 16px rgba(99,102,241,.4); flex-shrink: 0; } .logo-icon-photo { background: rgba(255,255,255,.08) !important; box-shadow: 0 4px 16px rgba(0,0,0,.25); } .logo-text { display: flex; flex-direction: column; } .logo-name { font-size: 1.05rem; font-weight: 800; color: #fff; line-height: 1.15; letter-spacing: .01em; background: linear-gradient(135deg, #fff 0%, #c7d2fe 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .logo-subtitle { font-size: .68rem; color: rgba(255,255,255,.55); line-height: 1.1; margin-top: 1px; letter-spacing: .03em; } .logo-family { font-size: .72rem; color: rgba(255,255,255,.45); margin-top: 3px; font-weight: 500; } .sidebar-close { display: none; background: none; border: none; color: rgba(255,255,255,.5); font-size: 1.1rem; cursor: pointer; padding: 6px; border-radius: 8px; transition: color var(--transition), background var(--transition); } .sidebar-close:hover { color: #fff; background: rgba(255,255,255,.1); } .sidebar-nav { flex: 1; overflow-y: auto; padding: 12px 10px; } .sidebar-nav::-webkit-scrollbar { width: 4px; } .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; } .nav-section { margin-bottom: 18px; } .nav-section-title { font-size: .7rem; font-weight: 700; color: rgba(255,255,255,.35); letter-spacing: .08em; text-transform: uppercase; padding: 4px 12px 8px; display: block; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--radius-md); color: rgba(255,255,255,.6); text-decoration: none; font-size: .92rem; font-weight: 500; transition: all var(--transition); position: relative; margin-bottom: 2px; } .nav-item:hover { background: rgba(255,255,255,.08); color: #fff; transform: translateX(-2px); } .nav-item.active { background: linear-gradient(135deg, rgba(99,102,241,.35), rgba(139,92,246,.25)); color: #fff; box-shadow: inset 3px 0 0 var(--primary); } .nav-item i { width: 20px; text-align: center; font-size: 1rem; } .nav-badge { margin-right: auto; background: var(--danger); color: #fff; font-size: .68rem; font-weight: 700; padding: 2px 7px; border-radius: 99px; display: none; } .nav-badge.show { display: inline-flex; } .sidebar-footer { padding: 14px 14px 18px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 10px; } .sidebar-user { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; } .sidebar-user-info { display: flex; flex-direction: column; min-width: 0; } .sidebar-user-name { font-size: .88rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-user-role { font-size: .72rem; color: rgba(255,255,255,.45); } .btn-logout { background: rgba(239,68,68,.15); border: 1px solid rgba(239,68,68,.3); color: #ef4444; flex-shrink: 0; } .btn-logout:hover { background: rgba(239,68,68,.25); color: #fca5a5; } /* App version pill — sits at the very bottom of the sidebar, below the user row + logout. Auto-derived from git commit count. */ .sidebar-version { padding: 10px 16px 14px; text-align: center; font-size: .72rem; font-weight: 600; color: rgba(255,255,255,.4); border-top: 1px solid rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center; gap: 6px; letter-spacing: .02em; user-select: none; } .sidebar-version i { font-size: .7rem; color: var(--primary-light); opacity: .7; } .sidebar-overlay { display: none; position: fixed; inset: 0; background: var(--overlay); z-index: 199; backdrop-filter: blur(2px); } /* ---- Main Content ---- */ .main-content { margin-right: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; min-height: 100vh; min-width: 0; /* allow shrinking inside flex parent (.layout-main) */ transition: margin var(--transition); } /* ---- Topbar ---- */ .topbar { height: var(--topbar-h); background: var(--topbar-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; position: sticky; top: 0; z-index: 100; } .topbar-right, .topbar-left { display: flex; align-items: center; gap: 12px; } /* Quick-add expense — green pill in topbar */ .topbar-quickadd { background: linear-gradient(135deg, #10b981, #22c55e) !important; color: #fff !important; border: 1px solid rgba(34,197,94,.4) !important; box-shadow: 0 3px 10px rgba(34,197,94,.35); transition: all .15s ease; text-decoration: none; } .topbar-quickadd:hover { transform: translateY(-1px) scale(1.05); box-shadow: 0 6px 16px rgba(34,197,94,.5); filter: brightness(1.08); } .topbar-quickadd:active { transform: scale(.96); } .topbar-menu { display: none; } .topbar-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: .92rem; font-weight: 600; color: var(--text); } .topbar-breadcrumb i { color: var(--primary); } /* ---- Topbar Date + Live Clock ---- Bold capsule: full-strength gradient border, larger type, glowing icons, distinct accent colors for date (primary) vs time (amber). */ .topbar-date { display: inline-flex; align-items: stretch; gap: 0; padding: 0; border-radius: 13px; overflow: hidden; background: linear-gradient(135deg, rgba(99,102,241,.22), rgba(168,85,247,.18)); border: 1.5px solid rgba(99,102,241,.55); box-shadow: 0 4px 18px rgba(99,102,241,.28), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); line-height: 1; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .topbar-date .td-block { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; font-size: .95rem; color: var(--text); font-weight: 700; letter-spacing: .01em; white-space: nowrap; } .topbar-date .td-icon { font-size: 1rem; filter: drop-shadow(0 0 0px currentColor); } .topbar-date .td-icon-date { color: #818cf8; } .topbar-date .td-icon-time { color: #fbbf24; } .topbar-date .td-time-text { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; letter-spacing: .04em; color: var(--text); font-weight: 800; font-size: 1.02rem; } .topbar-date .td-divider { width: 1.5px; background: linear-gradient(to bottom, transparent 5%, rgba(168,85,247,.6) 50%, transparent 95%); margin: 6px 0; } .topbar-date:hover { border-color: rgba(168,85,247,.75); box-shadow: 0 6px 24px rgba(168,85,247,.4), inset 0 1px 0 rgba(255,255,255,.1); transform: translateY(-1px); } [data-theme="light"] .topbar-date { background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(168,85,247,.09)); border-color: rgba(99,102,241,.4); box-shadow: 0 3px 12px rgba(99,102,241,.18), inset 0 1px 0 rgba(255,255,255,.5); } [data-theme="light"] .topbar-date .td-icon-date { color: var(--primary); } [data-theme="light"] .topbar-date .td-icon-time { color: #d97706; } .topbar-avatar { cursor: pointer; } /* ---- Page Content ---- */ .page-content { padding: 28px 28px 40px; flex: 1; min-width: 0; /* prevent overflow at narrow widths */ } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 22px; border-radius: var(--radius-md); border: none; font-family: var(--font); font-size: .92rem; font-weight: 600; cursor: pointer; transition: all var(--transition); text-decoration: none; white-space: nowrap; position: relative; overflow: hidden; } .btn::before { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,0); transition: background var(--transition); } .btn:hover::before { background: rgba(255,255,255,.08); } .btn:active { transform: scale(.97); } .btn-primary { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; box-shadow: 0 4px 16px rgba(99,102,241,.35); } .btn-primary:hover { box-shadow: 0 6px 24px rgba(99,102,241,.5); transform: translateY(-1px); } .btn-success { background: linear-gradient(135deg, #059669, #10b981); color: #fff; box-shadow: 0 4px 16px rgba(16,185,129,.3); } .btn-success:hover { box-shadow: 0 6px 24px rgba(16,185,129,.45); transform: translateY(-1px); } .btn-danger { background: linear-gradient(135deg, #dc2626, #ef4444); color: #fff; box-shadow: 0 4px 16px rgba(239,68,68,.3); } .btn-warning { background: linear-gradient(135deg, #d97706, #f59e0b); color: #fff; } .btn-ghost { background: var(--card); color: var(--text); border: 1px solid var(--border); } .btn-ghost:hover { background: var(--glass-hover); } .btn-sm { padding: 7px 16px; font-size: .82rem; } .btn-lg { padding: 14px 32px; font-size: 1.05rem; } .btn-icon { width: 38px; height: 38px; padding: 0; border-radius: var(--radius-md); background: var(--card); border: 1px solid var(--border); color: var(--text-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; transition: all var(--transition); } .btn-icon:hover { color: var(--text); background: var(--glass-hover); transform: translateY(-1px); } /* ---- Cards ---- */ .card { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-lg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--shadow-sm); transition: box-shadow var(--transition), transform var(--transition); overflow: hidden; } .card:hover { box-shadow: var(--shadow-md); } .card-glow:hover { box-shadow: var(--shadow-glow); } .card-header { padding: 18px 22px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .card-title { font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: 8px; color: var(--text); } .card-title i { color: var(--primary); } .card-body { padding: 20px 22px; } .card-footer { padding: 14px 22px; border-top: 1px solid var(--border); background: rgba(0,0,0,.04); } /* ---- Stat Cards ---- */ /* Flexbox (not grid) so a card alone on its row stretches to full width via flex-grow:1, instead of being locked to a single grid track. */ .stat-grid { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 28px; } .stat-grid > .stat-card { flex: 1 1 220px; } /* Stretch variant — when only some stat cards are rendered (e.g. reports page where empty data hides cards), let the visible ones grow to fill the row instead of leaving big empty gaps on the right side. */ .stat-grid-stretch > .stat-card { flex: 1 1 0; min-width: 220px; } .stat-card { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-lg); padding: 22px 24px; display: flex; align-items: center; gap: 18px; transition: all var(--transition); position: relative; overflow: hidden; cursor: default; } .stat-card::after { content: ''; position: absolute; top: -30px; left: -30px; width: 100px; height: 100px; border-radius: 50%; opacity: .08; transition: transform var(--transition); } .stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .stat-card:hover::after { transform: scale(2.5); } .stat-card.income { border-top: 3px solid var(--success); } .stat-card.income::after { background: var(--success); } .stat-card.expense { border-top: 3px solid var(--danger); } .stat-card.expense::after { background: var(--danger); } .stat-card.balance { border-top: 3px solid var(--primary); } .stat-card.balance::after { background: var(--primary); } .stat-card.loans { border-top: 3px solid var(--warning); } .stat-card.loans::after { background: var(--warning); } .stat-icon { width: 56px; height: 56px; flex-shrink: 0; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; } .stat-card.income .stat-icon { background: rgba(16,185,129,.15); color: var(--success); } .stat-card.expense .stat-icon { background: rgba(239,68,68,.15); color: var(--danger); } .stat-card.balance .stat-icon { background: rgba(99,102,241,.15); color: var(--primary); } .stat-card.loans .stat-icon { background: rgba(245,158,11,.15); color: var(--warning); } .stat-info { flex: 1; min-width: 0; text-align: center; } .stat-label { font-size: .8rem; font-weight: 500; color: var(--text-2); margin-bottom: 4px; display: flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; } .stat-value { /* clamp() keeps the amount on a single line — shrinks as the card narrows so "29,237.00 ₪" never wraps onto two lines. Min 1.05rem stays readable on the smallest cards; max 1.6rem matches the original desktop look. */ font-size: clamp(1.05rem, 2.4vw, 1.6rem); font-weight: 800; line-height: 1.15; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; } .stat-sub { font-size: .76rem; color: var(--text-3); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---- Progress Bar ---- */ .progress-wrap { margin: 8px 0; } .progress-bar-bg { height: 8px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; } .progress-bar-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--primary), var(--secondary)); transition: width 0.8s cubic-bezier(.4,0,.2,1); position: relative; } .progress-bar-fill.warning { background: linear-gradient(90deg, #d97706, var(--warning)); } .progress-bar-fill.danger { background: linear-gradient(90deg, #dc2626, var(--danger)); animation: pulse-bar 1.5s ease-in-out infinite; } @keyframes pulse-bar { 0%,100%{opacity:1} 50%{opacity:.7} } .progress-label { display: flex; justify-content: space-between; font-size: .76rem; color: var(--text-2); margin-bottom: 5px; } /* ---- Forms ---- */ .form-group { margin-bottom: 18px; } .form-label { display: flex; align-items: center; gap: 7px; font-size: .88rem; font-weight: 600; color: var(--text-2); margin-bottom: 7px; } .form-label .tooltip-icon { color: var(--text-3); cursor: help; font-size: .8rem; } .form-control { width: 100%; height: 44px; padding: 0 14px; background: var(--input-bg); border: 1.5px solid var(--input-border); border-radius: var(--radius-md); color: var(--text); font-family: var(--font); font-size: .95rem; line-height: 42px; transition: all var(--transition); outline: none; box-sizing: border-box; -webkit-appearance: none; } /* Textareas keep auto height */ textarea.form-control { height: auto; min-height: 88px; padding: 11px 14px; line-height: 1.5; } .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,.2); background: var(--glass-hover); } .form-control::placeholder { color: var(--text-3); } .form-control.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(239,68,68,.15); } .form-control.is-valid { border-color: var(--success); } .input-icon-wrap { position: relative; } .input-icon-wrap .form-control { padding-right: 40px; } .input-icon-wrap .input-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--text-3); font-size: .95rem; pointer-events: none; } select.form-control { cursor: pointer; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238b949e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: left 12px center; background-size: 14px; padding-left: 32px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; } .form-hint { font-size: .76rem; color: var(--text-3); margin-top: 4px; display: flex; align-items: center; gap: 5px; } .form-error { font-size: .76rem; color: var(--danger); margin-top: 4px; display: none; align-items: center; gap: 5px; } .form-error.show { display: flex; } /* ---- Tables ---- */ .table-wrap { overflow-x: auto; border-radius: var(--radius-lg); /* Without max-width:100%, the wrap can stretch to fit table content (white-space:nowrap cells) and push the parent card wider than the page, which then overflows the viewport. Force the wrap to its parent's width so the table scrolls inside it instead of pushing the layout. */ max-width: 100%; } .table { width: 100%; border-collapse: collapse; font-size: .9rem; } .table th { padding: 13px 16px; background: rgba(99,102,241,.08); color: var(--text-2); font-weight: 700; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; border-bottom: 1px solid var(--border); white-space: nowrap; } .table th.th-sortable { cursor: pointer; user-select: none; transition: background var(--transition), color var(--transition); } .table th.th-sortable:hover { background: rgba(99,102,241,.16); color: var(--text); } .table th.th-sortable .sort-ind { margin-inline-start: 6px; font-size: .72rem; opacity: .55; } .table th.th-sortable.is-sorted { color: var(--primary); background: rgba(99,102,241,.18); } .table th.th-sortable.is-sorted .sort-ind { opacity: 1; color: var(--primary); } /* ---- Danger-warning banner used inside confirm dialogs (delete / replace / etc.) ---- */ .dup-replace-warn { display: flex; align-items: flex-start; gap: 12px; background: linear-gradient(180deg, rgba(239,68,68,.10), rgba(239,68,68,.04)); border: 1px solid rgba(239,68,68,.45); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; } .dup-replace-warn .fa-triangle-exclamation { color: var(--danger); font-size: 1.4rem; margin-top: 2px; } .dup-replace-warn strong { color: var(--danger); } .dup-replace-warn p { color: var(--text-2); font-size: .88rem; line-height: 1.4; } .table td { padding: 14px 16px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; } .table tr:last-child td { border-bottom: none; } .table tbody tr { transition: background var(--transition); } .table tbody tr:hover { background: rgba(99,102,241,.05); } /* ---- Badges ---- */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 99px; font-size: .73rem; font-weight: 700; } .badge-success { background: rgba(16,185,129,.15); color: var(--success); border: 1px solid rgba(16,185,129,.25); } .badge-danger { background: rgba(239,68,68,.15); color: var(--danger); border: 1px solid rgba(239,68,68,.25); } .badge-warning { background: rgba(245,158,11,.15); color: var(--warning); border: 1px solid rgba(245,158,11,.25); } .badge-primary { background: rgba(99,102,241,.15); color: var(--primary); border: 1px solid rgba(99,102,241,.25); } .badge-info { background: rgba(6,182,212,.15); color: var(--info); border: 1px solid rgba(6,182,212,.25); } .badge-ghost { background: var(--card); color: var(--text-2); border: 1px solid var(--border); } /* ---- Category Badge ---- */ .cat-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 99px; font-size: .82rem; font-weight: 600; border: 1px solid; } /* ---- Modals ---- */ .modal-overlay { position: fixed; inset: 0; background: var(--overlay); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 1000; display: flex; align-items: center; justify-content: center; animation: fadeIn .2s ease; /* Stop touch-scroll on the dimmed area from reaching the page behind. */ overscroll-behavior: contain; touch-action: none; } /* Confirm dialog must sit above any other modal that opened it */ #confirmDialog { z-index: 1500 !important; } @keyframes fadeIn { from{opacity:0} to{opacity:1} } .modal { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-xl); /* Outer accent ring tinted by the active app theme */ box-shadow: var(--shadow-lg), 0 0 0 1px rgba(var(--primary-rgb), .18); width: 90%; max-width: 580px; max-height: 90vh; overflow-y: auto; animation: slideUp .25s cubic-bezier(.34,1.56,.64,1); position: relative; /* Prevent scroll-chaining: when the user scrolls past the modal's top/bottom edge on touch devices, don't pass the scroll up to the page behind it. touch-action:pan-y re-enables vertical scrolling inside the modal (the overlay above sets touch-action:none to lock background). */ overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; } @keyframes slideUp { from{transform:translateY(40px) scale(.95);opacity:0} to{transform:none;opacity:1} } .modal-drag-handle { height: 28px; display: flex; align-items: center; justify-content: center; cursor: grab; color: var(--text-3); background: rgba(var(--primary-rgb), .06); border-bottom: 1px solid var(--border); border-radius: var(--radius-xl) var(--radius-xl) 0 0; user-select: none; font-size: .8rem; letter-spacing: 3px; transition: background var(--transition); } .modal-drag-handle:hover { background: rgba(var(--primary-rgb), .12); color: var(--text-2); } .modal-drag-handle:active { cursor: grabbing; } .dragging .modal { animation: none; box-shadow: var(--shadow-lg), 0 0 0 2px var(--primary); } .modal-header { padding: 20px 24px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .modal-header h3 { font-size: 1.1rem; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 10px; } .modal-header h3 i { color: var(--primary); } .modal-close { background: none; border: none; color: var(--text-3); font-size: 1.1rem; cursor: pointer; padding: 6px; border-radius: 8px; transition: all var(--transition); } .modal-close:hover { color: var(--danger); background: rgba(239,68,68,.1); } .modal-body { padding: 22px 24px; } .modal-footer { padding: 16px 24px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-start; gap: 10px; flex-wrap: wrap; } /* ---- Toast ---- */ .toast-container { position: fixed; bottom: 24px; left: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .toast { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--card-border); box-shadow: var(--shadow-lg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); min-width: 280px; max-width: 380px; animation: toastIn .35s cubic-bezier(.34,1.56,.64,1); pointer-events: auto; cursor: pointer; font-size: .9rem; font-weight: 500; } @keyframes toastIn { from{transform:translateX(-60px);opacity:0} to{transform:none;opacity:1} } .toast-out { animation: toastOut .3s ease forwards; } @keyframes toastOut { to{transform:translateX(-60px);opacity:0} } .toast-icon { font-size: 1.2rem; flex-shrink: 0; } .toast-body { flex: 1; min-width: 0; } .toast-title { font-weight: 700; margin-bottom: 1px; color: var(--text); } .toast-msg { font-size: .82rem; color: var(--text-2); } /* Toast action buttons (copy + close) */ .toast-actions { display: flex; gap: 4px; flex-shrink: 0; align-self: flex-start; } .toast-copy-btn, .toast-close-btn { background: rgba(var(--primary-rgb), .08); border: 1px solid rgba(var(--primary-rgb), .2); color: var(--text-3); cursor: pointer; font-size: .75rem; width: 26px; height: 26px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; transition: all .15s ease; } .toast-copy-btn:hover, .toast-close-btn:hover { background: rgba(var(--primary-rgb), .18); border-color: rgba(var(--primary-rgb), .4); color: var(--text); } .toast-copy-btn.copied { background: rgba(34,197,94,.18) !important; border-color: rgba(34,197,94,.5) !important; color: var(--success) !important; } .toast.success { border-right: 4px solid var(--success); } .toast.success .toast-icon { color: var(--success); } .toast.error { border-right: 4px solid var(--danger); } .toast.error .toast-icon { color: var(--danger); } .toast.warning { border-right: 4px solid var(--warning); } .toast.warning .toast-icon { color: var(--warning); } .toast.info { border-right: 4px solid var(--info); } .toast.info .toast-icon { color: var(--info); } /* ---- Tooltip (מנוהל ע"י JS) ---- */ [data-tooltip] { cursor: help; } #globalTooltip { position: fixed; z-index: 99998; background: #1a2035; color: #e2e8f0; font-family: 'Heebo', sans-serif; font-size: .84rem; font-weight: 500; line-height: 1.55; padding: 9px 14px; border-radius: 12px; max-width: 260px; text-align: center; pointer-events: none; opacity: 0; transition: opacity .18s ease, transform .18s ease; transform: translateY(4px); box-shadow: 0 8px 28px rgba(0,0,0,.45), 0 0 0 1px rgba(var(--primary-rgb), .28); border: 1px solid rgba(var(--primary-rgb), .22); direction: rtl; word-break: break-word; } #globalTooltip.visible { opacity: 1; transform: translateY(0); } [data-theme="light"] #globalTooltip { background: #fff; color: #1e293b; box-shadow: 0 8px 28px rgba(0,0,0,.15), 0 0 0 1px rgba(99,102,241,.2); } /* ---- Avatar ---- */ .avatar { border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; flex-shrink: 0; letter-spacing: .02em; box-shadow: 0 2px 8px rgba(0,0,0,.25); position: relative; } .avatar-family-badge { position: absolute; bottom: -2px; right: -2px; border-radius: 50%; background: #fff; border: 2px solid var(--card); object-fit: cover; display: block; box-shadow: 0 2px 6px rgba(0,0,0,.25); pointer-events: none; z-index: 2; } .avatar-initials { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; z-index: 0; } .avatar-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; z-index: 1; } /* Ensure no parent crops the corner badge or the avatar photo on mobile */ .avatar, .topbar-avatar, .sidebar-user, .user-picker-btn, .user-picker-item, .user-card, .user-card-avatar { overflow: visible !important; } /* ---- Alert ---- */ .alert { padding: 14px 18px; border-radius: var(--radius-md); display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; font-size: .9rem; border: 1px solid; } .alert i { font-size: 1rem; flex-shrink: 0; margin-top: 2px; } .alert-warning { background: rgba(245,158,11,.1); color: #fbbf24; border-color: rgba(245,158,11,.25); } .alert-danger { background: rgba(239,68,68,.1); color: #f87171; border-color: rgba(239,68,68,.25); } .alert-success { background: rgba(16,185,129,.1); color: #34d399; border-color: rgba(16,185,129,.25); } .alert-info { background: rgba(6,182,212,.1); color: #22d3ee; border-color: rgba(6,182,212,.25); } .alert-body { flex: 1; } .alert-title { font-weight: 700; margin-bottom: 2px; } /* ---- Tip Card ---- */ .tip-card { background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(139,92,246,.08)); border: 1px solid rgba(99,102,241,.25); border-radius: var(--radius-lg); padding: 16px 20px; display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; } .tip-icon { font-size: 1.8rem; flex-shrink: 0; } .tip-text { font-size: .9rem; color: var(--text); line-height: 1.6; } .tip-title { font-weight: 700; color: var(--primary); margin-bottom: 3px; } /* ---- Amount Display ---- */ .amount-big { font-size: 2.4rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; } .amount-positive { color: var(--success); } .amount-negative { color: var(--danger); } /* Force LTR direction on amounts so "-25,782.11 ₪" displays with the minus at the FRONT of the number, not pushed to the end by the surrounding RTL bidi context. `unicode-bidi: isolate` keeps the change local. The same fix applies to every visible-amount class across the app (recent grid, upcoming grid, etc.) — without it RTL bidi flips the symbol to the wrong side of the digits. */ .amount-positive, .amount-negative, .recent-tile-amount, .upcoming-amount, .upcoming-summary-amount, .cat-legend-amount, .cat-mp-chip-amount, .stat-value, .amount-big, .dcd-amount, .deficit-banner-amount { direction: ltr !important; unicode-bidi: isolate !important; } .amount-neutral { color: var(--text); } /* ---- Page Header ---- */ .page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; flex-wrap: wrap; gap: 14px; } .page-header-title { display: flex; align-items: center; gap: 12px; } .page-header-icon { width: 48px; height: 48px; background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #fff; box-shadow: 0 4px 16px rgba(99,102,241,.3); } .page-header h1 { font-size: 1.5rem; font-weight: 800; color: var(--text); } .page-header .page-subtitle { font-size: .85rem; color: var(--text-2); margin-top: 1px; } .page-header-actions { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; } /* Expenses page: pill sits centered between title and actions on a wide desktop. When the viewport gets too narrow to fit all three on one row, stack them vertically — this is the "design that doesn't break at any width" guarantee. The 1200px breakpoint is where the natural one-line layout starts to feel cramped on a typical sidebar-visible desktop. */ .page-header:has(> .page-header-month) { flex-wrap: wrap; align-items: center; row-gap: 14px; } .page-header > .page-header-month { margin-inline: auto; } @media (max-width: 1199px) { .page-header:has(> .page-header-month) { flex-direction: column; align-items: stretch; } .page-header:has(> .page-header-month) > .page-header-title { align-items: flex-start; } .page-header > .page-header-month { margin-inline: 0; } .page-header:has(> .page-header-month) > .page-header-actions { flex-wrap: wrap; justify-content: flex-end; } } .page-header-actions > .btn, .page-header-actions > .btn-sm, .page-header-actions > .month-selector { height: 44px; padding-top: 0; padding-bottom: 0; box-sizing: border-box; align-items: center; } /* ---- Empty State ---- */ .empty-state { text-align: center; padding: 60px 20px; color: var(--text-2); } .empty-state-icon { font-size: 4rem; margin-bottom: 14px; opacity: .5; } .empty-state h3 { font-size: 1.2rem; font-weight: 700; color: var(--text); margin-bottom: 6px; } .empty-state p { font-size: .9rem; max-width: 300px; margin: 0 auto 20px; } /* ---- Expense List Item ---- */ .expense-item { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--border); transition: all var(--transition); } .expense-item:last-child { border-bottom: none; } .expense-item:hover { padding-right: 6px; } .expense-cat-icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; border: 1px solid rgba(255,255,255,.1); } .expense-info { flex: 1; min-width: 0; } .expense-desc { font-weight: 600; font-size: .92rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .expense-meta { font-size: .76rem; color: var(--text-2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .expense-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-3); } .expense-amount { font-size: 1.05rem; font-weight: 800; color: var(--danger); white-space: nowrap; } .expense-actions { display: flex; gap: 6px; opacity: 0; transition: opacity var(--transition); } .expense-item:hover .expense-actions { opacity: 1; } /* ---- Month Selector ---- */ .month-selector { display: flex; align-items: stretch; gap: 0; background: linear-gradient(135deg, rgba(99,102,241,.18), rgba(168,85,247,.14)); border: 1.5px solid rgba(99,102,241,.5); border-radius: var(--radius-lg); padding: 0; overflow: hidden; box-shadow: 0 4px 18px rgba(99,102,241,.28), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .month-selector:hover { border-color: rgba(168,85,247,.7); box-shadow: 0 6px 22px rgba(168,85,247,.35), inset 0 1px 0 rgba(255,255,255,.1); transform: translateY(-1px); } .month-selector > .btn-icon { border: none; border-radius: 0; background: transparent; height: auto; width: 44px; align-self: stretch; flex-shrink: 0; color: #a5b4fc; font-size: 1rem; transition: background .15s ease, color .15s ease; } .month-selector > .btn-icon:hover { background: rgba(99,102,241,.22); color: #fff; } .month-selector-label { font-size: 1.25rem; font-weight: 800; letter-spacing: .02em; min-width: 160px; flex: 1 1 auto; /* stretch to fill the gap between chevrons so text centers visually */ text-align: center; padding: 10px 18px; align-self: center; background: linear-gradient(135deg, #ffffff, #c7d2fe); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } [data-theme="light"] .month-selector { background: linear-gradient(135deg, rgba(99,102,241,.10), rgba(168,85,247,.07)); border-color: rgba(99,102,241,.35); box-shadow: 0 3px 12px rgba(99,102,241,.18), inset 0 1px 0 rgba(255,255,255,.5); } [data-theme="light"] .month-selector > .btn-icon { color: var(--primary); } [data-theme="light"] .month-selector-label { background: linear-gradient(135deg, #1e1b4b, #4338ca); -webkit-background-clip: text; background-clip: text; } .month-today-btn { gap: 6px; } .month-today-btn.is-current { opacity: .55; cursor: default; } .month-today-btn.is-current:hover { background: transparent; } /* ---- Charts ---- */ .chart-container { position: relative; } .chart-container canvas { max-width: 100%; } /* ---- Login Page ---- */ .layout-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; position: relative; } .layout-auth::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse at 30% 30%, rgba(99,102,241,.25) 0%, transparent 60%), radial-gradient(ellipse at 70% 70%, rgba(139,92,246,.2) 0%, transparent 60%); pointer-events: none; } .auth-card { width: 100%; max-width: 440px; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-xl); padding: 44px 40px; box-shadow: var(--shadow-lg); position: relative; z-index: 1; animation: slideUp .4s cubic-bezier(.34,1.56,.64,1); } .auth-logo { text-align: center; margin-bottom: 30px; } .auth-logo-icon { width: 72px; height: 72px; background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #fff; margin: 0 auto 14px; box-shadow: var(--shadow-glow); } .auth-logo h1 { font-size: 2rem; font-weight: 900; letter-spacing: .01em; background: linear-gradient(135deg, var(--primary), var(--secondary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 2px; } .auth-logo .auth-subtitle { color: var(--text-2); font-size: .82rem; font-weight: 600; margin: 0; letter-spacing: .04em; text-transform: uppercase; opacity: .85; } .auth-logo .auth-tagline { color: var(--text-3); font-size: .82rem; margin-top: 8px; } .auth-logo p { color: var(--text-2); font-size: .88rem; margin-top: 4px; } /* ---- Scrollbar ---- */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-3); } /* ---- Loading ---- */ .loading-overlay { position: fixed; inset: 0; background: var(--bg); z-index: 9998; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 18px; } .spinner { width: 48px; height: 48px; border: 4px solid rgba(99,102,241,.2); border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; } @keyframes spin { to{transform:rotate(360deg)} } .btn-spin { display: none; } .btn.loading .btn-spin { display: inline-block; animation: spin .7s linear infinite; } .btn.loading .btn-text { display: none; } /* ---- Tabs ---- */ .tabs { display: flex; flex-wrap: wrap; gap: 4px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 5px; margin-bottom: 22px; } .tab-btn { flex: 1; padding: 9px 16px; border: none; border-radius: var(--radius-md); background: none; color: var(--text-2); font-family: var(--font); font-size: .88rem; font-weight: 600; cursor: pointer; transition: all var(--transition); display: flex; align-items: center; justify-content: center; gap: 7px; } .tab-btn:hover { background: rgba(255,255,255,.06); color: var(--text); } .tab-btn.active { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; box-shadow: var(--shadow-sm); } .tab-pane { display: none; } .tab-pane.active { display: block; } /* ---- Collapsible card (generic) ---- Apply `.collapsible-card` to any `.card`. Wrap the togglable region in an element with `.collapsible-card-body`. Header gets `.collapsible-card-header` plus a `.collapsible-card-chev` chevron icon inside. Toggle by adding/removing `.collapsed` on the wrapper — see toggleCollapsibleCard() in app.js. State persists per-id via localStorage. */ .collapsible-card .collapsible-card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; user-select: none; } .collapsible-card .collapsible-card-toggle { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 999px; color: var(--text-2); transition: background .15s, color .15s; /* When the header has extra controls (status + button on Currency card, enable switch on Email card) the chevron is the third top-level child. Auto margin pushes it to the end (visual left in RTL) so it sits flush with the card edge, in line with the chevrons of single-control cards. */ margin-inline-start: auto; } .collapsible-card .collapsible-card-header:hover .collapsible-card-toggle { background: rgba(99,102,241,.12); color: var(--primary); } .collapsible-card .collapsible-card-chev { transition: transform .25s ease; } .collapsible-card.collapsed .collapsible-card-chev { transform: rotate(-90deg); } /* When collapsed, body is fully hidden — card height = header only. Tried the grid 1fr→0fr animation trick but it left ghost padding on some browsers, so we go with display:none. Header bottom-border is also dropped so the collapsed card looks like a single rounded pill instead of an empty pane. */ .collapsible-card.collapsed .collapsible-card-body { display: none !important; } .collapsible-card.collapsed .collapsible-card-header { border-bottom: 0; } .collapsible-card-badge { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 8px; padding: 3px 10px; border-radius: 999px; background: linear-gradient(135deg, rgba(99,102,241,.18), rgba(168,85,247,.14)); color: var(--primary); font-size: .75rem; font-weight: 700; } /* ---- Utilities ---- */ .text-primary { color: var(--primary) !important; } .text-success { color: var(--success) !important; } .text-danger { color: var(--danger) !important; } .text-warning { color: var(--warning) !important; } .text-muted { color: var(--text-2) !important; } .text-sm { font-size: .82rem; } .text-lg { font-size: 1.1rem; } .text-xl { font-size: 1.3rem; } .fw-bold { font-weight: 700; } .fw-black { font-weight: 900; } .d-flex { display: flex; } .align-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 16px; } .mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 16px; } .mb-4 { margin-bottom: 24px; } .p-0 { padding: 0 !important; } .w-100 { width: 100%; } .me-2 { margin-left: 8px; } /* ---- Responsive ---- */ @media (max-width: 1024px) { .sidebar { transform: translateX(100%); } .sidebar.open { transform: none; box-shadow: -8px 0 40px rgba(0,0,0,.4); } .sidebar-close { display: flex; } .sidebar-overlay.open { display: block; } .main-content { margin-right: 0; } .topbar-menu { display: flex; } .page-content { padding: 18px 16px 32px; } .form-row, .form-row-3 { grid-template-columns: 1fr; } /* tablet: smaller flex-basis so 3 cards still fit per row when there's room */ .stat-grid > .stat-card { flex-basis: 200px; } } @media (max-width: 600px) { .page-content { padding: 14px 12px 28px; } .stat-grid > .stat-card { flex-basis: 100%; } .auth-card { padding: 30px 22px; } .amount-big { font-size: 1.8rem; } .page-header h1 { font-size: 1.25rem; } .topbar { padding: 0 14px; } .expense-actions { opacity: 1; } .modal { max-height: 95vh; margin: 10px; } } /* ---- Animation Utilities ---- */ .fade-in { animation: fadeIn .3s ease; } .slide-up { animation: slideUp .35s cubic-bezier(.34,1.56,.64,1); } .pulse { animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.85;transform:scale(.98)} } /* ---- Number Input Arrows Remove ---- */ input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; } input[type=number] { -moz-appearance: textfield; } /* ---- Browser autofill — keep dark theme ---- */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px var(--input-bg, #161b22) inset !important; -webkit-text-fill-color: var(--text) !important; caret-color: var(--text) !important; border-color: var(--input-border) !important; transition: background-color 9999s ease-in-out 0s; } [data-theme="light"] input:-webkit-autofill, [data-theme="light"] input:-webkit-autofill:hover, [data-theme="light"] input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #fff inset !important; -webkit-text-fill-color: #1e293b !important; } /* ---- LTR fields: email, url, tel, number, password ---- */ input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="password"] { direction: ltr !important; text-align: left !important; } /* Placeholder inherits LTR from the input — stays left-aligned */ /* Icon inside wrapper: move to LEFT (start of LTR text) for LTR fields */ .input-icon-wrap:has(input[type="email"]) .input-icon, .input-icon-wrap:has(input[type="url"]) .input-icon, .input-icon-wrap:has(input[type="tel"]) .input-icon, .input-icon-wrap:has(input[type="number"]) .input-icon, .input-icon-wrap:has(input[type="date"]) .input-icon, .input-icon-wrap:has(input[type="password"]) .input-icon { right: auto !important; left: 12px !important; } .input-icon-wrap:has(input[type="email"]) input, .input-icon-wrap:has(input[type="url"]) input, .input-icon-wrap:has(input[type="tel"]) input, .input-icon-wrap:has(input[type="number"]) input, .input-icon-wrap:has(input[type="date"]) input, .input-icon-wrap:has(input[type="password"]) input { padding-right: 14px !important; padding-left: 40px !important; } /* For password: pass-toggle (eye) on RIGHT (end), icon on LEFT (start) */ .input-icon-wrap:has(input[type="password"]) .pass-toggle, .input-icon-wrap:has(input[type="text"].is-password) .pass-toggle { left: auto !important; right: 12px !important; } .input-icon-wrap:has(input[type="password"]) input, .input-icon-wrap:has(input[type="text"].is-password) input { padding-right: 40px !important; padding-left: 40px !important; } /* =========================== Flag Picker — currency dropdown with real flag images =========================== */ .flag-picker { position: relative; width: 100%; } .flag-picker-btn { width: 100%; height: 44px; padding: 0 14px 0 36px; background: var(--input-bg); border: 1.5px solid var(--input-border); border-radius: var(--radius-md); color: var(--text); font-family: 'Heebo', sans-serif; font-size: .95rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: all var(--transition); box-sizing: border-box; text-align: right; position: relative; } .flag-picker-btn:hover { border-color: var(--primary); } .flag-picker.open .flag-picker-btn { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,.2); } .flag-picker-btn .fp-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .flag-picker-btn .fp-chev { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-3); font-size: .7rem; transition: transform .2s; } .flag-picker.open .flag-picker-btn .fp-chev { transform: translateY(-50%) rotate(180deg); } .flag-picker .flag-img { width: 22px; height: 16px; object-fit: cover; border-radius: 3px; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,.3); } .flag-picker-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 9999; background: #1a2035; border: 1px solid rgba(99,102,241,.4); border-radius: var(--radius-md); box-shadow: 0 16px 48px rgba(0,0,0,.5); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); max-height: 300px; overflow-y: auto; display: none; padding: 4px; animation: fpSlideUp .18s cubic-bezier(.34,1.56,.64,1); } [data-theme="light"] .flag-picker-list { background: rgba(255,255,255,.98); } .flag-picker.open .flag-picker-list { display: block; } .flag-picker-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: none; border: none; border-radius: var(--radius-md); color: var(--text); font-family: 'Heebo', sans-serif; font-size: .9rem; cursor: pointer; text-align: right; transition: background var(--transition); } .flag-picker-item:hover { background: rgba(99,102,241,.15); } .flag-picker-item.active { background: linear-gradient(135deg, rgba(99,102,241,.25), rgba(139,92,246,.18)); font-weight: 700; } .flag-picker-item .fp-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* =========================== Viewer-mode (read-only) — disable write actions globally =========================== */ body.viewer-mode .btn-primary:not([data-allow-viewer]), body.viewer-mode .btn-success:not([data-allow-viewer]), body.viewer-mode .btn-warning:not([data-allow-viewer]), body.viewer-mode .btn-danger:not([data-allow-viewer]), body.viewer-mode [data-write-only] { display: none !important; } body.viewer-mode .btn-icon[onclick*="delete"], body.viewer-mode .btn-icon[onclick*="edit"], body.viewer-mode .btn-icon[onclick*="Edit"] { display: none !important; } body.viewer-mode form input, body.viewer-mode form select, body.viewer-mode form textarea { pointer-events: none; opacity: .6; } .viewer-banner { display: none; align-items: center; gap: 10px; padding: 8px 16px; background: linear-gradient(135deg, rgba(245,158,11,.18), rgba(245,158,11,.08)); border-bottom: 1px solid rgba(245,158,11,.35); color: var(--warning); font-size: .85rem; font-weight: 600; justify-content: center; } body.viewer-mode .viewer-banner { display: flex; } /* =========================== Receipt Upload + Thumbnail + Lightbox =========================== */ .receipt-upload-wrap { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--glass); border: 1.5px dashed var(--input-border); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition); position: relative; } .receipt-upload-wrap:hover { border-color: var(--primary); background: rgba(99,102,241,.06); } .receipt-upload-wrap input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .receipt-upload-info { flex: 1; font-size: .85rem; color: var(--text-2); } .receipt-upload-info strong { display: block; color: var(--text); margin-bottom: 2px; } .receipt-upload-info span { font-size: .73rem; color: var(--text-3); } .receipt-thumb-wrap { width: 50px; height: 50px; flex-shrink: 0; border-radius: 8px; overflow: hidden; background: var(--bg2); display: flex; align-items: center; justify-content: center; color: var(--text-3); font-size: 1.3rem; position: relative; } .receipt-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; } .receipt-thumb-wrap .receipt-remove { position: absolute; top: 3px; inset-inline-end: 3px; /* RTL-aware: top-outer corner inside the thumb */ width: 22px; height: 22px; background: var(--danger); border: 2px solid #fff; border-radius: 50%; color: #fff; font-size: .72rem; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5; box-shadow: 0 2px 6px rgba(0,0,0,.5); transition: transform var(--transition), background var(--transition); } .receipt-thumb-wrap .receipt-remove:hover { background: #b91c1c; transform: scale(1.12); } /* Inline thumbnail in lists */ .receipt-inline-thumb { display: inline-flex; width: 32px; height: 32px; border-radius: 6px; overflow: hidden; background: var(--bg2); cursor: zoom-in; border: 1px solid var(--border); transition: transform var(--transition); } .receipt-inline-thumb:hover { transform: scale(1.1); } .receipt-inline-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Lightbox overlay */ #receiptLightbox { position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 99999; display: none; align-items: center; justify-content: center; padding: 20px; cursor: zoom-out; animation: fadeIn .2s ease; } #receiptLightbox.open { display: flex; } #receiptLightbox img { max-width: 95%; max-height: 95vh; border-radius: 8px; box-shadow: 0 20px 80px rgba(0,0,0,.6); cursor: default; } #receiptLightbox .lb-close { position: absolute; top: 20px; left: 20px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; } #receiptLightbox .lb-close:hover { background: rgba(255,255,255,.2); } /* =========================== User Picker (custom dropdown with avatar) =========================== */ .user-picker { position: relative; width: 100%; } .user-picker-btn { width: 100%; height: 44px; padding: 0 36px 0 12px; background: var(--input-bg); border: 1.5px solid var(--input-border); border-radius: var(--radius-md); color: var(--text); font-family: 'Heebo', sans-serif; font-size: .95rem; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: all var(--transition); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238b949e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: left 12px center; background-size: 14px; text-align: right; box-sizing: border-box; } .user-picker-btn:hover { border-color: var(--primary); } .user-picker.open .user-picker-btn { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,.2); } .user-picker-btn .avatar { flex-shrink: 0; } .user-picker-btn-name { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-picker-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 99999; background: #1a2035; border: 1px solid rgba(99,102,241,.4); border-radius: var(--radius-md); box-shadow: 0 16px 48px rgba(0,0,0,.5), 0 0 0 1px rgba(99,102,241,.15); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); max-height: 280px; overflow-y: auto; display: none; animation: fpSlideUp .18s cubic-bezier(.34,1.56,.64,1); padding: 4px; } [data-theme="light"] .user-picker-list { background: rgba(255,255,255,.98); } .user-picker.open .user-picker-list { display: block; } .user-picker-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; background: none; border: none; border-radius: var(--radius-md); color: var(--text); font-family: 'Heebo', sans-serif; font-size: .9rem; cursor: pointer; transition: background var(--transition); text-align: right; } .user-picker-item:hover, .user-picker-item.up-pre-highlight { background: rgba(99,102,241,.12); } .user-picker-item.active { background: linear-gradient(135deg, rgba(99,102,241,.25), rgba(139,92,246,.18)); font-weight: 700; } .user-picker-item .avatar { flex-shrink: 0; } .user-picker-item-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-picker-item-relation { font-size: .72rem; color: var(--text-3); padding: 2px 7px; background: rgba(99,102,241,.12); border-radius: 99px; } /* ===== Family details page — sticky save bar at the bottom ===== */ .family-save-bar { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; margin-top: 24px; padding: 16px 22px; background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(139,92,246,.05)); border: 1px solid rgba(99,102,241,.18); border-radius: var(--radius-lg); backdrop-filter: blur(8px); } .family-save-hint { color: var(--text-2); font-size: .88rem; display: inline-flex; align-items: center; gap: 8px; flex: 1; min-width: 200px; line-height: 1.5; } .family-save-hint i { color: var(--primary); font-size: .9rem; } .family-save-bar .btn { min-width: 120px; } @media (max-width: 540px) { .family-save-bar { padding: 14px 16px; gap: 14px; } .family-save-hint { font-size: .82rem; flex-basis: 100%; } .family-save-bar > div { width: 100%; justify-content: stretch; } .family-save-bar > div .btn { flex: 1; } } /* Family identity card — logo + fields side-by-side */ .family-identity-row { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; } .family-identity-logo { display: flex; flex-direction: column; gap: 10px; align-items: center; flex-shrink: 0; } .family-logo-preview { width: 120px; height: 120px; border-radius: 16px; background: var(--glass); border: 2px dashed var(--card-border); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--text-3); font-size: 2.4rem; } .family-logo-preview img { width: 100%; height: 100%; object-fit: cover; } .family-logo-actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; width: 100%; } .family-logo-actions .btn { justify-content: center; } .family-identity-fields { flex: 1; min-width: 280px; } @media (max-width: 640px) { .family-identity-row { flex-direction: column; align-items: stretch; } .family-identity-logo { align-items: center; } } /* ===== Household members list (inside Family Details modal) ===== Each row: name + age + relation dropdown + remove button. Compact spacing so a family of 5 fits without scrolling on desktop. */ .hh-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; max-height: 280px; overflow-y: auto; padding: 2px; } .hh-row { display: grid; grid-template-columns: 1.1fr 200px 1.2fr 36px; gap: 8px; align-items: center; } .hh-row .form-control { height: 38px; padding: 0 10px; font-size: .88rem; text-align: center; } .hh-row .hh-name { text-align: right; padding: 0 12px; } /* DOB cell — date input + computed age badge sit side by side */ .hh-dob-wrap { display: flex; align-items: center; gap: 6px; min-width: 0; } .hh-dob-wrap .hh-dob, .hh-dob-wrap input.flatpickr-input.input, .hh-dob-wrap input.form-control { flex: 1; min-width: 0; text-align: center !important; height: 38px; } /* When flatpickr wraps the date input it inserts an altInput visible field AFTER the original (now hidden). Make sure the visible one fills the cell. */ .hh-dob-wrap .flatpickr-input + .form-control { flex: 1; min-width: 0; } .hh-age-badge { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 56px; height: 30px; padding: 0 10px; font-size: .76rem; font-weight: 700; color: var(--primary); background: linear-gradient(135deg, rgba(99,102,241,.14), rgba(139,92,246,.10)); border: 1px solid rgba(99,102,241,.28); border-radius: 99px; white-space: nowrap; cursor: help; } /* ===== Relation picker — custom dropdown matching the app's pickers DNA ===== */ .hh-rel-picker { position: relative; min-width: 0; } .hh-rel-btn { width: 100%; height: 38px; padding: 0 12px; background: var(--input-bg); border: 1.5px solid var(--input-border); border-radius: 10px; color: var(--text); font-family: inherit; font-size: .88rem; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: var(--transition); text-align: right; } .hh-rel-btn:hover { border-color: var(--primary); } .hh-rel-picker.open .hh-rel-btn { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,.18); } .hh-rel-icon { font-size: 1.05rem; flex-shrink: 0; line-height: 1; } .hh-rel-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hh-rel-placeholder { color: var(--text-3); flex: 1; } .hh-rel-chev { font-size: .7rem; color: var(--text-3); transition: transform .2s; flex-shrink: 0; } .hh-rel-picker.open .hh-rel-chev { transform: rotate(180deg); } .hh-rel-list { display: none; position: absolute; top: calc(100% + 4px); right: 0; left: 0; z-index: 200; background: var(--input-bg); border: 1.5px solid var(--primary); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.25); padding: 4px; max-height: 240px; overflow-y: auto; animation: fpSlideUp .18s cubic-bezier(.34,1.56,.64,1); } .hh-rel-picker.open .hh-rel-list { display: block; } .hh-rel-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; background: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--text); font-family: inherit; font-size: .88rem; cursor: pointer; text-align: right; transition: var(--transition); } .hh-rel-item:hover { background: rgba(99,102,241,.12); } .hh-rel-item.active { background: linear-gradient(135deg, rgba(99,102,241,.22), rgba(139,92,246,.14)); border-color: rgba(99,102,241,.32); font-weight: 700; } .hh-rel-picker.is-readonly .hh-rel-btn { cursor: not-allowed; opacity: .7; } .hh-remove-btn { width: 32px; height: 32px; border-radius: 8px; border: 1px solid rgba(239,68,68,.3); background: rgba(239,68,68,.08); color: var(--danger); cursor: pointer; transition: var(--transition); display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; } .hh-remove-btn:hover { background: rgba(239,68,68,.18); transform: scale(1.06); } .hh-add-btn { align-self: flex-start; border-style: dashed !important; margin-top: 4px; } .hh-empty { color: var(--text-3); font-size: .85rem; padding: 12px 14px; background: rgba(99,102,241,.05); border-radius: 10px; text-align: center; } .hh-count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; font-size: .72rem; font-weight: 800; border-radius: 99px; margin-right: 4px; box-shadow: 0 2px 6px rgba(99,102,241,.35); } /* Mobile: each household member becomes a small bordered card with the fields stacked vertically. The previous 3-column grid was too tight — the DOB cell collapsed to ~60px and the date picker disappeared behind a chevron. Now: name, dob+age, relation, each on its own row, with the trash button absolute-positioned in the top-end corner. */ @media (max-width: 720px) { .hh-list { gap: 12px; max-height: none; } .hh-row { position: relative; display: flex !important; flex-direction: column; align-items: stretch; grid-template-columns: none !important; grid-template-rows: none !important; gap: 10px; padding: 14px 14px 12px; background: var(--glass); border: 1px solid var(--card-border); border-radius: 14px; } .hh-row > * { width: 100%; min-width: 0; } .hh-row .hh-relation { grid-column: auto !important; } /* undo desktop override */ .hh-row .form-control { height: 44px; font-size: .95rem; } .hh-row .hh-name { text-align: right; padding-inline-end: 52px; /* room for the corner trash btn (RTL: left padding) */ } /* DOB cell — keep flex BUT ensure the date input (flatpickr altInput) gets all the space it needs. The badge is fixed-width on the start side (= right in RTL), date fills the rest. */ .hh-dob-wrap { display: flex !important; flex-direction: row; align-items: center; gap: 8px; width: 100%; min-width: 0; } .hh-dob-wrap > input, .hh-dob-wrap input, .hh-dob-wrap .form-control, .hh-dob-wrap input.flatpickr-input { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; height: 44px !important; font-size: .95rem !important; text-align: center !important; padding: 0 10px !important; } /* The hidden flatpickr-input keeps display:none — make sure our flex rule above doesn't accidentally bring it back as a visible 0-width box. */ .hh-dob-wrap input.flatpickr-input:not(.input) { display: none !important; } .hh-age-badge { flex: 0 0 auto; height: 34px; min-width: 70px; padding: 0 12px; font-size: .85rem; } .hh-rel-btn { height: 44px; font-size: .95rem; } /* Float the delete button into the top-end corner. In RTL "end" is the LEFT side — same side it appeared on in the original desktop grid. */ .hh-row .hh-remove-btn { position: absolute !important; top: 10px; inset-inline-end: 10px; width: 38px; height: 38px; font-size: .9rem; } } /* ===== Modal footer with split alignment — destructive action on one side, primary+cancel on the other. Used in the edit-expense modal where the "מחק" (delete) button sits opposite to "שמור"/"ביטול". ===== */ .modal-footer-split { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .modal-footer-end { display: flex; gap: 10px; align-items: center; } .modal-footer-split .ef-delete-btn { /* Subtle outline style — destructive, but doesn't compete with the primary save button visually. Confirmation dialog handles the gravity. */ background: transparent; color: var(--danger); border: 1.5px solid rgba(239,68,68,.45); box-shadow: none; transition: var(--transition); } .modal-footer-split .ef-delete-btn:hover { background: rgba(239,68,68,.12); border-color: var(--danger); color: var(--danger); transform: translateY(-1px); } @media (max-width: 540px) { .modal-footer-split { flex-direction: column-reverse; align-items: stretch; } .modal-footer-split .ef-delete-btn, .modal-footer-end { width: 100%; } .modal-footer-end .btn { flex: 1; } } /* ===== Delete-confirmation dialog ===== Built dynamically into . Floats above the edit-expense modal with a darker backdrop and a strong red theme to clearly signal a destructive action. The dialog shows what's being deleted (description + amount + date), warns about installment series, and offers a cascade toggle. ===== */ .delete-confirm-overlay { position: fixed; inset: 0; z-index: 99999; background: rgba(0, 0, 0, .65); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity .18s ease-out; } .delete-confirm-overlay.is-open { opacity: 1; } .delete-confirm-dialog { background: var(--card); border: 1px solid rgba(239,68,68,.32); border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04) inset, 0 0 60px rgba(220,38,38,.15); width: 100%; max-width: 460px; overflow: hidden; transform: translateY(8px) scale(.96); transition: transform .22s cubic-bezier(.34,1.56,.64,1); direction: rtl; } .delete-confirm-overlay.is-open .delete-confirm-dialog { transform: translateY(0) scale(1); } .dcd-header { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: linear-gradient(135deg, rgba(239,68,68,.18), rgba(220,38,38,.08)); border-bottom: 1px solid rgba(239,68,68,.18); position: relative; } .dcd-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #dc2626, #ef4444); color: #fff; font-size: 1.25rem; flex-shrink: 0; box-shadow: 0 6px 18px rgba(220,38,38,.45); animation: dcdShake .55s cubic-bezier(.36,.07,.19,.97); } @keyframes dcdShake { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotate(-8deg); } 40% { transform: rotate(8deg); } 60% { transform: rotate(-4deg); } 80% { transform: rotate(4deg); } } .dcd-titles { flex: 1; min-width: 0; } .dcd-titles h3 { margin: 0 0 2px; font-size: 1.1rem; font-weight: 800; color: var(--text); line-height: 1.2; } .dcd-titles p { margin: 0; font-size: .82rem; color: var(--danger); font-weight: 600; letter-spacing: .02em; } .dcd-close { background: transparent; border: none; color: var(--text-3); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition); flex-shrink: 0; } .dcd-close:hover { background: rgba(239,68,68,.1); color: var(--danger); } .dcd-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; } .dcd-summary { background: var(--glass); border: 1px solid var(--card-border); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; } .dcd-summary-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .9rem; } .dcd-label { color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; } .dcd-label i { color: var(--text-3); font-size: .85rem; } .dcd-value { color: var(--text); font-weight: 600; text-align: left; } .dcd-strong { font-weight: 700; } .dcd-amount { color: var(--danger); font-weight: 800; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; } .dcd-warning { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: rgba(245,158,11,.10); border: 1px solid rgba(245,158,11,.32); border-radius: 12px; color: var(--text-2); font-size: .85rem; line-height: 1.5; } .dcd-warning > i { color: var(--warning); font-size: 1.1rem; flex-shrink: 0; margin-top: 2px; } .dcd-warning strong { color: var(--text); font-weight: 700; } .dcd-cascade-toggle { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(239,68,68,.06); border: 1px solid rgba(239,68,68,.2); border-radius: 10px; cursor: pointer; transition: var(--transition); } .dcd-cascade-toggle:hover { background: rgba(239,68,68,.10); } .dcd-cascade-toggle input { accent-color: var(--danger); width: 16px; height: 16px; cursor: pointer; } .dcd-cascade-text { font-size: .88rem; color: var(--text); font-weight: 600; } .dcd-footer { display: flex; gap: 10px; padding: 16px 20px; background: rgba(0,0,0,.10); border-top: 1px solid var(--card-border); justify-content: flex-end; } .dcd-footer .btn { min-width: 110px; } @media (max-width: 540px) { .dcd-footer { flex-direction: column-reverse; } .dcd-footer .btn { width: 100%; } } /* ===== Deficit banner — top-of-reports alert when expenses exceed income. Two severities (warn = orange, critical = red), both with an attention- grabbing pulse animation. Slides in from the top when the page loads. ===== */ .deficit-banner { position: relative; display: flex; align-items: center; gap: 18px; padding: 18px 22px; margin-bottom: 22px; border-radius: 18px; overflow: hidden; color: #fff; box-shadow: 0 16px 40px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.06) inset; animation: deficitSlideIn .55s cubic-bezier(.34,1.56,.64,1); isolation: isolate; } @keyframes deficitSlideIn { from { opacity: 0; transform: translateY(-12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .deficit-caution { /* Yellow/amber — "approaching the limit" but still in budget */ background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); } .deficit-warn { background: linear-gradient(135deg, #d97706 0%, #b45309 100%); } .deficit-critical { background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%); } /* Animated background — subtle moving stripes for urgency */ .deficit-banner-bg { position: absolute; inset: 0; z-index: 0; background-image: repeating-linear-gradient( -55deg, transparent 0, transparent 40px, rgba(255,255,255,.06) 40px, rgba(255,255,255,.06) 80px ); animation: deficitStripes 18s linear infinite; opacity: .8; } @keyframes deficitStripes { from { background-position: 0 0; } to { background-position: 200px 0; } } .deficit-critical .deficit-banner-bg { /* Faster stripes = more urgency */ animation-duration: 9s; } .deficit-caution .deficit-banner-bg { /* Slower stripes = lower urgency, but still "watch out" */ animation-duration: 24s; opacity: .65; } /* Icon — large, white, rotating-pulse */ .deficit-banner-icon { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 16px; background: rgba(255,255,255,.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.6rem; flex-shrink: 0; animation: deficitIconPulse 1.6s ease-in-out infinite; box-shadow: 0 6px 18px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.18) inset; } @keyframes deficitIconPulse { 0%, 100% { transform: scale(1); box-shadow: 0 6px 18px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.18) inset, 0 0 0 0 rgba(255,255,255,.5); } 50% { transform: scale(1.06); box-shadow: 0 6px 18px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.18) inset, 0 0 0 12px rgba(255,255,255,0); } } .deficit-critical .deficit-banner-icon { animation-duration: 1.1s; } .deficit-banner-content { position: relative; z-index: 1; flex: 1; min-width: 0; } .deficit-banner-title { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; font-weight: 900; letter-spacing: -.01em; margin-bottom: 6px; text-shadow: 0 1px 2px rgba(0,0,0,.25); } /* Pulsing "live alert" dot next to the title */ .deficit-banner-pulse { position: relative; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,.6); animation: deficitDot 1.4s ease-in-out infinite; flex-shrink: 0; } @keyframes deficitDot { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.6); transform: scale(1); } 50% { box-shadow: 0 0 0 8px rgba(255,255,255,0); transform: scale(1.15); } } .deficit-critical .deficit-banner-pulse { animation-duration: .9s; } .deficit-banner-body { font-size: .95rem; line-height: 1.55; color: rgba(255,255,255,.95); text-shadow: 0 1px 2px rgba(0,0,0,.18); } .deficit-banner-body strong { font-weight: 800; color: #fff; } .deficit-banner-amount { background: rgba(255,255,255,.20); padding: 1px 8px; border-radius: 6px; direction: ltr; unicode-bidi: isolate; display: inline-block; } @media (max-width: 540px) { .deficit-banner { padding: 14px 16px; gap: 12px; border-radius: 14px; } .deficit-banner-icon { width: 44px; height: 44px; font-size: 1.2rem; border-radius: 12px; } .deficit-banner-title { font-size: 1.05rem; } .deficit-banner-body { font-size: .85rem; } } /* ===== Inline collapsible form section — small disclosure widget for secondary form fields. Distinct from .collapsible-card (full card chrome). Lives inside form layouts; collapsed by default; rotate-on-open chevron. */ .form-collapsible { background: var(--glass); border: 1px solid var(--card-border); border-radius: 12px; overflow: hidden; transition: border-color .2s ease; } .form-collapsible:focus-within { border-color: var(--primary); } .form-collapsible-trigger { width: 100%; background: transparent; border: 0; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; color: var(--text); cursor: pointer; font-size: .92rem; font-weight: 600; text-align: start; transition: background .18s ease; } .form-collapsible-trigger:hover { background: rgba(99,102,241,.08); } .form-collapsible-label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .form-collapsible-label > i { color: var(--primary); } .form-collapsible-hint { font-size: .76rem; color: var(--text-2); font-weight: 500; background: var(--card); border: 1px solid var(--card-border); border-radius: 999px; padding: 2px 10px; margin-inline-start: 4px; } .form-collapsible-chev { color: var(--text-2); transition: transform .25s ease; font-size: .9rem; } .form-collapsible-body { padding: 4px 14px 14px; border-top: 1px solid var(--card-border); animation: fadeIn .18s ease; } .form-collapsible.collapsed .form-collapsible-body { display: none; } .form-collapsible.collapsed .form-collapsible-chev { transform: rotate(-90deg); } .form-collapsible.collapsed .form-collapsible-trigger { padding-bottom: 12px; } /* ===== Limits page — grid of category cards with monthly cap input ===== */ .limits-intro-card .limits-intro-icon { width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg, var(--warning), #d97706); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; box-shadow: 0 6px 18px rgba(245,158,11,.35); } .limits-stats { display: flex; flex-direction: column; gap: 6px; min-width: 220px; background: var(--glass); border: 1px solid var(--card-border); border-radius: 12px; padding: 12px 14px; font-size: .88rem; } .limits-stat-row { display: flex; justify-content: space-between; align-items: center; color: var(--text-2); } .limits-stat-row strong { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; } .limits-filter-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .limits-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } .limit-card { background: var(--card); border: 1px solid var(--card-border); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; transition: var(--transition); } .limit-card:hover { border-color: var(--primary); transform: translateY(-1px); box-shadow: var(--shadow-md); } .limit-card.limit-ok { border-color: rgba(16,185,129,.3); } .limit-card.limit-close { border-color: rgba(245,158,11,.45); } .limit-card.limit-over { border-color: rgba(239,68,68,.55); background: linear-gradient(135deg, rgba(239,68,68,.04), transparent); } .limit-card.limit-none { opacity: .85; } .limit-card-head { display: flex; align-items: center; gap: 12px; } .limit-icon-wrap { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .limit-icon { font-size: 1.4rem; line-height: 1; } .limit-name-wrap { flex: 1; min-width: 0; } .limit-name { font-weight: 700; color: var(--text); font-size: .98rem; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .limit-meta { font-size: .78rem; font-variant-numeric: tabular-nums; color: var(--text-2); direction: ltr; unicode-bidi: isolate; text-align: right; } .limit-meta-empty { color: var(--text-3); font-style: italic; } .limit-spent { color: var(--text); font-weight: 700; } .limit-divider { color: var(--text-3); margin: 0 4px; } .limit-cap { color: var(--text-2); } .limit-over .limit-spent { color: var(--danger); } .limit-clear-btn { width: 28px; height: 28px; border-radius: 8px; background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.25); color: var(--danger); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; flex-shrink: 0; transition: var(--transition); } .limit-clear-btn:hover { background: rgba(239,68,68,.18); transform: scale(1.06); } .limit-progress { position: relative; height: 20px; background: rgba(99,102,241,.10); border-radius: 99px; overflow: hidden; } .limit-progress-bar { height: 100%; background: linear-gradient(90deg, #10b981, #16a34a); border-radius: 99px; transition: width .3s ease; } .limit-close .limit-progress-bar { background: linear-gradient(90deg, #f59e0b, #d97706); } .limit-over .limit-progress-bar { background: linear-gradient(90deg, #dc2626, #ef4444); } .limit-progress-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); letter-spacing: .02em; line-height: 1; } .limit-input-wrap { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--glass); border: 1px solid var(--card-border); border-radius: 10px; padding: 4px 44px; /* leave room for the absolute-positioned save btn */ transition: var(--transition); direction: ltr; /* "₪ 4870" reads naturally left-to-right */ } .limit-input-wrap:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,.15); } .limit-input-prefix { color: var(--text-2); font-weight: 800; font-size: 1rem; line-height: 1; } .limit-input { flex: 0 1 auto; width: 130px; border: none !important; background: transparent !important; height: 36px !important; padding: 0 !important; font-size: 1.1rem !important; font-weight: 800 !important; direction: ltr !important; text-align: center !important; box-shadow: none !important; } .limit-save-btn { position: absolute; inset-inline-start: 4px; /* Save sits in the start corner — right in RTL */ top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, var(--primary), var(--secondary)); border: none; color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; flex-shrink: 0; transition: var(--transition); } .limit-save-btn:hover { transform: translateY(-50%) scale(1.06); box-shadow: 0 4px 12px rgba(99,102,241,.4); } @media (max-width: 540px) { .limits-grid { grid-template-columns: 1fr; } .limits-intro-card .card-body { flex-direction: column; } .limits-stats { width: 100%; } } /* ===== Category-Limit overrun dialog (multi-row) ===== */ .cat-limit-dialog { max-width: 540px; } .cat-limit-row { background: var(--glass); border: 1px solid var(--card-border); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; } .cat-limit-row:last-child { margin-bottom: 0; } .cat-limit-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .cat-limit-icon { font-size: 1.4rem; } .cat-limit-name { font-weight: 800; color: var(--text); flex: 1; min-width: 0; } .cat-limit-peers { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 600; padding: 3px 10px; background: linear-gradient(135deg, rgba(99,102,241,.15), rgba(139,92,246,.10)); border: 1px solid rgba(99,102,241,.28); color: var(--primary); border-radius: 99px; } .cat-limit-peer-list { display: flex; flex-wrap: wrap; gap: 4px; } .cat-limit-peer { font-size: .72rem; color: var(--text-2); padding: 2px 8px; background: rgba(99,102,241,.06); border: 1px solid var(--card-border); border-radius: 99px; white-space: nowrap; } .cat-limit-bar-wrap { width: 100%; height: 10px; background: rgba(99,102,241,.10); border-radius: 99px; overflow: hidden; direction: ltr; } .cat-limit-bar { position: relative; height: 100%; display: flex; } .cat-limit-bar-fill { background: linear-gradient(90deg, #10b981, #16a34a); height: 100%; transition: width .3s; } .cat-limit-bar-over { background: linear-gradient(90deg, #dc2626, #ef4444); height: 100%; transition: width .3s; box-shadow: 0 0 8px rgba(220,38,38,.6); } .cat-limit-numbers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; font-size: .82rem; } .cat-limit-numbers > div { display: flex; flex-direction: column; gap: 2px; } .cat-limit-numbers span { color: var(--text-2); font-size: .72rem; } .cat-limit-numbers strong { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; } .cat-limit-numbers .cat-limit-over-num strong { color: var(--danger); font-weight: 900; } @media (max-width: 540px) { .cat-limit-numbers { grid-template-columns: 1fr 1fr; } .cat-limit-numbers .cat-limit-over-num { grid-column: 1 / -1; padding-top: 6px; border-top: 1px dashed var(--card-border); } } /* ===== Budget-Overrun confirmation — same dialog DNA as delete-confirm but orange/yellow themed (warning, not destructive) and with a financial impact summary table. Built dynamically into . ===== */ .budget-overrun-dialog { max-width: 500px; } .budget-overrun-dialog.is-warn { border-color: rgba(245,158,11,.4); box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04) inset, 0 0 60px rgba(245,158,11,.18); } .budget-overrun-dialog.is-critical { border-color: rgba(220,38,38,.45); box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04) inset, 0 0 60px rgba(220,38,38,.22); } .bod-header { background: linear-gradient(135deg, rgba(245,158,11,.18), rgba(217,119,6,.08)) !important; border-bottom-color: rgba(245,158,11,.22) !important; } .is-critical .bod-header { background: linear-gradient(135deg, rgba(239,68,68,.20), rgba(220,38,38,.10)) !important; border-bottom-color: rgba(239,68,68,.28) !important; } .bod-icon { background: linear-gradient(135deg, #f59e0b, #d97706) !important; box-shadow: 0 6px 18px rgba(245,158,11,.45) !important; animation: bodIconPulse 1.6s ease-in-out infinite !important; } .is-critical .bod-icon { background: linear-gradient(135deg, #dc2626, #ef4444) !important; box-shadow: 0 6px 18px rgba(220,38,38,.5) !important; } @keyframes bodIconPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } .budget-overrun-dialog .dcd-titles p { color: var(--warning); } .is-critical .dcd-titles p { color: var(--danger); } /* Headline — the eye-catching "חריגה צפויה של ₪ 5,000 (15%)" line */ .bod-headline { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 14px; background: linear-gradient(135deg, rgba(245,158,11,.12), rgba(217,119,6,.06)); border: 1px solid rgba(245,158,11,.28); border-radius: 14px; text-align: center; } .is-critical .bod-headline { background: linear-gradient(135deg, rgba(239,68,68,.14), rgba(220,38,38,.06)); border-color: rgba(239,68,68,.32); } .bod-label { font-size: .82rem; font-weight: 600; color: var(--text-2); letter-spacing: .02em; } .bod-overshoot { font-size: 2rem; font-weight: 900; color: var(--warning); line-height: 1.1; text-shadow: 0 1px 2px rgba(0,0,0,.15); } .is-critical .bod-overshoot { color: var(--danger); } .bod-pct { font-size: .85rem; font-weight: 700; padding: 2px 12px; border-radius: 99px; background: rgba(245,158,11,.18); color: var(--warning); margin-top: 4px; } .is-critical .bod-pct { background: rgba(239,68,68,.18); color: var(--danger); } /* Impact table — shows expense, income, spent, remaining, after-balance */ .bod-table { display: flex; flex-direction: column; background: var(--glass); border: 1px solid var(--card-border); border-radius: 12px; overflow: hidden; } .bod-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; font-size: .9rem; border-bottom: 1px solid var(--card-border); } .bod-row:last-child { border-bottom: none; } .bod-row-divider { background: rgba(99,102,241,.04); } .bod-row-after { background: linear-gradient(135deg, rgba(239,68,68,.10), rgba(220,38,38,.05)); border-top: 2px solid rgba(239,68,68,.25); font-weight: 700; } .bod-cell-l { color: var(--text-2); display: inline-flex; align-items: center; gap: 8px; } .bod-cell-l i { color: var(--text-3); font-size: .85rem; width: 16px; text-align: center; } .bod-cell-r { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; } /* Tip box — gentle suggestion */ .bod-tip { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: rgba(99,102,241,.08); border: 1px solid rgba(99,102,241,.22); border-radius: 12px; color: var(--text-2); font-size: .85rem; line-height: 1.55; } .bod-tip > i { color: var(--primary); font-size: 1.1rem; flex-shrink: 0; margin-top: 2px; } .bod-tip strong { color: var(--text); font-weight: 700; } /* "שמור בכל זאת" — orange warning button (not the standard primary green) */ .budget-overrun-dialog .btn-warning { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; border: none; box-shadow: 0 4px 14px rgba(245,158,11,.35); } .budget-overrun-dialog .btn-warning:hover { background: linear-gradient(135deg, #d97706, #b45309); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(245,158,11,.45); } .is-critical .btn-warning { background: linear-gradient(135deg, #dc2626, #b91c1c) !important; box-shadow: 0 4px 14px rgba(220,38,38,.4) !important; } .is-critical .btn-warning:hover { background: linear-gradient(135deg, #b91c1c, #991b1b) !important; box-shadow: 0 6px 18px rgba(220,38,38,.55) !important; } @media (max-width: 540px) { .bod-overshoot { font-size: 1.6rem; } .bod-row { padding: 8px 12px; font-size: .85rem; } } /* ===== Balance state tags — "חיובי" (positive) / "גירעון" (deficit) Shown under the balance stat-card. The deficit tag pulses to draw the eye to a financial problem the user should address. ===== */ .balance-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 99px; font-size: .82rem; font-weight: 800; letter-spacing: .03em; line-height: 1; border: 1.5px solid; } .balance-tag i { font-size: .9rem; } .balance-tag-positive { color: #10b981; background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.32); } .balance-tag-deficit { color: #fff; background: linear-gradient(135deg, #dc2626, #b91c1c); border-color: transparent; text-shadow: 0 1px 2px rgba(0,0,0,.25); box-shadow: 0 4px 14px rgba(220,38,38,.42), 0 0 0 1px rgba(255,255,255,.08) inset; animation: deficitPulse 2.4s cubic-bezier(.4,0,.2,1) infinite; text-transform: uppercase; font-size: .85rem; padding: 5px 14px; } @keyframes deficitPulse { 0%, 100% { box-shadow: 0 4px 14px rgba(220,38,38,.42), 0 0 0 1px rgba(255,255,255,.08) inset; transform: scale(1); } 50% { box-shadow: 0 6px 22px rgba(220,38,38,.65), 0 0 0 4px rgba(220,38,38,.18), 0 0 0 1px rgba(255,255,255,.08) inset; transform: scale(1.04); } } .balance-tag-deficit i { animation: deficitShake 2.4s ease-in-out infinite; } @keyframes deficitShake { 0%, 92%, 100% { transform: rotate(0deg); } 94% { transform: rotate(-12deg); } 96% { transform: rotate(12deg); } 98% { transform: rotate(-6deg); } } [data-theme="light"] .balance-tag-positive { color: #047857; background: rgba(16,185,129,.14); } /* ===== Big-Expense Warning — appears in the expense modal when the typed amount trips a budget threshold. Two severity levels (mid = orange, high = red), with tip-buttons that the user can click to apply suggestions like "split into 3 installments". ===== */ .big-expense-warning { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; margin-bottom: 16px; border-radius: 14px; border: 1.5px solid; background-image: linear-gradient(135deg, transparent 0%, transparent 100%); animation: bewSlideIn .28s cubic-bezier(.34, 1.56, .64, 1); position: relative; overflow: hidden; } @keyframes bewSlideIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .big-expense-warning::before { /* Decorative accent stripe along the start edge (RTL: right) */ content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: currentColor; opacity: .65; } .big-expense-warning.bew-mid { color: #d97706; border-color: rgba(217,119,6,.35); background-color: rgba(245,158,11,.08); background-image: linear-gradient(135deg, rgba(245,158,11,.12), rgba(217,119,6,.04)); } .big-expense-warning.bew-high { color: #dc2626; border-color: rgba(220,38,38,.4); background-color: rgba(239,68,68,.10); background-image: linear-gradient(135deg, rgba(239,68,68,.16), rgba(220,38,38,.06)); } [data-theme="light"] .big-expense-warning.bew-mid { background-color: rgba(245,158,11,.10); color: #b45309; } [data-theme="light"] .big-expense-warning.bew-high { background-color: rgba(239,68,68,.10); color: #b91c1c; } .bew-icon { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: currentColor; color: #fff !important; font-size: 1.05rem; box-shadow: 0 4px 14px currentColor; } .bew-mid .bew-icon { box-shadow: 0 4px 14px rgba(245,158,11,.35); } .bew-high .bew-icon { box-shadow: 0 4px 14px rgba(220,38,38,.35); } .bew-icon i { color: #fff !important; opacity: 1; } .bew-content { flex: 1; min-width: 0; } .bew-title { font-weight: 800; font-size: 1rem; margin-bottom: 6px; color: var(--text); letter-spacing: -.01em; } .bew-issue-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 4px; } .bew-issue { font-size: .88rem; color: var(--text-2); line-height: 1.5; padding-right: 16px; position: relative; } .bew-issue::before { content: '•'; position: absolute; right: 0; color: currentColor; font-weight: 800; font-size: 1.2rem; line-height: 1; top: -2px; } .bew-issue strong { color: var(--text); font-weight: 700; } .bew-tips-title { font-size: .82rem; color: var(--text-2); margin: 8px 0 6px; display: flex; align-items: center; gap: 6px; font-weight: 600; } .bew-tips-title i { color: currentColor; } .bew-tips { display: flex; flex-wrap: wrap; gap: 6px; } .bew-tip-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: var(--card); border: 1.5px solid currentColor; border-radius: 99px; color: currentColor; font-family: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; transition: var(--transition); white-space: nowrap; } .bew-tip-btn:hover { background: currentColor; color: #fff !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.15); } .bew-tip-btn:hover i { color: #fff !important; } .bew-tip-btn:active { transform: translateY(0); } .bew-tip-text { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: .82rem; color: var(--text-2); background: var(--glass); border-radius: 99px; border: 1px solid var(--card-border); } .bew-tip-text i { color: currentColor; opacity: .7; } @media (max-width: 540px) { .big-expense-warning { padding: 12px 14px; gap: 10px; } .bew-icon { width: 34px; height: 34px; font-size: .95rem; } .bew-title { font-size: .92rem; } .bew-tip-btn { padding: 6px 10px; font-size: .76rem; } } /* "+N" badge shown after the primary cat-badge in narrow displays (table cells, recent grid, agenda) when an expense has multiple categories. */ .cat-badge-extra { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; margin-right: 4px; /* RTL: visual gap to the left of the primary chip */ background: rgba(99,102,241,.14); color: var(--primary); border: 1px solid rgba(99,102,241,.28); border-radius: 99px; font-size: .72rem; font-weight: 700; line-height: 1; cursor: help; vertical-align: middle; } /* ===== Multi-Category Picker — chip-based multi-select dropdown ===== */ .cat-mp-row { display: flex; align-items: stretch; gap: 8px; } .cat-mp-row .cat-multi-picker { flex: 1; min-width: 0; } .cat-mp-add-btn { flex-shrink: 0; width: 44px; min-height: 44px; border: 1.5px solid var(--input-border); background: var(--input-bg); color: var(--primary); border-radius: var(--radius-md); cursor: pointer; transition: var(--transition); display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; } .cat-mp-add-btn:hover { border-color: var(--primary); background: rgba(99,102,241,.1); transform: scale(1.04); } .cat-mp-add-btn:active { transform: scale(.96); } .cat-multi-picker { position: relative; width: 100%; } .cat-mp-btn { width: 100%; min-height: 44px; padding: 6px 36px 6px 12px; /* RTL: chevron on the left side */ background: var(--input-bg); border: 1.5px solid var(--input-border); border-radius: var(--radius-md); color: var(--text); font-family: inherit; font-size: 1rem; text-align: right; cursor: pointer; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; position: relative; transition: var(--transition); } /* Compact variant — used in dense table rows (e.g. import preview). Smaller height and tighter chips to fit alongside other cell inputs. */ .cat-mp-compact .cat-mp-btn { min-height: 36px; padding: 4px 30px 4px 8px; font-size: .9rem; } .cat-mp-compact .cat-mp-btn::after { left: 8px; width: 12px; height: 12px; } .cat-mp-compact .cat-mp-chip { font-size: .76rem; padding: 2px 3px 2px 7px; } .cat-mp-compact .cat-mp-chip-name { max-width: 7rem; } .cat-mp-compact .cat-mp-chip-x { width: 16px; height: 16px; font-size: 1rem; } .cat-mp-btn:hover { border-color: var(--primary); } .cat-multi-picker.open .cat-mp-btn { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,.15); } .cat-multi-picker.cat-mp-invalid .cat-mp-btn { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(239,68,68,.15); } .cat-mp-btn::after { /* chevron — same SVG as user-picker for consistency */ content: ''; position: absolute; left: 12px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236366f1'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; transition: transform .2s; } .cat-multi-picker.open .cat-mp-btn::after { transform: translateY(-50%) rotate(180deg); } .cat-mp-chips { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; align-items: center; } .cat-mp-placeholder { color: var(--text-3); font-size: .95rem; } .cat-mp-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 9px; /* RTL: extra space on the X side */ background: color-mix(in srgb, var(--cat-color) 14%, transparent); border: 1px solid color-mix(in srgb, var(--cat-color) 35%, transparent); border-radius: 99px; font-size: .82rem; line-height: 1.2; max-width: 100%; white-space: nowrap; } .cat-mp-chip-primary { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cat-color) 60%, transparent); } .cat-mp-chip-icon { font-size: .95rem; } .cat-mp-chip-name { overflow: hidden; text-overflow: ellipsis; max-width: 11rem; color: var(--text); } .cat-mp-chip-x { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; border-radius: 99px; cursor: pointer; color: var(--text-3); font-size: 1.1rem; line-height: 1; transition: var(--transition); } .cat-mp-chip-x:hover { background: color-mix(in srgb, var(--cat-color) 30%, transparent); color: var(--text); } .cat-mp-list { display: none; position: absolute; inset: auto; top: calc(100% + 4px); right: 0; left: 0; z-index: 99999; background: var(--input-bg); border: 1.5px solid var(--primary); border-radius: var(--radius-md); box-shadow: 0 12px 32px rgba(0,0,0,.18); overflow: hidden; animation: fpSlideUp .18s cubic-bezier(.34,1.56,.64,1); } .cat-multi-picker.open .cat-mp-list { display: block; } .cat-mp-search-wrap { padding: 8px; border-bottom: 1px solid var(--input-border); background: var(--input-bg); position: sticky; top: 0; } .cat-mp-search { width: 100%; height: 36px; padding: 0 12px; background: rgba(99,102,241,.08); border: 1px solid var(--input-border); border-radius: 10px; color: var(--text); font-family: inherit; font-size: .9rem; transition: var(--transition); } .cat-mp-search:focus { outline: none; border-color: var(--primary); background: var(--input-bg); } .cat-mp-items { max-height: 300px; overflow-y: auto; padding: 6px; display: grid; gap: 2px; } .cat-mp-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; background: transparent; border: 1px solid transparent; border-radius: 10px; color: var(--text); font-family: inherit; font-size: .92rem; cursor: pointer; text-align: right; transition: var(--transition); } .cat-mp-item:hover, .cat-mp-item.cat-mp-pre-highlight { background: rgba(99,102,241,.12); } .cat-mp-item.active { background: linear-gradient(135deg, rgba(99,102,241,.2), rgba(139,92,246,.14)); border-color: rgba(99,102,241,.3); } .cat-mp-item.cat-mp-hidden { display: none; } .cat-mp-icon { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 1.1rem; flex-shrink: 0; } .cat-mp-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cat-mp-check { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--text-3); flex-shrink: 0; transition: var(--transition); position: relative; } .cat-mp-item.active .cat-mp-check { background: linear-gradient(135deg, var(--primary), var(--secondary)); border-color: transparent; } .cat-mp-item.active .cat-mp-check::after { content: ''; position: absolute; inset: 4px 5px 5px 4px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2 6 5 9 10 3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; } /* ---- Hide browser native password reveal button ---- */ input[type="password"]::-ms-reveal, input[type="password"]::-ms-clear, input[type="password"]::-webkit-credentials-auto-fill-button { display: none !important; width: 0 !important; height: 0 !important; } /* ---- Password Toggle ---- */ .pass-toggle { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-3); cursor: pointer; font-size: .9rem; padding: 4px; transition: color var(--transition); } .pass-toggle:hover { color: var(--primary); } /* ---- Drag & Drop ---- */ .drag-placeholder { border: 2px dashed var(--primary); border-radius: var(--radius-md); height: 60px; background: rgba(99,102,241,.05); animation: pulse 1.5s infinite; } /* ---- Switch Toggle ---- */ .switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; } .switch input { opacity: 0; width: 0; height: 0; } .switch-slider { width: 44px; height: 24px; background: var(--border); border-radius: 99px; transition: background var(--transition); position: relative; flex-shrink: 0; } .switch-slider::after { content: ''; position: absolute; width: 18px; height: 18px; background: #fff; border-radius: 50%; top: 3px; right: 3px; transition: transform var(--transition); box-shadow: 0 1px 4px rgba(0,0,0,.3); } .switch input:checked + .switch-slider { background: var(--primary); } .switch input:checked + .switch-slider::after { transform: translateX(-20px); } /* =========================== FLATPICKR – Custom Hebrew Theme =========================== */ .flatpickr-calendar { background: #1a1f2e !important; border: 1px solid rgba(99,102,241,.35) !important; border-radius: 18px !important; box-shadow: 0 16px 48px rgba(0,0,0,.5), 0 0 0 1px rgba(99,102,241,.15) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; font-family: 'Heebo', sans-serif !important; padding: 8px !important; direction: rtl !important; width: 320px !important; overflow: hidden; } [data-theme="light"] .flatpickr-calendar { background: rgba(255,255,255,.97) !important; border-color: rgba(99,102,241,.25) !important; box-shadow: 0 16px 48px rgba(0,0,0,.15), 0 0 0 1px rgba(99,102,241,.1) !important; } /* Month Header */ .flatpickr-months { display: flex !important; align-items: center !important; padding: 10px 8px 8px !important; position: relative !important; height: 52px !important; } .flatpickr-month { background: transparent !important; color: #e2e8f0 !important; height: 36px !important; flex: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; position: static !important; } [data-theme="light"] .flatpickr-month { color: #1e293b !important; } .flatpickr-current-month { font-size: 1rem !important; font-weight: 700 !important; color: #e2e8f0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: auto !important; position: static !important; left: auto !important; } [data-theme="light"] .flatpickr-current-month { color: #1e293b !important; } .flatpickr-current-month .flatpickr-monthDropdown-months { background: rgba(99,102,241,.15) !important; border: 1px solid rgba(99,102,241,.3) !important; border-radius: 8px !important; color: #818cf8 !important; font-family: 'Heebo', sans-serif !important; font-weight: 700 !important; font-size: .9rem !important; padding: 0 !important; cursor: pointer !important; appearance: none !important; -webkit-appearance: none !important; width: 90px !important; height: 34px !important; text-align: center !important; text-align-last: center !important; box-sizing: border-box !important; transition: background .15s, border-color .15s !important; } .flatpickr-current-month:has(.flatpickr-monthDropdown-months):hover .flatpickr-monthDropdown-months { background: rgba(99,102,241,.28) !important; border-color: rgba(99,102,241,.55) !important; } [data-theme="light"] .flatpickr-current-month .flatpickr-monthDropdown-months { background: rgba(99,102,241,.08) !important; color: #4f46e5 !important; } .flatpickr-current-month .numInputWrapper { background: rgba(99,102,241,.15) !important; border: 1px solid rgba(99,102,241,.3) !important; border-radius: 8px !important; padding: 0 !important; width: 90px !important; height: 34px !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } .flatpickr-current-month input.cur-year { color: #818cf8 !important; font-family: 'Heebo', sans-serif !important; font-weight: 700 !important; font-size: .9rem !important; padding: 0 !important; width: 100% !important; height: 34px !important; text-align: center !important; box-sizing: border-box !important; } [data-theme="light"] .flatpickr-current-month input.cur-year { color: #4f46e5 !important; } .numInputWrapper span { display: none !important; } .numInputWrapper:hover span { display: block !important; } .numInputWrapper span { background: transparent !important; border: none !important; } .numInputWrapper span:after { border-color: #818cf8 transparent transparent !important; } .numInputWrapper span.arrowDown:after { border-color: transparent transparent #818cf8 !important; } /* Prev/Next arrows */ .flatpickr-prev-month, .flatpickr-next-month { position: static !important; color: #6366f1 !important; fill: #6366f1 !important; width: 36px !important; height: 36px !important; flex-shrink: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 10px !important; border: 1px solid rgba(99,102,241,.25) !important; background: rgba(99,102,241,.08) !important; transition: all .2s !important; padding: 0 !important; top: auto !important; } .flatpickr-prev-month:hover, .flatpickr-next-month:hover { background: rgba(99,102,241,.25) !important; border-color: rgba(99,102,241,.5) !important; color: #818cf8 !important; fill: #818cf8 !important; } .flatpickr-prev-month svg, .flatpickr-next-month svg { width: 15px !important; height: 15px !important; /* RTL: flip both arrows — in RTL "prev" sits on the right so it must point RIGHT (>), and "next" sits on the left so it must point LEFT (<). Flatpickr draws them LTR by default. */ transform: scaleX(-1) !important; } /* Weekday headers — match day grid exactly */ .flatpickr-weekdays { background: transparent !important; padding: 4px 8px !important; width: 100% !important; display: flex !important; } .flatpickr-weekdaycontainer { direction: rtl !important; display: flex !important; width: 100% !important; flex: 1 !important; } span.flatpickr-weekday { background: transparent !important; color: #6366f1 !important; font-family: 'Heebo', sans-serif !important; font-weight: 700 !important; font-size: .78rem !important; letter-spacing: .03em !important; text-align: center !important; padding: 0 !important; margin: 0 !important; flex: 1 1 0 !important; width: calc(100% / 7) !important; } /* Days */ .flatpickr-days { border: none !important; width: 100% !important; } .dayContainer { width: 100% !important; min-width: 100% !important; max-width: 100% !important; direction: rtl !important; display: flex !important; flex-wrap: wrap !important; padding: 4px 8px !important; gap: 0 !important; } .flatpickr-day { background: transparent !important; border: 1px solid transparent !important; border-radius: 10px !important; color: #cbd5e1 !important; font-family: 'Heebo', sans-serif !important; font-weight: 500 !important; font-size: .88rem !important; width: calc(100% / 7) !important; max-width: calc(100% / 7) !important; flex: 0 0 calc(100% / 7) !important; height: 40px !important; line-height: 40px !important; transition: all .18s !important; margin: 0 !important; text-align: center !important; position: relative !important; box-sizing: border-box !important; } [data-theme="light"] .flatpickr-day { color: #334155 !important; } .flatpickr-day:hover { background: rgba(99,102,241,.2) !important; border-color: rgba(99,102,241,.4) !important; color: #fff !important; } .flatpickr-day.today { background: rgba(99,102,241,.18) !important; border: 2px solid #6366f1 !important; color: #a5b4fc !important; font-weight: 800 !important; position: relative !important; } /* נקודה קטנה מתחת למספר - סימון "היום" */ .flatpickr-day.today::after { content: '' !important; position: absolute !important; bottom: 4px !important; left: 50% !important; transform: translateX(-50%) !important; width: 4px !important; height: 4px !important; border-radius: 50% !important; background: #6366f1 !important; } .flatpickr-day.today:hover { background: rgba(99,102,241,.35) !important; color: #fff !important; } .flatpickr-day.today.selected, .flatpickr-day.today.selected:hover { background: linear-gradient(135deg,#6366f1,#8b5cf6) !important; border-color: transparent !important; color: #fff !important; } /* Footer "היום" */ .fp-footer { padding: 8px 10px 10px; border-top: 1px solid rgba(99,102,241,.18); display: flex; justify-content: center; } .fp-today-btn { display: flex; align-items: center; gap: 6px; padding: 7px 22px; background: linear-gradient(135deg, rgba(99,102,241,.2), rgba(139,92,246,.15)); border: 1px solid rgba(99,102,241,.4); border-radius: 99px; color: #818cf8; font-family: 'Heebo', sans-serif; font-size: .85rem; font-weight: 700; cursor: pointer; transition: all .18s; width: 100%; justify-content: center; } .fp-today-btn:hover { background: linear-gradient(135deg, rgba(99,102,241,.35), rgba(139,92,246,.28)); border-color: rgba(99,102,241,.7); color: #fff; box-shadow: 0 4px 14px rgba(99,102,241,.3); } [data-theme="light"] .fp-today-btn { color: #4f46e5; background: rgba(99,102,241,.1); } [data-theme="light"] .fp-today-btn:hover { background: rgba(99,102,241,.2); color: #4338ca; } .flatpickr-day.selected, .flatpickr-day.selected:hover { background: linear-gradient(135deg, #6366f1, #8b5cf6) !important; border-color: transparent !important; color: #fff !important; font-weight: 700 !important; box-shadow: 0 4px 14px rgba(99,102,241,.5) !important; transform: scale(1.08) !important; } .flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: rgba(148,163,184,.3) !important; } /* Weekend highlight */ .flatpickr-day:nth-child(7n), .flatpickr-day:nth-child(7n-6) { color: #f472b6 !important; } .flatpickr-day:nth-child(7n):hover, .flatpickr-day:nth-child(7n-6):hover { color: #fff !important; } .flatpickr-day.selected:nth-child(7n), .flatpickr-day.selected:nth-child(7n-6) { color: #fff !important; } /* Input field when flatpickr is active */ .flatpickr-input { cursor: pointer !important; } .flatpickr-input.active { border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(99,102,241,.2) !important; } /* Calendar icon addon */ .flatpickr-input-wrap { position: relative; } /* Animation */ .flatpickr-calendar.open { animation: fpSlideUp .2s cubic-bezier(.34,1.56,.64,1) !important; } @keyframes fpSlideUp { from { opacity: 0; transform: translateY(12px) scale(.95); } to { opacity: 1; transform: none; } } /* ---- Year Picker scrollbar ---- */ #fpYearPicker { scrollbar-width: thin; scrollbar-color: rgba(99,102,241,.5) transparent; } #fpYearPicker::-webkit-scrollbar { width: 5px; } #fpYearPicker::-webkit-scrollbar-track { background: transparent; margin: 10px 0; } #fpYearPicker::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #6366f1, #8b5cf6); border-radius: 99px; } #fpYearPicker::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #818cf8, #a78bfa); } .switch-label { font-size: .88rem; font-weight: 500; color: var(--text); } /* ---- Avatar Upload ---- */ .avatar-upload-wrap { display: flex; align-items: center; gap: 16px; padding: 14px 16px; background: var(--glass); border: 1.5px dashed var(--input-border); border-radius: var(--radius-lg); cursor: pointer; transition: all var(--transition); position: relative; } .avatar-upload-wrap:hover { border-color: var(--primary); background: rgba(99,102,241,.06); } .avatar-upload-wrap input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; } .avatar-upload-preview { flex-shrink: 0; position: relative; } .avatar-upload-preview .avatar-remove { position: absolute; top: -8px; inset-inline-end: -8px; /* RTL-aware: outer top corner */ width: 26px; height: 26px; background: var(--danger); border: 2px solid var(--card); border-radius: 50%; color: #fff; font-size: .82rem; line-height: 1; display: none; align-items: center; justify-content: center; cursor: pointer; z-index: 5; box-shadow: 0 2px 8px rgba(0,0,0,.4); transition: transform var(--transition), background var(--transition); } .avatar-upload-preview .avatar-remove:hover { background: #b91c1c; transform: scale(1.1); } .avatar-upload-preview.has-photo .avatar-remove { display: flex; } .avatar-upload-info { flex: 1; } .avatar-upload-info strong { display: block; font-size: .88rem; color: var(--text); margin-bottom: 2px; } .avatar-upload-info span { font-size: .76rem; color: var(--text-3); } /* ---- Color Picker Grid ---- */ .color-picker-grid { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0 4px; } .color-swatch { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: all .18s; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .color-swatch:hover { transform: scale(1.18); } .color-swatch.active { border-color: #fff; box-shadow: 0 0 0 2px var(--primary), 0 4px 12px rgba(0,0,0,.3); transform: scale(1.15); } .color-swatch-custom { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 2px dashed var(--border); overflow: hidden; flex-shrink: 0; transition: transform .18s; display: flex; align-items: center; justify-content: center; background: var(--glass); color: var(--text-2); font-size: .7rem; position: relative; } .color-swatch-custom:hover { transform: scale(1.18); border-color: var(--primary); } .color-swatch-custom input[type="color"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; } /* ============================================================ Searchable Category Picker (.cat-picker) Built dynamically over by footer.php ============================================================ */ .cp-native-hidden { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; clip: rect(0 0 0 0); overflow: hidden; } .cat-picker { position: relative; direction: rtl; } .cat-picker-btn { width: 100%; min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--input-bg); border: 1.5px solid var(--input-border); border-radius: var(--radius-md); color: var(--text); font-family: 'Heebo', sans-serif; font-size: .95rem; font-weight: 600; cursor: pointer; text-align: right; transition: border-color .15s, box-shadow .15s, background .15s; box-sizing: border-box; } .cat-picker-btn:hover { border-color: rgba(99,102,241,.5); } /* When the underlying select is marked invalid, paint the cat-picker button red so the user actually sees the validation failure (the native select is hidden) */ .cat-picker > select.is-invalid ~ .cat-picker-btn, .cat-picker:has(> select.is-invalid) .cat-picker-btn { border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgba(239,68,68,.18) !important; background: rgba(239,68,68,.06) !important; } .cat-picker.open .cat-picker-btn, .cat-picker-btn:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,.18); } .cp-btn-icon { font-size: 1.15rem; line-height: 1; flex-shrink: 0; } .cp-btn-name { flex: 1; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-btn-placeholder { flex: 1; color: var(--text-3); font-weight: 500; } .cp-arrow { color: var(--text-3); font-size: .8rem; transition: transform .2s; flex-shrink: 0; } .cat-picker.open .cp-arrow { transform: rotate(180deg); color: var(--primary); } .cat-picker-list { position: absolute; top: calc(100% + 6px); inset-inline-start: 0; inset-inline-end: 0; background: var(--card); border: 1.5px solid var(--border); border-radius: var(--radius-md); box-shadow: 0 12px 32px rgba(0,0,0,.25); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); z-index: 1100; max-height: 340px; overflow: hidden; display: none; flex-direction: column; animation: catPickerFadeIn .15s ease; } @keyframes catPickerFadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .cat-picker.open .cat-picker-list { display: flex; } .cat-picker-search-wrap { position: relative; padding: 10px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .cp-search-icon { position: absolute; top: 50%; inset-inline-start: 22px; transform: translateY(-50%); color: var(--text-3); font-size: .85rem; pointer-events: none; } .cat-picker-search { width: 100%; height: 38px; padding: 0 36px 0 14px; background: var(--input-bg); border: 1.5px solid var(--input-border); border-radius: var(--radius-sm); color: var(--text); font-family: 'Heebo', sans-serif; font-size: .9rem; direction: rtl; text-align: right; box-sizing: border-box; transition: border-color .15s, box-shadow .15s; } .cat-picker-search:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,.18); } .cat-picker-items { overflow-y: auto; max-height: 280px; padding: 4px 0; } .cat-picker-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: transparent; border: none; color: var(--text); font-family: 'Heebo', sans-serif; font-size: .92rem; font-weight: 500; cursor: pointer; text-align: right; direction: rtl; transition: background .12s; box-sizing: border-box; } .cat-picker-item:hover, .cat-picker-item.cp-pre-highlight { background: rgba(99,102,241,.1); } .cat-picker-item.active { background: linear-gradient(135deg, rgba(99,102,241,.18), rgba(168,85,247,.14)); font-weight: 700; color: var(--primary); } .cat-picker-item .cp-icon { font-size: 1.15rem; line-height: 1; flex-shrink: 0; width: 24px; text-align: center; } .cat-picker-item .cp-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cat-picker-item.cp-placeholder { color: var(--text-3); font-style: italic; } .cat-picker-item.cp-add-new { border-top: 1px solid var(--border); color: var(--primary); font-weight: 700; background: rgba(99,102,241,.04); } .cat-picker-item.cp-add-new:hover { background: rgba(99,102,241,.14); } /* =========================== PRINT STYLES — make `window.print()` produce a clean A4 page that's readable on paper: light theme, no chrome (sidebar/FAB/buttons/modals), no shadows/gradients/backdrop-filters, and crucially no card or table row splits across pages — anything that doesn't fit shifts to the next page intact. =========================== */ @media print { @page { size: A4; margin: 14mm 12mm; } /* Force light, printer-friendly colors regardless of dark/light theme. Critically also override --text-2/--text-3 because the dark theme sets them to light grays that vanish on white paper (the "where did the subtitle go?" bug). */ :root, [data-theme="dark"], [data-theme="light"] { --text: #1a1a1a !important; --text-2: #4a5568 !important; --text-3: #6b7280 !important; --card: #ffffff !important; --card-border: #cfd3dc !important; --input-bg: #ffffff !important; --input-border:#cfd3dc !important; } html, body, .layout-main, .main-content, .topbar, .topbar-date { background: #ffffff !important; color: #1a1a1a !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* Kill the fullscreen gradient pseudo-element — it's `position:fixed` so it would otherwise paint a dark/blue block on every page of the print. */ body::before, body::after { display: none !important; content: none !important; } /* Hide all interactive chrome */ .sidebar, .sidebar-overlay, .sidebar-toggle, .topbar-toggle, .topbar-actions, .topbar-actions *, .menu-toggle, .theme-toggle, .fab, .fab-menu, .modal-overlay, .toast-container, .receipt-remove, .btn, .filter-card, .month-selector, .view-tabs, .add-category-from-dropdown, .draggable-modal, .viewer-mode-banner, .tip-card, .no-print, button { display: none !important; } /* Layout reset — single column, full width, no transforms/sticky */ .main-content, .container, .page-content, .content { margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; position: static !important; transform: none !important; overflow: visible !important; } .topbar { position: static !important; box-shadow: none !important; padding: 0 0 8px !important; border-bottom: 1px solid #ccc !important; margin-bottom: 12px !important; } /* Cards — flat, no shadows/gradients/blur, plain border */ .card, .stat-card, .stat-grid > *, .expense-charts-card { background: #fff !important; border: 1px solid #cfd3dc !important; border-radius: 6px !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; color: #1a1a1a !important; margin-bottom: 10px !important; padding: 12px !important; } .card *, .stat-card *, .stat-grid > * * { background: transparent !important; color: inherit !important; text-shadow: none !important; box-shadow: none !important; } /* Keep only meaningful color accents on text (totals stay readable) */ .amount-positive, .text-success, .stat-value.amount-positive { color: #166534 !important; } .amount-negative, .text-danger, .stat-value.amount-negative { color: #991b1b !important; } .text-primary { color: #1e3a8a !important; } /* PAGE-BREAK CONTROL — let CARDS flow naturally across pages, but keep individual ITEMS (table rows, list rows, legend rows) intact. This way: - A short card prints on one page. - A long card (like "upcoming payments" with 10 items) flows across multiple pages, with each item kept whole at the page boundary. - The card's chrome (border, header) gets repeated visually as the content wraps — this is the standard "table flowing across pages" pattern and what users expect. Critically we DO NOT set break-inside on `.card` itself — that was what caused content to be clipped instead of flowing. */ .stat-grid > *, .stat-card, .cat-legend-item, .upcoming-item, .recent-tile, tr { page-break-inside: avoid !important; break-inside: avoid !important; } /* Cards: just zero out animations/transforms (which break print rendering in some Chrome versions) but ALLOW them to span multiple pages. */ .card, .expense-charts-card { transform: none !important; animation: none !important; opacity: 1 !important; overflow: visible !important; } /* Headers should never end a page alone — keep with the body that follows */ h1, h2, h3, h4, .card-title, .page-header, .card-header { page-break-after: avoid !important; break-after: avoid !important; } /* Charts get HIDDEN on paper. Two reasons: 1. The legend with names + amounts + percentages already conveys all the information a reader needs — the chart was just visual flair. 2. Chart.js draws to a