/* 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;
    }
}