/* ============================================================ Mandala — styles.css Design token system — all colours are CSS variables. JSX files must ONLY use var(--token-name), never hardcoded hex/rgba. To switch theme: change :root values below. Zero JSX changes needed. ============================================================ */ /* ── DESIGN TOKENS — LIGHT THEME (default) ──────────────── */ :root { /* Surfaces */ --bg: #f5f6f8; --bg2: #ffffff; --bg3: #f0f2f5; --bg4: #e8ebf0; /* Text */ --text: #0f172a; --text1: #0f172a; --text2: #475569; --text3: #64748b; /* slate-500 — 4.6:1 contrast on white, readable at 11px */ /* Borders */ --border: #e2e8f0; --border2: #cbd5e1; /* Brand — Emerald (deep enough for light bg) */ --accent: #059669; --accent2: #047857; --accent-dim: rgba(5,150,105,0.10); --accent-dim2: rgba(5,150,105,0.06); --accent-soft: rgba(5,150,105,0.08); --accent-border: rgba(5,150,105,0.22); --accent-glow: rgba(5,150,105,0.25); --btn-primary-text: #ffffff; /* Danger / Red */ --danger: #dc2626; --red: #dc2626; --red-dim: rgba(220,38,38,0.08); --danger-soft: rgba(220,38,38,0.08); --danger-border: rgba(220,38,38,0.22); /* Amber / Warning */ --amber: #d97706; --amber-dim: rgba(217,119,6,0.10); --amber-soft: rgba(217,119,6,0.08); --amber-border: rgba(217,119,6,0.22); /* Gold (charts / allocation) */ --gold: #d97706; --gold-dim: rgba(217,119,6,0.10); /* Blue (debt, info) */ --blue: #2563eb; --blue-dim: rgba(37,99,235,0.10); /* Purple (Cash / other) */ --purple: #7c3aed; --purple-dim: rgba(124,58,237,0.10); /* Table alternating rows */ --row-alt: rgba(0,0,0,0.025); --row-alt-strong: rgba(0,0,0,0.045); /* Shadows */ --shadow: 0 4px 16px rgba(0,0,0,0.10); --shadow-sm: 0 1px 3px rgba(0,0,0,0.07); --shadow-card: 0 1px 4px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04); --shadow-modal: 0 20px 60px rgba(0,0,0,0.14); --shadow-hover: 0 4px 20px rgba(0,0,0,0.12); /* Overlays */ --overlay-modal: rgba(15,23,42,0.50); --overlay-loading: rgba(15,23,42,0.60); /* Radius */ --radius: 10px; --radius-sm: 7px; } /* ── DARK THEME — apply class="dark" to or ── */ .dark, [data-theme="dark"] { --bg: #0d0f14; --bg2: #13161e; --bg3: #1a1e2a; --bg4: #222736; --text: #e8eaf0; --text1: #f1f5f9; --text2: #8b90a0; --text3: #555a6e; --border: rgba(255,255,255,0.07); --border2: rgba(255,255,255,0.12); --accent: #4ade80; --accent2: #22c55e; --accent-dim: rgba(74,222,128,0.12); --accent-dim2: rgba(74,222,128,0.06); --accent-soft: rgba(74,222,128,0.08); --accent-border: rgba(74,222,128,0.25); --accent-glow: rgba(74,222,128,0.35); --btn-primary-text: #0a1a0f; --danger: #f87171; --red: #f87171; --red-dim: rgba(248,113,113,0.12); --danger-soft: rgba(248,113,113,0.10); --danger-border: rgba(248,113,113,0.25); --amber: #fbbf24; --amber-dim: rgba(251,191,36,0.12); --amber-soft: rgba(251,191,36,0.08); --amber-border: rgba(251,191,36,0.25); --gold: #f59e0b; --gold-dim: rgba(245,158,11,0.12); --blue: #60a5fa; --blue-dim: rgba(96,165,250,0.12); --purple: #a78bfa; --purple-dim: rgba(167,139,250,0.12); --row-alt: rgba(255,255,255,0.025); --row-alt-strong: rgba(255,255,255,0.045); --shadow: 0 4px 24px rgba(0,0,0,0.40); --shadow-sm: 0 1px 4px rgba(0,0,0,0.25); --shadow-card: 0 2px 10px rgba(0,0,0,0.35); --shadow-modal: 0 20px 60px rgba(0,0,0,0.55); --shadow-hover: 0 4px 20px rgba(0,0,0,0.45); --overlay-modal: rgba(0,0,0,0.70); --overlay-loading: rgba(13,15,20,0.85); } /* ── BASE RESET ──────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; font-size: 14px; line-height: 1.6; } /* ── HEADER ──────────────────────────────────────────────── */ .header { background: var(--bg2); border-bottom: 1px solid var(--border); padding: 0 32px; display: flex; align-items: center; justify-content: space-between; height: 60px; position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow-sm); } .logo { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 20px; color: var(--accent); letter-spacing: -0.5px; } .logo span { color: var(--text2); font-weight: 400; } .header-actions { display: flex; gap: 10px; align-items: center; } /* ── BUTTONS ─────────────────────────────────────────────── */ .btn { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; padding: 7px 16px; border-radius: var(--radius-sm); border: none; cursor: pointer; transition: all 0.18s; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; } .btn-ghost { background: transparent; color: var(--text2); border: 1px solid var(--border2); } .btn-ghost:hover { background: var(--bg3); color: var(--text); border-color: var(--border2); } .btn-primary { background: var(--accent); color: var(--btn-primary-text); font-weight: 600; box-shadow: 0 1px 3px var(--accent-glow); } .btn-primary:hover { background: var(--accent2); transform: translateY(-1px); box-shadow: 0 4px 12px var(--accent-glow); } .btn-danger { background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger-border); } .btn-danger:hover { background: var(--red-dim); } .btn-sm { padding: 5px 11px; font-size: 12px; min-height: 30px; } .btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* ── NAV TABS ────────────────────────────────────────────── */ .nav-tabs { background: var(--bg2); border-bottom: 1px solid var(--border); padding: 0 32px; display: flex; gap: 4px; position: sticky; top: 60px; z-index: 99; overflow-x: auto; scrollbar-width: none; } .nav-tabs::-webkit-scrollbar { display: none; } .nav-tab { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; padding: 12px 18px; background: none; border: none; color: var(--text2); cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.18s; margin-bottom: -1px; white-space: nowrap; flex-shrink: 0; } .nav-tab:hover { color: var(--text); background: var(--row-alt); border-radius: 6px 6px 0 0; } .nav-tab.active { color: var(--accent); border-bottom-color: var(--accent); } .nav-tab-client { color: var(--blue) !important; } .nav-tab-client:hover { color: var(--blue) !important; opacity: 0.8; } .nav-tab-client.active { color: var(--blue) !important; border-bottom-color: var(--blue) !important; } /* ── MAIN LAYOUT ─────────────────────────────────────────── */ .main { padding: 28px 32px; max-width: 1400px; margin: 0 auto; } /* ── TAB CONTENT ─────────────────────────────────────────── */ .tab-content { padding: 4px 0; } /* ── LOGIN SCREEN ────────────────────────────────────────── */ .login-screen { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 2rem; } .login-hero { display: flex; flex-direction: column; align-items: center; gap: 0; margin-bottom: 2rem; } .login-mark { width: min(280px, 58vw); height: auto; filter: drop-shadow(0 0 28px rgba(200,146,10,0.35)); } .login-wordmark { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(32px, 6vw, 52px); font-weight: 700; letter-spacing: 9px; text-transform: uppercase; color: var(--text); margin-top: 12px; text-align: center; } .login-tagline { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(16px, 2.2vw, 20px); font-style: italic; color: var(--accent); margin-top: 4px; text-align: center; letter-spacing: 0.3px; } .login-subtagline { font-size: 13px; color: var(--text3); margin-top: 6px; text-align: center; letter-spacing: 0.2px; } .login-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 20px; padding: 2.5rem; width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 1rem; box-shadow: var(--shadow-card); } .google-btn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 0.85rem 1.5rem; background: var(--bg3); border: 1px solid var(--border2); border-radius: var(--radius); color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 500; cursor: pointer; transition: all 0.2s; } .google-btn:hover { border-color: var(--accent-border); background: var(--bg3); box-shadow: var(--shadow-sm); } .google-btn:disabled { opacity: 0.5; cursor: not-allowed; } .login-error { font-size: 13px; color: var(--danger); text-align: center; min-height: 1.2em; padding: 0.5rem; background: var(--danger-soft); border-radius: var(--radius-sm); border: 1px solid var(--danger-border); } .login-note { font-size: 12px; color: var(--text3); text-align: center; line-height: 1.6; margin-top: 0.5rem; } /* ── SPINNER ─────────────────────────────────────────────── */ .spinner { width: 32px; height: 32px; border: 2.5px solid var(--border2); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto; } @keyframes spin { to { transform: rotate(360deg); } } /* ── USER CHIP ───────────────────────────────────────────── */ .user-chip { display: flex; align-items: center; gap: 8px; } .user-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-dim); border: 1.5px solid var(--accent-border); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--accent); flex-shrink: 0; } .user-name { font-size: 13px; color: var(--text2); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── SECTION TITLE ───────────────────────────────────────── */ .section-title { font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 14px; } /* ── NETWORTH HERO ───────────────────────────────────────── */ .networth-hero { background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; padding: 32px 36px; margin-bottom: 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; position: relative; overflow: hidden; box-shadow: var(--shadow-card); } .networth-hero::before { content: ''; position: absolute; top: -40px; right: -40px; width: 200px; height: 200px; background: radial-gradient(circle, var(--accent-soft) 0%, transparent 70%); pointer-events: none; } .networth-label { font-size: 12px; color: var(--text3); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; } .networth-amount { font-family: 'Syne', sans-serif; font-size: 42px; font-weight: 800; color: var(--accent); letter-spacing: -2px; line-height: 1; margin-bottom: 8px; } .networth-pl { font-size: 14px; color: var(--text2); display: flex; gap: 16px; } .networth-pl .pos { color: var(--accent); } .networth-pl .neg { color: var(--danger); } .networth-meta { display: flex; gap: 32px; } .meta-item { text-align: center; } .meta-val { font-family: 'Syne', sans-serif; font-size: 20px; font-weight: 700; color: var(--text); } .meta-lbl { font-size: 11px; color: var(--text3); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.5px; } /* ── CARDS GRID ──────────────────────────────────────────── */ .cards-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 24px; } .card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; transition: border-color 0.2s, box-shadow 0.2s; box-shadow: var(--shadow-sm); } .card:hover { border-color: var(--border2); box-shadow: var(--shadow-hover); } .card-icon { font-size: 20px; margin-bottom: 12px; } .card-label { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } .card-value { font-family: 'Syne', sans-serif; font-size: 22px; font-weight: 700; color: var(--text); margin-bottom: 4px; } .card-pct { font-size: 12px; color: var(--text2); } .card.eq { border-left: 3px solid var(--accent); } .card.gl { border-left: 3px solid var(--gold); } .card.debt { border-left: 3px solid var(--blue); } .card.cash { border-left: 3px solid var(--purple); } /* ── BADGE ───────────────────────────────────────────────── */ .badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 500; } .badge-eq { background: var(--accent-dim); color: var(--accent); } .badge-gl { background: var(--gold-dim); color: var(--gold); } .badge-debt { background: var(--blue-dim); color: var(--blue); } .badge-cash { background: var(--purple-dim); color: var(--purple); } .badge-re { background: var(--amber-dim); color: var(--amber); } .badge-ot { background: var(--bg3); color: var(--text2); border: 1px solid var(--border); } .badge-sip { background: var(--accent-dim); color: var(--accent); } .badge-lumpsum { background: var(--amber-dim); color: var(--amber); } .badge-off { background: var(--bg3); color: var(--text2); } .badge-active { background: var(--accent-dim); color: var(--accent); } .badge-inactive{ background: var(--red-dim); color: var(--danger); } .pl-pos { color: var(--accent); } .pl-neg { color: var(--danger); } /* ── TABLE ───────────────────────────────────────────────── */ table { width: 100%; border-collapse: collapse; font-size: 13px; } th { background: var(--bg3); padding: 9px 12px; text-align: left; color: var(--text2); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; border-bottom: 1.5px solid var(--border2); } td { padding: 9px 12px; border-bottom: 1px solid var(--border); color: var(--text); } tr:last-child td { border-bottom: none; } tr:hover td { background: var(--row-alt); } .table-wrap { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); } .table-scroll { overflow-x: auto; } /* Sticky column headers for holdings table scroll container */ .holdings-table thead th { position: sticky; top: 0; z-index: 5; box-shadow: 0 1px 0 var(--border2); } /* Sticky last column */ td.sticky-col, th.sticky-col { position: sticky; right: 0; background: var(--bg2); z-index: 1; box-shadow: -2px 0 6px rgba(0,0,0,0.06); } tr:hover td.sticky-col { background: var(--bg3); } /* ── INPUT / SELECT ──────────────────────────────────────── */ .input { width: 100%; background: var(--bg2); border: 1.5px solid var(--border2); border-radius: var(--radius-sm); padding: 9px 14px; font-size: 13px; color: var(--text); font-family: 'DM Sans', sans-serif; outline: none; transition: border-color 0.18s, box-shadow 0.18s; } .input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .input::placeholder { color: var(--text3); } .input[readonly] { opacity: 0.6; cursor: not-allowed; } select.input { cursor: pointer; } select.input option { background: var(--bg2); color: var(--text); } .input.error { border-color: var(--danger) !important; box-shadow: 0 0 0 3px var(--danger-soft); } /* ── FILTER SELECTS ──────────────────────────────────────── */ .filter-select { appearance: none; -webkit-appearance: none; background-color: var(--bg2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394a3b8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; border: 1.5px solid var(--border2); border-radius: var(--radius-sm); color: var(--text2); cursor: pointer; font-family: 'DM Sans', sans-serif; font-size: 13px; height: 34px; padding: 0 32px 0 12px; transition: border-color 0.18s, color 0.18s; min-width: 100px; outline: none; } .filter-select:hover { border-color: var(--border2); color: var(--text); } .filter-select:focus { border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 2px var(--accent-soft); } .filter-select option { background: var(--bg2); color: var(--text); } input.filter-select { background-image: none; padding: 0 12px; } /* ── FILTER / CONTROLS BAR ───────────────────────────────── */ .holdings-controls, .filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; padding: 10px 14px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .holdings-controls .filter-select, .holdings-controls .search-box, .filter-bar .filter-select, .filter-bar .search-box { height: 34px; } .holdings-count { font-size: 12px; color: var(--text3); margin-bottom: 8px; padding-left: 2px; } .search-box { appearance: none; background-color: var(--bg2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 10px center; border: 1.5px solid var(--border2); border-radius: var(--radius-sm); color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 13px; height: 34px; padding: 0 12px 0 34px; outline: none; transition: border-color 0.18s; } .search-box::placeholder { color: var(--text3); } .search-box:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); } .search-box:hover { border-color: var(--border2); } /* ── DRAWER ──────────────────────────────────────────────── */ .drawer-overlay { position: fixed; inset: 0; background: var(--overlay-modal); z-index: 200; opacity: 0; transition: opacity 0.2s; } .drawer-overlay.open { opacity: 1; } .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 420px; background: var(--bg2); border-left: 1px solid var(--border2); z-index: 201; transform: translateX(100%); transition: transform 0.25s ease; display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-modal); } .drawer.open { transform: translateX(0); } .drawer-header { padding: 20px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; background: var(--bg2); } .drawer-title { font-family: 'Syne', sans-serif; font-size: 16px; font-weight: 700; } .drawer-body { flex: 1; overflow-y: auto; padding: 20px 24px; } .drawer-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; gap: 10px; flex-shrink: 0; background: var(--bg2); } .field { margin-bottom: 14px; } .field label { display: block; font-size: 11px; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px; } .field label.required::after { content: ' *'; color: var(--danger); font-weight: 700; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .computed-val { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 14px; font-size: 13px; color: var(--text); font-weight: 500; font-family: 'Syne', sans-serif; } /* ── TOAST ───────────────────────────────────────────────── */ .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px); background: var(--bg2); border: 1px solid var(--accent-border); border-radius: var(--radius); padding: 12px 20px; display: flex; align-items: center; gap: 10px; z-index: 500; opacity: 0; transition: all 0.3s; min-width: 280px; max-width: 90vw; font-size: 13px; color: var(--text); box-shadow: var(--shadow); } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .toast.error { border-color: var(--danger-border); } /* ── MODAL ───────────────────────────────────────────────── */ .modal-overlay { display: none; position: fixed; inset: 0; background: var(--overlay-modal); z-index: 300; align-items: center; justify-content: center; } .modal-overlay.open { display: flex; } .modal { background: var(--bg2); border: 1px solid var(--border2); border-radius: 16px; padding: 28px; width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-modal); } .modal-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; gap: 12px; } .modal-title { font-family: 'Syne', sans-serif; font-size: 18px; font-weight: 700; } .modal-subtitle { font-size: 12px; color: var(--text3); margin-top: 3px; } .modal-body { } .modal-footer { display: flex; gap: 10px; padding-top: 20px; border-top: 1px solid var(--border); margin-top: 4px; } /* ── EMPTY STATE ─────────────────────────────────────────── */ .empty-state { text-align: center; padding: 60px 20px; color: var(--text3); } .empty-state-icon { font-size: 40px; margin-bottom: 16px; } .empty-state-title { font-family: 'Syne', sans-serif; font-size: 18px; color: var(--text2); margin-bottom: 8px; } .empty-state-sub { font-size: 13px; } /* ── ONBOARDING ──────────────────────────────────────────── */ .onboarding-screen { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; } .onboarding-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 20px; padding: 2rem; width: 100%; max-width: 540px; box-shadow: var(--shadow-card); } .step-title { font-family: 'Syne', sans-serif; font-size: 1.5rem; font-weight: 700; margin-bottom: 0.4rem; } .step-sub { color: var(--text2); font-size: 0.88rem; margin-bottom: 1.5rem; } .pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; } .pill { padding: 0.45rem 1rem; border-radius: 100px; border: 1.5px solid var(--border2); background: var(--bg3); color: var(--text2); font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s; } .pill:hover { border-color: var(--accent-border); color: var(--text); } .pill.selected { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent); } .progress-steps { display: flex; align-items: center; margin-bottom: 2rem; } .step-dot { width: 28px; height: 28px; border-radius: 50%; background: var(--bg3); border: 1.5px solid var(--border2); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--text2); flex-shrink: 0; transition: all 0.3s; } .step-dot.active { background: var(--accent); border-color: var(--accent); color: var(--btn-primary-text); } .step-dot.done { background: var(--accent2); border-color: var(--accent2); color: #fff; } .step-line { flex: 1; height: 1.5px; background: var(--border); transition: background 0.3s; } .step-line.done { background: var(--accent2); } /* ── LOADING OVERLAY ─────────────────────────────────────── */ .loading-overlay { position: fixed; inset: 0; background: var(--overlay-loading); z-index: 999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; } .loading-text { color: var(--text2); font-size: 14px; } /* ── ADMIN CLIENT LIST ───────────────────────────────────── */ .client-list-item { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.15s; } .client-list-item:hover { background: var(--row-alt); } .client-list-item:last-child { border-bottom: none; } /* ── CHARTS ──────────────────────────────────────────────── */ .chart-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); } .chart-card-title { font-family: 'Syne', sans-serif; font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; } .chart-card-sub { font-size: 12px; color: var(--text3); margin-bottom: 18px; } .charts-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-bottom: 28px; } canvas { max-height: 220px; } /* ── LEAD CARDS (mobile) ─────────────────────────────────── */ .lead-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; -webkit-tap-highlight-color: transparent; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow-sm); } .lead-card:active { border-color: var(--accent); background: var(--bg3); } .lead-card-name { font-size: 14px; font-weight: 600; color: var(--text); } .lead-card-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--text2); align-items: center; } .lead-card-stage { padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; background: var(--bg3); color: var(--text2); border: 1px solid var(--border); } .lead-card-overdue { color: var(--amber); font-weight: 600; } /* ── FAB ─────────────────────────────────────────────────── */ .fab-add { position: fixed; bottom: 20px; right: 20px; width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: var(--btn-primary-text); font-size: 22px; border: none; cursor: pointer; display: none; align-items: center; justify-content: center; box-shadow: 0 4px 20px var(--accent-glow); z-index: 100; transition: transform 0.2s; } .fab-add:active { transform: scale(0.93); } .fab-bug { position: fixed; bottom: 86px; right: 20px; width: 48px; height: 48px; border-radius: 50%; background: var(--bg3); color: var(--amber); font-size: 18px; border: 1px solid var(--amber); cursor: pointer; display: none; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,0.35); z-index: 100; transition: transform 0.2s; } .fab-bug:active { transform: scale(0.93); } /* ── CLIENT INSIGHT REPORT ───────────────────────────────── */ .insight-report-overlay { position: fixed; inset: 0; background: var(--bg); z-index: 400; overflow-y: auto; display: flex; flex-direction: column; } .insight-report-toolbar { position: sticky; top: 0; z-index: 10; background: var(--bg2); border-bottom: 1px solid var(--border2); padding: 10px 24px; display: flex; gap: 10px; align-items: center; flex-shrink: 0; box-shadow: var(--shadow-sm); } .insight-report { max-width: 860px; margin: 0 auto; padding: 32px 40px 48px; width: 100%; } .ir-section { margin-bottom: 16px; padding: 16px 18px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); break-inside: avoid; page-break-inside: avoid; box-shadow: var(--shadow-sm); } .ir-section-title { font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text3); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .ir-kv { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; font-size: 13px; } .ir-kv .lbl { color: var(--text2); } .ir-kv .val { font-weight: 600; color: var(--text); } .ir-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; } .ir-alloc-bar { height: 10px; border-radius: 5px; overflow: hidden; display: flex; gap: 2px; } .ir-action { padding: 8px 12px; background: var(--accent-dim2); border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-bottom: 6px; font-size: 13px; color: var(--text); display: flex; gap: 8px; align-items: flex-start; } .ir-action-num { font-family: 'Syne', sans-serif; font-weight: 800; color: var(--accent); flex-shrink: 0; } .ir-badge-ok { display: inline-block; padding: 1px 7px; border-radius: 20px; font-size: 10px; font-weight: 700; background: var(--accent-dim); color: var(--accent); } .ir-badge-warn { display: inline-block; padding: 1px 7px; border-radius: 20px; font-size: 10px; font-weight: 700; background: var(--amber-dim); color: var(--amber); } .ir-badge-crit { display: inline-block; padding: 1px 7px; border-radius: 20px; font-size: 10px; font-weight: 700; background: var(--red-dim); color: var(--danger); } /* ── RESPONSIVE ──────────────────────────────────────────── */ @media (max-width: 768px) { .header { padding: 0 14px; height: 52px; } .logo { font-size: 17px; } .header-actions { gap: 6px; } .header-actions .btn-ghost { padding: 6px 10px; font-size: 12px; } .nav-tabs { padding: 0 6px; gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; touch-action: pan-x; scrollbar-width: none; } .nav-tabs::-webkit-scrollbar { display: none; } .nav-tab { padding: 10px 12px; font-size: 12px; flex-shrink: 0; white-space: nowrap; } .main { padding: 12px 10px; } .cards-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .charts-grid { grid-template-columns: 1fr; } .networth-hero { flex-direction: column; gap: 12px; padding: 18px 16px; } .networth-amount { font-size: 32px; } .networth-meta { gap: 12px; flex-wrap: wrap; justify-content: center; } .drawer { width: 100%; border-radius: 20px 20px 0 0; top: auto; max-height: 95vh; border-left: none; border-top: 1px solid var(--border2); } .drawer-overlay { align-items: flex-end; } .drawer-header { padding: 14px 16px; position: sticky; top: 0; z-index: 2; } .drawer-title { font-size: 15px; } .drawer-body { padding: 14px 16px; -webkit-overflow-scrolling: touch; } .drawer-footer { padding: 12px 16px; gap: 8px; } .drawer-footer .btn { flex: 1; min-height: 48px; font-size: 15px; } .field-row { grid-template-columns: 1fr; gap: 8px; } .field { margin-bottom: 10px; } .input { font-size: 16px !important; padding: 11px 13px; min-height: 46px; } select.input { min-height: 46px; } .modal { padding: 18px 16px; border-radius: 20px 20px 0 0; max-width: 100%; max-height: 90vh; margin: 0; align-self: flex-end; } .modal-overlay { align-items: flex-end; } .modal-title { font-size: 16px; } .holdings-controls, .filter-bar { flex-direction: column; gap: 8px; padding: 10px 12px; } .holdings-controls .search-box, .filter-bar .search-box, .holdings-controls .filter-select, .filter-bar .filter-select { width: 100%; min-width: 0; } .holdings-card-list { display: flex; flex-direction: column; gap: 8px; } .holding-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: border-color 0.15s; -webkit-tap-highlight-color: transparent; box-shadow: var(--shadow-sm); } .holding-card:active { border-color: var(--accent); background: var(--bg3); } .holding-card-left { flex: 1; min-width: 0; } .holding-card-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; } .holding-card-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .holding-card-right { text-align: right; flex-shrink: 0; } .holding-card-value { font-size: 14px; font-weight: 700; color: var(--text); } .holding-card-pl { font-size: 12px; margin-top: 2px; } .btn { min-height: 44px; padding: 10px 16px; font-size: 14px; } .btn-sm { min-height: 36px; padding: 7px 12px; font-size: 13px; } .modal-footer { padding-top: 16px; gap: 8px; } .modal-footer .btn { flex: 1; min-height: 48px; font-size: 15px; } table { font-size: 14px; } td { font-size: 14px; } .pills { gap: 6px; } .pill { font-size: 13px; padding: 7px 14px; min-height: 38px; display: flex; align-items: center; } .client-list-item { padding: 16px 14px; } .leads-desktop-table { display: none !important; } .leads-mobile-list { display: flex !important; flex-direction: column; gap: 8px; } .leads-filter-bar { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 4px; } .leads-filter-bar .filter-select { flex-shrink: 0; min-width: 110px; } .fab-add { display: flex; } .fab-bug { display: flex; } .practice-stat-grid { grid-template-columns: repeat(2, 1fr) !important; } .onboarding-card { border-radius: 16px; } } @media (max-width: 480px) { .cards-grid { grid-template-columns: 1fr; } .login-mark { width: min(200px, 70vw); } .login-card { padding: 1.4rem; border-radius: 16px; } .modal { padding: 16px 14px; } .nav-tab { padding: 9px 10px; font-size: 11px; } .charts-grid { grid-template-columns: 1fr; gap: 12px; } .networth-amount { font-size: 28px; } .header { height: 48px; } .field-row { grid-template-columns: 1fr; } } @media print { .no-print, .insight-report-toolbar { display: none !important; } .insight-report-overlay { position: static; overflow: visible; background: white; } .insight-report { padding: 0; max-width: 100%; background: white; color: black; } body { background: white !important; } .ir-section { background: white; border: 1px solid #ddd; break-inside: avoid; margin-bottom: 12px; } .ir-section-title { color: #555; border-color: #ddd; } .ir-kv .lbl { color: #555; } .ir-kv .val { color: black; } .ir-action { background: #f0fdf4; border-color: #16a34a; color: black; } .ir-badge-ok { background: #dcfce7; color: #15803d; } .ir-badge-warn { background: #fef3c7; color: #b45309; } .ir-badge-crit { background: #fee2e2; color: #b91c1c; } }