/* * FlowDesk UI System — v6 * * A final, token-driven presentation layer. The application still contains * older page-specific styles for compatibility; this file is intentionally * loaded last so shared surfaces, controls, tables, and data states converge * without requiring every legacy page to be rewritten at once. */ :root { /* Percentage, not 100vw: every element using this token renders inside .fd-workspace, which is already inset by the in-flow sidebar. A viewport-based width overflowed the page by the sidebar's full width. */ --fd-ui-content: min(1440px, calc(100% - 48px)); --fd-ui-gap: clamp(16px, 2vw, 24px); --fd-ui-card-radius: 14px; --fd-ui-control-h: 42px; --fd-ui-focus: 0 0 0 3px var(--fd-accent-soft), 0 0 0 1px var(--fd-accent); --fd-ui-surface-strong: color-mix(in srgb, var(--fd-surface) 94%, var(--fd-accent) 6%); } html { background: var(--fd-bg); scroll-behavior: smooth; } body { min-width: 320px; background: radial-gradient(circle at 12% -8%, var(--fd-accent-soft), transparent 30rem), var(--fd-bg) !important; color: var(--fd-text) !important; font-family: var(--fd-font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body::selection { background: var(--fd-accent); color: var(--fd-on-accent); } /* App chrome */ .fd-shell-v2, .fd-shell-body { min-height: 100vh; } .fd-shell-body { background: transparent; } .fd-globalbar, .fd-localbar { background: color-mix(in srgb, var(--fd-rail) 92%, transparent) !important; border-color: var(--fd-border) !important; box-shadow: 0 1px 0 var(--fd-border-soft), 0 8px 28px rgba(0,0,0,.08); backdrop-filter: blur(18px); } .fd-globalbar { min-height: 60px; } .fd-sidebar { background: color-mix(in srgb, var(--fd-rail) 96%, var(--fd-accent) 4%) !important; border-right: 1px solid var(--fd-border) !important; } .fd-sidebar-scroll { scrollbar-color: var(--fd-border-strong) transparent; } .fd-sidebar-section-label, .fd-eyebrow { color: var(--fd-accent) !important; letter-spacing: .12em; font-size: .68rem; font-weight: 750; } .fd-globalnav-link, .fd-sidebar-link, .fd-mobile-nav a { border-radius: 9px; color: var(--fd-text-soft) !important; transition: background .16s ease, color .16s ease, transform .16s ease; } .fd-globalnav-link:hover, .fd-sidebar-link:hover, .fd-mobile-nav a:hover { background: var(--fd-bg-hover) !important; color: var(--fd-text) !important; transform: translateX(2px); } .fd-globalnav-link--on, .fd-sidebar-link--on { background: var(--fd-accent-soft) !important; color: var(--fd-accent-bright) !important; box-shadow: inset 2px 0 var(--fd-accent); } .fd-globalbar-icon-btn, .theme-toggle, .fd-hamburger, .fd-sidebar-collapse { border: 1px solid transparent; border-radius: 9px; color: var(--fd-text-soft) !important; transition: border-color .16s ease, background .16s ease, color .16s ease; } .fd-globalbar-icon-btn:hover, .theme-toggle:hover, .fd-hamburger:hover, .fd-sidebar-collapse:hover { background: var(--fd-bg-hover) !important; border-color: var(--fd-border-strong); color: var(--fd-text) !important; } /* Layout rhythm */ /* :not(body) — see the matching note in financial-workspace.css: itself carries the fd-page class, and must never be sized or padded as if it were the content column. */ main.main, .main, .fd-main, .workspace-main, main.fd-content, .fd-page:not(body) { width: var(--fd-ui-content); max-width: none !important; margin-inline: auto; padding: clamp(22px, 3vw, 40px) 0 56px; } .site-foot { width: var(--fd-ui-content); margin: 0 auto; padding: 24px 0 34px; border-top: 1px solid var(--fd-border); color: var(--fd-text-dim); font-size: .78rem; } .fd-page-header, .ui-page-header { align-items: flex-start; min-height: 76px; margin-bottom: var(--fd-ui-gap); padding: 0 0 18px; border-bottom: 1px solid var(--fd-border); } .fd-page-header h1, .ui-page-header h1 { font-size: clamp(1.55rem, 2.3vw, 2.15rem); line-height: 1.1; letter-spacing: -.035em; } .fd-page-header p, .ui-page-header p, .fd-page-header .sub, .ui-page-header .sub { max-width: 58rem; line-height: 1.55; } /* Surfaces and cards */ .fd-card, .ui-panel, .panel, .news-card, .stat-card, .fd-panel, .card, .box { background: linear-gradient(145deg, var(--fd-ui-surface-strong), var(--fd-surface)); border: 1px solid var(--fd-border) !important; border-radius: var(--fd-ui-card-radius) !important; box-shadow: var(--fd-shadow); } .fd-card, .panel, .news-card, .stat-card, .card, .box { transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .fd-card:hover, .panel:hover, .news-card:hover, .stat-card:hover, .card:hover, .box:hover { border-color: var(--fd-border-strong) !important; box-shadow: var(--fd-shadow-md); } .ui-panel { overflow: clip; } .ui-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 14px 18px; border-bottom: 1px solid var(--fd-border); background: color-mix(in srgb, var(--fd-bg-subtle) 55%, transparent); } .ui-panel-title, .panel-title { margin: 0; font-size: .96rem; letter-spacing: -.01em; } .ui-panel-body { padding: 18px; } .ui-panel-meta { padding: 10px 18px; border-top: 1px solid var(--fd-border-soft); color: var(--fd-text-dim); font: 600 .68rem/1.4 var(--fd-font-mono); letter-spacing: .02em; } .fd-grid, .fd-grid-2, .fd-grid-3 { gap: var(--fd-ui-gap) !important; } /* Controls and actions */ .fd-btn, button.primary, a.primary, .btn-primary, button, input[type="submit"] { min-height: var(--fd-ui-control-h); border-radius: 9px; font-weight: 700; letter-spacing: .005em; transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease; } .fd-btn, button.primary, a.primary, .btn-primary, input[type="submit"] { background: linear-gradient(135deg, var(--fd-accent-bright), var(--fd-accent)) !important; color: var(--fd-on-accent) !important; box-shadow: 0 4px 14px var(--fd-accent-glow); } .fd-btn:hover, button.primary:hover, a.primary:hover, .btn-primary:hover, input[type="submit"]:hover { transform: translateY(-1px); box-shadow: 0 8px 20px var(--fd-accent-glow); } .fd-btn:not(.primary), .fd-btn.secondary, button.secondary, .btn-secondary { background: var(--fd-bg-subtle) !important; color: var(--fd-text) !important; border: 1px solid var(--fd-border-strong) !important; box-shadow: none; } .fd-btn:not(.primary):hover, .fd-btn.secondary:hover, button.secondary:hover, .btn-secondary:hover { background: var(--fd-bg-hover) !important; border-color: var(--fd-accent) !important; } input:not([type="checkbox"]):not([type="radio"]), select, textarea { min-height: var(--fd-ui-control-h); background: var(--fd-bg-soft) !important; border: 1px solid var(--fd-border-strong) !important; border-radius: 9px !important; color: var(--fd-text) !important; font: 500 .9rem/1.3 var(--fd-font-sans); } textarea { min-height: 110px; } input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: none !important; box-shadow: var(--fd-ui-focus) !important; } label { color: var(--fd-text-soft); font-weight: 650; } /* Data presentation: make dense information scannable and honest. */ .table-wrap { overflow-x: auto; border: 1px solid var(--fd-border); border-radius: 12px; background: var(--fd-surface); } table.fd-table, table.earn, table.fd-tbl { width: 100%; min-width: 680px; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; } table.fd-table th, table.earn th, table.fd-tbl th { position: sticky; top: 0; z-index: 1; padding: 11px 14px; background: var(--fd-bg-subtle); color: var(--fd-text-dim); border-bottom: 1px solid var(--fd-border-strong); font: 750 .67rem/1.2 var(--fd-font-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; } table.fd-table td, table.earn td, table.fd-tbl td { padding: 13px 14px; border-bottom: 1px solid var(--fd-border-soft); color: var(--fd-text); vertical-align: middle; } table.fd-table tbody tr, table.earn tbody tr, table.fd-tbl tbody tr { transition: background .14s ease; } table.fd-table tbody tr:hover, table.earn tbody tr:hover, table.fd-tbl tbody tr:hover { background: var(--fd-bg-hover); } table.fd-table tbody tr:last-child td, table.earn tbody tr:last-child td, table.fd-tbl tbody tr:last-child td { border-bottom: 0; } table.fd-table td:first-child, table.earn td:first-child, table.fd-tbl td:first-child { font-weight: 700; } .mono, .num, [data-numeric="true"] { font-family: var(--fd-font-mono); font-variant-numeric: tabular-nums; } .fd-table-head, .fd-table-body { border-color: var(--fd-border); } .fd-table-head { background: var(--fd-bg-subtle); color: var(--fd-text-dim); } .fd-row { min-height: 58px; border-bottom: 1px solid var(--fd-border-soft); transition: background .14s ease, padding .14s ease; } .fd-row:hover { background: var(--fd-bg-hover); } /* Status, direction, and empty states */ .ui-chip, .badge, .tag, .pill { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 9px; border: 1px solid var(--fd-border-strong); border-radius: 999px; font: 750 .67rem/1 var(--fd-font-mono); letter-spacing: .02em; white-space: nowrap; } .ui-chip--ok, .badge-ok, .tag.bull, .pill.bull { color: var(--fd-bull-bright) !important; background: var(--fd-bull-soft) !important; border-color: color-mix(in srgb, var(--fd-bull) 35%, transparent); } .ui-chip--bull { color: var(--fd-bull-bright); background: var(--fd-bull-soft); } .ui-chip--bear, .badge-bear, .tag.bear, .pill.bear { color: var(--fd-bear-bright) !important; background: var(--fd-bear-soft) !important; border-color: color-mix(in srgb, var(--fd-bear) 35%, transparent); } .ui-chip--warn, .badge-warn { color: var(--fd-warn); background: color-mix(in srgb, var(--fd-warn) 12%, transparent); } .ui-chip--error { color: var(--fd-bear-bright); background: var(--fd-bear-soft); } .ui-chip--neutral, .ui-chip--empty { color: var(--fd-text-soft); background: var(--fd-bg-subtle); } .fd-empty, .empty, .empty-state { display: grid; place-items: center; min-height: 150px; padding: 28px; border: 1px dashed var(--fd-border-strong) !important; border-radius: 12px; background: repeating-linear-gradient(135deg, transparent, transparent 12px, var(--fd-bg-subtle) 12px, var(--fd-bg-subtle) 24px); color: var(--fd-text-soft); text-align: center; } .fd-empty strong, .empty strong, .empty-state strong { color: var(--fd-text); } /* Charts, heatmaps, and visual summaries */ .heatmap { gap: 8px !important; } .heat, .heatmap .heat { min-height: 78px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 2px 8px rgba(0,0,0,.12); transition: transform .16s ease, filter .16s ease; } .heat:hover { transform: translateY(-2px) scale(1.01); filter: brightness(1.08); } .heat-name { font: 800 .8rem/1 var(--fd-font-mono); letter-spacing: .04em; } .heat-val { font: 850 1.35rem/1 var(--fd-font-mono); } .heat-sub { opacity: .8; font: 600 .68rem/1.2 var(--fd-font-mono); } .fd-legend-row { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; color: var(--fd-text-dim); font-size: .72rem; } .fd-legend-row i { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 3px; vertical-align: -1px; } /* Search, notices, and diagnostics */ .fd-engage-tip, .notice, .alert, .flash { border-radius: 11px; border: 1px solid var(--fd-border); background: var(--fd-accent-soft); color: var(--fd-text-soft); } .fd-debug { margin-top: 18px; border: 1px solid var(--fd-border); border-radius: 11px; background: var(--fd-bg-subtle); } .fd-debug summary { cursor: pointer; padding: 11px 14px; color: var(--fd-text-dim); font: 700 .7rem var(--fd-font-mono); text-transform: uppercase; letter-spacing: .08em; } .fd-debug-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; padding: 1px; background: var(--fd-border); } .fd-debug-item { display: grid; gap: 4px; padding: 10px; background: var(--fd-surface); } .fd-debug-item .k { color: var(--fd-text-dim); font-size: .7rem; } .fd-debug-item .v { color: var(--fd-text); font: 700 .75rem var(--fd-font-mono); overflow-wrap: anywhere; } /* Compact mobile data view: preserve meaning, never crush columns. */ @media (max-width: 900px) { :root { --fd-ui-content: calc(100% - 32px); } main.main, .main, .fd-main, .workspace-main, main.fd-content, .fd-page:not(body) { padding-top: 22px; } .fd-globalbar { min-height: 56px; } .fd-page-header { min-height: 0; } .fd-page-header h1, .ui-page-header h1 { font-size: 1.45rem; } .ui-panel-head { align-items: flex-start; flex-direction: column; } .ui-panel-body { padding: 14px; } } @media (max-width: 600px) { :root { --fd-ui-content: calc(100% - 24px); } .fd-grid, .fd-grid-2, .fd-grid-3 { grid-template-columns: 1fr !important; } .fd-page-header, .ui-page-header { gap: 10px; } .fd-page-header > *, .ui-page-header > * { width: 100%; } .fd-page-header .fd-btn, .ui-page-header .fd-btn { width: 100%; justify-content: center; } .site-foot { width: var(--fd-ui-content); padding-bottom: 80px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }