/* Renaissance Technologies Dashboard Custom Styles */

/* Global Styles */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #F5F5F5;
}

/* Navbar Customizations */
.navbar {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Card Enhancements */
.card {
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
}

.card-header {
    background-color: #800000;
    color: white;
    border-bottom: none;
    font-weight: 600;
}

/* Sidebar Styling */
.bg-light {
    background-color: #FFFFFF !important;
    border-right: 1px solid #E0E0E0;
}

/* Button Customizations */
.btn-primary {
    background-color: #800000;
    border-color: #800000;
}

.btn-primary:hover {
    background-color: #660000;
    border-color: #660000;
}

.btn-outline-light:hover {
    background-color: rgba(255,255,255,0.1);
}

/* Dash 4 core-component accent
 *
 * Dash 4 restyled the dcc components and themes them through CSS variables it
 * declares on :root, with the accent defaulting to Plotly Purple (#7f4bc4).
 * This app renders its form CONTROLS through Dash Mantine, so of the ~10
 * components the refresh restyled the only ones in the tree are dcc.Loading
 * and dcc.Upload (dcc.Graph/Store/Location are raw dcc too, but the refresh
 * does not touch them) -- and every dcc.Loading
 * already passes an explicit maroon `color`, so nothing renders purple today.
 * These overrides exist so nothing renders purple TOMORROW either: the next
 * raw dcc component someone drops in inherits the theme instead of Plotly's.
 *
 * `html:root` rather than plain `:root` on purpose -- Dash injects its own
 * `:root` block at runtime from the component bundle, so matching its
 * specificity would leave the winner decided by injection order.
 *
 * The ACCENT tracks the Mantine theme (config.UCHICAGO_THEME primaryColor
 * "maroon"), with #800000 as the fallback if that variable is ever absent.
 * The weak fill is a flat tint rather than a second themed value: it is a
 * 6%-alpha hover wash, and no Mantine variable exposes the primary at an
 * arbitrary alpha. */
html:root {
    --Dash-Fill-Interactive-Strong: var(--mantine-primary-color-filled, #800000);
    --Dash-Fill-Interactive-Weak: rgba(128, 0, 0, 0.06);
}

/* Chart Container */
.js-plotly-plot {
    border-radius: 8px;
}

/* App-boot placeholder.
 *
 * NOT the dcc.Loading spinner -- this is the "Loading..." div Dash renders
 * into #react-entry-point before React hydrates (dash/dash.py `_app_entry`),
 * which Dash 4 still emits unchanged. The dcc.Loading spinner is
 * .dash-spinner / .dash-spinner-container and is styled by its own `color`
 * prop, which every call site in this app sets to maroon. */
._dash-loading {
    margin: 50px auto;
}

/* Status Badges */
.alert {
    border-radius: 6px;
    font-size: 0.9rem;
}

/* Login Page Specific */
.min-vh-100 {
    background: linear-gradient(135deg, #800000 0%, #FF6B35 100%);
}

.login-container {
    backdrop-filter: blur(10px);
}

/* Animation Classes */
.fade-in {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Responsive Design */
@media (max-width: 768px) {
    .navbar-brand {
        font-size: 1rem !important;
    }
    
    .card-body {
        padding: 1rem;
    }
}

/* v11 WS3 — numeric legibility in AG Grid: tabular (fixed-width) figures so
   digits align down a column; applies to every numeric (right-aligned)
   cell and header in the alpine grids. */
.ag-theme-alpine .ag-right-aligned-cell,
.ag-theme-alpine .ag-right-aligned-header {
    font-variant-numeric: tabular-nums;
}

/* v12 WS5 — the Execution-Quality grids read as a trading terminal, not a flat
   pastel grid: condensed rows, tabular figures on EVERY cell, weighted
   maroon-tinted sticky headers, 1px light rules, a bold subtotal/grand-total
   row, and a whisper of tint behind the single most-important column. Scoped to
   #pnl-fast-view so no
   other page's grids are touched.
   Colorblind-safe: hue always rides text + the +/- glyph; full-cell fill is
   reserved for the status column (its own cellStyle) and the pinned TOTAL. */
#pnl-fast-view .ag-theme-alpine,
#lumnaf-risk-view .ag-theme-alpine {
    --ag-grid-size: 4px;                        /* condensed density */
    --ag-row-height: 34px;
    --ag-header-height: 38px;
    --ag-font-size: 12px;
    --ag-header-background-color: #f2e9ea;       /* light maroon tint */
    --ag-header-foreground-color: #5a1f24;
    --ag-header-column-separator-color: #e0d6d7;
    --ag-border-color: #e7e1e1;                  /* 1px light rules */
    --ag-row-border-color: #efeaea;
    --ag-odd-row-background-color: #fcfbfb;
    --ag-cell-horizontal-padding: 10px;
    --ag-selected-row-background-color: rgba(128, 0, 0, 0.06);
}
/* Tabular figures on every cell (identity columns included) so digits and $
   align down the whole grid. */
#pnl-fast-view .ag-theme-alpine .ag-cell,
#lumnaf-risk-view .ag-theme-alpine .ag-cell {
    font-variant-numeric: tabular-nums;
}
/* Sticky header: weight + a touch of tracking, a firm bottom rule. */
#pnl-fast-view .ag-theme-alpine .ag-header,
#lumnaf-risk-view .ag-theme-alpine .ag-header {
    border-bottom: 2px solid #d8cccc;
}
#pnl-fast-view .ag-theme-alpine .ag-header-cell-text,
#lumnaf-risk-view .ag-theme-alpine .ag-header-cell-text {
    font-weight: 700;
    letter-spacing: 0.02em;
}
/* The pinned identifier columns (time / label) read a step heavier. */
#pnl-fast-view .ag-theme-alpine .ag-pinned-left-cols-container .ag-cell,
#lumnaf-risk-view .ag-theme-alpine .ag-pinned-left-cols-container .ag-cell {
    font-weight: 600;
}
/* Subtotal / grand-total pinned row: bold + a subtle tint so the eye lands,
   with a firm top rule separating it from the data. */
#pnl-fast-view .ag-theme-alpine .ag-row-pinned,
#lumnaf-risk-view .ag-theme-alpine .ag-row-pinned {
    font-weight: 700;
    background-color: #f6f1f1;
    border-top: 2px solid #d8cccc;
}
/* A whisper of tint behind the single most-important column (net edge after
   fees) — deliberately far lighter than the reserved status fill. */
#pnl-fast-view .ag-theme-alpine .fast-key-col,
#lumnaf-risk-view .ag-theme-alpine .fast-key-col {
    background-color: rgba(128, 0, 0, 0.045);
}

/* ---------------------------------------------------------------------------
   Dash 3 -> 4 upgrade compatibility (dash-ag-grid 32.3.2 -> 35.3.0).

   AG Grid 33+ moved to its new Theming API, and the legacy `.ag-theme-alpine`
   class no longer defines the CSS custom properties it used to. Measured in a
   live browser on both stacks side by side, the plain grids lost EVERY theme
   variable (--ag-font-size, --ag-border-color, --ag-font-family, --ag-grid-size,
   --ag-header-background-color, --ag-odd-row-background-color, --ag-row-height,
   --ag-header-height, --ag-background-color, --ag-foreground-color all resolved
   to empty), which shifted them to the new defaults: 13px -> 14px text, header
   weight 700 -> 500, radius 3px -> 8px, an IBM Plex Sans font stack, and a new
   translucent border colour.

   This block pins the Dash-3 values back. Every value here was READ OFF the
   Dash-3 build, not invented -- the upgrade is meant to be visually invisible.
   The `#pnl-fast-view` block above keeps winning on specificity (id + class),
   so the Execution-Quality terminal styling is unaffected by these globals. */
.ag-theme-alpine {
    --ag-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --ag-font-size: 13px;
    --ag-grid-size: 6px;
    --ag-background-color: #fff;
    --ag-foreground-color: #181d1f;
    --ag-border-color: #babfc7;
    --ag-row-border-color: #dde2eb;
    --ag-header-background-color: #f8f8f8;
    --ag-odd-row-background-color: #fcfcfc;
    --ag-row-height: calc(6px * 7);
    --ag-header-height: calc(6px * 8);
    /* Chrome metrics — also dropped by AG Grid 35, and each one is visible:
       cell padding drives COLUMN WIDTHS (18px -> 16px shrank every column and
       walked the header labels left by up to 26px); the widget spacings size
       the floating-filter inputs and the page-size picker; icon-size shrank the
       grid icons 16px -> 13px; disabled-foreground is what washed the paging
       arrows out to near-invisible when a grid has no rows. */
    --ag-cell-horizontal-padding: calc(6px * 3);
    --ag-widget-container-horizontal-padding: calc(6px * 2);
    --ag-widget-container-vertical-padding: calc(6px * 2);
    --ag-widget-horizontal-spacing: calc(6px * 2);
    --ag-widget-vertical-spacing: calc(6px * 1.5);
    --ag-icon-size: 16px;
    --ag-header-column-separator-width: 1px;
    --ag-disabled-foreground-color: rgba(24, 29, 31, 0.5);
    --ag-secondary-foreground-color: #181d1f;
    --ag-input-border-color: #babfc7;
}
/* AG Grid 35 no longer derives these from the variables above, so state them.
   Everything is expressed through the variables rather than as literals, so the
   #pnl-fast-view block's own values (12px, maroon tints) keep flowing through. */
.ag-theme-alpine .ag-root-wrapper {
    font-family: var(--ag-font-family);
    font-size: var(--ag-font-size);
    border-radius: 3px;
    border-color: var(--ag-border-color);
}
.ag-theme-alpine .ag-header {
    font-weight: 400;
}
.ag-theme-alpine .ag-header-cell-text {
    font-size: var(--ag-font-size);
    font-weight: 700;
}
.ag-theme-alpine .ag-row {
    border-bottom-color: var(--ag-row-border-color);
}
/* In the Dash-3 alpine, cells rendered one step LARGER than the grid's
   --ag-font-size (13px cells against a 13px grid reading 14px, and 13px inside
   the 12px terminal grids). AG Grid 35 simply inherits the wrapper size, which
   shrank every cell. Pin the Dash-3 pairing; #pnl-fast-view overrides below. */
.ag-theme-alpine .ag-cell,
.ag-theme-alpine .ag-row {
    font-size: 14px;
}

/* The Execution-Quality grids keep their own density/tint from the block above,
   but two Dash-3 traits are not recoverable from the variables any more:

   1. --ag-header-foreground-color is no longer honoured, so the maroon header
      text (#5a1f24) fell back to near-black rgb(24,29,31). That is a UChicago
      brand regression, so it is restated explicitly.
   2. Cells rendered at 13px under Dash 3 even though --ag-font-size is 12px
      (only the headers took the 12px). AG Grid 35 applies the variable to cells
      too, shrinking them. Restated to keep the terminal grid identical. */
#pnl-fast-view .ag-theme-alpine .ag-header-cell-text,
#lumnaf-risk-view .ag-theme-alpine .ag-header-cell-text {
    color: #5a1f24;
}
#pnl-fast-view .ag-theme-alpine .ag-cell,
#pnl-fast-view .ag-theme-alpine .ag-row,
#lumnaf-risk-view .ag-theme-alpine .ag-cell,
#lumnaf-risk-view .ag-theme-alpine .ag-row {
    font-size: 13px;
}

/* AG Grid 35 also resized its own form controls and paging bar -- these are
   component metrics, not theme variables, so no --ag-* value restores them.
   Measured Dash 3 -> Dash 4: floating-filter input 24px -> 32px tall, page-size
   picker 24px -> 32px, paging panel 48px -> 42px. Restated to the Dash-3
   geometry. Deliberately height/padding only: nothing here touches AG Grid's
   flex layout, so the controls still size and align themselves. */
.ag-theme-alpine .ag-floating-filter .ag-input-field-input,
.ag-theme-alpine .ag-floating-filter .ag-text-field-input,
.ag-theme-alpine .ag-floating-filter-input .ag-input-field-input {
    height: 24px;
    min-height: 24px;
    border-radius: 3px;
    padding: 1px 2px 1px 6px;
}
.ag-theme-alpine .ag-paging-panel {
    height: 48px;
    padding: 0;
}
.ag-theme-alpine .ag-paging-page-size .ag-picker-field-wrapper {
    height: 24px;
    min-height: 24px;
}

/* Cash & Carry (/cash-carry): the daily-funding strip fills its cell. AG Grid wraps a
   renderer in .ag-cell-wrapper / .ag-cell-value, which shrink to their content, so the
   stretching svg (cash_carry.js CashCarryStrip) would stay at its viewBox width. */
.cc-strip-cell .ag-cell-wrapper,
.cc-strip-cell .ag-cell-value {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

/* Lumnaf risk venue, severity and layout styles. */
#lumnaf-risk-view .lumnaf-venue-binance {
    background-color: rgba(204,138,0,.07);
}
#lumnaf-risk-view .lumnaf-venue-okex {
    background-color: rgba(0,115,150,.07);
}
#lumnaf-risk-view .lumnaf-venue-bybit {
    background-color: rgba(169,67,30,.07);
}
#lumnaf-risk-view .lumnaf-venue-deribit {
    background-color: rgba(138,79,158,.07);
}
#lumnaf-risk-view .lumnaf-venue-gateio {
    background-color: rgba(120,157,74,.07);
}
#lumnaf-risk-view .lumnaf-venue-bitget {
    background-color: rgba(62,177,200,.07);
}
#lumnaf-risk-view .lumnaf-venue-hyperliquid {
    background-color: rgba(194,110,138,.07);
}
/* Venues without an identity colour (config.LUMNAF_RISK_OTHER_VENUES): one greystone tint; the name carries them.
   One rule per venue: the page tests find each class by its own rule. */
#lumnaf-risk-view .lumnaf-venue-bullish {
    background-color: rgba(166,166,166,.10);
}
#lumnaf-risk-view .lumnaf-venue-ibkr {
    background-color: rgba(166,166,166,.10);
}
#lumnaf-risk-view .lumnaf-venue-general_wallet {
    background-color: rgba(166,166,166,.10);
}
#lumnaf-risk-view .lumnaf-venue-kraken {
    background-color: rgba(166,166,166,.10);
}
#lumnaf-risk-view .lumnaf-venue-bitfinex {
    background-color: rgba(166,166,166,.10);
}
#lumnaf-risk-view .lumnaf-venue-copper {
    background-color: rgba(166,166,166,.10);
}
#lumnaf-risk-view .lumnaf-sev-1 {
    background-color: #F5E6E6;
}
#lumnaf-risk-view .lumnaf-sev-2 {
    background-color: #E6CCCC;
}
#lumnaf-risk-view .lumnaf-sev-3 {
    background-color: #993333;
    color: #fff;
}
#lumnaf-risk-view .lumnaf-sev-4 {
    background-color: #800000;
    color: #fff;
}
#lumnaf-risk-view .lumnaf-heat-pos-2 {
    background-color: rgba(39,93,56,.20);
}
#lumnaf-risk-view .lumnaf-heat-neg-2 {
    background-color: rgba(164,52,58,.20);
}
#lumnaf-risk-view .lumnaf-heat-2 {
    background-color: rgba(115,115,115,.24);
}
#lumnaf-risk-view #lumnaf-risk-tabs,
#lumnaf-risk-view #lumnaf-risk-venue-detail,
#lumnaf-risk-view #lumnaf-risk-freshness,
#lumnaf-risk-view [id^="lumnaf-risk-rail-"] {
    scroll-margin-top: 72px;
}