:root { --color-bear: #d85a55; /* DESIGN TOKENS, SCREENERS, Header (multi) — main bear (palette: bearishColors[1]) */ --color-bear-bright: #c52f2c; /* DESIGN TOKENS, PORTFOLIO, See-all modal (multi) — strong-bear (bearishColors[2]) */ --color-bear-soft: #e57373; /* LAYOUT, Market Sentiment, STATS CARDS (multi) — soft-bear (bearishColors[0]) */ --color-bear-strong: #b71c1c; /* Table, PROFILE PAGE — dashboard-style card chrome… (bearishColors[3]) */ --color-black: #000000; /* Chart - Fully Responsive, SCREENERS, WEIGHTINGS (multi) */ --color-border: #e5e7eb; /* SCREENERS, STATS CARDS, Market Risk Dashboard (multi) */ --color-border-card: #e6e8ef; /* DASHBOARD, Market Sentiment, Filters Drawer (unused) (multi) */ --color-border-soft: #e2e8f0; /* See-all modal, Weightings page, Modern segmented market-type toggle (multi) */ --color-border-strong: #cbd5e1; /* See-all modal, Modern segmented market-type toggle, Weightings page (multi) */ --color-brand-primary: #0b28bf; /* LAYOUT, PORTFOLIO, Buckets (Buttons) - Responsive & Wrap (multi) */ --color-brand-primary-hover: #091fa0; /* Weightings page */ --color-brand-tint-bg: #eef2ff; /* Country dropdown — glassy chip with accent stripe, Filters Drawer (unused)… */ --color-bull: #5dd68a; /* Header, SCREENERS, DESIGN TOKENS (multi) — main bull (bullishColors[1]) */ --color-bull-bright: #2cc56f; /* DESIGN TOKENS, PORTFOLIO, See-all modal (multi) — strong-bull (bullishColors[2]) */ --color-bull-soft: #a5d6a7; /* LAYOUT, WEIGHTINGS, Market Sentiment (multi) — soft-bull (bullishColors[0]) */ --color-surface-soft: #f8fafc; /* See-all modal, Weightings page, DASHBOARD (multi) */ --color-surface-softer: #f1f5f9; /* Market Sentiment, DASHBOARD, Table body (multi) */ --color-text: #1e293b; /* Detail page, See-all modal, Market risk page */ --color-text-faint: #94a3b8; /* Modern segmented market-type toggle, DASHBOARD… */ --color-text-muted: #475569; /* Filters Drawer (unused), DASHBOARD, Market Sentiment (multi) */ --color-text-muted-strong: #334155; /* Modern segmented market-type toggle, See-all modal, Weightings page (multi) */ --color-text-strong: #0f172a; /* See-all modal, DASHBOARD, Weightings page (multi) */ --color-text-subtle: #64748b; /* See-all modal, DASHBOARD, Table (multi) */ --color-white: #ffffff; /* LAYOUT, DASHBOARD, WEIGHTINGS (multi) */ --color-c-ffffff-a06: rgba(255, 255, 255, 0.06); /* Navigation borders / Header (responsive) */ --color-c-ffffff-a30: rgba(255, 255, 255, 0.3); /* Navigation borders / Header (responsive) */ --color-c-ffffff-a37: rgba(255, 255, 255, 0.37); /* Navigation borders / Header (responsive) */ --color-shadow: rgba(0, 0, 0, 0.1); /* PORTFOLIO, LAYOUT, Chart - Fully Responsive (multi) */ --color-c-0047ff: #0047ff; /* LAYOUT, PORTFOLIO, Market Risk Dashboard */ --color-azure-tint: rgba(0, 71, 255, 0.23); /* LAYOUT */ --color-c-052e16: #0b6623; /* SECTOR HEATMAP — bullishColors[4] (deepest accent) */ --color-c-0a0a14-a30: rgba(10, 10, 20, 0.3); /* PORTFOLIO */ --color-brand-tint: rgba(11, 40, 191, 0.1); /* See-all modal, DASHBOARD… */ --color-c-0d6efd: #0d6efd; /* Triple toggle switch */ --color-ink-tint: rgba(15, 23, 42, 0.04); /* DASHBOARD, Modern segmented market-type toggle… */ --color-c-101c5b: #101c5b; /* DASHBOARD */ --color-c-10246b: #10246b; /* DESIGN TOKENS, REGIME CARD */ --color-c-10246b-a25: rgba(16, 36, 107, 0.25); /* REGIME CARD */ --color-c-111111: #111111; /* Market Risk Dashboard */ --color-c-111827: #111827; /* STATS CARDS, DESIGN TOKENS */ --color-c-153e90: #153e90; /* LAYOUT */ --color-c-15803d: #1b9e4b; /* Table body, Modern segmented market-type toggle, Weightings page — bullishColors[3] (dark accent) */ --color-c-1628a0: #1628a0; /* DESIGN TOKENS */ --color-bull-tint: rgba(93, 214, 138, 0.16); /* Header, Table body — derived from --color-bull */ --color-c-1a1a1a: #1a1a1a; /* PORTFOLIO, search-data.mobile-active */ --color-c-1a2363: #1a2363; /* DASHBOARD */ --color-c-1a3bea: #1a3bea; /* Icon buttons, Hero / avatar, Filled buttons */ --color-c-1d4ed8: #1d4ed8; /* BADGES — Trading State Pills */ --color-c-1e33c9: #1e33c9; /* DESIGN TOKENS, REGIME CARD, EXPOSURE PANEL — bar visualisation (multi) */ --color-brand-deep-tint: rgba(30, 51, 201, 0.12); /* DESIGN TOKENS, FILTERS BAR */ --color-c-1f2937: #1f2937; /* DASHBOARD, Table body, Filters CTA — clean on-theme pill */ --color-c-222222: #222222; /* Triple toggle switch */ --color-c-223ed3: #223ed3; /* LAYOUT, WEIGHTINGS, SCREENERS (multi) */ --color-bull-bright-tint: rgba(44, 197, 111, 0.12); /* Table body, DETAIL DRAWER, Detail page (multi) — derived from --color-bull-bright */ --color-c-2563eb: #2563eb; /* DESIGN TOKENS, PORTFOLIO, Sidebar (multi) */ --color-blue-tint: rgba(37, 99, 235, 0.12); /* HEADER + MARKET RIBBON, DETAIL DRAWER, AI ASSISTANT PANEL (multi) */ --color-c-2739bb: #2739bb; /* DASHBOARD */ --color-c-2a2726: #2a2726; /* LAYOUT, WEIGHTINGS, SCREENERS (multi) */ --color-c-2a2726-a30: rgba(42, 39, 38, 0.3); /* PORTFOLIO, LAYOUT */ --color-bull-soft-tint: rgba(165, 214, 167, 0.2); /* WEIGHTINGS, LAYOUT — derived from --color-bull-soft */ --color-c-2d3748: #2d3748; /* LAYOUT */ --color-c-2d3b55: #2d3b55; /* LAYOUT */ --color-c-2f44b3: #2f44b3; /* WEIGHTINGS */ --color-c-324bc9: #324bc9; /* WEIGHTINGS */ --color-c-32c773-a88: rgba(44, 197, 111, 0.88); /* WEIGHTINGS — derived from bullishColors[2] (#2cc56f) */ --color-c-333333: #333333; /* LAYOUT */ --color-c-36d399-a10: rgba(93, 214, 138, 0.1); /* LAYOUT, SCREENERS, WEIGHTINGS — derived from bullishColors[1] (#5dd68a) */ --color-c-3b3b3b: #3b3b3b; /* DESIGN TOKENS */ --color-c-3b50d6: #3b50d6; /* Weightings page */ --color-c-3b82f6: #3b82f6; /* Detail page, See-all modal */ --color-sky-tint: rgba(59, 130, 246, 0.25); /* See-all modal */ --color-c-444444: #444444; /* SCREENERS, PORTFOLIO */ --color-c-495057: #495057; /* PORTFOLIO */ --color-c-4a4a4a: #4a4a4a; /* LAYOUT, PORTFOLIO */ --color-c-4b5563: #4b5563; /* STATS CARDS */ --color-purple-deep-tint: rgba(76, 29, 149, 0.28); /* DASHBOARD */ --color-c-4f46e5: #4f46e5; /* Country dropdown — glassy chip with accent stripe… */ --color-c-535353: #535353; /* LAYOUT, WEIGHTINGS, SCREENERS (multi) */ --color-c-535353-a05: rgba(83, 83, 83, 0.05); /* dividend-share background (responsive) */ --color-gray-tint: rgba(83, 83, 83, 0.2); /* LAYOUT, SCREENERS, WEIGHTINGS (multi) */ --color-c-5b5b5b: #5b5b5b; /* DESIGN TOKENS */ --color-c-60a5fa: #60a5fa; /* Sidebar */ --color-c-627eea: #627eea; /* PORTFOLIO */ --color-c-6366f1: #6366f1; /* Market Sentiment, DASHBOARD, SCREENERS — Results Table (multi) */ --color-indigo-tint: rgba(99, 102, 241, 0.18); /* DASHBOARD */ --color-slate-tint: rgba(100, 116, 139, 0.12); /* DASHBOARD, Table body */ --color-c-6b7280: #6b7280; /* STATS CARDS, Market Risk Dashboard, Market Sentiment (multi) */ --color-c-6c757d: #6c757d; /* PORTFOLIO */ --color-c-6c7a91: #6c7a91; /* SCREENERS */ --color-c-6c7b8b: #6c7b8b; /* LAYOUT */ --color-c-757575: #757575; /* LAYOUT */ --color-c-77777f: #77777f; /* LAYOUT, PORTFOLIO */ --color-c-7e22ce: #7e22ce; /* INFO CARDS — Signals */ --color-c-7c3aed: #7c3aed; /* BADGES — Trading State Pills */ --color-c-7f1d1d: #7f0000; /* SECTOR HEATMAP, BADGES — Trading State Pills, DATA TABLE — Ranked Opportunities — bearishColors[4] (deepest accent) */ --color-c-7f1d1d-a12: rgba(127, 0, 0, 0.12); /* BADGES — Trading State Pills — derived from bearishColors[4] */ --color-c-86efac-a40: rgba(165, 214, 167, 0.4); /* DASHBOARD — derived from bullishColors[0] (#a5d6a7) */ --color-c-8b5cf6: #8b5cf6; /* Hero / avatar */ --color-c-8f8f8f: #8f8f8f; /* PORTFOLIO */ --color-c-999999: #999999; /* SCREENERS, Alert notifications */ --color-c-eab308: #eab308; /* BADGES — Trading State Pills — palette neutral (yellow) */ --color-c-9aa4b2: #9aa4b2; /* WEIGHTINGS */ --color-c-9ca3af: #9ca3af; /* WEIGHTINGS, STATS CARDS, DESIGN TOKENS */ --color-c-a5b4fc: #a5b4fc; /* Body */ --color-violet-tint: rgba(167, 139, 250, 0.25); /* DASHBOARD */ --color-c-a855f7: #a855f7; /* DATA TABLE — Ranked Opportunities */ --color-purple-tint: rgba(168, 85, 247, 0.5); /* BADGES — Trading State Pills */ --color-c-ababab: #ababab; /* PORTFOLIO */ --color-c-adaeb5: #adaeb5; /* PORTFOLIO, LAYOUT, search-data.mobile-active */ --color-c-adb5bd: #adb5bd; /* PORTFOLIO, Buckets (Buttons) - Responsive & Wrap */ --color-c-b3b3b3: #b3b3b3; /* SCREENERS */ --color-c-bababa-a15: rgba(186, 186, 186, 0.15); /* LAYOUT */ --color-c-bbf7d0: #bbf7d0; /* Header, SECTOR HEATMAP */ --color-c-bdbdbd: #bdbdbd; /* LAYOUT, PORTFOLIO */ --color-c-bfdbfe: #bfdbfe; /* Header */ --color-bear-soft-tint: rgba(229, 115, 115, 0.2); /* Market Sentiment, Alert notifications — derived from --color-bear-soft */ --color-c-c7c7c7-a18: rgba(199, 199, 199, 0.18); /* WEIGHTINGS */ --color-c-c7d2fe: #c7d2fe; /* Body, DASHBOARD, Country dropdown — glassy chip with accent stripe (multi) */ --color-c-cccccc: #cccccc; /* WEIGHTINGS */ --color-c-cfd5ff: #cfd5ff; /* SCREENERS — Results Table */ --color-c-d1d5db: #d1d5db; /* SCREENERS */ --color-c-d4d4f5: #d4d4f5; /* DASHBOARD */ --color-c-d4d9e3: #d4d9e3; /* Market risk page, Weightings page */ --color-c-d6d6d6: #d6d6d6; /* LAYOUT, STATS CARDS, PORTFOLIO (multi) */ --color-c-d6d6d6-a25: rgba(214, 214, 214, 0.25); /* LAYOUT */ --color-c-d6dbeb: #d6dbeb; /* SCREENERS, DASHBOARD */ --color-c-d7dfea: #d7dfea; /* LAYOUT, WEIGHTINGS */ --color-c-dbe3ff: #dbe3ff; /* DASHBOARD, Field row */ --color-c-dbeafe: #dbeafe; /* Header */ --color-bear-tint: rgba(216, 90, 85, 0.1); /* BADGES — Trading State Pills, SCREENERS, Table body (multi) — derived from --color-bear */ --color-c-dc2828-a13: rgba(197, 47, 44, 0.13); /* SCREENERS — derived from bearishColors[2] (#c52f2c) */ --color-c-dcfce7: #dcfce7; /* Header, DESIGN TOKENS, SECTOR HEATMAP */ --color-c-dddddd: #dddddd; /* LAYOUT, PORTFOLIO, Score chart, profile image, chart wrappers (multi) */ --color-divider: rgba(221, 221, 221, 0.54); /* WEIGHTINGS */ --color-c-dde3ff: #dde3ff; /* Table body, Pagination, Filters Drawer (unused) */ --color-c-dee2e6: #dee2e6; /* WEIGHTINGS, PORTFOLIO */ --color-c-dfdfdf: #dfdfdf; /* WEIGHTINGS */ --color-c-e0e7ff: #e0e7ff; /* DASHBOARD, Country dropdown — glassy chip with accent stripe… */ --color-c-e2e6f3: #e2e6f3; /* Country dropdown — glassy chip with accent stripe, Filters CTA — clean on-theme pill */ --color-c-e5e5e5: #e5e5e5; /* LAYOUT */ --color-c-e7ebf3: #e7ebf3; /* Market Risk Dashboard */ --color-c-e7f6ef: #e7f6ef; /* SCREENERS */ --color-c-e9ecef: #e9ecef; /* PORTFOLIO */ --color-c-e9edf3: #e9edf3; /* LAYOUT */ --color-c-ea580c-a12: rgba(234, 179, 8, 0.12); /* BADGES — Trading State Pills — palette neutral (yellow) tint */ --color-c-eab308-a18: rgba(234, 179, 8, 0.18); /* DASHBOARD, Market risk page */ --color-c-ec4899-a16: rgba(236, 72, 153, 0.16); /* Hero / avatar */ --color-c-ede9fe: #ede9fe; /* Hero / avatar, Field row */ --color-c-edf0f5: #edf0f5; /* SCREENERS */ --color-c-eeeeee: #eeeeee; /* SCREENERS */ --color-c-eef0f4: #eef0f4; /* Market Sentiment, Global Market Bar (unused), SCREENERS */ --color-c-eef2f7: #eef2f7; /* Detail page, Weightings page, Loading skeletons for identity header (multi) */ --color-bear-bright-tint: rgba(197, 47, 44, 0.12); /* Detail page, Market risk page, Weightings page — derived from --color-bear-bright */ --color-c-eff6ff: #eff6ff; /* Header, Filters Drawer (unused) */ --color-c-f0fdf4: #f0fdf4; /* Header */ --color-c-f1f3fb: #f1f3fb; /* Segment tabs — underline-indicator style */ --color-surface-mute: rgba(243, 243, 243, 0.5); /* WEIGHTINGS, SCREENERS */ --color-c-f3f4f6: #f3f4f6; /* STATS CARDS */ --color-c-f3f5f9: #f3f5f9; /* Market Risk Dashboard */ --color-c-f4f6ff: #f4f6ff; /* Country dropdown — glassy chip with accent stripe */ --color-c-f4f7ff: #f4f7ff; /* PORTFOLIO */ --color-c-f4fcf8: #f4fcf8; /* Table, WEIGHTINGS */ --color-amber-tint: rgba(234, 179, 8, 0.22); /* Weightings page — palette neutral (yellow) tint */ --color-c-f5f5f5: #f5f5f5; /* SCREENERS, LAYOUT */ --color-c-f5f7fb: #f5f7fb; /* DESIGN TOKENS */ --color-c-f7f3e8: #f7f3e8; /* SCREENERS */ --color-c-f7f9fc: #f7f9fc; /* SCREENERS */ --color-c-f87171-a45: rgba(229, 115, 115, 0.45); /* DASHBOARD — derived from bearishColors[0] */ --color-c-f8f9fa: #f8f9fa; /* PORTFOLIO, Buckets (Buttons) - Responsive & Wrap, Alert notifications */ --color-c-f8faff: #f8faff; /* Global Market Bar (unused), Country dropdown — glassy chip with accent stripe… */ --color-orange-tint: rgba(234, 179, 8, 0.3); /* BADGES — Trading State Pills, REGIME CARD — palette neutral (yellow) tint */ --color-c-facc15-a45: rgba(234, 179, 8, 0.45); /* DASHBOARD — palette neutral (yellow) tint */ --color-c-fafbfc: #fafbfc; /* Market Risk Dashboard */ --color-c-fafbff: #fafbff; /* Body, Pagination, Filters CTA — clean on-theme pill (multi) */ --color-c-fbfcfe: #fbfcfe; /* Weightings page */ --color-c-fcebea: #fcebea; /* SCREENERS */ --color-c-fecaca: #fecaca; /* Table, Header, SECTOR HEATMAP (multi) */ --color-c-fee2e2: #fee2e2; /* Header, DESIGN TOKENS, SECTOR HEATMAP (multi) */ --color-c-fef2f2: #fef2f2; /* Table, DASHBOARD, Header (multi) */ --color-c-fff1f2: #fff1f2; /* PROFILE PAGE — dashboard-style card chrome */ --color-highlight: rgba(255, 255, 255, 0.18); /* DASHBOARD, Sidebar, REGIME CARD (multi) */ } /* ============================================================ 1. RESET, BASE TYPOGRAPHY, BODY FONT-FAMILY ============================================================ */ html { min-height: 100%; } body { padding: 0px; margin: 0px; font-family: "Figtree", sans-serif; /* background: var(--color-surface-soft); */ background: var(--color-white); } a { text-decoration: none; } body { display: flex; flex-direction: column; min-height: 100vh; min-height: -webkit-fill-available; min-height: 100dvh; } .main, body > main, body > section, .marketrisk-page, .screener, .portfolio-alocation, .long-postion { flex: 1 0 auto; } /* ============================================================ 2. FONT CONFIGURATION (Figtree loaded via layout.tsx) ============================================================ */ /* ============================================================ TOC 3. SHARED / LAYOUT (and AUTH login styles) Large block of base layout: form/input defaults, login-page structure (section.login, .login-from, .login-input), cards, buttons, header chrome, dropdowns, sliders, range inputs. Auth login/signup screens use these directly (no separate AUTH section exists in the original plu-design CSS). ============================================================ */ input::-ms-reveal, input::-ms-clear { display: none; } input::placeholder { font-family: "Figtree", sans-serif; } input::-moz-placeholder { font-family: "Figtree", sans-serif; } input[type="search"] { font-family: "Figtree", sans-serif; } input::placeholder, textarea::placeholder, select::placeholder, input::-webkit-input-placeholder, textarea::-webkit-input-placeholder, input::-moz-placeholder, textarea::-moz-placeholder, input:-ms-input-placeholder, textarea:-ms-input-placeholder, input::-ms-input-placeholder, textarea::-ms-input-placeholder, select:invalid { color: var(--color-text-faint); opacity: 1; } section.login { width: 100%; display: flex; align-items: center; height: 100%; } .login-right { display: flex; align-items: center; height: 100vh; height: 100dvh; flex-direction: column; width: 50%; justify-content: center; } .login-from h2 { font-weight: 200; font-size: 34px; line-height: 130%; letter-spacing: 0%; color: var(--color-c-2a2726); text-align: start; font-family: "Figtree", sans-serif; margin-bottom: 10px; } .login-from p { color: var(--color-c-535353); font-size: 18px; font-weight: 400; line-height: 140%; margin-bottom: 30px; } .login-input { position: relative; margin-bottom: 20px; overflow: hidden; } .login-input input { width: 100%; max-width: 100%; box-sizing: border-box; -webkit-appearance: textfield; appearance: textfield; border: solid 1px var(--color-gray-tint); border-radius: 5px; padding: 12px 10px; background: var(--color-white); transition: 0.2s ease-in all; font-size: 16px; color: var(--color-c-535353); } .login-input input::placeholder { font-size: 16px; color: var(--color-text-faint); opacity: 1; } .login-input label { color: var(--color-c-2a2726); font-size: 16px; font-weight: 400; line-height: 140%; margin-bottom: 4px; } .login-input input:focus { border-color: var(--color-brand-primary); outline: none; } .login-from button { background: var(--color-brand-primary); height: 45px; color: var(--color-white); font-weight: 700; font-size: 18px; line-height: 140%; letter-spacing: 0%; text-align: center; border: none; width: 100%; border-radius: 5px; margin: 25px 0px; transition: 0.3s ease-in all; } .login-from button:hover:not(:disabled) { background: var(--color-c-223ed3); } .login-from button:disabled { opacity: 0.5; cursor: not-allowed; } .account { display: flex; justify-content: center; align-items: center; } .account p { color: var(--color-c-535353); font-size: 16px; font-weight: 400; line-height: 140%; margin-bottom: 0px; } .account p a { color: var(--color-c-2a2726); font-weight: 600; text-underline-offset: 5px; text-decoration: underline; } .login-input .password-field { position: relative; } .login-input .password-field input.eye { padding-right: 40px; } .login-input .password-toggle-btn { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); cursor: pointer; user-select: none; z-index: 1; } .login-input .required-marker { position: static; margin-left: -2px; font-size: inherit; line-height: inherit; vertical-align: baseline; } .login-input span:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 2px; border-radius: 4px; } .login-from { width: 350px; } .login-left { background-color: var(--color-brand-primary); width: 50%; height: 100vh; height: 100dvh; padding: 25px; position: relative; } .logo { margin-bottom: 173px; z-index: 9999; position: relative; } .logo img { max-width: 200px; } .login-left h1 { color: var(--color-white); font-weight: 200; font-size: 52px; line-height: 130%; padding-left: 44px; position: relative; z-index: 999; font-family: "Figtree", sans-serif; } .login-left:after { background: url(../img/bg-vector.png) no-repeat; height: 100%; width: 100%; content: ""; position: absolute; top: 0px; left: 0px; background-size: cover; } .toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; -webkit-user-select: none; user-select: none; } .toggle input { display: none; } .slider { position: relative; width: 40px; height: 20px; background-color: var(--color-gray-tint); border-radius: 20px; transition: 0.3s ease; } .slider::before { content: ""; position: absolute; height: 14px; width: 14px; left: 3px; top: 3px; background-color: white; border-radius: 50%; transition: 0.3s ease; box-shadow: 0 1px 3px var(--color-shadow); } input:checked + .slider { background-color: var(--color-c-0047ff); } input:checked + .slider::before { transform: translateX(20px); } .toggle-text { font-size: 14px; color: var(--color-c-2d3748); font-weight: 400; line-height: 150%; } .signup:after { background: url(../img/singup-bg.png) no-repeat; height: 100%; width: 100%; content: ""; position: absolute; top: 0px; left: 0px; background-size: cover; } .header { background: linear-gradient(135deg, #0b28bf 0%, #1530c7 50%, #0b28bf 100%); box-shadow: none; padding: 16px 0px; border-bottom: 1px solid var(--color-c-2a2726-a30); position: relative; z-index: 1080 !important; isolation: isolate; } .header .navbar-brand img { height: 41px; } .header .navbar-collapse { justify-content: end; } .header .navbar-expand-lg .navbar-nav .nav-link { padding: 0px 10px; font-family: "Figtree", sans-serif; color: var(--color-white); font-size: 16px; font-weight: 500; } .header input { border: 1px solid var(--color-shadow); background: var(--color-white); border-radius: 8px; padding: 10px 16px; min-width: 260px; transition: all 0.2s ease; } .header input:focus { border-color: var(--color-brand-primary); box-shadow: 0 0 0 3px var(--color-brand-tint); outline: none; } .header input::placeholder { font-weight: 200; font-size: 16px; line-height: 1.3; letter-spacing: 0%; font-family: "Figtree", sans-serif; color: var(--color-text-faint); opacity: 1; } .header .navbar-nav { margin-right: 20px; } .search-data { display: flex; align-items: center; position: relative; } /* Hide native browser clear button in Chrome/Safari/Edge */ .search-data input[type="search"]::-webkit-search-cancel-button { appearance: none; -webkit-appearance: none; -moz-appearance: none; } /* Hide in IE/Edge legacy */ .search-data input[type="search"]::-ms-clear { display: none; } .search-data > span { position: absolute; right: 6px; color: var(--color-c-bdbdbd); } .profile-dropdown .profile-btn { display: flex; align-items: center; gap: 12px; border-radius: 4px; border: none !important; padding: 0px; } .profile-dropdown .profile-img { width: 35px; height: 35px; border-radius: 50%; object-fit: cover; border: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75), 0 0 0 4px rgba(255, 255, 255, 0.18); } .profile-dropdown .profile-name { font-size: 14px; font-weight: 400; color: var(--color-white); line-height: 20px; } .profile-dropdown .dropdown-item:hover { background-color: var(--color-c-f5f5f5); } .profile-dropdown .profile-btn:focus { outline: none; box-shadow: none; border: 0; } .profile-dropdown .profile-btn:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 2px; } .profile-dropdown .btn.show, .profile-dropdown .btn:active, .profile-dropdown .btn:focus { border: none; box-shadow: none; } .profile-dropdown .dropdown-menu a { padding: 10px 15px; border-bottom: solid 1px var(--color-c-dddddd); transition: 0.3s ease-in-out; font-size: 15px; font-weight: 500; color: var(--color-c-77777f); line-height: 14px; } .profile-dropdown .dropdown-menu a:last-child { border-bottom: none; } .profile-dropdown .dropdown-menu a:hover { background: var(--color-brand-primary); color: var(--color-white); } .current { text-decoration: underline; text-underline-offset: 6px; color: var(--color-white); } .dropdown-users { display: flex; align-items: center; column-gap: 24px; } .notifications { margin: 0px 20px; z-index: 1000; } .notifications img { width: 20px; } .marketing-sector { margin: 0px 0px 0px; padding-top: 18px; } /* ── Speedometer ─────────────────────────────────────── */ .speedometer-container { width: 100%; display: flex; flex-direction: column; align-items: center; } .speedometer-svg { display: block; width: 100%; height: auto; /* let the viewBox aspect-ratio drive height */ overflow: visible; } .speedometer-score { text-align: center; font-size: 13px; font-weight: 500; margin-top: 4px; letter-spacing: 0.5px; } /* ─────────────────────────────────────────────────────── */ .risk-speedometer-container { width: 100%; display: flex; flex-direction: column; align-items: center; } .risk-speedometer-svg { display: block; width: 100%; height: auto; /* let the viewBox aspect-ratio drive height */ overflow: visible; } .risk-speedometer-score { text-align: center; color: var(--color-white); font-size: 13px; font-weight: 500; margin-top: 4px; letter-spacing: 0.5px; } /* ─────────────────────────────────────────────────────── */ .userprotofolio { padding-top: 0px !important; padding: 20px 0px; } .stock-table { width: 100%; max-width: 100%; border-collapse: collapse; table-layout: fixed; } .stock-table th { text-align: left; color: var(--color-gray-tint); font-weight: 500; font-size: 14px; padding: 15px 15px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stock-table th:last-child, .stock-table td:last-child { text-align: end; } .etfs-table th:last-child, .etfs-table td:last-child { text-align: end; } .etfs-table th:nth-child(4), .etfs-table td:nth-child(4) { display: none !important; } .stock-table td { padding: 10px 15px; border-bottom: 0.4px solid var(--color-gray-tint); vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stock-table th:nth-child(1), .stock-table td:nth-child(1) { width: 5%; } .stock-table th:nth-child(2), .stock-table td:nth-child(2) { width: 45%; margin-right: 2px; } .stock-table th:nth-child(3), .stock-table td:nth-child(3) { width: 10%; } .stock-table th:nth-child(4), .stock-table td:nth-child(4) { width: 15%; } .stock-table th:nth-child(5), .stock-table td:nth-child(5) { width: 15%; text-align: center; } .stock-table th:nth-child(6), .stock-table td:nth-child(6) { width: 10%; text-align: end; } .stock-info { display: flex; align-items: start; gap: 10px; padding: 0px 20px 0px 0px; } .stock-info img { width: 40px; height: 40px; object-fit: cover; } .stock-name { color: var(--color-c-2a2726); font-weight: 400; font-size: 14px; line-height: 1.3; padding-bottom: 0px; white-space: nowrap; /* overflow: hidden; text-overflow: ellipsis; */ width: auto; /* display: block; */ position: relative; } .stock-symbol { display: inline-block; margin-top: 3px; padding: 2px 8px; background: var(--color-gray-tint); border-radius: 5px; font-size: 11px; color: var(--color-c-2a2726); width: max-content; } .price { font-weight: 500; color: var(--color-c-2a2726); font-size: 14px; line-height: 1.3; } .usd { font-size: 14px; color: var(--color-c-2a2726); margin-left: 3px; } .change { font-weight: 500; color: var(--color-bull-bright); font-size: 12px; line-height: 1.3; } .change::before { font-size: 12px; } .footer { position: relative; background: var(--color-c-2a2726); padding: 28px 0px; padding-bottom: max(28px, calc(28px + env(safe-area-inset-bottom))); margin-top: 40px; } .footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient( 90deg, var(--color-highlight) 0%, var(--color-highlight) 50%, var(--color-highlight) 100% ); pointer-events: none; } .footer .row { align-items: center; } .f-logo img { opacity: 0.92; transition: opacity 0.2s ease; } .f-logo img:hover { opacity: 1; } .footer-pargraph p { margin-bottom: 0px; color: var(--color-white); font-weight: 400; font-size: 14px; line-height: 1.5; letter-spacing: 0.01em; text-align: end; } .footer-pargraph p, .footer-pargraph p * { color: var(--color-white); } .footer-pargraph .brand { color: var(--color-white); font-weight: 500; } .stock-details { padding: 20px 0px; } .stock-overview .nav-tabs { border: solid 1px var(--color-c-d6d6d6); border-radius: 10px; padding: 16px 22px; display: flex; align-items: center; column-gap: 30px; white-space: nowrap; overflow: auto; flex-wrap: nowrap; } .stock-overview .nav-tabs .nav-link { padding: 0px; color: var(--color-c-535353); font-weight: 500; font-size: 14px; line-height: 100%; border: 0px; } .stock-overview .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { border: none; isolation: inherit; color: var(--color-brand-primary); } .stock-overview .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link:hover { border: none; isolation: inherit; color: var(--color-brand-primary); } .stock-overview .nav-tabs .nav-item { position: relative; } .stock-overview .nav-tabs .nav-item::after { content: ""; position: absolute; top: 50%; right: -14px; transform: translateY(-50%); width: 2px; height: 15px; background-color: var(--color-c-d6d6d6); } /* Remove line for last item */ .stock-overview .nav-tabs .nav-item:last-child::after { display: none; } .classification-detail { display: flex; align-items: center; text-align: center; font-weight: bold; text-transform: uppercase; margin-top: 40px; margin-bottom: 20px; justify-content: center; } .technical { padding: 20px 0px 0px; display: flex; justify-content: space-between; column-gap: 20px; align-items: stretch; } .technical-graph { padding: 16px; border: solid 1px var(--color-c-d6d6d6); border-radius: 10px; width: 70%; height: 100%; display: flex; flex-direction: column; } .technical-graph h6 { border-bottom: solid 1px var(--color-gray-tint); padding-bottom: 10px; color: var(--color-c-2a2726); font-weight: 500; font-size: 16px; line-height: 100%; margin-bottom: 8px; text-transform: uppercase; } .technical-score { padding: 16px; border: solid 1px var(--color-c-d6d6d6); border-radius: 10px; width: 30%; } .technical-score h6 { border-bottom: solid 1px var(--color-gray-tint); padding-bottom: 10px; color: var(--color-c-2a2726); font-weight: 500; font-size: 16px; line-height: 100%; margin-bottom: 0px; text-align: center; } .technical-score h2 { text-align: center; color: var(--color-bull-soft); font-size: 60px; font-weight: 700; line-height: 100%; margin-bottom: 0px; } .line { background: var(--color-c-d6d6d6); height: 1px; } .header .navbar-expand-lg { padding: 0px; } .technical-score-share { display: flex; justify-content: center; align-items: center; min-height: calc(100% - 17px); } .userprofile-icon { display: flex; align-items: center; gap: 12px; } .portfolio-score button { background: var(--color-bull-bright); border-radius: 10px; padding: 10px 20px; border: none; color: var(--color-white); font-weight: 400; font-size: 18px; line-height: 140%; text-align: center; border: none; width: 100%; border-radius: 5px; margin: 20px 0px; transition: 0.3s ease-in all; } .portfolio-score button:hover { background: var(--color-c-15803d); } .crash-risk { border-bottom: 0.4px solid var(--color-bull-soft); background: var(--color-bull-soft-tint); padding: 20px; border-radius: 5px; margin-top: 20px; } .progress-container { max-width: 100%; margin-top: 20px; } .progress-header { display: flex; justify-content: space-between; font-size: 14px; font-weight: 500; color: var(--color-c-2d3b55); margin-bottom: 5px; } .progress-bar { width: 100%; height: 12px; border-radius: 10px; background-color: var(--color-c-e5e5e5); overflow: hidden; position: relative; } .progress-fill { height: 100%; width: 42%; background-color: var(--color-brand-primary); border-radius: 10px; transition: width 0.3s ease; } .progress-footer { display: flex; justify-content: space-between; font-size: 15px; color: var(--color-c-6c7b8b); margin-top: 10px; } .progress-header span { color: var(--color-c-2a2726); font-weight: 400; font-size: 16px; line-height: 1.3; padding-bottom: 0px; } .up h6 { color: var(--color-bull); display: flex; align-items: center; column-gap: 3px; margin-bottom: 0px; } .profile-btn { background: none; border: none; color: var(--color-c-333333); font-size: 16px; box-shadow: none !important; } .profile-img { width: 32px; height: 32px; border-radius: 50%; } .profile-dropdown .dropdown-toggle::after { display: none; } .arrow { font-size: 24px; transition: transform 0.3s ease; color: var(--color-white); } /* Rotate arrow when dropdown open */ .profile-dropdown .dropdown-toggle.show .arrow { transform: rotate(180deg); } /* Dropdown menu styling */ .profile-dropdown .dropdown-menu { position: absolute; border-radius: 6px; min-width: 200px; margin-top: 12px !important; box-shadow: 0 4px 10px var(--color-shadow); border: none; padding-top: 8px; z-index: 1200; } /* Add arrow on top of dropdown */ .profile-dropdown .dropdown-menu::before { content: ""; position: absolute; top: -4px; left: 20px; width: 10px; height: 10px; background: white; transform: rotate(45deg); box-shadow: -1px -1px 2px var(--color-shadow); z-index: -1; } .profile-dropdown .toggle { margin-left: 16px; } .profile-dropdown .toggle-text { font-size: 15px; color: var(--color-c-77777f); font-weight: 500; line-height: 150%; } .profile-dropdown .slider { position: relative; width: 35px; height: 15px; background-color: var(--color-gray-tint); border-radius: 20px; transition: 0.3s ease; } .profile-dropdown .slider::before { content: ""; position: absolute; height: 14px; width: 14px; left: 5px; top: 0px; background-color: white; border-radius: 50%; transition: 0.3s ease; box-shadow: 0 1px 3px var(--color-shadow); } /* Duplicate .profile-dropdown .slider::before removed — first declaration at line 1559 wins */ .profile-dropdown .dropdown-menu { display: none; } .profile-dropdown .dropdown-menu.active { display: block; } /* ------------------------------------------------- Layout - Responsive Container ------------------------------------------------- */ .price-trends { display: flex; flex-direction: column; align-items: flex-start; /* padding: 1rem; gap: 1rem; */ width: 100%; margin: 0 auto; } /* Title - Responsive Typography */ .price-trend__title { border-bottom: solid 1px var(--color-gray-tint); padding-bottom: 10px; color: var(--color-c-2a2726); font-weight: 500; font-size: 16px; line-height: 100%; margin-bottom: 15px; text-transform: uppercase; width: 100%; height: 100%; } /* ------------------------------------------------- Chart - Fully Responsive ------------------------------------------------- */ .price-trend__chart-container { padding: 15px; width: 100%; overflow: hidden; background: transparent !important; } .price-trend__chart-container > div { width: 100% !important; height: 100% !important; } .yes-no-toggle { margin-top: 10px; position: relative; display: inline-flex; background: var(--color-c-223ed3); border-radius: 8px; width: 160px; height: 38px; padding: 3px; align-items: center; box-shadow: 0 2px 8px var(--color-shadow); } .toggle-btn { flex: 1; z-index: 2; border: none; background: transparent; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--color-white); /* Muted when inactive */ transition: color 0.3s ease; height: 100%; display: flex; align-items: center; justify-content: center; } .toggle-btn.active { color: var(--color-black); /* Dark text on light slider */ } .toggle-btn:focus-visible { outline: 2px solid var(--color-white); outline-offset: -4px; } .rank-score-section { row-gap: 50px; } .rank-score .technical-score-share { display: inherit; min-height: inherit; align-items: inherit; align-content: center; height: 100%; } /* ============================================================ TOC 4. PAGE: SCREENERS Filters, range sliders, tags (early/base screeners styles) The dashboard-style redesign for screeners lives in sections 13 & 14 further below. ============================================================ */ .screener { padding: 40px 0px; } .screener-heading h1 { font-weight: 200; font-size: 47px; line-height: 130%; letter-spacing: 0%; color: var(--color-c-2a2726); text-align: start; font-family: "Figtree", sans-serif; margin-bottom: 10px; } .screener-heading p { color: var(--color-c-535353); font-size: 18px; font-weight: 400; line-height: 140%; margin-bottom: 30px; } .curated-list h6 { color: var(--color-c-2a2726); font-size: 21px; font-weight: 500; line-height: 140%; margin-bottom: 19px; } .curated-list-card { position: relative; border-radius: 15px; padding: 20px; overflow: hidden; position: relative; transition: 0.2s ease-in all; background: var(--color-white); border: 1px solid var(--color-border-card); border-radius: 12px; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; position: relative; overflow: hidden; } /* .curated-list-card::before { content: ""; position: absolute; top: 0; left: 0; height: 1px; width: 0; background: var(--color-bull-bright); transition: width 0.3s ease; } .curated-list-card::after { content: ""; position: absolute; bottom: 0; right: 0; height: 1px; width: 0; background: var(--color-bull-bright); transition: width 0.3s ease 0.1s; } .border-left { position: absolute; left: 0; bottom: 0; width: 1px; height: 0; background: var(--color-bull-bright); transition: height 0.3s ease 0.2s; } .border-right { position: absolute; right: 0; top: 0; width: 1px; height: 0; background: var(--color-bull-bright); transition: height 0.3s ease 0.2s; } .curated-list-card:hover::before { width: 100%; } .curated-list-card:hover::after { width: 100%; } .curated-list-card:hover .border-left, .curated-list-card:hover .border-right { height: 100%; } */ .curated-list-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px var(--color-brand-tint); border-color: var(--color-c-d6dbeb); } .toprated-buys { display: flex; align-items: start; justify-content: space-between; } .dividen-growth h6 { color: var(--color-c-2a2726); font-weight: 500; font-size: 18px; line-height: 1.3; padding-bottom: 0px; margin-bottom: 12px; } .dividen-growth p { color: var(--color-c-535353); font-size: 15px; font-weight: 400; line-height: 140%; margin-bottom: 15px; } .curated-list-card h2 { color: var(--color-brand-primary); font-size: 42px; font-weight: 600; line-height: 38px; margin-bottom: 0px; padding: 12px 0px; } .curated-list-card--vertical h2.curated-card-count { font-size: 48px; line-height: 1; margin: 10px 0 15px 0; } .curated-card-header { display: flex; align-items: flex-start; justify-content: space-between; } .curated-list-card--vertical .dividen-growth h6, .curated-list-card--vertical .dividen-growth p { margin-bottom: 8px; } .sharelist-data ul li { border: 0.5px solid var(--color-surface-mute); border-radius: 35px; padding: 2px 10px; font-size: 12px; list-style: none; margin-top: 10px; cursor: pointer; background: var(--color-surface-mute); } .sharelist-data ul { display: flex; align-items: center; column-gap: 10px; margin: 0; padding: 0; overflow-x: auto; overflow-y: hidden; padding-bottom: 10px; flex-wrap: nowrap; scrollbar-width: thin; /* Firefox: show a thin scrollbar matching WebKit styling */ scrollbar-color: var(--color-c-d1d5db) var(--color-c-f5f5f5); /* Thumb + Track */ } /* Chrome, Edge, Safari */ .sharelist-data ul::-webkit-scrollbar { height: 6px; /* Scrollbar thickness */ } .sharelist-data ul::-webkit-scrollbar-track { background: var(--color-c-f5f5f5); /* Light white background */ border-radius: 10px; } .sharelist-data ul::-webkit-scrollbar-thumb { background: var(--color-c-d1d5db); /* Light grey thumb */ border-radius: 10px; } .sharelist-data ul::-webkit-scrollbar-thumb:hover { background: var(--color-c-b3b3b3); } .strong-up { background: var(--color-c-36d399-a10); width: 35px; height: 35px; display: flex; justify-content: center; align-items: center; border-radius: 100%; font-size: 15px; } .strong-up img { max-width: 15px; } /* Curated-list card direction variants — bull (Top Buys + Weekly Gainers) and bear (Top Sells + Weekly Losers). Recolors the leading arrow icon and the ticker-chip text with the semantic bull/bear palette so the card tile matches its popup. Backgrounds on `.strong-up` and the chips are kept intentionally light. */ .curated-list-card--bull .strong-up { background: var(--color-bull-tint); color: var(--color-bull); } .curated-list-card--bear .strong-up { background: var(--color-bear-tint); color: var(--color-bear); } .curated-list-card--bull .sharelist-data ul li { color: var(--color-bull); } .curated-list-card--bear .sharelist-data ul li { color: var(--color-bear); } .growth-pick-card { /* box-shadow: 0 2px 4px hsl(217 91% 60% / 0.08); */ border: 1px solid var(--color-border-card); border-radius: 15px; padding: 20px; } .growth-pick-card h6 { display: flex; align-items: center; column-gap: 8px; margin-bottom: 0px; color: var(--color-c-2a2726); font-size: 19px; font-weight: 500; line-height: 18px; margin-bottom: 0px; } .growth-pick-card h6 svg { font-size: 17px; } /* .growth-pick-card:hover { transform: translateY(-2px); transition: 0.2s ease-in all; } */ .growth-pick-card p { color: var(--color-c-535353); font-size: 15px; font-weight: 400; line-height: 140%; margin-bottom: 21px; padding-top: 10px; } .sortby-filter { display: flex; align-items: center; column-gap: 20px; } .applyfilter-data label { color: var(--color-c-2a2726); font-size: 14px; font-weight: 400; line-height: 140%; margin-bottom: 4px; } .applyfilter-data select { width: 100%; border-radius: 5px; padding: 7px 10px; transition: 0.2s ease-in all; font-size: 14px; color: var(--color-c-535353); appearance: none; -webkit-appearance: none; -moz-appearance: none; position: relative; box-sizing: border-box; /* ← prevents overflow on mobile */ border: solid 1px var(--color-gray-tint); border-radius: 5px; background: var(--color-white); transition: 0.2s ease-in all; /* ← Safari/iOS fix */ max-width: 100%; /* ← constrain on mobile */ } .applyfilter-data select:focus { border-color: var(--color-brand-primary); outline: none; box-shadow: none; } .applyfilter-data { width: 100%; } .score-range-container { color: var(--color-c-2a2726); font-size: 16px; font-weight: 400; line-height: 140%; margin-bottom: 4px; width: 100%; } .score-slider { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 100%; height: 6px; border-radius: 5px; outline: none; margin-top: 8px; cursor: pointer; } .score-slider:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 2px; } /* Slider Track */ .score-slider::-webkit-slider-runnable-track { height: 6px; background: transparent; border-radius: 5px; } /* Slider Thumb (the circle) */ .score-slider::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; -moz-appearance: none; height: 22px; width: 22px; background: var(--color-white); border: 3px solid var(--color-brand-primary); border-radius: 50%; cursor: pointer; margin-top: -8px; /* center align */ } /* Firefox support */ .score-slider::-moz-range-thumb { height: 22px; width: 22px; background: var(--color-white); border: 3px solid var(--color-brand-primary); border-radius: 50%; cursor: pointer; } .score-slider::-moz-range-track { height: 6px; background: transparent; border-radius: 5px; } .score-range-container label { color: var(--color-c-2a2726); font-size: 14px; font-weight: 400; line-height: 140%; margin-bottom: 4px; } .apply-filter-btn button { background: var(--color-brand-primary); color: var(--color-white); font-weight: 500; font-size: 14px; line-height: 140%; letter-spacing: 0%; text-align: center; border: none; width: 100%; border-radius: 5px; transition: 0.3s ease-in all; white-space: nowrap; padding: 8px 15px; margin-top: 30px; } .apply-filter-btn button:hover { background: var(--color-c-223ed3); color: var(--color-white); transition: 0.3s ease-in all; } .results-table { width: 100%; margin-top: 20px; border-collapse: collapse; } .results-table th { text-align: left; padding: 10px 10px; font-size: 14px; color: var(--color-c-6c7a91); white-space: nowrap; } .results-table td { padding: 12px 10px; border-top: 1px solid var(--color-c-eeeeee); font-size: 14px; white-space: nowrap; } .results-table th:nth-child(1) { width: 50%; } .results-table th:nth-child(2) { width: 12%; } .results-table th:nth-child(3) { width: 16%; } .results-table th:nth-child(4) { width: 12%; } .screener-results-table { width: 100%; margin-top: 20px; border-collapse: collapse; } .screener-results-table th { text-align: left; padding: 10px 10px; font-size: 14px; color: var(--color-c-6c7a91); white-space: nowrap; } .screener-results-table td { padding: 12px 10px; border-top: 1px solid var(--color-c-eeeeee); font-size: 14px; white-space: nowrap; } /* Tags */ .tag { padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 500; display: inline-block; } .risk { padding: 4px 10px; font-size: 12px; border-radius: 12px; font-weight: 500; } .risk.low { background: var(--color-c-e7f6ef); color: var(--color-bull-bright); } .risk.medium { background: var(--color-c-f7f3e8); color: var(--color-c-eab308); } .risk.high { background: var(--color-c-fcebea); color: var(--color-bear); } .data-feed { display: flex; align-items: center; gap: 8px; } .score-bar { width: 80px; height: 6px; background: var(--color-c-edf0f5); border-radius: 4px; overflow: hidden; } .score-bar .fill { height: 100%; background: var(--color-brand-primary); } .pos { color: var(--color-bull); } .neg { color: var(--color-bear); } .results-table td strong { font-weight: 500; } .results-table td:last-child { text-align: end; } .results-table th:last-child { text-align: end; } .screener-results-table td strong { font-weight: 500; } .screener-results-table td:last-child { text-align: end; } .screener-results-table th:last-child { text-align: end; } .curated-list-card { position: relative; overflow: hidden; height: 100%; } .curated-list-card::after { content: ""; position: absolute; bottom: 0; left: 0; height: 3px; width: 0; background: var(--color-brand-primary); transition: width 0.5s ease-out; } .curated-list-card:hover::after { width: 100%; } .sell-sty { margin-bottom: 10px; } .applyfilter-data { position: relative; width: 100%; } .applyfilter-data select.form-select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 40px; background-color: var(--color-white); background-image: none !important; } .applyfilter-data::after { content: ""; position: absolute; right: 9px; top: 74%; transform: translateY(-50%); background: url(/assets/img/arrow.svg) no-repeat center; width: 18px; height: 18px; background-size: 14px; pointer-events: none; } .notifications { position: relative; } .notif-count { position: absolute; top: -1px; right: -1px; background: var(--color-bear); color: var(--color-white); font-size: 10px; font-weight: 600; min-width: 14px; height: 14px; border-radius: 7px; display: flex; align-items: center; justify-content: center; z-index: 10; } .notif-dropdown { position: absolute; right: 0; top: 50px; width: 320px; background: var(--color-white); box-shadow: 0 8px 25px var(--color-shadow); border-radius: 12px; display: none; z-index: 1200; } .notif-dropdown.active { display: block; } .notif-header { padding: 10px 14px; font-weight: 600; background: var(--color-c-f7f9fc); border-bottom: 1px solid var(--color-border); border-radius: 12px 12px 0px 0px; display: flex; align-items: center; justify-content: space-between; } .notif-item { padding: 12px 14px; border-bottom: 1px solid var(--color-c-eef0f4); transition: 0.3s ease-in all; } .notif-item:hover { background: var(--color-c-f7f9fc); } .notif-item:last-child { border-bottom: none; } .notif-item strong { font-size: 15px; color: var(--color-c-2a2726); font-weight: 500; } .notif-item p { margin: 3px 0; font-size: 13px; color: var(--color-c-444444); } .notif-item .time { font-size: 13px; color: var(--color-c-999999); } .notif-arrow { width: 14px; height: 14px; position: absolute; top: -6px; right: 31px; background: var(--color-c-f7f9fc); transform: rotate(45deg); box-shadow: -3px -3px 8px var(--color-shadow); border-radius: 0px; } /* ============================================================ TOC 5. PAGE: WEIGHTINGS Header, progress, info, and card styles for the score weightings tuner page. ============================================================ */ .score-weightings { padding: 40px 0px; } .score-weightings hr { border-color: var(--color-c-d7dfea); } .security-compose { margin-top: 27px; } span.security { display: flex; justify-content: space-between; width: 100%; align-items: flex-start; flex-direction: column; } .security h6 { margin-bottom: 10px; font-size: 18px; font-weight: 500; color: var(--color-c-2a2726); } .security p { margin-bottom: 0px; color: var(--color-c-9aa4b2); font-size: 15px; } .security-compose .accordion-button:not(.collapsed) { border-bottom: 0.4px solid var(--color-brand-tint); background: var(--color-brand-tint); } .security-compose .accordion-button:focus { box-shadow: none; } .security-compose .accordion-button { background: var(--color-brand-tint); } /* Header */ .security-compose .score-header { display: flex; justify-content: space-between; color: var(--color-white); padding-top: 17px; } .security-compose .score-header h6 { font-size: 19px; margin: 0; } .security-compose .score-value { color: var(--color-c-324bc9); font-weight: 600; } .security-compose .score-subtext { font-size: 14px; color: var(--color-c-9aa4b2); margin-bottom: 10px; } /* Progress */ .security-compose .custom-progress { position: relative; height: 10px; background: var(--color-gray-tint); border-radius: 10px; overflow: visible; } .security-compose .custom-progress-bar { height: 100%; background: linear-gradient( 90deg, var(--color-brand-tint), var(--color-c-2f44b3) ); border-radius: 10px; } /* DOT (CENTER FIXED) */ .security-compose .progress-dot { position: absolute; top: 50%; width: 18px; height: 18px; background: var(--color-brand-primary); border: 2px solid var(--color-bull-soft); border-radius: 50%; transform: translate(-50%, -50%); } /* Bottom info */ .security-compose .progress-info { display: flex; align-items: center; gap: 8px; background: var(--color-c-052e16); color: var(--color-bull-soft); padding: 10px 14px; border-radius: 8px; font-size: 13px; } .score-header h6 { color: var(--color-c-2a2726); font-size: 21px; font-weight: 500; line-height: 18px; margin-bottom: 0px; padding: 0px 0px 0px; } .security-compose .yes-no-toggle { margin-bottom: 10px; } .weight-sum { background: var(--color-bull-soft-tint); display: flex; align-items: center; height: 100%; padding: 10px; margin-top: 27px; border-radius: 5px; } .weight-sum p { margin-bottom: 0px; display: flex; align-items: center; column-gap: 12px; } .weight-sum p span { border: solid 1px var(--color-bull-soft); border-radius: 100%; width: 22px; height: 22px; display: flex; justify-content: center; align-items: center; color: var(--color-bull-bright); } span.reload-com { width: 24px; height: 24px; background: var(--color-c-f4fcf8); border-radius: 2px; display: flex; justify-content: center; align-items: center; margin-right: 31px; } span.reload-com svg { font-size: 12px; } .weight-sum p span svg { width: 12px; } /* .profile-card { border-radius: 6px; box-shadow: 0 4px 10px var(--color-shadow); border: none; } .profile-card .user-profile { width: 80px; height: 80px; display: flex; justify-content: center; align-items: center; margin: 0 auto; position: relative; } .profile-card .user-profile img { width: 100%; height: 100%; aspect-ratio: 1 / 1; border: solid 2px var(--color-highlight); } .profile { display: flex; justify-content: center; align-items: center; height: calc(100vh - 170px); height: calc(100dvh - 170px); } .profile-card button { height: 45px; font-weight: 700; font-size: 18px; line-height: 140%; letter-spacing: 0%; text-align: center; margin: auto; border-radius: 5px; transition: 0.3s ease-in all; } .profile-card button:hover { background: var(--color-c-223ed3); } .user-profile span { position: absolute; z-index: 9999; bottom: 0px; right: -16px; background: var(--color-brand-primary); border-radius: 100%; width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; color: var(--color-white); font-size: 12px; border: solid 2px var(--color-white); cursor: pointer; } .profile-card ul { display: flex; align-items: center; border-bottom: solid 2px var(--color-c-dee2e6); margin: 0px 16px; } .profile-card li.nav-item a { padding: 8px 10px; background: none; border: none; color: var(--color-black); cursor: pointer; } .profile-card li.nav-item a.active { border-bottom: solid 1px var(--color-c-dee2e6); border-bottom: solid 2px var(--color-brand-primary); } .profile-card li.nav-item a:hover { background: none; } */ .profile-card { border-radius: 6px; box-shadow: 0 4px 10px var(--color-shadow); border: none; background: var(--color-white); } .profile { display: flex; justify-content: center; align-items: center; height: calc(100vh - 170px); height: calc(100dvh - 170px); } .total-portfolio-value { position: relative; /* box-shadow: 0 0 20px -5px var(--color-shadow); */ border: 1px solid var(--color-border-card); border-radius: 15px; padding: 20px; overflow: hidden; position: relative; transition: 0.2s ease-in all; height: 100%; background: var(--color-white); } .total-portfolio-value:hover { box-shadow: 0 8px 20px -5px var(--color-shadow); transform: translateY(-2px); transition: 0.2s ease-in all; } .setvpn-usd { display: flex; align-items: center; column-gap: 16px; } .total-protofolio { width: 40px; height: 40px; background: var(--color-c-36d399-a10); border-radius: 5px; display: flex; justify-content: center; align-items: center; color: var(--color-bull-bright); font-size: 18px; } .setvalue-data h6 { color: var(--color-c-2a2726); font-weight: 600; font-size: 16px; line-height: 1.3; padding-bottom: 0px; margin-bottom: 7px; } .setvalue-data p { color: var(--color-c-535353); font-size: 15px; font-weight: 400; line-height: 140%; margin-bottom: 0px; } .total-portfolio-value input { width: 100%; border: solid 1px var(--color-gray-tint); border-radius: 5px; background: var(--color-white); transition: 0.2s ease-in all; font-size: 14px; color: var(--color-c-535353); } .total-portfolio-value input::placeholder { font-size: 16px; color: var(--color-text-faint); opacity: 1; } .total-value { background: var(--color-surface-mute); display: flex; align-items: center; justify-content: space-between; padding: 10px 15px; border-radius: 5px; border: solid 1px var(--color-divider); } .units-value h6 { font-size: 14px; margin-bottom: 0px; color: var(--color-c-2a2726); margin-bottom: 5px; } .units-value h2 { font-size: 20px; font-weight: 500; margin-bottom: 0px; } .units-value-total h6 { font-size: 14px; margin-bottom: 0px; color: var(--color-c-2a2726); margin-bottom: 5px; text-align: end; } .units-value-total h2 { color: var(--color-black); font-size: 16px; font-weight: 500; margin-bottom: 0px; } .risk-mrs { display: flex; align-items: center; column-gap: 15px; } .setvpn-usd.mrs-weekly { justify-content: space-between; } .total-protofolio-risk { width: 55px; height: 27px; display: flex; justify-content: center; align-items: center; border-radius: 5px; } .total-protofolio-risk h6 { margin-bottom: 0px; font-size: 14px; } .total-portfolio-value .security-compose { margin-bottom: 27px; } .portfolio-alocation { padding: 50px 0px 0px; } .neutral-market .units-value h2 { background: var(--color-c-c7c7c7-a18); border-radius: 5px; font-size: 15px; text-align: center; height: 30px; display: flex; align-items: center; justify-content: center; } .manual-override { display: flex; align-items: center; padding: 27px 0px; } .long-override { background: var(--color-bull-bright); /* border-radius: 5px 0px 0px 5px; */ text-align: center; color: var(--color-white); display: flex; align-items: center; justify-content: center; height: 30px; } .manual-override h6 { text-align: center; margin-bottom: 0px; font-size: 16px; line-height: 1.3; color: var(--color-white); text-shadow: 0 1px 2px var(--color-ink-tint); } .short-override { background: var(--color-bear-bright); text-align: center; color: var(--color-white); display: flex; align-items: center; justify-content: center; height: 30px; } .cash-override { background: var(--color-c-eab308); text-align: center; color: var(--color-white); display: flex; align-items: center; justify-content: center; height: 30px; /* border-radius: 0px 5px 5px 0px; */ } .cash-bull { display: flex; align-items: center; column-gap: 2px; justify-content: space-between; overflow: auto; } .long { background: var(--color-surface-mute); border-radius: 5px; padding: 10px 15px; border: solid 1px var(--color-divider); width: 100%; } .long h6 { font-size: 14px; margin-bottom: 0px; color: var(--color-c-2a2726); margin-bottom: 5px; text-align: start; position: relative; padding-left: 20px; } .long h6::after { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; background-color: var(--color-bull-bright); border-radius: 50%; } .long h2 { color: var(--color-c-32c773-a88); font-size: 23px; font-weight: 600; margin-bottom: 0px; padding: 5px 0px; } .long p { color: var(--color-c-535353); font-size: 14px; font-weight: 400; line-height: 140%; margin-bottom: 0px; } .h6.short-after { position: relative; } .short-after::after { background-color: var(--color-bear-bright) !important; } .h6.short-after-cash { position: relative; } .short-after-cash:after { background-color: var(--color-c-eab308) !important; } .total-portfolio-value::after { content: ""; position: absolute; bottom: 0; left: 0; height: 3px; width: 0; background: var(--color-brand-primary); transition: width 0.5s ease-out; } .total-portfolio-value:hover::after { width: 100%; } .growth-pick-card .setvalue-data h6 { margin-bottom: 0px; } .screener-results .setvpn-usd { display: flex; align-items: center; } .allocation-rules { border: 1px solid var(--color-border-card); border-radius: 15px; padding: 20px; overflow: hidden; } .strong-bull-data { background: var(--color-surface-mute); border-radius: 5px; padding: 10px 15px; border: solid 1px var(--color-divider); width: 100%; margin-top: 16px; } .str-mrs h6 { color: var(--color-c-2a2726); font-weight: 500; font-size: 15px; line-height: 1.3; padding-bottom: 0px; margin-bottom: 0px; } .str-mrs span { color: var(--color-c-535353); font-size: 15px; font-weight: 400; line-height: 140%; margin-bottom: 0px; } .str-mrs { display: flex; align-items: center; column-gap: 10px; margin-bottom: 5px; } .str-mrs ul { margin: 0px; padding: 0px; display: flex; align-items: center; column-gap: 20px; } .str-mrs ul li { list-style: none; font-size: 14px; color: var(--color-bear-bright); } .str-mrs ul li span { color: var(--color-bear-bright); } li.list-mrs { color: var(--color-bull-bright) !important; } li.list-mrs span { color: var(--color-bull-bright) !important; } li.list-mrs-first { color: var(--color-bear-bright) !important; } li.list-mrs-first span { color: var(--color-bear-bright) !important; } li.list-mrs-second { color: var(--color-c-eab308) !important; } li.list-mrs-second span { color: var(--color-c-eab308) !important; } .strong-bull-data.active { border: solid 1px var(--color-brand-tint); background: var(--color-brand-tint); } .postions-limits { background: var(--color-surface-mute); border-radius: 5px; padding: 10px 15px; border: solid 1px var(--color-divider); width: 100%; margin-top: 16px; overflow: visible; white-space: normal; } .reblance { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 6px 0; } .reblance-units { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid var(--color-border-card); border-radius: 8px; background: var(--color-white); } .reblance-units span { color: var(--color-c-535353); font-size: 13px; font-weight: 400; line-height: 1.25; margin-bottom: 0px; } .reblance-units h6 { font-size: 13px; font-weight: 400; line-height: 1.25; margin-bottom: 0px; color: var(--color-brand-primary); } .data-feed { display: flex; align-items: center; column-gap: 10px; } .long-postion { padding-bottom: 50px; } /* ============================================================ TOC 6. PAGE: PORTFOLIO (shared with watchlist visuals) Coin icons, price-change pills, TPV input with overlapping save button, unit-allocation edit form, custom modal / backdrop / close button, search functionality. ============================================================ */ .eth { background: var(--color-c-627eea); } /* Price Change */ .positive { color: var(--color-bull-bright); font-weight: 500; } .negative { color: var(--color-bear-bright); font-weight: 500; } .watchlist-popup .modal-content { border: none; } .watchlist-popup .modal-content .modal-header button:focus { box-shadow: none; } .filter-btn { border-radius: 36px; margin-top: 12px !important; border: none; border: solid 1px var(--color-c-dddddd); padding: 7px 15px 3px; font-size: 15px; color: var(--color-c-8f8f8f); } .filter-btn:hover { background: var(--color-brand-primary); color: var(--color-white); } .filter-menu { border-radius: 6px; min-width: 200px; margin-top: 12px !important; box-shadow: 0 4px 10px var(--color-shadow); border: none; padding: 10px; position: relative; } .filter-menu .dropdown-item { color: var(--color-c-77777f); font-size: 15px; padding: 5px 5px; display: flex; align-items: center; column-gap: 10px; } .filter-menu .dropdown-item input[type="checkbox"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 15px; height: 15px; border: 1.5px solid var(--color-c-ababab); border-radius: 4px; cursor: pointer; } .filter-menu::before { content: ""; position: absolute; top: -4px; left: 20px; width: 10px; height: 10px; background: white; transform: rotate(45deg); box-shadow: -1px -1px 2px var(--color-shadow); z-index: -1; } /* .filter-menu.low-high .dropdown-item:hover{ background: inherit; } */ .current-dropdown { background: var(--color-brand-primary); color: var(--color-white) !important; } .filter-menu .dropdown-item:hover { background: var(--color-brand-primary); color: var(--color-white); } span.badge { color: var(--color-black); display: none; } span.badge:hover { color: var(--color-white); } /* TPV Input with overlapping save button */ .tpv-input-wrapper { position: relative; width: 100%; display: flex; align-items: center; column-gap: 10px; padding: 15px 0px; } .tpv-input-wrapper input { width: 100%; border: solid 1px var(--color-gray-tint); border-radius: 5px; padding: 6px 10px; background: var(--color-white); transition: 0.2s ease-in all; font-size: 16px; color: var(--color-c-535353); } .tpv-input-wrapper input:focus { border-color: var(--color-brand-primary); outline: none; } .tpv-input-wrapper button { font-size: 16px; white-space: nowrap; border: solid 1px var(--color-brand-primary); color: var(--color-brand-primary); transition: 0.3s ease-in all; background: none; padding: 6px 20px; } .tpv-input-wrapper button:hover { background: var(--color-brand-primary); color: var(--color-white); } input.no-spinner::-webkit-outer-spin-button, input.no-spinner::-webkit-inner-spin-button { appearance: none; -webkit-appearance: none; -moz-appearance: none; margin: 0; } input.no-spinner[type="number"] { appearance: textfield; -moz-appearance: textfield; } input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; } /* Fix date input overflow on iPadOS Safari/Chrome */ @supports (-webkit-touch-callout: none) { input[type="date"] { -webkit-appearance: none; appearance: none; max-width: 100%; min-width: 0; } input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0; position: absolute; right: 0; width: 20%; height: 100%; cursor: pointer; } .login-input input[type="date"] { -webkit-appearance: none; appearance: none; width: 100%; max-width: 100%; min-width: 0; height: 40px; box-sizing: border-box; } } /* Unit Allocation Edit Form Styles */ .allocation-edit-form { margin-top: 15px; } .allocation-form-scroll { max-height: fit-content; overflow-y: auto; padding-right: 5px; scrollbar-width: thin; } .regime-input-group { background: var(--color-c-f8f9fa); border: 1px solid var(--color-c-e9ecef); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; } .regime-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .regime-header h6 { color: var(--color-c-2a2726); font-size: 12px; font-weight: 500; margin: 0; } .regime-header span { color: var(--color-c-6c757d); font-size: 11px; background: var(--color-c-e9ecef); padding: 2px 8px; border-radius: 4px; } .regime-inputs { display: flex; gap: 8px; } .regime-inputs .input-wrapper { flex: 1; display: flex; align-items: center; gap: 4px; } .regime-inputs label { font-size: 11px; font-weight: 600; color: var(--color-c-6c757d); min-width: 12px; } .regime-inputs .input-wrapper label { color: var(--color-c-6c757d); } .regime-inputs input { width: 100%; border: 1px solid var(--color-c-dee2e6); border-radius: 4px; padding: 6px 8px; font-size: 13px; text-align: center; transition: all 0.2s ease; } .regime-inputs input:focus { outline: none; border-color: var(--color-brand-primary); box-shadow: 0 0 0 2px var(--color-brand-tint); } .regime-inputs input:hover { border-color: var(--color-c-adb5bd); } /* Color coding for L/S/C labels */ .regime-inputs .input-wrapper:nth-child(1) label { color: var(--color-bull-bright); } .regime-inputs .input-wrapper:nth-child(2) label { color: var(--color-bear-bright); } .regime-inputs .input-wrapper:nth-child(3) label { color: var(--color-c-eab308); } .form-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 10px; border-top: 1px solid var(--color-c-e9ecef); } .form-actions .btn { padding: 8px 16px; font-size: 14px; font-weight: 500; border-radius: 5px; transition: all 0.2s ease; } .form-actions .btn-outline-secondary { border-color: var(--color-c-dee2e6); color: var(--color-c-6c757d); } .form-actions .btn-outline-secondary:hover { background: var(--color-c-f8f9fa); border-color: var(--color-c-adb5bd); color: var(--color-c-495057); } .form-actions .btn-primary { background: var(--color-brand-primary); border-color: var(--color-brand-primary); } .form-actions .btn-primary:hover { background: var(--color-c-223ed3); border-color: var(--color-c-223ed3); } .form-actions .btn:disabled { opacity: 0.65; cursor: not-allowed; } /* TooltipStyles.css */ .custom-tooltip-card { border: 1px solid var(--color-c-2a2726-a30); border-radius: 0.75rem; overflow: hidden; box-shadow: 0 10px 25px var(--color-shadow); } .custom-tooltip-header { border-bottom: 1px solid var(--color-c-2a2726-a30); background: linear-gradient( to right, var(--color-azure-tint), var(--color-brand-tint) ); } .text-brand-dark { color: var(--color-brand-primary); } .text-brand-primary { color: var(--color-c-0047ff); } .text-label { color: var(--color-c-4a4a4a); } /* TooltipStyles.css - Add these lines */ /* Custom Backdrop with Blur */ .modal-overlay-custom { position: fixed; top: 0; left: 0; width: 100vw; width: 100dvw; height: 100vh; height: 100dvh; z-index: 1400; background-color: var(--color-shadow); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 1rem; overscroll-behavior: contain; } /* Modal Content Container */ .modal-container-custom { position: relative; width: 100%; max-width: 800px; /* Equivalent to max-w-lg */ max-height: 90vh; overflow-y: auto; border-radius: 0.75rem; background: white; animation: modalZoomIn 0.2s ease-out; } @keyframes modalZoomIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } /* Floating Close Button */ .btn-close-floating { position: absolute; top: 1rem; right: 1rem; z-index: 1500; background-color: var(--color-highlight); padding: 0.5rem; border-radius: 50%; border: none; box-shadow: 0 2px 8px var(--color-shadow); transition: background-color 0.2s; } .btn-close-floating:hover { background-color: var(--color-c-f8f9fa); } /* Search Functionality */ .search-results-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: var(--color-white); border-radius: 12px; box-shadow: 0 20px 25px -5px var(--color-shadow), 0 10px 10px -5px var(--color-shadow); border: 1px solid var(--color-shadow); z-index: 1100; margin-top: 10px; overflow: hidden; list-style: none; padding: 8px 0; width: 100%; } .search-result-item { padding: 8px 15px; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: space-between; text-decoration: none !important; border-left: 4px solid transparent; color: inherit; } .search-result-item:hover { background: var(--color-c-f4f7ff); border-left-color: var(--color-brand-primary); } .search-result-content { flex: 1; min-width: 0; } .search-result-item:hover, .search-result-item.active { background: var(--color-brand-tint); /* or any color that matches your design – make sure it's visible */ } .search-result-item.active { font-weight: 600; /* optional: slightly stronger highlight */ background: var(--color-brand-tint) !important; } .search-result-row1 { font-family: "Figtree", sans-serif; font-weight: 300; font-size: 14px; letter-spacing: 0.01em; color: var(--color-c-1a1a1a); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-result-row2 { display: flex; gap: 8px; align-items: center; justify-content: space-between; font-size: 12px; color: var(--color-c-77777f); } .search-result-symbol { background: var(--color-brand-tint); padding: 2px 10px; border-radius: 4px; color: var(--color-brand-primary); font-weight: 600; font-size: 12px; } .search-result-chevron { color: var(--color-c-bdbdbd); font-size: 12px; margin-left: 12px; transition: transform 0.2s; } .search-result-item:hover .search-result-chevron { color: var(--color-brand-primary); transform: translateX(3px); } .search-result-type { text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; opacity: 0.8; } .search-backdrop { position: fixed; top: 0; left: 0; width: 100vw; width: 100dvw; height: 100vh; height: 100dvh; background: transparent; z-index: 1050; display: none; transition: opacity 0.3s ease; } .search-backdrop.active { display: block; } .search-loading { padding: 15px; text-align: center; color: var(--color-c-adaeb5); font-size: 14px; } .search-no-results { padding: 15px; text-align: center; color: var(--color-c-adaeb5); font-size: 14px; } /* ============================================================ TOC 7. SHARED — Score chart, profile image, chart wrappers Score Chart - Fully Responsive (used by details + dashboard) ============================================================ */ .score-trends { display: flex; flex-direction: column; align-items: flex-start; /* padding: 1rem; gap: 1rem; */ width: 100%; margin: 0 auto; } .score-trend__chart-container { padding: 15px; width: 100%; overflow: hidden; border: solid 1px var(--color-c-d6d6d6); border-radius: 10px; margin-top: 1rem; background: transparent; } .score-trend__chart-container > div { width: 100% !important; height: 100% !important; } .main-heading { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 0px; column-gap: 10px; border-bottom: solid 1px var(--color-divider); } .main-heading-name { font-size: 13px; } .main-heading-contribution { font-size: 13px; } .modal-inner-container { display: flex; justify-content: space-between; width: 100%; align-items: center; margin: 10px 0px 20px; } /* ============================================================ TOC 8. SHARED — Alert notifications ============================================================ */ /* Alert Notification Styles */ .notif-alert-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .notif-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; text-transform: capitalize; } .notif-badge.bullish { background: var(--color-bull-soft-tint); color: var(--color-bull-bright); } .notif-badge.bearish { background: var(--color-bear-soft-tint); color: var(--color-bear-soft); } .notif-badge svg { font-size: 10px; } .notif-loading { padding: 20px; text-align: center; color: var(--color-c-999999); font-size: 14px; } .stock-inventory-list { background: var(--color-c-f8f9fa); display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border: solid 1px var(--color-c-dddddd); margin: 5px 0px; border-radius: 5px; } .stock-inventory-list span { color: var(--color-brand-primary); } .screener-card-main { padding: 20px 20px 0px; align-items: flex-start; justify-content: space-between; display: flex; box-sizing: border-box; } .curated-stock-list { padding: 20px; } .screener-card { padding: 1.5rem; } /* ============================================================ TOC 9. SHARED — Triple toggle switch (Stocks/ETFs/All) ============================================================ */ /* Triple Toggle Switch */ .toggle-switch-container { display: inline-block; width: 260px; height: 40px; background-color: var(--color-c-0d6efd); border-radius: 9999px; box-shadow: 0 4px 15px var(--color-shadow); position: relative; overflow: hidden; } .switch { position: absolute; top: 4px; left: 4px; height: 32px; width: 84px; background-color: white; border-radius: 9999px; box-shadow: 0 2px 8px var(--color-shadow); transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1); z-index: 2; } /* Labels */ .option-label { position: absolute; top: 0; height: 100%; width: 86px; display: flex; align-items: center; justify-content: center; color: white; cursor: pointer; z-index: 3; transition: color 0.3s ease; user-select: none; } .left-label { left: 0; } .center-label { left: 87px; } .right-label { right: 0; } h4 { margin: 0; font-size: 0.95rem; font-weight: 500; } /* Active label text color */ .option-label.active { color: var(--color-c-222222) !important; } /* ============================================================ TOC 10. PAGE: MARKET RISK Stats cards, MRS pill, risk-level visuals, subscores, section headers, VIX data alignment. ============================================================ */ .mkt-sent-container { background: var(--color-white); border-radius: 12px; padding: 16px; box-shadow: 0 0 20px -5px var(--color-shadow); border: solid 1px var(--color-c-d6d6d6); } .mkt-sent-header-wrapper { display: flex; align-items: center; justify-content: space-between; } .mkt-sent-header { margin-bottom: 5px; } .mkt-sent-title { font-size: 17px; font-weight: 700; color: var(--color-c-111827); display: flex; align-items: center; gap: 10px; } .mkt-sent-total-count { font-size: 14px; color: var(--color-c-6b7280); margin-top: 4px; } .mkt-sent-stats-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; /* border-top: 1px solid var(--color-c-f3f4f6); */ column-gap: 15px; flex-wrap: nowrap; } .mkt-sent-stat-group { display: flex; align-items: center; gap: 8px; } .mkt-sent-stat-values { display: flex; align-items: baseline; gap: 6px; } .mkt-sent-stat-group--clickable { text-decoration: none; padding: 4px 10px; border-radius: 8px; transition: background-color 0.15s ease, box-shadow 0.15s ease; cursor: pointer; border: none; background: transparent; color: inherit; font: inherit; } .mkt-sent-stat-group--clickable:hover { background-color: rgba(0, 0, 0, 0.04); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06); } .mkt-sent-stat-group--clickable:active { background-color: rgba(0, 0, 0, 0.08); } .mkt-sent-label-bull { color: var(--color-bull); font-weight: 600; font-size: 14px; } .mkt-sent-label-bear { color: var(--color-bear); font-weight: 600; font-size: 14px; } .mkt-sent-number { color: var(--color-c-111827); font-weight: 700; font-size: 15px; } .mkt-sent-percent { color: var(--color-c-9ca3af); font-size: 0.9rem; } .mkt-sent-divider { width: 1px; height: 28px; background-color: var(--color-border); } .mkt-sent-signals-heading { font-size: 15px; font-weight: 600; color: var(--color-c-4b5563); margin: 0px 0 12px; text-align: center; padding-top: 14px; border-top: 1px solid var(--color-border); } .mkt-sent-grid-bar { display: flex; height: 12px; gap: 2px; margin: 18px 0 8px; } .mkt-sent-bar-segment { flex: 1; height: 100%; } .ms-1 { margin-left: 4px; } .applyfilter-data-new::after { top: 50% !important; } /***************************Market Risk Dashboard *************************** */ /* app/globals.css */ .mrd-header-section { padding: 50px 0px; } .mrd-card { border: none; border-radius: 16px; box-shadow: 0 8px 25px var(--color-shadow); overflow: hidden; transition: all 0.3s ease; } .mrd-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px var(--color-shadow); } /* Summary Cards */ .mrd-summary-card { background: linear-gradient( 180deg, var(--color-white), var(--color-c-f3f5f9) ); border: 1px solid var(--color-c-e7ebf3); height: 100%; } /* MRS Pill */ .mrd-pill { height: 68px; border-radius: 16px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; font-size: 28px; font-weight: 700; color: var(--color-white); position: relative; overflow: hidden; } .mrd-pill::before { content: ""; position: absolute; right: -30px; top: -10px; width: 120px; height: 120px; background: var(--color-highlight); border-radius: 50%; } .mrd-pill span { font-size: 26px; font-weight: 700; } /* Risk Level */ .mrd-risk-box { height: 68px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; color: var(--color-white); position: relative; overflow: hidden; } .mrd-risk-box::before { content: ""; position: absolute; right: -40px; top: -20px; width: 130px; height: 130px; background: var(--color-highlight); border-radius: 50%; } .mrd-risk-bar { height: 10px; border-radius: 6px; background: linear-gradient( to right, var(--color-bull-soft), var(--color-bull), var(--color-c-eab308), var(--color-bear), var(--color-bear-soft) ); position: relative; margin: 12px 0 8px; } .mrd-risk-pointer { position: absolute; top: -2px; width: 14px; height: 14px; background: var(--color-c-15803d); border: 2px solid white; border-radius: 50%; box-shadow: 0 2px 6px var(--color-shadow); } /* Risk-bar labels (Very Low / Low / Neutral / Elevated / High): keep all 5 on one line, prevent mid-word wraps. */ .mrd-risk-bar-labels span { white-space: nowrap; font-size: 11px; letter-spacing: -0.01em; } /* WAS */ .mrd-was-box { height: 96px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--color-c-e7ebf3); background: var(--color-surface-soft); } .mrd-was-box h2 { font-size: 32px; font-weight: 700; color: var(--color-c-111111); margin-bottom: 4px; } /* Subscores */ .mrd-subscores { display: flex; border: 1px solid var(--color-c-e7ebf3); border-radius: 12px; overflow: hidden; } .mrd-sub { flex: 1; text-align: center; padding: 12px 6px; background: var(--color-c-fafbfc); } .mrd-sub:not(:last-child) { border-right: 1px solid var(--color-border); } .mrd-val { font-weight: 700; font-size: 15px; } .mrd-lbl { font-size: 12px; color: var(--color-c-6b7280); } /* Score Colors */ .mrd-score-positive { color: var(--color-bull-soft); font-weight: 600; white-space: nowrap; font-size: 12px; } .mrd-score-negative { color: var(--color-bear-soft); font-weight: 600; white-space: nowrap; font-size: 12px; } .mrd-score-neutral { color: var(--color-c-eab308); font-weight: 600; white-space: nowrap; font-size: 12px; } /* Section Headers */ .mrd-section-header { padding: 12px 16px; font-weight: 600; font-size: 15px; display: flex; justify-content: space-between; color: var(--color-white); align-items: center; background: linear-gradient( to right, var(--color-c-0047ff), var(--color-brand-tint) ); } /* VIX Data Alignment */ .mrd-vix-data { display: flex; align-items: center; column-gap: 7px; font-size: 14px; } /* Card Custom (Third Row) */ .mrd-card-custom { height: 100%; border-radius: 15px; overflow: hidden; background: var(--color-white); border: 1px solid var(--color-border-soft); box-shadow: 0 4px 20px -5px var(--color-shadow); transition: all 0.3s ease; } .mrd-card-custom:hover { transform: translateY(-3px); box-shadow: 0 10px 25px var(--color-shadow); } .mrd-list-item { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--color-surface-softer); font-size: 14.5px; column-gap: 15px; } .mrd-list-item:last-child { border-bottom: none; } .modal-header.all-stocks-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 52px 20px 10px; } .close-button { position: absolute; top: 0px; right: 0px; z-index: 111; margin: 20px; } /* ============================================================ TOC 11. PAGE: DASHBOARD (redesign) DASHBOARD REDESIGN - Market & Sectors / Crash Risk / Insight (Matches provided design image; same theme, no func changes) ============================================================ */ /* Section card wrapper (Market & Sectors Overview) */ .dash-section-card { background: var(--color-white); border: 1px solid var(--color-border-card); border-radius: 14px; padding: 18px 14px 12px; box-shadow: 0 1px 2px var(--color-ink-tint); position: relative; } .dash-section-card__head { display: flex; flex-direction: column; gap: 2px; padding-left: 12px; margin-bottom: 14px; position: relative; } .dash-section-card__head::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; border-radius: 3px; background: var(--color-brand-primary); } .dash-section-card__title { font-size: 17px; font-weight: 700; color: var(--color-text-strong); margin: 0; line-height: 1.2; } .dash-section-card__sub { font-size: 12px; color: var(--color-text-subtle); margin: 0; } .dash-section-card__head--with-action { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 16px; } .dash-section-card__action { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; border: 1px solid var(--color-c-dbe3ff); border-radius: 999px; background: var(--color-brand-tint-bg); color: var(--color-brand-primary); font-size: 12px; font-weight: 700; padding: 7px 12px; line-height: 1; transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease; } .dash-section-card__action:hover { background: var(--color-c-e0e7ff); border-color: var(--color-c-c7d2fe); transform: translateY(-1px); } .dashboard-sector-popup { max-width: 920px; } .dashboard-sector-popup__body { max-height: min(68vh, 640px); overflow-y: auto; padding: 18px; background: var(--color-white); } /* ────────────────────────────────────────────── Sector mini-card (image-accurate redesign) ────────────────────────────────────────────── */ .sector-card { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; background: var(--color-white); border: 1px solid var(--color-border-card); border-radius: 12px; padding: 14px 14px; min-height: 96px; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; position: relative; overflow: hidden; } .sector-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px var(--color-brand-tint); border-color: var(--color-c-d6dbeb); } .sector-card__icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sector-card__icon svg { width: 22px; height: 22px; } .sector-card__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .sector-card__row1 { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .sector-card__name { font-size: 13px; font-weight: 600; color: var(--color-text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .sector-card__symbol { font-size: 11px; font-weight: 600; color: var(--color-text-faint); letter-spacing: 0.3px; flex-shrink: 0; } .sector-card__price { font-size: 19px; font-weight: 700; color: var(--color-text-strong); letter-spacing: -0.2px; line-height: 1.1; } .sector-card__change { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 600; margin-top: 2px; } .sector-card__change.is-up { color: var(--color-bull); } .sector-card__change.is-down { color: var(--color-bear); } /* ────────────────────────────────────────────── Crash Risk Overlay (dark navy card) ────────────────────────────────────────────── */ .crash-risk-card { background: linear-gradient( 160deg, var(--color-c-2739bb) 0%, var(--color-c-101c5b) 55%, var(--color-c-1a2363) 100% ); border-radius: 16px; padding: 18px 18px 16px; color: var(--color-white); position: relative; overflow: hidden; box-shadow: 0 10px 30px var(--color-brand-tint); min-height: 320px; } .crash-risk-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient( circle at 90% 0%, var(--color-violet-tint) 0%, transparent 45% ), radial-gradient( circle at 0% 100%, var(--color-indigo-tint) 0%, transparent 45% ); pointer-events: none; } .crash-risk-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; position: relative; z-index: 1; } .crash-risk-card__title { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--color-white); margin: 0; } .crash-risk-card__gauge-link { display: block; text-decoration: none; } .crash-risk-card__gauge { display: flex; align-items: center; justify-content: center; padding: 4px 8px 0; position: relative; z-index: 1; } .crash-risk-card__gauge .risk-speedometer-score { display: none; } .crash-risk-card__gauge svg text { fill: var(--color-white) !important; } .crash-risk-card__score-row { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin-top: 4px; position: relative; z-index: 1; } .crash-risk-card__score-label { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; color: var(--color-border-strong); } .crash-risk-card__score-val { font-size: 26px; font-weight: 600; color: var(--color-white); letter-spacing: -0.5px; } .crash-risk-card__band-wrap { display: flex; justify-content: center; margin-top: 8px; position: relative; z-index: 1; } .crash-risk-card__band { display: inline-block; padding: 5px 18px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.3px; border: 1px solid transparent; } /* ============================================================ Market & Sectors Overview - responsive tuning Scoped to `.marketing-sector` (and the popup that reuses `.sector-card`) so other surfaces using the same primitives (detail page, market-risk page, etc.) are unaffected. ============================================================ */ /* Small desktop / large tablet (col-lg-8 still split 8/4): the sector mini-cards live 2-up inside roughly 66% of the viewport, which is tight at 992-1199px. Trim padding + icon so the price/change never collide with the symbol pill. */ @media (max-width: 1199.98px) { .marketing-sector .sector-card { grid-template-columns: 40px 1fr; gap: 10px; padding: 12px; min-height: 88px; } .marketing-sector .sector-card__icon { width: 40px; height: 40px; } .marketing-sector .sector-card__icon svg { width: 20px; height: 20px; } .marketing-sector .sector-card__name { font-size: 12.5px; } .marketing-sector .sector-card__symbol { font-size: 10.5px; } .marketing-sector .sector-card__price { font-size: 17px; } } /* Tablet (col-lg-* collapses to col-12, the two cards stack). Loosen the crash-risk min-height so it is not taller than its contents once it spans the full viewport, and keep the gauge visually centred on wider tablets. */ @media (max-width: 991.98px) { .marketing-sector .dash-section-card { padding: 16px 14px 12px; } .marketing-sector .crash-risk-card { min-height: auto; padding: 16px 16px 14px; } .marketing-sector .crash-risk-card__gauge { max-width: 360px; margin: 0 auto; } } /* Phone landscape and below (col-md-6 collapses to col-12 -> 1-up). Stack the title block above the "View All" pill so the header never overlaps, and shrink the sector card chrome to match. */ @media (max-width: 575.98px) { .marketing-sector .dash-section-card__head--with-action { flex-wrap: wrap; gap: 10px; } .marketing-sector .dash-section-card__head--with-action > div { min-width: 0; flex: 1 1 100%; } .marketing-sector .dash-section-card__action { margin-left: auto; padding: 6px 11px; font-size: 11.5px; } .marketing-sector .sector-card { grid-template-columns: 38px 1fr; gap: 10px; padding: 11px 12px; min-height: 78px; } .marketing-sector .sector-card__icon { width: 38px; height: 38px; border-radius: 9px; } .marketing-sector .sector-card__icon svg { width: 18px; height: 18px; } .marketing-sector .sector-card__row1 { flex-wrap: wrap; gap: 2px 8px; } .marketing-sector .sector-card__name { font-size: 12.5px; flex: 1 1 100%; } .marketing-sector .sector-card__price { font-size: 16px; } .marketing-sector .sector-card__change { font-size: 11.5px; } .marketing-sector .crash-risk-card__score-val { font-size: 22px; } } /* Very narrow phones (<=360px) - final safety net so the title, subtitle and pill do not clip on devices like older iPhones. */ @media (max-width: 360px) { .marketing-sector .dash-section-card__title { font-size: 15px; } .marketing-sector .dash-section-card__sub { font-size: 11px; } .marketing-sector .dash-section-card__action { font-size: 11px; padding: 6px 10px; } } /* The "All sectors" popup reuses `.sector-card` but its grid is constrained by the modal width, not the dashboard column. Apply the same compact treatment when the modal collapses to 1-up. */ @media (max-width: 575.98px) { .dashboard-sector-popup .sector-card { grid-template-columns: 38px 1fr; gap: 10px; padding: 11px 12px; min-height: 78px; } .dashboard-sector-popup .sector-card__icon { width: 38px; height: 38px; } .dashboard-sector-popup .sector-card__icon svg { width: 18px; height: 18px; } .dashboard-sector-popup .sector-card__row1 { flex-wrap: wrap; gap: 2px 8px; } .dashboard-sector-popup .sector-card__name { font-size: 12.5px; flex: 1 1 100%; } .dashboard-sector-popup .sector-card__price { font-size: 16px; } } /* ────────────────────────────────────────────── Dashboard table card (dark header strip) ────────────────────────────────────────────── */ .dash-table-card { background: var(--color-white); border: 1px solid var(--color-border-card); border-radius: 14px; overflow: visible; box-shadow: 0 1px 2px var(--color-ink-tint); } .dash-table-card__head { display: flex; align-items: center; justify-content: space-between; background: linear-gradient(135deg, #0b28bf 0%, #1530c7 50%, #0b28bf 100%); color: var(--color-white); padding: 14px 20px; position: relative; border-top-left-radius: 14px; border-top-right-radius: 14px; } .dash-table-card__head::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 3px; background: var(--color-c-6366f1); } .dash-table-card--bearish .dash-table-card__head::before { background: var(--color-bear); } .dash-table-card__title { font-size: 15px; font-weight: 700; margin: 0; color: var(--color-white); padding-left: 10px; } .dash-table-card__see-all { color: var(--color-white); font-size: 12px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 8px; border: 1.5px solid var(--color-highlight); background: var(--color-highlight); box-shadow: 0 1px 6px var(--color-highlight), inset 0 0 0 1px var(--color-highlight); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease; } .dash-table-card__see-all:hover { background: var(--color-highlight); border-color: var(--color-white); color: var(--color-white); transform: translateY(-1px); box-shadow: 0 3px 12px var(--color-highlight), inset 0 0 0 1px var(--color-highlight); } .dash-table-card__see-all:active { transform: translateY(0); box-shadow: 0 1px 4px var(--color-highlight); } /* Standalone "View All Stocks" rendered on light page bg (outside the dark `.dash-table-card__head`). Translucent-white default styling vanishes on light bg, so force a solid brand-blue pill here. */ .userprotofolio .dash-table-card__see-all, .userprotofolio .dash-table-card__see-all:hover, .userprotofolio .dash-table-card__see-all:focus { background: var(--color-brand-primary); border-color: var(--color-brand-primary); color: var(--color-white); } .userprotofolio .dash-table-card__see-all:hover { background: var(--color-brand-primary-hover); border-color: var(--color-brand-primary-hover); transform: translateY(-1px); } .dash-table-card .table-responsive { background: var(--color-white); border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; } .dash-table-card .stock-table { margin: 0; table-layout: auto; width: 100%; } .dash-table-card .stock-table thead { background: var(--color-surface-soft); } .dash-table-card .stock-table thead th { background: var(--color-surface-soft); color: var(--color-text-subtle); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; border-bottom: 1px solid var(--color-border-card); padding: 12px 14px; vertical-align: middle; text-align: left; } .dash-table-card .stock-table tbody td { padding: 14px 14px; border-bottom: 1px solid var(--color-surface-softer); vertical-align: middle; text-align: left; } /* Column widths + per-column alignment overrides (Existing .stock-table rules use 15% center for col 5, which doesn't fit the new change+sparkline cell. Override only inside .dash-table-card.) */ .dash-table-card .stock-table th:nth-child(1), .dash-table-card .stock-table td:nth-child(1) { width: 54px; text-align: center; } .dash-table-card .stock-table th:nth-child(2), .dash-table-card .stock-table td:nth-child(2) { width: 34%; text-align: left; } .dash-table-card .stock-table th:nth-child(3), .dash-table-card .stock-table td:nth-child(3) { width: 12%; text-align: left; } .dash-table-card .stock-table th:nth-child(4), .dash-table-card .stock-table td:nth-child(4) { width: 24%; text-align: left; } .dash-table-card .stock-table th:nth-child(5), .dash-table-card .stock-table td:nth-child(5) { width: 14%; text-align: left; } .dash-table-card .stock-table th:nth-child(6), .dash-table-card .stock-table td:nth-child(6) { width: 86px; text-align: center; } .dash-table-card .stock-table tbody tr:last-child td { border-bottom: none; } .dash-table-card .stock-table tbody tr { cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease; } .dash-table-card .stock-table tbody tr td { transition: background-color 0.18s ease, color 0.18s ease; } /* Unified row hover (shared with seeall / screeners / portfolio). */ .dash-table-card .stock-table tbody tr.dashboard-linked-row:hover td, .dash-table-card .stock-table tbody tr.dashboard-linked-row:focus-visible td { --bs-table-bg: var(--color-brand-tint); background-color: var(--color-brand-tint) !important; } .dash-table-card .stock-table tbody tr.dashboard-linked-row:hover .stock-name, .dash-table-card .stock-table tbody tr.dashboard-linked-row:focus-visible .stock-name { color: var(--color-text-strong); } .dash-table-card .stock-table tbody tr:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: -2px; } .dash-table-card--bearish .stock-table tbody tr:focus-visible { outline-color: var(--color-bear); } /* Row index "1, 2, 3..." pill */ .dash-table-card .row-no { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--color-brand-tint-bg); color: var(--color-brand-primary); font-size: 12px; font-weight: 700; } .dash-table-card--bearish .row-no { background: var(--color-c-fef2f2); color: var(--color-bear-soft); } /* Sector cell with icon */ .sector-cell { display: inline-flex; align-items: center; gap: 8px; } .sector-cell__icon { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .sector-cell__icon svg { width: 16px; height: 16px; } /* Score pill */ .score-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 26px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.2px; } .score-pill--bull { background: var(--color-bull-bright-tint); color: var(--color-bull); border: 1px solid var(--color-bull-bright-tint); } .score-pill--bear { background: var(--color-bear-tint); color: var(--color-bear-soft); border: 1px solid var(--color-bear-tint); } .score-pill--neutral { background: var(--color-slate-tint); color: var(--color-text-muted); border: 1px solid var(--color-slate-tint); } /* ────────────────────────────────────────────── Tighter MarketSentiment polish (works with existing widget) ────────────────────────────────────────────── */ .dash-section-card + .mt-3 .mkt-sent-container, .mkt-sent-container { border-radius: 14px; border: 1px solid var(--color-border-card); box-shadow: 0 1px 2px var(--color-ink-tint); } /* ────────────────────────────────────────────── Make the col-md-8 / col-md-4 area align nicely ────────────────────────────────────────────── */ /* .marketing-sector .dash-section-card, .marketing-sector .crash-risk-card { height: 100%; } */ /* Force consistent text color in stock-info inside redesigned table */ .dash-table-card .stock-info a, .dash-table-card .stock-info { color: var(--color-text-strong); text-decoration: none; } .dash-table-card .stock-info img { width: 32px; height: 32px; object-fit: contain; border-radius: 8px; background: var(--color-white); border: 1px solid var(--color-border-card); padding: 2px; } .dash-table-card .stock-name { font-size: 13px; color: var(--color-text-strong); } .dash-table-card .stock-symbol { display: inline-block; font-size: 11px; color: var(--color-text-subtle); background: var(--color-surface-softer); padding: 1px 8px; border-radius: 6px; margin-top: 2px; font-weight: 600; } /* Price text inside redesigned table */ .dash-table-card .price { font-size: 14px; font-weight: 700; color: var(--color-text-strong); } .dash-table-card .usd { color: var(--color-text-faint); font-weight: 600; } /* ============================================================ TOC 12. SHARED — Market Sentiment (consumed by dashboard) MARKET SENTIMENT - redesigned (matches provided image) - Header w/ icon + title + total - Strong Signals heading w/ yellow bolt - 5-column main: bull illust | bull stat | donut | bear stat | bear illust - Denser segmented bar at bottom - Overrides earlier .mkt-sent-* rules where needed (higher specificity) ============================================================ */ .mkt-sent-container { background: var(--color-white); border-radius: 14px; padding: 18px 18px 14px; box-shadow: 0 0 20px -5px var(--color-shadow); border: 1px solid var(--color-border-card); overflow: hidden; } .mkt-sent-header-wrapper { display: flex; align-items: center; justify-content: space-between; padding-bottom: 6px; margin-bottom: 0; gap: 12px; } .mkt-sent-header { margin-bottom: 0; flex: 1; min-width: 0; } .mkt-sent-title { display: inline-flex; align-items: center; gap: 12px; color: var(--color-text-strong); } .mkt-sent-title-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 9px; background: var(--color-indigo-tint); color: var(--color-c-6366f1); flex-shrink: 0; } .mkt-sent-title-icon svg { width: 20px; height: 20px; } .mkt-sent-title-text { display: flex; flex-direction: column; gap: 2px; font-size: 17px; font-weight: 700; color: var(--color-text-strong); line-height: 1.15; } .mkt-sent-total-count { display: block; font-size: 12.5px; font-weight: 500; color: var(--color-c-6b7280); margin-top: 1px; } .mkt-sent-stats-row { display: flex; align-items: center; justify-content: center; padding: 0; column-gap: 14px; flex-shrink: 0; flex-wrap: nowrap; } .mkt-sent-divider { width: 1px; height: 20px; background-color: var(--color-border); } /* Strong Signals heading — centered with yellow bolt */ .mkt-sent-signals-heading { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; font-size: 15px; font-weight: 700; color: var(--color-text-strong); margin: 16px 0 14px; text-align: center; } .mkt-sent-signals-bolt { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: var(--color-c-eab308); } .mkt-sent-signals-bolt svg { width: 18px; height: 18px; } /* Main visual row: bullish stat | donut | bearish stat (centered group) */ .mkt-sent-main { position: relative; display: flex; align-items: center; justify-content: space-evenly; gap: 24px; padding: 22px 18px; border-radius: 12px; overflow: hidden; background: linear-gradient( 90deg, var(--color-bull-soft-tint) 0%, var(--color-bull-soft-tint) 38%, var(--color-bear-soft-tint) 62%, var(--color-bear-soft-tint) 100% ); } /* Stat blocks (number + label + percent pill) */ .mkt-sent-stat-block { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1 1 0; min-width: 0; max-width: 220px; gap: 4px; text-align: center; padding: 6px 10px; position: relative; background: transparent; border: 1px solid transparent; border-radius: 12px; overflow: hidden; transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; font: inherit; color: inherit; } .mkt-sent-stat-block--clickable { cursor: pointer; } .mkt-sent-stat-block--clickable:hover, .mkt-sent-stat-block.is-open { background: var(--color-highlight); border-color: var(--color-border-card); box-shadow: 0 4px 14px var(--color-ink-tint); } .mkt-sent-stat-block--clickable:focus-visible { outline: 2px solid var(--color-c-6366f1); outline-offset: 2px; } @keyframes mktSentPopupIn { from { opacity: 0; transform: translateX(-50%) translateY(-4px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } .mkt-sent-big-num { font-size: 38px; font-weight: 600; line-height: 1; letter-spacing: -1px; } .mkt-sent-big-num--bull { color: var(--color-bull-bright); } /* Strong Bullish state: cohesive green block. The big number, the percent pill and the label all use `--color-bull-bright` (#2CC56F) so the entire block reads as the "strong" tier of the bullish ramp. */ .mkt-sent-stat-block--strong-bullish .mkt-sent-stat-label { color: var(--color-bull-bright); } /* Strong Bearish state: red mirror of the bull block — value, label and pct-pill all use `--color-bear-bright` (#C52F2C) for the "strong" tier of the bearish ramp. */ .mkt-sent-stat-block--strong-bearish .mkt-sent-stat-label { color: var(--color-bear-bright); } .mkt-sent-big-num--bear { color: var(--color-bear-bright); } .mkt-sent-stat-label { font-size: 13px; font-weight: 600; color: var(--color-text-strong); margin-top: 2px; } .mkt-sent-pct-pill { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.2px; border: 1px solid transparent; } .mkt-sent-pct-pill--bull { background: var(--color-bull-bright-tint); color: var(--color-bull-bright); border-color: var(--color-bull-bright-tint); } .mkt-sent-pct-pill--bear { background: var(--color-bear-bright-tint); color: var(--color-bear-bright); border-color: var(--color-bear-bright-tint); } /* Center donut chart */ .mkt-sent-donut-wrap { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 0 6px; } .mkt-sent-donut { width: 92px; height: 92px; border-radius: 50%; position: relative; box-shadow: 0 6px 18px var(--color-ink-tint); } .mkt-sent-donut::before { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: var(--color-white); box-shadow: inset 0 0 0 1px var(--color-surface-softer); } .mkt-sent-donut-inner { position: absolute; inset: 14px; display: flex; align-items: center; justify-content: center; border-radius: 50%; z-index: 1; } .mkt-sent-donut-inner svg { width: 26px; height: 26px; color: var(--color-c-6366f1); } /* Denser segmented bar (80 segments) */ .mkt-sent-grid-bar { display: flex; height: 18px; gap: 2px; margin: 14px 0 4px; } .mkt-sent-bar-segment { flex: 1; height: 100%; border-radius: 2px; } /* ============================================================ TOC 13. PAGE: SCREENERS — Results Table (dashboard-style) Targets only the results card; curated lists & filters untouched. ============================================================ */ .screener-results-card { background: var(--color-white); border: 1px solid var(--color-border-card); border-radius: 14px; overflow: visible; box-shadow: 0 1px 2px var(--color-ink-tint); margin-top: 0; } /* Dark navy header strip (matches dashboard's .dash-table-card__head) */ .screener-results-card__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: linear-gradient(135deg, #0b28bf 0%, #1530c7 50%, #0b28bf 100%); color: var(--color-white); padding: 14px 20px; position: relative; border-top-left-radius: 14px; border-top-right-radius: 14px; } .screener-results-card__head::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 3px; background: var(--color-c-6366f1); } .screener-results-card__head-text { display: flex; flex-direction: column; padding-left: 10px; min-width: 0; flex: 1; } .screener-results-card__title { font-size: 15px; font-weight: 700; color: var(--color-white); margin: 0; line-height: 1.2; } .screener-results-card__sub { font-size: 12px; color: var(--color-c-cfd5ff); margin-top: 2px; font-weight: 500; } .screener-results-card__export { display: inline-flex; align-items: center; gap: 6px; background: var(--color-highlight); color: var(--color-white); font-size: 12px; font-weight: 700; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--color-highlight); transition: background 0.2s ease, transform 0.2s ease; white-space: nowrap; } .screener-results-card__export:hover { background: var(--color-highlight); transform: translateY(-1px); } .screener-results-card__export svg { font-size: 12px; } /* ─── Table body ────────────────────────────────────────── */ .screener-results-card .table-responsive { background: var(--color-white); border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; } .screener-results-card .screener-results-table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; } .screener-results-card .screener-results-table thead { background: var(--color-surface-soft); } .screener-results-card .screener-results-table thead th { background: var(--color-surface-soft); color: var(--color-text-subtle); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; border-bottom: 1px solid var(--color-border-card); padding: 12px 16px; vertical-align: middle; text-align: left; white-space: nowrap; } .screener-results-card .screener-results-table tbody td { padding: 13px 16px; border-bottom: 1px solid var(--color-surface-softer); vertical-align: middle; text-align: left; font-size: 13px; color: var(--color-text-strong); } .screener-results-card .screener-results-table tbody tr:last-child td { border-bottom: none; } /* Row hover intentionally removed for Screeners results table. Rows have NO hover background and NO transition (per UX request). */ /* Ticker pill */ .screener-ticker-pill { display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--color-brand-primary); background: var(--color-brand-tint-bg); padding: 5px 10px; border-radius: 8px; letter-spacing: 0.4px; border: 1px solid var(--color-c-dde3ff); } /* Name cell */ .screener-name-cell { font-weight: 600; color: var(--color-text-strong); max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Signal pill */ .screener-signal-pill { display: inline-flex; align-items: center; justify-content: center; padding: 5px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.2px; white-space: nowrap; } .screener-signal-pill--strong-bull { background: var(--color-bull-tint); color: var(--color-c-15803d); border: 1px solid var(--color-bull-tint); } .screener-signal-pill--bull { background: var(--color-bull-bright-tint); color: var(--color-bull); border: 1px solid var(--color-bull-bright-tint); } .screener-signal-pill--neutral { background: rgba(234, 179, 8, 0.12); color: #a16207; border: 1px solid rgba(234, 179, 8, 0.2); } .screener-signal-pill--bear { background: var(--color-bear-tint); color: var(--color-bear-soft); border: 1px solid var(--color-bear-tint); } .screener-signal-pill--strong-bear { background: var(--color-bear-tint); color: var(--color-bear-strong); border: 1px solid var(--color-bear-tint); } /* Score cell w/ gradient bar + value pill */ .screener-score-cell { display: inline-flex; align-items: center; gap: 10px; min-width: 130px; } .screener-score-bar { flex: 1; height: 6px; background: var(--color-surface-softer); border-radius: 999px; overflow: hidden; min-width: 70px; } .screener-score-bar__fill { height: 100%; background: linear-gradient( 90deg, var(--color-brand-primary) 0%, var(--color-c-4f46e5) 100% ); border-radius: 999px; transition: width 0.4s ease; } .screener-score-value { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--color-brand-primary); background: var(--color-brand-tint-bg); border: 1px solid var(--color-c-dde3ff); } /* Sector (plain text but consistent weight) */ .screener-sector-cell { color: var(--color-c-1f2937); font-weight: 600; font-size: 13px; } /* Price */ .screener-price { font-size: 13px; font-weight: 700; color: var(--color-text-strong); white-space: nowrap; } .screener-price__usd { color: var(--color-text-faint); font-weight: 600; margin-right: 2px; } /* Change cell w/ carets */ .screener-change { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 700; white-space: nowrap; } .screener-change.is-up { color: var(--color-bull); } .screener-change.is-down { color: var(--color-bear); } /* Empty state */ .screener-empty { text-align: center; padding: 36px 20px; font-size: 13px; font-weight: 500; color: var(--color-text-subtle); } /* ============================================================ TOC 14. PAGE: SCREENERS — Curated List Popup (redesigned) Scoped to .screener-popup so other modals are untouched. ============================================================ */ .screener-popup.modal-container-custom { max-width: 720px; max-height: 86vh; border-radius: 18px; background: var(--color-white); box-shadow: 0 30px 60px var(--color-ink-tint); overflow: hidden !important; overflow-y: hidden !important; overflow-x: hidden !important; overscroll-behavior: contain; touch-action: auto; display: flex; flex-direction: column; } .screener-popup .screener-card { padding: 0; display: flex; flex-direction: column; min-height: 0; height: 100%; flex: 1; overflow: hidden; } /* ── Header ─────────────────────────────────────────────── */ .screener-popup__header { position: relative; padding: 22px 24px 22px; background: linear-gradient( 135deg, var(--color-c-eff6ff) 0%, var(--color-white) 65% ); border-bottom: 1px solid var(--color-brand-tint-bg); display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; overflow: hidden; flex-shrink: 0; } .screener-popup--bear .screener-popup__header { background: linear-gradient( 135deg, var(--color-c-fef2f2) 0%, var(--color-white) 65% ); border-bottom-color: var(--color-c-fee2e2); } .screener-popup__header-left { display: flex; gap: 14px; align-items: flex-start; position: relative; z-index: 2; flex: 1; min-width: 0; } .screener-popup__title-icon { width: 46px; height: 46px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient( 135deg, var(--color-c-dbeafe) 0%, var(--color-c-bfdbfe) 100% ); color: var(--color-brand-primary); font-size: 19px; flex-shrink: 0; border: 1px solid var(--color-brand-tint); } .screener-popup--bear .screener-popup__title-icon { background: linear-gradient( 135deg, var(--color-c-fee2e2) 0%, var(--color-c-fecaca) 100% ); color: var(--color-bear); border-color: var(--color-bear-tint); } /* Bull-direction popup — green theme owned by `screener-popup--bull`. Covers both Top Buys and Weekly Gainers (the two curated lists that open with an up-trend arrow) so the header, icon, count, row-arrow and ticker pill all read as green. */ .screener-popup--bull .screener-popup__header { background: linear-gradient( 135deg, var(--color-c-f0fdf4) 0%, var(--color-white) 65% ); border-bottom-color: var(--color-bull-tint); } .screener-popup--bull .screener-popup__title-icon { background: linear-gradient( 135deg, var(--color-c-dcfce7) 0%, var(--color-c-bbf7d0) 100% ); color: var(--color-bull); border-color: var(--color-bull-tint); } .screener-popup--bull .screener-popup__count { color: var(--color-bull); } .screener-popup--bull .screener-popup__row-arrow { background: var(--color-bull-tint); color: var(--color-bull); border-color: var(--color-bull-tint); } .screener-popup--bull .screener-popup__row.stock-inventory-list:hover .screener-popup__row-arrow { background: var(--color-bull-tint); } .screener-popup--bull .screener-popup__ticker.stock-inventory-symbol { background: var(--color-bull); } /* Bear-direction popup — red parity for the bull palette above. Covers Top Sells and Weekly Losers. Header + icon already styled above; this block extends to the count and ticker pill so the whole popup reads as red, not just the header chrome. */ .screener-popup--bear .screener-popup__count { color: var(--color-bear); } .screener-popup--bear .screener-popup__ticker.stock-inventory-symbol { background: var(--color-bear); } .screener-popup__title-text { min-width: 0; } .screener-popup .screener-card-title { font-size: 26px; font-weight: 600; color: var(--color-text-strong); margin: 0 0 4px; line-height: 1.15; letter-spacing: -0.4px; } .screener-popup .screener-card-subtitle { font-size: 13px; color: var(--color-text-subtle); margin: 0; font-weight: 500; } /* Close button */ .screener-popup__close.btn-close { width: 32px; height: 32px; border-radius: 50%; background-color: var(--color-white); border: 1px solid var(--color-border-card); box-shadow: 0 2px 8px var(--color-ink-tint); position: relative; z-index: 3; background-size: 14px; background-position: center; background-repeat: no-repeat; opacity: 1; flex-shrink: 0; transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .screener-popup__close.btn-close:hover { background-color: var(--color-surface-soft); border-color: var(--color-border-strong); transform: scale(1.05); } /* ── Body ──────────────────────────────────────────────── */ .screener-popup__body { padding: 18px 24px 22px; display: flex; flex-direction: column; min-height: 0; flex: 1; overflow: hidden; } .screener-popup__body-title { font-size: 15px; font-weight: 700; color: var(--color-text-strong); margin: 0 0 12px; flex-shrink: 0; } .screener-popup__count { color: var(--color-brand-primary); font-weight: 600; margin-left: 2px; } /* Scrollable list */ .screener-popup__list { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 0; max-height: 60vh; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain; overscroll-behavior-y: contain; -webkit-transform: translateZ(0); transform: translateZ(0); padding: 2px 8px 4px 2px; margin: 0 -8px 0 -2px; scrollbar-width: thin; scrollbar-color: var(--color-c-c7d2fe) var(--color-surface-softer); } .screener-popup__list::-webkit-scrollbar { width: 6px; } .screener-popup__list::-webkit-scrollbar-track { background: var(--color-surface-softer); border-radius: 999px; } .screener-popup__list::-webkit-scrollbar-thumb { background: var(--color-c-c7d2fe); border-radius: 999px; } .screener-popup__list::-webkit-scrollbar-thumb:hover { background: var(--color-c-a5b4fc); } /* Row */ .screener-popup__row.stock-inventory-list { background: var(--color-white); border: 1px solid var(--color-border-card); border-radius: 8px; padding: 10px 14px; margin: 0; display: flex; align-items: center; gap: 14px; justify-content: flex-start; touch-action: pan-y; transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; } .screener-popup__row.stock-inventory-list:hover { border-color: var(--color-c-c7d2fe); background: var(--color-c-fafbff); box-shadow: 0 4px 12px var(--color-brand-tint); transform: translateX(2px); } /* Ticker pill */ .screener-popup__ticker.stock-inventory-symbol { display: inline-flex; align-items: center; justify-content: center; min-width: 72px; padding: 7px 12px; background: var(--color-brand-primary); color: var(--color-white); font-size: 12px; font-weight: 600; letter-spacing: 0.6px; border-radius: 5px; flex-shrink: 0; } /* Name */ .screener-popup__name.stock-inventory-name { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--color-c-1f2937); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Trailing arrow icon */ .screener-popup__row-arrow { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; background: var(--color-brand-tint); color: var(--color-brand-primary); border: 1px solid var(--color-brand-tint); transition: transform 0.2s ease, background 0.2s ease; } .screener-popup__row.stock-inventory-list:hover .screener-popup__row-arrow { transform: scale(1.08); background: var(--color-brand-tint); } .screener-popup__row-arrow.is-down { background: var(--color-bear-tint); color: var(--color-bear); border-color: var(--color-bear-tint); } .screener-popup__row.stock-inventory-list:hover .screener-popup__row-arrow.is-down { background: var(--color-bear-tint); } /* Empty state inside scrollable list */ .screener-popup__empty-state { text-align: center; padding: 28px 12px; font-size: 13px; font-weight: 500; color: var(--color-text-faint); background: var(--color-c-fafbff); border: 1px dashed var(--color-border-card); border-radius: 12px; } /* ============================================================ TOC 15. SHARED (currently UNUSED) — Global Market Bar Targets the plu-design component which is NOT mounted under the current Header — current app keeps . Kept verbatim so the redesign can be turned on later without re-importing the stylesheet. "Command Strip" creative redesign: Floating tab-style bar with icon-enhanced segments, animated underline indicator, glassy country chip and gradient filters CTA. ============================================================ */ .gm-bar { width: 100%; background: radial-gradient( circle at 15% 0%, var(--color-brand-tint) 0%, transparent 55% ), radial-gradient( circle at 85% 100%, var(--color-indigo-tint) 0%, transparent 55% ), linear-gradient(180deg, var(--color-white) 0%, var(--color-c-f8faff) 100%); border-top: 1px solid var(--color-c-eef0f4); border-bottom: 1px solid var(--color-c-eef0f4); padding: 12px 0 14px; position: relative; z-index: 100; overflow: hidden; } /* Subtle dotted texture overlay for premium feel */ .gm-bar::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient( var(--color-brand-tint) 1px, transparent 1px ); background-size: 18px 18px; background-position: 0 0; opacity: 0.4; pointer-events: none; mask-image: linear-gradient(180deg, var(--color-shadow) 0%, transparent 90%); -webkit-mask-image: linear-gradient( 180deg, var(--color-shadow) 0%, transparent 90% ); } /* Bottom accent gradient line — distinctive separator */ .gm-bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient( 90deg, transparent 0%, var(--color-brand-tint) 20%, var(--color-indigo-tint) 50%, var(--color-brand-tint) 80%, transparent 100% ); } .gm-bar__container { display: flex; align-items: center; gap: 18px; flex-wrap: nowrap; position: relative; z-index: 2; } /* ─── Country dropdown — glassy chip with accent stripe ── */ .gm-bar__country { position: relative; flex-shrink: 0; } .gm-country-btn { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient( 135deg, var(--color-white) 0%, var(--color-c-f8faff) 100% ); border: 1px solid var(--color-c-e2e6f3); border-radius: 10px; padding: 8px 14px 8px 6px; font-size: 13px; font-weight: 600; color: var(--color-text-strong); cursor: pointer; position: relative; transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, transform 0.18s ease; white-space: nowrap; } .gm-country-btn:hover { border-color: var(--color-c-c7d2fe); background: linear-gradient( 135deg, var(--color-white) 0%, var(--color-brand-tint-bg) 100% ); transform: translateY(-1px); box-shadow: 0 1px 0 var(--color-highlight) inset, 0 6px 14px var(--color-brand-tint); } .gm-country-btn.is-open { border-color: var(--color-brand-primary); box-shadow: 0 0 0 3px var(--color-brand-tint), 0 6px 14px var(--color-brand-tint); } /* Globe icon sits inside a tinted circle — fintech app feel */ .gm-country-btn__icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient( 135deg, var(--color-brand-primary) 0%, var(--color-c-4f46e5) 100% ); color: var(--color-white); font-size: 12px; box-shadow: 0 4px 10px var(--color-brand-tint); flex-shrink: 0; } .gm-country-btn__flag { font-size: 16px; line-height: 1; filter: drop-shadow(0 1px 1px var(--color-ink-tint)); } .gm-country-btn__label { font-weight: 700; letter-spacing: 0.4px; color: var(--color-text-strong); font-size: 12.5px; text-transform: uppercase; } .gm-country-btn__caret { display: inline-flex; align-items: center; color: var(--color-text-faint); font-size: 10px; transition: transform 0.25s ease, color 0.2s ease; } .gm-country-btn:hover .gm-country-btn__caret, .gm-country-btn.is-open .gm-country-btn__caret { color: var(--color-brand-primary); } .gm-country-btn.is-open .gm-country-btn__caret { transform: rotate(180deg); } .gm-country-menu { position: absolute; top: calc(100% + 10px); left: 0; min-width: 240px; background: var(--color-white); border: 1px solid var(--color-c-e2e6f3); border-radius: 14px; box-shadow: 0 24px 48px var(--color-brand-tint), 0 4px 12px var(--color-ink-tint); padding: 8px; margin: 0; list-style: none; z-index: 200; animation: gmMenuIn 0.2s cubic-bezier(0.16, 1, 0.3, 1); overflow: hidden; } .gm-country-menu::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient( 90deg, var(--color-brand-primary) 0%, var(--color-c-4f46e5) 50%, var(--color-c-6366f1) 100% ); } @keyframes gmMenuIn { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .gm-country-menu__item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--color-text-strong); cursor: pointer; transition: background 0.18s ease, transform 0.15s ease; } .gm-country-menu__item:hover { background: linear-gradient( 135deg, var(--color-c-f4f6ff) 0%, var(--color-brand-tint-bg) 100% ); transform: translateX(2px); } .gm-country-menu__item.is-active { background: linear-gradient( 135deg, var(--color-brand-tint-bg) 0%, var(--color-c-e0e7ff) 100% ); color: var(--color-brand-primary); } .gm-country-menu__flag { font-size: 17px; line-height: 1; } .gm-country-menu__label { flex: 1; letter-spacing: 0.2px; } .gm-country-menu__active-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-brand-primary); box-shadow: 0 0 0 3px var(--color-brand-tint); animation: gmDotPulse 1.6s ease-in-out infinite; } @keyframes gmDotPulse { 0%, 100% { box-shadow: 0 0 0 3px var(--color-brand-tint); } 50% { box-shadow: 0 0 0 5px var(--color-brand-tint); } } /* ─── Segment tabs — underline-indicator style ─────────── */ .gm-bar__segments { display: inline-flex; align-items: stretch; gap: 6px; flex-shrink: 0; position: relative; padding: 0 4px; } /* Decorative vertical separator between country and tabs (disabled while country dropdown is hidden — re-enable when re-introducing the dropdown). */ .gm-bar__segments::before { content: none; } .gm-segment { background: transparent; border: none; padding: 8px 14px 10px; font-size: 13px; font-weight: 600; color: var(--color-text-subtle); border-radius: 0; cursor: pointer; position: relative; display: inline-flex; align-items: center; gap: 8px; transition: color 0.22s ease, transform 0.18s ease; white-space: nowrap; } /* Animated bottom underline indicator */ .gm-segment::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 3px; border-radius: 999px; background: linear-gradient( 90deg, var(--color-brand-primary) 0%, var(--color-c-4f46e5) 50%, var(--color-c-6366f1) 100% ); transform: scaleX(0); transform-origin: center; opacity: 0; transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease; } /* Icon wrap with subtle bg */ .gm-segment__icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 7px; background: var(--color-c-f1f3fb); color: var(--color-text-faint); transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease; } .gm-segment__icon svg { width: 13px; height: 13px; } .gm-segment__label { letter-spacing: 0.2px; font-weight: 600; } .gm-segment:hover { color: var(--color-text-strong); } .gm-segment:hover .gm-segment__icon { background: var(--color-brand-tint-bg); color: var(--color-brand-primary); transform: scale(1.05); } .gm-segment:hover::after { transform: scaleX(0.5); opacity: 0.4; } .gm-segment.is-active { color: var(--color-brand-primary); font-weight: 700; } .gm-segment.is-active .gm-segment__icon { background: linear-gradient( 135deg, var(--color-brand-primary) 0%, var(--color-c-4f46e5) 100% ); color: var(--color-white); box-shadow: 0 4px 10px var(--color-brand-tint), 0 0 0 3px var(--color-brand-tint); } .gm-segment.is-active::after { transform: scaleX(1); opacity: 1; } .gm-segment.is-active .gm-segment__label { font-weight: 700; letter-spacing: 0.3px; } /* ─── Filters CTA — clean on-theme pill ────────────────── */ .gm-filters-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; background: var(--color-white); border: 1px solid var(--color-c-e2e6f3); border-radius: 10px; padding: 11px 14px 11px 14px; font-size: 13px; font-weight: 600; color: var(--color-text-strong); cursor: pointer; transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease; white-space: nowrap; flex-shrink: 0; } .gm-filters-btn:hover { border-color: var(--color-c-c7d2fe); background: var(--color-c-fafbff); box-shadow: 0 4px 10px var(--color-brand-tint); } .gm-filters-btn.is-open { border-color: var(--color-brand-primary); box-shadow: 0 0 0 3px var(--color-brand-tint); } .gm-filters-btn__icon { display: inline-flex; align-items: center; justify-content: center; color: var(--color-brand-primary); font-size: 12px; } .gm-filters-btn__label { font-weight: 600; color: var(--color-text-strong); letter-spacing: 0.2px; font-size: 13px; } .gm-filters-btn__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--color-c-1f2937); color: var(--color-white); font-size: 11px; font-weight: 700; letter-spacing: 0.3px; transition: background 0.18s ease, transform 0.18s ease; } .gm-filters-btn__badge.is-active { background: var(--color-brand-primary); transform: scale(1.05); } .gm-bar__last-updated { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--color-text-subtle); white-space: nowrap; } /* ─── Info Cards — card-based timestamp display ────────── */ .gm-bar__info-cards { display: flex; align-items: center; gap: 12px; margin-left: auto; } .gm-info-card { display: flex; align-items: center; gap: 12px; background: var(--color-white); border: 1px solid var(--color-c-e2e6f3); border-radius: 12px; padding: 10px 16px; transition: border-color 0.18s ease, box-shadow 0.18s ease; } .gm-info-card:hover { border-color: var(--color-c-c7d2fe); box-shadow: 0 2px 8px var(--color-brand-tint); } .gm-info-card__icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; } .gm-info-card__icon svg { width: 24px; height: 24px; } .gm-info-card__icon--signals { background: var(--color-c-e0e7ff); color: var(--color-c-4f46e5); } .gm-info-card__icon--weights { background: var(--color-c-dcfce7); color: var(--color-c-15803d); } .gm-info-card__icon--portfolio { background: var(--color-c-ede9fe); color: var(--color-c-7c3aed); } .gm-info-card__content { display: flex; flex-direction: column; gap: 2px; } .gm-info-card__title { font-size: 13px; font-weight: 600; color: var(--color-c-4f46e5); letter-spacing: 0.2px; } .gm-info-card__meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-text-subtle); } .gm-info-card__date, .gm-info-card__time { display: inline-flex; align-items: center; gap: 4px; } .gm-info-card__date-icon, .gm-info-card__time-icon { width: 12px; height: 12px; opacity: 0.7; } .gm-info-card__divider { color: var(--color-c-d1d5db); font-weight: 300; } /* ============================================================ TOC 16. SHARED (currently UNUSED) — Filters Drawer Right-side slide-in panel paired with the Global Market Bar above. Same scoping note: not mounted under the current Header; kept for future activation. ============================================================ */ .gm-drawer-overlay { position: fixed; inset: 0; background-color: var(--color-ink-tint); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); z-index: 1400; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; } .gm-drawer-overlay.is-open { opacity: 1; visibility: visible; } .gm-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 420px; background: var(--color-white); z-index: 1450; display: flex; flex-direction: column; box-shadow: -20px 0 40px var(--color-ink-tint); transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1); } .gm-drawer.is-open { transform: translateX(0); } /* Head */ .gm-drawer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 22px 22px 18px; border-bottom: 1px solid var(--color-brand-tint-bg); background: linear-gradient( 135deg, var(--color-c-eff6ff) 0%, var(--color-white) 60% ); } .gm-drawer__head-text { flex: 1; min-width: 0; } .gm-drawer__title { font-size: 20px; font-weight: 600; color: var(--color-text-strong); margin: 0 0 4px; letter-spacing: -0.3px; } .gm-drawer__sub { font-size: 12.5px; color: var(--color-text-subtle); margin: 0; font-weight: 500; } .gm-drawer__close { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--color-border-card); background: var(--color-white); color: var(--color-text-subtle); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; font-size: 13px; transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, color 0.18s ease; } .gm-drawer__close:hover { background: var(--color-surface-soft); border-color: var(--color-border-strong); color: var(--color-text-strong); transform: scale(1.05); } /* Body */ .gm-drawer__body { flex: 1; overflow-y: auto; padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 18px; } .gm-drawer__field { display: flex; flex-direction: column; gap: 8px; } .gm-drawer__label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--color-text-muted); margin: 0; } .gm-drawer__label--row { display: flex; align-items: center; justify-content: space-between; text-transform: uppercase; } .gm-drawer__range-label { font-size: 12px; font-weight: 600; color: var(--color-brand-primary); background: var(--color-brand-tint-bg); padding: 3px 10px; border-radius: 999px; border: 1px solid var(--color-c-dde3ff); text-transform: none; letter-spacing: 0.2px; } .gm-drawer__select { background-color: var(--color-white); border: 1px solid var(--color-border-card); border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--color-text-strong); padding: 10px 36px 10px 14px; height: 42px; cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230b28bf'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; transition: border-color 0.18s ease, box-shadow 0.18s ease; } .gm-drawer__select:hover { border-color: var(--color-c-c7d2fe); } .gm-drawer__select:focus { border-color: var(--color-brand-primary); box-shadow: 0 0 0 3px var(--color-brand-tint); outline: none; } /* Sliders */ .gm-drawer__sliders { display: flex; flex-direction: column; gap: 12px; padding: 6px 0 2px; } .gm-drawer__slider { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 100%; height: 6px; border-radius: 999px; background: var(--color-border-card); outline: none; cursor: pointer; } .gm-drawer__slider:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 2px; } .gm-drawer__slider::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--color-white); border: 3px solid var(--color-brand-primary); cursor: pointer; box-shadow: 0 3px 10px var(--color-brand-tint); transition: transform 0.15s ease; } .gm-drawer__slider::-webkit-slider-thumb:hover { transform: scale(1.15); } .gm-drawer__slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--color-white); border: 3px solid var(--color-brand-primary); cursor: pointer; box-shadow: 0 3px 10px var(--color-brand-tint); } /* Foot */ .gm-drawer__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--color-brand-tint-bg); background: var(--color-c-fafbff); } .gm-drawer__btn { flex: 1; height: 44px; border-radius: 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.3px; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease, filter 0.18s ease; } .gm-drawer__btn--ghost { background: var(--color-white); color: var(--color-text-muted); border: 1px solid var(--color-border-card); } .gm-drawer__btn--ghost:hover { background: var(--color-surface-soft); border-color: var(--color-border-strong); color: var(--color-text-strong); } .gm-drawer__btn--primary { background: var(--color-brand-primary); color: var(--color-white); border: none; } .gm-drawer__btn--primary:hover { transform: translateY(-1px); box-shadow: 0 10px 22px var(--color-brand-tint); filter: brightness(1.05); } .gm-drawer__btn--primary:active { transform: translateY(0); } /* ============================================================ TOC 17. PAGE: PORTFOLIO — Positions Card (redesigned) Dashboard-aligned visuals. Scoped to .portfolio-positions-card to avoid global side-effects. ============================================================ */ .portfolio-positions-card.growth-pick-card { background: var(--color-white); border: 1px solid var(--color-border-card); border-radius: 14px; padding: 0; overflow: hidden; box-shadow: 0 1px 2px var(--color-ink-tint); transition: 0.3s ease-in all; } .portfolio-positions-card.growth-pick-card:hover { box-shadow: 0 8px 22px var(--color-ink-tint); } .portfolio-positions-card .screener-results.relative { padding: 0; } /* ─── Header strip (white with accent strip on left) ────── */ .portfolio-positions-card .portfolio-positions-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px 16px 22px; margin: 0; background: linear-gradient( 180deg, var(--color-white) 0%, var(--color-c-fafbff) 100% ); border-bottom: 1px solid var(--color-brand-tint-bg); position: relative; flex-wrap: wrap; } .portfolio-positions-card .portfolio-positions-head::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 3px; background: var(--color-bull); } .portfolio-positions-card--short .portfolio-positions-head::before { background: var(--color-bear); } .portfolio-positions-card .risk-mrs { display: inline-flex; align-items: center; gap: 12px; margin: 0; } /* Icon badge */ .portfolio-positions-card .portfolio-positions-icon { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-bull-tint); color: var(--color-bull); font-size: 18px; border: 1px solid var(--color-bull-tint); margin: 0; flex-shrink: 0; } .portfolio-positions-card--short .portfolio-positions-icon { background: var(--color-bear-tint); color: var(--color-bear); border-color: var(--color-bear-tint); } .portfolio-positions-card .portfolio-positions-icon svg { width: 20px; height: 20px; } /* Unit Allocation card: neutralize the green tint so the tri-color pie (red / yellow / green) reads cleanly against the icon chip. */ .portfolio-positions-card .portfolio-positions-icon.unit-allocation-icon { background: var(--color-ink-tint); border-color: var(--color-ink-tint); color: inherit; } .portfolio-positions-card .portfolio-positions-icon.unit-allocation-icon svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 2px var(--color-shadow)); } /* Summary cards (TPV, MRS, Unit Allocation, Allocation Rules, Edit Allocation Rules) — force blue theme on icon chip, icon left strip, and head bottom border. Scoped to .portfolio-summary-card so Long / Short positions cards keep their green / red accents. */ .portfolio-summary-card.portfolio-positions-card .portfolio-positions-icon, .portfolio-summary-card.portfolio-positions-card .portfolio-positions-icon.unit-allocation-icon { background: var(--color-brand-tint-bg); color: var(--color-brand-primary); border-color: var(--color-brand-tint); } .portfolio-summary-card.portfolio-positions-card .portfolio-positions-icon svg, .portfolio-summary-card.portfolio-positions-card .portfolio-positions-icon.unit-allocation-icon svg { color: var(--color-brand-primary); fill: currentColor; filter: none; } .portfolio-summary-card.portfolio-positions-card .portfolio-positions-head::before { background: var(--color-brand-primary); } .portfolio-summary-card.portfolio-positions-card .portfolio-positions-head { border-bottom-color: var(--color-brand-tint); } .portfolio-summary-card.portfolio-positions-card.growth-pick-card:hover .portfolio-positions-head { border-bottom-color: var(--color-brand-primary); } /* Title block */ .portfolio-positions-card .setvalue-data h6 { font-size: 16px; font-weight: 700; color: var(--color-text-strong); margin: 0 0 2px; line-height: 1.2; letter-spacing: -0.2px; } .portfolio-positions-card .setvalue-data p { font-size: 12.5px; color: var(--color-text-subtle); margin: 0; font-weight: 500; } /* Toggle aligned right (use existing component, slight tweak) */ .portfolio-positions-card .three-way-toggle-container { margin: 0; flex-shrink: 0; } /* ─── Table ─────────────────────────────────────────────── */ .portfolio-positions-card .table-responsive { padding: 0; background: var(--color-white); } .portfolio-positions-card .portfolio-positions-table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; table-layout: auto; } .portfolio-positions-card .portfolio-positions-table thead { background: var(--color-surface-soft); } .portfolio-positions-card .portfolio-positions-table thead th { background: var(--color-surface-soft); color: var(--color-text-subtle); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; border-bottom: 1px solid var(--color-border-card); padding: 12px 18px; vertical-align: middle; text-align: left; white-space: nowrap; } .portfolio-positions-card .portfolio-positions-table thead th.text-center { text-align: center; } .portfolio-positions-card .portfolio-positions-table thead th:last-child { text-align: right; } .portfolio-positions-card .portfolio-positions-table tbody td { padding: 13px 18px; border-top: none; border-bottom: 1px solid var(--color-surface-softer); vertical-align: middle; font-size: 13px; color: var(--color-text-strong); text-align: left; white-space: nowrap; } .portfolio-positions-card .portfolio-positions-table tbody tr:last-child td { border-bottom: none; } /* Row hover intentionally removed for Portfolio positions table. Rows have NO hover background and NO transition (per UX request). */ /* Long Positions — green-themed header & title bar. Only the `.portfolio-positions-card--long` table is affected; Short Positions keeps its existing red accent, and numeric body values stay neutral. */ .portfolio-positions-card--long .portfolio-positions-head { background: linear-gradient( 180deg, var(--color-white) 0%, var(--color-c-f4fcf8) 100% ); border-bottom-color: var(--color-brand-tint); } .portfolio-positions-card--long .setvalue-data h6 { color: var(--color-c-15803d); } /* Symbol cell */ .portfolio-positions-card .portfolio-symbol-cell { min-width: 220px; } .portfolio-positions-card .portfolio-ticker { display: inline-block; font-size: 13px; font-weight: 600; color: var(--color-brand-primary); background: var(--color-brand-tint-bg); padding: 4px 10px; border-radius: 7px; letter-spacing: 0.4px; border: 1px solid var(--color-c-dde3ff); margin-bottom: 5px; } .portfolio-positions-card--short .portfolio-ticker { color: var(--color-bear-strong); background: var(--color-c-fef2f2); border-color: var(--color-c-fecaca); } .portfolio-positions-card--long .portfolio-ticker { color: var(--color-c-15803d); background: var(--color-c-f4fcf8); border-color: var(--color-bull-tint); } .portfolio-positions-card .portfolio-name { display: block; font-size: 12.5px; font-weight: 500; color: var(--color-text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; } /* Score cell */ .portfolio-positions-card .portfolio-score-cell { font-weight: 700; } .portfolio-positions-card .portfolio-score-value { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--color-brand-primary); background: var(--color-brand-tint-bg); border: 1px solid var(--color-c-dde3ff); letter-spacing: 0.2px; } .portfolio-positions-card--short .portfolio-score-value { color: var(--color-bear-strong); background: var(--color-c-fef2f2); border-color: var(--color-c-fecaca); } .portfolio-positions-card--long .portfolio-score-value { color: var(--color-c-15803d); background: var(--color-c-f4fcf8); border-color: var(--color-bull-tint); } /* Units cell */ .portfolio-positions-card .portfolio-units-cell.data-feed { display: inline-flex; align-items: center; gap: 10px; min-width: 130px; } .portfolio-positions-card .portfolio-score-bar.score-bar { width: 80px; height: 6px; background: var(--color-surface-softer); border-radius: 999px; overflow: hidden; } .portfolio-positions-card .portfolio-score-bar .fill { height: 100%; background: linear-gradient( 90deg, var(--color-brand-primary) 0%, var(--color-c-4f46e5) 100% ); border-radius: 999px; transition: width 0.4s ease; } .portfolio-positions-card--short .portfolio-score-bar .fill { background: linear-gradient( 90deg, var(--color-bear) 0%, var(--color-bear-strong) 100% ); } .portfolio-positions-card--long .portfolio-score-bar .fill { background: linear-gradient( 90deg, var(--color-bull) 0%, var(--color-c-15803d) 100% ); } .portfolio-positions-card .portfolio-units-value { font-size: 13px; font-weight: 700; color: var(--color-text-strong); min-width: 22px; } /* Avg Price cell */ .portfolio-positions-card .portfolio-price-cell { font-size: 13px; font-weight: 700; color: var(--color-text-strong); text-align: right; white-space: nowrap; } /* Empty state */ .portfolio-positions-card .portfolio-empty { text-align: center; padding: 36px 20px; font-size: 13px; font-weight: 500; color: var(--color-text-subtle); } /* ============================================================ ============================================================ TOC 18. TRADING-SYSTEM TOKENS + ts-* COMPONENTS Imported from plu-design/public/assets/css/trading-system.css on UI-redesign merge. Contains: - :root design tokens (--ts-* variables) - Component classes prefixed with ts- (institutional blue theme) All @media blocks from the original have been moved to responsive.css under their respective breakpoint sections. ============================================================ ============================================================ */ /* ========================================================= TRADING INTELLIGENCE PLATFORM Institutional Blue Trading System — Design Tokens & Components Scope: All classes are prefixed with `ts-` to avoid colliding with the existing custom.css / Bootstrap classes. ========================================================= */ /* --------------------------------------------------------- 1. DESIGN TOKENS --------------------------------------------------------- */ :root { /* Brand */ --ts-brand-blue: var(--color-c-1e33c9); --ts-brand-blue-hover: var(--color-c-1628a0); --ts-accent-blue: var(--color-c-2563eb); /* Backgrounds */ --ts-bg-app: var(--color-c-f5f7fb); --ts-bg-card: var(--color-white); --ts-bg-soft: var(--color-surface-soft); --ts-bg-sidebar: var(--color-c-1e33c9); --ts-bg-table-head: var(--color-surface-softer); --ts-bg-hover: var(--color-brand-tint-bg); /* Borders */ --ts-border: var(--color-border); --ts-border-strong: var(--color-border-strong); --ts-border-active: var(--color-c-2563eb); --ts-divider: var(--color-border-soft); /* Typography */ --ts-text-primary: var(--color-c-111827); --ts-text-secondary: var(--color-c-6b7280); --ts-text-muted: var(--color-c-9ca3af); --ts-text-on-dark: var(--color-white); /* Trading signals */ --ts-bull: var(--color-bull-bright); --ts-bull-strong: var(--color-bull); --ts-bull-soft: var(--color-c-dcfce7); --ts-bear: var(--color-bear-bright); --ts-bear-strong: var(--color-bear); --ts-bear-soft: var(--color-c-fee2e2); /* Risk overlay */ --ts-risk-vlow: var(--color-bull-bright); --ts-risk-low: var(--color-bull); --ts-risk-neutral: var(--color-c-eab308); --ts-risk-elevated: var(--color-c-eab308); --ts-risk-high: var(--color-bear); /* Status */ --ts-status-success: var(--color-bull); --ts-status-warning: var(--color-c-eab308); --ts-status-error: var(--color-bear); --ts-status-info: var(--color-c-2563eb); --ts-status-neutral: var(--color-text-subtle); /* Gradients */ --ts-grad-nav: linear-gradient( 180deg, var(--color-c-1e33c9) 0%, var(--color-c-1628a0) 100% ); --ts-grad-risk: linear-gradient( 135deg, var(--color-c-3b3b3b) 0%, var(--color-c-5b5b5b) 100% ); --ts-grad-bull: linear-gradient( 135deg, var(--color-bull-bright) 0%, var(--color-bull) 100% ); --ts-grad-bear: linear-gradient( 135deg, var(--color-bear-bright) 0%, var(--color-bear) 100% ); /* Shadows */ --ts-shadow-card: 0 2px 8px var(--color-ink-tint); --ts-shadow-hover: 0 10px 25px var(--color-brand-deep-tint); --ts-shadow-drawer: -16px 0 40px var(--color-ink-tint); /* Radii */ --ts-radius-card: 16px; --ts-radius-btn: 12px; --ts-radius-input: 12px; --ts-radius-table: 16px; --ts-radius-pill: 999px; --ts-radius-dropdown: 14px; /* Layout */ --ts-sidebar-w: 260px; --ts-sidebar-w-collapsed: 76px; --ts-header-h: 64px; --ts-ribbon-h: 44px; /* Typography family */ /* Motion */ --ts-ease: cubic-bezier(0.16, 1, 0.3, 1); } .ts-nav__item.is-active { background: var(--color-highlight); color: var(--color-white); box-shadow: inset 0 0 0 1px var(--color-highlight), 0 2px 8px var(--color-shadow); } .ts-nav__item.is-active::before { content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--color-white); box-shadow: 0 0 12px var(--color-highlight); } @keyframes ts-pulse { 0%, 100% { box-shadow: 0 0 0 3px var(--color-bull-bright-tint); } 50% { box-shadow: 0 0 0 6px var(--color-bull-bright-tint); } } /* --------------------------------------------------------- 7. CARDS --------------------------------------------------------- */ .ts-card { background: var(--ts-bg-card); border: 1px solid var(--ts-border); border-radius: var(--ts-radius-card); box-shadow: var(--ts-shadow-card); overflow: hidden; transition: box-shadow 0.2s var(--ts-ease), transform 0.2s var(--ts-ease); } .ts-chip.is-active { background: var(--ts-bg-hover); border-color: var(--ts-brand-blue); color: var(--ts-brand-blue); font-weight: 600; } .ts-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; } .ts-table thead th { position: sticky; top: 0; z-index: 2; background: var(--ts-bg-table-head); color: var(--ts-text-secondary); text-transform: uppercase; letter-spacing: 0.06em; font-size: 10.5px; font-weight: 600; padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--ts-border); white-space: nowrap; user-select: none; } .ts-table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--ts-divider); font-variant-numeric: tabular-nums; vertical-align: middle; color: var(--ts-text-primary); } .ts-table tbody tr { transition: background 0.15s var(--ts-ease); position: relative; } .ts-table tbody tr:hover { background: var(--ts-bg-hover); cursor: pointer; } .ts-table tbody tr.is-selected { background: var(--color-blue-tint); } .ts-table tbody tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--ts-brand-blue); } .ts-table tbody tr.is-selected .ts-col-ticker { background: var(--color-blue-tint); } .ts-drawer-overlay.is-open { opacity: 1; pointer-events: auto; } .ts-drawer.is-open { transform: translateX(0); } /* --------------------------------------------------------- 14. SCROLLBARS (subtle, institutional) --------------------------------------------------------- */ .ts-app *::-webkit-scrollbar { width: 10px; height: 10px; } /* Bullish intensity (5 → 1) */ .ts-heat-tile.h-b5 { background: var(--color-c-052e16); color: var(--color-white); } .ts-heat-tile.h-b4 { background: var(--color-bull); color: var(--color-white); } .ts-heat-tile.h-b3 { background: var(--color-bull); color: var(--color-c-052e16); } .ts-heat-tile.h-b2 { background: var(--color-c-bbf7d0); color: var(--color-c-052e16); } .ts-heat-tile.h-b1 { background: var(--color-c-dcfce7); color: var(--color-c-052e16); } /* Bearish intensity (1 → 5) */ .ts-heat-tile.h-r1 { background: var(--color-c-fee2e2); color: var(--color-c-7f1d1d); } .ts-heat-tile.h-r2 { background: var(--color-c-fecaca); color: var(--color-c-7f1d1d); } .ts-heat-tile.h-r3 { background: var(--color-bear-soft); color: var(--color-white); } .ts-heat-tile.h-r4 { background: var(--color-bear); color: var(--color-white); } .ts-heat-tile.h-r5 { background: var(--color-c-7f1d1d); color: var(--color-white); } .ts-heat-tile.h-neutral { background: var(--color-surface-softer); color: var(--ts-text-secondary); } .ts-accordion__item.is-open .ts-accordion__chev { transform: rotate(180deg); color: var(--ts-brand-blue); } .ts-accordion__item.is-open .ts-accordion__body { display: block; } .ts-ai-panel.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; } @keyframes ts-toast-in { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes ts-skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ============================================================= PROFILE PAGE — dashboard-style card chrome ============================================================= */ .profile-shell .dash-section-card { padding-bottom: 24px; } /* ============================================================= SCORE WEIGHTINGS — dashboard-style intro card chrome ============================================================= */ .score-weightings .dash-section-card { margin-bottom: 18px; } .score-weightings .dash-section-card__title { display: flex; align-items: center; gap: 10px; } .score-weightings .dash-section-card__title svg { color: var(--color-brand-primary); } /* ============================================================= WATCHLIST — dashboard-style table card chrome ============================================================= */ /* When the watchlist has few rows, the card is short and the Bootstrap sort dropdown (position: absolute) gets clipped by the card's `overflow: hidden`. Lift the clip on the card and restore the rounded head corners that the clip used to provide. */ .watchlist-page .dash-table-card { overflow: visible; } .watchlist-page .dash-table-card__head { border-top-left-radius: 14px; border-top-right-radius: 14px; flex-wrap: wrap; gap: 12px; } .watchlist-page .dash-table-card__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; min-height: 38px; } .watchlist-page .dash-table-card__actions > * { margin: 0; vertical-align: middle; } .watchlist-page .dash-table-card__actions .dropdown { display: inline-flex; align-items: center; height: 38px; line-height: 1; } .watchlist-page .mkt-toggle, .watchlist-page .filter-btn { box-sizing: border-box; vertical-align: middle; flex-shrink: 0; } /* ── Modern segmented market-type toggle ── */ .mkt-toggle { position: relative; display: inline-flex; align-items: stretch; background: var(--color-surface-softer); border: 1px solid var(--color-border-soft); border-radius: 999px; padding: 4px; height: 38px; box-shadow: inset 0 1px 2px var(--color-ink-tint); } .mkt-toggle__slider { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); background: var(--color-white); border-radius: 999px; box-shadow: 0 1px 3px var(--color-ink-tint), 0 1px 2px var(--color-ink-tint); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1; } .mkt-toggle[data-active="etf"] .mkt-toggle__slider { transform: translateX(100%); } .mkt-toggle__btn { position: relative; z-index: 2; flex: 1; min-width: 86px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: none; background: transparent; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--color-text-subtle); border-radius: 999px; padding: 0 16px; transition: color 0.2s ease; letter-spacing: 0.01em; } .mkt-toggle__btn:hover:not(.is-active) { color: var(--color-text-muted-strong); } .mkt-toggle__btn.is-active { color: var(--color-text-strong); font-weight: 600; } .mkt-toggle__btn:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 2px; } .mkt-toggle__dot { flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--color-border-strong); transition: background 0.2s ease, transform 0.2s ease; } .mkt-toggle__btn.is-active .mkt-toggle__dot { background: var(--color-brand-primary); transform: scale(1.15); box-shadow: 0 0 0 3px var(--color-brand-tint); } @media (max-width: 420px) { .mkt-toggle { height: 34px; } .mkt-toggle__btn { min-width: 72px; font-size: 12.5px; padding: 0 12px; } } .watchlist-page .filter-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; background: var(--color-white); border: 1px solid var(--color-border-soft); color: var(--color-text-muted-strong); border-radius: 999px; padding: 0 18px; font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap; box-shadow: 0 1px 2px var(--color-ink-tint); /* Override legacy global `.filter-btn { margin-top: 12px !important }` which pushed the button 6px below the toggle's centerline inside the dash-table-card actions row. */ margin: 0 !important; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .watchlist-page .filter-btn .sort-icon { font-size: 12px; color: var(--color-text-subtle); } .watchlist-page .filter-btn:hover, .watchlist-page .filter-btn:focus, .watchlist-page .filter-btn[aria-expanded="true"] { background: var(--color-white); color: var(--color-text-strong); border-color: var(--color-border-strong); } .watchlist-page .filter-btn:hover .sort-icon, .watchlist-page .filter-btn:focus .sort-icon, .watchlist-page .filter-btn[aria-expanded="true"] .sort-icon { color: var(--color-text-strong); } .watchlist-page .filter-btn.dropdown-toggle::after { margin-left: 2px; border-top-color: var(--color-text-faint); vertical-align: 0; } .watchlist-page .filter-btn:hover.dropdown-toggle::after, .watchlist-page .filter-btn:focus.dropdown-toggle::after, .watchlist-page .filter-btn[aria-expanded="true"].dropdown-toggle::after { border-top-color: var(--color-text-strong); } @media (max-width: 420px) { .watchlist-page .filter-btn { height: 34px; padding: 0 14px; font-size: 12.5px; } } .watchlist-page .filter-menu { border: 1px solid var(--color-border-soft); border-radius: 10px; box-shadow: 0 8px 24px var(--color-ink-tint); padding: 6px; } .watchlist-page .filter-menu .dropdown-item { border-radius: 6px; padding: 6px 10px; font-size: 13px; color: var(--color-text-muted-strong); transition: background-color 0.15s ease, color 0.15s ease; } /* Explicit hover/focus background. The global `.filter-menu .dropdown-item:hover` rule in this file uses an invalid `var(--color-brand-primary)` (no alpha channel), so the browser drops the background declaration and only `color: var(--color-white)` survives — producing invisible white-on-white option labels. We re-anchor it here. */ .watchlist-page .filter-menu .dropdown-item:hover, .watchlist-page .filter-menu .dropdown-item:focus, .watchlist-page .filter-menu .dropdown-item:focus-visible { background-color: var(--color-brand-primary); color: var(--color-white); } .watchlist-page .filter-menu .dropdown-item.active, .watchlist-page .filter-menu .dropdown-item.active:hover, .watchlist-page .filter-menu .dropdown-item.active:focus { background: var(--color-brand-primary); color: var(--color-white); } /* Guarantee horizontal scrolling on small viewports for the watchlist table. The dedicated `.watchlist-table-scroll` wrapper ensures the scrollable area stays contained within the card border. */ .watchlist-page .watchlist-table-scroll { width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; box-sizing: border-box; border-radius: inherit; } .watchlist-page .watchlist-table-scroll::-webkit-scrollbar { height: 8px; } .watchlist-page .watchlist-table-scroll::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 8px; } .watchlist-page .watchlist-table-scroll::-webkit-scrollbar-thumb:hover { background: var(--color-text-faint); } .watchlist-page .dash-table-card .stock-table .watchlist-remove-btn { border: none; background: transparent; color: var(--color-text-faint); width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; transition: 0.2s ease all; } .watchlist-page .dash-table-card .stock-table .watchlist-remove-btn:hover { background: var(--color-c-fef2f2); color: var(--color-bear); } .watchlist-page .watchlist-empty { padding: 48px 16px; text-align: center; color: var(--color-text-subtle); font-size: 14px; } /* Unified row hover for the watchlist table — matches the SeeAll modal so every row (regardless of classification modifier) uses the shared brand-tinted hover. Per-classification stock-name color tints below are preserved for accessibility/visual continuity. */ .watchlist-page .dash-table-card .stock-table tbody tr.dashboard-linked-row { cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease; } .watchlist-page .dash-table-card .stock-table tbody tr.dashboard-linked-row:hover td, .watchlist-page .dash-table-card .stock-table tbody tr.dashboard-linked-row:focus-visible td { --bs-table-bg: var(--color-brand-tint); background-color: var(--color-brand-tint) !important; } /* ──────────────────────────────────────────────────────────────── Detail page (src/app/(protected)/details/[id]/DetailClient.tsx) ──────────────────────────────────────────────────────────────── Dashboard chrome adapted to the detail view: a sticky 4-segment pill nav at top, a hero card with price + 3-segment bucket toggle, and four `.dash-section-card` body sections (overview / technical / fundamental / scores) that wrap the existing internal markup. */ .detail-page { padding-top: 24px; } .detail-page .stock-details { padding: 0; } .detail-page .container { display: flex; flex-direction: column; gap: 20px; } /* Sticky pill nav (4 segments) - same visual language as `.mkt-toggle` but uses individual `is-active` state rather than a sliding indicator because translateX positions get awkward for 4 segments at varying widths. */ .detail-page .detail-section-nav { position: sticky; top: 12px; z-index: 20; display: inline-flex; align-items: center; gap: 4px; padding: 5px; background: var(--color-surface-softer); border: 1px solid var(--color-border-soft); border-radius: 999px; box-shadow: 0 8px 24px var(--color-ink-tint); align-self: flex-start; max-width: 100%; overflow-x: auto; scrollbar-width: none; } .detail-page .detail-section-nav::-webkit-scrollbar { display: none; } .detail-page .detail-section-nav__btn { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 16px; border: none; background: transparent; color: var(--color-text-muted); font-size: 13px; font-weight: 600; border-radius: 999px; white-space: nowrap; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } .detail-page .detail-section-nav__btn:hover:not(.is-active) { color: var(--color-text); background: var(--color-highlight); } .detail-page .detail-section-nav__btn.is-active { background: var(--color-white); color: var(--color-text-strong); box-shadow: 0 1px 3px var(--color-ink-tint); } .detail-page .detail-section-nav__btn:focus-visible { outline: 2px solid var(--color-c-3b82f6); outline-offset: 2px; } .detail-page .detail-section-nav__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-border-strong); transition: background-color 0.2s ease; } .detail-page .detail-section-nav__btn.is-active .detail-section-nav__dot { background: var(--color-c-3b82f6); } /* Hero card - dash-section-card with a watch action and a price row. */ .detail-page .detail-hero-card .dash-section-card__head { border-bottom: 1px solid var(--color-c-eef2f7); } .detail-page .detail-hero-card .dash-section-card__action { margin-left: auto; } @media (max-width: 991.98px) { .detail-page .detail-hero-card .dash-section-card__action { margin-bottom: 8px; } } .detail-page .detail-hero-body { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 24px 28px; flex-wrap: wrap; } .detail-page .detail-hero-price { display: inline-flex; align-items: baseline; gap: 2px; } .detail-page .detail-hero-price__usd { font-size: 22px; font-weight: 600; color: var(--color-text-subtle); line-height: 1; } .detail-page .detail-hero-price__value { font-size: 42px; font-weight: 700; color: var(--color-text-strong); line-height: 1; letter-spacing: -0.02em; } .detail-page .detail-hero-price__change { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1; } .detail-page .detail-hero-price__change.is-up { background: var(--color-bull-bright-tint); color: var(--color-bull); } .detail-page .detail-hero-price__change.is-down { background: var(--color-bear-bright-tint); color: var(--color-bear); } /* 3-segment bucket toggle - same visuals as `.mkt-toggle`, but 33.33% wide indicator and 3 translate positions. */ .detail-page .price-bucket-toggle { position: relative; display: inline-flex; align-items: center; padding: 4px; background: var(--color-surface-softer); border: 1px solid var(--color-border-soft); border-radius: 999px; box-shadow: inset 0 1px 2px var(--color-ink-tint); } .detail-page .price-bucket-toggle__slider { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(33.333% - (8px / 3)); background: var(--color-white); border-radius: 999px; box-shadow: 0 1px 3px var(--color-ink-tint); transition: transform 0.28s cubic-bezier(0.34, 1.2, 0.64, 1); z-index: 0; } .detail-page .price-bucket-toggle[data-active="1w"] .price-bucket-toggle__slider { transform: translateX(0%); } .detail-page .price-bucket-toggle[data-active="3m"] .price-bucket-toggle__slider { transform: translateX(100%); } .detail-page .price-bucket-toggle[data-active="1y"] .price-bucket-toggle__slider { transform: translateX(200%); } .detail-page .price-bucket-toggle__btn { position: relative; z-index: 1; flex: 1 1 0; min-width: 88px; height: 32px; padding: 0 14px; border: none; background: transparent; color: var(--color-text-subtle); font-size: 13px; font-weight: 600; border-radius: 999px; cursor: pointer; transition: color 0.2s ease, transform 0.15s ease; } .detail-page .price-bucket-toggle__btn:hover:not(.is-active) { color: var(--color-text); } .detail-page .price-bucket-toggle__btn.is-active { color: var(--color-text-strong); } .detail-page .price-bucket-toggle__btn:focus-visible { outline: 2px solid var(--color-c-3b82f6); outline-offset: 2px; } /* Section card bodies - neutralise inner `.technical` margins so the chrome edges hug consistently. The existing internal classes (.technical, .technical-graph, .technical-score, .chart, etc.) still own their typography and layout. */ .detail-page .detail-section-card .detail-card-body { padding: 20px 24px 24px; } .detail-page .detail-section-card .technical { margin: 0; background: transparent; box-shadow: none; border: none; padding: 0; } .detail-page .detail-section-card .technical-graph { border: 1px solid var(--color-c-eef2f7); border-radius: 14px; background: var(--color-white); } .detail-page .detail-section-card .classification-detail .score-pill { display: inline-flex; align-items: center; } .detail-charts-stack { width: 70%; display: flex; flex-direction: column; gap: 12px; } /* Eliminate extra height and unwanted bottom margin/padding */ .detail-charts-stack .technical-graph { width: 100%; height: auto !important; min-height: 0 !important; padding: 12px 14px 4px 14px !important; margin-bottom: 0 !important; } /* Remove double-nested borders, extra inner padding, and bottom whitespace inside chart containers */ .detail-charts-stack .price-trend__chart-container, .detail-charts-stack .score-trend__chart-container { padding: 0 !important; margin: 0 !important; border: none !important; background: transparent !important; overflow: visible !important; } .detail-charts-stack .chart, .detail-charts-stack .updown-monthly, .detail-charts-stack .price-trends, .detail-charts-stack .score-trends { margin-bottom: 0 !important; padding-bottom: 0 !important; } .detail-charts-stack .price-trend__title { margin-bottom: 6px !important; padding-bottom: 6px !important; height: auto !important; } /* Ensure canvas takes up its exact container height without bottom inline whitespace */ .detail-charts-stack canvas { display: block !important; margin-bottom: 0 !important; } /* Exact 2:1 height ratio on Desktop: Price Chart (300px) is 2x Score Chart (150px) */ .detail-page .price-chart-inner, .detail-page .price-trend__chart-container > div { height: 300px !important; } .detail-page .score-chart-inner, .detail-page .score-trend__chart-container > div { height: 150px !important; } .detail-page .detail-section-card .rank-score.technical-score { display: flex; flex-direction: column; height: auto; padding: 14px 16px; } /* Tablet & iPad Responsiveness (max-width: 991.98px) */ @media (max-width: 991.98px) { .detail-page .technical { flex-direction: column !important; row-gap: 16px !important; } .detail-charts-stack { width: 100% !important; } .detail-page .technical-graph { width: 100% !important; } .detail-page .technical-score { width: 100% !important; } .detail-page .detail-section-card .rank-score.technical-score { width: 100% !important; } /* Exact 2:1 height ratio on Tablet/iPad: Price Chart (280px) is 2x Score Chart (140px) */ .detail-page .price-chart-inner, .detail-page .price-trend__chart-container > div { height: 280px !important; } .detail-page .score-chart-inner, .detail-page .score-trend__chart-container > div { height: 140px !important; } } /* Mobile Responsiveness (max-width: 767.98px) */ @media (max-width: 767.98px) { .detail-page .technical { row-gap: 12px !important; } .detail-page .technical-graph, .detail-page .technical-score { padding: 10px 12px !important; } .detail-charts-stack .technical-graph { padding: 10px 12px 2px 12px !important; } /* Exact 2:1 height ratio on Mobile: Price Chart (240px) is 2x Score Chart (120px) */ .detail-page .price-chart-inner, .detail-page .price-trend__chart-container > div { height: 240px !important; } .detail-page .score-chart-inner, .detail-page .score-trend__chart-container > div { height: 120px !important; } } /* Bucket badge pill with dot indicator */ .bucket-badge-pill { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; background: var(--color-surface-softer, #f8fafc); border: 1px solid var(--color-border-soft, #e2e8f0); border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.4px; color: #0b28bf; text-transform: uppercase; line-height: 1; } .bucket-badge-pill__dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(11, 40, 191, 0.18); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .bucket-badge-pill__dot-inner { width: 6px; height: 6px; border-radius: 50%; background: #0b28bf; } @media (max-width: 767.98px) { .detail-page .detail-hero-body { padding: 20px 18px 22px; gap: 16px; } .detail-page .detail-hero-price__value { font-size: 34px; } .detail-page .price-bucket-toggle { width: 100%; justify-content: stretch; } .detail-page .price-bucket-toggle__btn { min-width: 0; } .detail-page .detail-section-nav { width: 100%; overflow-x: auto; } } /* Tablet + mobile: detail-section-nav sticky pill sits flush below the SubHeader because `.detail-page` padding-top (24px) is too tight once the SubHeader collapses to a single tight row. Push the nav down so it no longer kisses the SubHeader bottom edge. */ @media (max-width: 991.98px) { .detail-page { padding-top: 16px; } .detail-page .detail-section-nav { margin-top: 12px; } } /* ──────────────────────────────────────────────────────────────── See-all modal (src/app/(protected)/seeall/SeeAllClient.tsx) ──────────────────────────────────────────────────────────────── Replaces the old `modal-header.all-stocks-modal-header` chrome with a `dash-table-card`-style band, slate-pill filters, dashboard-linked table rows, and slim pagination buttons. */ .seeall-page { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; width: 100dvw; height: 100vh; height: 100dvh; margin: 0; padding: 0; } .seeall-page .modal-content { border-radius: 0; min-height: 100vh; min-height: 100dvh; height: 100%; } /* Close button is anchored to `.modal-content` (top-right corner). On desktop we put it on its own dedicated row above the header band by reserving extra top padding on `.seeall-head`, so it can never collide with the Export XLSX button at the right end of the actions row. On mobile the actions row wraps under the title (see `.seeall-head__inner` `flex-wrap: wrap`), so the corner placement stays comfortable. */ .seeall-page .close-button { position: absolute; top: 12px; right: 16px; z-index: 20; width: 34px; height: 34px; padding: 0; border-radius: 50%; background-color: var(--color-ink-tint); background-size: 12px 12px; background-position: center; border: 1px solid var(--color-ink-tint); opacity: 1; transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .seeall-page .close-button:hover { background-color: var(--color-ink-tint); border-color: var(--color-ink-tint); } .seeall-page .close-button:active { transform: scale(0.96); } .seeall-page .close-button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-sky-tint); } @media (max-width: 767.98px) { .seeall-page .close-button { top: 10px; right: 10px; width: 32px; height: 32px; } } .seeall-page .seeall-head { position: relative; /* Right padding reserves a wide gutter for the absolute `.close-button` (top: 12px; right: 16px; ~34px wide → occupies right_edge - 50 → right_edge - 16). With 100px padding-right, the rightmost action (Export XLSX) ends at right_edge - 100, leaving a clearly visible ~50px gap between Export XLSX and the close button on desktop. The mobile `@media (max-width: 767.98px)` block below overrides this with tighter padding because the actions row already wraps below the title on mobile (so no horizontal collision is possible). */ padding: 28px 100px 18px 24px; background: linear-gradient( 180deg, var(--color-white) 0%, var(--color-surface-soft) 100% ); border-bottom: 1px solid var(--color-border-soft); } /* Accent stripe along the top edge — brand-blue by default, red for the bearish variant. (The original `--bullish` green was swapped for brand-blue per design: the see-all header represents the page chrome, not a bull/bear classification.) */ .seeall-page .seeall-head::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient( 90deg, var(--color-brand-primary), var(--color-c-3b50d6) ); } .seeall-page .seeall-head.dash-table-card--bearish::before { background: linear-gradient( 90deg, var(--color-bear-bright), var(--color-bear) ); } .seeall-page .seeall-head__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .seeall-page .seeall-head__title-wrap { display: flex; flex-direction: column; gap: 4px; justify-content: center; align-self: stretch; } .seeall-page .seeall-head .dash-table-card__title { font-size: 22px; font-weight: 700; color: var(--color-text-strong); margin: 0; padding-left: 0; } .seeall-page .seeall-head__sub { font-size: 13px; color: var(--color-text-subtle); margin: 0; } .seeall-page .seeall-head__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 38px; } .seeall-page .seeall-filter-field { position: relative; } .seeall-page .seeall-filter-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; display: inline-flex; align-items: center; height: 38px; padding: 0 34px 0 16px; background-color: var(--color-white); background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 12px; border: 1px solid var(--color-border-soft); color: var(--color-text-muted-strong); border-radius: 999px; font-size: 13px; font-weight: 500; line-height: 1; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease; } .seeall-page .seeall-filter-select:hover { border-color: var(--color-border-strong); color: var(--color-text); } .seeall-page .seeall-filter-select:focus-visible { outline: none; border-color: var(--color-c-3b82f6); box-shadow: 0 0 0 3px var(--color-sky-tint); } /* Matches `.screener-results-card__export` pill form. SeeAll head sits on a light bg, so the brand-primary solid replaces highlight (white-alpha) which would otherwise vanish. */ .seeall-page .seeall-export-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--color-brand-primary); color: var(--color-white); font-size: 12px; font-weight: 700; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--color-brand-primary); transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease; white-space: nowrap; cursor: pointer; line-height: 1; } .seeall-page .seeall-export-btn svg { font-size: 12px; } .seeall-page .seeall-export-btn:hover:not(:disabled) { background: var(--color-brand-primary-hover); border-color: var(--color-brand-primary-hover); transform: translateY(-1px); } .seeall-page .seeall-export-btn:disabled { opacity: 0.55; cursor: not-allowed; } /* Body / table area. The wrapper enforces horizontal scrolling for small viewports while keeping the sticky from the JSX. */ .seeall-page .modal-body { background: var(--color-surface-soft); } .seeall-page .seeall-table-scroll { width: 100%; overflow-x: auto; scrollbar-width: thin; background: var(--color-white); } .seeall-page .seeall-table-scroll::-webkit-scrollbar { height: 8px; width: 8px; } .seeall-page .seeall-table-scroll::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 8px; } .seeall-page .seeall-table-scroll::-webkit-scrollbar-thumb:hover { background: var(--color-text-faint); } .seeall-pagination, .screener-pagination, .gm-drawer__foot, footer { padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important; } .seeall-page .stock-table thead th { background: var(--color-surface-soft); border-bottom: 1px solid var(--color-border-soft); color: var(--color-text-muted); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 14px 16px; white-space: nowrap; } .seeall-page .stock-table tbody td { padding: 14px 16px; border-bottom: 1px solid var(--color-surface-softer); vertical-align: middle; } .seeall-page .stock-table tbody tr:last-child td { border-bottom: none; } /* Unified row hover for the SeeAll modal list. The page is wrapped in `.seeall-page` (not `.dash-table-card`), so the dashboard's per-variant green/red hover rules don't apply here — we use the shared brand-tinted hover (var(--color-brand-tint)) that's also applied to dashboard, screeners and portfolio row tables. */ .seeall-page .stock-table tbody tr.dashboard-linked-row { cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease; } .seeall-page .stock-table tbody tr.dashboard-linked-row:hover td, .seeall-page .stock-table tbody tr.dashboard-linked-row:focus-visible td { --bs-table-bg: var(--color-brand-tint); background-color: var(--color-brand-tint) !important; } .seeall-page .stock-table tbody tr.dashboard-linked-row:hover .stock-name, .seeall-page .stock-table tbody tr.dashboard-linked-row:focus-visible .stock-name { color: var(--color-text-strong); } .seeall-page .stock-table .row-no { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 24px; padding: 0 8px; background: var(--color-surface-softer); color: var(--color-text-subtle); border-radius: 999px; font-size: 12px; font-weight: 600; } .seeall-page .stock-table .stock-info img { width: 34px; height: 34px; object-fit: contain; background: var(--color-surface-soft); border: 1px solid var(--color-c-eef2f7); border-radius: 8px; } /* Pagination bar */ .seeall-page .seeall-pagination { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 20px; background: var(--color-white); border-top: 1px solid var(--color-border-soft); flex-wrap: wrap; } .seeall-page .seeall-pagination__label { font-size: 13px; color: var(--color-text-subtle); } .seeall-page .seeall-pagination__label strong { color: var(--color-text-strong); font-weight: 700; } .seeall-page .seeall-pagination__buttons { display: inline-flex; align-items: center; gap: 8px; } .seeall-page .seeall-pagination__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 16px; background: var(--color-white); border: 1px solid var(--color-border-soft); color: var(--color-text-muted-strong); border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease; } .seeall-page .seeall-pagination__btn:hover:not(:disabled) { border-color: var(--color-border-strong); color: var(--color-text-strong); background: var(--color-surface-soft); transform: translateY(-1px); } .seeall-page .seeall-pagination__btn:disabled { opacity: 0.5; cursor: not-allowed; } /* Duplicate .seeall-pagination unscoped block removed — scoped version at line 8721 suffices */ .seeall-pagination__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 16px; background: var(--color-white); border: 1px solid var(--color-border-soft); color: var(--color-text-muted-strong); border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease; } .seeall-pagination__btn:hover:not(:disabled) { border-color: var(--color-border-strong); color: var(--color-text-strong); background: var(--color-surface-soft); transform: translateY(-1px); } .seeall-pagination__btn:disabled { opacity: 0.5; cursor: not-allowed; } /* Unscoped pagination container / label / buttons — used by both .seeall-page (modal) and screener-results-card contexts. */ .seeall-pagination { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 20px; background: var(--color-white); border-top: 1px solid var(--color-border-soft); flex-wrap: wrap; } .seeall-pagination__label { font-size: 13px; color: var(--color-text-subtle); } .seeall-pagination__label strong { color: var(--color-text-strong); font-weight: 700; } .seeall-pagination__buttons { display: inline-flex; align-items: center; gap: 8px; } /* Tablet + small viewports (≤1199.98px): single-row layout would push Export XLSX into the absolute close button at the top-right corner. Stack the title and actions so the actions row drops below the close button vertically; this removes any horizontal collision and makes the right-side gutter from `.seeall-head` unnecessary. The `<=767.98` block below still overrides padding/title size for mobile. */ @media (max-width: 1198px) { .seeall-page .seeall-head { padding: 28px 16px 18px 24px; } .seeall-page .seeall-head__inner { flex-direction: column; align-items: stretch; gap: 12px; } .seeall-page .seeall-head__actions { justify-content: flex-start; } } @media (max-width: 767px) { .seeall-page .seeall-head { padding: 22px 16px 16px; } .seeall-page .seeall-head .dash-table-card__title { font-size: 18px; } .seeall-page .seeall-pagination, .seeall-pagination { padding: 12px 14px; } } /* ──────────────────────────────────────────────────────────────── Market risk page (src/app/(protected)/marketrisk/MarketRiskClient.tsx) ──────────────────────────────────────────────────────────────── Wraps the existing `mrd-*` cards in `dash-section-card` chrome and restyles each category sub-card header to use a circular pastel icon badge instead of the legacy blue gradient strip. */ .marketrisk-page.mrd-header-section { padding: 32px 0 56px; } .marketrisk-page .dash-section-card.marketrisk-intro .dash-section-card__head { padding-bottom: 18px; } .marketrisk-page .marketrisk-section__body { padding: 20px 24px 24px; } .marketrisk-page .mrd-card, .marketrisk-page .mrd-card-custom { background: var(--color-white); border: 1px solid var(--color-border-card); border-radius: 16px; box-shadow: 0 4px 18px -10px var(--color-ink-tint); overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .marketrisk-page .mrd-card:hover, .marketrisk-page .mrd-card-custom:hover { transform: translateY(-2px); border-color: var(--color-c-d4d9e3); box-shadow: 0 10px 24px -12px var(--color-ink-tint); } /* Override the legacy blue gradient `.mrd-section-header` strip when inside `.marketrisk-page`. New look: white surface, slate title and a circular pastel icon badge tied to the category. */ .marketrisk-page .mrd-section-header { background: var(--color-white); color: var(--color-text-strong); display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--color-surface-softer); font-weight: 600; font-size: 15px; justify-content: flex-start; } .marketrisk-page .mrd-section-header__title { font-weight: 600; color: var(--color-text-strong); } .marketrisk-page .mrd-icon-badge { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; } .marketrisk-page .mrd-icon-badge svg { width: 18px; height: 18px; } /* Colored bullet dots for `.mrd-list-item` rows. */ .marketrisk-page .mrd-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--color-border-strong); } .marketrisk-page .mrd-dot--positive { background: var(--color-bull-bright); box-shadow: 0 0 0 3px var(--color-bull-bright-tint); } .marketrisk-page .mrd-dot--negative { background: var(--color-bear-bright); box-shadow: 0 0 0 3px var(--color-bear-bright-tint); } .marketrisk-page .mrd-dot--neutral { background: var(--color-c-eab308); box-shadow: 0 0 0 3px var(--color-c-eab308-a18); } .marketrisk-page .mrd-list-item { padding: 12px 0; font-size: 14px; color: var(--color-text); transition: background-color 0.2s ease; border-radius: 8px; } .marketrisk-page .mrd-list-item:hover { background: var(--color-surface-soft); } /* ──────────────────────────────────────────────────────────────── MRS Trends chart (src/components/charts/MRSChart.tsx) ──────────────────────────────────────────────────────────────── Bucket toggle (1 Week / 3 Months / 1 Year), risk-level legend and canvas wrapper. Class-based so the marketrisk page can gracefully scale them across breakpoints. */ .mrs-chart__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; width: 100%; padding: 0 4px 12px; } .mrs-chart__bucket-toggle { display: inline-flex; background: rgba(11, 40, 191, 0.06); border: 1px solid rgba(11, 40, 191, 0.12); border-radius: 999px; padding: 3px; gap: 2px; flex-wrap: nowrap; } .mrs-chart__bucket-btn { appearance: none; -webkit-appearance: none; -moz-appearance: none; border: none; cursor: pointer; padding: 6px 14px; border-radius: 999px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #0b28bf; background: transparent; transition: all 0.15s ease; white-space: nowrap; } .mrs-chart__bucket-btn.is-active { color: #ffffff; background: #0b28bf; } .mrs-chart__legend { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 14px; font-size: 11px; font-weight: 600; color: #77777f; text-transform: uppercase; letter-spacing: 0.06em; } .mrs-chart__legend-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .mrs-chart__legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .mrs-chart__chart-container { background: linear-gradient( 180deg, rgba(11, 40, 191, 0.02) 0%, rgba(255, 255, 255, 0) 100% ); border: 1px solid rgba(11, 40, 191, 0.08); border-radius: 12px; } .mrs-chart__canvas-wrap { position: relative; height: 260px; width: 100%; } .mrs-chart__empty { display: flex; align-items: center; justify-content: center; height: 100%; color: #9aa0a6; font-size: 13px; } /* Cards inside the marketrisk page: the legacy `.mrd-card .card-body` override (`padding: 0px 15px !important` from 1024px) zeroes out the vertical padding which makes content touch the card edges below 1024px. Restore breathing room when scoped to `.marketrisk-page`. */ .marketrisk-page .mrd-card .card-body, .marketrisk-page .mrd-card-custom .card-body { padding: 18px 18px !important; } /* Tablet-only responsiveness (768px-1024px): keep the existing desktop layout structure but tighten card chrome, typography, and chart controls so 4-up sections remain readable around 992px-1024px. */ @media (min-width: 768px) and (max-width: 1024px) { .marketrisk-page .marketrisk-section__body { padding: 18px 18px 22px; } .marketrisk-page .mrd-card .card-body, .marketrisk-page .mrd-card-custom .card-body { padding: 16px !important; } .marketrisk-page .mrd-section-header { padding: 14px 16px; gap: 10px; font-size: 14.5px; } .marketrisk-page .mrd-icon-badge { width: 34px; height: 34px; } .marketrisk-page .mrd-icon-badge svg { width: 17px; height: 17px; } .marketrisk-page .mrd-pill, .marketrisk-page .mrd-risk-box { height: 58px; border-radius: 14px; } .marketrisk-page .mrd-pill { padding: 0 14px; font-size: 22px; } .marketrisk-page .mrd-pill span { font-size: 20px; } .marketrisk-page .mrd-risk-box { font-size: 20px; } .marketrisk-page .mrd-was-box { height: 84px; } .marketrisk-page .mrd-was-box h2 { font-size: 27px; } .marketrisk-page .mrd-sub { padding: 10px 4px; } .marketrisk-page .mrd-val { font-size: 14.5px; } .marketrisk-page .mrd-lbl { font-size: 11.5px; } .marketrisk-page .mrd-risk-bar-labels { display: grid !important; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 12px; } .marketrisk-page .mrd-risk-bar-labels span { font-size: 9.5px; letter-spacing: -0.01em; text-align: center; } .marketrisk-page .mrd-list-item { column-gap: 10px; font-size: 13px; } .marketrisk-page .mrd-vix-data { min-width: 0; font-size: 12px; } .mrs-chart__header { gap: 8px; align-items: flex-start; } .mrs-chart__bucket-btn { padding: 5px 10px; font-size: 10px; letter-spacing: 0.04em; } .mrs-chart__legend { gap: 8px 10px; font-size: 10px; } .mrs-chart__legend-dot { width: 7px; height: 7px; } .mrs-chart__canvas-wrap { height: 260px; } } @media (max-width: 767.98px) { .marketrisk-page .marketrisk-section__body { padding: 16px 14px 20px; } .marketrisk-page .mrd-section-header { padding: 13px 14px; font-size: 14px; } .marketrisk-page .mrd-card .card-body, .marketrisk-page .mrd-card-custom .card-body { padding: 14px !important; } /* Stack the chart header (toggle above legend) on tablet/phone so neither the bucket pills nor the 5-item legend cramp each other. */ .mrs-chart__header { flex-direction: column; align-items: stretch; gap: 10px; } .mrs-chart__bucket-toggle { align-self: flex-start; } .mrs-chart__legend { gap: 10px; font-size: 10.5px; } .mrs-chart__canvas-wrap { height: 245px; } } @media (max-width: 575.98px) { .marketrisk-page .mrd-card .card-body, .marketrisk-page .mrd-card-custom .card-body { padding: 12px !important; } .mrs-chart__bucket-btn { padding: 5px 10px; font-size: 10.5px; letter-spacing: 0.04em; } .mrs-chart__legend { gap: 8px 10px; font-size: 10px; } .mrs-chart__legend-dot { width: 7px; height: 7px; } .mrs-chart__canvas-wrap { height: 220px; } } @media (max-width: 380px) { .marketrisk-page .mrd-card .card-body, .marketrisk-page .mrd-card-custom .card-body { padding: 10px !important; } /* Pill-style summary boxes on the very narrow phones — the decorative `::before` blob overflows the squat pills, so trim it and compact the box itself. */ .marketrisk-page .mrd-pill, .marketrisk-page .mrd-risk-box { height: 44px; border-radius: 12px; } .marketrisk-page .mrd-pill { font-size: 16px; padding: 0 12px; } .marketrisk-page .mrd-pill span { font-size: 14px; } .marketrisk-page .mrd-risk-box { font-size: 14px; } .marketrisk-page .mrd-pill::before, .marketrisk-page .mrd-risk-box::before { width: 70px; height: 70px; } .marketrisk-page .mrd-was-box { height: 64px; } .marketrisk-page .mrd-was-box h2 { font-size: 18px; } /* 5 risk labels in a 320px row — drop letter-spacing and force a non-wrapping micro-typography so none of them collide. */ .marketrisk-page .mrd-risk-bar-labels { font-size: 9px; letter-spacing: -0.02em; } .marketrisk-page .mrd-section-header { padding: 10px 12px; gap: 8px; } .marketrisk-page .mrd-icon-badge { width: 26px; height: 26px; } .marketrisk-page .mrd-icon-badge svg { width: 14px; height: 14px; } /* List rows: keep label + score on one row when there's space, wrap cleanly when there isn't. */ .marketrisk-page .mrd-list-item { flex-wrap: wrap; column-gap: 8px; row-gap: 2px; } .marketrisk-page .mrd-vix-data { flex: 1 1 auto; min-width: 0; } .mrs-chart__bucket-btn { padding: 4px 8px; font-size: 10px; } .mrs-chart__legend { gap: 6px 8px; font-size: 9.5px; } .mrs-chart__canvas-wrap { height: 200px; } } .weightings-page { background: var(--color-surface-soft); padding: 32px 0 64px; } .weightings-page .container { display: flex; flex-direction: column; gap: 20px; } /* Intro card icon - subtle blue badge mirroring `.sector-card__icon`. */ .weightings-page .weightings-intro .dash-section-card__title { display: inline-flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 700; color: var(--color-text-strong); } .weightings-page .weightings-intro__icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; background: var(--color-brand-tint); color: var(--color-brand-primary); flex-shrink: 0; } .weightings-page .weightings-intro__icon svg { width: 18px; height: 18px; } /* Outer accordion-item becomes a dashboard section card. Inner ones get a flatter, slightly recessed surface so the nesting depth reads at a glance without bordering on noisy. */ .weightings-page .security-compose { margin-top: 0; display: flex; flex-direction: column; gap: 16px; } .weightings-page .accordion-item { background: var(--color-white); border: 1px solid var(--color-border-card); border-radius: 16px; box-shadow: 0 4px 18px -10px var(--color-ink-tint); overflow: hidden; transition: box-shadow 0.2s ease, border-color 0.2s ease; } .weightings-page .accordion-item:hover { border-color: var(--color-c-d4d9e3); } .weightings-page .accordion-item + .accordion-item, .weightings-page > .accordion + .accordion { margin-top: 0; } /* Section header (.accordion-button) - replaces the legacy blue tint with the dashboard `dash-section-card__head` look. Bootstrap's default chevron is removed and replaced with a custom slate pill chevron on the right, which rotates when expanded. */ .weightings-page .accordion-button, .weightings-page .security-compose .accordion-button, .weightings-page .security-compose .accordion-button:not(.collapsed) { background: var(--color-white); color: var(--color-text-strong); padding: 22px 24px; font-size: 16px; font-weight: 600; border: none; border-bottom: 1px solid transparent; box-shadow: none; display: flex; align-items: center; gap: 16px; transition: background-color 0.2s ease, border-color 0.2s ease; } .weightings-page .accordion-button:hover { background: var(--color-surface-soft); } .weightings-page .accordion-button:not(.collapsed) { background: var(--color-surface-soft); border-bottom-color: var(--color-c-eef2f7); } .weightings-page .accordion-button:focus, .weightings-page .accordion-button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-brand-tint); } /* Replace Bootstrap's chevron with a slate pill chevron. */ .weightings-page .accordion-button::after { width: 32px; height: 32px; background-image: url("data:image/svg+xml;utf8,"); background-color: var(--color-surface-softer); background-size: 14px 14px; background-position: center; border-radius: 999px; border: 1px solid var(--color-border-soft); flex-shrink: 0; transition: background-color 0.2s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .weightings-page .accordion-button:not(.collapsed)::after { background-color: var(--color-c-e0e7ff); border-color: var(--color-c-c7d2fe); } .weightings-page .accordion-button:hover::after { background-color: var(--color-border-soft); } /* Header text vocabulary. Inner accordion buttons get a slightly smaller title so the hierarchy is obvious. */ .weightings-page .security { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; flex-grow: 1; } .weightings-page .security h6 { margin: 0; font-size: 17px; font-weight: 600; color: var(--color-text-strong); } .weightings-page .security p { margin: 0; font-size: 13px; color: var(--color-text-subtle); } /* Score value chip displayed in some accordion headers (e.g. TIS / FIS / inner OMS / LS pills). Restyled to match dashboard `.score-pill`. */ .weightings-page .accordion-button .score-value { display: inline-flex; align-items: center; justify-content: center; height: 26px; padding: 0 12px; background: var(--color-brand-tint); color: var(--color-brand-primary); border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; margin-right: 12px; white-space: nowrap; } /* Hide the legacy "reload-com" placeholder (kept in JSX for layout but visually redundant inside the new chrome). */ .weightings-page .reload-com { display: none; } /* Inner accordion items - flatter and slightly recessed inside their parent. The outer surface uses white; nested items use var(--color-surface-soft) to make the hierarchy obvious. */ .weightings-page .inner-accordion { background: var(--color-c-fbfcfe); border: 1px solid var(--color-c-eef2f7); border-radius: 14px; box-shadow: none; } .weightings-page .inner-accordion .accordion-button, .weightings-page .inner-accordion .accordion-button:not(.collapsed) { background: transparent; padding: 16px 20px; font-size: 14.5px; } .weightings-page .inner-accordion .accordion-button:hover { background: var(--color-ink-tint); } .weightings-page .inner-accordion .accordion-button:not(.collapsed) { background: var(--color-brand-tint); } .weightings-page .inner-accordion .security h6 { font-size: 15px; font-weight: 600; } .weightings-page .inner-accordion .security p { font-size: 12.5px; } /* Body padding. Bootstrap's default 1rem feels tight inside the new chrome. */ .weightings-page .accordion-body { padding: 24px; } .weightings-page .inner-accordion .accordion-body { padding: 18px 20px 22px; } .weightings-page .inner-accordion--disabled { opacity: 0.5; pointer-events: none; } .weightings-page .inner-accordion--disabled .accordion-button { cursor: not-allowed; } .weight-slider--disabled .score-header h6, .weight-slider--disabled .score-subtext { color: #9ca3af; } .custom-progress--disabled { cursor: not-allowed; } /* Top-of-body actions row: mkt-toggle on the left, ghost + primary buttons on the right. `--end` variant collapses to right-aligned when there is no toggle. */ .weightings-page .weightings-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 0 0 18px; } .weightings-page .weightings-actions--end { justify-content: flex-end; } .weightings-page .weightings-actions__buttons { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* Slate-pill buttons matching dashboard filter button + dark primary CTA. Unscoped variants live alongside the scoped ones so the same look can be reused on other pages (e.g. portfolio Save button). The scoped versions are kept verbatim to preserve existing specificity on the weightings page. */ .weightings-btn { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 18px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease; } .weightings-btn--ghost { background: var(--color-white); border: 1px solid var(--color-border-soft); color: var(--color-text-muted-strong); box-shadow: 0 1px 2px var(--color-ink-tint); } .weightings-btn--ghost:hover { border-color: var(--color-border-strong); color: var(--color-text-strong); background: var(--color-surface-soft); transform: translateY(-1px); } .weightings-btn--primary { background: var(--color-brand-primary); border: 1px solid var(--color-brand-primary); color: var(--color-white); box-shadow: 0 4px 12px var(--color-brand-tint); } .weightings-btn--primary:hover { background: var(--color-brand-primary-hover); border-color: var(--color-brand-primary-hover); transform: translateY(-1px); box-shadow: 0 6px 16px var(--color-brand-tint); } .weightings-btn:disabled, .weightings-btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; } /* Duplicate .weightings-page .weightings-btn block removed — unscoped .weightings-btn at line 9654 suffices */ .weightings-page .weightings-btn--ghost { background: var(--color-white); border: 1px solid var(--color-border-soft); color: var(--color-text-muted-strong); box-shadow: 0 1px 2px var(--color-ink-tint); } .weightings-page .weightings-btn--ghost:hover { border-color: var(--color-border-strong); color: var(--color-text-strong); background: var(--color-surface-soft); transform: translateY(-1px); } .weightings-page .weightings-btn--primary { background: var(--color-brand-primary); border: 1px solid var(--color-brand-primary); color: var(--color-white); box-shadow: 0 4px 12px var(--color-brand-tint); } .weightings-page .weightings-btn--primary:hover { background: var(--color-brand-primary-hover); border-color: var(--color-brand-primary-hover); transform: translateY(-1px); box-shadow: 0 6px 16px var(--color-brand-tint); } /* Slider rows. Reset legacy `.security-compose` overrides via higher specificity scoped under `.weightings-page`. */ .weightings-page .score-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0; color: var(--color-text-strong); } .weightings-page .score-header h6 { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--color-text-strong); letter-spacing: -0.01em; line-height: 1.2; } .weightings-page .score-value { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 24px; padding: 0 10px; background: var(--color-brand-tint); color: var(--color-brand-primary); border-radius: 999px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; } .weightings-page .score-subtext { margin: 4px 0 12px; color: var(--color-text-subtle); font-size: 12.5px; line-height: 1.45; } /* Modernised slider bar. The legacy `.security-compose` rules earlier in this file use a brighter blue with a green-bordered dot - we keep the blue but soften the bar, round the corners, and replace the dot with a white circle that gets a focus ring on hover. */ .weightings-page .custom-progress, .weightings-page .security-compose .custom-progress { position: relative; height: 8px; background: var(--color-border-soft); border-radius: 999px; overflow: visible; cursor: pointer; margin-bottom: 26px; transition: background-color 0.2s ease; } .weightings-page .custom-progress:hover { background: var(--color-border-strong); } .weightings-page .custom-progress-bar, .weightings-page .security-compose .custom-progress-bar { height: 100%; background: linear-gradient( 90deg, var(--color-brand-primary) 0%, var(--color-c-3b50d6) 100% ); border-radius: 999px; transition: width 0.15s ease; } .weightings-page .progress-dot, .weightings-page .security-compose .progress-dot { position: absolute; top: 50%; width: 18px; height: 18px; background: var(--color-white); border: 2px solid var(--color-brand-primary); border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 2px 6px var(--color-brand-tint), 0 1px 2px var(--color-ink-tint); cursor: grab; transition: transform 0.15s ease, box-shadow 0.2s ease; } .weightings-page .progress-dot:hover, .weightings-page .security-compose .progress-dot:hover { transform: translate(-50%, -50%) scale(1.15); box-shadow: 0 0 0 6px var(--color-brand-tint), 0 2px 6px var(--color-brand-tint); } .weightings-page .progress-dot:active, .weightings-page .security-compose .progress-dot:active { cursor: grabbing; transform: translate(-50%, -50%) scale(1.1); } /* Weight-sum status pill. Replaces the legacy `.weight-sum` chip with a `score-pill`-style rounded pill that maps to ok / warn / danger based on `getWeightStatus`. */ .weightings-page .weight-sum-row { display: flex; justify-content: flex-end; margin-top: 8px; } .weightings-page .weight-sum-pill { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 8px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; } .weightings-page .weight-sum-pill__icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; background: var(--color-highlight); } .weightings-page .weight-sum-pill__icon svg { width: 12px; height: 12px; } .weightings-page .weight-sum-pill__label strong { font-weight: 700; font-variant-numeric: tabular-nums; } .weightings-page .weight-sum-pill__delta { padding: 0 8px; border-radius: 999px; background: var(--color-ink-tint); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; } .weightings-page .weight-sum-pill--ok { background: var(--color-bull-bright-tint); border-color: var(--color-bull-bright-tint); color: var(--color-c-15803d); } .weightings-page .weight-sum-pill--warn { background: var(--color-amber-tint); border-color: var(--color-amber-tint); color: var(--color-c-eab308); } .weightings-page .weight-sum-pill--danger { background: var(--color-bear-bright-tint); border-color: var(--color-bear-bright-tint); color: var(--color-bear-strong); } /* Old legacy `.weight-sum` paragraph is no longer rendered, but if it shows up anywhere else inside this scope, neutralise it so the new pill doesn't clash. */ .weightings-page .weight-sum { background: transparent; padding: 0; margin: 0; } /* Make sure the WeightSlider columns get consistent spacing in the new chrome. The default Bootstrap `.row` already handles horizontal gutters; we only need to space rows of sliders vertically. */ .weightings-page .accordion-body .row > [class*="col-"] { margin-bottom: 8px; } @media (max-width: 767.98px) { .weightings-page { padding: 20px 0 48px; } .weightings-page .accordion-button, .weightings-page .security-compose .accordion-button, .weightings-page .security-compose .accordion-button:not(.collapsed) { padding: 18px 16px; } .weightings-page .accordion-body { padding: 18px 16px 22px; } .weightings-page .inner-accordion .accordion-body { padding: 14px 14px 18px; } .weightings-page .weightings-actions { flex-direction: column; align-items: stretch; } .weightings-page .weightings-actions__buttons { justify-content: flex-end; } .weightings-page .weightings-btn { flex: 1; min-width: 0; padding: 0 14px; } .weightings-page .accordion-button .score-value { margin-right: 8px; } .weightings-page .weight-sum-row { justify-content: stretch; } .weightings-page .weight-sum-pill { width: 100%; justify-content: center; } } .profile.profile-shell--v2 { display: block; height: auto; min-height: calc(100vh - 170px); min-height: calc(100dvh - 170px); padding: 28px 0 56px; align-items: stretch; } /* Card container */ .profile-shell--v2 .pf-card { background: var(--color-white); border: 1px solid var(--color-border-card); border-radius: 18px; box-shadow: 0 12px 32px -18px var(--color-ink-tint), 0 2px 6px -4px var(--color-ink-tint); overflow: hidden; position: relative; } /* ─── Hero / avatar ─── */ .profile-shell--v2 .pf-hero { position: relative; } .profile-shell--v2 .pf-hero__banner { height: 140px; background: radial-gradient( 120% 100% at 0% 0%, var(--color-indigo-tint), transparent 55% ), radial-gradient( 120% 100% at 100% 0%, var(--color-c-ec4899-a16), transparent 55% ), linear-gradient( 135deg, var(--color-brand-tint-bg) 0%, var(--color-c-e0e7ff) 50%, var(--color-c-ede9fe) 100% ); position: relative; } .profile-shell--v2 .pf-hero__banner::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient( circle at 20% 30%, var(--color-highlight) 0, transparent 35% ), radial-gradient( circle at 80% 80%, var(--color-highlight) 0, transparent 30% ); pointer-events: none; } .profile-shell--v2 .pf-hero__avatar-wrap { position: relative; width: 124px; height: 124px; margin: -62px auto 0; } .profile-shell--v2 .pf-hero__avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 4px solid var(--color-white); box-shadow: 0 12px 30px -12px var(--color-ink-tint); background: var(--color-surface-softer); display: block; } .profile-shell--v2 .pf-hero__avatar--initials { display: flex; align-items: center; justify-content: center; background: linear-gradient( 135deg, var(--color-c-6366f1) 0%, var(--color-c-8b5cf6) 100% ); color: var(--color-white); font-size: 38px; font-weight: 700; letter-spacing: 1px; } .profile-shell--v2 .pf-hero__camera { position: absolute; right: 2px; bottom: 2px; width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--color-white); background: var(--color-brand-primary); color: var(--color-white); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 14px var(--color-brand-tint); transition: transform 0.18s ease, background 0.18s ease; font-size: 14px; padding: 0; } .profile-shell--v2 .pf-hero__camera:hover:not(:disabled) { background: var(--color-c-1a3bea); transform: scale(1.06); } .profile-shell--v2 .pf-hero__camera:disabled { opacity: 0.55; cursor: not-allowed; } /* ─── Pending-photo action bar (visible only after a file is picked) ─── */ .profile-shell--v2 .pf-photo-actions { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 18px 0; flex-wrap: wrap; } .profile-shell--v2 .pf-photo-actions__label { font-size: 12.5px; color: var(--color-text-muted); font-weight: 600; padding: 5px 12px; background: var(--color-surface-softer); border-radius: 999px; } /* ─── Identity header ─── */ .profile-shell--v2 .pf-identity { padding: 14px 24px 4px; text-align: center; } .profile-shell--v2 .pf-identity__name { font-size: 22px; font-weight: 700; color: var(--color-text-strong); margin: 0; letter-spacing: -0.01em; line-height: 1.2; min-height: 28px; } .profile-shell--v2 .pf-identity__email { font-size: 13px; color: var(--color-text-subtle); margin: 4px 0 0; min-height: 18px; } /* ─── Details section ─── */ .profile-shell--v2 .pf-details { padding: 20px 24px 28px; } .profile-shell--v2 .pf-details__head { padding: 14px 0 6px; border-top: 1px solid var(--color-surface-softer); margin-top: 4px; } .profile-shell--v2 .pf-details__head h3 { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); margin: 0 0 2px; } .profile-shell--v2 .pf-details__head p { font-size: 12px; color: var(--color-text-faint); margin: 0; } /* ─── Field row ─── */ .profile-shell--v2 .pf-row { display: flex; align-items: center; gap: 14px; padding: 14px 8px; border-bottom: 1px solid var(--color-surface-softer); transition: background 0.18s ease, border-color 0.18s ease; border-radius: 12px; } .profile-shell--v2 .pf-row:last-of-type { border-bottom: 0; } .profile-shell--v2 .pf-row.is-editing { background: var(--color-c-f8faff); border-color: transparent; box-shadow: inset 0 0 0 1px var(--color-c-dbe3ff); /* The row is `align-items: center` by default so the icon + read-only value all sit on a single horizontal line. While editing, however, `.pf-row__body` becomes a stacked (label + input) two-line block, which would otherwise push the Save / Cancel buttons up to the label's vertical center. Aligning the row to `flex-end` instead drops both icon buttons down onto the input's baseline so they sit in line with the field they act on. */ align-items: flex-end; width: 100%; } /* Keep the leading row icon visually attached to the input row (not pulled all the way down to the input's baseline) when editing. */ .profile-shell--v2 .pf-row.is-editing .pf-row__icon { align-self: flex-end; margin-bottom: 1px; } /* The actions cluster sits on the input row. The 1px nudge accounts for the input's 1px border so the icon buttons feel perfectly centered against the input's text baseline rather than its outer edge. */ .profile-shell--v2 .pf-row.is-editing .pf-row__actions { margin-bottom: 1px; } .profile-shell--v2 .pf-row__icon { width: 38px; height: 38px; border-radius: 11px; background: linear-gradient( 135deg, var(--color-brand-tint-bg) 0%, var(--color-c-ede9fe) 100% ); color: var(--color-brand-primary); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 15px; } .profile-shell--v2 .pf-row__body { flex: 1; min-width: 0; } .profile-shell--v2 .pf-row__label { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--color-text-faint); margin-bottom: 3px; } .profile-shell--v2 .pf-row__value { font-size: 15px; color: var(--color-text-strong); font-weight: 500; margin: 0; word-break: break-word; line-height: 1.4; } .profile-shell--v2 .pf-row__empty { color: var(--color-border-strong); font-style: italic; font-weight: 400; } .profile-shell--v2 .pf-row__input { width: 100%; box-sizing: border-box; -webkit-appearance: textfield; appearance: textfield; border: 1px solid var(--color-border-strong); border-radius: 8px; padding: 8px 12px; font-size: 15px; color: var(--color-text-strong); background: var(--color-white); transition: border-color 0.15s ease, box-shadow 0.15s ease; line-height: 1.4; } .profile-shell--v2 .pf-row__input[type="date"] { -webkit-appearance: none; appearance: none; background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px; } /* Safari only */ @supports (-webkit-touch-callout: none) { .profile-shell--v2 .pf-row { gap: 14px; } .profile-shell--v2 .pf-row.is-editing { overflow: visible; } .profile-shell--v2 .pf-row__body { overflow: hidden; } } @supports (-webkit-touch-callout: none) { .profile-shell--v2 .pf-row__input { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; } .profile-shell--v2 .pf-row__input input { flex: 1; min-width: 0; height: 48px; } .profile-shell--v2 .pf-row__input input[type="date"] { -webkit-appearance: none; appearance: none; flex: 1 1 100%; min-width: 0; max-width: 100%; width: 100%; height: 48px; box-sizing: border-box; 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='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px; } .profile-shell--v2 .pf-row__input button { flex: 0 0 48px; width: 48px; height: 48px; } } .profile-shell--v2 .pf-row__input:focus { outline: none; border-color: var(--color-brand-primary); box-shadow: 0 0 0 3px var(--color-brand-tint); } .profile-shell--v2 .pf-row__input:disabled { background: var(--color-surface-soft); color: var(--color-text-faint); cursor: not-allowed; } .profile-shell--v2 .pf-row__actions { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; } .profile-shell--v2 .pf-row__badge { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--color-surface-softer); color: var(--color-text-subtle); padding: 4px 10px; border-radius: 999px; flex-shrink: 0; } /* Read-only row tweaks: no hover affordance, slightly muted value. */ .profile-shell--v2 .pf-row--readonly:hover { background: transparent; } /* ─── Icon buttons ─── */ .profile-shell--v2 .pf-icon-btn { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--color-border-soft); background: var(--color-white); color: var(--color-text-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; font-size: 13px; padding: 0; } .profile-shell--v2 .pf-icon-btn:hover:not(:disabled) { background: var(--color-surface-softer); color: var(--color-brand-primary); border-color: var(--color-c-c7d2fe); } .profile-shell--v2 .pf-icon-btn:disabled { opacity: 0.55; cursor: not-allowed; } .profile-shell--v2 .pf-icon-btn--primary { background: var(--color-brand-primary); color: var(--color-white); border-color: var(--color-brand-primary); } .profile-shell--v2 .pf-icon-btn--primary:hover:not(:disabled) { background: var(--color-c-1a3bea); border-color: var(--color-c-1a3bea); color: var(--color-white); transform: translateY(-1px); } /* ─── Filled buttons (photo save bar) ─── */ .profile-shell--v2 .pf-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; border: 1px solid transparent; cursor: pointer; transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease; line-height: 1; } .profile-shell--v2 .pf-btn--primary { background: var(--color-brand-primary); color: var(--color-white); } .profile-shell--v2 .pf-btn--primary:hover:not(:disabled) { background: var(--color-c-1a3bea); transform: translateY(-1px); } .profile-shell--v2 .pf-btn--ghost { background: var(--color-white); color: var(--color-text-muted); border-color: var(--color-border-soft); } .profile-shell--v2 .pf-btn--ghost:hover:not(:disabled) { background: var(--color-surface-soft); color: var(--color-brand-primary); border-color: var(--color-c-c7d2fe); } .profile-shell--v2 .pf-btn:disabled { opacity: 0.6; cursor: not-allowed; } /* ─── Spinner ─── */ .profile-shell--v2 .pf-spinner { width: 14px; height: 14px; border: 2px solid var(--color-highlight); border-top-color: var(--color-white); border-radius: 50%; animation: pf-spin 0.6s linear infinite; display: inline-block; } /* Icon-button variant uses a darker spinner against the white bg */ .profile-shell--v2 .pf-icon-btn:not(.pf-icon-btn--primary) .pf-spinner { border-color: var(--color-brand-tint); border-top-color: var(--color-brand-primary); } @keyframes pf-spin { to { transform: rotate(360deg); } } /* ─── Loading skeletons for identity header ─── */ .profile-shell--v2 .pf-skel { display: inline-block; background: linear-gradient( 90deg, var(--color-c-eef2f7) 25%, var(--color-surface-soft) 50%, var(--color-c-eef2f7) 75% ); background-size: 200% 100%; border-radius: 6px; animation: pf-skeleton 1.4s linear infinite; } .profile-shell--v2 .pf-skel--name { width: 180px; height: 22px; vertical-align: middle; } .profile-shell--v2 .pf-skel--email { width: 220px; height: 12px; margin-top: 4px; vertical-align: middle; } @keyframes pf-skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ============================================================ Market Risk Score slider — visual parity with Weightings page ============================================================ The MRS slider is read-only but mirrors the WeightSlider chrome (`.score-header`, `.score-subtext`, `.custom-progress`, `.progress-dot`). `.mrs-slider-block` is scoped under `.weightings-page` so it picks up the existing slider styling. We only add the regime-aware gradient (green -> amber -> red) and the 0/2/4/6/8/10 scale markers below. */ .mrs-slider-block { padding: 8px 0 4px; } .mrs-slider-block .score-header { padding: 0 0 2px; } .mrs-slider-block .score-subtext { margin: 2px 0 12px; } .mrs-slider-block .mrs-progress { cursor: default; } .mrs-slider-block .mrs-progress .custom-progress-bar { background: linear-gradient( 90deg, color-mix(in srgb, var(--mrs-color, var(--color-brand-primary)) 55%, white) 0%, var(--mrs-color, var(--color-brand-primary)) 100% ); } .mrs-slider-block .mrs-progress .progress-dot { cursor: default; background: var(--color-white); border-color: var(--mrs-color, var(--color-brand-primary)); } /* ============================================================ GLOBAL OVERRIDE — remove box-shadow from all buttons. Targets native