/*
 * Theming for the backend intro.js tour (Unfold admin).
 *
 * Re-uses the CSS custom properties that /theme-admin.css (docdoors/views/theme_css.py)
 * injects into :root from ThemeSettings, so the guided tour follows the app colors.
 * Those variables are: --theme-primary, --theme-primary-hover, --theme-text,
 * --theme-button-text, --theme-font. Loaded via UNFOLD["STYLES"] AFTER
 * /theme-admin.css, so the variables are defined by the time this file applies.
 *
 * NOTE: new files under static/ require `collectstatic` before WhiteNoise serves them.
 */

/* Neutral fallbacks (NOT orange) in case a page is missing /theme-admin.css. */
:root {
    --intro-primary: var(--theme-primary, #6b7280);
    --intro-primary-hover: var(--theme-primary-hover, #4b5563);
    --intro-text: var(--theme-text, #1f2937);
    --intro-button-text: var(--theme-button-text, #ffffff);
}

/* Tooltip card */
.introjs-tooltip {
    border-radius: 0.75rem;
    border: 1px solid var(--intro-primary);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25);
    color: var(--intro-text);
    font-family: var(--theme-font, inherit);
    max-width: 360px;
}

.introjs-tooltip-title {
    color: var(--intro-text);
    font-weight: 700;
}

.introjs-tooltiptext {
    color: var(--intro-text);
    line-height: 1.5;
}

/* Close / skip button (the "X" in the corner) — keep it small and unobtrusive. */
.introjs-skipbutton {
    font-size: 1rem;
    line-height: 1;
    height: auto;
    width: auto;
    padding: 0.35rem 0.6rem;
    font-weight: 600;
    color: var(--intro-text);
    opacity: 0.6;
}

.introjs-skipbutton:hover,
.introjs-skipbutton:focus {
    opacity: 1;
    color: var(--intro-primary-hover);
}

/* Highlight ring around the targeted element */
.introjs-helperLayer {
    border-radius: 0.5rem;
}

/* Step number badge */
.introjs-helperNumberLayer {
    background: var(--intro-primary);
    color: var(--intro-button-text);
    border: none;
    text-shadow: none;
    font-weight: 700;
}

/* Progress bar */
.introjs-progressbar {
    background-color: var(--intro-primary);
}

/* Buttons */
.introjs-tooltipbuttons .introjs-button {
    border-radius: 0.5rem;
    font-weight: 600;
    text-shadow: none;
    border: 1px solid var(--intro-primary);
    background: transparent;
    color: var(--intro-text);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.introjs-tooltipbuttons .introjs-button:hover,
.introjs-tooltipbuttons .introjs-button:focus {
    background: var(--intro-primary-hover);
    color: var(--intro-button-text);
    border-color: var(--intro-primary-hover);
    box-shadow: none;
}

/* The "Next"/"Done" primary action stands out */
.introjs-tooltipbuttons .introjs-nextbutton,
.introjs-tooltipbuttons .introjs-donebutton {
    background: var(--intro-primary);
    color: var(--intro-button-text);
    border-color: var(--intro-primary);
}

.introjs-tooltipbuttons .introjs-nextbutton:hover,
.introjs-tooltipbuttons .introjs-donebutton:hover {
    background: var(--intro-primary-hover);
    border-color: var(--intro-primary-hover);
}

/* Disabled state */
.introjs-tooltipbuttons .introjs-disabled,
.introjs-tooltipbuttons .introjs-disabled:hover {
    color: #9ca3af;
    background: transparent;
    border-color: #d1d5db;
    cursor: default;
}

/* Bullets (if enabled) */
.introjs-bullets ul li a.active {
    background: var(--intro-primary);
}

/* The header help-tour button injected next to the language switcher */
.admin-intro-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--intro-text);
    background: transparent;
    border: none;
    padding: 0;
    transition: color 0.15s ease;
}

.admin-intro-trigger:hover {
    color: var(--intro-primary);
}

.admin-intro-trigger .material-symbols-outlined {
    font-size: 1.25rem;
}