/*
 * mobile-components.css — Phase 2 mobile-only components for the Vance Medical theme.
 *
 * Enqueued AFTER mobile-base.css. Every component here is:
 *   (a) gated behind @media (max-width: 767.98px) so it is invisible on desktop, and
 *   (b) only rendered server-side when its Customizer toggle is ON (defaults OFF).
 *
 * Companion: MOBILE-PLAN.md → "Phase 2 — Mobile-only components".
 *
 * Section index:
 *   2.1  Mobile bottom navigation bar + "More" sheet
 *   2.2  Sticky CTA bar
 *   2.3  Swipeable category-card carousel (dot indicators)
 *   2.4  Dashboard sidebar backdrop
 */

/* ===========================================================================
 * 2.1  MOBILE BOTTOM NAVIGATION
 * ======================================================================== */

/* Hidden by default everywhere; only revealed on phones below. The server only
 * prints the markup when the Customizer toggle is on, so this is a second guard. */
.vance-bottom-nav {
    display: none;
}

@media (max-width: 767.98px) {
    .vance-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        margin: 0;
        padding: 0;
        padding-bottom: env(safe-area-inset-bottom);
        background: #ffffff;
        border-top: 1px solid #e2e8f0;
        box-shadow: 0 -2px 12px rgba(15, 23, 42, 0.06);
    }

    .vbn-tab {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: 56px;
        padding: 8px 2px;
        background: none;
        border: none;
        cursor: pointer;
        text-decoration: none;
        color: #64748b;
        font-family: inherit;
        font-size: 11px;
        line-height: 1.1;
        -webkit-tap-highlight-color: transparent;
        transition: color 0.15s ease;
    }

    .vbn-icon {
        width: 24px;
        height: 24px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /* Icons that read better filled (dashboard squares) — override stroke. */
    .vbn-tab .vbn-icon rect {
        fill: currentColor;
        stroke: none;
    }

    .vbn-label {
        font-weight: 600;
        letter-spacing: 0.01em;
    }

    .vbn-tab.is-active {
        color: var(--primary-color, #008080);
    }

    /* Only show the lift/colour feedback on real pointers; on touch use :active. */
    @media (hover: hover) {
        .vbn-tab:hover {
            color: var(--primary-color, #008080);
        }
    }
    .vbn-tab:active {
        color: var(--primary-color, #008080);
    }

    /* Reserve space so the fixed bar never covers page content. The class is only
     * added (server-side) when the bar is actually rendering. */
    body.has-vance-bottom-nav:not(.dashboard-body) {
        padding-bottom: calc(56px + env(safe-area-inset-bottom));
    }
}

/* --- "More" bottom sheet ---------------------------------------------------- */

.vbn-sheet-backdrop,
.vbn-sheet {
    display: none;
}

@media (max-width: 767.98px) {
    .vbn-sheet-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1001;
        background: rgba(15, 23, 42, 0.45);
        opacity: 0;
        transition: opacity 0.2s ease;
        pointer-events: none;
    }
    .vbn-sheet-backdrop.is-open {
        opacity: 1;
        pointer-events: auto;
    }

    .vbn-sheet {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1002;
        background: #ffffff;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 30px rgba(15, 23, 42, 0.2);
        padding: 8px 0 calc(16px + env(safe-area-inset-bottom));
        transform: translateY(100%);
        transition: transform 0.25s ease;
    }
    .vbn-sheet.is-open {
        transform: translateY(0);
    }

    .vbn-sheet-handle {
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: #cbd5e1;
        margin: 8px auto 12px;
    }

    .vbn-sheet-links {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .vbn-sheet-links li + li {
        border-top: 1px solid #f1f5f9;
    }
    .vbn-sheet-links a {
        display: block;
        padding: 16px 24px;
        min-height: 44px;
        font-size: 16px;
        font-weight: 600;
        color: #0f172a;
        text-decoration: none;
    }
    .vbn-sheet-links a:active {
        background: #f8fafc;
        color: var(--primary-color, #008080);
    }
}

/* Respect reduced-motion: skip the slide/fade transitions. */
@media (prefers-reduced-motion: reduce) {
    .vbn-sheet,
    .vbn-sheet-backdrop {
        transition: none !important;
    }
}

/* ===========================================================================
 * 2.2  STICKY CTA BAR
 * ======================================================================== */

/* Hidden by default everywhere; only on phones, and only after JS reveals it. */
.vance-sticky-cta {
    display: none;
}

@media (max-width: 767.98px) {
    .vance-sticky-cta {
        display: flex;
        align-items: center;
        gap: 12px;
        position: fixed;
        left: 8px;
        right: 8px;
        bottom: 8px;
        z-index: 999;
        padding: 12px 12px 12px 16px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
        background: #0A1929;
        color: #ffffff;
        border-radius: 12px;
        box-shadow: 0 6px 24px rgba(15, 23, 42, 0.28);
        transform: translateY( calc(100% + 16px) );
        transition: transform 0.28s ease;
    }
    .vance-sticky-cta.is-visible {
        transform: translateY(0);
    }

    /* When the bottom nav is also enabled, lift the CTA so it stacks just above
     * the 56px nav bar instead of overlapping it. */
    body.has-vance-bottom-nav .vance-sticky-cta {
        bottom: calc(56px + 8px + env(safe-area-inset-bottom));
    }
    /* Hidden (pre-reveal) offset also accounts for the nav so it slides cleanly. */
    body.has-vance-bottom-nav .vance-sticky-cta:not(.is-visible) {
        transform: translateY( calc(100% + 64px) );
    }

    .vance-sticky-cta .vsc-text {
        flex: 1 1 auto;
        margin: 0;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.3;
        color: #ffffff;
    }

    .vance-sticky-cta .vsc-btn {
        flex: 0 0 auto;
        white-space: nowrap;
        min-height: 40px;
        padding: 10px 16px;
        font-size: 14px;
    }

    .vance-sticky-cta .vsc-dismiss {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        padding: 0;
        background: transparent;
        border: none;
        color: rgba(255, 255, 255, 0.65);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .vance-sticky-cta .vsc-dismiss:active {
        color: #ffffff;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vance-sticky-cta {
        transition: none !important;
    }
}

/* ===========================================================================
 * 2.3  SWIPEABLE CATEGORY-CARD CAROUSEL
 * The grid → flex/scroll-snap conversion is done in JS (it must override the
 * existing inline grid styles). Here we only style the dot indicators and hide
 * the native scrollbar for a cleaner look. All scoped to phones.
 * ======================================================================== */

@media (max-width: 767.98px) {
    /* Hide the scrollbar on the enhanced row (cosmetic; scrolling still works). */
    .vsw-grid {
        scrollbar-width: none;            /* Firefox */
        -ms-overflow-style: none;          /* old Edge */
        padding-bottom: 4px;
    }
    .vsw-grid::-webkit-scrollbar {
        display: none;                     /* WebKit */
    }

    .vsw-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 14px;
    }
    .vsw-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #cbd5e1;
        transition: background-color 0.2s ease, transform 0.2s ease;
    }
    .vsw-dot.is-active {
        background: var(--primary-color, #008080);
        transform: scale(1.35);
    }
}

/* Dots are a mobile-only affordance — never show them on desktop. */
.vsw-dots {
    display: none;
}
@media (max-width: 767.98px) {
    body .vsw-dots { display: flex; }
}

/* ===========================================================================
 * 2.4  DASHBOARD SIDEBAR BACKDROP
 * Only meaningful on phones, where .dash-sidebar slides over content. On
 * desktop the sidebar is a fixed rail and the backdrop must never appear.
 * ======================================================================== */

.dash-sidebar-backdrop {
    display: none;
}

@media (max-width: 767.98px) {
    .dash-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 998;                       /* just under .dash-sidebar (z-index:999) */
        background: rgba(15, 23, 42, 0.45);
        opacity: 0;
        transition: opacity 0.25s ease;
        pointer-events: none;
    }
    .dash-sidebar-backdrop.is-open {
        opacity: 1;
        pointer-events: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dash-sidebar-backdrop {
        transition: none !important;
    }
}

/* --- Pull-to-refresh indicator (Phase 3.2) --- */
.dash-ptr-indicator {
    display: none;
}
@media (max-width: 767.98px) {
    .dash-ptr-indicator {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 48px;
        z-index: 1003;
        transform: translateY(-48px);
        pointer-events: none;
    }
    .dash-ptr-spinner {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        border: 2px solid #cbd5e1;
        border-top-color: var(--primary-color, #008080);
        opacity: 0.6;
        transition: opacity 0.15s ease;
    }
    .dash-ptr-indicator.is-armed .dash-ptr-spinner {
        opacity: 1;
    }
    .dash-ptr-indicator.is-refreshing .dash-ptr-spinner {
        animation: vance-ptr-spin 0.7s linear infinite;
    }
}
@keyframes vance-ptr-spin { to { transform: rotate(360deg); } }

/* --- Collapsible dashboard cards (Phase 2.4 accordion) --- */
@media (max-width: 767.98px) {
    .d-card-accordion .d-card-header {
        cursor: pointer;
        position: relative;
        margin-bottom: 0;
    }
    /* Chevron affordance on the header. */
    .d-card-accordion .d-card-header::after {
        content: '';
        width: 9px;
        height: 9px;
        border-right: 2px solid #94a3b8;
        border-bottom: 2px solid #94a3b8;
        transform: rotate(45deg);
        transition: transform 0.2s ease;
        margin-left: 12px;
        flex: 0 0 auto;
    }
    .d-card-accordion.is-collapsed .d-card-header::after {
        transform: rotate(-45deg);
    }
    /* Collapse everything after the header. */
    .d-card-accordion.is-collapsed .d-card-header ~ * {
        display: none !important;
    }
    .d-card-accordion:not(.is-collapsed) .d-card-header {
        margin-bottom: 20px;
    }
}

/* --- Skeleton loader utility (Phase 3.4) ---
 * Add class "vance-skeleton" to a placeholder block while AJAX content loads,
 * then remove it (or replace the node) when the real content arrives. */
.vance-skeleton {
    position: relative;
    overflow: hidden;
    background: #eef2f7;
    border-radius: 4px;
    min-height: 14px;
    color: transparent !important;
}
.vance-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    animation: vance-skeleton-shimmer 1.3s infinite;
}
@keyframes vance-skeleton-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
    .vance-skeleton::after { animation: none; }
    .dash-ptr-indicator.is-refreshing .dash-ptr-spinner { animation: none; }
}