/* [DOC]
 * Path: static/css/custom.css
 * App/Camada: static / Frontend CSS
 * Funcionalidade: Estilos globais complementares para o tema Dark Low-Contrast e responsividade.
 * Objetivos: Configurar color-scheme escuro, padronizar radio buttons no tema Dark Low-Contrast eliminando o fundo branco nativo de alto contraste, ocultar spinners em inputs numéricos, garantir scroll horizontal isolado para fórmulas KaTeX e prover classes utilitárias HTMX.
 * Dependências: KaTeX, Tailwind CSS
 * [\DOC] */

:root {
    color-scheme: dark;
}

/* Scrollbar discreta em tons de cinza escuro */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #121214;
}
::-webkit-scrollbar-thumb {
    background: #27272A;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #3F3F46;
}

/* Radio buttons no padrão Dark Low-Contrast (substitui o fundo branco nativo de alto contraste) */
input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 1.125rem;
    height: 1.125rem;
    min-width: 1.125rem;
    min-height: 1.125rem;
    border-radius: 50%;
    background-color: #202024; /* bg-surface-800 */
    border: 1.5px solid #3F3F46; /* border-border-strong */
    cursor: pointer;
    display: inline-grid;
    place-content: center;
    margin: 0;
    vertical-align: middle;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

input[type="radio"]::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.12s ease-in-out;
    background-color: #EA580C; /* accent-500 Laranja Sóbrio */
}

input[type="radio"]:hover {
    border-color: #FB923C; /* accent-400 */
    background-color: #27272A;
}

input[type="radio"]:focus-visible {
    outline: 2px solid #EA580C;
    outline-offset: 2px;
}

input[type="radio"]:checked {
    border-color: #EA580C; /* accent-500 */
    background-color: #202024; /* Mantém o fundo escuro suave */
    box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.2);
}

input[type="radio"]:checked::before {
    transform: scale(1);
}

input[type="radio"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    border-color: #26262A;
    background-color: #18181B;
}

/* Remove spinners nativos de todos os inputs type="number" */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button,
.avalix-no-spinner::-webkit-outer-spin-button,
.avalix-no-spinner::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"],
.avalix-no-spinner {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Fórmulas KaTeX responsivas em telas pequenas */
.katex-display {
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    padding: 0.25rem 0;
}

/* Indicador HTMX oculto por padrão e visível durante requisições */
.htmx-indicator {
    display: none !important;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: inline-flex !important;
}