/* ============================================================
 * AvisaAí — componentes.css
 *
 * Camada de componentes. Antes da Fase 2, botão, cartão, chip de
 * status e barra de filtro eram redesenhados dentro do <style> de
 * cada tela — 3.593 linhas de CSS embutido, com o mesmo seletor
 * significando coisas diferentes em telas diferentes.
 *
 * Aqui cada um desses tem uma definição só. Os nomes antigos
 * (.btn-print, .btn-sm-primary, .status-badge, .metric-card, ...)
 * seguem como seletores adicionais na mesma regra, para o markup
 * existente continuar funcionando sem varredura de HTML.
 *
 * Carregado depois de painel.css. Nenhuma cor literal daqui para
 * baixo: tudo sai de tokens.css.
 * ============================================================ */

/* ============================================================
   ÍCONES
   Traço em SVG inline, gerado por {% icon "nome" %}. Herda a cor
   do texto por currentColor, então acompanha o tema sem regra
   extra. O tamanho segue a fonte do contexto: um ícone dentro de
   um título fica grande, dentro de um chip fica pequeno.
   ============================================================ */

.icone {
    width: 1.15em;
    height: 1.15em;
    display: inline-block;
    vertical-align: -0.2em;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Fallback do template tag: valor que não é nome de ícone conhecido
   (categoria cujo campo ainda guarda um emoji). */
.icone-texto {
    display: inline-block;
    line-height: 1;
    font-style: normal;
}

/* Ícone que carrega significado sozinho, sem texto ao lado */
.icone-grande { width: 1.5em; height: 1.5em; }
.icone-hero   { width: 2.5em; height: 2.5em; stroke-width: 1.6; }

/* ---- Seletor de ícone (cadastro de categoria) ---- */
.seletor-icone {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.opcao-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 1.15rem;
    color: var(--muted);
    background: var(--surface-alt);
    border: 1px solid var(--rule);
    border-radius: 10px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.opcao-icone:hover {
    color: var(--ink);
    border-color: var(--rule-strong);
}

.opcao-icone.ativa {
    color: var(--brand);
    background: rgba(var(--brand-rgb), 0.12);
    border-color: var(--brand);
}

/* ============================================================
   BOTÕES
   ============================================================ */

.btn,
.btn-primary,
.btn-submit,
.btn-secondary,
.btn-ghost,
.btn-danger,
.btn-warn,
.btn-print,
.btn-sm-primary,
.btn-sm-danger,
.btn-sm-warning,
.btn-sm-secondary,
.btn-filter,
.btn-action-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

/* ---- Primário: a ação principal da tela. Chapado, sem degradê ---- */
.btn-primary,
.btn-submit,
.btn-sm-primary,
.btn-action-primary,
.btn-filter-primary {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--brand-contrast);
}

.btn-primary:hover,
.btn-submit:hover,
.btn-sm-primary:hover,
.btn-action-primary:hover,
.btn-filter-primary:hover {
    background: var(--brand-deep);
    border-color: var(--brand-deep);
}

/* ---- Fantasma: ação secundária. É o padrão de quase tudo ---- */
.btn-ghost,
.btn-print,
.btn-filter,
.btn-secondary,
.btn-sm-secondary {
    background: var(--surface);
    border-color: var(--rule);
    color: var(--body);
}

.btn-ghost:hover,
.btn-print:hover,
.btn-filter:hover,
.btn-secondary:hover,
.btn-sm-secondary:hover {
    background: var(--surface-alt);
    border-color: var(--rule-strong);
    color: var(--ink);
}

/* ---- Destrutivo ---- */
.btn-danger,
.btn-sm-danger {
    background: rgba(var(--state-late-rgb), 0.10);
    border-color: rgba(var(--state-late-rgb), 0.45);
    color: var(--state-late-deep);
}

.btn-danger:hover,
.btn-sm-danger:hover {
    background: rgba(var(--state-late-rgb), 0.18);
    border-color: var(--state-late);
}

/* ---- Atenção: ação que muda estado sem destruir ---- */
.btn-warn,
.btn-sm-warning {
    background: rgba(var(--brand-rgb), 0.10);
    border-color: rgba(var(--brand-rgb), 0.45);
    color: var(--brand-deep);
}

.btn-warn:hover,
.btn-sm-warning:hover {
    background: rgba(var(--brand-rgb), 0.18);
    border-color: var(--brand);
}

/* ---- Tamanhos e largura ---- */
.btn-sm,
.btn-sm-primary,
.btn-sm-danger,
.btn-sm-warning,
.btn-sm-secondary {
    padding: 7px 14px;
    font-size: 0.8rem;
    gap: 6px;
}

.btn-block,
.btn-action-primary,
.btn-submit,
.btn-secondary {
    width: 100%;
    display: flex;
    padding: 13px 18px;
    font-size: 0.9rem;
}

.btn:focus-visible,
[class*="btn-"]:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.btn:disabled,
[class*="btn-"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Empurra o botão de imprimir para a direita da barra de filtro */
.filter-bar .btn-print,
.filter-bar .btn-ghost.push-right {
    margin-left: auto;
}

/* ============================================================
   CARTÃO
   Superfície plana com régua de 1px. Sem vidro fosco, sem
   sombra colorida: cartão é papel sobre mesa.
   ============================================================ */

.card,
.metric-card,
.chart-card,
.card-panel,
.filters-card,
.part-metric-card,
.email-metric-card,
.rec-metric-card,
.sla-metric-card,
.ranking-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 14px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    /* Quase imperceptível: cartão é papel sobre mesa. No tema claro
       ela é o que separa o branco da superfície do quase-branco do
       fundo; no escuro some, porque lá quem separa é a régua. */
    box-shadow: var(--shadow-suave);
}

.card-title,
.chart-card-title,
.card-panel-title,
.ranking-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 14px;
}

/* ---- Faixa de acento no topo do cartão ----
   Substitui os degradês por uma faixa chapada: a cor diz qual
   estado o número representa, e só isso. */
.card-accent::before,
.metric-card::before,
.part-metric-card::before,
.email-metric-card::before,
.rec-metric-card::before,
.sla-metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--brand);
}

.card-accent.is-aberta::before,
[class*="metric-card"].blue::before,
[class*="metric-card"].info::before      { background: var(--state-open); }

.card-accent.is-resolvida::before,
[class*="metric-card"].green::before,
[class*="metric-card"].emerald::before   { background: var(--state-done); }

.card-accent.is-atrasada::before,
[class*="metric-card"].crimson::before,
[class*="metric-card"].red::before,
[class*="metric-card"].alto::before      { background: var(--state-late); }

.card-accent.is-atencao::before,
[class*="metric-card"].gold::before,
[class*="metric-card"].amber::before,
[class*="metric-card"].warning::before,
[class*="metric-card"].medio::before,
[class*="metric-card"].indigo::before,
[class*="metric-card"].purple::before    { background: var(--brand); }

/* ============================================================
   CHIP DE STATUS
   Ponto, cor e texto sempre juntos — cerca de 8% dos homens têm
   alguma deficiência de visão de cores, e num sistema de
   severidade a cor sozinha nunca deve carregar o estado.
   ============================================================ */

.chip-status,
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    border: 1px solid;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

.chip-status::before,
.status-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* Aberta — azul-ardósia. Era vermelho, mas "aberta" é o estado
   normal de entrada, não uma falha. */
.chip-status.is-aberta,
.status-badge.aberta {
    background: rgba(var(--state-open-rgb), 0.12);
    border-color: rgba(var(--state-open-rgb), 0.45);
    color: var(--state-open-deep);
}

/* Em andamento — a marca, porque é trabalho em curso */
.chip-status.is-andamento,
.status-badge.em_atendimento,
.status-badge.medio {
    background: rgba(var(--brand-rgb), 0.12);
    border-color: rgba(var(--brand-rgb), 0.45);
    color: var(--brand-deep);
}

.chip-status.is-resolvida,
.status-badge.resolvida,
.status-badge.otimo,
.status-badge.bom {
    background: rgba(var(--state-done-rgb), 0.12);
    border-color: rgba(var(--state-done-rgb), 0.45);
    color: var(--state-done-deep);
}

/* SLA estourado — o vermelho-rosado, reservado ao crítico */
.chip-status.is-atrasada,
.status-badge.atrasada,
.status-badge.estourado,
.status-badge.ruim,
.status-badge.critico {
    background: rgba(var(--state-late-rgb), 0.12);
    border-color: rgba(var(--state-late-rgb), 0.45);
    color: var(--state-late-deep);
}

/* Sem estado, sem cor */
.chip-status.is-neutra,
.status-badge.cancelada {
    background: var(--surface-alt);
    border-color: var(--rule);
    color: var(--muted);
}

/* ---- Papel do usuário ----
   Estava desenhado num style= com três condicionais de template
   dentro. Perfil não é severidade: só o admin ganha cor. */
.role-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--surface-alt);
    border: 1px solid var(--rule);
    color: var(--muted);
}

.role-badge.role-admin {
    background: rgba(var(--brand-rgb), 0.12);
    border-color: rgba(var(--brand-rgb), 0.45);
    color: var(--brand-deep);
}

.role-badge.role-gestor {
    background: rgba(var(--state-open-rgb), 0.12);
    border-color: rgba(var(--state-open-rgb), 0.45);
    color: var(--state-open-deep);
}

.badge-count {
    background: var(--surface-alt);
    border: 1px solid var(--rule);
    padding: 3px 8px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--body);
}

/* ============================================================
   BARRA DE FILTRO
   Estava redesenhada em 6 relatórios, com padding e largura
   levemente diferentes em cada um. Agora é uma só.
   ============================================================ */

.filter-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--surface);
    border: 1px solid var(--rule);
    padding: 12px 20px;
    border-radius: 14px;
    margin-bottom: 24px;
}

.filter-bar form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
}

.filter-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.filter-bar .filter-label {
    display: inline;
    font-size: 0.82rem;
    text-transform: none;
    letter-spacing: 0;
}

.filter-input,
.filter-select {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--rule);
    background: var(--surface-alt);
    color: var(--ink);
    font-family: inherit;
    font-size: 0.85rem;
    transition: border-color 0.2s ease;
}

.filter-input {
    width: 88px;
}

.filter-select {
    width: 100%;
}

.filter-input:focus,
.filter-select:focus {
    outline: none;
    border-color: var(--brand);
}