@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap'); /* ═══════════════════════════════════════════════════════════ THEMES — applied via data-theme on ═══════════════════════════════════════════════════════════ */ :root { /* Dark — Midnight (default) */ --bg: #080B12; --bg-s: #0F1320; --bg-e: #161B2A; --bg-card: #1C2235; --bg-hover: #222840; --accent: #5B8FF9; --accent-glow: rgba(91,143,249,.22); --accent-soft: rgba(91,143,249,.10); --success: #34D399; --success-s: rgba(52,211,153,.10); --danger: #FB7185; --danger-s: rgba(251,113,133,.10); --warning: #FBBF24; --warning-s: rgba(251,191,36,.10); --purple: #A78BFA; --purple-s: rgba(167,139,250,.10); --orange: #FB923C; --orange-s: rgba(251,146,60,.10); --text: #E8EEFF; --text-2: #7B88A8; --text-3: #3D4A66; --border: rgba(255,255,255,.06); --border-a: rgba(91,143,249,.25); --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 22px; --sh: 0 8px 32px rgba(0,0,0,.45); --font-h: 'Lato', sans-serif; --font-b: 'Inter', sans-serif; --nav: 54px; --sidebar: 220px; } /* Happy — warm sunrise */ [data-theme="happy"] { --bg: #FFF8F0; --bg-s: #FFF1E0; --bg-e: #FFE8CC; --bg-card: #FFFFFF; --bg-hover: #FFF3E5; --accent: #F59E0B; --accent-glow: rgba(245,158,11,.20); --accent-soft: rgba(245,158,11,.12); --success: #10B981; --success-s: rgba(16,185,129,.10); --danger: #EF4444; --danger-s: rgba(239,68,68,.10); --warning: #F59E0B; --warning-s: rgba(245,158,11,.15); --purple: #8B5CF6; --purple-s: rgba(139,92,246,.10); --orange: #F97316; --orange-s: rgba(249,115,22,.10); --text: #1C1917; --text-2: #78716C; --text-3: #C4B5A0; --border: rgba(0,0,0,.09); --border-a: rgba(245,158,11,.35); --sh: 0 4px 20px rgba(0,0,0,.08); } /* Angry — inferno */ [data-theme="angry"] { --bg: #0D0505; --bg-s: #160808; --bg-e: #1F0A0A; --bg-card: #2A0C0C; --bg-hover: #340F0F; --accent: #EF4444; --accent-glow: rgba(239,68,68,.25); --accent-soft: rgba(239,68,68,.12); --success: #22C55E; --success-s: rgba(34,197,94,.10); --danger: #FF6B6B; --danger-s: rgba(255,107,107,.12); --warning: #F97316; --warning-s: rgba(249,115,22,.12); --purple: #C084FC; --purple-s: rgba(192,132,252,.10); --orange: #F97316; --orange-s: rgba(249,115,22,.12); --text: #FEE2E2; --text-2: #FCA5A5; --text-3: #7F2020; --border: rgba(239,68,68,.12); --border-a: rgba(239,68,68,.30); --sh: 0 8px 32px rgba(239,68,68,.15); } /* Sad — deep ocean */ [data-theme="sad"] { --bg: #020B18; --bg-s: #041220; --bg-e: #071929; --bg-card: #0B2035; --bg-hover: #0D2840; --accent: #06B6D4; --accent-glow: rgba(6,182,212,.22); --accent-soft: rgba(6,182,212,.10); --success: #34D399; --success-s: rgba(52,211,153,.10); --danger: #F87171; --danger-s: rgba(248,113,113,.10); --warning: #FBBF24; --warning-s: rgba(251,191,36,.10); --purple: #818CF8; --purple-s: rgba(129,140,248,.10); --orange: #FB923C; --orange-s: rgba(251,146,60,.10); --text: #E0F2FE; --text-2: #7DD3FC; --text-3: #1E4D7A; --border: rgba(6,182,212,.10); --border-a: rgba(6,182,212,.30); --sh: 0 8px 32px rgba(0,0,0,.5); } /* Excited — neon galaxy */ [data-theme="excited"] { --bg: #06040E; --bg-s: #0B0818; --bg-e: #110C22; --bg-card: #16102A; --bg-hover: #1C1535; --accent: #A855F7; --accent-glow: rgba(168,85,247,.28); --accent-soft: rgba(168,85,247,.12); --success: #4ADE80; --success-s: rgba(74,222,128,.10); --danger: #F472B6; --danger-s: rgba(244,114,182,.10); --warning: #FACC15; --warning-s: rgba(250,204,21,.10); --purple: #C084FC; --purple-s: rgba(192,132,252,.10); --orange: #FB923C; --orange-s: rgba(251,146,60,.10); --text: #FAF5FF; --text-2: #C084FC; --text-3: #4C2080; --border: rgba(168,85,247,.12); --border-a: rgba(168,85,247,.35); --sh: 0 8px 32px rgba(168,85,247,.20); } /* Chill — forest */ [data-theme="chill"] { --bg: #030A05; --bg-s: #060F08; --bg-e: #0A160C; --bg-card: #0F1E11; --bg-hover: #142617; --accent: #22C55E; --accent-glow: rgba(34,197,94,.22); --accent-soft: rgba(34,197,94,.10); --success: #4ADE80; --success-s: rgba(74,222,128,.10); --danger: #F87171; --danger-s: rgba(248,113,113,.10); --warning: #FCD34D; --warning-s: rgba(252,211,77,.10); --purple: #A78BFA; --purple-s: rgba(167,139,250,.10); --orange: #FB923C; --orange-s: rgba(251,146,60,.10); --text: #ECFDF5; --text-2: #6EE7B7; --text-3: #1A4A2E; --border: rgba(34,197,94,.10); --border-a: rgba(34,197,94,.30); --sh: 0 8px 32px rgba(0,0,0,.5); } /* ═══════════════════════════════════════════════════════════ RESET & BASE ═══════════════════════════════════════════════════════════ */ *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; } html { font-size:16px; -webkit-text-size-adjust:100%; } body { font-family:var(--font-b); background:var(--bg); color:var(--text); min-height:100vh; line-height:1.5; overflow-x:hidden; transition:background .25s, color .25s; } a { color:var(--accent); text-decoration:none; } a:hover { opacity:.8; } button { cursor:pointer; font-family:var(--font-b); } input,select,textarea { font-family:var(--font-b); } ::-webkit-scrollbar { width:4px; height:4px; } ::-webkit-scrollbar-track { background:var(--bg-s); } ::-webkit-scrollbar-thumb { background:var(--text-3); border-radius:2px; } /* ═══════════════════════════════════════════════════════════ AUTH PAGES ═══════════════════════════════════════════════════════════ */ .auth-body { background:radial-gradient(ellipse 70% 50% at 50% -10%, var(--accent-soft), transparent 60%), var(--bg); display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px; } .auth-wrapper { width:100%; max-width:400px; } .auth-card { background:var(--bg-s); border:1px solid var(--border); border-radius:var(--r-xl); padding:36px 32px; box-shadow:var(--sh); } .auth-brand { text-align:center; margin-bottom:28px; } .brand-icon { display:inline-flex; align-items:center; justify-content:center; background:var(--accent-soft); border:1px solid var(--border-a); border-radius:var(--r); padding:14px; margin-bottom:14px; color:var(--accent); } .auth-brand h1 { font-family:var(--font-h); font-size:1.6rem; font-weight:700; } .auth-brand p { color:var(--text-2); font-size:.875rem; margin-top:3px; } .auth-form { display:flex; flex-direction:column; gap:14px; } .auth-switch { text-align:center; margin-top:18px; color:var(--text-2); font-size:.875rem; } /* ═══════════════════════════════════════════════════════════ FORM FIELDS ═══════════════════════════════════════════════════════════ */ .field { display:flex; flex-direction:column; gap:5px; min-width:0; } .field label { font-size:.7rem; font-weight:700; color:var(--text-2); letter-spacing:.05em; text-transform:uppercase; } .field input, .field select, .field textarea { background:var(--bg-e); border:1px solid var(--border); border-radius:var(--r-sm); padding:9px 12px; color:var(--text); font-size:.9rem; transition:border-color .15s, box-shadow .15s; width:100%; min-width:0; outline:none; } .field input:focus,.field select:focus,.field textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); } .field input::placeholder { color:var(--text-3); } .field select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%237B88A8' d='M5 6L0 0h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:32px; } .field-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; } /* ═══════════════════════════════════════════════════════════ BUTTONS ═══════════════════════════════════════════════════════════ */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:9px 16px; border-radius:var(--r-sm); font-size:.875rem; font-weight:600; transition:all .15s; white-space:nowrap; cursor:pointer; flex-shrink:0; border:none; outline:none; } .btn svg { width:14px; height:14px; flex-shrink:0; } .btn-primary { background:var(--accent); color:#fff; box-shadow:0 3px 12px var(--accent-glow); } .btn-primary:hover { filter:brightness(1.1); transform:translateY(-1px); } .btn-ghost { background:transparent; color:var(--text-2); border:1px solid var(--border); } .btn-ghost:hover { background:var(--bg-hover); color:var(--text); } .btn-danger { background:var(--danger-s); color:var(--danger); border:1px solid rgba(251,113,133,.2); } .btn-danger:hover { background:rgba(251,113,133,.18); } .btn-success { background:var(--success); color:#fff; } .btn-success:hover { filter:brightness(1.08); } .btn-sm { padding:6px 12px; font-size:.8125rem; } .btn-xs { padding:3px 8px; font-size:.75rem; border-radius:5px; } .btn-full{ width:100%; } .btn-icon{ padding:6px; } .w-full { width:100%; } /* ═══════════════════════════════════════════════════════════ ALERTS ═══════════════════════════════════════════════════════════ */ .alert { padding:10px 14px; border-radius:var(--r-sm); font-size:.85rem; } .alert-error { background:var(--danger-s); color:var(--danger); border:1px solid rgba(251,113,133,.2); } .alert-success { background:var(--success-s); color:var(--success); border:1px solid rgba(52,211,153,.2); } .alert-info { background:var(--accent-soft); color:var(--accent); border:1px solid var(--border-a); } /* ═══════════════════════════════════════════════════════════ SIDEBAR + MAIN LAYOUT ═══════════════════════════════════════════════════════════ */ .app-layout { display:flex; min-height:100vh; } .sidebar { width:var(--sidebar); background:var(--bg-s); border-right:1px solid var(--border); display:flex; flex-direction:column; position:fixed; top:0; left:0; height:100vh; z-index:100; transition:transform .28s cubic-bezier(.4,0,.2,1); overflow-y:auto; } .sb-brand { padding:16px 12px 12px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; flex-shrink:0; } .sb-logo { display:flex; align-items:center; justify-content:center; background:var(--accent-soft); border:1px solid var(--border-a); border-radius:9px; padding:7px; color:var(--accent); flex-shrink:0; } .sb-logo svg { width:17px; height:17px; } .sb-brand h2 { font-family:var(--font-h); font-size:.92rem; font-weight:700; white-space:nowrap; overflow:hidden; } .sb-nav { flex:1; padding:10px 8px; display:flex; flex-direction:column; gap:1px; } .sb-section { font-size:.6rem; font-weight:700; letter-spacing:.09em; color:var(--text-3); text-transform:uppercase; padding:10px 8px 3px; } .nav-item { display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:var(--r-sm); color:var(--text-2); font-size:.84rem; font-weight:500; transition:all .14s; position:relative; } .nav-item svg { width:15px; height:15px; flex-shrink:0; } .nav-item:hover { background:var(--bg-hover); color:var(--text); } .nav-item.active { background:var(--accent-soft); color:var(--accent); font-weight:600; } .nav-item.active::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:60%; background:var(--accent); border-radius:0 2px 2px 0; } .sb-footer { padding:10px 8px; border-top:1px solid var(--border); flex-shrink:0; } .user-chip { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:var(--r-sm); background:var(--bg-e); min-width:0; } .u-avatar { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:700; color:#fff; flex-shrink:0; } .u-name { font-size:.8rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .u-email { font-size:.65rem; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .main-content { flex:1; margin-left:var(--sidebar); display:flex; flex-direction:column; min-height:100vh; min-width:0; } .topbar { background:var(--bg-s); border-bottom:1px solid var(--border); height:var(--nav); display:flex; align-items:center; justify-content:space-between; padding:0 20px; position:sticky; top:0; z-index:50; gap:10px; } .topbar-left { display:flex; align-items:center; gap:10px; min-width:0; flex:1; } .topbar-title { font-family:var(--font-h); font-size:1rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .topbar-right { display:flex; align-items:center; gap:7px; flex-shrink:0; } .page { padding:18px; width:100%; } /* ═══════════════════════════════════════════════════════════ MONTH NAV BAR ═══════════════════════════════════════════════════════════ */ .month-bar { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; gap:10px; flex-wrap:wrap; } .month-nav { display:flex; align-items:center; gap:6px; flex-shrink:0; } .month-display{ font-family:var(--font-h); font-size:1.05rem; font-weight:700; min-width:130px; text-align:center; } .month-badges { display:flex; gap:6px; flex-wrap:wrap; } /* ═══════════════════════════════════════════════════════════ SUMMARY CARDS ═══════════════════════════════════════════════════════════ */ .summary-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px; } .sum-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-lg); padding:14px 16px; position:relative; overflow:hidden; min-width:0; } .sum-card::after { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--c, var(--accent)); } .sum-label { font-size:.65rem; font-weight:700; color:var(--text-2); text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; } .sum-value { font-family:var(--font-h); font-size:1.35rem; font-weight:800; letter-spacing:-.02em; word-break:break-word; } .sum-sub { font-size:.7rem; color:var(--text-3); margin-top:3px; } /* ═══════════════════════════════════════════════════════════ SECTION CARDS (budget-section) ═══════════════════════════════════════════════════════════ */ .budget-section { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-lg); margin-bottom:14px; overflow:hidden; } .section-header { display:flex; align-items:center; justify-content:space-between; padding:11px 16px; border-bottom:1px solid var(--border); background:var(--bg-e); flex-wrap:wrap; gap:8px; } .section-title { display:flex; align-items:center; gap:7px; font-family:var(--font-h); font-size:.875rem; font-weight:700; } .section-title svg { width:15px; height:15px; flex-shrink:0; } .section-total { font-family:var(--font-h); font-size:.9rem; font-weight:700; } /* ═══════════════════════════════════════════════════════════ BUDGET TABLE ═══════════════════════════════════════════════════════════ */ .table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; width:100%; } .budget-table { width:100%; border-collapse:collapse; min-width:460px; } .budget-table th { background:var(--bg-e); padding:7px 12px; text-align:left; font-size:.62rem; font-weight:700; letter-spacing:.07em; color:var(--text-3); text-transform:uppercase; border-bottom:1px solid var(--border); white-space:nowrap; } .budget-table th:last-child { text-align:right; } .budget-table td { padding:0; border-bottom:1px solid var(--border); vertical-align:middle; } .budget-table tr:last-child td { border-bottom:none; } .budget-table tr:hover td { background:var(--bg-hover); } .budget-table tr:hover .row-actions { opacity:1; } /* Inline edit cells */ .ie-wrap { padding:8px 12px; } .ie-name,.ie-provider,.ie-note { background:transparent; border:1px solid transparent; color:var(--text); font-family:var(--font-b); font-size:.875rem; padding:3px 5px; width:100%; outline:none; border-radius:4px; min-width:0; } .ie-name { font-weight:500; } .ie-provider,.ie-note { color:var(--text-2); font-size:.8rem; } .ie-name:focus,.ie-provider:focus,.ie-note:focus { background:var(--bg-e); border-color:var(--border-a); } .ie-amount { background:transparent; border:1px solid transparent; color:var(--text); font-family:var(--font-h); font-size:.9rem; font-weight:700; text-align:right; width:100%; max-width:120px; outline:none; border-radius:4px; padding:3px 5px; } .ie-amount:focus { background:var(--bg-e); border-color:var(--border-a); } .row-actions { display:flex; align-items:center; justify-content:flex-end; gap:3px; opacity:0; transition:opacity .14s; padding:0 6px; } .table-total-row td { background:var(--bg-e); padding:9px 12px; } .table-total-row .tl { color:var(--text-2); font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; font-weight:600; } .table-total-row .tv { font-family:var(--font-h); font-weight:800; text-align:right; } /* Scope badge toggle */ .type-badge { display:inline-flex; align-items:center; padding:0; background:none; border:none; cursor:pointer; } .type-badge:hover .badge { opacity:.75; transform:scale(1.05); } /* Net row (surplus/deficit line) */ .net-row { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-lg); padding:12px 18px; display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; flex-wrap:wrap; gap:10px; } .net-label { font-size:.84rem; color:var(--text-2); font-weight:500; } .net-value { font-family:var(--font-h); font-size:1.25rem; font-weight:800; } /* ═══════════════════════════════════════════════════════════ BADGES ═══════════════════════════════════════════════════════════ */ .badge { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:20px; font-size:.68rem; font-weight:700; transition:transform .12s; white-space:nowrap; line-height:1.3; } .b-blue { background:var(--accent-soft); color:var(--accent); border:1px solid var(--border-a); } .b-green { background:var(--success-s); color:var(--success); border:1px solid rgba(52,211,153,.22); } .b-red { background:var(--danger-s); color:var(--danger); border:1px solid rgba(251,113,133,.22); } .b-gold { background:var(--warning-s); color:var(--warning); border:1px solid rgba(251,191,36,.22); } .b-purple { background:var(--purple-s); color:var(--purple); border:1px solid rgba(167,139,250,.22); } .b-orange { background:var(--orange-s); color:var(--orange); border:1px solid rgba(251,146,60,.22); } .b-muted { background:transparent; color:var(--text-3); border:1px solid var(--border); } /* ═══════════════════════════════════════════════════════════ MODAL (bottom sheet) ═══════════════════════════════════════════════════════════ */ .overlay { position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.65); backdrop-filter:blur(4px); display:flex; align-items:flex-end; justify-content:center; opacity:0; pointer-events:none; transition:opacity .2s; } .overlay.open { opacity:1; pointer-events:all; } .modal { background:var(--bg-s); border:1px solid var(--border); border-radius:var(--r-xl) var(--r-xl) 0 0; padding:20px 18px 32px; width:100%; max-width:500px; max-height:92vh; overflow-y:auto; transform:translateY(100%); transition:transform .26s cubic-bezier(.4,0,.2,1); } .overlay.open .modal { transform:translateY(0); } .modal-handle { width:36px; height:3px; background:var(--border); border-radius:2px; margin:0 auto 16px; } .modal-title { font-family:var(--font-h); font-size:1rem; font-weight:700; margin-bottom:16px; } .modal-form { display:flex; flex-direction:column; gap:12px; } .modal-actions { display:flex; gap:8px; margin-top:4px; } .modal-actions .btn { flex:1; } /* ═══════════════════════════════════════════════════════════ GROUP / BALANCE (groups.php) ═══════════════════════════════════════════════════════════ */ .balance-split-2 { display:grid; grid-template-columns:1fr 44px 1fr; gap:8px; align-items:center; margin-bottom:14px; } .member-card { background:var(--bg-e); border:1px solid var(--border); border-radius:var(--r); padding:14px; text-align:center; min-width:0; } .m-av { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:700; color:#fff; margin:0 auto 7px; flex-shrink:0; } .m-name { font-size:.8rem; font-weight:600; word-break:break-word; } .m-total { font-family:var(--font-h); font-size:1.05rem; font-weight:800; margin:3px 0; } .m-sub { font-size:.68rem; color:var(--text-3); } .balance-result { background:var(--bg-card); border:1px solid var(--border-a); border-radius:var(--r); padding:14px; text-align:center; margin-top:12px; } .br-amount { font-family:var(--font-h); font-size:1.6rem; font-weight:800; } .br-label { font-size:.84rem; color:var(--text-2); margin-top:3px; } /* Expense Breakdown columns */ .breakdown-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; width:100%; } .breakdown-col { background:var(--bg-e); border:1px solid var(--border); border-radius:var(--r); padding:12px; min-width:0; overflow:hidden; } .breakdown-header { display:flex; align-items:center; gap:8px; margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid var(--border); } .breakdown-item { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; padding:5px 0; border-bottom:1px solid rgba(255,255,255,.03); } .breakdown-item:last-child { border-bottom:none; } .bi-left { flex:1; min-width:0; } .bi-name { font-size:.8rem; font-weight:500; word-break:break-word; } .bi-prov { font-size:.68rem; color:var(--text-3); } .bi-amount { font-family:var(--font-h); font-size:.82rem; font-weight:700; white-space:nowrap; flex-shrink:0; } .breakdown-total { display:flex; justify-content:space-between; align-items:center; padding-top:8px; margin-top:6px; border-top:1px solid var(--border); } .bt-label { font-size:.68rem; font-weight:700; color:var(--text-2); text-transform:uppercase; letter-spacing:.05em; } .bt-value { font-family:var(--font-h); font-weight:800; font-size:.9rem; } /* ═══════════════════════════════════════════════════════════ SETTINGS PAGE ═══════════════════════════════════════════════════════════ */ .settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; } .card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px; } .card-title { font-family:var(--font-h); font-size:.9rem; font-weight:700; margin-bottom:14px; } /* Theme selector grid */ .theme-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; } .theme-opt { background:var(--bg-e); border:2px solid transparent; border-radius:var(--r); overflow:hidden; cursor:pointer; transition:border-color .18s, transform .15s, box-shadow .18s; } .theme-opt:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.3); } .theme-opt.active { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); } .theme-swatch { height:48px; border-radius:4px 4px 0 0; padding:7px 8px; display:flex; flex-direction:column; gap:5px; } .theme-dots { display:flex; gap:4px; } .theme-dot { width:7px; height:7px; border-radius:50%; } .theme-bar { height:3px; border-radius:2px; } .theme-label { padding:5px 6px; font-size:.68rem; font-weight:700; text-align:center; border-top:1px solid rgba(255,255,255,.06); } /* ═══════════════════════════════════════════════════════════ INVITE BOX ═══════════════════════════════════════════════════════════ */ .invite-box { display:flex; align-items:center; gap:10px; background:var(--bg-e); border:1px dashed var(--border-a); border-radius:var(--r-sm); padding:10px 14px; } .invite-code { font-family:monospace; font-size:1.05rem; letter-spacing:.12em; color:var(--accent); flex:1; } /* ═══════════════════════════════════════════════════════════ SPLITWISE PAGE ═══════════════════════════════════════════════════════════ */ /* Balance hero card */ .sw-balance-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-lg); padding:20px; display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px; } .sw-bc-group { font-size:.65rem; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:.07em; margin-bottom:4px; } .sw-bc-amount { font-family:var(--font-h); font-size:2rem; font-weight:800; letter-spacing:-.03em; line-height:1.1; } .sw-bc-label { font-size:.84rem; color:var(--text-2); margin-top:4px; } .sw-bc-members{ display:flex; flex-direction:column; gap:5px; margin-top:10px; } .sw-member-pill { display:flex; align-items:center; gap:6px; font-size:.78rem; } .sw-bc-actions { display:flex; flex-direction:column; gap:8px; flex-shrink:0; min-width:130px; } .sw-bc-actions .btn { width:100%; justify-content:center; } /* Charts row */ .sw-charts-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; } .sw-chart-card { margin-bottom:0; } .sw-year-sel { background:var(--bg-e); border:1px solid var(--border); border-radius:6px; color:var(--text); padding:4px 8px; font-size:.78rem; font-family:var(--font-b); } /* Month filter strip */ .sw-month-filter { display:flex; gap:5px; margin-bottom:12px; flex-wrap:wrap; align-items:center; } /* Main 2-column grid */ .sw-main-grid { display:grid; grid-template-columns:1fr 300px; gap:12px; align-items:start; } /* Expense rows */ .sw-expense-row { display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--border); transition:background .14s; position:relative; } .sw-expense-row:last-child { border-bottom:none; } .sw-expense-row:hover { background:var(--bg-hover); } .sw-er-date { text-align:center; flex-shrink:0; width:28px; } .sw-er-day { font-family:var(--font-h); font-size:.9rem; font-weight:800; line-height:1.1; } .sw-er-mon { font-size:.58rem; color:var(--text-3); text-transform:uppercase; letter-spacing:.04em; } .sw-er-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; } .sw-er-body { flex:1; min-width:0; } .sw-er-title { font-size:.875rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sw-er-meta { display:flex; align-items:center; gap:6px; margin-top:2px; flex-wrap:wrap; } .sw-er-meta span { font-size:.73rem; color:var(--text-2); } .sw-note { font-style:italic; color:var(--text-3)!important; } .sw-er-right { text-align:right; flex-shrink:0; } .sw-er-total { font-family:var(--font-h); font-size:.875rem; font-weight:700; } .sw-er-share { font-size:.72rem; margin-top:1px; } .sw-lent { color:var(--success); } .sw-owe { color:var(--danger); } /* Delete button (hidden until hover) */ .sw-del-btn { background:none; border:none; color:var(--text-3); cursor:pointer; padding:4px; border-radius:4px; opacity:0; transition:opacity .14s, color .14s; flex-shrink:0; } .sw-expense-row:hover .sw-del-btn, .sw-act-row:hover .sw-del-btn { opacity:1; } .sw-del-btn:hover { color:var(--danger); background:var(--danger-s); } /* Activity feed */ .sw-act-row { display:flex; align-items:center; gap:10px; padding:9px 14px; border-bottom:1px solid var(--border); transition:background .14s; position:relative; } .sw-act-row:last-child { border-bottom:none; } .sw-act-row:hover { background:var(--bg-hover); } .sw-act-body { flex:1; min-width:0; } .sw-act-title { font-size:.82rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sw-act-meta { font-size:.7rem; color:var(--text-3); margin-top:1px; } .sw-act-amount { font-family:var(--font-h); font-size:.82rem; font-weight:700; white-space:nowrap; flex-shrink:0; color:var(--text-2); } /* Avatar helpers */ .sw-av-sm { width:18px; height:18px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:.52rem; font-weight:700; color:#fff; flex-shrink:0; } .sw-av-md { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:700; color:#fff; flex-shrink:0; } .sw-split-val { font-family:var(--font-h); font-weight:700; } /* ═══════════════════════════════════════════════════════════ MOBILE NAV ═══════════════════════════════════════════════════════════ */ .mobile-nav { display:none; position:fixed; bottom:0; left:0; right:0; background:var(--bg-s); border-top:1px solid var(--border); padding:4px 0 env(safe-area-inset-bottom,4px); z-index:200; } .mn-items { display:flex; } .mn-item { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:5px 2px; color:var(--text-3); font-size:.56rem; font-weight:600; transition:color .14s; text-align:center; } .mn-item svg { width:20px; height:20px; } .mn-item.active { color:var(--accent); } .hamburger { display:none; align-items:center; justify-content:center; background:var(--bg-e); border:1px solid var(--border); border-radius:var(--r-sm); padding:7px; color:var(--text); flex-shrink:0; } .hamburger svg { width:16px; height:16px; } .sb-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(2px); z-index:99; opacity:0; pointer-events:none; transition:opacity .26s; } .sb-overlay.open { opacity:1; pointer-events:all; } /* ═══════════════════════════════════════════════════════════ TOAST ═══════════════════════════════════════════════════════════ */ #toasts { position:fixed; bottom:76px; left:50%; transform:translateX(-50%); z-index:9999; display:flex; flex-direction:column; gap:6px; align-items:center; pointer-events:none; } .toast { background:var(--bg-e); border:1px solid var(--border); color:var(--text); padding:8px 16px; border-radius:30px; font-size:.82rem; font-weight:500; box-shadow:var(--sh); animation:tin .22s ease; white-space:nowrap; } @keyframes tin { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} } .toast.out { animation:tout .22s ease forwards; } @keyframes tout { to{opacity:0;transform:translateY(6px)} } /* ═══════════════════════════════════════════════════════════ EMPTY STATE ═══════════════════════════════════════════════════════════ */ .empty { text-align:center; padding:32px 20px; color:var(--text-3); } .empty svg { width:36px; height:36px; margin:0 auto 10px; opacity:.3; display:block; } .empty p { font-size:.84rem; line-height:1.65; } /* ═══════════════════════════════════════════════════════════ AMOUNT FONT — consistent everywhere ═══════════════════════════════════════════════════════════ */ .amount,.fh,.sum-value,.br-amount,.net-value,.sw-bc-amount, .sw-er-total,.sw-act-amount,.bi-amount,.bt-value,.m-total, .ie-amount,.table-total-row .tv { font-family:var(--font-h); } /* ═══════════════════════════════════════════════════════════ RESPONSIVE BREAKPOINTS ═══════════════════════════════════════════════════════════ */ @media(max-width:900px) { .summary-row { grid-template-columns:1fr 1fr; } .breakdown-grid-2 { grid-template-columns:1fr; } .sw-charts-row { grid-template-columns:1fr; } .sw-main-grid { grid-template-columns:1fr; } .settings-grid { grid-template-columns:1fr; } .balance-split-2 { grid-template-columns:1fr; } } @media(max-width:768px) { :root { --sidebar:270px; } .sidebar { transform:translateX(-100%); } .sidebar.open { transform:translateX(0); } .sb-overlay { display:block; } .main-content { margin-left:0; } .hamburger { display:flex; } .mobile-nav { display:block; } .page { padding:12px; padding-bottom:76px; } .topbar { padding:0 12px; } .row-actions { opacity:1; } .field-row { grid-template-columns:1fr; gap:10px; } .sw-er-date { display:none; } .sw-charts-row { grid-template-columns:1fr; } .sw-main-grid { grid-template-columns:1fr; } .sw-bc-actions { flex-direction:row; width:100%; min-width:unset; } .sw-bc-actions .btn { flex:1; } } @media(max-width:480px) { .summary-row { grid-template-columns:1fr 1fr; gap:8px; } .sum-card { padding:10px 12px; } .sum-value { font-size:1.1rem; } .month-display { font-size:.9rem; min-width:110px; } .month-badges .badge { font-size:.6rem; padding:2px 6px; } .topbar-right .btn-sm { padding:5px 10px; font-size:.75rem; } .theme-grid { grid-template-columns:repeat(3,1fr); } .breakdown-grid-2 { grid-template-columns:1fr; } } /* ═══════════════════════════════════════════════════════════ UTILITY CLASSES ═══════════════════════════════════════════════════════════ */ .flex { display:flex; } .fc { display:flex; align-items:center; } .fb { display:flex; align-items:center; justify-content:space-between; } .gap-4 { gap:4px; } .gap-6 { gap:6px; } .gap-8 { gap:8px; } .gap-12{ gap:12px; } .gap-16{ gap:16px; } .mt-8 { margin-top:8px; } .mt-12 { margin-top:12px; } .mt-16 { margin-top:16px; } .mt-20 { margin-top:20px; } .text-2{ color:var(--text-2); } .text-3 { color:var(--text-3); } .text-success { color:var(--success)!important; } .text-danger { color:var(--danger)!important; } .text-accent { color:var(--accent)!important; } .text-orange { color:var(--orange)!important; } .text-purple { color:var(--purple)!important; } .fw-600{ font-weight:600; } .fw-700 { font-weight:700; } .fw-800 { font-weight:800; } .hidden { display:none!important; } .truncate { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }