/* * AIDEV-NOTE: MGODT Design System — theme.css * Tokens shared across all pages. Light defaults at :root; html.dark overrides. * JS in theme.js adds/removes .dark class on based on localStorage * (mgodt-theme = 'light' | 'dark' | 'system'). * * Fonts: Bebas Neue (logo), Syne (display headings), DM Sans (body), JetBrains Mono (numbers). */ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Syne:wght@700;800&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ── Light mode (default) ───────────────────────────────────────── */ :root { --color-bg-body: #F4F6FA; --color-bg-nav: #FFFFFF; --color-bg-surface: #FFFFFF; --color-bg-surface-alt: #EDF0F7; --color-bg-input: #FFFFFF; --color-border: rgba(0, 0, 0, 0.07); --color-border-strong: rgba(0, 0, 0, 0.14); --color-text-primary: #0A0E1A; --color-text-secondary: #4A5878; --color-text-muted: #8899BB; --color-nav-text: #4A5878; --color-nav-text-active:#0A0E1A; --color-nav-hover-bg: rgba(0, 0, 0, 0.04); --color-shadow-nav: 0 1px 3px rgba(0, 0, 0, 0.08); --color-row-win: rgba(0, 168, 85, 0.07); --color-row-loss: rgba(217, 33, 58, 0.06); --color-overlay: rgba(0, 0, 0, 0.04); color-scheme: light; /* Brand */ --brand-lime: #00A855; --brand-lime-dim: #007A3D; --brand-lime-glow: rgba(0, 168, 85, 0.12); --brand-gold: #CC8C10; --brand-red: #D9213A; --brand-blue: #2264CC; --color-gain: #00A855; --color-gain-bg: rgba(0, 168, 85, 0.08); --color-gain-border: rgba(0, 168, 85, 0.25); --color-loss: #D9213A; --color-loss-bg: rgba(217, 33, 58, 0.08); --color-loss-border: rgba(217, 33, 58, 0.25); /* Typography */ --font-display: 'Syne', sans-serif; --font-body: 'DM Sans', sans-serif; --font-mono: 'JetBrains Mono', monospace; --font-logo: 'Bebas Neue', sans-serif; /* Tokens */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.10); } /* ── Dark mode ──────────────────────────────────────────────────── */ html.dark { --color-bg-body: #080C14; --color-bg-nav: #0F1520; --color-bg-surface: #161D2E; --color-bg-surface-alt: #1E2840; --color-bg-input: #0F1520; --color-border: rgba(255, 255, 255, 0.06); --color-border-strong: rgba(255, 255, 255, 0.12); --color-text-primary: #F0F4FF; --color-text-secondary: #8899BB; --color-text-muted: #4A5878; --color-nav-text: #8899BB; --color-nav-text-active:#F0F4FF; --color-nav-hover-bg: rgba(255, 255, 255, 0.04); --color-shadow-nav: 0 1px 3px rgba(0, 0, 0, 0.5); --color-row-win: rgba(0, 232, 122, 0.06); --color-row-loss: rgba(255, 51, 85, 0.06); --color-overlay: rgba(255, 255, 255, 0.04); color-scheme: dark; --brand-lime: #00E87A; --brand-lime-dim: #00B85E; --brand-lime-glow: rgba(0, 232, 122, 0.15); --brand-gold: #FFB020; --brand-red: #FF3355; --brand-blue: #3B8EFF; --color-gain: #00E87A; --color-gain-bg: rgba(0, 232, 122, 0.10); --color-gain-border: rgba(0, 232, 122, 0.25); --color-loss: #FF3355; --color-loss-bg: rgba(255, 51, 85, 0.10); --color-loss-border: rgba(255, 51, 85, 0.25); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30); --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.40); } html { color-scheme: var(--color-scheme, light); } /* ── Base ───────────────────────────────────────────────────────── */ body { background-color: var(--color-bg-body); color: var(--color-text-primary); font-family: var(--font-body); -webkit-font-smoothing: antialiased; } /* ── Semantic utility classes ───────────────────────────────────── */ .theme-body { background-color: var(--color-bg-body); } .theme-nav { background-color: var(--color-bg-nav); box-shadow: var(--color-shadow-nav); } .theme-surface { background-color: var(--color-bg-surface); } .theme-surface-alt { background-color: var(--color-bg-surface-alt); } .theme-input-bg { background-color: var(--color-bg-input); } .theme-border { border-color: var(--color-border) !important; } .theme-border-strong { border-color: var(--color-border-strong) !important; } .theme-text { color: var(--color-text-primary); } .theme-text-secondary { color: var(--color-text-secondary); } .theme-text-muted { color: var(--color-text-muted); } .theme-nav-text { color: var(--color-nav-text); } .theme-nav-text-active{ color: var(--color-nav-text-active); } .theme-nav-link { color: var(--color-nav-text); transition: background 150ms ease-out, color 150ms ease-out; } .theme-nav-link:hover { background: var(--color-nav-hover-bg); color: var(--color-nav-text-active); } .theme-nav-link.active { background: var(--color-gain-bg); color: var(--brand-lime); } /* ── Tailwind slate overrides — light mode ──────────────────────── */ html:not(.dark) .text-slate-100, html:not(.dark) .text-slate-200 { color: var(--color-text-primary); } html:not(.dark) .text-slate-300 { color: var(--color-text-secondary); } html:not(.dark) .text-slate-400, html:not(.dark) .text-slate-500 { color: var(--color-text-muted); } html:not(.dark) .border-slate-600, html:not(.dark) .border-slate-700, html:not(.dark) .border-slate-800 { border-color: var(--color-border); } html:not(.dark) .bg-slate-700 { background-color: var(--color-bg-surface-alt); } html:not(.dark) .bg-slate-800 { background-color: var(--color-bg-surface-alt); } html:not(.dark) .bg-slate-900 { background-color: var(--color-bg-body); } html:not(.dark) .hover\:bg-slate-700:hover { background-color: var(--color-overlay); } html:not(.dark) .hover\:bg-slate-800:hover { background-color: var(--color-overlay); } html:not(.dark) .hover\:text-slate-200:hover, html:not(.dark) .hover\:text-slate-300:hover { color: var(--color-text-primary); } html:not(.dark) .bg-slate-700\/40 { background-color: rgba(0,0,0,0.04); } /* ── Tailwind slate overrides — dark mode ───────────────────────── */ html.dark .text-slate-100, html.dark .text-slate-200 { color: var(--color-text-primary); } html.dark .text-slate-300 { color: var(--color-text-secondary); } html.dark .text-slate-400, html.dark .text-slate-500 { color: var(--color-text-muted); } html.dark .border-slate-600, html.dark .border-slate-700, html.dark .border-slate-800 { border-color: var(--color-border); } html.dark .bg-slate-700 { background-color: var(--color-bg-surface-alt); } html.dark .bg-slate-800 { background-color: var(--color-bg-surface); } html.dark .bg-slate-900 { background-color: var(--color-bg-body); } html.dark .hover\:bg-slate-700:hover { background-color: var(--color-nav-hover-bg); } html.dark .bg-slate-700\/40 { background-color: rgba(30,40,64,0.4); } /* ── Gain / loss ────────────────────────────────────────────────── */ .positive { color: var(--color-gain) !important; } .negative { color: var(--color-loss) !important; } .neutral { color: var(--color-text-muted); } /* ── Win / loss row tints ───────────────────────────────────────── */ .row-win { background-color: var(--color-row-win); } .row-loss { background-color: var(--color-row-loss); } /* ── Status badges ──────────────────────────────────────────────── */ .status { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 7px; border-radius: var(--radius-sm); } .status-open, .status-open-trade { background: rgba(255,176,32,0.10); color: var(--brand-gold); border: 1px solid rgba(255,176,32,0.25); } .status-closed { background: var(--color-gain-bg); color: var(--brand-lime); border: 1px solid var(--color-gain-border); } .status-planned { background: rgba(59,142,255,0.10); color: var(--brand-blue); border: 1px solid rgba(59,142,255,0.2); } .status-cancelled { background: var(--color-loss-bg); color: var(--brand-red); border: 1px solid var(--color-loss-border); } /* ── Buttons ────────────────────────────────────────────────────── */ .btn-primary { background: var(--brand-lime); color: #080C14; border: none; font-family: var(--font-body); font-weight: 700; border-radius: var(--radius-md); transition: opacity 150ms ease-out; cursor: pointer; } .btn-primary:hover { opacity: 0.88; color: #080C14; } .btn-secondary { background: var(--color-bg-surface-alt); color: var(--color-text-secondary); border: 1px solid var(--color-border-strong); font-family: var(--font-body); font-weight: 600; border-radius: var(--radius-md); transition: background 150ms ease-out, color 150ms ease-out; cursor: pointer; } .btn-secondary:hover { background: var(--color-nav-hover-bg); color: var(--color-text-primary); } .btn-danger { background: var(--color-loss-bg); color: var(--brand-red); border: 1px solid var(--color-loss-border); font-family: var(--font-body); font-weight: 600; border-radius: var(--radius-md); transition: background 150ms; cursor: pointer; } .btn-danger:hover { opacity: 0.85; } /* ── Inputs ─────────────────────────────────────────────────────── */ input[type="text"], input[type="password"], input[type="date"], input[type="email"], input[type="number"], select, textarea { background-color: var(--color-bg-input); color: var(--color-text-primary); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); font-family: var(--font-body); font-size: 14px; transition: border-color 150ms, box-shadow 150ms; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand-lime); box-shadow: 0 0 0 2px var(--brand-lime-glow); } /* ── Scrollbar ──────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); } /* ── Sync badge ─────────────────────────────────────────────────── */ .sync-badge { font-family: var(--font-mono); font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: 999px; } .sync-badge.green { background: var(--color-gain-bg); color: var(--brand-lime); border: 1px solid var(--color-gain-border); } .sync-badge.yellow { background: rgba(255,176,32,0.10); color: var(--brand-gold); border: 1px solid rgba(255,176,32,0.25); } .sync-badge.red { background: var(--color-loss-bg); color: var(--brand-red); border: 1px solid var(--color-loss-border); } .sync-badge.grey { background: var(--color-overlay); color: var(--color-text-muted); border: 1px solid var(--color-border-strong); } /* ── Loading spinner ────────────────────────────────────────────── */ .spinner { border: 3px solid var(--color-border); border-top-color: var(--brand-lime); border-radius: 50%; width: 32px; height: 32px; animation: mgodt-spin 0.8s linear infinite; margin: 0 auto; } @keyframes mgodt-spin { to { transform: rotate(360deg); } } /* ── Cards ──────────────────────────────────────────────────────── */ .card { background: var(--color-bg-surface) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-sm) !important; color: var(--color-text-primary) !important; } .card:hover { transform: none !important; background: var(--color-bg-surface-alt) !important; box-shadow: var(--shadow-md) !important; } .card-header { color: var(--color-text-muted) !important; opacity: 1 !important; font-family: var(--font-body); font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; } .card-value { font-family: var(--font-mono) !important; color: var(--color-text-primary) !important; font-size: 1.75rem !important; font-weight: 600 !important; } .card-change { font-family: var(--font-mono) !important; font-size: 0.8rem !important; opacity: 1 !important; } .card-change.positive { color: var(--color-gain) !important; } .card-change.negative { color: var(--color-loss) !important; } /* ── Metric cards ───────────────────────────────────────────────── */ .metric-card { background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 16px 18px; box-shadow: var(--shadow-sm); transition: background 150ms ease-out; } .metric-card:hover { background: var(--color-bg-surface-alt); } .metric-value { font-family: var(--font-mono); font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; color: var(--color-text-primary); line-height: 1.1; margin-bottom: 4px; } .metric-label { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 8px; } /* ── Dashboard sections ─────────────────────────────────────────── */ .dashboard-section { background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 20px 24px; margin-bottom: 20px; box-shadow: var(--shadow-sm); } .section-title { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 16px; padding-bottom: 0; border-bottom: none; } /* ── Tables ─────────────────────────────────────────────────────── */ .data-table th, thead th { font-family: var(--font-body) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: var(--color-text-muted) !important; background-color: var(--color-bg-surface-alt) !important; border-bottom: 1px solid var(--color-border) !important; } .data-table td, tbody td { font-family: var(--font-mono); font-size: 13px; color: var(--color-text-secondary); border-bottom: 1px solid var(--color-border); } .data-table tbody tr:hover, tbody tr:hover { background: var(--color-nav-hover-bg); } .symbol { color: var(--color-text-primary) !important; font-weight: 600; font-family: var(--font-mono); } /* ── Controls ───────────────────────────────────────────────────── */ .controls input, .controls select { background: var(--color-bg-input); color: var(--color-text-primary); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); } .controls button, .refresh-btn { background: var(--color-bg-surface-alt) !important; color: var(--color-text-secondary) !important; border: 1px solid var(--color-border-strong) !important; border-radius: var(--radius-md) !important; font-family: var(--font-body) !important; font-size: 13px !important; font-weight: 600 !important; transition: background 150ms, color 150ms !important; cursor: pointer; } .controls button:hover, .refresh-btn:hover { background: var(--color-nav-hover-bg) !important; color: var(--color-text-primary) !important; } /* ── Tabs ───────────────────────────────────────────────────────── */ .tab-button { font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--color-text-muted); border-bottom: 2px solid transparent; background: none; transition: color 150ms, border-color 150ms; } .tab-button:hover { color: var(--color-text-primary); background: var(--color-nav-hover-bg); } .tab-button.active { color: var(--brand-lime); border-bottom-color: var(--brand-lime); background: transparent; } .tabs { border-bottom: 1px solid var(--color-border); } /* ── Brand / navbar ─────────────────────────────────────────────── */ .dashboard-header h1, .navbar-brand { font-family: var(--font-logo) !important; letter-spacing: 0.08em !important; } .dashboard-header { border-bottom: 1px solid var(--color-border) !important; } .nav-logout-btn { background: transparent; border: 1px solid var(--color-border-strong); color: var(--color-nav-text); font-family: var(--font-body); font-size: 13px; font-weight: 600; border-radius: var(--radius-md); transition: background 150ms, color 150ms; } .nav-logout-btn:hover { background: var(--color-nav-hover-bg); color: var(--color-nav-text-active); } /* ── Theme toggle ───────────────────────────────────────────────── */ .theme-toggle { display: inline-flex; align-items: center; gap: 2px; padding: 2px; background: var(--color-overlay); border: 1px solid var(--color-border); border-radius: 8px; } .theme-toggle button { appearance: none; background: transparent; border: none; cursor: pointer; padding: 4px 6px; border-radius: 6px; color: var(--color-text-muted); display: inline-flex; align-items: center; justify-content: center; line-height: 1; transition: background 150ms, color 150ms; } .theme-toggle button:hover { color: var(--color-text-primary); } .theme-toggle button[aria-pressed="true"] { background: var(--color-bg-surface); color: var(--color-text-primary); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); } .theme-toggle svg { width: 14px; height: 14px; display: block; } /* ── Privacy mode ───────────────────────────────────────────────── */ /* Mask absolute dollar amounts when privacy-on is active on */ .privacy-on .dollar-val { visibility: hidden; position: relative; } .privacy-on .dollar-val::after { content: '****'; visibility: visible; position: absolute; top: 0; left: 0; color: inherit; letter-spacing: 0.05em; } /* ── Settings page badge variants ───────────────────────────────── */ .badge-connected { background: var(--color-gain-bg); color: var(--brand-lime); border: 1px solid var(--color-gain-border); } .badge-expired { background: var(--color-loss-bg); color: var(--brand-red); border: 1px solid var(--color-loss-border); } .badge-expiring { background: rgba(255,176,32,0.10); color: var(--brand-gold); border: 1px solid rgba(255,176,32,0.25); } .badge-none { background: var(--color-overlay); color: var(--color-text-muted); border: 1px solid var(--color-border-strong); } .badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } /* ── Settings page action buttons ───────────────────────────────── */ .btn-connect { padding: 6px 16px; border-radius: 6px; font-size: 13px; font-weight: 600; font-family: var(--font-body); cursor: pointer; text-decoration: none; display: inline-block; transition: opacity 150ms; background: var(--brand-lime); color: #080C14; border: none; } .btn-connect:hover { opacity: 0.88; color: #080C14; } .btn-sync { padding: 6px 16px; border-radius: 6px; font-size: 13px; font-weight: 600; font-family: var(--font-body); cursor: pointer; background: var(--color-bg-surface-alt); color: var(--color-text-secondary); border: 1px solid var(--color-border-strong); transition: background 150ms, color 150ms; display: inline-flex; align-items: center; gap: 6px; } .btn-sync:hover { background: var(--color-nav-hover-bg); color: var(--color-text-primary); } .btn-delete { padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; font-family: var(--font-body); cursor: pointer; background: var(--color-loss-bg); color: var(--brand-red); border: 1px solid var(--color-loss-border); transition: opacity 150ms; } .btn-delete:hover { opacity: 0.8; } /* ── Status feedback messages ────────────────────────────────────── */ .auth-success { background: var(--color-gain-bg); border: 1px solid var(--color-gain-border); color: var(--brand-lime); padding: 14px 18px; border-radius: var(--radius-md); } .auth-failed { background: var(--color-loss-bg); border: 1px solid var(--color-loss-border); color: var(--brand-red); padding: 14px 18px; border-radius: var(--radius-md); } .error-message{ background: var(--color-loss-bg); border: 1px solid var(--color-loss-border); color: var(--brand-red); padding: 14px 18px; border-radius: var(--radius-md); } .warning { background: rgba(255,176,32,0.08); border: 1px solid rgba(255,176,32,0.25); color: var(--brand-gold); padding: 10px 14px; border-radius: var(--radius-md); } /* ── Filter buttons (trades list) ───────────────────────────────── */ .filter-btn { font-family: var(--font-body); font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 6px; cursor: pointer; background: var(--color-bg-surface); color: var(--color-text-muted); border: 1px solid var(--color-border-strong); transition: border-color 150ms, color 150ms; display: inline-flex; align-items: center; gap: 6px; } .filter-btn:hover { color: var(--color-text-primary); border-color: var(--color-text-muted); } /* ── Date preset buttons ────────────────────────────────────────── */ .date-preset-btn { display: block; width: 100%; text-align: left; background: transparent; color: var(--color-text-muted); border: none; border-radius: 5px; padding: 6px 8px; font-size: 0.8rem; font-family: var(--font-body); cursor: pointer; transition: background 150ms, color 150ms; } .date-preset-btn:hover { background: var(--color-nav-hover-bg); color: var(--color-text-primary); } .date-preset-btn.active { background: var(--color-gain-bg); color: var(--brand-lime); } /* ── Status dots (trades filter) ────────────────────────────────── */ .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .status-dot-open { background: var(--brand-gold); } .status-dot-win { background: var(--color-gain); } .status-dot-loss { background: var(--color-loss); } .status-dot-be { background: var(--color-text-muted); } /* ── Pagination ─────────────────────────────────────────────────── */ .page-number { background: var(--color-bg-surface-alt); border: 1px solid var(--color-border); color: var(--color-text-secondary); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 12px; } .page-number:hover { background: var(--color-nav-hover-bg); color: var(--color-text-primary); } .page-number.active { background: var(--brand-lime); color: #080C14; border-color: var(--brand-lime); font-weight: 700; } /* ── Performance card ───────────────────────────────────────────── */ .performance-card { background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 20px; box-shadow: var(--shadow-sm); } .performance-card h3 { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); } /* ── Page container ─────────────────────────────────────────────── */ /* AIDEV-NOTE: shared layout wrapper for every authenticated page. The * navbar is fixed at top:0 with h-14 (56px). We clear it via a top * padding of 56px + 1.25rem breathing room, expressed with calc() so * the gap below the navbar is consistent regardless of root font size. * Width modifiers cover narrow forms (--narrow) and the wide * dashboard (--wide). */ .page-container { width: 100%; max-width: 1280px; margin: 0 auto; padding: calc(56px + 1.25rem) 1rem 1.5rem; min-width: 0; } @media (min-width: 640px) { .page-container { padding-left: 1.25rem; padding-right: 1.25rem; padding-top: calc(56px + 1.5rem); } } @media (min-width: 1024px) { .page-container { padding-left: 1.5rem; padding-right: 1.5rem; padding-top: calc(56px + 1.75rem); } } .page-container--narrow { max-width: 56rem; } .page-container--wide { max-width: 1400px; } /* ── Responsive ─────────────────────────────────────────────────── */ @media (max-width: 768px) { .metric-value { font-size: 1.5rem !important; } .card-value { font-size: 1.4rem !important; } }