/* ============================================================
   Carpyx Lab Reload — Member Rail (LEFT)
   FILE: public/assets/css/member/member-rail.css
   Responsibility: style ONLY for left rail (no other UI)
   ============================================================ */

.member-rail {
    position: fixed;
    top: calc(var(--carpyx-header-height) + 12px);
    left: 12px;

    display: flex;
    flex-direction: column;
    gap: 8px;

    z-index: 2200;
}



.member-rail-btn {
    width: 48px;
    height: 48px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);

    background: rgba(40, 40, 40, 0.72);
    color: #f5f7fa;

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    font-size: 20px;
    line-height: 1;
    cursor: pointer;

    position: relative;
    /* tooltips */
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.member-rail-btn:hover {
    background: rgba(55, 55, 55, 0.8);
}

/* Secondary group */
.member-rail-secondary {
    display: none;
    /* shown only if connected (JS adds .is-authenticated) */
    flex-direction: column;
    gap: 8px;
}

.member-rail.is-authenticated .member-rail-secondary {
    display: flex;
}

/* Connection indicator (DECISION-018) */
.member-rail.is-authenticated .member-rail-btn[data-action="member-entry"] {
    border-color: rgba(95, 209, 255, 0.55);
}

.member-rail.is-authenticated .member-rail-btn[data-action="member-entry"] i {
    color: #5fd1ff;
}

/* Tooltip (for left rail => show to the RIGHT) */
.member-rail-btn[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    top: 50%;
    left: 110%;
    transform: translateY(-50%);

    background: rgba(20, 20, 20, 0.85);
    color: #fff;
    font-size: 12px;
    line-height: 1.35;

    padding: 8px 10px;
    border-radius: 10px;
    white-space: nowrap;

    border: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    box-shadow: 0 10px 25px rgba(0, 0, 0, .45);

    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
    z-index: 3000;
}

.member-rail-btn:hover::after {
    opacity: 1;
}

/* Mobile sizing alignment */
@media (max-width: 768px) {
    .member-rail-btn {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }
}

/* ============================================================
   UI-HIDDEN (choice #1 = B)
   - Hide ALL UI (carto + member)
   - Only #carpyx-ui-toggle stays visible (already handled in ui-toggle.css)
   ============================================================ */

body.ui-hidden #member-rail {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* Secondary actions are HIDDEN by default */
.member-rail-secondary {
    display: none;
}

/* Shown ONLY when authenticated */
.member-rail.is-authenticated .member-rail-secondary {
    display: flex;
}