@import "tailwindcss";

@theme {
    /* Mapeia as cores para as variáveis que você injeta no layout */
    --color-neon-purple: var(--neon-purple);
    --color-neon-blue: var(--neon-blue);
    --color-dark-bg: var(--dark-bg);

    /* Cores estáticas do seu tema */
    --color-card-bg: #121212;
    --color-card-hover: #1a1a1a;

    /* Configuração das Fontes */
    --font-sans: "Montserrat", ui-sans-serif, system-ui;
    --font-geo: "Syncopate", sans-serif;
    --font-brush: "Rock Salt", cursive;
}

/* Fallbacks caso o banco de dados falhe ou @account seja nil */
:root {
    --neon-purple: #b026ff;
    --neon-blue: #4c1d95;
    --dark-bg: #050505;
}

/* Seus efeitos de Glass e Glow (estáticos) */
.glass-effect {
    background: rgba(5, 5, 5, 0.85);
    backdrop-filter: blur(12px);
}

.text-glow {
    text-shadow: 0 0 15px rgba(176, 38, 255, 0.4);
}

input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    /* Inverte a cor de preto para branco */
    cursor: pointer;
    border-radius: 4px;
    padding: 2px;
}

/* Se quiser que o ícone tenha a cor do seu Neon Purple */
input[type="time"]::-webkit-calendar-picker-indicator:hover {
    background-color: var(--neon-purple);
    filter: invert(0);
    /* Volta ao preto para contrastar com o fundo roxo */
}

select {
    -webkit-appearance: none;
    /* Chrome, Safari, Edge */
    -moz-appearance: none;
    /* Firefox */
    appearance: none;
    /* Padrão */

    background-color: var(--dark-bg);
    /* Cor de fundo do seu input */
    color: white;
    padding: 10px 35px 10px 15px;
    /* Espaço na direita para a nova seta */
    /* border: 1px solid var(--neon-purple); */
    border-radius: 4px;
    cursor: pointer;

    /* Adicionando uma nova seta via SVG (Branca) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
}

.nav-link-active {
    @apply bg-white/10 text-white border-l-4 border-[var(--neon-purple)];
}

.nav-link-inactive {
    @apply text-gray-500 hover:bg-white/5 hover:text-gray-300;
}

/* input:required:invalid,
select:required:invalid {
    border-color: rgba(239, 68, 68, 0.2);
}

input:required:valid,
select:required:valid {
    border-color: rgba(34, 197, 94, 0.2);
} */

.turbo-progress-bar {
    height: 3px;
    background-color: var(--neon-purple);
    box-shadow: 0 0 10px var(--neon-purple), 0 0 5px var(--neon-purple);
    transition: width 300ms ease-out, opacity 150ms 150ms ease-in;
}

/* No seu application.css */
turbo-frame[busy] {
    opacity: 0.7;
    pointer-events: none;
}