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

.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 {
    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;
}