/* === KidsTime Tutorial System - Driver.js Theme === */

.driver-popover.kidstime-tutorial-popover {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(11, 32, 76, 0.2);
    border: 2px solid #FBC30A;
    max-width: 380px;
    font-family: "Poppins", sans-serif;
}

.driver-popover.kidstime-tutorial-popover .driver-popover-title {
    font-size: 18px;
    font-weight: 600;
    color: #0B204C;
    font-family: "Poppins", sans-serif;
}

.driver-popover.kidstime-tutorial-popover .driver-popover-description {
    font-size: 14px;
    line-height: 1.6;
    color: #4a5568;
    font-family: "Poppins", sans-serif;
}

.driver-popover.kidstime-tutorial-popover .driver-popover-progress-text {
    font-size: 12px;
    color: #718096;
    font-family: "Poppins", sans-serif;
}

.driver-popover.kidstime-tutorial-popover .driver-popover-next-btn,
.driver-popover.kidstime-tutorial-popover .driver-popover-close-btn-custom {
    background: #FBC30A;
    color: #0B204C;
    border: none;
    border-radius: 8px;
    padding: 8px 20px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    font-family: "Poppins", sans-serif;
    text-shadow: none;
}

.driver-popover.kidstime-tutorial-popover .driver-popover-next-btn:hover {
    background: #e5b200;
}

.driver-popover.kidstime-tutorial-popover .driver-popover-prev-btn {
    background: transparent;
    color: #0B204C;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 20px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    font-family: "Poppins", sans-serif;
    text-shadow: none;
}

.driver-popover.kidstime-tutorial-popover .driver-popover-prev-btn:hover {
    background: #f7fafc;
    border-color: #cbd5e0;
}

/* Hide built-in driver.js close button - replaced by custom .tutorial-dismiss-btn */
.driver-popover.kidstime-tutorial-popover .driver-popover-close-btn {
    display: none !important;
}

/* Custom dismiss X button - always visible on every step */
.tutorial-dismiss-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: #a0aec0;
    font-size: 22px;
    line-height: 28px;
    text-align: center;
    cursor: pointer;
    border-radius: 50%;
    padding: 0;
    transition: color 0.15s ease, background 0.15s ease;
    z-index: 1;
}

.tutorial-dismiss-btn:hover {
    color: #0B204C;
    background: #f0f4ff;
}

.driver-popover.kidstime-tutorial-popover .driver-popover-arrow-side-left.driver-popover-arrow,
.driver-popover.kidstime-tutorial-popover .driver-popover-arrow-side-right.driver-popover-arrow,
.driver-popover.kidstime-tutorial-popover .driver-popover-arrow-side-top.driver-popover-arrow,
.driver-popover.kidstime-tutorial-popover .driver-popover-arrow-side-bottom.driver-popover-arrow {
    border-color: #FBC30A;
}

/* Tutorial start button */
.tutorial-fab {
    position: fixed;
    bottom: 150px;
    right: 24px;
    z-index: 1000;
}

.tutorial-fab .mud-fab {
    background-color: #0B204C !important;
    color: #FBC30A !important;
    box-shadow: 0 4px 16px rgba(11, 32, 76, 0.3);
}

.tutorial-fab .mud-fab:hover {
    background-color: #132d5e !important;
}

/* Tutorial tour picker dialog */
.tutorial-picker-list .mud-list-item {
    border-radius: 8px;
    margin-bottom: 4px;
    transition: background 0.15s ease;
}

.tutorial-picker-list .mud-list-item:hover {
    background: #f0f4ff;
}

/* === Tutorial completion overlay === */
.driver-popover.tutorial-completion-popover {
    max-width: 500px;
    text-align: center;
    padding: 32px 24px;
    border-width: 3px;
}

.driver-popover.tutorial-completion-popover .driver-popover-title {
    font-size: 24px;
    margin-bottom: 8px;
}

.driver-popover.tutorial-completion-popover .driver-popover-title::before {
    content: "\1F389  ";
}

.driver-popover.tutorial-completion-popover .driver-popover-description {
    font-size: 15px;
    line-height: 1.7;
}

.driver-popover.tutorial-completion-popover .driver-popover-next-btn {
    padding: 10px 32px;
    font-size: 16px;
}

/* === Preserve original styles on highlighted elements === */
/* Driver.js boosts z-index which can break CSS cascade for custom classes */
.driver-active-element.button-default,
.driver-active-element .button-default {
    color: var(--dark-text-color) !important;
    background-color: var(--brown-color) !important;
}

.driver-active-element.button-default-negative,
.driver-active-element .button-default-negative {
    color: var(--dark-text-color) !important;
}

.driver-active-element .kidstime-dark-text,
.driver-active-element.kidstime-dark-text {
    color: var(--dark-text-color) !important;
}

/* Preserve button content alignment when highlighted by Driver.js */
button.driver-active-element,
.driver-active-element.mud-button-root {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}



/* === Dialog interaction during tutorial === */
/* When tutorial highlights inside a dialog, boost dialog above Driver.js overlay
   and restore pointer-events so all fields remain interactive. */
.tutorial-dialog-active .mud-dialog-container {
    z-index: 1000000001 !important;
}

.tutorial-dialog-active .mud-dialog-container,
.tutorial-dialog-active .mud-dialog-container * {
    pointer-events: auto !important;
}

/* Hide MudBlazor's own backdrop to prevent double overlay with Driver.js */
.tutorial-dialog-active .mud-overlay-dialog {
    display: none !important;
}

/* Keep Driver.js popover above the boosted dialog */
.tutorial-dialog-active .driver-popover {
    z-index: 1000000002 !important;
}

/* MudSelect/MudAutocomplete popovers are rendered at body level in .mud-popover-provider,
   outside the dialog. Boost them so dropdown items are clickable during tutorial. */
.tutorial-dialog-active .mud-popover-provider {
    z-index: 1000000001 !important;
}

.tutorial-dialog-active .mud-popover-provider,
.tutorial-dialog-active .mud-popover-provider * {
    pointer-events: auto !important;
}