/* COMPONENTES / ALOCAÇÃO: o modal do assistente e a lista de conflitos — a interface
   de conflito, presente em TODAS as telas. Saiu de componentes.css por tamanho. */

/* Lista de Conflitos */

.conflict-list {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
}

.conflict-item {
  background: var(--alerta-camada);
  border: 1px solid var(--alerta-borda);
  border-radius: var(--radius-md);
  padding: var(--esp-4) var(--esp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-5);
  transition: var(--transition-fast);
}

.conflict-item:hover {
  background: var(--alerta-camada-forte);
  border-color: var(--alerta-borda-forte);
  transform: translateX(4px);
}

.conflict-item-left {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-4);
}

.conflict-icon {
  color: var(--alerta);
  font-size: 18px;
  margin-top: 2px;
  filter: drop-shadow(0 0 5px var(--brilho-alerta));
}

.conflict-desc h4 {
  font-size: var(--fonte-md);
  font-weight: 600;
  color: var(--texto);
}

.conflict-desc p {
  font-size: var(--fonte-xs);
  color: var(--texto-suave);
  margin-top: 4px;
}

.conflict-meta {
  display: flex;
  gap: var(--esp-2);
  margin-top: 6px;
}

.meta-tag {
  font-size: var(--fonte-xs);
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--camada-forte);
  color: var(--texto-suave);
}

.meta-tag.time {
  background: var(--info-camada);
  color: var(--info);
}

.meta-tag.location {
  background: var(--alerta-camada);
  color: var(--alerta);
}

/* ==========================================================================
   ESTILIZAÇÃO DE MODAIS (GLASSMORPHISM)
   ========================================================================== */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--overlay-modal);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-container {
  width: 500px;
  max-width: 90%;
  background: var(--fundo-elevado);
  border: 1px solid var(--borda);
  border-radius: var(--radius-lg);
  box-shadow: var(--sombra-modal);
  transform: translateY(20px) scale(0.95);
  transition: transform var(--transition-normal);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}

.modal-large {
  width: 800px;
}

.modal-overlay.active .modal-container {
  transform: translateY(0) scale(1);
}

.modal-header {
  padding: var(--esp-5) var(--esp-6);
  border-bottom: 1px solid var(--borda);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header h2 {
  font-size: var(--fonte-xl);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal-header-icon {
  font-size: 18px;
}

.modal-close {
  background: transparent;
  border: none;
  color: var(--texto-suave);
  font-size: 18px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.modal-close:hover {
  color: var(--texto);
}

.modal-body {
  padding: var(--esp-6);
  overflow-y: auto;
}

.modal-footer {
  padding: var(--esp-4) var(--esp-6);
  border-top: 1px solid var(--borda);
  display: flex;
  justify-content: flex-end;
  gap: var(--esp-3);
}

.btn-left {
  margin-right: auto;
}

/* Banner Informativo no Modal */

.allocation-info-banner {
  background: var(--camada-sutil);
  border: 1px solid var(--borda);
  border-radius: var(--radius-md);
  padding: var(--esp-4) var(--esp-5);
  margin-bottom: var(--esp-5);
  display: flex;
  justify-content: space-between;
  gap: var(--esp-4);
}

.info-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.info-label {
  font-size: var(--fonte-xs);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--texto-suave);
}

.info-val {
  font-size: var(--fonte-sm);
  font-weight: 700;
  color: var(--texto);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--esp-4);
}

.col-6 {
  grid-column: span 6;
}

.col-12 {
  grid-column: span 12;
}

.field-hint {
  font-size: var(--fonte-xs);
  color: var(--texto-fraco);
  margin-top: 4px;
}

/* Painel de Conflitos do Modal */

.live-conflict-panel {
  background: var(--alerta-camada);
  border: 1px solid var(--alerta-borda);
  border-radius: var(--radius-md);
  padding: var(--esp-4) var(--esp-5);
  margin-top: var(--esp-5);
}

.live-conflict-panel .panel-header {
  font-size: var(--fonte-xs);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  margin-bottom: var(--esp-2);
}

.live-conflict-panel .panel-body {
  font-size: var(--fonte-xs);
  color: var(--texto-suave);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ==========================================================================
   CAMPO DE MATÉRIA COM SUGESTÕES (combobox próprio)

   Por que não <datalist>: aquele elemento é desenhado pelo navegador, não
   aceita CSS, e a lista que ele abria não parecia com os <select> de Turma,
   Quantidade e Sala que ficam ao lado — mesma tela, dois visuais.

   Estas regras não pintam nada novo: reusam os MESMOS tokens do .form-control
   (fundo do campo, borda, raio, cores de texto), para o campo de matéria e os
   selects vizinhos ficarem indistinguíveis nos dois temas.
   ========================================================================== */

.campo-combo {
  position: relative;
}

/* O input dentro do combo herda .form-control; precisa ocupar a largura toda,
   já que agora tem uma div em volta.

   A ALTURA É O DETALHE QUE TRAI: <input> e <select> com o mesmo padding, a mesma
   borda e a mesma fonte NÃO dão a mesma altura — o navegador monta a caixa de
   linha do select com folga própria, e medido aqui o input saía 40px contra 42px
   dos vizinhos. Fixar a altura da linha em 20px iguala a caixa de conteúdo dos
   dois (20 + 10 + 10 de padding + 2 de borda = 42) sem cravar a altura final,
   que continua saindo do padding e da borda como nos outros campos. */
.campo-combo .form-control {
  width: 100%;
  box-sizing: border-box;
  line-height: 20px;
}

.campo-combo-lista {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  /* Acima do corpo do modal, mas o modal inteiro continua por cima da tela. */
  z-index: 20;
  margin: 0;
  padding: 4px;
  list-style: none;
  max-height: 220px;
  overflow-y: auto;
  background: var(--fundo-elevado);
  border: 1px solid var(--borda-forte);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-main);
}

.campo-combo-lista[hidden] {
  display: none;
}

.campo-combo-lista li {
  padding: 8px var(--esp-3);
  border-radius: var(--radius-sm);
  font-size: var(--fonte-md);
  color: var(--texto);
  cursor: pointer;
}

/* Um estado só para o mouse e para o teclado: a opção sob o cursor e a opção
   navegada com as setas se destacam do mesmo jeito, senão quem usa teclado
   fica sem saber onde está. */
.campo-combo-lista li:hover,
.campo-combo-lista li.ativa {
  background: var(--camada-hover);
  color: var(--texto);
}

.campo-combo-lista li.vazio {
  color: var(--texto-fraco);
  cursor: default;
  font-size: var(--fonte-sm);
}

.campo-combo-lista li.vazio:hover {
  background: none;
}

/* Pente fino: o assistente não deve criar rolagem horizontal. Grid items podem
   ter uma largura mínima implícita pelo conteúdo; min-width:0 permite que eles
   encolham dentro do modal. */
#modal-allocation .modal-container {
  width: min(760px, 92vw);
  max-width: 92vw;
}
#modal-allocation .modal-body {
  min-width: 0;
  overflow-x: hidden;
}
#modal-allocation .form-grid {
  min-width: 0;
}
#modal-allocation .form-grid > .form-group {
  min-width: 0;
}
@media (max-width: 680px) {
  #modal-allocation .col-6,
  #modal-allocation .col-12 {
    grid-column: span 12;
  }
}

/* Turma e componente curricular ficam como dois campos independentes, com
   espaço real entre si mesmo quando o texto é longo. */
#modal-allocation #alloc-turma,
#modal-allocation #alloc-materia {
  min-width: 0;
}