/*
 * tour.css — Interactive Tour Module styles.
 * Uses exclusively --ap-* CSS custom properties mapped from Radzen --rz-* tokens.
 * No hardcoded colour values.
 */

/* ── Overlay ───────────────────────────────────────────────────── */

.ap-tour-overlay {
    position: fixed;
    inset: 0;
    background-color: var(--ap-tour-overlay-bg, rgba(0, 0, 0, 0.5));
    z-index: var(--ap-tour-z-overlay, 9000);
    pointer-events: none;
    display: none;
}

/* ── Spotlight cutout ──────────────────────────────────────────── */

.ap-tour-spotlight {
    position: absolute;
    border-radius: var(--ap-tour-spotlight-radius, var(--rz-border-radius, 4px));
    box-shadow: 0 0 0 9999px var(--ap-tour-overlay-bg, rgba(0, 0, 0, 0.5));
    z-index: var(--ap-tour-z-spotlight, 9001);
    pointer-events: none;
    display: none;
    transition: top 0.2s ease, left 0.2s ease, width 0.2s ease, height 0.2s ease;
}

/* ── Popover card ──────────────────────────────────────────────────
 * These selectors MUST match the markup rendered by TourPopover.razor
 * (.ap-tour-popover, __header, __counter, __body, __title, __content, __footer).
 *
 * They live in this GLOBAL sheet — served as _content/AppPlatform.Tour/css/tour.css
 * and linked directly by consumers — rather than only in the scoped
 * TourPopover.razor.css, because RCL CSS-isolation scoped bundles are NOT reliably
 * aggregated into a NuGet consumer's {App}.styles.css. The standalone tour subdomain
 * rendered the card completely unstyled (full-width static block, click-blocking
 * backdrop, invisible controls) because the only card rules here were the orphaned
 * .ap-tour-tooltip* names that no component renders. Keep these in lockstep with
 * TourPopover.razor.
 */

.ap-tour-popover {
    position: fixed;
    bottom: var(--ap-spacing-8, 2rem);
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 2rem);
    max-width: var(--ap-tour-tooltip-max-width, 420px);
    min-width: var(--ap-tour-tooltip-min-width, 280px);
    background-color: var(--ap-surface, var(--rz-base-background-color, #ffffff));
    color: var(--ap-text-primary, var(--rz-text-color, #333333));
    border: 1px solid var(--ap-border, var(--rz-border-color, rgba(127, 127, 127, 0.25)));
    border-radius: var(--ap-tour-tooltip-radius, var(--rz-border-radius, 8px));
    box-shadow: var(--ap-shadow-lg, var(--rz-shadow-3, 0 8px 30px rgba(0, 0, 0, 0.35)));
    padding: var(--ap-spacing-5, 1.25rem) var(--ap-spacing-6, 1.5rem);
    z-index: var(--ap-tour-z-tooltip, 9002);
    outline: none;
}

.ap-tour-popover__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ap-spacing-2, 0.5rem);
    margin-bottom: var(--ap-spacing-2, 0.5rem);
}

.ap-tour-popover__counter {
    font-size: var(--ap-font-size-xs, 0.75rem);
    color: var(--ap-text-muted, var(--rz-text-secondary-color, #6b7280));
}

.ap-tour-popover__body {
    /* min-width:0 keeps long unbroken words from overflowing the flex card */
    min-width: 0;
}

.ap-tour-popover__title {
    font-size: var(--ap-font-size-lg, 1.125rem);
    font-weight: var(--ap-font-weight-semibold, 600);
    color: var(--ap-text-primary, var(--rz-text-color, #111827));
    margin: 0 0 var(--ap-spacing-2, 0.5rem) 0;
}

.ap-tour-popover__content {
    font-size: var(--ap-font-size-base, 0.95rem);
    line-height: 1.5;
    color: var(--ap-text-secondary, var(--rz-text-color, #4b5563));
    margin: 0 0 var(--ap-spacing-4, 1rem) 0;
}

.ap-tour-popover__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ap-spacing-2, 0.5rem);
}

/* Radzen controls inside the popover must stay legible regardless of how complete
 * the host app's Radzen theme is. The standalone tour loaded only Radzen's
 * material-base.css, so ButtonStyle.Light resolved to a light (#eee) surface under
 * the dark shell's light text → invisible buttons and an invisible close glyph.
 * Theme-agnostic neutral greys keep contrast on both light and dark shells. */
.ap-tour-popover .rz-button.rz-primary {
    background-color: var(--ap-color-primary, var(--rz-primary, #1976d2));
    color: var(--ap-color-on-primary, #ffffff);
}

.ap-tour-popover .rz-button.rz-light {
    background-color: transparent;
    color: var(--ap-text-primary, var(--rz-text-color, currentColor));
    border: 1px solid var(--ap-border, rgba(127, 127, 127, 0.4));
}

.ap-tour-popover .rz-button.rz-light:hover {
    background-color: rgba(127, 127, 127, 0.12);
}

.ap-tour-popover .rz-button .rzi {
    color: inherit;
}

/* ── Nudge prompt ──────────────────────────────────────────────── */

.ap-tour-nudge {
    position: fixed;
    bottom: var(--ap-spacing-6, 1.5rem);
    right: var(--ap-spacing-6, 1.5rem);
    background-color: var(--ap-surface, var(--rz-base-background-color, #ffffff));
    color: var(--ap-text-primary, var(--rz-text-color, #333333));
    border: 1px solid var(--ap-border, var(--rz-border-color, #e0e0e0));
    border-radius: var(--ap-tour-tooltip-radius, var(--rz-border-radius, 4px));
    box-shadow: var(--ap-shadow-lg, var(--rz-shadow-3, 0 8px 24px rgba(0, 0, 0, 0.15)));
    padding: var(--ap-spacing-4, 1rem);
    max-width: var(--ap-tour-nudge-max-width, 280px);
    z-index: var(--ap-tour-z-nudge, 8999);
}

.ap-tour-nudge__title {
    font-size: var(--ap-font-size-sm, 0.875rem);
    font-weight: var(--ap-font-weight-semibold, 600);
    margin: 0 0 var(--ap-spacing-1, 0.25rem) 0;
}

.ap-tour-nudge__description {
    font-size: var(--ap-font-size-sm, 0.875rem);
    color: var(--ap-text-secondary, var(--rz-secondary-color, #666666));
    margin: 0 0 var(--ap-spacing-3, 0.75rem) 0;
}

.ap-tour-nudge__actions {
    display: flex;
    gap: var(--ap-spacing-2, 0.5rem);
    justify-content: flex-end;
}