/*
 * Product tour chrome.
 *
 * A stylesheet rather than a page-local <style> block because the tour is injected into
 * document.body by product-tour.js and outlives whichever component started it — page-local
 * CSS is scoped to a component's own markup and would not reach it.
 *
 * z-index sits above Radzen's dialogs (1001-1100 in the imdstandard theme) and the fixed
 * site header, so the dim covers the whole page including the top bar.
 */

.pt-root {
    position: fixed;
    inset: 0;
    z-index: 20000;
    pointer-events: none;
}

/* Four panes of dim with the target left in the gap between them. Each one takes clicks so
   the page underneath cannot be used while the tour is up — otherwise somebody navigates
   away mid-tour and the spotlight is left pointing at nothing. */
.pt-dim {
    position: fixed;
    background: rgba(15, 23, 42, .55);
    pointer-events: auto;
}

/* The highlight itself: a ring around the cut-out, with no fill, so the real element shows
   through and still looks live. */
.pt-ring {
    position: fixed;
    border: 2px solid #00a8ff;
    border-radius: 8px;
    box-shadow: 0 0 0 3px rgba(0, 168, 255, .25);
    pointer-events: none;
    transition: top .18s ease, left .18s ease, width .18s ease, height .18s ease;
}

.pt-bubble {
    position: fixed;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .28);
    padding: 1rem 1.1rem 0.9rem;
    pointer-events: auto;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    transition: top .18s ease, left .18s ease;
}

.pt-bubble-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .35rem;
}

.pt-count {
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #0062c4;
}

.pt-x {
    background: none;
    border: 0;
    font-size: 1.15rem;
    line-height: 1;
    color: #94a3b8;
    cursor: pointer;
    padding: 0 .15rem;
}

.pt-x:hover { color: #0f172a; }

.pt-title {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 .3rem;
}

.pt-body {
    font-size: .84rem;
    line-height: 1.55;
    color: #475569;
    margin: 0 0 .85rem;
}

.pt-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    border-top: 1px solid #e2e8f0;
    padding-top: .65rem;
}

.pt-nav { display: flex; gap: .4rem; }

.pt-skip {
    background: none;
    border: 0;
    font-size: .76rem;
    color: #94a3b8;
    cursor: pointer;
    padding: .25rem 0;
}

.pt-skip:hover { color: #475569; }

.pt-prev, .pt-next {
    border-radius: 8px;
    font-size: .78rem;
    font-weight: 600;
    padding: .4rem .9rem;
    cursor: pointer;
    border: 1px solid transparent;
}

.pt-prev {
    background: #fff;
    border-color: #e2e8f0;
    color: #475569;
}

.pt-prev:hover { border-color: #94a3b8; color: #0f172a; }

.pt-next {
    background: #00a8ff;
    color: #fff;
}

.pt-next:hover { background: #0062c4; }

/* Below lg the sidebar is a closed off-canvas drawer (sidenav.css). Held open while the tour
   runs so the menu items it explains are on screen; product-tour.js adds and removes the
   class. The breakpoint matches sidenav.css's drawer rules. */
@media (max-width: 991.98px) {
    html.pt-sidenav-open .sidenav,
    html.pt-sidenav-open .sidenav.collapsed {
        width: var(--sidenav-width);
    }

    html.pt-sidenav-open .sidenav.collapsed .sidenav-inner {
        width: var(--sidenav-width);
    }
}

@media (max-width: 575px) {
    .pt-bubble { padding: .85rem .9rem .8rem; }
    .pt-title { font-size: .92rem; }
    .pt-body { font-size: .8rem; }

    /* Touch targets. */
    .pt-prev, .pt-next, .pt-skip { min-height: 44px; }
    .pt-x { min-width: 44px; min-height: 44px; margin: -10px -12px -10px 0; }
}