/*
 * sidebar_collapse.css
 * --------------------
 * Click-to-collapse sidebar, driven by `body.sidebar-collapsed`.
 *
 * Resting (no class):
 *   - Navbar at the AppShell-configured 250 px, main content flush
 *   - Icons + labels, section text labels visible
 *
 * Collapsed (body.sidebar-collapsed):
 *   - Navbar narrows to 70 px and main content shifts left to match
 *     (we override AppShellMain padding-inline-start directly because
 *     Mantine's CSS-var route only catches the navbar element)
 *   - Section header text replaced by a thin horizontal rule
 *   - NavLink-body wrapper hidden entirely (display:none) so the icon
 *     can centre — opacity:0 leaves it consuming flex space
 *   - Active NavLink shows a clear blue pill highlight, Koyfin-style
 */


/* ---------- Toggle button: hamburger flips with state --------------- */

.nav-toggle-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Default (expanded): arrow points LEFT — clicking will close. */
.nav-toggle-icon-collapsed { display: none; }
.nav-toggle-icon-expanded  { display: inline-flex; }
/* Collapsed: arrow points RIGHT (same icon, mirrored) — clicking will
   open. Mirroring the same MDI icon keeps the visual weight identical
   between the two states so the button feels like the same control,
   not two different icons swapping. */
body.sidebar-collapsed .nav-toggle-icon-collapsed {
    display: inline-flex;
    transform: scaleX(-1);
}
body.sidebar-collapsed .nav-toggle-icon-expanded  { display: none; }


/* ---------- Uniform row metrics (both states) ----------------------- */

/* Fixed 24 px icon box centres icons regardless of viewBox differences
   between MDI icons (telescope / vector-triangle would otherwise sit
   visibly smaller than chart-pie at the same height prop). */
.mantine-AppShell-navbar.nav-collapsible .mantine-NavLink-section[data-position="left"] {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Pin every NavLink row to the same min-height for a clean vertical
   rhythm, regardless of icon size or label length. */
.mantine-AppShell-navbar.nav-collapsible .mantine-NavLink-root {
    min-height: 40px;
    display: flex;
    align-items: center;
    border-radius: 6px;
    margin-bottom: 2px;
    transition: background-color 120ms ease;
}

/* Section-header wrapper: same vertical rhythm so icon columns above
   and below sit on predictable y-positions. */
.nav-section-header {
    min-height: 32px;
    margin-top: 12px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
}
.nav-section-header .nav-section-label { flex: 1; }
.nav-section-rule {
    flex: 1;
    height: 1px;
    background: var(--vm-border);
    display: none;  /* Shown only when collapsed */
}


/* ---------- Active-page highlight (Koyfin-style) -------------------- */

.mantine-AppShell-navbar.nav-collapsible .mantine-NavLink-root[data-active] {
    background-color: var(--vm-primary-subtle) !important;
    color: var(--vm-primary) !important;
}
.mantine-AppShell-navbar.nav-collapsible .mantine-NavLink-root[data-active] svg {
    color: var(--vm-primary) !important;
}
.mantine-AppShell-navbar.nav-collapsible .mantine-NavLink-root:hover {
    background-color: var(--vm-primary-subtle);
}


/* ---------- Smooth width transition --------------------------------- */

/* `overflow-x: hidden` is deliberately NOT set: the collapsed-state
   hover label (.nav-hover-label) needs to escape the 70 px column to
   the right, and overflow:hidden would clip it. Expanded-state labels
   live inside NavLink-body and don't overflow the 250 px column. */
.mantine-AppShell-navbar.nav-collapsible {
    transition: width 160ms ease;
}
.mantine-AppShell-main {
    transition: padding-inline-start 160ms ease;
}


/* §5.2/§5.3: 40px desktop, 44px MOBILE — the Apple/W3C finger-target minimum.
   Scoped to the phone so the desktop rhythm above is untouched; a mouse hits a
   40px row perfectly well.

   This lives here rather than in custom.css deliberately: the 40px rule above
   has identical specificity, and Dash loads assets alphabetically, so
   sidebar_collapse.css wins over custom.css. An override in the other file
   looked correct and silently did nothing. Keep an override beside what it
   overrides. */
@media (max-width: 767px) {
    .mantine-AppShell-navbar.nav-collapsible .mantine-NavLink-root {
        min-height: 44px;
    }
}

/* ---------- Collapsed state ----------------------------------------- */

/* DESKTOP ONLY — everything in this block is the 70px ICON RAIL, and it must
   not reach a phone.
   
   Below 768px the AppShell already takes the navbar fully off-canvas
   (`collapsed={'mobile': True}`), reached from the burger in the header. But
   the pre-hydration script in app.py adds `body.sidebar-collapsed` below 768px
   too, so without this media query the rules below reserved 70px of
   padding-inline-start for a rail that is not on screen — 19% of a 375px
   viewport, blank. Together with the card and container padding it left page
   content 207px wide inside a 375px phone.
   
   768px is Mantine's `sm`, which is the AppShell's own `breakpoint`; keep the
   two in step or the rail and the offset disagree at some width. */
@media (min-width: 768px) {
    /* Narrow the navbar element itself. */
    body.sidebar-collapsed .mantine-AppShell-navbar.nav-collapsible {
        width: 70px !important;
    }

    /* Shift the main content directly via padding override — Mantine's
       `--app-shell-navbar-width` variable alone does NOT drive main-content
       offset in v7, which is why earlier attempts left the dead column.
       Targeting padding-inline-start on AppShellMain is the reliable lever. */
    body.sidebar-collapsed .mantine-AppShell-main {
        padding-inline-start: 70px !important;
    }
}

/* Hide the entire NavLink-body wrapper, not just the label inside it.
   The body holds label + description and has its own flex sizing;
   leaving it visible (even with empty children) keeps it consuming
   horizontal space, which pushes the icon off-centre. */
body.sidebar-collapsed .mantine-AppShell-navbar.nav-collapsible .mantine-NavLink-body {
    display: none !important;
}

/* Centre the icon in the 70 px column. Mantine NavLink uses LOGICAL
   padding (`padding-inline-start` / `padding-inline-end`), so plain
   `padding-left` / `padding-right` don't override it — the icon was
   left-shifted because Mantine's inline-start padding (~12-16 px) was
   still in effect. `padding-inline: 0` is the matching logical lever.
   Forcing `width: 100%` ensures NavLink-root spans the column even
   when wrapped in Mantine's Tooltip target span.  */
body.sidebar-collapsed .mantine-AppShell-navbar.nav-collapsible .mantine-NavLink-root {
    width: 100% !important;
    justify-content: center !important;
    padding-inline: 0 !important;
}
body.sidebar-collapsed .mantine-AppShell-navbar.nav-collapsible .mantine-NavLink-section[data-position="left"] {
    margin: 0 !important;
}

/* Section headers: hide the text, show the rule. */
body.sidebar-collapsed .nav-section-label { display: none; }
body.sidebar-collapsed .nav-section-rule {
    display: block;
    margin: 0 12px;
}


/* ---------- NavLink rows + tooltip popup ---------------------------- */

/* `.nav-link-cell` is our owned wrapper around each NavLink+Tooltip
   pair (see create_nav_link in app.py). Block + full width so the row
   spans the column. */
.nav-link-cell {
    display: block;
    width: 100%;
}

/* Mantine's Tooltip injects an inline target wrapper between
   `.nav-link-cell` and the NavLink. Left alone, that wrapper shrinks
   to NavLink's content width, which would resurrect the off-centre
   icon problem — force it (and anything else Mantine slips in there)
   to block + full width. */
.nav-link-cell > * {
    display: block !important;
    width: 100% !important;
}

/* `.nav-tooltip` lives on the floating popup (set via classNames slot
   styling, portaled to <body> so it escapes every navbar overflow
   clip). When the sidebar is expanded the page label is already
   visible inline, so the hover hint would be redundant — hide it. */
body:not(.sidebar-collapsed) .nav-tooltip {
    display: none !important;
}