/* This creates a skinny side bar fixed to the left of the page */
.sidebar {
  position: fixed;
  top: 7vh;
  left: 0;
  bottom: 0;
  width: 5rem;
  padding: 2rem 1rem;
  background-color: #343a40; /* Charcoal/Dark color */
  z-index: 1050;
  transition: width 0.1s ease-in-out;
  border-right: 1px solid #495057;
}

/* when the user hovers on the sidebar, expand it */
.sidebar:hover {
  width: 12rem;
}

/* make sure the contents of the navlink don't wrap when navbar collapses */
.sidebar .nav-link {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

/* fix the width of the icons */
.sidebar .nav-link i {
  width: 1rem;
}

/* hide the navlink labels by default */
.sidebar .nav-link span {
  visibility: hidden;
  opacity: 1;
  transition: opacity 0.1s ease-in-out;
}

/* when the sidebar is hovered, reveal the labels */
.sidebar:hover .nav-link span {
  visibility: visible;
  opacity: 1;
  color: #f8f9fa; /* Light text */
}

/* container for the sidebar header. make sure the contents don't wrap when
 * the sidebar is collapsed.
 */
.sidebar-header {
  display: flex;
  justify-content: left;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
}

/* position the header relative to the logo and hide by default */
.sidebar-header h2 {
  opacity: 0;
  margin-left: 1rem;
  margin-bottom: 0;
  transition: opacity 0.1s ease-in-out;
}

/* reveal the header when the sidebar is toggled */
.sidebar:hover .sidebar-header h2 {
  opacity: 1;
}

/* Navbar collapse styling */
.navbar-collapse.show, .navbar-collapse.collapsing {
    background-color: #212529; /* Dark background */
    opacity: 1;
}

@media (max-width: 767.98px) {  /* md breakpoint */
    .navbar-collapse.show, .navbar-collapse.collapsing {
        position: absolute;
        top: 100%;
        right: 0;
        padding: 0.5rem;
        width: auto;
        min-width: 200px;
        border-radius: 0 0 0.25rem 0.25rem;
        box-shadow: 0 2px 5px rgba(0,0,0,0.5); /* Darker shadow */
        z-index: 1030;
        background-color: #212529; /* Ensure background is dark on mobile */
    }

    .navbar-collapse .nav-item {
        width: 100%;
        text-align: right;
    }

    .navbar-collapse .nav-link {
        color: rgba(255, 255, 255, 0.9) !important;
        padding: 0.5rem 1rem;
    }

    .navbar-collapse .nav-link:hover {
        color: #fff !important;
        background-color: rgba(255, 255, 255, 0.1);
    }
}

/* position the content relative to the collapsed sidebar */
.content {
    margin-left: 0px;
    margin-right: 0px;
    background-color: #212529; /* Charcoal background for main content */
    color: #f8f9fa; /* Light text for main content */
}

body {
    background-color: #212529;
    color: #f8f9fa;
}

.hide-disabled-rows .ag-row.ag-row-disabled {
    display: none;
}
/* Hide rows that don't match the filter */
.hide-disabled-rows .ag-row.filtered-hidden {
    display: none !important;
}

/* Use the :has() pseudo-class to hide any row that has a cell with our special class */
.hide-disabled-rows .ag-row:has(.filtered-hidden-cell) {
    display: none !important;
}

/* Peer tile hover and click effects */
.peer-tile {
    transition: background-color 0.2s ease-in-out;
}

.peer-tile:hover {
    background-color: lightblue !important;
}

.peer-tile:active {
    background-color: lightcoral !important;
    transition: background-color 0.05s ease;
}

/* Override Mantine Tabs hover style for dark theme */
.mantine-Tabs-tab:hover {
    background-color: #495057 !important;
    color: #e0e0e0 !important;
}

.mantine-Tabs-tab[data-active="true"] {
    background-color: #343a40 !important;
    color: #ffffff !important;
    border-bottom-color: #339af0 !important; 
}

/* Dark Dropdown Styles.
   Dash 4 replaced react-select with its own dcc.Dropdown component, themed via --Dash-*
   custom properties whose (light) defaults are defined on :root. The old `.Select-*` rules
   below no longer matched anything. We instead override those variables directly on the
   trigger (.dash-dropdown) and on the popover menu (.dash-dropdown-content) — the menu is
   portaled to a sibling of the trigger, so it must be themed separately. Declaring the
   variables on these elements wins over the :root defaults by proximity (no load-order race).
   Every dropdown in this app opts in via className="dark-dropdown". */
.dash-dropdown,
.dash-dropdown-content {
    --Dash-Fill-Inverse-Strong: #343a40;
    --Dash-Fill-Inverse-strong: #343a40; /* lowercase variant used for option background */
    --Dash-Text-Primary: #e0e0e0;
    --Dash-Text-Strong: #e0e0e0;
    --Dash-Text-Weak: #c9d7e1;
    --Dash-Text-Disabled: #9bb8cc;
    --Dash-Stroke-Strong: #495057;
    --Dash-Fill-Interactive-Strong: #66b0ff;
    --Dash-Fill-Interactive-Weak: #495057;
    --Dash-Fill-Disabled: #495057;
    --Dash-Shading-Strong: rgba(0, 0, 0, 0.55);
    --Dash-Shading-Weak: rgba(0, 0, 0, 0.35);
}

/* The control has no border by default — give it a defined edge to match the dark theme.
   Also pin the selected-value text colour (it otherwise just inherits from the page). */
.dark-dropdown.dash-dropdown {
    border: 1px solid #495057;
    border-radius: 4px;
    color: #e0e0e0;
}

/* Dash only recolours the option text on hover; add a subtle row highlight for the dark menu. */
.dash-dropdown-option:hover {
    background-color: #495057;
}

/* The 13F fund leaderboard uses the same (default) text size as the other grids on desktop,
   and only shrinks the text on phone widths so it stays compact there. Row/header heights are
   kept compact via the grid options regardless of width. */
@media (max-width: 576px) {
    .ag-theme-alpine-dark.leaderboard-grid {
        --ag-font-size: 11px;
    }
    .ag-theme-alpine-dark.leaderboard-grid .ag-header-cell-text,
    .ag-theme-alpine-dark.leaderboard-grid .ag-header-group-cell-label {
        font-size: 10px;
    }
}
/* Markets factor table: ret / zs / var headers use the same tight side padding as their cells
   (factor_table.init_colf), so labels and values line up in narrow phone columns */
.ag-header-cell.fct-tight, .ag-header-group-cell.fct-tight {
    padding-left: 6px !important;
    padding-right: 8px !important;
}


/* Markets chart tabs: Mantine hides inactive panels with an inline display:none, so a chart drawn
   there has zero width and Plotly lays it out at its 700px default, then snaps to the panel width
   100-200ms after the tab opens (the desktop "layout shift"). Keep hidden panels laid out at full
   width instead, but invisible, out of the flow and not clickable: charts draw at the right size.
   Same on the Home chart tabs, where the Sect chart's redraw on first show also threw the phone
   page up ~500px. */
#right-tabs, #home-tabs { position: relative; }
#right-tabs > [role="tabpanel"][style*="display: none"],
#home-tabs > [role="tabpanel"][style*="display: none"] {
    display: block !important;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    pointer-events: none;
}

/* Markets Fct tab on phones: the panel is a fixed 50vh, but the horizon radio row and two <br>s sit above
   two 42%-high charts, so the content runs ~75px past it; on desktop the 50px bottom margin hides that, on
   phones the bottom chart's date axis lands on the filter buttons below. Let the Fct panel and its column
   grow to fit, and pin the charts at the 21vh (42% of 50vh) they already were, so nothing resizes. */
@media (max-width: 767.98px) {
    .right-tabs-col, #right-tabs { height: auto !important; }
    #right-tabs { margin-bottom: 12px !important; }  /* the 50px was there to absorb the overflow */
    #factor5d-tab { height: auto !important; }
    #factor-bkt5d-graph, #factor-ts5d-graph { height: 21vh !important; }
}

/* ---- Notes (/notes, /notes/<slug>): long-form desk research ---- */
.note-crumb { color: #9bb8cc; font-size: 0.85rem; text-decoration: none; letter-spacing: 0.04em; text-transform: uppercase; }
.note-crumb:hover { color: #66b0ff; }
.note-title { color: #f2f2f2; font-weight: 700; font-size: clamp(1.7rem, 4.5vw, 2.4rem); line-height: 1.2; text-wrap: balance; }
.note-dek { color: #cfd8de; font-size: 1.15rem; margin-bottom: 0.6rem; }
.note-meta { color: #9bb8cc; font-size: 0.85rem; border-bottom: 1px solid #495057; padding-bottom: 0.8rem; margin-bottom: 1.4rem; }
.note-body { color: #e0e0e0; font-size: 1.05rem; line-height: 1.65; }
.note-md p { margin-bottom: 1rem; }
.note-md h2 { color: #3498db; font-size: 1.4rem; font-weight: 700; line-height: 1.3; margin: 2.2rem 0 0.8rem; text-wrap: balance; }
.note-md a { color: #66b0ff; }
.note-md strong { color: #f2f2f2; }
.note-md ul, .note-md ol { padding-left: 1.3rem; margin-bottom: 1rem; }
.note-md li { margin-bottom: 0.5rem; }
.note-md table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 1.2rem 0 1.6rem; font-size: 0.92rem; line-height: 1.45; }
.note-md th, .note-md td { padding: 8px 10px; border-bottom: 1px solid #495057; vertical-align: top; text-align: left; }
.note-md th { color: #9bb8cc; font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid #6c757d; }
.note-md td:first-child { color: #f2f2f2; font-weight: 600; min-width: 6.5rem; }
.note-figure { margin: 1.6rem 0 2rem; padding: 14px 14px 10px; background-color: #101a21; border: 1px solid #495057; border-radius: 12px; }
.note-fig-title { color: #f2f2f2; font-weight: 700; font-size: 0.98rem; margin-bottom: 2px; }
.note-figure figcaption { color: #9bb8cc; font-size: 0.8rem; line-height: 1.45; margin-top: 6px; }
.note-disclaimer { color: #8a99a6; font-size: 0.8rem; line-height: 1.5; border-top: 1px solid #495057; margin-top: 2rem; padding-top: 1rem; }
.note-disclaimer a { color: #9bb8cc; }
.note-list { display: grid; gap: 14px; margin-top: 1.2rem; }
.note-card-link { text-decoration: none; }
.note-card { background-color: #101a21; border: 1px solid #6c757d; border-radius: 15px; padding: 16px 18px; transition: border-color 0.15s; }
.note-card-link:hover .note-card { border-color: #66b0ff; }
.note-card .note-meta { border-bottom: 0; padding-bottom: 0; margin-bottom: 0.3rem; }
.note-card-title { color: #66b0ff; font-weight: 700; font-size: 1.2rem; margin-bottom: 0.4rem; }
.note-card-dek { color: #cfd8de; }
@media (max-width: 576px) {
    .note-body { font-size: 1rem; }
    .note-figure { padding: 10px 8px 8px; margin-left: -4px; margin-right: -4px; }
    .note-md th, .note-md td { padding: 7px 6px; }
}