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

    /* EVERYTHING BELOW IS ALSO THE 70px RAIL, and it used to sit OUTSIDE this
       media query — which was invisible for as long as the mobile drawer could
       not be opened at all. The pre-hydration script in app.py sets
       `body.sidebar-collapsed` below 768px too, so the moment the burger
       started working, the phone drawer opened as a full-width panel of
       centred, UNLABELLED icons with horizontal rules where the section names
       should be: the rail's styling, at the drawer's width. Nine destinations
       identified only by a telescope or a briefcase.

       The 70px rail and the mobile drawer are different objects that happen to
       share a class. Keep every rule that shapes the rail in here with the
       width that defines it. */

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

/* On a phone the label is visible inline (the rail's rules above are gated to
   desktop now), so the hint is redundant here for the same reason. It cannot be
   left to the rule above: `body.sidebar-collapsed` IS set below 768px, so that
   selector does not match and the popup would be shown — fired by a tap, on
   a device with no hover, over the item the reader just chose. */
@media (max-width: 767px) {
    .nav-tooltip {
        display: none !important;
    }
}