/* LuxeOS-web — LuxeOS brand palette (light theme, Montserrat). */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700;800&display=swap'); /* Exact desktop palette from LuxeOS theme_constants.py + luxe_theme.py. */ :root { --bg: #EEF1F5; --card: #FFFFFF; --border: #D4DAE6; --text: #1C2333; --muted: #6D7385; --accent: #2F66B1; /* desktop ACCENT */ --accent-hover: #3E7BD9; /* desktop ACCENT_HOVER */ --accent-soft: #D7E9FF; --input-bg: #F3F5FA; --row-hover: #D7E9FF; --sidebar-bg: #202123; /* desktop SIDEBAR_BG */ --sidebar-fg: #E5E7EB; /* desktop SIDEBAR_FG */ --sidebar-muted: #9CA3AF; --sidebar-hover: #2F3136; --sidebar-active-bg: #2F66B1; --sidebar-active-fg: #FFFFFF; --danger: #DC2626; --success: #059669; --warning: #D97706; --tone-blue: #2F66B1; --tone-teal: #0D9488; --tone-rose: #E11D48; --tone-amber: #D97706; --tone-violet: #7C3AED; --tone-emerald: #059669; --tone-gold: #B45309; --radius: 10px; --sidebar-w: 232px; --topbar-h: 56px; } /* Dark dashboard mode — matches desktop dashboard palette exactly (luxe_theme.py THEME["bg"] etc). Sidebar stays charcoal; main area goes dark navy with light cards. Only applied on dashboard-family pages via . */ body.dash-dark { --bg: #050A16; --card: #101A2B; --border: #1E2B47; --text: #F8FAFC; --muted: #8B95B1; --input-bg: #0B1527; --row-hover: rgba(59, 130, 246, 0.08); --accent: #3B82F6; --accent-hover: #60A5FA; --tone-blue: #3B82F6; --tone-teal: #14B8A6; --tone-rose: #F43F5E; --tone-amber: #F59E0B; --tone-violet: #A855F7; --tone-emerald: #10B981; --tone-gold: #D4A82F; } /* Body-level ambient color glows — soft colored radial spotlights that bleed through the dark canvas behind all dashboard content. */ body.dash-dark .main { background: radial-gradient(900px 620px at 10% -2%, rgba(59, 130, 246, 0.18), transparent 65%), radial-gradient(700px 520px at 90% 6%, rgba(168, 85, 247, 0.14), transparent 70%), radial-gradient(800px 600px at 50% 110%, rgba(20, 184, 166, 0.08), transparent 70%), #050A16; } body.dash-dark .flash-error { background: rgba(225,29,72,0.15); color: #FCA5A5; border-color: rgba(225,29,72,0.4); } body.dash-dark .flash-success { background: rgba(16,185,129,0.15); color: #6EE7B7; border-color: rgba(16,185,129,0.4); } body.dash-dark .flash-info { background: rgba(59,130,246,0.15); color: #93C5FD; border-color: rgba(59,130,246,0.4); } body.dash-dark .flash-warning { background: rgba(245,158,11,0.15); color: #FCD34D; border-color: rgba(245,158,11,0.4); } body.dash-dark .topbar { background: var(--card); border-bottom-color: var(--border); } /* KPI cards — tinted gradient backgrounds per tone, with a glowing colored left-edge stripe, stronger drop shadow, and an inner highlight so they feel lifted off the canvas. */ body.dash-dark .kpi-card { position: relative; background: linear-gradient(145deg, rgba(255,255,255,0.04) 0%, transparent 55%), linear-gradient(180deg, #152036 0%, #0D1627 100%); border: 1px solid rgba(255,255,255,0.06); border-left-width: 3px; box-shadow: 0 10px 30px -12px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05); overflow: hidden; transition: transform 0.18s ease, box-shadow 0.18s ease; } body.dash-dark .kpi-card:hover { transform: translateY(-1px); box-shadow: 0 14px 34px -14px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,255,255,0.08); } /* Colored glow bleed from the left edge per tone */ body.dash-dark .kpi-card::before { content: ''; position: absolute; top: -20%; left: -10%; width: 180px; height: 140%; background: radial-gradient(ellipse at left center, var(--glow, rgba(59,130,246,0.18)), transparent 65%); pointer-events: none; } body.dash-dark .kpi-card.tone-blue { border-left-color: #3B82F6; --glow: rgba(59,130,246,0.22); } body.dash-dark .kpi-card.tone-teal { border-left-color: #14B8A6; --glow: rgba(20,184,166,0.20); } body.dash-dark .kpi-card.tone-rose { border-left-color: #F43F5E; --glow: rgba(244,63,94,0.18); } body.dash-dark .kpi-card.tone-amber { border-left-color: #F59E0B; --glow: rgba(245,158,11,0.20); } body.dash-dark .kpi-card.tone-violet { border-left-color: #A855F7; --glow: rgba(168,85,247,0.22); } body.dash-dark .kpi-card.tone-emerald { border-left-color: #10B981; --glow: rgba(16,185,129,0.20); } body.dash-dark .kpi-card.tone-gold { border-left-color: #D4A82F; --glow: rgba(212,168,47,0.22); } body.dash-dark .kpi-value { color: var(--text); font-weight: 700; letter-spacing: -0.5px; text-shadow: 0 1px 20px rgba(59, 130, 246, 0.15); } body.dash-dark .card { position: relative; background: linear-gradient(160deg, rgba(255,255,255,0.035) 0%, transparent 45%), linear-gradient(180deg, #131D32 0%, #0C1525 100%); border: 1px solid rgba(255,255,255,0.06); box-shadow: 0 14px 38px -18px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04); overflow: hidden; } /* Revenue Streams hero card — extra ambient color behind the content */ body.dash-dark .revenue-card { background: radial-gradient(600px 400px at 15% 0%, rgba(59, 130, 246, 0.16), transparent 65%), radial-gradient(500px 360px at 85% 100%, rgba(168, 85, 247, 0.12), transparent 70%), linear-gradient(180deg, #13203A 0%, #0B142A 100%); border: 1px solid rgba(59, 130, 246, 0.15); } body.dash-dark .revenue-head-title { background: linear-gradient(120deg, #60A5FA 0%, #A855F7 50%, #60A5FA 100%); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; font-weight: 800; letter-spacing: -0.8px; animation: revSheen 6s ease-in-out infinite; } @keyframes revSheen { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Gold spot-prices card — gold ambient glow */ body.dash-dark .kpi-card.spot-card { background: radial-gradient(400px 300px at 100% 0%, rgba(212, 168, 47, 0.18), transparent 60%), linear-gradient(180deg, #1A1A18 0%, #0D0E16 100%); border: 1px solid rgba(212, 168, 47, 0.22); border-left: 3px solid #D4A82F; } body.dash-dark .spot-metal { color: #D4A82F; } body.dash-dark .revenue-stats .stat-label, body.dash-dark .revenue-stats .muted-stat .stat-label, body.dash-dark .revenue-stats .muted-stat .stat-value, body.dash-dark .muted, body.dash-dark .text-muted, body.dash-dark .kpi-sub { color: var(--muted); } body.dash-dark .stat-value, body.dash-dark .stat-list dd, body.dash-dark .kv-value, body.dash-dark .revenue-head-title { color: var(--text); } body.dash-dark .revenue-divider { border-top-color: var(--border); } body.dash-dark .period-toggle { background: rgba(16, 26, 43, 0.7); border: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } body.dash-dark .period-toggle a { color: var(--muted); border-color: rgba(255,255,255,0.06); } body.dash-dark .period-toggle a.active { color: white; background: linear-gradient(135deg, #3B82F6, #2563EB); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35); } body.dash-dark .period-toggle a:hover:not(.active) { background: rgba(255,255,255,0.05); color: var(--text); } body.dash-dark .inv-table th { background: var(--input-bg); color: var(--muted); border-bottom-color: var(--border); } body.dash-dark .inv-table td { border-bottom-color: var(--border); color: var(--text); } body.dash-dark .proj-stat { background: linear-gradient(180deg, #152036 0%, #0D1627 100%); border: 1px solid rgba(255,255,255,0.06); } body.dash-dark .proj-stat.highlight { background: radial-gradient(400px 200px at 50% 0%, rgba(59,130,246,0.22), transparent 70%), linear-gradient(180deg, #152036 0%, #0D1627 100%); border-color: rgba(59,130,246,0.45); box-shadow: 0 8px 24px -10px rgba(59,130,246,0.35); } body.dash-dark .proj-value, body.dash-dark .proj-label { color: var(--text); } body.dash-dark .proj-stat.highlight .proj-value { color: var(--accent); } body.dash-dark .proj-bar { background: var(--border); } body.dash-dark .pulse-headline { background: linear-gradient(180deg, rgba(59,130,246,0.08), transparent); border-left-color: var(--accent); } body.dash-dark .spot-sep { color: rgba(255,255,255,0.15); } body.dash-dark .kpi-donut-center strong, body.dash-dark .revenue-donut .donut-center strong { color: var(--text); } /* Page header title — gradient for the H1 on dashboard */ body.dash-dark .page-header h1 { background: linear-gradient(135deg, #F8FAFC 0%, #93C5FD 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; font-weight: 700; } /* Buys row — make the big value numbers slightly brighter */ body.dash-dark .buys-row .kpi-value { color: #F8FAFC; } /* Small accent for the delta arrow text on revenue head */ body.dash-dark .text-success { color: #34D399; } body.dash-dark .text-danger { color: #FB7185; } /* Softer card inner text hierarchy */ body.dash-dark .kpi-label { color: #94A3B8; letter-spacing: 0.8px; font-weight: 700; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; overflow: hidden; } body { font-family: "Montserrat", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; color: var(--text); background: var(--bg); font-size: 14px; line-height: 1.45; letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; touch-action: manipulation; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); } /* ====== Layout ====== */ body.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; grid-template-areas: "sidebar main"; min-height: 100vh; } .sidebar { grid-area: sidebar; background: var(--sidebar-bg); color: var(--sidebar-fg); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; padding: 16px 10px; /* Respect iPad/iPhone home-indicator safe area so the Sign-out chip isn't pushed off the bottom edge in PWA/fullscreen mode. */ padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); padding-top: calc(12px + env(safe-area-inset-top, 0px)); overflow-y: auto; } .sidebar-brand { display: flex; align-items: center; justify-content: center; /* center the logo + text block */ gap: 12px; padding: 8px 18px 16px; /* tighter so footer has room on iPad */ border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: 10px; flex-shrink: 0; } .brand-mark { width: 56px; height: 56px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .brand-mark img { width: 100%; height: 100%; object-fit: contain; /* Gold-on-transparent source renders correctly on both the dark sidebar and the light login card — no filter needed. */ } .brand-mark.lg { width: 104px; height: 104px; } /* Thin, airy brand treatment. "luxe" in a light weight; "OS" slightly bolder and spaced so the stylization reads cleanly at all sizes. */ .brand-name { font-weight: 200; font-size: 35px; letter-spacing: 0.4px; color: var(--sidebar-fg); display: inline-flex; align-items: baseline; line-height: 1; } .brand-name.lg { font-size: 44px; color: var(--text); margin-top: 12px; } .brand-name .caps { font-weight: 400; letter-spacing: 1.2px; margin-left: 1px; } .brand-name.lg .caps { font-weight: 500; } .brand-sub { color: var(--muted); font-size: 12px; margin-top: 4px; letter-spacing: 0.8px; text-transform: uppercase; font-weight: 300; } .sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; } .nav-item, .nav-group-toggle { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 9px; color: var(--sidebar-fg); font-size: 15px; font-weight: 500; background: transparent; border: none; cursor: pointer; text-align: left; width: 100%; } .nav-item:hover, .nav-group-toggle:hover { background: var(--sidebar-hover); color: var(--sidebar-fg); } .nav-item.active { background: var(--sidebar-active-bg); color: var(--sidebar-active-fg); } .nav-item .icon, .nav-group-toggle .icon { width: 20px; height: 20px; flex-shrink: 0; } .nav-group-toggle .chevron { width: 14px; height: 14px; margin-left: auto; transition: transform 0.15s; } .nav-group.open .chevron { transform: rotate(180deg); } .nav-group-body { display: none; padding: 4px 0 4px 32px; } .nav-group.open .nav-group-body { display: flex; flex-direction: column; gap: 2px; } .nav-sub { padding: 9px 12px; border-radius: 7px; color: var(--sidebar-muted); font-size: 14px; } .nav-sub:hover { background: var(--sidebar-hover); color: var(--sidebar-fg); } .nav-sub.active { color: var(--sidebar-active-fg); background: var(--sidebar-hover); } .sidebar-footer { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 10px; margin-top: 10px; flex-shrink: 0; } .user-chip { display: flex; align-items: center; gap: 10px; padding: 6px 8px; } .user-initials { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: white; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; } .user-meta { display: flex; flex-direction: column; min-width: 0; } .user-name { color: var(--sidebar-fg); font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-logout { font-size: 12px; color: var(--sidebar-muted); } .user-logout:hover { color: var(--sidebar-fg); } /* ====== Main ====== */ .main { grid-area: main; display: flex; flex-direction: column; min-width: 0; height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } .topbar { display: none; align-items: center; gap: 10px; padding: 10px 14px; background: var(--card); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; } .menu-btn { width: 40px; height: 40px; border: none; background: transparent; cursor: pointer; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--text); } .menu-btn svg { width: 22px; height: 22px; } .topbar-title { font-weight: 600; } .content { padding: 24px; max-width: 1280px; width: 100%; margin: 0 auto; } .page-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .page-header h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.2px; } .muted, .text-muted { color: var(--muted); } /* ====== Cards ====== */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 14px; box-shadow: 0 1px 2px rgba(16, 23, 40, 0.03); } .card-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; } .card-header h2 { font-size: 16px; font-weight: 600; } /* ====== KPI Row ====== */ .kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 14px; } .kpi-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; border-left: 3px solid var(--tone-blue); min-height: 86px; } .kpi-label { font-size: 11px; color: var(--muted); text-transform: uppercase; font-weight: 600; letter-spacing: 0.6px; margin-bottom: 6px; } .kpi-value { font-size: 22px; font-weight: 700; letter-spacing: -0.3px; color: var(--text); } .kpi-sub { font-size: 12px; color: var(--muted); margin-top: 4px; } .kpi-card.tone-blue { border-left-color: var(--tone-blue); } .kpi-card.tone-teal { border-left-color: var(--tone-teal); } .kpi-card.tone-rose { border-left-color: var(--tone-rose); } .kpi-card.tone-amber { border-left-color: var(--tone-amber); } .kpi-card.tone-violet { border-left-color: var(--tone-violet); } .kpi-card.tone-emerald { border-left-color: var(--tone-emerald); } .kpi-card.tone-gold { border-left-color: var(--tone-gold); } .spot-card .spot-list { display: grid; gap: 2px; margin-top: 4px; } .spot-card .spot-list > div { display: flex; justify-content: space-between; font-size: 13px; } .spot-card .spot-list span { color: var(--muted); } .spot-card .spot-list strong { color: var(--text); font-weight: 600; } /* Dedicated full-width Spot Prices card */ .spot-detail-card { margin-top: 14px; } .spot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .spot-panel { padding: 10px 16px; border-left: 2px solid var(--border); } .spot-price-big { font-size: 22px; font-weight: 700; letter-spacing: -0.3px; font-variant-numeric: tabular-nums; margin-top: 4px; line-height: 1.1; } .spot-price-big .muted { font-size: 13px; font-weight: 400; margin-left: 2px; } .spot-main-line { font-size: 13px; font-variant-numeric: tabular-nums; margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; } @media (max-width: 900px) { .spot-grid { grid-template-columns: 1fr; } } /* Dark-mode gold treatment on the dedicated spot card */ body.dash-dark .spot-detail-card { background: radial-gradient(500px 300px at 100% 0%, rgba(212, 168, 47, 0.14), transparent 65%), linear-gradient(180deg, #181818 0%, #0D0E16 100%); border: 1px solid rgba(212, 168, 47, 0.22); } body.dash-dark .spot-panel { border-left-color: rgba(212, 168, 47, 0.35); } body.dash-dark .spot-metal { color: #D4A82F; } body.dash-dark .spot-price-big { color: var(--text); } /* Legacy (pre-move) rules below — keep for reference, harmless when unused. */ .kpi-card.spot-card { grid-column: span 2; min-width: 260px; } .spot-block { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; } .spot-row { padding: 6px 0; border-bottom: 1px dashed var(--border); } .spot-row:last-of-type { border-bottom: none; } .spot-row-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px; } .spot-metal { font-weight: 700; font-size: 13px; } .spot-delta { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; } .spot-delta.up { color: var(--success); } .spot-delta.down { color: var(--danger); } .spot-main { font-size: 13px; font-variant-numeric: tabular-nums; display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; } .spot-main strong { font-size: 14px; font-weight: 700; color: var(--text); } .spot-sep { color: var(--border); } .spot-sub { font-size: 11px; color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; } .spot-sub .up { color: var(--success); font-weight: 600; } .spot-sub .down { color: var(--danger); font-weight: 600; } .spot-timestamp { font-size: 10px; margin-top: 4px; text-align: right; } /* ====== Period toggle ====== */ .period-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--card); } .period-toggle a { padding: 7px 14px; color: var(--muted); font-weight: 500; font-size: 13px; border-right: 1px solid var(--border); } .period-toggle a:last-child { border-right: none; } .period-toggle a.active { background: var(--accent); color: white; } .period-toggle a:hover:not(.active) { background: var(--input-bg); color: var(--text); } /* ====== Preview banner ====== */ .preview-banner { background: #FFF7ED; border: 1px solid #FED7AA; color: #9A3412; padding: 10px 14px; border-radius: var(--radius); margin-bottom: 14px; font-size: 13px; } /* ====== KPI cards — featured variant with donut ====== */ .kpi-card.kpi-feature { padding: 18px 20px; min-height: 110px; } .kpi-card.kpi-with-donut { display: flex; align-items: center; gap: 14px; } .kpi-donut-wrap { position: relative; width: 76px; height: 76px; flex-shrink: 0; } .kpi-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; pointer-events: none; } .kpi-donut-center strong { font-size: 14px; font-weight: 700; } .kpi-donut-center span { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; } /* ====== Revenue card ====== */ .revenue-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); } .revenue-head-title { font-size: 30px; font-weight: 800; letter-spacing: -0.5px; line-height: 1; color: var(--text); margin: 4px 0 6px; font-variant-numeric: tabular-nums; } .revenue-card .revenue-body-3col { display: grid; grid-template-columns: 230px 220px 1fr; gap: 24px; align-items: start; /* columns size to their own content */ } .revenue-donut { display: flex; flex-direction: column; gap: 10px; } .revenue-chart { align-self: start; height: 320px; } .revenue-donut .donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; } .revenue-donut .donut-center strong { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; } .revenue-donut .donut-center span { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; } .mix-legend-row { display: flex; justify-content: space-between; padding: 3px 0; font-variant-numeric: tabular-nums; font-size: 13px; } .donut-legend { margin-top: 6px; } /* ====== Legacy revenue body (still referenced by stubs) ====== */ .revenue-card .revenue-body { display: grid; grid-template-columns: 260px 1fr; gap: 20px; } .revenue-stats { display: flex; flex-direction: column; gap: 5px; } .revenue-stats .stat { display: flex; justify-content: space-between; font-size: 13px; gap: 12px; } .revenue-stats .stat-label { color: var(--muted); } .revenue-stats .stat-value { font-weight: 600; font-variant-numeric: tabular-nums; } .revenue-stats .muted-stat .stat-label, .revenue-stats .muted-stat .stat-value { color: var(--muted); font-weight: 500; } .revenue-divider { border: none; border-top: 1px dashed var(--border); margin: 8px 0 4px; } .text-success { color: var(--success); font-weight: 700; } .text-danger { color: var(--danger); font-weight: 700; } .revenue-chart { position: relative; min-height: 200px; background: var(--input-bg); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; } .revenue-chart canvas { display: none; } /* ====== Scrollable lists (client rows, item rows, feed) ====== */ .client-list.scroll, .inv-list.scroll { max-height: 520px; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-right: 4px; } .item-rows.scroll { max-height: 260px; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* ====== Feed ====== */ .feed { list-style: none; display: flex; flex-direction: column; gap: 6px; } .feed li { display: grid; grid-template-columns: 60px 100px 1fr auto; gap: 10px; padding: 6px 2px; border-bottom: 1px solid var(--border); font-size: 13px; } .feed-time { color: var(--muted); } .feed-type { font-weight: 600; color: var(--accent); } .feed-amount { font-weight: 600; } /* ====== Login ====== */ .login-body { background: var(--bg); display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; } .login-card { width: 100%; max-width: 360px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 32px 28px; text-align: center; box-shadow: 0 10px 40px rgba(16, 23, 40, 0.08); } .login-brand { margin-bottom: 24px; display: flex; flex-direction: column; align-items: center; gap: 6px; } .login-form .form-group { text-align: left; margin-bottom: 14px; } .login-form label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 6px; } .login-form input { width: 100%; padding: 11px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--input-bg); font-size: 15px; min-height: 44px; color: var(--text); } .login-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; background: var(--card); } .login-footnote { margin-top: 16px; font-size: 12px; color: var(--muted); } /* ====== Buttons ====== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px; border: 1px solid transparent; border-radius: 8px; font-weight: 600; font-size: 14px; cursor: pointer; min-height: 40px; transition: background 0.12s; } .btn-primary { background: var(--accent); color: white; } .btn-primary:hover { background: var(--accent-hover); color: white; } .btn-outline { background: transparent; border-color: var(--border); color: var(--text); } .btn-outline:hover { background: var(--input-bg); } .btn-block { width: 100%; } /* ====== Flash ====== */ .flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; font-size: 14px; display: flex; justify-content: space-between; gap: 10px; } .flash-error { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; } .flash-success { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; } .flash-info { background: #EFF6FF; color: #1E3A8A; border: 1px solid #BFDBFE; } .flash-warning { background: #FFFBEB; color: #92400E; border: 1px solid #FDE68A; } .dismiss { cursor: pointer; color: inherit; opacity: 0.6; font-size: 18px; line-height: 1; } .dismiss:hover { opacity: 1; } /* ====== Placeholder card ====== */ .placeholder-card { text-align: center; padding: 44px 24px; } .placeholder-icon { width: 48px; height: 48px; margin: 0 auto 14px; color: var(--muted); } .placeholder-icon svg { width: 48px; height: 48px; } .placeholder-title { font-size: 18px; font-weight: 700; margin-bottom: 6px; } .placeholder-body { color: var(--muted); font-size: 14px; } /* ====== Lookup ====== */ .lookup-form { display: flex; gap: 8px; } .lookup-form input { flex: 1; padding: 11px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--input-bg); font-size: 15px; min-height: 44px; } .lookup-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; background: var(--card); } /* ====== Tools grid ====== */ .tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .tool-tile { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; color: var(--text); transition: border-color 0.12s, transform 0.08s; display: block; } .tool-tile:hover { border-color: var(--accent); transform: translateY(-1px); color: var(--text); } .tool-icon { font-size: 28px; margin-bottom: 8px; } .tool-title { font-weight: 600; font-size: 15px; margin-bottom: 4px; } .tool-desc { color: var(--muted); font-size: 13px; } /* ====== Forms ====== */ .form-group { margin-bottom: 12px; } .form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 4px; } .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--input-bg); font-size: 14px; min-height: 40px; color: var(--text); font-family: inherit; } .form-group textarea { min-height: 80px; resize: vertical; } /* ====== Search input ====== */ .search-input { width: 100%; padding: 11px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--input-bg); font-size: 15px; min-height: 44px; color: var(--text); font-family: inherit; } .search-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; background: var(--card); } .htmx-indicator { opacity: 0; transition: opacity 0.15s; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; } /* ====== Pills ====== */ .pill { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; margin-left: 6px; vertical-align: middle; } .pill-vip { background: #FEF3C7; color: #92400E; } .pill-blocked { background: #FEE2E2; color: #991B1B; } .pill-active { background: #DCFCE7; color: #166534; } .pill-redeemed { background: #E0E7FF; color: #3730A3; } .pill-defaulted{ background: #FEE2E2; color: #991B1B; } .pill-void { background: #F3F4F6; color: #4B5563; } .pill-inventory{ background: #FEF3C7; color: #92400E; } .pill-ok { background: #DCFCE7; color: #166534; } .pill-warn { background: #FEF3C7; color: #92400E; } /* ====== Tools — shared ====== */ .card-title { font-size: 14px; font-weight: 700; margin: 0 0 12px; color: var(--text); } tr.overdue-row td { background: rgba(254, 226, 226, 0.35); } tr.due-today-row td { background: rgba(254, 243, 199, 0.4); } /* Tasks page — scrollable list of cards */ body.content-fill .tasks-scroll { overflow-y: auto; padding-right: 4px; display: flex; flex-direction: column; gap: 14px; } /* ====== Metal Calculator ====== */ .metal-spot-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 8px 4px 12px; border-bottom: 1px solid var(--border); } .metal-spot { display: flex; align-items: baseline; gap: 10px; } .metal-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 8px; border-radius: 4px; } .metal-label.gold { background: #FEF3C7; color: #92400E; } .metal-label.silver { background: #E5E7EB; color: #374151; } .metal-label.platinum { background: #DBEAFE; color: #1E3A8A; } .metal-price { font-size: 14px; font-weight: 600; color: var(--text); } .metal-pct-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 12px; } .metal-pct-row label { display: flex; flex-direction: column; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; gap: 4px; } .metal-pct-row input { padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; font-weight: 600; color: var(--text); background: #fff; } .metal-inputs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 24px; } .metal-input-row { display: grid; grid-template-columns: 110px 1fr auto auto 64px 90px; align-items: center; gap: 10px; padding: 6px 4px; border-bottom: 1px solid var(--border); font-size: 13px; } .metal-input-label { font-weight: 600; color: var(--text); } .metal-input-weight { padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; } .metal-unit { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); } .metal-input-purity { font-size: 12px; color: var(--muted); text-align: right; } .metal-input-total { font-weight: 600; text-align: right; } .metal-summary-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; } .metal-summary-value { font-size: 16px; font-weight: 700; color: var(--text); margin-top: 2px; } .metal-summary-value.big { font-size: 22px; } .metal-summary-value.accent { color: var(--accent); } .metal-summary-value.positive { color: #166534; } @media (max-width: 900px) { .metal-inputs-grid { grid-template-columns: 1fr; } .metal-pct-row { grid-template-columns: repeat(2, 1fr); } .metal-summary-grid { grid-template-columns: 1fr; } .metal-spot-row { grid-template-columns: 1fr; } } /* ====== Client list rows ====== */ .client-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; } .client-row { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; color: var(--text); transition: border-color 0.12s, background 0.12s; } .client-row:hover { border-color: var(--accent); background: var(--row-hover); color: var(--text); } .client-row-main { flex: 1; min-width: 0; } .client-name { font-weight: 600; font-size: 15px; margin-bottom: 2px; } .client-meta { color: var(--muted); font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px; } .client-meta span { white-space: nowrap; } .chevron-right { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; } /* ====== Client detail ====== */ .client-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; } .kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 20px; } .kv-grid > div { display: flex; flex-direction: column; gap: 2px; } .kv-label { font-size: 11px; color: var(--muted); text-transform: uppercase; font-weight: 600; letter-spacing: 0.5px; } .kv-value { font-size: 14px; color: var(--text); white-space: pre-line; } .list-rows { display: flex; flex-direction: column; } .list-row { display: grid; grid-template-columns: 90px 90px 1fr auto; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--border); font-size: 13px; align-items: center; } .list-row:last-child { border-bottom: none; } .list-row .mono { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 12px; color: var(--muted); } .list-row .list-money { font-weight: 600; text-align: right; } .list-row .list-money.voided { text-decoration: line-through; color: var(--muted); } /* ====== Notes ====== */ .note-form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; margin-bottom: 10px; } .note-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--input-bg); font-size: 14px; font-family: inherit; resize: vertical; } .note-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; background: var(--card); } .note-form .btn-sm { align-self: flex-start; padding: 6px 12px; min-height: 32px; font-size: 13px; } .notes-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .note-item { padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--input-bg); } .note-item.note-flagged { border-color: #F59E0B; background: #FFFBEB; } .note-body { font-size: 14px; white-space: pre-wrap; word-break: break-word; } .note-meta { font-size: 12px; margin-top: 4px; } /* ====== Form grids ====== */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; } .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px 14px; } .grid-4 { display: grid; grid-template-columns: 2fr 3fr 1fr 2fr; gap: 10px 14px; } .checkbox-row { display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--input-bg); cursor: pointer; font-size: 14px; } .checkbox-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); } /* ====== Inventory ====== */ .inv-toolbar { display: flex; flex-direction: column; gap: 10px; } .status-tabs { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--card); width: fit-content; } .status-tabs a { padding: 7px 14px; color: var(--muted); font-weight: 500; font-size: 13px; border-right: 1px solid var(--border); display: inline-flex; align-items: center; gap: 6px; } .status-tabs a:last-child { border-right: none; } .status-tabs a.active { background: var(--accent); color: white; } .status-tabs a:hover:not(.active) { background: var(--input-bg); color: var(--text); } .tab-count { background: rgba(0,0,0,0.06); border-radius: 10px; padding: 0 7px; font-size: 11px; font-weight: 700; } .status-tabs a.active .tab-count { background: rgba(255,255,255,0.25); color: white; } .inv-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; } .inv-row { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; color: var(--text); transition: border-color 0.12s, background 0.12s; } .inv-row:hover { border-color: var(--accent); background: var(--row-hover); color: var(--text); } .inv-row-main { flex: 1; min-width: 0; } .inv-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: 15px; font-weight: 600; margin-bottom: 2px; } .inv-ticket { color: var(--muted); font-weight: 500; } .inv-label { flex: 0 1 auto; min-width: 0; } .inv-meta { color: var(--muted); font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px; } .inv-price { font-weight: 700; font-size: 15px; white-space: nowrap; min-width: 80px; text-align: right; } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .inv-detail-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; } .client-link { color: var(--accent); font-weight: 500; } .client-link:hover { color: var(--accent-hover); } /* ====== Inventory toolbar top row ====== */ .inv-toolbar-top { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; } .date-range-wrap { display: flex; flex-direction: column; gap: 4px; min-width: 170px; } .date-range-label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; } .date-range-wrap select { padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); font-size: 14px; min-height: 40px; color: var(--text); font-family: inherit; cursor: pointer; } .date-range-wrap select:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .date-range-inactive select { color: var(--muted); background: var(--input-bg); } /* ====== Inventory tabs (multi-row) ====== */ .inv-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .inv-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; color: var(--muted); font-weight: 500; font-size: 13px; border: 1px solid var(--border); background: var(--card); white-space: nowrap; } .inv-tabs a:hover:not(.active) { background: var(--input-bg); color: var(--text); } .inv-tabs a.active { background: var(--accent); color: white; border-color: var(--accent); } .inv-tabs a.active .tab-count { background: rgba(255,255,255,0.25); color: white; } /* Underline-style tab strip (desktop-feel). Sits above the card body. */ .tab-strip { display: flex; gap: 0; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin: 8px 0 0; padding: 0 4px; } .tab-strip .tab { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 2px solid transparent; color: var(--muted); font-size: 14px; font-weight: 600; white-space: nowrap; transition: color 0.12s, border-color 0.12s; margin-bottom: -1px; /* sit flush on the border */ } .tab-strip .tab:hover:not(.active) { color: var(--text); } .tab-strip .tab.active { color: var(--accent); border-bottom-color: var(--accent); } .tab-strip .tab-count { background: rgba(0,0,0,0.06); border-radius: 10px; padding: 1px 8px; font-size: 11px; font-weight: 700; } .tab-strip .tab.active .tab-count { background: rgba(47,102,177,0.15); color: var(--accent); } /* Inventory toolbar card — slightly tighter so tabs read as attached below */ .inv-toolbar-card { margin-bottom: 0; } /* ====== Fill-to-viewport page layout ====== */ /* Pages that opt in via body.content-fill get a flex column shell so a designated `.fill-rest` block expands to consume the remaining height of the viewport. Inside it, tables scroll within their own container rather than the whole page scrolling. */ body.content-fill html, body.content-fill body { overflow: hidden; } body.content-fill .main { overflow: hidden; display: flex; flex-direction: column; } body.content-fill .content { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; } body.content-fill .fill-rest { flex: 1; display: flex; flex-direction: column; min-height: 0; margin-top: 0; } /* The results card fills the fill-rest block. */ body.content-fill .fill-rest > .card, body.content-fill .fill-rest > #inv-results, body.content-fill .fill-rest > #inv-results > .card { flex: 1; display: flex; flex-direction: column; min-height: 0; margin-bottom: 0; } body.content-fill .fill-rest .inv-table-wrap { flex: 1; min-height: 0; max-height: none !important; } /* Lookup: grouped results — list scrolls as one unit, each row at natural height */ body.content-fill .lookup-scroll { overflow-y: auto; padding-right: 4px; } body.content-fill .lookup-scroll > #lookup-results { flex: none; } /* List-style fill-rest: client-list / inv-list inside a card fills the card vertically and scrolls. */ body.content-fill .fill-rest .client-list, body.content-fill .fill-rest .inv-list { max-height: none; flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; } /* ====== Data tables — scrollable, sticky header ====== */ /* All tables use .inv-table + .inv-table-wrap. Wrap caps height so the page doesn't grow forever; header stays visible while scrolling. */ .inv-table-wrap { overflow-x: auto; overflow-y: auto; max-height: 520px; -webkit-overflow-scrolling: touch; } .inv-table-wrap.tall { max-height: 72vh; } .inv-table-wrap.short { max-height: 320px; } .inv-table-wrap.shortest { max-height: 240px; } .inv-table-wrap.nocap { max-height: none; } .inv-table { width: 100%; border-collapse: collapse; font-size: 13px; } .inv-table th, .inv-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; } .inv-table th { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--muted); letter-spacing: 0.5px; background: var(--input-bg); border-bottom: 1px solid var(--border); white-space: nowrap; position: sticky; top: 0; z-index: 1; box-shadow: 0 1px 0 var(--border); } .inv-table td.num, .inv-table th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .inv-table td.strong { font-weight: 600; } .inv-table td.neg { color: var(--danger); font-weight: 600; } .inv-table td.pos { color: var(--success); font-weight: 600; } .inv-table td.col-wide, .inv-table th.col-wide { min-width: 220px; } .inv-table .desc-cell { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .clickable-row { cursor: pointer; } .clickable-row:hover { background: var(--row-hover); } .clickable-row:hover td { color: var(--text); } .voided-row td { opacity: 0.55; text-decoration: line-through; } .voided-row td .pill { text-decoration: none; opacity: 1; } /* ====== Client card tabs ====== */ .client-tabs { display: flex; gap: 2px; margin-bottom: 14px; align-items: center; flex-wrap: wrap; } .client-tabs > a:not(.btn) { padding: 10px 14px; color: var(--muted); font-weight: 600; font-size: 14px; border-bottom: 2px solid transparent; white-space: nowrap; } .client-tabs > a:not(.btn):hover { color: var(--text); } .client-tabs > a.active:not(.btn) { color: var(--accent); border-bottom-color: var(--accent); } .client-tabs-spacer { flex: 1; } /* ====== Client card layout ====== */ .client-card-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; } .client-stats-sidebar { position: sticky; top: 20px; } .stat-list { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 0; padding: 0; } .stat-list dt { color: var(--muted); font-size: 13px; } .stat-list dd { font-weight: 600; font-size: 13px; text-align: right; margin: 0; font-variant-numeric: tabular-nums; } .stat-list dt.strong, .stat-list dd.strong { color: var(--text); font-size: 14px; } .stat-list dd.strong { color: var(--accent); } .kv-grid-compact { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 24px; } .kv-grid-compact > div { display: flex; flex-direction: column; gap: 2px; } /* ====== Transactions tabs (client card) ====== */ .txn-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); background: var(--input-bg); } .txn-tabs a { padding: 12px 16px; color: var(--muted); font-weight: 600; font-size: 13px; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .txn-tabs a:hover { color: var(--text); } .txn-tabs a.active { color: var(--accent); border-bottom-color: var(--accent); background: var(--card); } .txn-tabs .tab-count { background: rgba(0,0,0,0.08); padding: 0 7px; border-radius: 10px; font-size: 11px; font-weight: 700; } .txn-tabs a.active .tab-count { background: rgba(47,102,177,0.15); color: var(--accent); } /* ====== Transaction Items (bounded, scrollable) ====== */ .txn-items-scroll { max-height: 560px; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-right: 4px; } /* ====== Item groups ====== */ .item-group { margin-bottom: 16px; } .item-group-header { display: block; font-weight: 700; font-size: 14px; padding: 8px 0; border-bottom: 1px solid var(--border); color: var(--text); margin-bottom: 6px; } .item-group-header:hover { color: var(--accent); } .item-rows { display: flex; flex-direction: column; gap: 4px; } .item-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 6px; color: var(--text); } .item-row:hover { background: var(--row-hover); color: var(--text); } .item-row-main { min-width: 0; } .item-row-title { font-weight: 500; font-size: 13px; } .item-row-amt { font-size: 12px; white-space: nowrap; } /* ====== View Transaction page ====== */ .txn-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; } .actions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; } .action-btn { padding: 12px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font-weight: 600; font-size: 13px; cursor: not-allowed; opacity: 0.72; } .action-btn:disabled { cursor: not-allowed; } .action-primary { background: var(--accent); border-color: var(--accent); color: white; } .action-success { background: #059669; border-color: #059669; color: white; } .action-danger { background: white; border-color: #FECACA; color: #991B1B; } .action-warn { background: white; border-color: #FDE68A; color: #92400E; } .action-gray { background: var(--input-bg); color: var(--text); } /* ====== Pulse page ====== */ .pulse-headline { background: linear-gradient(180deg, rgba(47,102,177,0.05), transparent); border-left: 3px solid var(--accent); } .pulse-takeaways { display: flex; flex-direction: column; gap: 4px; } .pulse-bullet { color: var(--text); font-size: 13px; line-height: 1.5; } .pulse-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, 0.9fr); gap: 16px; margin-bottom: 16px; } .pulse-grid-3 { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); } /* ====== Projections page ====== */ .proj-bar { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; margin-top: 10px; } .proj-bar-fill { height: 100%; border-radius: 4px; transition: width 0.25s; } .proj-bar-fill.tone-blue { background: var(--tone-blue); } .proj-bar-fill.tone-amber { background: var(--tone-amber); } .proj-bar-fill.tone-emerald { background: var(--tone-emerald); } .proj-bar-fill.tone-violet { background: var(--tone-violet); } .proj-bar-fill.tone-rose { background: var(--tone-rose); } .proj-bar-legend { font-size: 12px; margin-top: 6px; font-variant-numeric: tabular-nums; } .proj-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px; } .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; } /* ====== Projections card (legacy dashboard embed) ====== */ .proj-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .proj-stat { padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--input-bg); } .proj-stat.highlight { background: linear-gradient(180deg, rgba(47,102,177,0.08), rgba(47,102,177,0.02)); border-color: var(--accent); } .proj-label { font-size: 11px; color: var(--muted); text-transform: uppercase; font-weight: 700; letter-spacing: 0.6px; margin-bottom: 4px; } .proj-value { font-size: 20px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .proj-stat.highlight .proj-value { color: var(--accent); } .proj-sub { color: var(--muted); font-size: 11px; margin-top: 2px; } /* ====== Lookup groups ====== */ .lookup-group { margin-bottom: 18px; } .lookup-group-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; padding: 0 2px; } .lookup-group-header h2 { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); } /* ====== Sidebar backdrop (mobile) ====== */ .sidebar-backdrop { display: none; } /* ====== Responsive ====== */ @media (max-width: 900px) { body.app { grid-template-columns: 1fr; grid-template-areas: "main"; } .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w); transform: translateX(-100%); transition: transform 0.2s ease; z-index: 30; box-shadow: 2px 0 20px rgba(0,0,0,0.2); } body.sidebar-open .sidebar { transform: translateX(0); } body.sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 20; } .topbar { display: flex; } .content { padding: 16px; } .revenue-card .revenue-body { grid-template-columns: 1fr; } .revenue-card .revenue-body-3col { grid-template-columns: 1fr; } .kpi-card.kpi-with-donut { flex-direction: row; } .proj-split { grid-template-columns: 1fr; } .pulse-grid, .pulse-grid-3 { grid-template-columns: 1fr; } .client-layout { grid-template-columns: 1fr; } .client-card-layout { grid-template-columns: 1fr; } .client-stats-sidebar { position: static; } .txn-layout { grid-template-columns: 1fr; } .inv-detail-layout { grid-template-columns: 1fr; } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .list-row { grid-template-columns: 70px 80px 1fr; grid-auto-rows: auto; } .list-row .list-money { grid-column: 1 / -1; text-align: left; } }