/* ===================================================================== */
/* Minimal single-color line icon (vendored Lucide SVG via CSS mask).    */
/* Inherits the surrounding text color through `currentColor`.           */
/* ===================================================================== */
.mira-icon {
    display: inline-block;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    vertical-align: middle;
}

/* ===================================================================== */
/* Navbar left cluster: hamburger (rail toggle) + wide brand mark.       */
/* ===================================================================== */
.mira-navbar-left {
    display: flex;
    align-items: center;
}

/* Hamburger that collapses/expands the left module rail. */
.mira-rail-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-right: 8px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #ffffff;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.mira-rail-toggle:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* Wide brand mark — home anchor, sits right of the hamburger. The small
   left nudge lines its right edge up with the rail's right border below. */
.mira-navbar-brand {
    margin-left: 2px;
    margin-right: 14px;
    padding: 0;
    display: flex;
    align-items: center;
}

.mira-brand-mark {
    display: block;
    opacity: 0.9;
    transition: opacity 0.15s ease;
}

.mira-navbar-brand:hover .mira-brand-mark {
    opacity: 1;
}

/* Co-brand lockup: EMA mark | divider | Mira mark. */
.mira-brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    opacity: 0.9;
    transition: opacity 0.15s ease;
}

.mira-navbar-brand:hover .mira-brand-lockup {
    opacity: 1;
}

.mira-brand-img {
    display: block;
    width: auto;
}

/* The two PNGs carry different internal padding: the EMA mark fills ~97% of
   its canvas height while the Mira mark (mira_logo.png) fills ~74% (symmetric
   transparent margins). Equal CSS heights would make their visible glyphs
   mismatch, so EMA is sized at 23px and Mira at 30px to land both visible
   glyphs at ~22.3px — same size, centre-aligned. */
.mira-brand-ema {
    height: 23px;
}

.mira-brand-mira {
    height: 30px;
}

.mira-brand-divider {
    width: 1px;
    height: 17px;
    background: rgba(255, 255, 255, 0.45);
}

/* Active-module name, sits right of the brand in the always-visible left
   cluster. Visible at every width and regardless of the left-rail state. */
.mira-module-name {
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    padding-left: 14px;
    margin-left: 2px;
    border-left: 1px solid rgba(255, 255, 255, 0.25);
    line-height: 1;
}
.mira-module-name:empty {            /* no divider when there's no label */
    border-left: none;
    padding-left: 0;
}

/* Below the navbar's xxl collapse breakpoint, drop the name to keep the
   collapsed top bar (hamburger + logo + toggler) uncramped. */
@media (max-width: 1399.98px) {
    .mira-module-name { display: none; }
}

/* ===================================================================== */
/* Left module nav rail. Dark chrome matching the navbar; sits below it   */
/* as the leftmost column of the content row. Collapses to an icon rail   */
/* whose labels re-role into hover tooltips — same markup, no re-render.  */
/* ===================================================================== */
.mira-rail {
    flex: 0 0 232px;
    width: 232px;
    display: flex;
    flex-direction: column;
    background: #212529;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    overflow-x: hidden;
    overflow-y: auto;
    transition: flex-basis 0.16s ease, width 0.16s ease;
}

.mira-rail-collapsed {
    flex-basis: 60px;
    width: 60px;
    overflow: visible;  /* let collapsed tooltips escape the rail */
}

.mira-rail-list {
    display: flex;
    flex-direction: column;
    padding: 10px 8px;
    gap: 2px;
}

/* Group divider (core | analytics | roadmap). Inset from the rail edges when
   expanded; full-width when collapsed so it still reads at 60px. */
.mira-rail-divider {
    height: 1px;
    margin: 8px 12px;
    background: rgba(255, 255, 255, 0.12);
}

.mira-rail-collapsed .mira-rail-divider {
    margin: 8px 10px;
}

.mira-rail-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.mira-rail-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    text-decoration: none;
}

.mira-rail-item-active {
    background: rgba(13, 110, 253, 0.22);
    color: #ffffff;
    box-shadow: inset 3px 0 0 #4d94ff;
}

.mira-rail-item-active:hover {
    background: rgba(13, 110, 253, 0.28);
}

/* Keyboard focus: an inset ring on the item itself. The browser's own outline wraps
   the link's descendants too, so in the collapsed rail it drew an empty box around
   the invisible tooltip label, out beside the rail. */
.mira-rail-item:focus {
    outline: none;
}

.mira-rail-item:focus-visible {
    box-shadow: inset 0 0 0 2px #4d94ff;
    color: #ffffff;
}

.mira-rail-item-active:focus-visible {
    box-shadow: inset 3px 0 0 #4d94ff, inset 0 0 0 2px #4d94ff;
}

.mira-rail-icon {
    flex: 0 0 auto;
}

/* "Coming soon" modules read muted but stay clickable. */
.mira-rail-item-soon {
    color: rgba(255, 255, 255, 0.42);
}

.mira-rail-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    min-width: 0;
}

.mira-rail-label-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.mira-rail-label-badge {
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 2px 6px;
    flex: 0 0 auto;
}

/* ---- Collapsed: icon-only, label becomes a hover tooltip ---- */
.mira-rail-collapsed .mira-rail-item {
    justify-content: center;
    padding: 10px 0;
}

.mira-rail-collapsed .mira-rail-label {
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: #111418;
    color: #ffffff;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    z-index: 1300;
    /* No transition on the base rule: collapsing must snap the labels to
       invisible instantly, otherwise every label fades 1→0 and you get a
       flash across the whole rail. The fade-in is added on :hover only. */
}

.mira-rail-collapsed .mira-rail-item:hover .mira-rail-label,
.mira-rail-collapsed .mira-rail-item:focus-visible .mira-rail-label {
    opacity: 1;
    transition: opacity 0.12s ease;
}

/* The collapsed-state badge sits inline in the tooltip, not as a pill. */
.mira-rail-collapsed .mira-rail-label-badge {
    background: transparent;
    padding: 0;
    text-transform: none;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.65);
}

.mira-rail-collapsed .mira-rail-label-badge::before {
    content: "· ";
}

/* Drawer module nav: hidden on desktop (the rail owns modules there). */
.mira-drawer-modules {
    display: none;
}

/* ===================================================================== */
/* Mobile / collapsed navbar (< xxl = 1400px).                           */
/* The navbar collapses at xxl, so below it we drop the left rail and its */
/* toggle entirely and surface the modules inside the navbar drawer — one */
/* hamburger (the navbar toggler), one place for module nav.             */
/* ===================================================================== */
@media (max-width: 1399.98px) {
    /* Rail + its collapse toggle are desktop-only chrome. */
    #sidebar-rail,
    #sidebar-rail-toggle {
        display: none !important;
    }

    /* Surface modules at the top of the drawer instead. */
    .mira-drawer-modules {
        display: block;
        width: 100%;
        padding: 0.25rem 0 0.5rem;
        margin-bottom: 0.5rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .mira-drawer-section-label {
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.5);
        padding: 0 0.25rem 0.35rem;
    }

    /* Reuse the rail item styling but drop the rail's own list padding. */
    .mira-drawer-rail-list {
        padding: 0;
    }
}

/* ===================================================================== */
/* Under-construction placeholder page.                                  */
/* ===================================================================== */
.uc-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    padding: 24px;
}

.uc-card {
    text-align: center;
    max-width: 420px;
}

.uc-icon {
    display: inline-flex;
    color: #adb5bd;
    margin-bottom: 12px;
}

.uc-title {
    font-weight: 600;
    margin-bottom: 6px;
}

.uc-blurb {
    color: #6c757d;
    margin-bottom: 16px;
}

.uc-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #664d03;
    background: #FFF2A5;
    border-radius: 999px;
    padding: 4px 12px;
    margin-bottom: 16px;
}

.uc-hint {
    font-size: 0.85rem;
    color: #868e96;
}