/*
 * Phase C31: Guided Tours overlay styles.
 *
 * All values use --closina-* CSS tokens (Cat 22).
 * Z-index uses var(--closina-z-modal) so the overlay sits above the app shell
 * but below tooltips (--closina-z-tooltip).
 * Dark mode is handled automatically via token values under [data-theme="dark"].
 */

/* ========================================================================
   Tour Overlay — fixed full-viewport container
   ======================================================================== */

/* U57: pointer-events: none on the overlay + backdrop so they don't
   intercept clicks on underlying page elements. Only .tour-tooltip-container
   (the interactive island below) opts back in via pointer-events: auto.
   Background dimming is purely visual; the .tour-highlight-active outline
   ring on the target element provides focus.

   T53 Sub-Phase H audit Finding 1 (2026-04-30): the audit observed that the
   sidebar mini-rail at md+ remains clickable mid-tour — a user can navigate
   away by clicking a sidebar item. This is **intentional per U57's
   pointer-events: none design** — the overlay is a visual focal aid, not a
   modal trap. The tour engine does NOT prevent navigation during a tour;
   AppTourProgress reflects InProgress until the user finishes/skips OR the
   next FirstLogin trigger fires. If a future phase wants the tour to act
   as a modal trap (block sidebar/topbar clicks until the user hits Skip
   tour), the change is to flip pointer-events: none → auto on the
   .tour-backdrop only (NOT the overlay container, which would also block
   the highlighted target's interactivity). That's a deliberate UX trade-off
   that should ship as its own phase, not as part of T53. */
.tour-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: var(--closina-z-maximum);
    pointer-events: none;
}

/* Semi-transparent backdrop — darker than modal to focus user attention */
.tour-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);
    pointer-events: none;
}

[data-theme="dark"] .tour-backdrop {
    background: rgba(0, 0, 0, 0.7);
}

/* ========================================================================
   Tooltip container — positioned absolutely within the overlay
   ======================================================================== */

.tour-tooltip-container {
    position: absolute;
    z-index: calc(var(--closina-z-maximum) + 10);
    pointer-events: auto;
    max-width: 400px;
    width: calc(100vw - 32px);
}

/* ========================================================================
   Tooltip card
   ======================================================================== */

/* T53 Sub-Phase H follow-up (2026-04-29): inverted-dark bubble per SaaS-tour
   convention (Linear / GitHub / Slack onboarding patterns). Reverses the
   colored-ring/accent-strip treatment from the first T53-H pass — that was
   visually competing with .tour-highlight-active's primary-colored ring on
   the highlighted target ("two greens stacked"). Now the bubble uses the
   color INVERSION (dark in light mode, light in dark mode) so it stands out
   purely via lightness contrast against both the page surface and the dimmed
   backdrop. Brand color stays reserved for the Primary CTA button (Next/Finish).
   All values use --closina-* tokens (Cat 22). Stacking-context contract pinned
   by TourTooltipStackingContextConvention_Tests (U57 Sub-Phase C) unchanged.

   T53 Sub-Phase H second follow-up (2026-04-30): the bubble renders as
   <div class="mud-paper mud-elevation-0 tour-tooltip">. MudBlazor's dark-mode
   override `[data-theme="dark"] .mud-paper.mud-elevation-0 { background-color:
   var(--closina-surface) }` (specificity 0,2,1) beats `.tour-tooltip` (0,1,0)
   in dark mode, defeating the inversion. Light mode has no analogous override
   so .tour-tooltip wins there. Fix: chain the .tour-tooltip rules with
   `.mud-paper.mud-elevation-0` to bump specificity to (0,3,0), which beats
   (0,2,1) in both modes without needing `!important` (cleaner Cat 22). The
   token swap auto-inverts on dark-mode toggle — the rule itself doesn't change.
   Pinned by TourBubbleInversionConvention_Tests. */
.tour-tooltip.mud-paper.mud-elevation-0 {
    background: var(--closina-text-primary);
    color: var(--closina-surface);
    border-radius: var(--closina-radius-lg);
    box-shadow: var(--closina-shadow-lg);
    padding: 20px;
    pointer-events: auto;
}

/* Children inherit the inverted color cascade. Higher specificity overrides
   the standalone .tour-tooltip-* rules below, which still serve any future
   non-inverted consumer (e.g., a forced-light tooltip). */
.tour-tooltip .tour-tooltip-title,
.tour-tooltip .tour-tooltip-content,
.tour-tooltip .tour-tooltip-counter {
    color: inherit;
}

/* Soften secondary/muted text within the inverted bubble via opacity rather
   than a separate inverted-token (opacity is not a color per Cat 22). */
.tour-tooltip .tour-tooltip-content { opacity: 0.85; }
.tour-tooltip .tour-tooltip-counter { opacity: 0.65; }

/* Cancel-tier buttons (Back / Skip tour) inherit the bubble's foreground —
   without this override, MudButton.Variant=Text falls back to text-primary
   (dark) and disappears against the inverted dark bubble. The Primary tier
   button (Next / Finish) uses Variant=Filled + Color=Primary which stands
   out on either surface. */
.tour-tooltip .mud-button-text {
    color: inherit !important;
}

.tour-tooltip-title {
    margin-bottom: 8px;
    font-weight: var(--closina-font-weight-semibold, 600);
}

.tour-tooltip-content {
    margin-bottom: 16px;
    line-height: var(--closina-leading-relaxed, 1.6);
}

.tour-tooltip-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tour-tooltip-counter {
    white-space: nowrap;
}

/* ========================================================================
   Target element highlight ring
   ======================================================================== */

.tour-highlight-active {
    position: relative;
    z-index: calc(var(--closina-z-maximum) + 2) !important;
    box-shadow: 0 0 0 4px var(--closina-primary),
                0 0 0 8px var(--closina-primary-light) !important;
    border-radius: var(--closina-radius-md);
    transition: box-shadow var(--closina-transition);
    pointer-events: none !important;
}

[data-theme="dark"] .tour-highlight-active {
    box-shadow: 0 0 0 4px var(--closina-primary),
                0 0 0 8px var(--closina-primary-light);
}

/* ========================================================================
   Responsive adjustments
   ======================================================================== */

@media (max-width: 599px) {
    .tour-tooltip-container {
        /* On mobile, anchor tooltip at the bottom of the viewport.

           T53 Sub-Phase H audit Finding 2 (2026-04-30): the bubble overlapped
           the fixed `.closina-mobile-bottom-nav` (height 56px + safe-area-inset
           on iOS) at xs/sm. Bumped `bottom` to clear the bottom-nav so the 4
           bottom-nav destinations (Home/Members/Monitoring/Billing/More) stay
           visible during a tour. Without this clearance, mobile users couldn't
           see their primary navigation surface for the duration of the tour
           overlay. */
        position: fixed !important;
        bottom: calc(var(--closina-layout-bottom-nav-height, 56px) + 16px + env(safe-area-inset-bottom, 0px)) !important;
        left: 16px !important;
        right: 16px !important;
        top: auto !important;
        transform: none !important;
        max-width: none;
        width: auto;
    }

    .tour-tooltip {
        padding: 16px;
    }

    .tour-tooltip-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .tour-tooltip-counter {
        text-align: center;
    }
}

/* Foldable device support (Samsung Fold folded ~280-360px) */
@media (max-width: 399px) {
    .tour-tooltip-container {
        /* Tighter side margins for narrow foldable widths.
           Bottom-nav clearance unchanged from xs rule above (still applies). */
        left: 8px !important;
        right: 8px !important;
        bottom: calc(var(--closina-layout-bottom-nav-height, 56px) + 8px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .tour-tooltip {
        padding: 12px;
    }
}