/*
 * 1911 Capital house style (https://1911cap.com), shared by every dashboard
 * page (Positions and Performance) so they can't drift apart visually:
 * navy + auburn on white/smoke, GFS Didot display type over Arial body copy,
 * flat square-cornered surfaces, small uppercase tracked labels.
 *
 * The --color-* RGB triplets are the single source of truth; the
 * --dashboard-* aliases below derive from them, so dark mode only has to
 * redefine the triplets. Page-specific rules stay inline in each page.
 */
:root {
    --brand-navy: #022B64; --brand-navy-hover: #0a3a7a; --brand-auburn: #AD2831;
    --brand-auburn-hover: #c41e2e; --brand-smoke: #F5F5F5; --brand-raisin: #2F2E38;
    --font-display: 'GFS Didot', Georgia, serif;
    --font-body: Arial, Helvetica, sans-serif;
    --nav-height: 72px;

    --color-background: 245 245 245;
    --color-surface-container: 255 255 255;
    --color-surface-container-low: 255 255 255;
    --color-surface-container-high: 238 240 245;
    --color-surface-container-highest: 216 220 230;
    --color-on-surface: 2 43 100;
    --color-on-surface-variant: 90 100 120;
    --color-outline-variant: 216 220 230;
    --color-label: 154 162 181;
    --color-primary: 2 43 100;
    --color-accent: 173 40 49;
    --color-danger: 173 40 49;
    --color-warn: 161 98 7;
    --color-up: 22 128 61;
    --color-down: 173 40 49;
}
@media (prefers-color-scheme: dark) {
    :root {
        --color-background: 1 22 52;
        --color-surface-container: 4 34 76;
        --color-surface-container-low: 4 34 76;
        --color-surface-container-high: 12 48 98;
        --color-surface-container-highest: 24 62 116;
        --color-on-surface: 238 241 246;
        --color-on-surface-variant: 176 183 197;
        --color-outline-variant: 36 70 122;
        --color-label: 140 152 178;
        --color-primary: 156 182 226;
        --color-accent: 214 76 86;
        --color-danger: 240 112 122;
        --color-warn: 251 191 36;
        --color-up: 74 222 128;
        --color-down: 240 112 122;
    }
}
:root {
    --dashboard-bg: rgb(var(--color-background)); --dashboard-fg: rgb(var(--color-on-surface));
    --dashboard-muted: rgb(var(--color-on-surface-variant)); --dashboard-label: rgb(var(--color-label));
    --dashboard-section: rgb(var(--color-surface-container)); --dashboard-border: rgb(var(--color-outline-variant));
    --dashboard-border-subtle: rgb(var(--color-outline-variant) / 0.55);
    --dashboard-accent: rgb(var(--color-accent)); --dashboard-positive: rgb(var(--color-up)); --dashboard-negative: rgb(var(--color-down));
}
html, body { width: 100%; min-width: 0; }
html { scroll-padding-top: calc(var(--nav-height) + 16px); }
body { margin: 0; background-color: rgb(var(--color-background)); color: rgb(var(--color-on-surface)); font-family: var(--font-body); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: rgb(var(--color-surface-container-high)); }
::-webkit-scrollbar-thumb { background: rgb(var(--color-label)); }

/* Navigation bar + page heading, mirroring the homepage's nav/hero. */
.site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 45; height: calc(var(--nav-height) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) max(7%, env(safe-area-inset-right)) 0 max(7%, env(safe-area-inset-left)); display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--brand-navy); border-bottom: 1px solid rgb(255 255 255 / 0.08); box-sizing: border-box; }
.site-nav img { height: 28px; width: auto; display: block; }
.nav-right { display: flex; align-items: center; gap: 32px; }
.nav-link { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(255 255 255 / 0.55); text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; }
.nav-link:hover, .nav-link:focus-visible { color: #ffffff; }
.nav-link[aria-current="page"] { color: #ffffff; border-bottom-color: var(--brand-auburn); }
/* Nav refresh button, styled like the homepage's "Investor Login". */
.nav-refresh { min-height: 44px; border: 0; border-radius: 0; background: var(--brand-auburn); color: #ffffff; font-family: var(--font-body); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; padding: 9px 20px; cursor: pointer; transition: background-color 0.2s ease, opacity 0.15s ease; }
.nav-refresh:hover:not(:disabled) { background: var(--brand-auburn-hover); }
.nav-refresh:disabled { opacity: 0.5; cursor: not-allowed; }

.page-hero { position: relative; overflow: hidden; background: var(--brand-navy); padding: calc(var(--nav-height) + env(safe-area-inset-top) + 40px) 7% 44px; text-align: center; }
.page-hero-rings { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.page-hero-rings circle { fill: none; stroke: #ffffff; stroke-width: 2; stroke-opacity: 0.08; }
.page-hero > *:not(svg) { position: relative; }
.page-hero-eyebrow { font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(255 255 255 / 0.5); margin-bottom: 14px; }
.page-hero h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 4vw, 40px); line-height: 1.15; letter-spacing: 0.02em; color: rgb(255 255 255 / 0.9); margin: 0; }
.page-hero-rule { width: 36px; height: 1px; background: var(--brand-auburn); margin: 18px auto 16px; }
.page-hero p { font-size: 12px; line-height: 1.7; color: rgb(255 255 255 / 0.55); margin: 0; }

.page-main {
    max-width: 1000px; margin-left: auto; margin-right: auto;
    padding-top: 32px;
    padding-bottom: max(40px, env(safe-area-inset-bottom));
    padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
}

/* Content panels: flat white cards on smoke, Didot titles with the auburn rule. */
.panel { background: var(--dashboard-section); border: 1px solid var(--dashboard-border); margin-bottom: 24px; overflow: hidden; }
.panel-title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 400; line-height: 1.25; color: var(--dashboard-fg); padding: 20px 20px 14px; margin: 0; }
.panel-title::after { content: ""; display: block; width: 24px; height: 1px; background: var(--brand-auburn); margin-top: 10px; }
.panel-stack { display: flex; flex-direction: column; gap: 24px; margin-bottom: 24px; }
.panel-stack > .panel { margin-bottom: 0; }
.panel-note { padding: 0 20px 16px; margin: 0; font-size: 12px; line-height: 1.7; color: var(--dashboard-muted); }
.page-main table { font-size: 0.875rem; }
.font-data-mono { font-family: var(--font-body); font-variant-numeric: tabular-nums; }
.page-main th, .page-main td { border-color: var(--dashboard-border-subtle); padding: 9px 12px; }
.page-main thead tr { border-color: var(--dashboard-border); }
.page-main th { color: var(--dashboard-label); font-size: 9px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; }
.page-main th:first-child, .page-main td:first-child { padding-left: 20px; }
.page-main th:last-child, .page-main td:last-child { padding-right: 20px; }
.text-primary { color: rgb(var(--color-primary)); } .text-up { color: var(--dashboard-positive); } .text-down, .text-danger { color: var(--dashboard-negative); }

#dashboard-busy-overlay { display: none; position: fixed; inset: 0; z-index: 50; align-items: center; justify-content: center; background: rgb(var(--color-background) / 0.7); }
#dashboard-busy-overlay[data-visible="true"] { display: flex; }
.dashboard-spinner { width: 40px; height: 40px; border: 2px solid rgb(var(--color-outline-variant)); border-top-color: var(--brand-auburn); border-radius: 50%; animation: dashboard-spin 0.9s linear infinite; }
@keyframes dashboard-spin { to { transform: rotate(360deg); } }

.site-footer { background: var(--brand-navy); padding: 32px 7% max(32px, env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-footer img { height: 22px; width: auto; opacity: 0.7; }
.site-footer p { font-size: 11px; line-height: 1.6; color: rgb(255 255 255 / 0.3); text-align: right; margin: 0; }

#scroll-to-top { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40; width: 44px; height: 44px; border: 0; border-radius: 0; background: var(--brand-navy); color: #fff; box-shadow: 0 6px 18px rgb(2 43 100 / 0.25); cursor: pointer; font-size: 20px; line-height: 1; transition: background-color 0.2s ease; }
#scroll-to-top:hover, #scroll-to-top:focus-visible { background: var(--brand-auburn); outline: 2px solid var(--brand-auburn); outline-offset: 2px; }

@media (max-width: 767px) {
    :root { --nav-height: 60px; }
    .site-nav { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); gap: 10px; }
    .site-nav img { height: 20px; }
    .nav-right { gap: 12px; }
    .nav-link { font-size: 10px; letter-spacing: 0.06em; }
    .nav-refresh { font-size: 10px; letter-spacing: 0.06em; padding: 8px 10px; }
    .page-hero { padding: calc(var(--nav-height) + env(safe-area-inset-top) + 28px) 16px 32px; }
    .page-main { padding: 20px max(12px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
    .panel, .panel-stack { margin-bottom: 16px; } .panel-stack { gap: 16px; }
    .panel-title { font-size: 1.2rem; padding: 16px 14px 12px; }
    .panel-note { padding: 0 14px 14px; }
    .page-main th, .page-main td { padding: 8px 8px; font-size: 0.85rem; }
    .page-main th { font-size: 9px; }
    .page-main th:first-child, .page-main td:first-child { padding-left: 14px; }
    .page-main th:last-child, .page-main td:last-child { padding-right: 14px; }
    .site-footer { flex-direction: column; text-align: center; } .site-footer p { text-align: center; }
}