/* SandHub — Identidade visual "Pôr do Sol na Praia"
   Paleta oficial. Importar antes de site.css / sobrescrever variáveis do Bootstrap 5. */
:root {
    --sh-coral: #FF6B4A;   /* Primária   — CTAs, destaques, marca "Hub" */
    --sh-teal: #17BEBB;    /* Secundária — links, badges de etapa, acentos */
    --sh-navy: #0B3954;    /* Escura     — texto forte, headers, marca "Sand" */
    --sh-areia: #F6E7CB;   /* Fundo      — superfícies/cards claros */
    --sh-sol: #FFC857;     /* Destaque   — avisos, troféus/pontuação, sol */

    /* Mapeamento para o Bootstrap 5 (sobrescreve via classes utilitárias/tema) */
    --bs-primary: var(--sh-coral);
    --bs-secondary: var(--sh-teal);
    --bs-dark: var(--sh-navy);
    --bs-light: var(--sh-areia);
    --bs-warning: var(--sh-sol);
}

/* Google Material Symbols — biblioteca de ícones oficial do SandHub */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
    line-height: 1;
}

/* ===== Tema do Bootstrap 5 com a paleta SandHub =====
   O Bootstrap não usa --bs-primary direto nos componentes; é preciso remapear o -rgb,
   as variáveis dos botões e o anel de foco (que por padrão é azul). */
:root {
    --bs-primary-rgb: 255, 107, 74;
    --bs-secondary-rgb: 23, 190, 187;
    --bs-success-rgb: 23, 190, 187;
    --bs-link-color: var(--sh-coral);
    --bs-link-color-rgb: 255, 107, 74;
    --bs-link-hover-color: #e2542f;
    --bs-link-hover-color-rgb: 226, 84, 47;
    --bs-focus-ring-color: rgba(23, 190, 187, .25);
}

.btn-primary {
    --bs-btn-bg: var(--sh-coral);
    --bs-btn-border-color: var(--sh-coral);
    --bs-btn-hover-bg: #ef5d3c;
    --bs-btn-hover-border-color: #e2542f;
    --bs-btn-active-bg: #d94e2c;
    --bs-btn-active-border-color: #cc4926;
    --bs-btn-disabled-bg: var(--sh-coral);
    --bs-btn-disabled-border-color: var(--sh-coral);
}

.btn-outline-primary {
    --bs-btn-color: var(--sh-coral);
    --bs-btn-border-color: var(--sh-coral);
    --bs-btn-hover-bg: var(--sh-coral);
    --bs-btn-hover-border-color: var(--sh-coral);
    --bs-btn-active-bg: var(--sh-coral);
    --bs-btn-active-border-color: var(--sh-coral);
}

/* Anel de foco/clique na cor da marca — o Bootstrap aplica o anel no estado :active:focus-visible
   usando --bs-btn-focus-shadow-rgb, que por padrão é azul. Remapeia para o teal da marca para não
   "piscar" azul ao clicar nos botões. */
.btn-primary, .btn-outline-primary,
.btn-success, .btn-outline-success,
.btn-secondary, .btn-outline-secondary,
.btn-dark, .btn-outline-dark,
.btn-danger, .btn-outline-danger,
.btn-warning, .btn-outline-warning {
    --bs-btn-focus-shadow-rgb: 23, 190, 187;
}

.text-primary { color: var(--sh-coral) !important; }
.bg-primary { background-color: var(--sh-coral) !important; }
.text-bg-primary { background-color: var(--sh-coral) !important; color: #fff !important; }
.badge.text-bg-success { background-color: var(--sh-teal) !important; }

/* Item selecionado de list-group: o Bootstrap usa azul fixo (#0d6efd) nas variáveis
   --bs-list-group-active-*, ignorando --bs-primary. Remapeia para a coral da marca. */
.list-group {
    --bs-list-group-active-bg: var(--sh-coral);
    --bs-list-group-active-border-color: var(--sh-coral);
}

/* Foco com a cor da marca — substitui o anel azul padrão do Bootstrap nos inputs/botões.
   O Bootstrap 5.3 usa o seletor :focus-visible para .btn-check; e .btn-close/.page-link
   trazem um box-shadow azul fixo (rgba(13,110,253,...)) que precisa ser sobrescrito. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.btn:focus-visible,
.btn-check:focus + .btn,
.btn-check:focus-visible + .btn,
.btn-close:focus,
.page-link:focus,
.dropdown-toggle:focus-visible {
    border-color: var(--sh-teal);
    box-shadow: 0 0 0 .25rem rgba(23, 190, 187, .25);
}

/* Paginação: variáveis de foco e item ativo (azul fixo por padrão) -> coral/teal da marca. */
.pagination {
    --bs-pagination-focus-color: var(--sh-coral);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(23, 190, 187, .25);
    --bs-pagination-active-bg: var(--sh-coral);
    --bs-pagination-active-border-color: var(--sh-coral);
}

.form-check-input:checked {
    background-color: var(--sh-coral);
    border-color: var(--sh-coral);
}

/* Feedback de campo obrigatório após tentativa de envio (diretiva <validation>). */
form.ng-submitted .form-control.ng-invalid,
form.ng-submitted .form-select.ng-invalid {
    border-color: #dc3545;
}

/* Ícones do date picker (Tempus Dominus) em Material Symbols — a init da diretiva ngDate
   mapeia os ícones do picker para classes ms-*; aqui renderizamos o glifo via ::before. */
.tempus-dominus-widget .ms-icon::before {
    font-family: 'Material Symbols Outlined';
    font-size: 1.25rem;
    line-height: 1;
    vertical-align: middle;
}
.tempus-dominus-widget .ms-prev::before  { content: 'chevron_left'; }
.tempus-dominus-widget .ms-next::before  { content: 'chevron_right'; }
.tempus-dominus-widget .ms-up::before    { content: 'expand_less'; }
.tempus-dominus-widget .ms-down::before  { content: 'expand_more'; }
.tempus-dominus-widget .ms-today::before { content: 'today'; }
.tempus-dominus-widget .ms-clear::before { content: 'delete'; }
.tempus-dominus-widget .ms-close::before { content: 'close'; }
.tempus-dominus-widget .ms-time::before  { content: 'schedule'; }
.tempus-dominus-widget .ms-date::before  { content: 'calendar_month'; }