/* ============================================================ Finance Intelligence Portal (FIP) Design System — Data-Dense Dashboard, light theme Font: Plus Jakarta Sans · Primary: Deep Blue ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap'); /* ============================================================ FMF DESIGN TOKEN SYSTEM Centralized, theme-able tokens inspired by the FMF logo. Green = primary brand identity · Red = critical only. Themes: FMF Classic (default) · FMF Dark · Executive Blue Switch via (default = Classic). ============================================================ */ :root { /* ----- FMF brand (raw) ----- */ --fmf-green: #157347; /* logo green — primary identity */ --fmf-green-dark: #0F5C38; --fmf-green-deep: #0B4429; --fmf-red: #D8322B; /* logo red — critical / danger ONLY */ /* ----- Primary (green) ----- */ --primary: #157347; --primary-600: #115F3A; --primary-500: #1A8553; --primary-400: #2E9E66; --primary-50: #EAF6EF; --primary-100: #CFE8D9; --on-primary: #FFFFFF; /* ----- Semantic ----- */ --success: #157C4A; /* positive = FMF green family */ --success-50: #E7F5EC; --warning: #C77A0A; /* amber — NOT red */ --warning-soft: #E69A12; --warning-50: #FBF1DF; --danger: #D8322B; /* FMF red — critical only */ --danger-50: #FCEBEA; --info: #2563A8; /* ----- Neutrals (Classic light) ----- */ --bg: #F4F7F4; --surface: #FFFFFF; --surface-2: #F1F6F2; --sidebar-bg: #FFFFFF; --text: #122019; --text-soft: #46584E; --text-muted: #8A9A90; --border: #E4ECE6; --border-strong: #D2DDD6; --topbar-bg: rgba(244,247,244,.85); --glass: rgba(255,255,255,.82); /* ----- Sidebar rail (dark rail + light content — executive look in light themes) ----- */ --sb-bg: #0F1A14; --sb-text: #D8E3DC; --sb-text-muted: #8B9C92; --sb-border: rgba(255,255,255,.08); --sb-hover: rgba(255,255,255,.06); --sb-accent: #34B36B; --sb-active-bg: rgba(52,179,107,.16); --sb-active-text: #7BDDA3; /* ----- Semantic aliases (requested --color-* API; auto-follow the active theme) ----- */ --color-primary: var(--primary); --color-primary-light: var(--primary-400); --color-primary-dark: var(--primary-600); --color-success: var(--success); --color-warning: var(--warning); --color-danger: var(--danger); --color-info: var(--info); --color-background: var(--bg); --color-surface: var(--surface); --color-card: var(--surface); --color-border: var(--border); --color-text-primary: var(--text); --color-text-secondary: var(--text-soft); /* Radii & elevation */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px; --shadow-xs: 0 1px 2px rgba(16,32,24,.05); --shadow-sm: 0 1px 3px rgba(16,32,24,.06), 0 1px 2px rgba(16,32,24,.04); --shadow-md: 0 4px 16px rgba(16,32,24,.08); --shadow-lg: 0 12px 32px rgba(16,32,24,.10); --shadow-pop: 0 16px 48px rgba(16,32,24,.16); /* Motion */ --ease: cubic-bezier(.4, 0, .2, 1); --fast: 140ms; --med: 220ms; --slow: 360ms; --sidebar-w: 256px; --topbar-h: 64px; /* tabular numerals for data */ --num: "tnum" 1, "lnum" 1; } /* ============================================================ THEME · FMF DARK — layered charcoal-green, vibrant green accent ============================================================ */ [data-theme="dark"] { --primary: #34B36B; --primary-600: #2A9D5C; --primary-500: #3DBE76; --primary-400: #5BD08C; --primary-50: #14271C; --primary-100: #1C3A28; --on-primary: #07140D; --success: #34B36B; --success-50: #12281C; --warning: #E0A53A; --warning-soft: #F0B84E; --warning-50: #2E2410; --danger: #F26A63; --danger-50: #341A19; --info: #56A8E0; --bg: #0E1512; /* not pure black */ --surface: #15201B; /* layered */ --surface-2: #1C2A23; --sidebar-bg: #101814; --text: #E7F0EA; --text-soft: #B2C4BA; --text-muted: #7E948A; --border: #26352D; --border-strong: #36493E; --topbar-bg: rgba(14,21,18,.82); --glass: rgba(16,24,20,.74); --sb-bg: #0A120D; /* slightly deeper than content surface so the rail still reads */ --sb-accent: #3DBE76; --shadow-xs: 0 1px 2px rgba(0,0,0,.40); --shadow-sm: 0 1px 3px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.35); --shadow-md: 0 6px 20px rgba(0,0,0,.50); --shadow-lg: 0 14px 36px rgba(0,0,0,.55); --shadow-pop: 0 18px 50px rgba(0,0,0,.60); } /* dark fixes for components that hardcode a light background */ [data-theme="dark"] .input, [data-theme="dark"] .ms-btn, [data-theme="dark"] .icon-btn, [data-theme="dark"] .btn-ghost, [data-theme="dark"] .search-top input, [data-theme="dark"] .filter select, [data-theme="dark"] .filter input, [data-theme="dark"] .ai-mini-chart, [data-theme="dark"] .ai-input-bar textarea, [data-theme="dark"] .suggest { background: var(--surface); color: var(--text); } [data-theme="dark"] .tint-sky { background:#0E2A3A; color:#5BB8E8; } [data-theme="dark"] .tint-violet { background:#241B3A; color:#B79CF0; } [data-theme="dark"] .tint-slate { background:var(--surface-2); color:var(--text-soft); } [data-theme="dark"] .ai-reco { border-color:#1C3A28; } [data-theme="dark"] *::-webkit-scrollbar-thumb { background:#2C3A32; background-clip:content-box; } /* ============================================================ THEME · EXECUTIVE BLUE — cool premium-analytics presentation ============================================================ */ [data-theme="blue"] { --primary: #1D4ED8; --primary-600: #1E40AF; --primary-500: #2563EB; --primary-400: #3B82F6; --primary-50: #EEF3FF; --primary-100: #D8E4FF; --on-primary: #FFFFFF; --success: #0E8A52; /* green keeps "positive" meaning */ --success-50: #E7F5EC; --warning: #C2790B; --warning-soft: #E69A12; --warning-50: #FBF1DF; --danger: #DC2626; --danger-50: #FCEAEA; --info: #0EA5E9; --bg: #EDF1F7; --surface: #FFFFFF; --surface-2: #F1F5FB; --sidebar-bg: #FFFFFF; --text: #0B1B33; --text-soft: #43536B; --text-muted: #8593AB; --border: #E1E8F3; --border-strong: #CAD6E7; --topbar-bg: rgba(237,241,247,.85); --glass: rgba(255,255,255,.82); --sb-bg: #0F1B2D; /* premium navy rail */ --sb-text: #D6E0EE; --sb-text-muted: #8595AD; --sb-border: rgba(255,255,255,.08); --sb-hover: rgba(255,255,255,.06); --sb-accent: #3B82F6; --sb-active-bg: rgba(59,130,246,.18); --sb-active-text: #9CC0FF; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { font-family: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } :focus-visible { outline: 2px solid var(--primary-400); outline-offset: 2px; border-radius: 6px; } .tnum { font-variant-numeric: tabular-nums; font-feature-settings: var(--num); } img { max-width: 100%; display: block; } ::selection { background: var(--primary-100); } /* scrollbars */ * { scrollbar-width: thin; scrollbar-color: #CBD5E1 transparent; } *::-webkit-scrollbar { width: 9px; height: 9px; } *::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: #94A3B8; background-clip: content-box; } /* ============================================================ LOGIN ============================================================ */ .login-wrap { min-height: 100dvh; display: grid; grid-template-columns: 1.05fr .95fr; background: var(--bg); } .login-aside { position: relative; overflow: hidden; background: radial-gradient(1200px 600px at 80% -10%, rgba(46,158,102,.45), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(216,50,43,.20), transparent 55%), linear-gradient(135deg, #0B4429 0%, #115F3A 45%, #157347 100%); color: #fff; padding: 56px; display: flex; flex-direction: column; justify-content: space-between; } .login-aside::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 36px 36px; mask-image: radial-gradient(600px 600px at 70% 30%, #000, transparent 75%); pointer-events: none; } .login-aside .brand-row { display:flex; align-items:center; gap:12px; position:relative; z-index:1; } .login-aside h1 { font-size: 34px; line-height:1.2; font-weight: 800; margin: 0 0 14px; letter-spacing:-.02em; position:relative; z-index:1; } .login-aside p { font-size: 15px; color: rgba(255,255,255,.82); max-width: 420px; position:relative; z-index:1; } .login-aside .stat-row { display:flex; gap:28px; position:relative; z-index:1; } .login-aside .stat-row .v { font-size: 26px; font-weight: 800; } .login-aside .stat-row .l { font-size: 12px; color: rgba(255,255,255,.7); } .login-main { display:flex; align-items:center; justify-content:center; padding: 40px; } .login-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); padding: 40px 36px; animation: rise var(--slow) var(--ease) both; } .login-logo { width: 54px; height: 54px; border-radius: 14px; display:grid; place-items:center; background: linear-gradient(135deg, var(--primary), var(--primary-400)); color:#fff; box-shadow: var(--shadow-md); margin-bottom: 18px; } .login-card h2 { margin: 0 0 4px; font-size: 22px; font-weight: 800; letter-spacing:-.01em; } .login-card .sub { color: var(--text-soft); margin: 0 0 26px; font-size: 13.5px; } .ms-btn { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; height: 48px; border:1px solid var(--border-strong); background:#fff; border-radius: var(--r-md); font-weight:600; font-size:14px; color:var(--text); transition: all var(--fast) var(--ease); } .ms-btn:hover { background:#F8FAFC; border-color: var(--primary-400); box-shadow: var(--shadow-sm); transform: translateY(-1px); } .ms-grid { width:18px; height:18px; display:grid; grid-template-columns:1fr 1fr; gap:2px; } .ms-grid i { display:block; border-radius:1px; } .divider { display:flex; align-items:center; gap:12px; color:var(--text-muted); font-size:12px; margin:22px 0; } .divider::before, .divider::after { content:""; height:1px; background:var(--border); flex:1; } .field { margin-bottom:14px; } .field label { display:block; font-size:12.5px; font-weight:600; color:var(--text-soft); margin-bottom:6px; } .input { width:100%; height:44px; padding:0 14px; border:1px solid var(--border-strong); border-radius: var(--r-md); font-size:14px; background:#fff; color:var(--text); transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); } .input:focus { outline:none; border-color: var(--primary-400); box-shadow: 0 0 0 3px var(--primary-50); } textarea.input { height:auto; padding:12px 14px; resize:vertical; line-height:1.55; } select.input { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: right 12px center; padding-right:36px; } .login-foot { margin-top:22px; font-size:12px; color:var(--text-muted); text-align:center; } /* ============================================================ APP SHELL ============================================================ */ .app { display:grid; grid-template-columns: var(--sidebar-w) 1fr; min-height:100dvh; } /* Sidebar */ .sidebar { background: var(--sb-bg); color: var(--sb-text); border-right:1px solid var(--sb-border); display:flex; flex-direction:column; position: sticky; top:0; height:100dvh; z-index: 40; transition: transform var(--med) var(--ease); } .sb-brand { display:flex; align-items:center; gap:11px; padding: 18px 18px 16px; } .sb-logo { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; flex:none; background:linear-gradient(135deg,var(--primary),var(--primary-400)); color:#fff; box-shadow:var(--shadow-sm); } .sb-brand .t { font-weight:800; font-size:15px; letter-spacing:-.01em; color:var(--sb-text); } .sb-brand .s { font-size:11px; color:var(--sb-text-muted); font-weight:500; } .sb-scroll { flex:1; overflow-y:auto; padding: 6px 12px 12px; } .sb-section { font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--sb-text-muted); padding:14px 10px 6px; } .nav-item { display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:10px; color:var(--sb-text); font-weight:600; font-size:13.5px; position:relative; transition: background var(--fast) var(--ease), color var(--fast) var(--ease); } .nav-item svg { width:18px; height:18px; flex:none; opacity:.85; } .nav-item:hover { background:var(--sb-hover); color:#fff; } .nav-item.active { background:var(--sb-active-bg); color:var(--sb-active-text); } .nav-item.active svg { opacity:1; color:var(--sb-accent); } .nav-item.active::before { content:""; position:absolute; left:-12px; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--sb-accent); } .nav-item .badge { margin-left:auto; } .sb-foot { border-top:1px solid var(--sb-border); padding:12px; } .user-chip { display:flex; align-items:center; gap:10px; padding:8px; border-radius:10px; transition: background var(--fast); } .user-chip:hover { background: var(--sb-hover); } .avatar { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:13px; color:#fff; flex:none; } .user-chip .nm { font-size:13px; font-weight:700; color:var(--sb-text); } .user-chip .rl { font-size:11px; color:var(--sb-text-muted); } .user-chip svg { color:var(--sb-text-muted); } /* Main column */ .main { display:flex; flex-direction:column; min-width:0; } .topbar { height:var(--topbar-h); position:sticky; top:0; z-index:30; background: var(--topbar-bg); backdrop-filter: blur(10px); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:14px; padding:0 24px; } .icon-btn { width:38px; height:38px; border-radius:10px; border:1px solid var(--border); background:#fff; display:grid; place-items:center; color:var(--text-soft); transition: all var(--fast) var(--ease); } .icon-btn:hover { background:var(--surface-2); color:var(--text); border-color:var(--border-strong); } .icon-btn svg { width:18px; height:18px; } .menu-toggle { display:none; } .crumbs { display:flex; align-items:center; gap:7px; font-size:13px; color:var(--text-muted); font-weight:600; } .crumbs .cur { color:var(--text); } .search-top { margin-left:auto; position:relative; } .search-top input { width:240px; height:40px; padding:0 14px 0 38px; border:1px solid var(--border); border-radius:var(--r-md); background:#fff; font-size:13px; transition: width var(--med) var(--ease), box-shadow var(--fast); } .search-top input:focus { outline:none; width:300px; border-color:var(--primary-400); box-shadow:0 0 0 3px var(--primary-50); } .search-top svg { position:absolute; left:12px; top:11px; width:17px; height:17px; color:var(--text-muted); } .content { padding: 26px 28px 48px; max-width: 1480px; width:100%; margin:0 auto; animation: fade var(--med) var(--ease) both; } .page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap; } .page-head h1 { font-size:24px; font-weight:800; margin:0; letter-spacing:-.02em; } .page-head .desc { color:var(--text-soft); font-size:13.5px; margin:4px 0 0; } .head-actions { display:flex; gap:10px; align-items:center; } /* ---------- Buttons ---------- */ .btn { display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px; border-radius:var(--r-md); font-weight:700; font-size:13.5px; border:1px solid transparent; transition: all var(--fast) var(--ease); white-space:nowrap; } .btn svg { width:16px; height:16px; } .btn-primary { background:var(--primary); color:#fff; box-shadow: var(--shadow-sm); } .btn-primary:hover { background:var(--primary-600); transform:translateY(-1px); box-shadow:var(--shadow-md); } .btn-ghost { background:#fff; color:var(--text-soft); border-color:var(--border); } .btn-ghost:hover { background:var(--surface-2); color:var(--text); border-color:var(--border-strong); } .btn-success { background:var(--success); color:#fff; } .btn-success:hover { filter:brightness(.95); transform:translateY(-1px); } .btn-sm { height:34px; padding:0 12px; font-size:12.5px; border-radius:9px; } .btn:active { transform: translateY(0) scale(.985); } /* ---------- Cards & grids ---------- */ .card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); } .card-pad { padding:18px; } .grid { display:grid; gap:16px; } .kpi-grid { grid-template-columns: repeat(4, 1fr); } .cols-2 { grid-template-columns: repeat(2, 1fr); } .cols-3 { grid-template-columns: repeat(3, 1fr); } /* KPI card */ .kpi { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px 18px; box-shadow:var(--shadow-xs); position:relative; overflow:hidden; transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), border-color var(--fast); animation: rise var(--med) var(--ease) both; } .kpi:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color:var(--border-strong); } .kpi .top { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; } .kpi .ic { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; } .kpi .ic svg { width:19px; height:19px; } .kpi .label { font-size:12.5px; color:var(--text-soft); font-weight:600; } .kpi .val { font-size:26px; font-weight:800; letter-spacing:-.02em; line-height:1.1; } .kpi .val small { font-size:14px; color:var(--text-muted); font-weight:700; } .kpi .delta { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:700; margin-top:8px; padding:2px 8px; border-radius:var(--r-pill); } .kpi .delta svg { width:13px; height:13px; } .delta.up { color:var(--success); background:var(--success-50); } .delta.down { color:var(--danger); background:var(--danger-50); } .delta.warn { color:var(--warning); background:var(--warning-50); } /* tinted icon backgrounds */ .tint-blue { background:var(--primary-50); color:var(--primary); } .tint-green { background:var(--success-50); color:var(--success); } .tint-orange { background:var(--warning-50); color:var(--warning); } .tint-red { background:var(--danger-50); color:var(--danger); } .tint-sky { background:#E0F2FE; color:#0284C7; } .tint-violet { background:#F3E8FF; color:#7C3AED; } .tint-slate { background:#F1F5F9; color:#475569; } /* ---------- Section / chart card ---------- */ .panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); overflow:hidden; } .panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; border-bottom:1px solid var(--border); } .panel-head h3 { margin:0; font-size:15px; font-weight:700; letter-spacing:-.01em; } .panel-head .h-sub { font-size:12px; color:var(--text-muted); margin-top:2px; } .panel-body { padding:18px; } .chart-box { position:relative; height:260px; } .chart-box.sm { height:200px; } .chart-box.lg { height:300px; } /* ---------- Badges / pills ---------- */ .badge { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:var(--r-pill); line-height:1.4; } .badge svg { width:12px; height:12px; } .badge.green { background:var(--success-50); color:var(--success); } .badge.orange { background:var(--warning-50); color:var(--warning); } .badge.red { background:var(--danger-50); color:var(--danger); } .badge.blue { background:var(--primary-50); color:var(--primary); } .badge.slate { background:var(--surface-2); color:var(--text-soft); } .dot { width:7px; height:7px; border-radius:50%; } /* ---------- Tables ---------- */ .table-wrap { overflow-x:auto; } table.tbl { width:100%; border-collapse:collapse; font-size:13px; } table.tbl th { text-align:left; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); font-weight:700; padding:11px 14px; border-bottom:1px solid var(--border); white-space:nowrap; background:var(--surface-2); position:sticky; top:0; } table.tbl td { padding:12px 14px; border-bottom:1px solid var(--border); color:var(--text); vertical-align:middle; } table.tbl tbody tr { transition: background var(--fast) var(--ease); } table.tbl tbody tr:hover { background:var(--primary-50); } table.tbl tbody tr:last-child td { border-bottom:none; } .th-num, .td-num { text-align:right; font-variant-numeric: tabular-nums; } /* progress bar */ .bar { height:7px; border-radius:var(--r-pill); background:var(--surface-2); overflow:hidden; min-width:90px; } .bar > span { display:block; height:100%; border-radius:var(--r-pill); transition: width var(--slow) var(--ease); } .bar.green > span { background:var(--success); } .bar.blue > span { background:var(--primary); } .bar.orange > span { background:var(--warning); } .bar.red > span { background:var(--danger); } /* ---------- Project cards ---------- */ .proj-grid { grid-template-columns: repeat(3, 1fr); } .proj-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); padding:18px; display:flex; flex-direction:column; gap:14px; transition: all var(--fast) var(--ease); animation: rise var(--med) var(--ease) both; } .proj-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--primary-100); } .proj-card .pc-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; } .proj-card .pc-name { font-weight:800; font-size:15.5px; letter-spacing:-.01em; } .proj-card .pc-donor { font-size:12.5px; color:var(--text-muted); display:flex; align-items:center; gap:5px; margin-top:2px; } .proj-emblem { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-weight:800; color:#fff; flex:none; } .pc-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; } .pc-stat .l { font-size:11px; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.03em; } .pc-stat .v { font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; } .pc-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:4px; border-top:1px solid var(--border); margin-top:2px; padding-top:14px; } /* ---------- Tabs ---------- */ .tabs { display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:22px; overflow-x:auto; } .tab { padding:11px 14px; font-weight:700; font-size:13.5px; color:var(--text-soft); border-bottom:2px solid transparent; white-space:nowrap; transition: color var(--fast), border-color var(--fast); background:none; } .tab:hover { color:var(--text); } .tab.active { color:var(--primary); border-bottom-color:var(--primary); } /* ---------- Filter bar ---------- */ .filters { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:18px; } .filter { display:flex; flex-direction:column; gap:4px; } .filter label { font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); padding-left:2px; } .filter select, .filter input { height:38px; min-width:140px; padding:0 12px; border:1px solid var(--border); border-radius:10px; background:#fff; font-size:13px; font-weight:600; color:var(--text); } .filter select { appearance:none; padding-right:32px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; } .filter select:focus, .filter input:focus { outline:none; border-color:var(--primary-400); box-shadow:0 0 0 3px var(--primary-50); } /* ---------- Documents ---------- */ .doc-cat { display:flex; align-items:center; gap:10px; margin:24px 0 12px; } .doc-cat h3 { font-size:14px; font-weight:800; margin:0; } .doc-cat .count { font-size:11.5px; color:var(--text-muted); background:var(--surface-2); padding:2px 9px; border-radius:var(--r-pill); font-weight:700; } .doc-grid { grid-template-columns: repeat(4, 1fr); } .doc-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:16px; display:flex; flex-direction:column; gap:10px; transition: all var(--fast) var(--ease); cursor:pointer; } .doc-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--primary-100); } .doc-ic { width:42px; height:42px; border-radius:11px; display:grid; place-items:center; } .doc-ic svg { width:21px; height:21px; } .doc-card .nm { font-size:13.5px; font-weight:700; line-height:1.35; } .doc-card .meta { font-size:11.5px; color:var(--text-muted); margin-top:auto; display:flex; gap:8px; align-items:center; } /* ---------- Finance AI ---------- */ .ai-layout { display:grid; grid-template-columns: 1fr 280px; gap:18px; height: calc(100dvh - var(--topbar-h) - 74px); min-height:480px; } .ai-chat { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); overflow:hidden; } .ai-stream { flex:1; overflow-y:auto; padding:22px; display:flex; flex-direction:column; gap:20px; } .ai-msg { display:flex; gap:12px; max-width:880px; animation: rise var(--med) var(--ease) both; } .ai-msg .ava { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none; color:#fff; font-weight:800; font-size:12px; } .ai-msg.user { flex-direction:row-reverse; margin-left:auto; } .ai-msg.user .bubble { background:var(--primary); color:#fff; border-radius:14px 14px 4px 14px; } .ai-msg.user .ava { background:#0F172A; } .ai-msg.bot .ava { background:linear-gradient(135deg,var(--primary),var(--primary-400)); } .bubble { background:var(--surface-2); border:1px solid var(--border); border-radius:14px 14px 14px 4px; padding:14px 16px; font-size:14px; line-height:1.6; } .bubble p { margin:0 0 10px; } .bubble p:last-child { margin-bottom:0; } .bubble ul { margin:4px 0 10px; padding-left:18px; } .bubble li { margin:3px 0; } .ai-refs { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; } .ai-ref { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; color:var(--primary); background:var(--primary-50); padding:4px 10px; border-radius:var(--r-pill); } .ai-ref svg { width:12px; height:12px; } .ai-reco { background:var(--success-50); border:1px solid #BBF7D0; border-radius:var(--r-md); padding:12px 14px; margin-top:12px; } .ai-reco .h { display:flex; align-items:center; gap:7px; font-weight:800; color:var(--success); font-size:12.5px; margin-bottom:6px; } .ai-mini-chart { margin-top:12px; border:1px solid var(--border); border-radius:var(--r-md); padding:12px; background:#fff; height:200px; position:relative; } .ai-input-bar { border-top:1px solid var(--border); padding:14px 16px; display:flex; gap:10px; align-items:flex-end; background:var(--surface); } .ai-input-bar textarea { flex:1; border:1px solid var(--border-strong); border-radius:var(--r-md); padding:11px 14px; font-size:14px; resize:none; max-height:120px; font-family:inherit; line-height:1.5; } .ai-input-bar textarea:focus { outline:none; border-color:var(--primary-400); box-shadow:0 0 0 3px var(--primary-50); } .ai-send { width:44px; height:44px; border-radius:var(--r-md); background:var(--primary); color:#fff; display:grid; place-items:center; border:none; flex:none; transition: all var(--fast); } .ai-send:hover { background:var(--primary-600); transform:translateY(-1px); } .ai-side { display:flex; flex-direction:column; gap:14px; overflow-y:auto; } .suggest { text-align:left; width:100%; padding:12px 14px; border:1px solid var(--border); background:#fff; border-radius:var(--r-md); font-size:12.5px; font-weight:600; color:var(--text-soft); transition: all var(--fast); line-height:1.45; display:flex; gap:9px; align-items:flex-start; } .suggest:hover { border-color:var(--primary-400); background:var(--primary-50); color:var(--primary); transform:translateX(2px); } .suggest svg { width:15px; height:15px; flex:none; margin-top:1px; color:var(--primary); } .typing { display:inline-flex; gap:4px; align-items:center; padding:4px 0; } .typing i { width:7px; height:7px; border-radius:50%; background:var(--text-muted); animation: blink 1.2s infinite; } .typing i:nth-child(2){ animation-delay:.2s; } .typing i:nth-child(3){ animation-delay:.4s; } /* ---------- Misc ---------- */ .tag-soft { font-size:11px; font-weight:700; color:var(--text-soft); background:var(--surface-2); border:1px solid var(--border); padding:2px 9px; border-radius:var(--r-pill); } .legend { display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--text-soft); font-weight:600; } .legend span { display:flex; align-items:center; gap:6px; } .empty { text-align:center; padding:48px 20px; color:var(--text-muted); } .empty svg { width:42px; height:42px; margin-bottom:10px; opacity:.5; } .mini-trend { width:64px; height:28px; } .divider-h { height:1px; background:var(--border); margin:20px 0; border:none; } .kbd { font-size:11px; font-weight:700; color:var(--text-muted); background:var(--surface-2); border:1px solid var(--border); border-bottom-width:2px; padding:1px 6px; border-radius:6px; } .toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); z-index:200; background:#0F172A; color:#fff; padding:12px 18px; border-radius:var(--r-md); box-shadow:var(--shadow-pop); display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:600; opacity:0; pointer-events:none; transition: opacity var(--med) var(--ease), transform var(--med) var(--ease); } .toast.show { opacity:1; transform:translateX(-50%) translateY(0); } .toast svg { width:18px; height:18px; color:var(--success); } .scrim { position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:38; opacity:0; pointer-events:none; transition:opacity var(--med); } .scrim.show { opacity:1; pointer-events:auto; } /* ---------- Animations ---------- */ @keyframes fade { from { opacity:0; } to { opacity:1; } } @keyframes rise { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform:none; } } @keyframes blink { 0%,60%,100%{ opacity:.25; transform:translateY(0);} 30%{ opacity:1; transform:translateY(-3px);} } .stagger > * { animation: rise var(--med) var(--ease) both; } .stagger > *:nth-child(1){ animation-delay:.02s; } .stagger > *:nth-child(2){ animation-delay:.06s; } .stagger > *:nth-child(3){ animation-delay:.10s; } .stagger > *:nth-child(4){ animation-delay:.14s; } .stagger > *:nth-child(5){ animation-delay:.18s; } .stagger > *:nth-child(6){ animation-delay:.22s; } .stagger > *:nth-child(7){ animation-delay:.26s; } .stagger > *:nth-child(8){ animation-delay:.30s; } /* ---------- Responsive ---------- */ @media (max-width: 1200px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } .doc-grid { grid-template-columns: repeat(3, 1fr); } .proj-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 1024px) { :root { --sidebar-w: 240px; } .ai-layout { grid-template-columns: 1fr; height:auto; } .ai-side { flex-direction:row; overflow-x:auto; } .ai-side .panel { min-width:260px; } } @media (max-width: 880px) { .app { grid-template-columns: 1fr; } .sidebar { position:fixed; top:0; left:0; width:280px; transform:translateX(-100%); box-shadow:var(--shadow-pop); } .sidebar.open { transform:translateX(0); } .menu-toggle { display:grid; } .cols-2, .cols-3, .proj-grid, .doc-grid { grid-template-columns: 1fr; } .search-top input { width:160px; } .search-top input:focus { width:200px; } .login-wrap { grid-template-columns: 1fr; } .login-aside { display:none; } } @media (max-width: 560px) { .kpi-grid { grid-template-columns: 1fr; } .content { padding:18px 16px 40px; } .topbar { padding:0 14px; } .pc-stats { grid-template-columns:1fr 1fr; } } /* ---------- Responsive hardening ---------- */ html, body { overflow-x: hidden; } .app, .main, .content, .panel, .panel-body, .table-wrap, .chart-box, .ai-chat, .ai-stream, .ai-side { min-width: 0; } .content { box-sizing: border-box; } .page-head > div:first-child, .panel-head > div:first-child, .proj-card, .doc-card, .kpi { min-width: 0; } .page-head h1, .page-head .desc, .panel-head h3, .panel-head .h-sub, .proj-card .pc-name, .doc-card .nm, .kpi .label, .kpi .val { overflow-wrap: anywhere; } .head-actions, .panel-head { flex-wrap: wrap; } .head-actions { justify-content: flex-end; } .table-wrap { max-width: 100%; -webkit-overflow-scrolling: touch; overscroll-behavior-inline: contain; } .panel-body { overflow-x: auto; -webkit-overflow-scrolling: touch; } table.tbl { min-width: 720px; } .chart-box { height: clamp(220px, 28vw, 320px); } .chart-box.sm { height: clamp(190px, 24vw, 240px); } .chart-box.lg { height: clamp(250px, 32vw, 360px); } .filters { align-items: stretch; } .filter { min-width: min(180px, 100%); } .filter select, .filter input, .input { max-width: 100%; } .filter select, .filter input { width: 100%; min-width: 0; } @media (min-width: 1201px) { .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .proj-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .doc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 1180px) { .content { padding: 24px 22px 44px; } .kpi-grid, .cols-3, .doc-grid, .proj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .topbar { gap: 10px; } .search-top input { width: 190px; } .search-top input:focus { width: 230px; } } @media (max-width: 900px) { .app { grid-template-columns: 1fr; } .sidebar { position: fixed; inset: 0 auto 0 0; width: min(82vw, 300px); height: 100dvh; transform: translateX(-104%); } .sidebar.open { transform: translateX(0); } .menu-toggle { display: grid; flex: none; } .topbar { padding: 0 16px; gap: 8px; } .crumbs { min-width: 0; max-width: 34vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .search-top { flex: 1; min-width: 120px; margin-left: 0; } .search-top input, .search-top input:focus { width: 100%; } .content { max-width: none; padding: 20px 18px 40px; } .page-head { align-items: flex-start; } .head-actions { justify-content: flex-start; width: 100%; } .cols-2, .cols-3, .proj-grid, .doc-grid { grid-template-columns: 1fr; } .filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .filter { min-width: 0; } .ai-layout { grid-template-columns: 1fr; height: auto; min-height: 0; } .ai-side { flex-direction: row; overflow-x: auto; padding-bottom: 2px; } .ai-side .panel { min-width: min(280px, 86vw); } .fco-modal { width: min(96vw, 900px) !important; max-height: calc(100dvh - 28px) !important; } } @media (max-width: 640px) { :root { --topbar-h: auto; } .topbar { min-height: 58px; height: auto; padding: 10px 12px; flex-wrap: wrap; align-items: center; align-content: center; gap: 8px; } .menu-toggle, .fip-lang-pill, #fipTheme, .topbar > .icon-btn:not(.menu-toggle) { order: 1; } .topbar .fip-data-chip { display: none !important; } .topbar > div:has(#fipRefresh) { display: none !important; } .crumbs { order: 2; flex: 1 1 100%; max-width: none; font-size: 12px; } .search-top { order: 3; flex-basis: 100%; } .topbar > .icon-btn:not(.menu-toggle) { width: 36px; height: 36px; } .content { padding: 16px 12px 34px; } .page-head { gap: 12px; margin-bottom: 16px; } .page-head h1 { font-size: 21px; line-height: 1.2; } .page-head .desc { font-size: 12.5px; } .head-actions .btn, .head-actions .badge { max-width: 100%; } .grid, .kpi-grid, .cols-2, .cols-3 { gap: 12px; } .kpi-grid { grid-template-columns: 1fr; } .kpi { padding: 14px; border-radius: var(--r-md); } .kpi .val { font-size: 23px; } .panel { border-radius: var(--r-md); } .panel-head, .panel-body { padding: 14px; } .chart-box { height: 220px; } .chart-box.sm { height: 190px; } .filters { grid-template-columns: 1fr; gap: 8px; } .btn { width: auto; max-width: 100%; min-height: 40px; height: auto; padding-block: 9px; white-space: normal; justify-content: center; } .btn-sm { min-height: 34px; padding-block: 7px; } .tabs { margin-left: -12px; margin-right: -12px; padding: 0 12px; } .tab { padding: 10px 12px; } .ai-input-bar { align-items: stretch; padding: 12px; } .ai-input-bar textarea { min-height: 44px; } .ai-side { flex-direction: column; overflow-x: visible; } .ai-side .panel { min-width: 0; width: 100%; } .fco-overlay { align-items: stretch !important; padding: 8px !important; } .fco-modal { width: 100% !important; max-height: calc(100dvh - 16px) !important; border-radius: 12px !important; } .fco-head, .fco-body { padding: 14px !important; } .kxd { width: 100vw !important; } .toast { left: 12px; right: 12px; bottom: 14px; width: auto; justify-content: center; transform: translateY(20px); } .toast.show { transform: translateY(0); } } @media (max-width: 420px) { body { font-size: 13px; } .content { padding-inline: 10px; } .sidebar { width: min(88vw, 292px); } .pc-stats { grid-template-columns: 1fr; } .pc-foot { align-items: stretch; flex-direction: column; } .doc-card, .proj-card { padding: 14px; } .badge { font-size: 10.5px; } table.tbl { min-width: 680px; font-size: 12px; } } /* KPI analytics styles are injected from app.js, so responsive overrides need higher weight. */ @media (max-width: 900px) { .kx .kx-toolbar { position: static !important; align-items: stretch !important; } .kx .kx-toolbar .filters { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: 100% !important; } .kx #kCards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .kx .kx-exec-grid { grid-template-columns: 1fr !important; } .kx .kx-exec-main { align-items: flex-start !important; } .kx .kx-viewbar { align-items: stretch !important; } .kx .kx-views { width: 100% !important; overflow-x: auto !important; } .kx .kx-view-btn { flex: 1 0 auto !important; } } @media (max-width: 640px) { .kx .kx-toolbar .filters { grid-template-columns: 1fr !important; } .kx #kCards { grid-template-columns: 1fr !important; } .kx .kx-exec { padding: 16px !important; } .kx .kx-exec-main { flex-direction: column !important; gap: 14px !important; text-align: left !important; } .kx .kx-stat-row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: 100% !important; } .kx .kx-stat, .kx .kx-exec-meta { min-width: 0 !important; } .kx .kx-kpi-card { padding: 14px !important; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }