/* static/css/components.css — o vocabulário visual do SMAIF
 *
 * Botão, card, painel, formulário, filtro, tabela, selo, aviso, paginação,
 * gráfico, ícone. Carregado em toda página (base.html). Antes de criar uma
 * classe no CSS de uma tela, procure aqui: estilo usado em duas telas mora
 * neste arquivo. A referência renderizada é /gestao/design/.
 *
 * O prefixo mg- vem do Portal de Gestão, onde o vocabulário nasceu; vale
 * para qualquer tela. Cor só por papel de tokens.css — nada de hex aqui —,
 * e por isso tudo abaixo funciona nos dois temas.
 */

/* ── Ícone ──────────────────────────────────────────────────────────────────
 * {% icon "nome" %} / SMAIF.icon('nome') geram <svg class="icon icon-nome">.
 * Tamanho acompanha o texto em volta; a cor é a do texto (currentColor). */
.icon {
  width: var(--icon-size); height: var(--icon-size);
  flex-shrink: 0; vertical-align: -0.2em;
}
.text-muted  { color: var(--text-muted); }
.text-faint  { color: var(--text-faint); }
.text-accent { color: var(--accent-text); }
.text-alert  { color: var(--alert-text); }
.text-danger { color: var(--danger-text); }
.mono        { font-family: var(--font-mono); }
.ml-auto     { margin-left: auto; }
/* Espaço acima, na escala de tokens — no lugar de style="margin-top:…" */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.num-tab     { font-variant-numeric: tabular-nums; }

/* ── Página ─────────────────────────────────────────────────────────────── */
.mg-page { padding: var(--space-6) 28px 40px; }
.mg-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; margin-bottom: 18px; }
.mg-head h1 { font-size: var(--fs-2xl); margin: 0 0 2px; color: var(--heading); display: flex; align-items: center; gap: 10px; }
.mg-sub { color: var(--text-muted); font-size: var(--fs-md); }
.mg-actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }

.mg-msg {
  padding: 10px 14px; border-radius: var(--radius-md); margin-bottom: 14px; font-size: var(--fs-md);
  border: 1px solid transparent; line-height: 1.45;
}
.mg-msg > .icon:first-child { margin-right: 4px; }
.mg-msg.success { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent-border); }
.mg-msg.warning { background: var(--alert-soft); color: var(--alert-text); border-color: var(--alert-border); }
.mg-msg.error   { background: var(--danger-soft); color: var(--danger-text); border-color: var(--danger-border); }
.mg-msg.info    { background: var(--info-soft); color: var(--text); border-color: var(--info-border); }

/* Botões */
.mg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid transparent; border-radius: var(--radius-md); padding: 8px 14px;
  font: inherit; font-size: var(--fs-md); font-weight: 600; cursor: pointer; text-decoration: none;
  background: var(--accent); color: var(--on-accent); line-height: 1.2;
  transition: background .12s, border-color .12s;
}
.mg-btn:hover { background: var(--accent-strong); }
.mg-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.mg-btn:disabled, .mg-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.mg-btn.ghost { background: var(--surface); color: var(--text-soft); border-color: var(--border-strong); }
.mg-btn.ghost:hover { background: var(--surface-2); color: var(--text); }
.mg-btn.danger { background: var(--danger); color: var(--on-accent); }
.mg-btn.danger:hover { filter: brightness(.9); }
.mg-btn.ghost.danger { background: var(--surface); color: var(--danger-text); border-color: var(--danger-border); }
.mg-btn.ghost.danger:hover { background: var(--danger-soft); filter: none; }
.mg-btn.alert { background: var(--alert); color: var(--on-bright); }
.mg-btn.alert:hover { filter: brightness(.95); }
.mg-btn.sm { padding: 5px 10px; font-size: var(--fs-sm); }
/* Ação discreta de linha de tabela (editar, pausar, excluir): só o ícone, sem
   caixa; o {% icon … label="…" %} dá o nome para o leitor de tela. */
.mg-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; background: none; border: 0;
  padding: 5px 6px; border-radius: var(--radius-sm); cursor: pointer; color: var(--text-muted); font: inherit;
}
.mg-icon-btn:hover { background: var(--surface-2); color: var(--text); }
.mg-icon-btn.danger { color: var(--danger-text); }
.mg-icon-btn.danger:hover { background: var(--danger-soft); }
.mg-inline { display: inline; }
/* Botão com cara de link (ação secundária dentro de texto ou de tabela) */
.mg-linkbtn { background: none; border: 0; padding: 0; font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--accent-text); cursor: pointer; }
.mg-linkbtn:hover { text-decoration: underline; }
.mg-linkbtn.danger { color: var(--danger-text); }
/* Botão só com ícone: quadrado, e o label="…" do ícone é o nome dele para o leitor de tela */
.mg-btn.icon-only { padding: 8px; }
.mg-btn.icon-only.sm { padding: 5px; }
.mg-link { color: var(--accent-text); text-decoration: none; font-weight: 600; }
.mg-link:hover { text-decoration: underline; }

/* Cards de indicador */
.mg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--space-3); margin-bottom: 22px; }
.mg-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 14px var(--space-4); text-decoration: none; color: inherit; display: block;
  box-shadow: var(--shadow-sm);
}
a.mg-card:hover { border-color: var(--border-strong); }
.mg-card .num { font-size: 1.75rem; font-weight: 700; line-height: 1.1; color: var(--heading); font-variant-numeric: tabular-nums; }
.mg-card .lbl { font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 5px; }
.mg-card .sub { font-size: var(--fs-xs); color: var(--text-faint); margin-top: 3px; }
.mg-card.alert { border-color: var(--alert-border); background: var(--alert-soft); }
.mg-card.alert .num { color: var(--alert-text); }
.mg-card.ok .num { color: var(--accent-text); }
.mg-card.danger .num { color: var(--danger-text); }

/* Painéis */
.mg-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-4) 18px; margin-bottom: 18px; box-shadow: var(--shadow-sm);
}
.mg-panel h2 { font-size: var(--fs-lg); margin: 0 0 var(--space-3); color: var(--heading); display: flex; align-items: center; gap: var(--space-2); }
.mg-panel h2 .count { background: var(--accent); color: var(--on-accent); font-size: var(--fs-xs); font-weight: 700; border-radius: var(--radius-pill); padding: 1px 9px; }
.mg-panel h3 { font-size: var(--fs-md); margin: var(--space-4) 0 var(--space-2); color: var(--text-soft); }
.mg-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; }
/* Link à direita no título do painel ("ver todas →") */
.mg-panel-link { margin-left: auto; font-size: var(--fs-sm); font-weight: 600; color: var(--accent-text); text-decoration: none; }
.mg-panel-link:hover { text-decoration: underline; }
.mg-card .num .icon { width: .8em; height: .8em; vertical-align: -0.05em; margin-right: 2px; color: var(--text-muted); }
.mg-empty { color: var(--text-faint); font-size: var(--fs-md); padding: 22px 4px; text-align: center; }
.mg-sep { border: 0; border-top: 1px solid var(--border); margin: var(--space-4) 0; }

/* Formulário: rótulo em cima, campo embaixo. .mg-field (ou o <label> filho
   direto de .mg-form-grid) envolve o par; .mg-form-grid alinha vários em
   colunas que quebram no celular. */
.mg-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px var(--space-3); align-items: end; }
.mg-form-grid .wide { grid-column: span 2; }
.mg-field, .mg-form-grid > label, .mg-form-grid > div > label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-xs); color: var(--text-soft); font-weight: 600; }
.mg-form-grid > div { display: flex; flex-direction: column; gap: 4px; }
.mg-field .hint { font-weight: 400; color: var(--text-faint); }
.mg-hint { font-size: var(--fs-xs); color: var(--text-faint); margin: var(--space-2) 0 0; }
.mg-input, .mg-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.mg-field select, .mg-field textarea,
.mg-form-grid input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .mg-form-grid select, .mg-form-grid textarea,
.mg-filters input:not([type="checkbox"]), .mg-filters select {
  background: var(--input-bg); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 7px 9px; font: inherit; font-size: var(--fs-md); font-weight: 400; color: var(--text);
}
.mg-input:focus, .mg-field input:focus, .mg-field select:focus, .mg-field textarea:focus,
.mg-form-grid input:focus, .mg-form-grid select:focus, .mg-form-grid textarea:focus,
.mg-filters input:focus, .mg-filters select:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.mg-input::placeholder, .mg-field input::placeholder, .mg-field textarea::placeholder { color: var(--text-faint); }
.mg-field input:disabled, .mg-field select:disabled, .mg-input:disabled,
.mg-form-grid input:disabled, .mg-form-grid select:disabled { background: var(--surface-sunken); color: var(--text-muted); }
.mg-form-grid input, .mg-form-grid select, .mg-form-grid textarea { min-width: 0; }
.mg-check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-md); color: var(--text-soft); cursor: pointer; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

/* Filtros */
.mg-filters {
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
}
.mg-filters label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-xs); color: var(--text-soft); font-weight: 600; }
.mg-filters input:not([type="checkbox"]), .mg-filters select { min-width: 130px; }
.mg-filters .check { flex-direction: row; align-items: center; gap: 6px; padding-bottom: var(--space-2); }
.mg-filters .check input { min-width: 0; }
.mg-filters .mg-link { font-size: var(--fs-sm); padding-bottom: 9px; }
.mg-filters .presets { display: flex; gap: 4px; flex-wrap: wrap; align-self: center; }
.mg-filters .presets a { font-size: var(--fs-xs); padding: 4px 9px; border-radius: var(--radius-pill); border: 1px solid var(--border); color: var(--text-soft); text-decoration: none; }
.mg-filters .presets a.on, .mg-filters .presets a:hover { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent-border); }

/* Tabelas */
.mg-tablewrap { overflow-x: auto; }
table.mg-table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
table.mg-table th {
  text-align: left; font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-faint); padding: var(--space-2) 10px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.mg-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.mg-table tr:hover td { background: var(--surface-2); }
table.mg-table td.num, table.mg-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.mg-table tr.total td { font-weight: 700; border-top: 2px solid var(--border-strong); background: var(--surface-2); }
table.mg-table .muted { color: var(--text-faint); font-size: var(--fs-xs); }
table.mg-table .acts { white-space: nowrap; text-align: right; }
table.mg-table .acts a { margin-left: 6px; font-size: var(--fs-sm); text-decoration: none; color: var(--accent-text); }
table.mg-table .acts a:hover { text-decoration: underline; }
tr.mg-anulada td { opacity: .55; text-decoration: line-through; }

/* Tabela editável (linhas de equipe, gastos, envolvidos): adicionar e remover linha */
.btn-add {
  margin-top: var(--space-2); padding: 5px 12px; font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
  background: var(--surface); color: var(--accent-text); border: 1px solid var(--accent-border); border-radius: var(--radius-sm);
}
.btn-add:hover { background: var(--accent-soft); }
.btn-del {
  display: inline-flex; align-items: center; background: none; color: var(--danger-text); cursor: pointer;
  border: 1px solid var(--danger-border); border-radius: 4px; padding: 3px 5px;
}
.btn-del:hover { background: var(--danger-soft); }

/* Selos */
.mg-badge {
  display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-2xs); padding: 2px 9px;
  border-radius: var(--radius-pill); font-weight: 700; white-space: nowrap;
}
.mg-badge .icon { width: 1.1em; height: 1.1em; }
a.mg-badge { text-decoration: none; }
a.mg-badge:hover { filter: brightness(.96); }
.mg-badge.gray   { background: var(--surface-sunken); color: var(--text-soft); }
.mg-badge.green  { background: var(--accent-soft); color: var(--accent-text); }
.mg-badge.orange { background: var(--alert-soft); color: var(--alert-text); }
.mg-badge.red    { background: var(--danger-soft); color: var(--danger-text); }
.mg-badge.blue   { background: var(--info-soft); color: var(--info); }
/* Fases da ocorrência: cores fixas de tokens.css (--fase-*). As três claras
   levam texto escuro — o branco ficava abaixo de 3:1 ali. */
.mg-fase {
  display: inline-block; font-size: var(--fs-2xs); padding: 2px 9px; border-radius: var(--radius-pill);
  font-weight: 700; color: var(--on-accent); white-space: nowrap;
}
.mg-fase.detected   { background: var(--fase-detected);   color: var(--on-bright); }
.mg-fase.observing  { background: var(--fase-observing); }
.mg-fase.dispatched { background: var(--fase-dispatched); color: var(--on-bright); }
.mg-fase.combat     { background: var(--fase-combat);     color: var(--on-bright); }
.mg-fase.aftermath  { background: var(--fase-aftermath); }
.mg-fase.dead       { background: var(--fase-dead); }
/* Risco da ocorrência */
.mg-risco.no_risk { color: var(--text-faint); }
.mg-risco.low     { color: var(--accent-text); }
.mg-risco.medium  { color: var(--alert-text); }
.mg-risco.high    { color: var(--alert-text); font-weight: 700; }

/* Nível de risco (Nulo → Muito Alto): a cor vem de riscos.py e entra como
   variável — <span class="mg-nivel" style="--risk: {{ cor }}">Médio</span>.
   A cor fica na bolinha e o texto na cor normal: amarelo sobre branco dava
   1,9:1 de contraste. */
.mg-nivel { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 700; color: var(--text); white-space: nowrap; }
.mg-nivel::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--risk, var(--text-faint)); box-shadow: 0 0 0 2px var(--surface); flex-shrink: 0; }

/* Selos de risco do boletim (partials/_selos_risco.html): um por tipo de risco,
   a cor do nível na bolinha (--risk), o texto na cor normal. */
.selos { display: flex; flex-wrap: wrap; gap: 6px; }
.selo {
  display: inline-flex; align-items: center; gap: 5px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-md); padding: 3px var(--space-2); font-size: var(--fs-xs);
}
.selo-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--risk); }
.selo-rot { color: var(--text-muted); }
.selo-niv { font-weight: 700; color: var(--text); }

/* Barra de completude (ROI) */
.mg-meter { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.mg-meter .bar { width: 64px; height: 6px; background: var(--surface-sunken); border-radius: 3px; overflow: hidden; }
.mg-meter .bar i { display: block; height: 100%; width: var(--pct, 0%); background: var(--accent); }
.mg-meter.low .bar i { background: var(--alert); }

/* Paginação */
.mg-pager { display: flex; gap: 6px; align-items: center; justify-content: flex-end; margin-top: 14px; font-size: var(--fs-sm); color: var(--text-muted); }
.mg-pager a { padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); text-decoration: none; color: var(--text-soft); background: var(--surface); }
.mg-pager a:hover { background: var(--surface-2); }

/* Relatórios */
.mg-report-head { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3); align-items: start; margin-bottom: 18px; }
.mg-report-head h1 { font-size: var(--fs-2xl); margin: 0 0 2px; color: var(--heading); display: flex; align-items: center; gap: 10px; }
.mg-report-meta { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; margin-top: var(--space-2); }
.mg-report-meta b { color: var(--text); }
.mg-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 18px; margin-bottom: 18px; }
.mg-chart { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px var(--space-4); min-width: 0; }
.mg-chart h3 { font-size: var(--fs-md); margin: 0 0 10px; color: var(--text); display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.mg-chart .cv { position: relative; height: 240px; }
.mg-chart .nota { font-size: var(--fs-xs); color: var(--text-faint); margin-top: var(--space-2); }
.mg-chart-toggle {
  background: none; border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--text-muted);
  font: inherit; font-size: var(--fs-2xs); padding: 2px var(--space-2); cursor: pointer;
}
.mg-chart-toggle:hover { background: var(--surface-2); color: var(--text); }
.mg-chart-table { margin-top: var(--space-2); max-height: 260px; overflow: auto; }
.mg-chart-table table { font-size: var(--fs-xs); }
.mg-notes { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; }
.mg-panel .mg-notes { margin-top: var(--space-2); }
.mg-catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.mg-catalog a { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4) 18px; text-decoration: none; color: inherit; }
.mg-catalog a:hover { border-color: var(--accent-border); background: var(--surface-2); }
.mg-catalog .ic { color: var(--accent-text); }
.mg-catalog .ic .icon { width: 24px; height: 24px; }
.mg-catalog .t { font-weight: 700; margin: 6px 0 4px; color: var(--heading); }
.mg-catalog .d { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.5; }
.mg-catalog .g { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); margin-top: var(--space-2); }

/* Modal: .mg-modal-bg (fundo) > .mg-modal (caixa). Aberto = sem o atributo hidden. */
.mg-modal-bg { position: fixed; inset: 0; background: var(--overlay); display: flex; align-items: center; justify-content: center; z-index: 2000; padding: var(--space-4); }
.mg-modal-bg[hidden] { display: none; }
.mg-modal {
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: var(--space-5) var(--space-6); width: min(520px, 100%); max-height: 90vh; overflow: auto;
}
.mg-modal h2 { margin: 0 0 var(--space-3); font-size: var(--fs-lg); color: var(--heading); }

/* Galeria de foto em popup (static/js/lightbox.js), tela cheia, sempre escura:
   é foto. Compartilhado — qualquer página pode chamar window.abrirGaleriaMidia. */
.midia-overlay {
    position: fixed; inset: 0; z-index: 100000; background: rgba(0, 0, 0, .92); color: white;
    display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-sans);
}
.midia-topo { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.midia-titulo { font-size: var(--fs-base); flex: 1; }
.midia-contador { font-size: var(--fs-md); opacity: .7; }
.midia-img { max-width: 92vw; max-height: 76vh; object-fit: contain; border-radius: var(--radius-sm); }
.midia-nav { display: flex; align-items: center; gap: var(--space-4); margin-top: 14px; }
.midia-btn { background: none; border: 0; color: white; cursor: pointer; padding: 4px; display: inline-flex; }
.midia-btn .icon { width: 24px; height: 24px; }
.midia-btn.redondo { background: rgba(255, 255, 255, .13); border-radius: var(--radius-pill); padding: 8px 18px; }
.midia-abrir { color: white; opacity: .75; font-size: var(--fs-sm); text-decoration: underline; }

/* ── Celular ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .mg-page { padding: var(--space-4) 14px 32px; }
  .mg-report-head { grid-template-columns: 1fr; }
}