/* Dark Mode Theme for IntroJs */
.dark .introjs-tooltip {
    background-color: #1e293b; /* slate-800 */
    color: #f1f5f9; /* slate-100 */
    border: 1px solid #475569; /* slate-600 */
}

.dark .introjs-tooltiptext {
    color: #f1f5f9; /* slate-100 */
}

.dark .introjs-arrow.top {
    border-bottom-color: #1e293b; /* slate-800 */
}

.dark .introjs-arrow.right {
    border-left-color: #1e293b; /* slate-800 */
}

.dark .introjs-arrow.bottom {
    border-top-color: #1e293b; /* slate-800 */
}

.dark .introjs-arrow.left {
    border-right-color: #1e293b; /* slate-800 */
}

.dark .introjs-helperNumberLayer {
    background: #0284c7; /* sky-600 */
    color: white;
    border: 3px solid #0284c7; /* sky-600 */
}

.dark .introjs-tooltipTitle {
    color: #f1f5f9; /* slate-100 */
    border-bottom: 1px solid #475569; /* slate-600 */
}

.dark .introjs-button {
    background-color: #334155; /* slate-700 */
    color: #f1f5f9; /* slate-100 */
    border: 1px solid #475569; /* slate-600 */
    text-shadow: none;
    transition: all 0.3s ease;
}

.dark .introjs-button:hover {
    background-color: #475569; /* slate-600 */
}

.dark .introjs-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(2, 132, 199, 0.4); /* sky-600 with opacity */
}

.dark .introjs-prevbutton.introjs-fullbutton {
    border-right: 1px solid #475569; /* slate-600 */
}

.dark .introjs-disabled, 
.dark .introjs-disabled:hover, 
.dark .introjs-disabled:focus {
    background-color: #1e293b; /* slate-800 */
    color: #64748b; /* slate-500 */
    border: 1px solid #475569; /* slate-600 */
}

.dark .introjs-progress {
    background-color: #334155; /* slate-700 */
}

.dark .introjs-progressbar {
    background-color: #0284c7; /* sky-600 */
}

.dark .introjs-hint:hover > .introjs-hint-pulse {
    border: 5px solid rgba(2, 132, 199, 0.5); /* sky-600 with opacity */
}

.dark .introjs-hint-pulse {
    background-color: rgba(2, 132, 199, 0.7); /* sky-600 with opacity */
}

.dark .introjs-fixedTooltip {
    background-color: #1e293b; /* slate-800 */
}

/* For both light and dark mode - responsive adjustments */
@media (max-width: 768px) {
    .introjs-tooltip {
        max-width: 90%;
    }
}