/* css/components/tutorial.css */

.tutorial-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6); /* Darker overlay */
    z-index: 10000; /* High z-index */
    display: none; /* Shown by JS */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
body.tutorial-active .tutorial-overlay {
    display: block;
    opacity: 1;
}

.tutorial-popup {
    position: fixed; /* Positioned relative to viewport */
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    z-index: 10001; /* Above overlay, below highlighted element if strategy changes */
    padding: 20px;
    min-width: 280px;
    max-width: 400px;
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
body.tutorial-active .tutorial-popup { /* Show with animation */
    display: block !important; /* Override display:none from JS init if needed */
    opacity: 1;
    transform: translateY(0) scale(1);
}


.tutorial-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}
.tutorial-popup-header h4 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--accent-primary);
}
.tutorial-popup .tutorial-close-btn {
    background: none;
    border: none;
    font-size: 1.8rem;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 5px;
}
.tutorial-popup .tutorial-close-btn:hover {
    color: var(--text-primary);
}

.tutorial-popup-content {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
}
.tutorial-popup-content p {
    margin-bottom: 0.5em;
}

.tutorial-popup-actions {
    display: flex;
    justify-content: space-between; /* Distribute buttons */
    align-items: center;
    gap: 10px;
}
.tutorial-popup-actions .tutorial-skip-btn {
    /* Generic .btn .btn-sm .btn-outline-secondary styles apply */
    margin-right: auto; /* Push skip to the left */
}
.tutorial-popup-actions .tutorial-prev-btn,
.tutorial-popup-actions .tutorial-next-btn,
.tutorial-popup-actions .tutorial-finish-btn {
    /* Generic .btn .btn-sm .btn-primary (for Next/Finish) or .btn-secondary (for Prev) styles apply */
}


/* Highlighted Element Styling */
.tutorial-highlighted-element {
    /* position: relative; (Set by JS if needed) */
    /* z-index: 10002; (Set by JS) */
    box-shadow: 0 0 0 9999px rgba(0,0,0,0); /* This creates the "hole punch" effect if overlay is behind */
    /* However, the JS currently brings element on top of overlay. For "hole punch", overlay is on top with cutout. */
    /* Alternative highlight: */
    outline: 3px solid var(--accent-primary);
    outline-offset: 3px;
    border-radius: var(--border-radius-md); /* Match element or use a general highlight radius */
    transition: outline 0.2s ease-in-out, outline-offset 0.2s ease-in-out;
}
/* If using the body.tutorial-active and spotlight approach (more complex):
body.tutorial-active {
    overflow: hidden;
}
.tutorial-spotlight {
    position: absolute;
    border-radius: var(--border-radius-md);
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.7); // This makes everything else dark
    z-index: 10001;
    transition: all 0.3s ease-in-out;
    pointer-events: none; // Allow clicks through to highlighted element if needed
}
*/

/* css/components/tutorial.css */
/* ... (existing .tutorial-overlay, .tutorial-popup styles) ... */

.tutorial-popup-header {
    /* ... existing ... */
    position: relative; /* For step count positioning */
}
.tutorial-popup-header h4 {
    margin-right: 50px; /* Space for step count */
}
.tutorial-step-count {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    font-size: 0.8rem;
    color: var(--text-muted);
    background-color: var(--bg-tertiary);
    padding: 3px 8px;
    border-radius: var(--border-radius-sm);
}

.tutorial-popup-actions {
    /* ... existing ... */
    margin-top: 15px; /* Ensure space above actions */
}
.tutorial-popup-actions .tutorial-skip-btn {
    /* ... existing ... */
    /* Generic .btn .btn-sm .btn-outline-secondary styles from components.css */
}
.tutorial-popup-actions .tutorial-prev-btn {
    /* Generic .btn .btn-sm .btn-secondary styles from components.css */
}
.tutorial-popup-actions .tutorial-next-btn {
    /* Generic .btn .btn-sm .btn-primary styles from components.css */
}
.tutorial-popup-actions .tutorial-finish-btn {
    /* Generic .btn .btn-sm .btn-success styles from components.css */
}

/* Highlighted element still uses outline for simplicity */
.tutorial-highlighted-element {
    outline: 3px solid var(--accent-primary);
    outline-offset: 4px; /* Slightly more offset */
    border-radius: var(--border-radius-md); /* Can inherit or be specific */
    transition: outline 0.3s ease-in-out, outline-offset 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    position: relative; /* Important for z-index to work reliably */
    z-index: 10002 !important; /* Ensure it's above overlay */
    background-color: var(--bg-primary); /* Ensure it's not transparent showing overlay through */
    box-shadow: 0 0 0 5px var(--bg-primary), 0 0 15px 10px rgba(var(--accent-primary-rgb), 0.3); /* Glow effect */
}

body.tutorial-active {
    /* Potentially prevent body scroll if overlay doesn't do it enough */
    /* overflow: hidden; */
}