/* ═══════════════════════════════════════════════════════════════════════════
   Athena v3 Design System
   Precision Terminal defaults: dark fund-management workbench, warm ink,
   disciplined x-trillion gold, dense numeric surfaces.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── CSS Variables (Dark Mode - Primary) ─────────────────────────────────── */

:root {
    /* Backgrounds */
    --bg-primary: #0B1220;
    --bg-secondary: #070C16;
    --bg-tertiary: #0E1626;
    --bg-card: #111A2D;
    --bg-hover: #16223B;
    --bg-active: #1B2840;

    /* Borders */
    --border-soft: #182238;
    --border-primary: #1F2A40;
    --border-secondary: #2C3A55;
    --border-focus: #FFB000;

    /* Text */
    --text-bright: #F4F1E8;
    --text-primary: #E9E5D8;
    --text-secondary: #C8C3B4;
    --text-muted: #8A8675;
    --text-placeholder: #97928A;
    --text-inverse: #1A1205;

    /* Accent Colors */
    --accent-primary: #FFB000;
    --accent-secondary: #FFBF42;
    --accent-press: #CC8C00;
    --accent-rgb: 255,176,0;
    --accent-teal: #00D4AA;
    --accent-blue: #4A9EFF;
    --accent-silver: #E6E9EF;
    --accent-violet: #C06CFF;
    --accent-sky: #5BC0EB;
    --accent-bronze: #B08D57;
    --accent-purple: #7A8599;

    /* Functional Colors */
    --color-positive: #00D4AA;
    --color-negative: #FF6B6B;
    --color-warning: #FF8C1A;
    --color-info: #4A9EFF;

    /* Legacy gradient aliases stay flat so old components inherit the new discipline. */
    --gradient-primary: linear-gradient(135deg, var(--accent-primary), var(--accent-primary));
    --gradient-accent: linear-gradient(135deg, var(--accent-primary), var(--accent-primary));
    --gradient-nav-active: linear-gradient(90deg, var(--accent-primary), var(--accent-primary));

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-12: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;

    /* Radii */
    --radius-xs: 0;
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 4px;
    --radius-xl: 4px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-glow: none;
    --shadow-popover: 0 8px 24px rgba(4,8,16,0.55);
    --shadow-modal: 0 16px 48px rgba(4,8,16,0.65);

    /* Typography */
    --font-sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
    --font-mono: 'IBM Plex Mono', 'SF Mono', ui-monospace, Menlo, monospace;
    --font-display: 'Source Serif 4', Georgia, serif;
    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-base: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 20px;
    --font-size-2xl: 28px;
    --font-size-3xl: 32px;

    /* Date inputs */
    --calendar-icon-filter: invert(1);

    /* Layout */
    --nav-width: 56px;
    --nav-width-expanded: 220px;
    --header-height: 48px;
    --transition-fast: 120ms ease-out;
    --transition-normal: 160ms ease-out;
}

/* ─── Light Mode ──────────────────────────────────────────────────────────── */

[data-theme="light"] {
    --bg-primary: #f5f5f5;
    --bg-secondary: #ffffff;
    --bg-tertiary: #e8e8e8;
    --bg-card: #ffffff;
    --bg-hover: #f0f0f0;
    --bg-active: #e0e0e0;
    --border-primary: #e0e0e0;
    --border-secondary: #d0d0d0;
    --text-primary: #171717;
    --text-secondary: #525252;
    --text-muted: #a0a0a0;
    --text-inverse: #fafafa;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
    --shadow-glow: none;
    --calendar-icon-filter: none;
}

/* ─── Theme Presets ───────────────────────────────────────────────────────── */

[data-theme="fintech"] {
    --accent-primary: #3b82f6;
    --accent-secondary: #60a5fa;
    --accent-teal: #06b6d4;
    --accent-blue: #6366f1;
    --accent-purple: #94a3b8;
    --accent-green: #10b981;
    --accent-red: #ef4444;
    --color-positive: #10b981;
    --color-negative: #ef4444;
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --bg-card: #1e293b;
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --border-primary: #334155;
    --border-secondary: #475569;
    --border-focus: #3b82f6;
    --gradient-primary: linear-gradient(135deg, var(--accent-primary), var(--accent-primary));
    --gradient-nav-active: linear-gradient(90deg, var(--accent-primary), var(--accent-primary));
}

[data-theme="teal"] {
    --accent-primary: #14b8a6;
    --accent-secondary: #2dd4bf;
    --accent-teal: #06b6d4;
    --accent-blue: #0ea5e9;
    --accent-green: #22c55e;
    --accent-red: #ef4444;
    --color-positive: #22c55e;
    --color-negative: #ef4444;
    --bg-primary: #042f2e;
    --bg-secondary: #134e4a;
    --bg-tertiary: #115e59;
    --bg-card: #0f766e;
    --text-primary: #f0fdfa;
    --text-secondary: #99f6e4;
    --text-muted: #5eead4;
    --border-primary: #115e59;
    --border-secondary: #14b8a6;
    --border-focus: #14b8a6;
    --gradient-primary: linear-gradient(135deg, var(--accent-primary), var(--accent-primary));
    --gradient-nav-active: linear-gradient(90deg, var(--accent-primary), var(--accent-primary));
}

[data-theme="sunset"] {
    --accent-primary: #f97316;
    --accent-secondary: #fb923c;
    --accent-teal: #14b8a6;
    --accent-blue: #a78bfa;
    --accent-purple: #94a3b8;
    --accent-green: #4ade80;
    --accent-red: #f43f5e;
    --color-positive: #4ade80;
    --color-negative: #f43f5e;
    --bg-primary: #1c1917;
    --bg-secondary: #292524;
    --bg-tertiary: #44403c;
    --bg-card: #292524;
    --text-primary: #fafaf9;
    --text-secondary: #a8a29e;
    --text-muted: #78716c;
    --border-primary: #44403c;
    --border-secondary: #57534e;
    --border-focus: #f97316;
    --gradient-primary: linear-gradient(135deg, var(--accent-primary), var(--accent-primary));
    --gradient-nav-active: linear-gradient(90deg, var(--accent-primary), var(--accent-primary));
}

/* ─── Reset & Base ────────────────────────────────────────────────────────── */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    overflow: hidden;
    max-width: 100vw;
}

body {
    font-family: var(--font-sans);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    line-height: 1.5;
    font-variant-numeric: tabular-nums lining-nums;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ─── App Layout ──────────────────────────────────────────────────────────── */

.app-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--bg-primary);
}

.app-header {
    height: var(--header-height);
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    flex-shrink: 0;
    z-index: 100;
}

.app-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.app-nav {
    width: var(--nav-width);
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-primary);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    position: relative;
    z-index: 300;
    transition: width var(--transition-normal), box-shadow var(--transition-normal);
    overflow-x: hidden;
}

.app-nav:hover,
.app-nav:focus-within {
    width: var(--nav-width-expanded);
    box-shadow: var(--shadow-popover);
}

.nav-scroll {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-12) 0;
}

.nav-footer {
    border-top: 1px solid var(--border-primary);
    padding: var(--space-sm) 0;
}

.main-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-12);
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Page containers: cached in DOM, toggled via CSS for instant tab switching */
.page-container { display: none; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.page-container.page-active { display: flex; overflow-y: auto; overflow-x: hidden; }

/* ─── Header ──────────────────────────────────────────────────────────────── */

.header-left {
    display: flex;
    align-items: center;
    gap: 11px;
}

.header-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.header-title h1 {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-bright);
    line-height: 1.2;
}

.header-title p {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    text-transform: uppercase;
}

.header-right {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.header-badge {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    padding: 5px 8px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.header-badge strong {
    color: var(--accent-primary);
}

/* ─── Valuation-date control (merged: live status + jump-to-history) ──────── */
.header-asof {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
}
.header-asof.is-active {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 1px var(--accent-primary) inset;
}
.header-asof-state {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    letter-spacing: 0.06em;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-primary);
    color: var(--text-muted);
    text-transform: uppercase;
}
.header-asof.is-active .header-asof-state {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
}
.header-asof-label {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.header-asof-value {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    color: var(--accent-primary);
}
/* Native date input kept functional (for showPicker / fallback focus) but
   visually hidden — the calendar button is the affordance. */
.header-asof-input-hidden {
    position: absolute;
    right: 70px;
    bottom: 2px;
    width: 1px;
    height: 1px;
    opacity: 0;
    border: 0;
    padding: 0;
    margin: 0;
    pointer-events: none;
}
.header-asof-btn {
    padding: 4px 7px;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    cursor: pointer;
}
.header-asof-btn:hover { color: var(--text-primary); border-color: var(--accent-primary); }
.header-asof-live { color: var(--accent-primary); border-color: var(--accent-primary); }

.asof-banner {
    position: sticky;
    top: 0;
    z-index: 800;
    padding: 6px 16px;
    background: var(--accent-primary);
    color: var(--bg-primary);
    font-size: var(--font-size-sm);
    text-align: center;
}
.asof-banner em { font-style: italic; opacity: 0.92; }
.asof-banner-dot { animation: asofPulse 1.6s ease-in-out infinite; }
@keyframes asofPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.asof-banner-btn {
    margin-left: 10px;
    padding: 2px 8px;
    border: 1px solid currentColor;
    border-radius: var(--radius-sm);
    background: transparent;
    color: inherit;
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    cursor: pointer;
}
.asof-banner-btn:hover { background: rgba(0,0,0,0.12); }

/* ─── Settings Panel (slide-out) ─────────────────────────────────────────── */
.settings-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 900;
}
.settings-overlay.open { display: block; }

.settings-panel {
    position: fixed;
    top: 0;
    right: -600px;
    width: 600px;
    max-width: 90vw;
    height: 100vh;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-primary);
    z-index: 901;
    display: flex;
    flex-direction: column;
    transition: right var(--transition-normal);
}
.settings-panel.open { right: 0; }

.settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border-primary);
}
.settings-header h3 {
    margin: 0;
    font-size: var(--font-size-lg);
    color: var(--text-primary);
}
.settings-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 24px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}
.settings-close:hover { background: var(--bg-hover); color: var(--text-primary); }

.settings-body {
    flex: 1;
    overflow: auto;
    padding: var(--space-lg);
}

.settings-section {
    margin-bottom: var(--space-lg);
}
.settings-label {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
    font-weight: 500;
}

/* ─── Staging Toggle ──────────────────────────────────────────────────────── */

.staging-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    padding: 4px;
}

.staging-toggle button {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.staging-toggle button.active {
    background: var(--accent-primary);
    color: var(--text-inverse);
}

/* ─── Theme Selector ──────────────────────────────────────────────────────── */

.theme-select {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
    min-height: 28px;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    cursor: pointer;
    font-family: var(--font-sans);
    font-weight: 500;
    color-scheme: dark light;
}

input[type="date"].theme-select {
    font-family: var(--font-mono);
    padding: 4px 8px;
}

input[type="date"].theme-select::-webkit-calendar-picker-indicator {
    filter: var(--calendar-icon-filter, none);
    cursor: pointer;
}

.theme-select:focus {
    outline: none;
    border-color: var(--border-focus);
}

/* ─── Navigation ──────────────────────────────────────────────────────────── */

.nav-group {
    margin-bottom: 14px;
    transition: margin-bottom var(--transition-fast);
}

.app-nav:not(:hover):not(:focus-within) .nav-group {
    margin-bottom: 6px;
}

.nav-group-label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    padding: 0 16px;
    margin-bottom: 5px;
    white-space: nowrap;
    transition: opacity var(--transition-fast);
}

.app-nav:not(:hover):not(:focus-within) .nav-group-label {
    opacity: 0;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 28px;
    padding: 0 16px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--font-size-base);
    font-weight: 500;
    transition: background-color var(--transition-fast), color var(--transition-fast);
    position: relative;
    cursor: pointer;
    white-space: nowrap;
}

.nav-item:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.nav-item.active {
    color: var(--text-bright);
    background: var(--bg-card);
}

.nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--accent-primary);
    border-radius: 0;
}

.nav-item.nav-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.nav-icon {
    width: 24px;
    min-width: 24px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 14px;
    opacity: 0.8;
}
.nav-icon svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 1.6;
    fill: none;
}

.nav-label {
    white-space: nowrap;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.app-nav:not(:hover):not(:focus-within) .nav-label {
    opacity: 0;
    transform: translateX(-4px);
    pointer-events: none;
}

/* ─── Cards ───────────────────────────────────────────────────────────────── */

.card {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    padding: var(--space-12) 14px;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.card:hover {
    border-color: var(--border-secondary);
    box-shadow: none;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 28px;
    margin-bottom: var(--space-sm);
}

.card-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.card-badge {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/* ─── Metric Cards ────────────────────────────────────────────────────────── */

.metrics-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-md);
}

.metric-card {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    transition: none;
}

.metric-card:hover {
    border-color: var(--border-primary);
    box-shadow: none;
}

.metric-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin-bottom: 10px;
    background: var(--bg-tertiary);
    color: var(--accent-primary);
}

.metric-label {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-xs);
}

.metric-value {
    font-size: var(--font-size-xl);
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--text-bright);
    line-height: 1.2;
}
.metric-main {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}
.metric-hero {
    border-left: 2px solid var(--accent-primary);
}
.metric-hero .metric-value {
    font-size: var(--font-size-2xl);
}
.metric-spark {
    flex: 0 0 96px;
    width: 96px;
    height: 28px;
    color: var(--accent-primary);
}

.metric-subtext {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    font-family: var(--font-mono);
    margin-top: 2px;
}

/* ─── Charts ──────────────────────────────────────────────────────────────── */

.chart-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    padding: var(--space-12) 14px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.chart-container {
    flex: 1;
    min-height: 0;
}

/* ─── Chart Expand Button ─────────────────────────────────────────────────── */

.chart-expand-btn {
    width: 20px;
    height: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.2s, color 0.2s, border-color 0.2s;
}

.chart-panel:hover .chart-expand-btn {
    opacity: 1;
}

.chart-expand-btn:hover {
    color: var(--text-primary);
    border-color: var(--border-secondary);
}

/* ─── Chart Expand Modal ──────────────────────────────────────────────────── */

.chart-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    animation: chartModalFadeIn 0.15s ease-out;
}

@keyframes chartModalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.chart-modal {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    width: 90vw;
    height: 80vh;
    max-width: 1400px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-modal);
}

.chart-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border-primary);
    flex-shrink: 0;
}

.chart-modal-title {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.chart-modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 24px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: color 0.2s;
}

.chart-modal-close:hover {
    color: var(--text-primary);
}

.chart-modal-body {
    flex: 1;
    min-height: 0;
    padding: var(--space-md);
}

/* ─── Page Layouts ────────────────────────────────────────────────────────── */

.page-grid-2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    height: 100%;
}

.page-grid-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-12);
    height: 100%;
}

.page-full-height {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--header-height) - 24px - var(--space-12) * 2);
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
    flex-shrink: 0;
}

.page-title {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.span-full {
    grid-column: 1 / -1;
}

/* ─── AG Grid Dark Theme ──────────────────────────────────────────────────── */

.ag-theme-athena {
    --ag-background-color: var(--bg-card);
    --ag-header-background-color: var(--bg-tertiary);
    --ag-header-foreground-color: var(--text-secondary);
    --ag-foreground-color: var(--text-primary);
    --ag-secondary-foreground-color: var(--text-secondary);
    --ag-border-color: var(--border-soft);
    --ag-row-hover-color: var(--bg-hover);
    --ag-selected-row-background-color: var(--bg-active);
    --ag-odd-row-background-color: transparent;
    --ag-font-family: var(--font-mono);
    --ag-font-size: var(--font-size-sm);
    --ag-header-font-size: var(--font-size-xs);
    --ag-header-font-weight: 600;
    --ag-alpine-active-color: var(--accent-primary);
    --ag-range-selection-border-color: var(--accent-primary);
    --ag-input-focus-border-color: var(--accent-primary);
    --ag-checkbox-checked-color: var(--accent-primary);
    flex: 1;
    min-height: 0;
}

/* AG Grid's Alpine theme CSS loads AFTER athena.css and sets --ag-font-size:13px
   at equal specificity on .ag-theme-alpine-dark, so it would win the cascade and
   render dense data at 13px. Pin our 11px from the combined selector (higher
   specificity) so it always wins regardless of stylesheet order. */
.ag-theme-athena.ag-theme-alpine-dark { --ag-font-size: var(--font-size-sm); }

.ag-theme-athena .ag-header-cell-text {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 10px;
}
.ag-theme-athena .ag-row {
    border-color: var(--border-soft);
}
.ag-theme-athena .ag-cell {
    display: flex;
    align-items: center;
    font-size: var(--font-size-sm); /* 11px dense data — direct property beats Alpine's var-driven default */
}

.ag-theme-athena .ag-paging-panel {
    border-top: 1px solid var(--border-primary);
    color: var(--text-secondary);
}

/* AG Grid cell classes */
.cell-mono, .cell-num { font-family: var(--font-mono); font-size: var(--font-size-sm); font-variant-numeric: tabular-nums lining-nums; }
.cell-isin { color: var(--accent-primary); font-weight: 500; }
.cell-desc { max-width: 400px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell-right { text-align: right; }
.cell-center { text-align: center; }
.cell-positive { color: var(--color-positive) !important; }
.cell-negative { color: var(--color-negative) !important; }
.cell-warning { color: var(--color-warning) !important; }

/* ─── Desk Trade Badge ──────────────────────────────────────────────────── */

.desk-badge {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 1px 5px;
    border-radius: 2px;
    background: rgba(255, 140, 26, 0.14);
    color: var(--color-warning);
    margin-left: 6px;
    vertical-align: middle;
}

/* ─── Grid Action Buttons ────────────────────────────────────────────────── */

.btn-grid {
    padding: 2px 10px;
    border: 1px solid var(--border-secondary);
    border-radius: 2px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 11px;
    cursor: pointer;
    line-height: 1.4;
    transition: background 0.15s, color 0.15s;
}
.btn-grid:hover { background: var(--bg-hover); color: var(--text-primary); }
.btn-grid:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-grid-danger { border-color: var(--color-negative); color: var(--color-negative); }
.btn-grid-danger:hover { background: var(--color-negative); color: var(--text-inverse); }
.btn-grid-success { border-color: var(--color-positive); color: var(--color-positive); }
.btn-grid-success:hover { background: var(--color-positive); color: var(--text-inverse); }

/* ─── Custom Dialog ──────────────────────────────────────────────────────── */

.athena-dialog-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none;
    transition: opacity 0.15s ease;
}
.athena-dialog-overlay.open { opacity: 1; pointer-events: auto; }

.athena-dialog {
    position: fixed; z-index: 1001;
    top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.95);
    min-width: 340px; max-width: min(960px, 92vw);
    background: var(--bg-card); border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md); box-shadow: var(--shadow-modal);
    opacity: 0; pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.athena-dialog.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }

.athena-dialog-body {
    padding: 28px 24px 16px;
    font-size: var(--font-size-base);
    color: var(--text-primary);
    line-height: 1.5;
}

.athena-dialog-actions {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 12px 24px 20px;
}

.athena-dialog-btn {
    padding: 7px 14px; border: none; border-radius: var(--radius-sm);
    font-size: var(--font-size-sm); font-weight: 500;
    cursor: pointer; transition: background 0.15s, opacity 0.15s;
}
.athena-dialog-btn:focus { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.athena-dialog-btn-secondary {
    background: var(--bg-tertiary); color: var(--text-secondary);
}
.athena-dialog-btn-secondary:hover { background: var(--bg-hover); color: var(--text-primary); }
.athena-dialog-btn-primary {
    background: var(--accent-primary); color: var(--text-inverse);
}
.athena-dialog-btn-primary:hover { opacity: 0.85; }

/* ─── Badges ──────────────────────────────────────────────────────────────── */

.badge {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid currentColor;
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
}

.badge-pass { background: rgba(0, 212, 170, 0.12); color: var(--color-positive); }
.badge-fail { background: rgba(255, 107, 107, 0.12); color: var(--color-negative); }
.badge-neutral { background: var(--bg-tertiary); color: var(--text-muted); }
.badge-warning { background: rgba(255, 140, 26, 0.12); color: var(--color-warning); }
.badge-info { background: rgba(74, 158, 255, 0.12); color: var(--color-info); }
.badge-govt { background: rgba(255, 176, 0, 0.12); color: var(--accent-primary); }
.badge-corp { background: rgba(122, 133, 153, 0.14); color: var(--accent-purple); }

/* ─── Buttons ─────────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    min-height: 26px;
    padding: 4px 10px;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.btn:hover {
    border-color: var(--border-secondary);
    background: var(--bg-hover);
}

.btn-primary {
    background: var(--accent-primary);
    color: var(--text-inverse);
    border-color: var(--accent-primary);
}

.btn-primary:hover {
    background: var(--accent-secondary);
    border-color: var(--accent-secondary);
}

.btn-sm {
    padding: 4px 10px;
    font-size: var(--font-size-xs);
}

/* ─── Loading States ──────────────────────────────────────────────────────── */

.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
    color: var(--text-muted);
    gap: var(--space-md);
}

.loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-secondary);
    border-top-color: var(--accent-primary);
    border-radius: 999px;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Skeleton loading */
.skeleton {
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

/* ─── Status Strip ───────────────────────────────────────────────────────── */

.status-strip {
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 12px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-primary);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 11px;
    white-space: nowrap;
}
.status-strip-left,
.status-strip-right {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}
.status-strip strong {
    color: var(--text-secondary);
    font-weight: 500;
}
.status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 6px;
    border-radius: 999px;
    background: var(--text-muted);
}
.status-live { background: var(--color-positive); }

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-text { height: 16px; margin-bottom: var(--space-sm); }
.skeleton-card { height: 120px; }
.skeleton-chart { height: 300px; }

/* ─── Error States ────────────────────────────────────────────────────────── */

.error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
    text-align: center;
    gap: var(--space-md);
}

.error-icon {
    font-size: 48px;
    color: var(--color-warning);
}

.error-state h3 {
    color: var(--text-primary);
    font-size: var(--font-size-lg);
}

.error-state p {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    max-width: 400px;
}

/* ─── Value Colors ────────────────────────────────────────────────────────── */

.value-positive { color: var(--color-positive); }
.value-negative { color: var(--color-negative); }
.value-warning { color: var(--color-warning); }

/* ─── Utility Classes ─────────────────────────────────────────────────────── */

.text-right { text-align: right; }
.text-center { text-align: center; }
.text-mono { font-family: var(--font-mono); font-size: var(--font-size-sm); }
.text-muted { color: var(--text-muted); }
.text-sm { font-size: var(--font-size-sm); }
.text-xs { font-size: var(--font-size-xs); }
.text-uppercase { text-transform: uppercase; letter-spacing: 0.5px; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1; min-height: 0; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }

/* ─── Widget Layout System ────────────────────────────────────────────────── */

.widget-layout {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.widget-row {
    display: grid;
    gap: var(--space-md);
    flex: 0 0 auto;
}

.widget-row-grow {
    flex: 1 1 auto;
    min-height: 300px;
}

/* A KPI strip used as a side rail (e.g. dashboard Portfolio Info) sits in a
   growing chart row. Distribute its cards down the full column height with
   space-between so the first card is flush to the top (aligned with the charts
   beside it) and the last is flush to the bottom — no dead gap above or below. */
.widget-row-grow .widget-cell > .widget-metrics {
    flex: 1 1 auto;
    align-content: space-between;
}

/* ─── GCRIF EPIC-style valuation viewer ────────────────────────────────────── */
.valn-overview-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--space-md);
    gap: var(--space-md);
}

.valn-fund {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
}

.valn-sub {
    margin-left: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.valn-date-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    white-space: nowrap;
}

.valn-date-label {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.valn-date {
    font-family: var(--font-mono);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--accent-primary);
}

.valn-chip {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-primary);
}

.valn-chip-fresh { color: var(--text-secondary); }
.valn-chip-stale { color: var(--color-negative); border-color: var(--color-negative); }

.valn-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    height: 100%;
}

.valn-panel-title {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.valn-panel-sub {
    margin-left: var(--space-sm);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-muted);
}

.valn-stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
}

.valn-stat-label {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-bottom: 2px;
}

.valn-stat-value {
    font-family: var(--font-mono);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
}

.valn-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.valn-table th {
    text-align: left;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    letter-spacing: 0.04em;
    color: var(--text-muted);
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-primary);
}

.valn-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-secondary, var(--border-primary));
    color: var(--text-primary);
}

.valn-table .r { text-align: right; }

.valn-empty {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    padding: var(--space-sm) 0;
}

.widget-cell {
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.widget-slot {
    position: relative;
}

.widget-slot::before {
    display: none;
    content: attr(data-slot-label) " · " attr(data-role);
    position: absolute;
    top: 5px;
    left: 8px;
    z-index: 6;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1;
    opacity: 0.55;
    pointer-events: none;
    text-transform: uppercase;
}

.widget-slot > .card,
.widget-slot > .chart-panel,
.widget-slot > .ag-theme-athena,
.widget-slot > div:first-child {
    padding-top: 22px;
}

.widget-role-hero-kpi .metric-card:first-child {
    border-left: 2px solid var(--accent-primary);
}

.widget-role-hero-kpi .metric-card:first-child .metric-value {
    font-size: var(--font-size-2xl);
}

/* ─── Terminal Page Body Normalization ─────────────────────────────────────
   Many widgets emit self-contained markup and some inline styles. These rules
   pull page content into the same visual grammar as the shell without changing
   each widget's data/rendering logic. */

.page-container {
    font-family: var(--font-sans);
    color: var(--text-primary);
}

.page-container h1,
.page-container h2,
.page-container h3,
.page-container h4,
.page-container .section-title,
.page-container .settings-label {
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: var(--font-size-base);
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.3;
    text-transform: uppercase;
}

.widget-layout,
.widget-row {
    gap: var(--space-12);
}

.widget-cell > .card,
.widget-cell > .chart-panel,
.widget-cell > .ag-theme-athena,
.widget-cell > [class$="-panel"],
.widget-cell > [class*="-panel "] {
    min-height: 0;
}

.widget-cell .card,
.widget-cell .chart-panel {
    width: 100%;
    height: 100%;
}

.widget-cell table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono) !important;
    font-size: var(--font-size-sm) !important;
    font-variant-numeric: tabular-nums lining-nums;
}

.widget-cell th {
    height: 30px;
    padding: 5px 8px !important;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-primary) !important;
    color: var(--text-muted) !important;
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.widget-cell td {
    height: 28px;
    padding: 4px 8px !important;
    border-bottom: 1px solid var(--border-soft) !important;
    color: var(--text-primary);
    vertical-align: middle;
}

.widget-cell td[style*="right"],
.widget-cell th[style*="right"] {
    text-align: right;
}

.widget-cell tr[style*="background"] {
    background: var(--bg-tertiary) !important;
}

.widget-cell [style*="border-radius: 999"],
.widget-cell [style*="border-radius:999"],
.widget-cell [style*="border-radius: 20"],
.widget-cell [style*="border-radius:16"],
.widget-cell [style*="border-radius: 16"],
.widget-cell [style*="border-radius:12"],
.widget-cell [style*="border-radius: 12"],
.widget-cell [style*="border-radius:10"],
.widget-cell [style*="border-radius: 10"],
.widget-cell [style*="border-radius:8"],
.widget-cell [style*="border-radius: 8"],
.widget-cell [style*="border-radius:6"],
.widget-cell [style*="border-radius: 6"] {
    border-radius: var(--radius-sm) !important;
}

.widget-cell [style*="padding:24px"],
.widget-cell [style*="padding: 24px"],
.widget-cell [style*="padding:32px"],
.widget-cell [style*="padding: 32px"],
.widget-cell [style*="padding:40px"],
.widget-cell [style*="padding: 40px"],
.widget-cell [style*="padding:48px"],
.widget-cell [style*="padding: 48px"] {
    padding: var(--space-12) 14px !important;
}

.widget-cell [style*="font-size:14px"],
.widget-cell [style*="font-size: 14px"],
.widget-cell [style*="font-size:15px"],
.widget-cell [style*="font-size: 15px"],
.widget-cell [style*="font-size:0.9rem"],
.widget-cell [style*="font-size: 0.9rem"] {
    font-size: 13px !important;
}

.widget-cell .card-badge,
.widget-cell .badge,
.widget-cell [class*="badge"],
.widget-cell [class*="chip"] {
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.widget-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 80px;
}

.widget-error {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    height: 100%;
    min-height: 80px;
    color: var(--color-negative);
    font-size: 13px;
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    padding: var(--space-12);
}

/* ─── Widget source badge (active only under ?views=1) ──────────────────── */
/* Tiny pill in the top-right corner of every widget container, telling the
   operator whether the widget reads from D1/legacy orca or the new
   Supabase views stack. Helps eyeball cutover progress at a glance.

   Implemented as a ::before pseudo-element on the widget container so it
   survives the widget's own innerHTML replacement during render (and shows
   even on errored widgets — source is determined from apiFn names alone). */

.widget-show-source[data-source-label]::before {
    content: attr(data-source-label);
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 5;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    letter-spacing: 0.5px;
    user-select: none;
    opacity: 0.75;
    pointer-events: none;
}

.widget-show-source[data-source="d1"]::before {
    background: rgba(255, 107, 107, 0.14);   /* red — actual D1, the path we're migrating off */
    border: 1px solid rgba(255, 107, 107, 0.28);
    color: var(--color-negative);
}

.widget-show-source[data-source="supabase"]::before {
    background: rgba(74, 158, 255, 0.14);
    border: 1px solid rgba(74, 158, 255, 0.28);
    color: var(--color-info);
}

.widget-show-source[data-source="legacy"]::before {
    background: rgba(255, 140, 26, 0.14);    /* amber — legacy orca, may still hit Supabase */
    border: 1px solid rgba(255, 140, 26, 0.28);
    color: var(--color-warning);
}

.widget-show-source[data-source="unknown"]::before {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    color: var(--text-muted);
}

/* ─── Scrollbar ───────────────────────────────────────────────────────────── */

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--border-secondary); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ─── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1400px) {
    .header-title { display: none; }
}

@media (max-width: 1200px) {
    .metrics-row { grid-template-columns: repeat(3, 1fr); }
    .page-grid-2x2 { grid-template-columns: 1fr; }
    .page-grid-3col { grid-template-columns: 1fr 1fr; }
    .widget-row { grid-template-columns: 1fr !important; }
}

/* ─── Full-Screen Chat ──────────────────────────────────────────────────── */

.fc-chat {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow-x: hidden;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,0.012) 1px, transparent 1px),
        var(--bg-primary);
    background-size: 28px 28px;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
}

.fc-suggestions {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    overflow-x: auto;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-primary);
    background: var(--bg-secondary);
}

.fc-chip {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    color: var(--text-muted);
    padding: 4px 8px;
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
}
.fc-chip::before { content: "$ "; color: var(--accent-primary); }
.fc-chip:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-secondary);
    color: var(--text-primary);
}

.fc-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    font-family: var(--font-mono);
}

.fc-messages::-webkit-scrollbar { width: 4px; }
.fc-messages::-webkit-scrollbar-track { background: transparent; }
.fc-messages::-webkit-scrollbar-thumb { background: var(--border-secondary); border-radius: 2px; }

.fc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 12px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 12px;
    text-align: center;
}

.fc-terminal-mark {
    color: var(--text-primary);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.08em;
}
.fc-terminal-command {
    color: var(--accent-primary);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.fc-msg {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    min-width: 0;
    max-width: 100%;
}
.fc-msg-user,
.fc-msg-asst { justify-content: initial; }
.fc-msg-action { margin-top: 2px; }
.fc-msg-action::before {
    content: "athena";
    color: var(--accent-primary);
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.6;
}
.fc-cli-prompt {
    color: var(--accent-primary);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}
.fc-msg-user .fc-cli-prompt { color: var(--text-muted); }

.fc-avatar {
    width: 0;
    height: 0;
    display: none;
    object-fit: contain;
    flex-shrink: 0;
}

.fc-bubble-user {
    background: transparent;
    color: var(--text-primary);
    padding: 0;
    border-radius: 0;
    max-width: none;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.6;
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
}

.fc-bubble-asst {
    background: transparent;
    color: var(--text-secondary);
    padding: 0 0 0 10px;
    border-left: 2px solid var(--accent-primary);
    border-radius: 0;
    max-width: none;
    font-family: var(--font-sans);
    font-size: 13px;
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
    line-height: 1.55;
}

.fc-bubble-asst p { margin: 0 0 8px; }
.fc-bubble-asst p:last-child { margin-bottom: 0; }
.fc-bubble-asst h2, .fc-bubble-asst h3, .fc-bubble-asst h4 {
    margin: 12px 0 6px;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.fc-bubble-asst ul { margin: 4px 0; padding-left: 20px; }
.fc-bubble-asst li { margin: 3px 0; }
.fc-bubble-asst strong { color: var(--accent-primary); }
.fc-bubble-asst code {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    padding: 1px 5px;
    border-radius: 2px;
    color: var(--text-primary);
    font-size: 12px;
    font-family: var(--font-mono);
}
.fc-bubble-asst a { color: var(--accent-blue); text-decoration: none; }
.fc-bubble-asst a:hover { text-decoration: underline; }
.fc-bubble-asst hr { border: none; border-top: 1px solid var(--border-primary); margin: 12px 0; }

/* Tables inside chat */
.fc-table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0;
    font-family: var(--font-mono);
    font-size: 12px;
}
.fc-table th, .fc-table td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--border-primary);
    text-align: left;
}
.fc-table th {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.fc-table td strong { color: var(--accent-primary); }

/* Tool status */
.fc-tool-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    margin-left: 44px;
    background: rgba(92, 158, 255, 0.08);
    border: 1px solid rgba(92, 158, 255, 0.15);
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    color: var(--accent-blue);
    animation: fc-pulse 2s ease-in-out infinite;
}
.fc-tool-icon {
    color: var(--accent-primary);
    font-weight: 600;
    text-transform: uppercase;
}

@keyframes fc-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Thinking dots */
.fc-thinking-dots {
    display: inline-flex;
    gap: 5px;
    padding: 0;
    background: transparent;
    border-radius: 0;
}
.fc-thinking-block {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 12px;
}
.fc-thinking-dots span {
    width: 6px; height: 6px; border-radius: 999px;
    animation: fc-pulse 1.2s infinite ease-in-out;
}
.fc-thinking-dots span:nth-child(1) { background: var(--accent-primary); animation-delay: 0s; }
.fc-thinking-dots span:nth-child(2) { background: var(--text-muted); animation-delay: 0.2s; }
.fc-thinking-dots span:nth-child(3) { background: var(--text-muted); animation-delay: 0.4s; }
.fc-tool-status-line {
    margin-top: 6px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 11px;
}

/* Bond selection grid */
.fc-bond-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
    margin: 0;
}
.fc-bond-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 2px;
    padding: 10px 12px;
    cursor: pointer;
    text-align: left;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
    font-family: var(--font-mono);
}
.fc-bond-card:hover:not(:disabled) {
    border-color: var(--border-secondary);
    background: var(--bg-tertiary);
}
.fc-bond-card:disabled { opacity: 0.5; cursor: not-allowed; }
.fc-bond-ticker { font-weight: 600; color: var(--accent-primary); font-size: 12px; margin-bottom: 4px; }
.fc-bond-meta { font-size: 11px; color: var(--text-muted); }
.fc-cancel-card { text-align: center; border-color: rgba(255, 82, 82, 0.22); }
.fc-cancel-card .fc-bond-ticker { color: var(--color-negative); }

/* Trade confirmation */
.fc-trade-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-left: 2px solid var(--accent-primary);
    border-radius: 2px;
    padding: 12px;
    margin: 0;
    max-width: 460px;
}
.fc-trade-header {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 12px;
    color: var(--accent-primary);
    margin-bottom: 10px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--border-primary);
}
.fc-trade-details { margin-bottom: 12px; }
.fc-trade-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 0;
    font-family: var(--font-mono);
    font-size: 12px;
}
.fc-trade-row span:first-child { color: var(--text-muted); }
.fc-trade-total { border-top: 1px solid var(--border-primary); margin-top: 4px; padding-top: 6px; font-weight: 600; }
.fc-trade-total span:first-child { color: var(--text-primary); }
.fc-trade-actions { display: flex; gap: 8px; }
.fc-action-btn {
    flex: 1;
    min-height: 26px;
    padding: 5px 9px;
    border-radius: 2px;
    border: 1px solid var(--border-primary);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}
.fc-action-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.fc-btn-confirm { background: rgba(0, 212, 170, 0.12); border-color: rgba(0, 212, 170, 0.28); color: var(--color-positive); }
.fc-btn-confirm:hover:not(:disabled) { background: rgba(0, 212, 170, 0.2); }
.fc-btn-staging { background: rgba(92, 158, 255, 0.12); border-color: rgba(92, 158, 255, 0.28); color: var(--accent-blue); }
.fc-btn-staging:hover:not(:disabled) { background: rgba(92, 158, 255, 0.2); }
.fc-btn-cancel { background: rgba(255, 90, 90, 0.1); border-color: rgba(255, 90, 90, 0.24); color: var(--color-negative); }
.fc-btn-cancel:hover:not(:disabled) { background: rgba(255, 90, 90, 0.18); }

/* Input bar */
.fc-input-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--border-primary);
    background: var(--bg-secondary);
    flex-shrink: 0;
}
.fc-input-prompt {
    color: var(--accent-primary);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.fc-input-bar input {
    flex: 1;
    background: transparent;
    border: 0;
    color: var(--text-primary);
    padding: 7px 0;
    border-radius: 0;
    font-size: 13px;
    font-family: var(--font-mono);
    outline: none;
}
.fc-input-bar input::placeholder { color: var(--text-muted); }
.fc-send {
    width: 30px; height: 30px;
    border-radius: 2px; border: 1px solid var(--accent-primary);
    background: var(--accent-primary);
    color: var(--text-inverse);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
    flex-shrink: 0;
}
.fc-send:hover { background: var(--accent-secondary); }
.fc-send:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 768px) {
    :root { --nav-width: 0px; }

    /* ── Nav Drawer ── */
    .app-nav {
        position: fixed;
        top: 0;
        left: -260px;
        width: 260px;
        height: 100vh;
        z-index: 800;
        transition: left 0.25s ease;
    }
    .app-nav.nav-open { left: 0; }

    .nav-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 799;
    }
    .nav-backdrop.open { display: block; }

    /* ── Hamburger ── */
    .nav-hamburger {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: none;
        background: none;
        color: var(--text-primary);
        font-size: 1.4rem;
        cursor: pointer;
        padding: 0;
        flex-shrink: 0;
    }

    /* ── Header ── */
    .app-header { padding: 0 var(--space-sm); }
    .header-left { gap: var(--space-xs); }
    .header-title { display: none; }
    #portfolioSelect { display: none; }
    .header-logo { width: 28px; height: 28px; }
    .header-right .header-badge:not(.user-badge) { display: none; }
    .header-right #portfolioView { display: none; }
    .header-right { gap: var(--space-xs); }
    .header-right .theme-select { min-width: 0 !important; max-width: 120px; font-size: var(--font-size-xs); }

    /* ── Content ── */
    .app-shell, .app-body { overflow-x: hidden; max-width: 100vw; }
    .main-content { padding: var(--space-sm); }
    .widget-layout { height: auto; }
    .widget-row { grid-template-columns: 1fr !important; }
    .widget-row-grow { flex: 0 0 auto; min-height: 300px; }
    .metrics-row { grid-template-columns: repeat(2, 1fr) !important; }
    .page-grid-3col { grid-template-columns: 1fr; }
    #portfolioView { min-width: 0 !important; }

    /* ── Page Titles ── */
    .page-title { display: none; }

    /* ── Dialog ── */
    .athena-dialog { min-width: 0; width: 90vw; max-width: 90vw; }

    /* ── Tables & Grids ── */
    .ag-theme-athena { min-height: 300px; }
    .chart-panel { min-width: 0 !important; }

    /* ── Chat ── */
    .fc-chat { max-width: 100vw; }
    .fc-messages { padding: 12px; overflow-x: hidden; }
    .fc-msg {
        grid-template-columns: 1fr;
        gap: 3px;
        overflow: hidden;
    }
    .fc-msg-asst { gap: 3px; }
    .fc-avatar { display: none; width: 0; height: 0; }
    .fc-bubble-asst {
        max-width: none;
        padding: 0 0 0 8px;
        font-size: 0.85rem;
    }
    .fc-bubble-user { max-width: none; }
    .fc-bubble-asst ul { padding-left: 16px; }
    .fc-bond-grid { grid-template-columns: 1fr; }
    .fc-chip { padding: 4px 8px; font-size: 10px; }
    .fc-input-bar { padding: 8px 12px; }
    .fc-input-prompt { display: none; }
    .fc-table { font-size: 0.75rem; display: block; overflow-x: auto; }
    .fc-table th, .fc-table td { padding: 4px 6px; }
}

/* Hide hamburger on desktop */
@media (min-width: 769px) {
    .nav-hamburger { display: none; }
    .nav-backdrop { display: none !important; }
}

/* ─── Embedded-in-host: nav rail on the RIGHT ────────────────────────────────
   When Athena is iframed into a host shell (Orion v3/v4), its collapsed left
   rail sits flush against the host's own left sidebar, so edge hover/clicks hit
   the host nav instead of Athena's. Set on <html data-embedded="host"> by the
   inline detector in index.html. Standalone Athena is unaffected (left rail). */
[data-embedded="host"] .app-body {
    flex-direction: row-reverse;
}
[data-embedded="host"] .app-nav {
    border-right: none;
    border-left: 1px solid var(--border-primary);
}

@media (max-width: 768px) {
    /* Drawer slides in from the right edge to match the docked rail side. */
    [data-embedded="host"] .app-nav {
        left: auto;
        right: -260px;
        transition: right 0.25s ease;
    }
    [data-embedded="host"] .app-nav.nav-open { right: 0; }
}

/* Trade-tickets tab bar. Rendered by pages/trade-tickets.js before the
   widget (which owns the rest of tt-* styles) has a chance to inject
   them, so these need to be globally available from first paint. */
.tt-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border-primary); margin-bottom: var(--space-lg); }
.tt-tab { padding: 10px 20px; font-size: var(--font-size-sm); font-weight: 500; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.15s; background: none; border-top: none; border-left: none; border-right: none; font-family: var(--font-sans); }
.tt-tab:hover { color: var(--text-primary); }
.tt-tab.active { color: var(--accent-primary); border-bottom-color: var(--accent-primary); }
.tt-tab .tt-tab-count { display: inline-block; background: var(--bg-tertiary); color: var(--text-muted); font-size: var(--font-size-xs); padding: 1px 6px; border-radius: var(--radius-sm); margin-left: 6px; font-family: var(--font-mono); }
.tt-tab.active .tt-tab-count { background: var(--accent-primary); color: var(--bg-primary); }