html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
@supports (height: 100dvh) {
.min-h-screen {
min-height: 100dvh;
}
}
/* === 404 / Not Found page === */
body.not-found main {
max-width: 640px;
margin: 4rem auto;
font-family: system-ui, Arial, sans-serif;
line-height: 1.5;
}
body.not-found .home-link {
display: inline-block;
margin-top: 1rem;
padding: .6rem 1rem;
border: 1px solid #ccc;
border-radius: .5rem;
text-decoration: none;
}
/* Hide default marker for details/summary (moved from index.ejs) */
details summary::-webkit-details-marker { display: none; }
/* Prevent background scroll when modal is open (toggled on ) */
.no-scroll { overflow: hidden; }
/* Tiny trend chart sparklines */
.spark { width: 110px; height: 30px; }
/* Hovercard: 3y chart */
#spark-hovercard {
position: absolute;
width: 560px;
height: 260px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0,0,0,.12);
padding: 8px 12px 12px;
z-index: 1000;
display: none;
}
#spark-hovercard.show { display: block; }
#spark-hovercard .hdr {
display: flex; align-items: center; justify-content: space-between;
font-weight: 600; font-size: .9rem; margin-bottom: .25rem;
}
#spark-hovercard .hdr button {
border: none; background: transparent; cursor: pointer; font-size: 1rem;
}
#spark-hovercard #hc-chart { width: 100%; height: 220px; }
#spark-hovercard .muted { font-size: .8rem; color: #6b7280; margin-top: .25rem; }
@media (max-width: 640px) { #spark-hovercard { display: none !important; } }
/* Homepage benefits card imagery pop */
section[aria-label="Benefits"] img {
box-shadow:
0 18px 40px -20px rgba(79, 70, 229, 0.45),
0 22px 55px -28px rgba(15, 23, 42, 0.22);
transition: box-shadow 200ms ease;
}
section[aria-label="Benefits"] img:hover {
box-shadow:
0 24px 52px -22px rgba(79, 70, 229, 0.5),
0 28px 64px -28px rgba(15, 23, 42, 0.28);
}
html.dark section[aria-label="Benefits"] img {
box-shadow:
0 18px 48px -24px rgba(15, 23, 42, 0.85),
0 26px 60px -26px rgba(99, 102, 241, 0.45);
}
html.dark section[aria-label="Benefits"] img:hover {
box-shadow:
0 26px 58px -22px rgba(15, 23, 42, 0.9),
0 32px 72px -26px rgba(99, 102, 241, 0.5);
}
/* --- Research button --- */
.research-btn {
margin-left: .5rem; font-size: .75rem; line-height: 1;
padding: .25rem .5rem; border: 1px solid #d1d5db; border-radius: .375rem;
background: #f9fafb; cursor: pointer;
}
.research-btn:hover { background: #f8fafc; }
.research-btn:disabled { opacity: .6; cursor: not-allowed; }
/* Active state for toolbar buttons inside the AI modal */
#ai-modal .toolbar .research-btn.active {
background: #dbeafe; /* blue-100 */
border-color: #93c5fd; /* blue-300 */
color: #1e3a8a; /* blue-800 */
}
#ai-modal .toolbar .research-btn.active:hover {
background: #bfdbfe; /* blue-200 */
}
/* --- AI modal --- */
#ai-modal { position: fixed; inset: 0; background: rgba(0,0,0,.4);
display: none; align-items: center; justify-content: center; z-index: 50; }
#ai-modal.show { display: flex; }
#ai-modal .panel { background: #fff; width: min(640px, 92vw); max-height: 85vh;
border-radius: 12px; padding: 16px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
#ai-modal .hdr { display: flex; align-items: center; justify-content: space-between; gap: 8px;
position: sticky; top: 0; z-index: 2; background: inherit; }
#ai-modal .hdr h3 { margin: 0; font-size: 1rem; font-weight: 600; }
#ai-modal .close { border: none; background: transparent; font-size: 1.25rem; cursor: pointer; }
#ai-modal pre { white-space: pre-wrap; overflow: auto; margin-top: .5rem; font-size: .9rem; }
/* Modal body defaults (scrollable area) */
#ai-modal .ai-body {
margin-top: .5rem; font-size: .9rem; line-height: 1.4; white-space: pre-wrap;
flex: 1 1 0%; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
/* Modal toolbar */
#ai-modal .toolbar { display: flex; gap: .5rem; margin-top: .5rem; flex-wrap: wrap;
max-height: none; -webkit-overflow-scrolling: touch;
position: sticky; top: 44px; z-index: 1; background: inherit; padding-bottom: .5rem; }
/* Pills for links */
.link-row { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 .25rem; }
.link-btn {
display: inline-flex; align-items: center; gap: .35rem;
padding: .375rem .6rem;
border: 1px solid #d1d5db; border-radius: .5rem;
background: #f9fafb; text-decoration: none;
}
.link-btn:hover { background: #f3f4f6; }
/* Subtle hyperlink icon before link buttons */
.link-btn::before {
content: 'đź”—';
font-size: .85rem;
opacity: .7;
}
/* Link grid + cards (for Research → Links) */
.section { border: 1px solid #e5e7eb; border-radius: .5rem; background: #fff; padding: .6rem .75rem; margin-top: .5rem; }
.section-heading { font-weight: 600; font-size: .9rem; color: #374151; margin: .1rem 0 .4rem; }
.link-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .5rem; }
.link-card { display: block; text-decoration: none; border: 1px solid #d1d5db; border-radius: .5rem; background: #f9fafb; padding: .5rem .6rem; }
.link-card:hover { background: #f3f4f6; }
.link-title { font-weight: 600; color: #111827; }
.link-desc { color: #6b7280; font-size: .8rem; margin-top: .2rem; }
/* AI modal: make hovered link cards match toolbar active styling */
#ai-modal .links-root .link-card:hover {
background: #dbeafe; /* blue-100 */
border-color: #93c5fd; /* blue-300 */
}
#ai-modal .links-root .link-card:hover .link-title,
#ai-modal .links-root .link-card:hover .link-desc {
color: #1e3a8a; /* blue-800 */
}
/* Compact spacing inside the AI modal */
#ai-modal .section { padding: .28rem .5rem; margin-top: .22rem; }
#ai-modal .section-heading { margin: .02rem 0 .12rem; }
#ai-modal .link-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .32rem; }
#ai-modal .link-card { padding: .36rem .5rem; }
#ai-modal .link-title { margin: 0; line-height: 1.25; }
#ai-modal .link-desc { margin-top: .1rem; line-height: 1.25; }
/* Research box */
.research-box {
background: #f9fafb; border: 1px solid #e5e7eb;
border-radius: .5rem; padding: .6rem .75rem; white-space: pre-wrap;
margin-top: .5rem; /* now that it sits below the info blocks */
}
/* Notes editor inside Research modal */
.notes-root { display: flex; flex-direction: column; gap: .6rem; margin-top: .5rem; }
.notes-label { font-weight: 600; font-size: .9rem; color: #1f2937; }
.dark .notes-label { color: #e5e7eb; }
.notes-textarea {
width: 100%;
min-height: 220px;
padding: .75rem;
border: 1px solid #d1d5db;
border-radius: .5rem;
resize: vertical;
font-family: inherit;
font-size: .9rem;
line-height: 1.45;
background: #f9fafb;
color: #111827;
}
.notes-textarea:focus {
outline: none;
border-color: #2563eb;
box-shadow: 0 0 0 2px rgba(37,99,235,.15);
background: #fff;
}
.dark .notes-textarea {
background: #0f172a;
border-color: #1f2937;
color: #e5e7eb;
}
.dark .notes-textarea:focus {
border-color: #3b82f6;
box-shadow: 0 0 0 2px rgba(59,130,246,.25);
background: #111827;
}
.notes-status { font-size: .8rem; color: #6b7280; }
.dark .notes-status { color: #9ca3af; }
.notes-status.error { color: #b91c1c; }
.dark .notes-status.error { color: #f87171; }
/* Models manager inside Research modal */
.models-root { display: flex; flex-direction: column; gap: 1rem; margin-top: .5rem; }
.models-header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; }
.models-title { font-weight: 600; font-size: .95rem; color: #1f2937; }
.dark .models-title { color: #e5e7eb; }
.models-subtitle { font-size: .82rem; color: #6b7280; margin-top: .2rem; }
.dark .models-subtitle { color: #9ca3af; }
.models-updated { font-size: .78rem; color: #6b7280; align-self: flex-end; }
.dark .models-updated { color: #9ca3af; }
.models-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; }
.models-field { flex: 1 1 220px; display: flex; flex-direction: column; gap: .35rem; }
.models-label { font-weight: 600; font-size: .85rem; color: #1f2937; }
.dark .models-label { color: #e5e7eb; }
.models-form input {
width: 100%;
padding: .6rem .7rem;
border: 1px solid #d1d5db;
border-radius: .55rem;
background: #f9fafb;
color: #111827;
font-size: .88rem;
}
.models-form input:focus {
outline: none;
border-color: #6366f1;
box-shadow: 0 0 0 2px rgba(99,102,241,.18);
background: #fff;
}
.dark .models-form input {
background: #0f172a;
border-color: #1f2937;
color: #e5e7eb;
}
.dark .models-form input:focus {
border-color: #818cf8;
box-shadow: 0 0 0 2px rgba(129,140,248,.28);
background: #111827;
}
.models-add-btn {
padding: .62rem 1.1rem;
border-radius: .6rem;
border: 1px solid #4f46e5;
background: #4f46e5;
color: #fff;
font-weight: 600;
font-size: .88rem;
cursor: pointer;
transition: background .15s ease, transform .15s ease;
}
.models-add-btn:hover { background: #4338ca; }
.models-add-btn:active { transform: translateY(1px); }
.models-add-btn:disabled { opacity: .65; cursor: default; }
.dark .models-add-btn { border-color: #6366f1; background: #4338ca; }
.models-status { font-size: .8rem; color: #6b7280; min-height: 1rem; }
.models-status.error { color: #b91c1c; }
.dark .models-status { color: #9ca3af; }
.dark .models-status.error { color: #f87171; }
.models-list { display: flex; flex-direction: column; gap: .75rem; }
.models-list-inner { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .65rem; }
.models-item {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding: .65rem .75rem;
border: 1px solid rgba(148,163,184,.45);
border-radius: .75rem;
background: rgba(248,250,252,.85);
}
.dark .models-item {
border-color: rgba(71,85,105,.7);
background: rgba(15,23,42,.85);
}
.models-item-main { flex: 1 1 auto; display: flex; flex-direction: column; gap: .25rem; }
.models-link {
font-weight: 600;
color: #1d4ed8;
text-decoration: none;
word-break: break-word;
}
.models-link:hover { text-decoration: underline; }
.dark .models-link { color: #93c5fd; }
.models-meta {
display: flex;
flex-wrap: wrap;
gap: .45rem;
font-size: .78rem;
color: #6b7280;
}
.models-meta span { display: inline-flex; align-items: center; gap: .25rem; }
.models-meta span + span::before {
content: '•';
color: inherit;
margin-right: .25rem;
}
.dark .models-meta { color: #9ca3af; }
.models-remove {
border: 1px solid rgba(239,68,68,.6);
background: rgba(254,226,226,.75);
color: #b91c1c;
border-radius: .5rem;
padding: .4rem .7rem;
font-size: .75rem;
font-weight: 600;
cursor: pointer;
transition: background .15s ease, transform .15s ease;
}
.models-remove:hover { background: rgba(254,202,202,.9); }
.models-remove:active { transform: translateY(1px); }
.models-remove:disabled { opacity: .6; cursor: default; }
.dark .models-remove {
border-color: rgba(248,113,113,.7);
background: rgba(127,29,29,.4);
color: #fca5a5;
}
/* Earnings section label spacing (moved from inline style) */
.earnings-qtr-label { margin: 4px 0 6px 0; }
.earnings-qtr + .earnings-qtr { margin-top: .4rem; }
/* Key/Value grid */
.kv-grid { display: grid; grid-template-columns: 1fr 2fr; gap: .35rem .75rem; margin-top: .5rem; }
.kv-grid dt { font-weight: 600; color: #6b7280; }
.kv-grid dd { margin: 0; display: flex; align-items: center; gap: .4rem; }
.dark .kv-grid dt { color: #9ca3af; }
.copy-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px; height: 24px;
padding: 0;
border: none;
border-radius: 6px;
background: transparent;
color: #475569;
cursor: pointer;
}
.copy-btn:hover { background: #e5e7eb; color: #111827; }
.copy-btn:disabled { opacity: .6; cursor: default; }
.copy-btn svg { width: 14px; height: 14px; }
.copy-btn.copied { background: #dcfce7; border-color: #86efac; color: #166534; }
/* Dark mode hover for copy icon */
.dark .copy-btn:hover { background: #1f2937; color: #e5e7eb; }
.research-box { position: relative; padding-right: 3rem; }
.research-box .copy-inbox { position: absolute; top: 6px; right: 6px; }
.muted { color: #6b7280; font-size: .8rem; }
/* Long tokens / JSON won’t blow the layout */
#ai-modal .research-box,
#ai-modal .ai-body,
#ai-modal code,
#ai-modal pre {
overflow-wrap: anywhere;
word-break: break-word;
}
/* quick flash the moment numbers change */
@keyframes cellPulse {
0% { background-color: #fefcbf; }
30% { background-color: #fef08a; }
100% { background-color: transparent; }
}
.pulse { animation: cellPulse 0.8s ease-out; }
/* responsive table → “stacked cards” on ≤ 640 px */
@media (max-width: 640px) {
.stacked-table thead { display: none; }
.stacked-table,
.stacked-table tbody,
.stacked-table tr { display: block; width: 100%; }
.stacked-table tr { margin-bottom: .75rem; background: #fff;
border: 1px solid #e5e7eb; border-radius: .5rem; overflow: hidden; }
.stacked-table td { display: flex; justify-content: space-between;
width: 100%; padding: .5rem .75rem; border: none !important; }
.stacked-table td::before { content: attr(data-label); font-weight: 600; color: #374151; }
.stacked-table td + td { border-top: 1px dashed #e5e7eb; }
/* Hide everything but .show-mobile when row is *not* expanded */
.stacked-table tr:not(.expanded) td:not(.show-mobile) { display: none; }
/* Preserve the label/value flex layout for the visible pair(s) */
.stacked-table tr td.show-mobile {
display: flex; justify-content: space-between;
width: 100%; padding: .5rem .75rem; border: none !important;
}
/* Expand / collapse affordances */
.stacked-table .expand-toggle { background: none; border: none; font-size: 1rem; line-height: 1; cursor: pointer; }
.stacked-table tbody tr { cursor: pointer; }
.stacked-table tr.totals-row { cursor: default; }
}
/* === Dashboard page === */
body.dashboard {
/* Make the dashboard as narrow as the portfolio page */
background: #f9fafb;
font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
margin: 0 auto; /* center the page */
padding: 1.5rem; /* ~ Tailwind p-6 */
max-width: 72rem; /* ~ Tailwind max-w-6xl */
}
@media (min-width: 1280px) {
body.dashboard { max-width: 80rem; } /* ~ Tailwind max-w-7xl */
}
/* Layout rows */
body.dashboard .row {
display: flex; align-items: center; justify-content: space-between;
gap: 1rem; flex-wrap: wrap;
}
/* Normalize form control typography (scoped) */
body.dashboard button,
body.dashboard input,
body.dashboard select,
body.dashboard textarea {
font: inherit;
color: inherit;
}
/* Actions bar */
body.dashboard .actions {
display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}
body.dashboard .actions a,
body.dashboard .actions form button {
display: inline-block;
padding: .6rem .9rem;
border-radius: 8px;
border: 1px solid #ddd;
background: #fff;
text-decoration: none;
font-weight: 600;
color: #111;
cursor: pointer;
line-height: 1.2;
transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
-webkit-appearance: none;
appearance: none;
}
body.dashboard .actions a:visited { color: #111; }
body.dashboard .actions a:hover,
body.dashboard .actions form button:hover { background: #f6f6f6; }
body.dashboard .actions a:focus-visible,
body.dashboard .actions form button:focus-visible {
outline: 2px solid #6366f1; outline-offset: 2px;
}
body.dashboard .actions form { display: inline; margin: 0; }
/* Lists */
body.dashboard ul { list-style: none; padding: 0; margin: 1rem 0; }
body.dashboard li {
padding: .8rem;
border: 1px solid #eee;
border-radius: 10px;
margin: .5rem 0;
display: flex;
flex-direction: column;
gap: .6rem;
}
body.dashboard .portfolio-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
flex-wrap: wrap;
}
body.dashboard .portfolio-row .right {
display: flex;
gap: .6rem;
flex-wrap: wrap;
align-items: center;
}
body.dashboard .portfolio-row .right form {
margin: 0;
}
body.dashboard .portfolio-allocation-wrap {
margin-top: 0;
}
body.dashboard .allocation-toggle {
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .25rem 0;
background: transparent;
border: none;
color: #1e293b;
font-size: .9rem;
font-weight: 600;
cursor: pointer;
}
body.dashboard .allocation-toggle:focus-visible {
outline: 2px solid #6366f1;
outline-offset: 3px;
border-radius: 4px;
}
body.dashboard .allocation-toggle:hover {
color: #4f46e5;
}
body.dashboard .portfolio-allocation-wrap .allocation-toggle-icon {
transition: transform .2s ease;
}
body.dashboard .portfolio-allocation-wrap.is-open .allocation-toggle-icon {
transform: rotate(180deg);
}
.dark body.dashboard .allocation-toggle {
color: #e2e8f0;
}
.dark body.dashboard .allocation-toggle:hover {
color: #a5b4fc;
}
body.dashboard .portfolio-allocation {
display: flex;
gap: 1.2rem;
align-items: center;
flex-wrap: wrap;
padding: .75rem;
border-radius: 8px;
background: #f8fafc;
border: 1px solid #e5e7eb;
}
body.dashboard .portfolio-allocation-wrap .portfolio-allocation {
margin-top: .5rem;
}
body.dashboard .portfolio-allocation[hidden] {
display: none !important;
}
body.dashboard .allocation-chart {
--pie-size: 120px;
position: relative;
width: var(--pie-size);
height: var(--pie-size);
border-radius: 50%;
background: conic-gradient(#6366f1 0deg, #6366f1 360deg);
flex: 0 0 auto;
}
body.dashboard .allocation-chart::after {
content: "";
position: absolute;
inset: 18%;
border-radius: 50%;
background: #fff;
}
body.dashboard .portfolio-allocation.is-empty .allocation-chart {
display: none;
}
body.dashboard .portfolio-allocation.is-empty .allocation-empty {
display: block;
}
body.dashboard .allocation-legend {
display: flex;
flex-direction: column;
gap: .4rem;
min-width: 12rem;
}
body.dashboard .allocation-legend-item {
display: flex;
align-items: center;
gap: .5rem;
font-size: .9rem;
}
body.dashboard .allocation-legend-color {
width: 12px;
height: 12px;
border-radius: 3px;
background: #94a3b8;
}
body.dashboard .allocation-empty {
display: none;
font-size: .9rem;
}
/* Text helpers (scoped so we don't override global .muted) */
body.dashboard .muted { color: #666; font-size: .9rem; }
body.dashboard .name { font-weight: 700; }
/* Empty state */
body.dashboard .empty {
padding: 2rem;
border: 1px dashed #ccc;
border-radius: 12px;
text-align: center;
color: #666;
}
/* === Import Portfolio page (scoped) === */
body.import {
background: #f9fafb;
font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
margin: 0 auto;
padding: 1.5rem;
max-width: 42rem;
}
body.import .card {
background: #fff;
border: 1px solid #eee;
border-radius: 12px;
padding: 1rem;
}
body.import .row { display: flex; gap: 1rem; align-items: center; }
body.import label { font-weight: 600; display: block; margin: .25rem 0; }
body.import input[type="text"],
body.import input[type="file"] {
width: 100%;
padding: .6rem .7rem;
border: 1px solid #ddd;
border-radius: 8px;
}
body.import .actions { margin-top: 1rem; display: flex; gap: .6rem; }
body.import button,
body.import a.btn {
padding: .6rem .9rem;
border-radius: 8px;
border: 1px solid #ddd;
background: #fff;
text-decoration: none;
font-weight: 600;
color: #111;
cursor: pointer;
}
body.import .errors {
background: #fef2f2;
border: 1px solid #fee2e2;
color: #991b1b;
border-radius: 10px;
padding: .75rem;
margin-bottom: 1rem;
}
body.import .muted { color: #666; font-size: .9rem; }
/* tiny utility used in import.ejs */
body.import .mt-075 { margin-top: .75rem; }
/* === Dark mode (class-based) === */
.dark body.dashboard {
background: #0b1220;
color: #e5e7eb;
}
.dark body.dashboard .actions a,
.dark body.dashboard .actions form button {
background: #0f172a;
border-color: #1f2937;
color: #e5e7eb;
}
.dark body.dashboard .actions a:hover,
.dark body.dashboard .actions form button:hover {
background: #111827;
}
.dark body.dashboard ul li {
background: #0f172a;
border-color: #1f2937;
}
.dark body.dashboard .portfolio-allocation {
background: rgba(15, 23, 42, 0.55);
border-color: #1f2937;
}
.dark body.dashboard .allocation-chart::after {
background: #0f172a;
}
.dark body.dashboard .allocation-empty {
color: #9ca3af;
}
.dark body.dashboard .muted { color: #9ca3af; }
.dark body.dashboard .empty {
border-color: #334155;
color: #cbd5e1;
}
.dark body.dashboard .right a { color: #e5e7eb; }
.dark body.dashboard a:visited { color: #e5e7eb; }
/* === Global dark mode (applies when ) === */
.dark body { background: #0b1220; color: #e5e7eb; }
/* Muted text (global) */
.dark .muted { color: #9ca3af; }
/* Buttons / links that look like buttons (reuses your existing styles) */
.dark .actions a,
.dark .actions form button,
.dark a.btn,
.dark button,
.dark .link-btn,
.dark .research-btn {
background: #0f172a;
border-color: #334155;
color: #e5e7eb;
}
.dark .actions a:hover,
.dark .actions form button:hover,
.dark a.btn:hover,
.dark .link-btn:hover,
.dark .research-btn:hover {
background: #1f2937;
}
/* Active state (dark mode) for AI modal toolbar buttons */
.dark #ai-modal .toolbar .research-btn.active {
background: #1e3a8a; /* blue-800 */
border-color: #3b82f6; /* blue-500 */
color: #bfdbfe; /* blue-200 */
}
.dark #ai-modal .toolbar .research-btn.active:hover {
background: #1d4ed8; /* blue-600 */
}
/* Inputs (cover all text-like controls in dark mode) */
.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
.dark select,
.dark textarea {
background: #0f172a;
border-color: #334155;
color: #e5e7eb;
}
/* Make placeholders readable in dark */
.dark ::placeholder {
color: #9ca3af;
opacity: 1; /* Firefox */
}
/* Tweak native widgets so icons/arrows don't disappear on dark */
.dark input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.85); }
.dark input[type="number"]::-webkit-outer-spin-button,
.dark input[type="number"]::-webkit-inner-spin-button { filter: invert(0.85); }
/* Handle Chrome autofill (which forces a light background by default) */
.dark input:-webkit-autofill,
.dark textarea:-webkit-autofill,
.dark select:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px #0f172a inset !important;
-webkit-text-fill-color: #e5e7eb !important;
caret-color: #e5e7eb;
}
/* Optional: hint browsers to use dark-styled built-in controls */
.dark { color-scheme: dark; }
/* Cards / panels / boxes used around the app */
.dark .card,
.dark .panel,
.dark .section,
.dark .research-box {
background: #0f172a;
border-color: #1f2937;
color: #e5e7eb;
}
/* Dark mode: link cards and headings */
.dark .link-card { background: #0f172a; border-color: #334155; color: #e5e7eb; }
.dark .link-card:hover { background: #111827; }
.dark .link-title { color: #e5e7eb; }
.dark .section-heading { color: #cbd5e1; }
.dark .link-desc { color: #9ca3af; }
/* AI modal: hovered link cards match toolbar active styling (dark) */
.dark #ai-modal .links-root .link-card:hover {
background: #1e3a8a; /* blue-800 */
border-color: #3b82f6; /* blue-500 */
color: #bfdbfe; /* blue-200 */
}
.dark #ai-modal .links-root .link-card:hover .link-title,
.dark #ai-modal .links-root .link-card:hover .link-desc {
color: #bfdbfe; /* blue-200 */
}
/* Hovercard on portfolio */
.dark #spark-hovercard {
background: #0f172a;
border-color: #334155;
}
.dark #spark-hovercard .muted { color: #9ca3af; }
/* AI modal */
.dark #ai-modal .panel { background: #0f172a; border-color: #1f2937; }
.dark #ai-modal .close { color: #e5e7eb; }
/* Ensure sticky toolbar looks correct in dark mode */
.dark #ai-modal .toolbar { background: inherit; }
/* Tables → stacked cards on mobile */
@media (max-width: 640px) {
.dark tr { background: #0f172a; border-color: #334155; }
.dark td { border-color: #334155 !important; }
}
/* Not-found page */
.dark body.not-found main { color: #e5e7eb; }
.dark body.not-found .home-link {
border-color: #334155; background: #0f172a; color: #e5e7eb;
}
/* Import page specifics */
.dark body.import { background: #0b1220; color: #e5e7eb; }
.dark body.import .card { background: #0f172a; border-color: #1f2937; }
.dark body.import .errors {
background: #2a0f12; border-color: #7f1d1d; color: #fecaca;
}
/* ==== Portfolio page dark-mode fixes ==== */
/* Table header: make thead readable in dark */
.dark table thead th {
background: #0f172a;
color: #e5e7eb;
border-color: #334155;
}
/* Table borders on desktop (the mobile case is already handled) */
@media (min-width: 641px) {
.dark table th,
.dark table td {
border-color: #334155 !important;
}
}
/* "TOTAL" summary row (was bg-gray-50) */
.dark tbody tr.font-semibold {
background: #0f172a;
}
/* Stacked-card label color on mobile (td::before) */
.dark td::before { color: #cbd5e1; }
/* Spacing for "Last edited" line */
#lastEdit {
/* add breathing room above table and above Share box */
margin: 0.75rem 0 1rem; /* 12px top, 16px bottom */
padding: 0.25rem 0; /* subtle internal padding */
}
/* Muted "Last edited" line */
.dark #lastEdit { color: #9ca3af; }
/* P/L colors tuned for dark (optional but nicer) */
.dark .text-green-600 { color: #34d399; }
.dark .text-red-600 { color: #f87171; }
/* ——— uPlot in dark mode ——— */
.dark .uplot,
.dark .uplot .u-over,
.dark .uplot .u-under { background: transparent; }
/* Make all chart text light via CSS 'color' (uPlot uses HTML, not SVG ) */
.dark #spark-hovercard,
.dark #spark-hovercard .uplot { color: #cbd5e1; }
.dark .uplot .u-axis,
.dark .uplot .u-axis .u-label,
.dark .uplot .u-values,
.dark .uplot .u-values .u-value,
.dark .uplot .u-title,
.dark .uplot .u-legend {
color: inherit !important;
}
/* Optional: dim grids a bit */
.dark .uplot .u-grid { border-color: #1f2937; }
/* Buttons on this page that aren't in .actions (your two indigo links) */
.dark a.bg-indigo-600:hover { background: #4338ca; }
/* Force uPlot axis tick label color in dark mode (hover 3-year card) */
.dark #spark-hovercard { color: #cbd5e1; } /* base color for the card */
.dark #spark-hovercard .uplot .u-axis * {
color: inherit !important; /* cover labels, ticks, any nested wrappers */
}
/* (optional) make the legend/title match too */
.dark #spark-hovercard .uplot .u-title,
.dark #spark-hovercard .uplot .u-legend {
color: inherit !important;
}
#ai-modal .links-root { white-space: normal; }
#ai-modal .links-root > .section:first-child { margin-top: 0; }
/* Ensure primary submit buttons match hero CTA in dark mode */
.dark button.bg-indigo-600 {
background: #4f46e5; /* indigo-600 */
color: #ffffff;
border-color: transparent;
}
.dark button.bg-indigo-600:hover {
background: #4338ca; /* indigo-700 */
}
/* Ensure destructive buttons remain red in dark mode */
.dark button.bg-red-600 {
background: #dc2626; /* red-600 */
color: #ffffff;
border-color: transparent;
}
.dark button.bg-red-600:hover {
background: #b91c1c; /* red-700 */
}
/* Performance section */
.performance-section {
border: 1px solid rgba(148, 163, 184, 0.4);
border-radius: 0.75rem;
padding: 1.5rem 1.25rem;
background: rgba(248, 250, 252, 0.8);
}
html.dark .performance-section {
border-color: rgba(100, 116, 139, 0.5);
background: rgba(15, 23, 42, 0.7);
}
.performance-header {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 1rem;
}
@media (min-width: 640px) {
.performance-header {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}
.performance-period-controls {
display: inline-flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.perf-period-btn {
border: 1px solid rgba(148, 163, 184, 0.6);
border-radius: 9999px;
padding: 0.35rem 0.85rem;
background: rgba(255, 255, 255, 0.9);
color: #1f2937;
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.perf-period-btn.is-active {
background: #2563eb;
border-color: #2563eb;
color: #fff;
}
.perf-period-btn:hover:not(.is-active) {
background: rgba(226, 232, 240, 0.8);
}
html.dark .perf-period-btn {
background: rgba(30, 41, 59, 0.9);
color: #e2e8f0;
border-color: rgba(71, 85, 105, 0.7);
}
html.dark .perf-period-btn.is-active {
background: #60a5fa;
border-color: #60a5fa;
color: #0f172a;
}
.performance-chart {
position: relative;
min-height: 320px;
border-radius: 0.75rem;
background: #fff;
border: 1px solid rgba(226, 232, 240, 0.8);
overflow: hidden;
}
html.dark .performance-chart {
background: rgba(15, 23, 42, 0.9);
border-color: rgba(51, 65, 85, 0.8);
}
.performance-chart-empty {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 0.9rem;
color: #475569;
width: 100%;
height: 100%;
padding: 1rem;
}
.performance-chart-empty.is-error {
color: #b91c1c;
}
html.dark .performance-chart-empty {
color: #cbd5f5;
}
.performance-legend {
margin-top: 1rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0.75rem;
}
.performance-legend-item {
display: grid;
grid-template-columns: auto 1fr auto auto;
align-items: center;
gap: 0.5rem;
padding: 0.65rem 0.75rem;
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: 0.75rem;
background: rgba(255, 255, 255, 0.9);
}
html.dark .performance-legend-item {
border-color: rgba(71, 85, 105, 0.6);
background: rgba(15, 23, 42, 0.75);
}
.legend-color {
width: 0.85rem;
height: 0.85rem;
border-radius: 9999px;
display: inline-block;
}
.legend-name {
font-weight: 600;
color: #1f2937;
}
html.dark .legend-name {
color: #e2e8f0;
}
.legend-pct {
font-weight: 600;
justify-self: end;
}
.legend-pct.positive {
color: #15803d;
}
.legend-pct.negative {
color: #b91c1c;
}
.legend-total {
font-variant-numeric: tabular-nums;
color: #475569;
justify-self: end;
}
html.dark .legend-total {
color: #cbd5f5;
}