/*
 * Native <select> dropdown lists are rendered by the OS/browser chrome, not
 * by our page CSS. This app's theme is dark (light text on a dark
 * background), and native option popups in most browsers ignore that and
 * fall back to a white background while still inheriting our light text
 * color -- making every option unreadable (white text on white background).
 *
 * Force a light color-scheme on selects/options so the native popup uses a
 * white background with dark text, and pin the option colors explicitly as
 * a fallback for browsers that don't honor color-scheme for this.
 */
select {
    color-scheme: light;
}

select option {
    background-color: #ffffff;
    color: #0f172a;
}

/*
 * .bg-hero-gradient e um banner com gradiente fixo (sempre escuro, cores
 * cravadas no CSS -- nao usa variaveis de tema). O texto dentro dele usa
 * text-sidebar-foreground (e variantes de opacidade), que troca de cor com
 * o tema claro/escuro -- no tema claro isso virava texto escuro sobre o
 * fundo escuro do gradiente, ilegivel. Fixa --sidebar-foreground como claro
 * so dentro deste componente, independente do tema da pagina.
 */
.bg-hero-gradient {
    --sidebar-foreground: #f1f7f2;
}

/*
 * Scrollbar styling to match the app's theme instead of the browser's
 * default gray bar. Uses the same CSS variables as the rest of the design
 * system (--border, --muted-foreground), so it follows whichever theme is
 * loaded on the page -- dark on admin/consultor, light on the public
 * cadastro page -- without needing separate rules per page.
 */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--border);
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--muted-foreground);
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/*
 * Mobile sidebar drawer (admin + consultor layouts) --------------------
 * #app-sidebar is `hidden` below the `md` breakpoint in the markup -- there
 * is no separate mobile nav, so below `md` the menu was simply unreachable
 * and the header's "Toggle Sidebar" button had nothing to do. The layouts'
 * inline script now toggles `.sidebar-mobile-open` on <body> to reveal the
 * sidebar as a full-height overlay drawer with a dimmed backdrop; above
 * `md` that same button instead collapses #app-sidebar to an icon rail via
 * `data-collapsible="icon"`, which the compiled bundle already styles.
 */
@media (max-width: 767.98px) {
    #app-sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 40;
        background-color: rgb(0 0 0 / 0.5);
    }

    body.sidebar-mobile-open #app-sidebar-backdrop {
        display: block;
    }

    body.sidebar-mobile-open #app-sidebar {
        display: block;
    }

    /* The spacer div only exists to reserve layout width for the fixed
       panel on desktop; on the mobile overlay it must not push the page
       content over, so it stays out of the render tree. */
    body.sidebar-mobile-open #app-sidebar-spacer {
        display: none;
    }

    body.sidebar-mobile-open #app-sidebar-panel {
        display: flex;
        z-index: 50;
        animation: sidebar-slide-in 0.2s ease-out;
    }
}

@keyframes sidebar-slide-in {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}
