/* ===== Driver.js Theme Overrides — BDO Design System ===== */
/* Loaded after driver.css to apply DocPro styling */

/* Popover container */
.driver-popover {
    background-color: var(--bdo-ui-bg);
    border: 1px solid var(--bdo-ui-border);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    color: var(--bdo-ui-text);
    padding: 20px;
    min-width: 320px;
    max-width: 420px;
}

/* Title */
.driver-popover-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--bdo-ui-text);
    line-height: 1.3;
    font-family: inherit;
}

/* Description */
.driver-popover-description {
    font-size: 13px;
    line-height: 1.6;
    color: var(--bdo-ui-text-dimmed);
    font-family: inherit;
}

/* Close button */
.driver-popover-close-btn {
    color: var(--bdo-ui-text-dimmed);
    font-size: 16px;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease;
}

.driver-popover-close-btn:hover,
.driver-popover-close-btn:focus {
    background: var(--bdo-ui-bg-hover);
    color: var(--bdo-ui-text);
}

/* Footer */
.driver-popover-footer {
    margin-top: 16px;
}

/* Progress text (dots/counter) */
.driver-popover-progress-text {
    font-size: 12px;
    color: var(--bdo-ui-text-dimmed);
}

/* Navigation buttons — shared styles */
.driver-popover-footer button {
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
    line-height: 1.4;
    font-family: inherit;
    text-shadow: none;
}

/* Next / primary button */
.driver-popover-next-btn {
    background: var(--bdo-ui-primary) !important;
    color: var(--bdo-ui-primary-contrast, #fff) !important;
    border: 1px solid var(--bdo-ui-primary) !important;
}

.driver-popover-next-btn:hover,
.driver-popover-next-btn:focus {
    filter: brightness(1.1);
    background: var(--bdo-ui-primary) !important;
}

/* Previous / secondary button */
.driver-popover-prev-btn {
    background: transparent !important;
    color: var(--bdo-ui-text-dimmed) !important;
    border: 1px solid var(--bdo-ui-border) !important;
}

.driver-popover-prev-btn:hover,
.driver-popover-prev-btn:focus {
    background: var(--bdo-ui-bg-hover) !important;
    color: var(--bdo-ui-text) !important;
}

/* Arrow color to match popover background */
.driver-popover-arrow {
    border-color: var(--bdo-ui-bg);
}

.driver-popover-arrow-side-left {
    border-left-color: var(--bdo-ui-bg);
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-top-color: transparent;
}

.driver-popover-arrow-side-right {
    border-right-color: var(--bdo-ui-bg);
    border-left-color: transparent;
    border-bottom-color: transparent;
    border-top-color: transparent;
}

.driver-popover-arrow-side-top {
    border-top-color: var(--bdo-ui-bg);
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

.driver-popover-arrow-side-bottom {
    border-bottom-color: var(--bdo-ui-bg);
    border-left-color: transparent;
    border-top-color: transparent;
    border-right-color: transparent;
}

/* Responsive override */
@media (max-width: 768px) {
    .driver-popover {
        min-width: 0;
        max-width: none;
    }
}

/* Tutorial highlight pulse — applied to sub-elements
   during specific steps to draw attention */
@keyframes tutorial-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--bdo-ui-primary-rgb, 59, 130, 246), 0.5); }
    50% { box-shadow: 0 0 0 6px rgba(var(--bdo-ui-primary-rgb, 59, 130, 246), 0); }
}

@keyframes tutorial-badge-flash {
    0%, 100% {
        transform: translateY(0);
        box-shadow: 0 0 0 0 rgba(var(--bdo-ui-primary-rgb, 59, 130, 246), 0.45);
        filter: saturate(1);
    }
    50% {
        transform: translateY(-1px) scale(1.06);
        box-shadow: 0 0 0 6px rgba(var(--bdo-ui-primary-rgb, 59, 130, 246), 0);
        filter: saturate(1.2);
    }
}

.tutorial-highlight {
    animation: tutorial-pulse 1.5s ease-in-out infinite;
    outline: 2px solid var(--bdo-ui-primary);
    outline-offset: 2px;
    border-radius: 4px;
    z-index: 10;
    position: relative;
}

.filetype-badge.tutorial-highlight {
    animation: tutorial-badge-flash 1s ease-in-out infinite;
    outline-width: 1px;
    outline-offset: 1px;
}

/* Ports are tiny targets, so give their highlight a livelier radar-style ping
   to draw the eye during the port-specific (connecting-nodes) step. */
@keyframes tutorial-port-ping {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--bdo-ui-primary-rgb, 59, 130, 246), 0.55);
    }
    70% {
        box-shadow: 0 0 0 9px rgba(var(--bdo-ui-primary-rgb, 59, 130, 246), 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(var(--bdo-ui-primary-rgb, 59, 130, 246), 0);
    }
}

.port-container.tutorial-highlight {
    position: absolute;
    animation: tutorial-port-ping 1.2s ease-out infinite;
    outline-offset: 3px;
}

/* ===== Connecting-nodes tutorial step: restore diagram interactivity =====
   Driver.js sets `pointer-events: none` on every element except its active
   target subtree, and forces `pointer-events: auto` on ALL descendants of the
   active element. Both behaviours break Z.Blazor.Diagrams' deliberate layer
   model (transparent SVG/HTML layers must stay click-through so node/port
   handlers fire). While the connect step is active we:
     1. neutralize the Driver overlay so pointer drags pass straight through, and
     2. re-assert the diagram's intended pointer-events layering.
   Scoped to a body class toggled only during the connecting-nodes step. */
body.tutorial-connecting-active .driver-overlay,
body.tutorial-connecting-active .driver-overlay * {
    pointer-events: none !important;
}

body.tutorial-connecting-active [data-tutorial="diagram-surface"] .diagram-html-layer,
body.tutorial-connecting-active [data-tutorial="diagram-surface"] .diagram-svg-layer,
body.tutorial-connecting-active [data-tutorial="diagram-surface"] .html-layer,
body.tutorial-connecting-active [data-tutorial="diagram-surface"] .svg-layer {
    pointer-events: none !important;
}

body.tutorial-connecting-active [data-tutorial="diagram-surface"] .diagram-canvas,
body.tutorial-connecting-active [data-tutorial="diagram-surface"] .diagram-node,
body.tutorial-connecting-active [data-tutorial="diagram-surface"] .diagram-node * {
    pointer-events: auto !important;
}

/* ===== Actions-menu tutorial step: keep the dropdown usable under the spotlight =====
   Driver.js forces `overflow: hidden` on the highlighted element's parent and
   renders a full-screen overlay (z-index 10000) with a cutout only around the
   Actions button. The Actions dropdown opens *below* that button, so by default
   it is both clipped by the parent row and painted behind the dark overlay,
   making the menu look like it never opens. While this step is active we restore
   visible overflow on the row and lift the header card's stacking context above
   the overlay so the opened menu is fully visible. Scoped to a body class
   toggled only during the actions-menu step. */
body.tutorial-actions-active .builder-header-actions {
    overflow: visible !important;
}

body.tutorial-actions-active .builder-header-card {
    z-index: 10001 !important;
}