/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════
   MainLayout — Modern Glass Bento Navigation CSS
   ═══════════════════════════════════════════════════ */

/* Dashboard Cards */
.stat-card[b-hgheukd3gw] {
    background: white;
    border-radius: 1.5rem;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
}

.stat-card .stat-value[b-hgheukd3gw] {
    font-size: 2rem;
    font-weight: 700;
    color: #1c1917;
}

.stat-card .stat-label[b-hgheukd3gw] {
    color: #78716c;
    font-size: 0.875rem;
}

/* Page Cards */
.page-card[b-hgheukd3gw] {
    background: white;
    border-radius: 1.5rem;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.page-card:hover[b-hgheukd3gw] {
    transform: translateY(-2px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.08);
}

/* Content Cards */
.content-card[b-hgheukd3gw] {
    background: white;
    border-radius: 1.5rem;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* Status Badges */
.badge-scheduled[b-hgheukd3gw] {
    background-color: #fbbf24;
    color: #1c1917;
    border-radius: 9999px;
    padding: 0.125rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-published[b-hgheukd3gw] {
    background-color: #22c55e;
    border-radius: 9999px;
    padding: 0.125rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-draft[b-hgheukd3gw] {
    background-color: #a8a29e;
    border-radius: 9999px;
    padding: 0.125rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Buttons */
.btn-primary[b-hgheukd3gw] {
    background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%);
    border: none;
    border-radius: 1rem;
}

.btn-primary:hover[b-hgheukd3gw] {
    background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%);
}

/* ═══════════════════════════════════════════════════
   Floating Sidebar Navigation — Pill Active States
   ═══════════════════════════════════════════════════ */

[b-hgheukd3gw] .nav-link-item {
    position: relative;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0.75rem;
}

/* Remove old left-border indicator */
[b-hgheukd3gw] .nav-link-item::before {
    display: none;
}

/* Active state: soft pill with indigo glow */
[b-hgheukd3gw] .nav-link-item.active {
    background: rgba(129, 140, 248, 0.12);
    color: white !important;
    font-weight: 600;
}

[b-hgheukd3gw] .nav-link-item.active .nav-icon {
    color: #818cf8 !important;
    font-variation-settings: 'FILL' 1;
}

/* Hover state: subtle surface lift */
[b-hgheukd3gw] .nav-link-item:hover:not(.active) {
    background: rgba(255, 255, 255, 0.05);
}

/* Section Divider */
[b-hgheukd3gw] .nav-section-divider {
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0) 5%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0) 95%);
    margin: 0.5rem 0.75rem;
}
/* ═══════════════════════════════════════════════════
   Room for the bottom bar
   ═══════════════════════════════════════════════════

   The scroll container carried `pb-24`, and Tailwind does generate
   `.pb-24 { padding-bottom: 6rem }` — but the computed value on the element was
   16px, so something in the cascade was winning and the last controls on every
   long page sat underneath the bar. On AutoPilot that meant the save button and
   the "ask before posting" switch could not be reached at all: scrolled to the
   very end of the page, they were still behind the bar.

   Declared here instead, where it is scoped to this layout and does not depend on
   a utility class resolving. The bar measures 57px and the raised centre button
   overhangs it by about 28px, so the reservation is the sum plus the home-indicator
   inset on a notched phone.

   Not a round number for its own sake: it is 57 + 28 + a little air, and if the bar
   is ever redesigned this is the one place to change. */
main.cv-scroll[b-hgheukd3gw] {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 1024px) {
    /* No bottom bar on desktop; the sidebar carries navigation. */
    main.cv-scroll[b-hgheukd3gw] {
        padding-bottom: 1.5rem;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-t2x96z22uu],
.components-reconnect-repeated-attempt-visible[b-t2x96z22uu],
.components-reconnect-failed-visible[b-t2x96z22uu],
.components-pause-visible[b-t2x96z22uu],
.components-resume-failed-visible[b-t2x96z22uu],
.components-rejoining-animation[b-t2x96z22uu] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-t2x96z22uu],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-t2x96z22uu],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-t2x96z22uu],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-t2x96z22uu],
#components-reconnect-modal.components-reconnect-retrying[b-t2x96z22uu],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-t2x96z22uu],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-t2x96z22uu],
#components-reconnect-modal.components-reconnect-failed[b-t2x96z22uu],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-t2x96z22uu] {
    display: block;
}


#components-reconnect-modal[b-t2x96z22uu] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-t2x96z22uu 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-t2x96z22uu 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-t2x96z22uu 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-t2x96z22uu]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-t2x96z22uu 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-t2x96z22uu {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-t2x96z22uu {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-t2x96z22uu {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-t2x96z22uu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-t2x96z22uu] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-t2x96z22uu] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-t2x96z22uu] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-t2x96z22uu] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-t2x96z22uu] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-t2x96z22uu] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-t2x96z22uu 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-t2x96z22uu] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-t2x96z22uu {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}