/* 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 links: Bootstrap's dark-navbar default (white at 55%) composites to #afbdcc on the #375a7f bar, a
   3.7:1 contrast (Lighthouse/WCAG want 4.5:1). 85% gives #e1e6ec, ~5.7:1; the active page stays pure white,
   and hover goes to white (the default 75% hover would now be dimmer than the resting links). */
.navbar {
    --bs-navbar-color: rgba(255, 255, 255, 0.85);
    --bs-navbar-hover-color: #fff;
}
/* the page you're on: bold as well as white, so it stands out from the 85% links */
.navbar .nav-link.active { font-weight: 700; }
/* the signed-in username (app.py create_navbar, "nav-link text-light"): Darkly's text-light #adb5bd is 3.5:1 */
.navbar .nav-link.text-light { color: rgba(255, 255, 255, 0.85) !important; }

/* 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.active,
    .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;
    }
}
/* 13F Funds grid on phones: four flat columns (holdings_page.FUNDS_PHONE_COLS, swapped in below 768px);
   smaller text and side padding so the numbers fit unclipped in a 390px viewport. */
@media (max-width: 767.98px) {
    .ag-theme-alpine-dark.funds-grid {
        --ag-font-size: 12px;
        --ag-cell-horizontal-padding: 8px;
    }
}
/* 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 sits above two
   percentage-high charts, so the content runs past it; on desktop the right tabs' 50px bottom margin hides
   that, on phones the bottom chart's date axis landed on the filter buttons below. Let the Fct panel and its
   column grow to fit, and size the charts so the panel comes to 50vh like every other right tab (26px radio
   row + 6px gap + 2 charts), so the filter buttons don't move when switching tabs; if the radio row ever wraps,
   the panel grows instead of overlapping. With the heights released the bottom margins aren't needed: the <br>
   before the filter buttons is the gap (~32px chart -> buttons). */
@media (max-width: 767.98px) {
    .right-tabs-col, #right-tabs { height: auto !important; }
    .right-tabs-col, #right-tabs { margin-bottom: 0 !important; }
    #factor5d-tab { height: auto !important; }
    #factor-bkt5d-graph, #factor-ts5d-graph { height: calc(25vh - 16px) !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; }
}

/* Share row under the Home digest (pages/home/home_page.py share_bar; behaviour in assets/share_bar.js),
   styled like the notes' share rows. Share shows only where the native sheet exists, Text only on touch
   devices, and on phones with a share sheet X is left to the sheet so the row stays one line. */
/* left margin: the chart tabs' 2% (home_page.py #home-tabs) plus the gap between the Fct tab's edge and its
   label (16px) minus the first button's own inset (11px phone, 10px desktop), so its icon lines up with "Fct" */
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 20px calc(2% + 5px); }
.share a, .share button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; min-height: 36px;
    border-radius: 999px; border: 1px solid #6c757d; background: transparent; color: #e0e0e0; font: inherit;
    font-size: 0.85rem; line-height: 1; text-decoration: none; cursor: pointer; }
.share a:hover, .share button:hover { border-color: #66b0ff; color: #fff; }
.share [data-act="native"] { background: #375a7f; border-color: #375a7f; color: #fff; }
.share [data-act="native"], .share [data-act="sms"] { display: none; }
.fp-can-share .share [data-act="native"], .fp-touch .share [data-act="sms"] { display: inline-flex; }
.fp-can-share.fp-touch .share .social { display: none; }
.share i { font-size: 0.9rem; }
@media (min-width: 768px) {   /* desktop: 25% smaller than the touch-sized buttons */
    .share { gap: 6px; margin-left: calc(2% + 6px); }
    .share a, .share button { min-height: 27px; padding: 4px 9px; gap: 5px; font-size: 0.7rem; }
    .share i { font-size: 0.7rem; }
}
@media (max-width: 420px) {
    .share { gap: 6px; }
    .share a, .share button { padding: 6px 10px; gap: 5px; }
}

/* Home digest frame on phones: hold a full screen until assets/digest_frame.js fits it (data-fit), so
   fitting it to the digest (taller than the screen) doesn't throw the charts below it up and down */
@media (max-width: 767.98px) {
    .digest-frame:not([data-fit]) { height: 100vh !important; }
}