/* =====================================================================
   VyaWizard — Interactive Tutorial Overlay
   Glassmorphism card + 4-panel spotlight + progress bar
   ===================================================================== */

/* ----- Overlay panels (4 divs that black out everything except target) */
.vya-wizard-overlay {
    position: fixed;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9998;
    pointer-events: all;
    transition: none;
    animation: vya-overlay-appear 300ms ease both;
}

@keyframes vya-overlay-appear {
    from { background: rgba(0, 0, 0, 0); }
    to   { background: rgba(0, 0, 0, 0.55); }
}

/* Overlay exit */
@keyframes vya-overlay-vanish {
    to { opacity: 0; }
}

.vya-wizard-overlay.vya-exiting {
    animation: vya-overlay-vanish 360ms ease forwards;
}

/* ----- Spotlight pulse ring around the highlighted element ----------- */
.vya-wizard-spotlight-ring {
    position: fixed;
    z-index: 10000;
    pointer-events: none;
    border-radius: inherit;
    box-shadow:
        0 0 0 3px var(--tenant-btn-primary, #6366f1),
        0 0 0 6px color-mix(in srgb, var(--tenant-btn-primary, #6366f1) 30%, transparent);
    animation:
        vya-wizard-pulse 1.6s ease-in-out infinite,
        vya-ring-appear  320ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes vya-wizard-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 3px var(--tenant-btn-primary, #6366f1),
            0 0 0 6px color-mix(in srgb, var(--tenant-btn-primary, #6366f1) 30%, transparent);
    }
    50% {
        box-shadow:
            0 0 0 3px var(--tenant-btn-primary, #6366f1),
            0 0 0 12px color-mix(in srgb, var(--tenant-btn-primary, #6366f1) 12%, transparent);
    }
}

@keyframes vya-ring-appear {
    from { opacity: 0; transform: scale(1.3); }
    to   { opacity: 1; transform: scale(1); }
}

/* Ring exit */
@keyframes vya-ring-vanish {
    to { opacity: 0; transform: scale(0.75); }
}

.vya-wizard-spotlight-ring.vya-ring-exiting {
    animation: vya-ring-vanish 300ms ease forwards;
}

/* Ring smooth slide between steps */
.vya-wizard-spotlight-ring.vya-moving {
    transition:
        top    280ms cubic-bezier(0.25, 1, 0.5, 1),
        left   280ms cubic-bezier(0.25, 1, 0.5, 1),
        width  280ms cubic-bezier(0.25, 1, 0.5, 1),
        height 280ms cubic-bezier(0.25, 1, 0.5, 1);
}

/* ----- Wizard card --------------------------------------------------- */
.vya-wizard-card {
    position: fixed;
    z-index: 10001;
    width: 320px;
    max-width: calc(100vw - 2rem);
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 1rem;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.18),
        0 1px 0 rgba(255, 255, 255, 0.6) inset;
    padding: 1.25rem 1.25rem 1rem;
    animation: vya-wizard-card-in 240ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
    pointer-events: all;
}

html.dark .vya-wizard-card {
    background: rgba(15, 23, 42, 0.82);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.45),
        0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

@keyframes vya-wizard-card-in {
    from { opacity: 0; transform: scale(0.90) translateY(10px); }
    to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

/* Card smooth slide between steps */
.vya-wizard-card.vya-moving {
    transition:
        top  280ms cubic-bezier(0.25, 1, 0.5, 1),
        left 280ms cubic-bezier(0.25, 1, 0.5, 1);
}

/* ----- Content wrapper (crossfade between steps) --------------------- */
@keyframes vya-content-step-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-6px); }
}

@keyframes vya-content-step-in {
    from { opacity: 0; transform: translateY(7px); }
    to   { opacity: 1; transform: translateY(0); }
}

.vya-wizard-content.vya-out {
    animation: vya-content-step-out 110ms ease forwards;
    pointer-events: none;
}

.vya-wizard-content.vya-in {
    animation: vya-content-step-in 180ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ----- Card header --------------------------------------------------- */
.vya-wizard-header {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    margin-bottom: 0.625rem;
}

.vya-wizard-icon {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: var(--tenant-btn-primary, #6366f1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.875rem;
}

.vya-wizard-title {
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
    color: #111827;
    margin: 0;
}

html.dark .vya-wizard-title {
    color: #f1f5f9;
}

.vya-wizard-step-badge {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #6b7280;
    background: rgba(107, 114, 128, 0.12);
    border-radius: 9999px;
    padding: 0.125rem 0.5rem;
    white-space: nowrap;
}

html.dark .vya-wizard-step-badge {
    color: #9ca3af;
    background: rgba(148, 163, 184, 0.12);
}

.vya-wizard-close {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    border: 0;
    border-radius: 9999px;
    background: rgba(107, 114, 128, 0.16);
    color: #4b5563;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

.vya-wizard-close:hover {
    background: rgba(107, 114, 128, 0.28);
    color: #111827;
}

html.dark .vya-wizard-close {
    background: rgba(148, 163, 184, 0.18);
    color: #cbd5e1;
}

html.dark .vya-wizard-close:hover {
    background: rgba(148, 163, 184, 0.32);
    color: #f8fafc;
}

/* ----- Body text ----------------------------------------------------- */
.vya-wizard-body {
    font-size: 0.8125rem;
    line-height: 1.6;
    color: #374151;
    margin-bottom: 0.875rem;
}

html.dark .vya-wizard-body {
    color: #cbd5e1;
}

/* ----- Progress bar -------------------------------------------------- */
.vya-wizard-progress {
    height: 4px;
    background: rgba(107, 114, 128, 0.15);
    border-radius: 9999px;
    overflow: hidden;
    margin-bottom: 0.875rem;
}

.vya-wizard-progress-fill {
    height: 100%;
    border-radius: 9999px;
    background: var(--tenant-btn-primary, #6366f1);
    transition: width 300ms ease;
}

/* ----- Footer buttons ----------------------------------------------- */
.vya-wizard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.vya-wizard-nav-btns {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.vya-wizard-back {
    display: inline-flex;
    align-items: center;
    padding: 0.4375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #6b7280;
    background: transparent;
    border: 1.5px solid #d1d5db;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
    white-space: nowrap;
}

.vya-wizard-back:hover:not(:disabled) {
    background: #f3f4f6;
    border-color: #9ca3af;
    color: #374151;
}

.vya-wizard-back:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

html.dark .vya-wizard-back {
    border-color: #475569;
    color: #94a3b8;
}

html.dark .vya-wizard-back:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.07);
    border-color: #64748b;
    color: #cbd5e1;
}

.vya-wizard-skip {
    font-size: 0.75rem;
    color: #9ca3af;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem 0;
    transition: color 120ms ease;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.vya-wizard-skip:hover { color: #6b7280; }

html.dark .vya-wizard-skip { color: #64748b; }
html.dark .vya-wizard-skip:hover { color: #94a3b8; }

.vya-wizard-next {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4375rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #fff;
    background: var(--tenant-btn-primary, #6366f1);
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: filter 120ms ease, transform 80ms ease;
    white-space: nowrap;
}

.vya-wizard-next:hover  { filter: brightness(1.1); }
.vya-wizard-next:active { transform: scale(0.97); }

.vya-wizard-next:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: none;
    transform: none;
}

/* Waiting-for-input state: shimmer on button */
.vya-wizard-next.vya-waiting {
    background: linear-gradient(
        90deg,
        var(--tenant-btn-primary, #6366f1) 0%,
        color-mix(in srgb, var(--tenant-btn-primary, #6366f1) 70%, white) 50%,
        var(--tenant-btn-primary, #6366f1) 100%
    );
    background-size: 200% 100%;
    animation: vya-wizard-shimmer 1.6s linear infinite;
}

@keyframes vya-wizard-shimmer {
    from { background-position: 200% center; }
    to   { background-position: -200% center; }
}

/* ----- "Fill this field" hint label ---------------------------------- */
.vya-wizard-hint {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--tenant-btn-primary, #6366f1);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.5rem;
}

/* ----- Caret pointer (arrow pointing toward highlighted element) ----- */
.vya-wizard-card::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: inherit;
    border: inherit;
    border-right: none;
    border-bottom: none;
    border-radius: 2px 0 0 0;
}

.vya-wizard-card[data-arrow="top"]::before {
    top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg);
}
.vya-wizard-card[data-arrow="bottom"]::before {
    bottom: -6px; left: 50%; transform: translateX(-50%) rotate(225deg);
}
.vya-wizard-card[data-arrow="left"]::before {
    left: -6px; top: 1.5rem; transform: rotate(-45deg);
}
.vya-wizard-card[data-arrow="right"]::before {
    right: -6px; top: 1.5rem; transform: rotate(135deg);
}
.vya-wizard-card[data-arrow="none"]::before {
    display: none;
}

/* ----- Finish/skip animation ---------------------------------------- */
@keyframes vya-wizard-finish {
    0%   { opacity: 1; transform: scale(1); }
    60%  { opacity: 1; transform: scale(1.05); }
    100% { opacity: 0; transform: scale(0.85); }
}

.vya-wizard-card.vya-finishing {
    animation: vya-wizard-finish 380ms ease forwards;
}

/* ----- Scrolled-into-view helper ------------------------------------ */
.vya-wizard-scroll-target {
    scroll-margin-top: 120px;
    scroll-margin-bottom: 80px;
}

/* ----- Tour complete modal ------------------------------------------ */
#vya-tour-complete-modal {
    transition: background 350ms ease;
    background: rgba(0, 0, 0, 0);
}

#vya-tour-complete-modal.vya-complete-visible {
    background: rgba(0, 0, 0, 0.55);
}

.dark #vya-tour-complete-modal.vya-complete-visible {
    background: rgba(2, 6, 23, 0.82);
}

#vya-tour-complete-modal.vya-complete-closing {
    background: rgba(0, 0, 0, 0);
}

.vya-complete-card {
    transform: scale(0.85);
    opacity: 0;
    transition:
        transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity   350ms ease;
}

#vya-tour-complete-modal.vya-complete-visible .vya-complete-card {
    transform: scale(1);
    opacity: 1;
}

#vya-tour-complete-modal.vya-complete-closing .vya-complete-card {
    transform: scale(0.85);
    opacity: 0;
}

@keyframes vya-confetti-bounce {
    0%, 100% { transform: rotate(-8deg) scale(1);   }
    50%       { transform: rotate( 8deg) scale(1.15); }
}

.vya-complete-icon {
    display: inline-block;
    animation: vya-confetti-bounce 1.8s ease-in-out infinite;
}

@keyframes vya-spin {
    to { transform: rotate(360deg); }
}

/* ----- Active sidebar nav indicator (above overlay, no pointer events) ----- */
.vya-nav-ring {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    border-radius: 6px;
    box-shadow:
        0 0 0 2px var(--tenant-btn-primary, #6366f1),
        0 0 0 5px color-mix(in srgb, var(--tenant-btn-primary, #6366f1) 28%, transparent);
    animation:
        vya-nav-pulse  1.6s ease-in-out infinite,
        vya-ring-appear 320ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes vya-nav-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 2px var(--tenant-btn-primary, #6366f1),
            0 0 0 5px color-mix(in srgb, var(--tenant-btn-primary, #6366f1) 28%, transparent);
    }
    50% {
        box-shadow:
            0 0 0 2px var(--tenant-btn-primary, #6366f1),
            0 0 0 9px color-mix(in srgb, var(--tenant-btn-primary, #6366f1) 10%, transparent);
    }
}

/* ----- Forced-hover: replicates glass-panel :hover while spotlighted ------ */
/* Uses explicit specificity (two classes) to override the zero-specificity    */
/* :where() rules in glass-global.css, including when the user hovers.         */

#content-wrapper.app-shell-glass .glass-panel.vya-forced-hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.1);
}

.dark #content-wrapper.app-shell-glass .glass-panel.vya-forced-hover {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* Icon scale+rotate — only when the spotlighted element itself is a glass-panel card */
.glass-panel.vya-forced-hover .dashboard-feature-icon {
    transform: scale(1.1) rotate(3deg);
}

/* h2 text color — only when the spotlighted element itself is a glass-panel card.
   No-tenant: uses icon foreground color (-500 light / -400 dark).
   Styled tenant: [data-vya-tenant] override applies tenant text color. */

/* Light mode — matches icon text-{color}-500 */
.glass-panel.vya-forced-hover .group-hover\:text-blue-600   { color: rgb(59, 130, 246); }
.glass-panel.vya-forced-hover .group-hover\:text-yellow-600 { color: rgb(234, 179, 8); }
.glass-panel.vya-forced-hover .group-hover\:text-orange-600 { color: rgb(249, 115, 22); }
.glass-panel.vya-forced-hover .group-hover\:text-red-600    { color: rgb(239, 68, 68); }
.glass-panel.vya-forced-hover .group-hover\:text-cyan-600   { color: rgb(6, 182, 212); }
.glass-panel.vya-forced-hover .group-hover\:text-green-600  { color: rgb(34, 197, 94); }
.glass-panel.vya-forced-hover .group-hover\:text-purple-600 { color: rgb(168, 85, 247); }

/* Dark mode — matches icon dark:text-{color}-400 (higher specificity wins over light rules) */
.dark .glass-panel.vya-forced-hover .group-hover\:text-blue-600,
.dark .glass-panel.vya-forced-hover .dark\:group-hover\:text-blue-400   { color: rgb(96, 165, 250); }
.dark .glass-panel.vya-forced-hover .group-hover\:text-yellow-600,
.dark .glass-panel.vya-forced-hover .dark\:group-hover\:text-yellow-400 { color: rgb(250, 204, 21); }
.dark .glass-panel.vya-forced-hover .group-hover\:text-orange-600,
.dark .glass-panel.vya-forced-hover .dark\:group-hover\:text-orange-400 { color: rgb(251, 146, 60); }
.dark .glass-panel.vya-forced-hover .group-hover\:text-red-600,
.dark .glass-panel.vya-forced-hover .dark\:group-hover\:text-red-400    { color: rgb(248, 113, 113); }
.dark .glass-panel.vya-forced-hover .group-hover\:text-cyan-600,
.dark .glass-panel.vya-forced-hover .dark\:group-hover\:text-cyan-400   { color: rgb(34, 211, 238); }
.dark .glass-panel.vya-forced-hover .group-hover\:text-green-600,
.dark .glass-panel.vya-forced-hover .dark\:group-hover\:text-green-400  { color: rgb(74, 222, 128); }
.dark .glass-panel.vya-forced-hover .group-hover\:text-purple-600,
.dark .glass-panel.vya-forced-hover .dark\:group-hover\:text-purple-400 { color: rgb(192, 132, 252); }

/* Tenant color override when data-vya-tenant is present (styled tenants only) */
.glass-panel.vya-forced-hover[data-vya-tenant] h2 {
    color: var(--tenant-text-color-hover-safe, var(--tenant-text-color)) !important;
}