/* ============================================================
   EVSP Design System — componentes reutilizáveis
   Cores/ícones/tipografia padronizados. Ver static/design-system.json
   ============================================================ */

/* Ícone base: herda a cor (currentColor), traço suave */
.ds-ico {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* Botão de ação compacto (ícone + tooltip via title) */
.act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-sub);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  text-decoration: none;
  font-family: var(--font);
}
.act:hover { background: var(--bg-alt); text-decoration: none; }
.act:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* Cores semânticas — a mesma cor = a mesma intenção em todos os apps */
.act--primary { color: var(--primary); }
.act--primary:hover { background: var(--primary-light); }
.act--success { color: var(--success); }
.act--success:hover { background: var(--success-light); }
.act--warning { color: var(--warning); }
.act--warning:hover { background: var(--warning-light); }
.act--error { color: var(--error); }
.act--error:hover { background: var(--error-light); }
.act--accent { color: var(--accent); }
.act--accent:hover { background: var(--accent-light); }

/* Form inline que envolve um botão de ação */
.act-form { display: inline; margin: 0; padding: 0; }

/* Barra que agrupa ações numa linha (sem quebrar) */
.act-bar {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-wrap: nowrap;
}

/* Utilitários */
.nowrap { white-space: nowrap; }

/* Barra de filtros encostada no título (economiza altura vertical) */
.titulo-filtros {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-bottom: var(--s4);
}
.titulo-filtros h2 { margin: 0; }
.titulo-filtros .filtros-inline {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
}
.filtros-inline select {
  font-size: var(--text-sm);
  padding: var(--s1) var(--s3);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-md);
  background: var(--bg-surface);
  color: var(--text-main);
}

/* ------------------------------------------------------------
   Cabeçalhos de tabela: capitalização natural (sem caixa-alta)
   ------------------------------------------------------------ */
.admin-table th { text-transform: none; letter-spacing: 0; }

/* ------------------------------------------------------------
   Turmas: etiqueta, switcher no cabeçalho e badge de pendências
   ------------------------------------------------------------ */
.turma-tag {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  background: var(--accent-light);
  color: var(--accent);
  border: 1px solid #d5d0ea;
  border-radius: 99px;
  padding: 1px 10px;
  font-weight: 500;
  white-space: nowrap;
}
.turma-tag--pend {
  background: var(--warning-light);
  color: var(--warning);
  border-color: var(--warning-border);
}

.turma-switch {
  font-family: var(--font);
  font-size: var(--text-sm);
  padding: var(--s1) var(--s3);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-md);
  background: var(--bg-surface);
  color: var(--text-main);
  max-width: 200px;
}
.turma-switch:focus { outline: none; border-color: var(--primary); }

.badge-pend {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--warning);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* ------------------------------------------------------------
   Mobile (≤640px): a tabela admin vira cartões empilhados.
   Cada célula mostra o rótulo via data-label. Sem rolagem lateral.
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  .admin-table thead { display: none; }
  .admin-table, .admin-table tbody, .admin-table tr, .admin-table td { display: block; width: 100%; }
  .admin-table tr {
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    background: var(--bg-surface);
    margin-bottom: var(--s3);
    padding: var(--s3) var(--s4);
  }
  .admin-table td {
    border: none;
    padding: var(--s1) 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    text-align: right;
  }
  .admin-table td::before {
    content: attr(data-label);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-align: left;
    flex-shrink: 0;
  }
  /* Linha de ações ocupa a largura toda, alinhada à direita */
  .admin-table td.td-acoes { justify-content: flex-end; padding-top: var(--s2); }
  .admin-table td.td-acoes::before { display: none; }
  /* Título do registro em destaque, sem rótulo */
  .admin-table td.td-principal { justify-content: flex-start; text-align: left; }
  .admin-table td.td-principal::before { display: none; }
}