/**
 * Medical store portal — shared bottom tab bar (mobile) and left rail (desktop).
 * Used with #ms-portal-rail inside .ms-portal-rail-shell (login, onboarding, add inventory).
 */

.ms-portal-rail-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
}

.ms-portal-rail-main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.ms-portal-rail-main > .inv-app {
    flex: 1;
    min-height: 0;
}

/* ——— Shared rail (matches dashboard chrome) ——— */
.ms-portal-rail-shell .ms-rail {
    width: 292px;
    flex-shrink: 0;
    background: #071634;
    color: #fff;
    display: flex;
    flex-direction: column;
    box-shadow: -6px 0 24px rgba(30, 41, 59, 0.12);
    z-index: 40;
}

.ms-portal-rail-shell .ms-rail-nav {
    flex: 1;
    padding: 0.85rem 0.65rem 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: flex-start;
}
.ms-portal-rail-shell .ms-rail-inner {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.ms-portal-rail-shell .ms-rail-txt-short {
    display: none;
}

.ms-portal-rail-shell .ms-rail-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.78rem 0.95rem;
    border: none;
    background: transparent;
    color: #a8bad6;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    border-left: none;
    border-radius: 10px;
    touch-action: manipulation;
    box-sizing: border-box;
    font-family: inherit;
}

.ms-portal-rail-shell a.ms-rail-btn {
    text-decoration: none;
    color: #a8bad6;
}

.ms-portal-rail-shell a.ms-rail-btn:hover {
    color: #fff;
}

.ms-portal-rail-shell .ms-rail-btn:hover {
    background: rgba(148, 163, 184, 0.12);
    color: #fff;
}

.ms-portal-rail-shell .ms-rail-btn.is-active {
    background: linear-gradient(90deg, #4f46e5 0%, #5b50e6 100%);
    color: #fff;
    box-shadow: 0 10px 20px rgba(79, 70, 229, 0.25);
    font-weight: 700;
}

.ms-portal-rail-shell .ms-rail-section-title {
    margin: 0.15rem 0.85rem 0.25rem;
    font-size: 0.73rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-weight: 800;
    color: #6f84ab;
}
.ms-portal-rail-shell .ms-rail-btn-extra { display: flex; }
.ms-portal-rail-shell .ms-rail-btn-logout-mobile { display: none; color: #fb7185; }
.ms-portal-rail-shell .ms-rail-btn-logout-mobile:hover { color: #fb7185; background: rgba(251, 113, 133, 0.12); }
.ms-portal-rail-shell .ms-rail-actions-wrap {
    margin-top: auto;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
    padding: 0.55rem 0.65rem 0.85rem;
}
.ms-portal-rail-shell .ms-rail-logout-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.45rem;
    padding: 0.78rem 0.95rem;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: #fb7185;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    font-family: inherit;
}
.ms-portal-rail-shell .ms-rail-logout-btn:hover {
    background: rgba(251, 113, 133, 0.1);
}

.ms-portal-rail-shell .ms-rail-ico {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    opacity: 0.95;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ms-portal-rail-shell .ms-rail-ico svg {
    width: 100%;
    height: 100%;
    display: block;
    flex-shrink: 0;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
    vector-effect: non-scaling-stroke;
}

.ms-portal-rail-shell .ms-rail-ico svg path {
    fill: none;
}

.ms-portal-rail-shell .ms-rail-ico svg circle {
    fill: none;
}

.ms-portal-rail-shell .ms-rail-ico-sale circle {
    fill: currentColor;
    stroke: none;
}

.ms-portal-rail-shell .ms-rail-ico-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ms-portal-rail-shell .ms-avatar-tab {
    width: 26px;
    height: 26px;
    font-size: 0.72rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* Mobile: bottom tab bar */
@media (max-width: 900px) {
    .ms-portal-rail-shell .ms-rail {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        flex-direction: column;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.18);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        z-index: 220;
    }

    .ms-portal-rail-shell .ms-rail-nav {
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
        padding: 6px 4px 10px;
        gap: 2px;
    }

    .ms-portal-rail-shell .ms-rail-txt-full {
        display: none;
    }

    .ms-portal-rail-shell .ms-rail-txt-short {
        display: block;
        font-size: 0.62rem;
        font-weight: 700;
        text-align: center;
        line-height: 1.2;
    }

    .ms-portal-rail-shell .ms-rail-btn {
        flex: 1;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4px;
        min-width: 0;
        min-height: 56px;
        padding: 6px 2px;
        border-left: none;
        border-radius: 12px;
    }

    .ms-portal-rail-shell .ms-rail-btn.is-active {
        border-left: none;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    }
    .ms-portal-rail-shell .ms-rail-section-title { display: none; }
    .ms-portal-rail-shell .ms-rail-btn-extra { display: none; }
    .ms-portal-rail-shell .ms-rail-btn-logout-mobile { display: flex; }
    .ms-portal-rail-shell .ms-rail-actions-wrap { display: none; }

    .ms-portal-rail-shell .ms-rail-ico {
        width: clamp(22px, 6.5vw, 28px);
        height: clamp(22px, 6.5vw, 28px);
    }

    .ms-portal-rail-main {
        padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    }
}

/* Desktop: vertical rail on the left */
@media (min-width: 901px) {
    .ms-portal-rail-shell {
        flex-direction: row-reverse;
        align-items: stretch;
    }

    .ms-portal-rail-shell .ms-portal-rail-main {
        flex: 1;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ms-portal-rail-shell .ms-rail {
        position: relative;
        align-self: stretch;
        min-height: 100vh;
        min-height: 100dvh;
        box-shadow: 6px 0 24px rgba(30, 41, 59, 0.12);
    }

    .ms-portal-rail-shell .ms-rail-btn {
        border-left: none;
        border-right: none;
    }

    .ms-portal-rail-shell .ms-rail-btn.is-active {
        border-left: none;
        border-right: none;
    }
    .ms-portal-rail-shell .ms-rail-btn-extra { display: flex; }
    .ms-portal-rail-shell .ms-rail-actions-wrap { display: block; }

    .ms-portal-rail-shell .ms-portal-rail-main {
        padding-bottom: 0;
    }
}

/* Add-inventory sticky submit sits above the bottom tab bar */
@media (max-width: 900px) {
    .ms-portal-rail-shell .inv-sticky-actions {
        bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    }
}