/**
 * Driver.js Override Fixes
 * Fixes for the black overlay issue
 */

/* Override the SVG overlay to use proper masking */
.driver-overlay svg {
    pointer-events: none !important;
}

/* The main overlay path should be semi-transparent black */
.driver-overlay svg path:first-child {
    fill: black !important;
    fill-opacity: 0.75 !important;
}

/* The cutout area should be transparent */
.driver-overlay svg path:last-child {
    fill: black !important;
    fill-opacity: 0 !important;
}

/* Ensure the popover has a white background */
.driver-popover,
.driver-popover.driver-popover-positioned,
.driver-theme-light {
    background: white !important;
    background-color: white !important;
    color: #333 !important;
    border: 1px solid #ddd !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2) !important;
    z-index: 10002 !important;
}

/* Ensure SweetAlert2 modals appear above Driver.js */
.swal2-container {
    z-index: 10003 !important;
}

/* Ensure highlighted elements are visible */
.driver-highlighted-element {
    z-index: 10001 !important;
    position: relative !important;
}

/* Prevent clicks on buttons during tour that would trigger modals */
body.onboarding-tour-active .createProposalButton {
    pointer-events: none !important;
}

/* But allow clicks on navigation elements */
body.onboarding-tour-active .driver-highlighted-element {
    pointer-events: auto !important;
    z-index: 10001 !important;
}

/* Ensure nav links remain clickable during tour */
.driver-active a.nav-link {
    pointer-events: auto !important;
}

/* Fix the highlight cut-out in overlay */
.driver-active .driver-overlay svg path {
    pointer-events: none !important;
}

/* Popover content styling */
.driver-popover-title {
    color: #333 !important;
    background: white !important;
    font-weight: bold !important;
    margin-bottom: 10px !important;
}

.driver-popover-description {
    color: #666 !important;
    background: white !important;
}

/* Button styling */
.driver-popover-navigation-btns {
    background: white !important;
    margin-top: 15px !important;
}

.driver-popover-navigation-btns button {
    background: #007bff !important;
    color: white !important;
    border: none !important;
    padding: 8px 15px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    margin: 0 5px !important;
}

.driver-popover-navigation-btns button:hover {
    background: #0056b3 !important;
}

.driver-popover-prev-btn {
    background: #6c757d !important;
}

.driver-popover-prev-btn:hover {
    background: #545b62 !important;
}

/* Close button */
.driver-popover-close-btn {
    color: #666 !important;
    background: white !important;
}

/* Progress text */
.driver-popover-progress-text {
    color: #666 !important;
    background: white !important;
}

/* Arrow styling */
.driver-popover-arrow {
    background: white !important;
    border-color: #ddd !important;
}

/* Ensure highlighted element is visible */
.driver-highlighted-element {
    z-index: 10001 !important;
    position: relative !important;
}