/* Guided tour (driver.js) visual polish. driver.css (vendored, unmodified) ships a
   plain flat white card with a single drop shadow and no dark-mode awareness at
   all. This layers the app's own theme tokens (primary color, card background,
   radius/shadow scale -- see theme-overrides.css/paces.min.css) on top so the tour
   reads as part of the product rather than a bolted-on library default, and adds a
   glowing ring around the highlighted element itself for a stronger "spotlight"
   feel than driver.js's bare cutout gives on its own. The cutout's own rounded
   corners/padding come from stagePadding/stageRadius passed to driver() in
   GuidedTour.js, not from CSS here.
   Uses --theme-* custom properties, which theme-overrides.css/paces.min.css already
   redefine under [data-bs-theme='dark'] -- no separate dark-mode block needed here. */

/* GuidedTour.js's "Star a report" step: .favorite-star (_Sidenav.cshtml) is opacity:0
   until real-hovered or already favorited -- neither is true during a scripted
   driver.js highlight. driver.js itself adds .driver-active-element directly to the
   highlighted target for the duration of the step and removes it automatically when
   the step ends, so keying off that class (rather than a custom callback/class of our
   own) keeps this in sync with the tour with no extra JS needed. */
.driver-active-element .favorite-star {
    opacity: 1 !important;
    color: var(--theme-warning);
    filter: drop-shadow(0 0 6px rgba(var(--theme-primary-rgb), 0.9));
}

.driver-popover {
    background: var(--theme-secondary-bg);
    color: var(--theme-body-color);
    font-family: var(--theme-body-font-family);
    border-radius: var(--theme-border-radius-xl, 16px);
    padding: 20px 22px;
    min-width: 280px;
    max-width: 340px;
    border: 1px solid rgba(var(--theme-primary-rgb), 0.18);
    box-shadow:
        0 1px 2px rgba(var(--theme-body-color-rgb), 0.06),
        0 16px 40px -12px rgba(var(--theme-body-color-rgb), 0.35),
        0 0 0 1px rgba(var(--theme-primary-rgb), 0.06),
        0 0 40px -6px rgba(var(--theme-primary-rgb), 0.4);
    animation: capadmin-tour-pop-in 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes capadmin-tour-pop-in {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(4px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.driver-popover-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--theme-body-color);
    /* driver.js sets style.display="block" inline via JS on this element -- an
       inline style always beats an external stylesheet rule regardless of
       specificity, so this needs !important to actually take effect. */
    display: flex !important;
    align-items: center;
    gap: 12px;
}

.driver-popover-title::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-inline-end: 2px;
    border-radius: 50%;
    background: var(--theme-primary);
    box-shadow: 0 0 5px 0 rgba(var(--theme-primary-rgb), 0.8);
    flex-shrink: 0;
}

.driver-popover-description {
    margin-top: 6px;
    font-size: 0.875rem;
    line-height: 1.55;
    color: rgba(var(--theme-body-color-rgb), 0.8);
}

.driver-popover-close-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: rgba(var(--theme-body-color-rgb), 0.5);
    transition:
        background-color 0.15s ease-in-out,
        color 0.15s ease-in-out;
}

.driver-popover-close-btn:hover,
.driver-popover-close-btn:focus {
    background: rgba(var(--theme-body-color-rgb), 0.08);
    color: var(--theme-body-color);
}

.driver-popover-footer {
    margin-top: 18px;
}

.driver-popover-progress-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(var(--theme-body-color-rgb), 0.55);
    letter-spacing: 0.02em;
}

.driver-popover-footer button {
    border: none;
    border-radius: var(--theme-border-radius-pill, 999px);
    padding: 6px 16px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-shadow: none;
    transition:
        transform 0.12s ease-in-out,
        box-shadow 0.12s ease-in-out,
        background-color 0.12s ease-in-out;
}

.driver-popover-footer button:hover,
.driver-popover-footer button:focus {
    transform: translateY(-1px);
}

.driver-popover-prev-btn {
    background: rgba(var(--theme-body-color-rgb), 0.06);
    color: var(--theme-body-color);
}

.driver-popover-prev-btn:hover,
.driver-popover-prev-btn:focus {
    background: rgba(var(--theme-body-color-rgb), 0.12);
}

.driver-popover-next-btn {
    background: var(--theme-primary);
    color: #fff;
    box-shadow: 0 4px 14px -2px rgba(var(--theme-primary-rgb), 0.55);
}

.driver-popover-next-btn:hover,
.driver-popover-next-btn:focus {
    box-shadow: 0 6px 18px -2px rgba(var(--theme-primary-rgb), 0.65);
}

.driver-popover-arrow {
    border-color: var(--theme-secondary-bg) !important;
}

/* The cutout's shape/padding/corner radius comes from driver.js's own stagePadding/
   stageRadius config (GuidedTour.js) -- this adds a glowing ring directly on the
   highlighted element so it reads as "spotlighted", not just "not dimmed". Has no
   visible effect on a target that's a table row (<tr>, e.g. the Claims filter row)
   since box-shadow doesn't render on table-row boxes in most browsers -- the
   native cutout still highlights it fine on its own in that case. */
.driver-active-element {
    border-radius: 10px !important;
    box-shadow:
        0 0 0 4px rgba(var(--theme-primary-rgb), 0.35),
        0 0 28px 6px rgba(var(--theme-primary-rgb), 0.4) !important;
    animation: capadmin-tour-glow-pulse 1.8s ease-in-out infinite;
}

@keyframes capadmin-tour-glow-pulse {
    0%,
    100% {
        box-shadow:
            0 0 0 4px rgba(var(--theme-primary-rgb), 0.35),
            0 0 28px 6px rgba(var(--theme-primary-rgb), 0.4);
    }
    50% {
        box-shadow:
            0 0 0 6px rgba(var(--theme-primary-rgb), 0.5),
            0 0 40px 10px rgba(var(--theme-primary-rgb), 0.55);
    }
}

@media (prefers-reduced-motion: reduce) {
    .driver-popover,
    .driver-active-element {
        animation: none !important;
    }
}