/* Soul Fitness AI — estilos globais mínimos (o resto vem do Bootstrap 5). */

:root {
    --sfa-accent: #0d6efd;
}

body.auth-page {
    background: linear-gradient(160deg, #0b1220 0%, #111827 60%, #0b1220 100%);
}

.navbar-brand-emoji {
    font-size: 1.25rem;
}

.card {
    border-radius: 0.75rem;
}

.rest-timer {
    font-variant-numeric: tabular-nums;
    font-size: 3rem;
    font-weight: 700;
}

.chat-widget {
    max-height: 320px;
    overflow-y: auto;
}

.chat-bubble-user {
    background: var(--bs-primary);
    color: #fff;
    border-radius: 1rem 1rem 0 1rem;
}

.chat-bubble-assistant {
    background: var(--bs-secondary-bg);
    border-radius: 1rem 1rem 1rem 0;
}

.exercicio-placeholder {
    background: var(--bs-tertiary-bg);
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
}

.week-day-card.is-today {
    border: 2px solid var(--sfa-accent);
}

/*
 * Card de exercício na execução do treino: imagem + bloco de texto/tabela
 * lado a lado num flexbox. Sem min-width:0 aqui, o item flexível nunca
 * encolhe abaixo da largura "natural" da tabela de séries (Bootstrap não
 * tem essa utilidade pronta) - em telas estreitas isso empurrava a tabela
 * (e o card inteiro) para fora da viewport em vez de deixar o
 * .table-responsive dela rolar horizontalmente por dentro do card.
 */
.exercicio-execucao-info {
    min-width: 0;
}

@media (max-width: 420px) {
    .exercicio-execucao-img {
        width: 48px !important;
        height: 48px !important;
    }
}

/*
 * Tabela de séries (carga/reps/concluir) da execução do treino: larguras em
 * % em vez de px fixo, para sempre caber na largura do card em qualquer
 * tela sem precisar de scroll horizontal - o valor sugerido de carga já
 * aparece por extenso acima da tabela, então o input não precisa (e não
 * cabe) repetir o texto inteiro como placeholder.
 */
.tabela-series {
    table-layout: fixed;
}
.tabela-series th:first-child,
.tabela-series td:first-child {
    width: 14%;
}
.tabela-series th:nth-child(2),
.tabela-series td:nth-child(2) {
    width: 28%;
}
.tabela-series th:nth-child(3),
.tabela-series td:nth-child(3) {
    width: 24%;
}
.tabela-series th:last-child,
.tabela-series td:last-child {
    width: 34%;
}
.tabela-series td {
    padding: 0.3rem 0.25rem;
}
.tabela-series .carga-input,
.tabela-series .reps-input {
    width: 100%;
    min-width: 0;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
}
.tabela-series .concluir-serie-btn {
    width: 100%;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

/*
 * Helper que falta no Bootstrap 5 (as utilidades de largura não têm variante
 * por breakpoint): botão de ação full-width no celular e automático a partir
 * de md - usado com "w-100 w-md-auto" nos botões principais de formulário.
 */
@media (min-width: 768px) {
    .w-md-auto {
        width: auto !important;
    }
}