/* ================================================================
   CPA — Tela de Itens de Avaliação
   css/itens.css
   ================================================================ */

/* ────────────────────────────────────────────────────────────────
   CAMPO CÓDIGO
   ──────────────────────────────────────────────────────────────── */
.itens-field--codigo {
  flex: 0 0 120px;
  min-width: 110px;
}

/* ────────────────────────────────────────────────────────────────
   LINHAS CONDICIONAIS — ANIMAÇÃO DE ENTRADA
   ──────────────────────────────────────────────────────────────── */
.itens-cond-row {
  animation: itensFadeIn .22s ease;
}

@keyframes itensFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ────────────────────────────────────────────────────────────────
   CHIP DO OBJ PDI (variante azul-escuro)
   ──────────────────────────────────────────────────────────────── */
.itens-obj-chip {
  background: #ebf4ff;
  border-color: #bee3f8;
  color: #2b6cb0;
  gap: 5px;
}

.itens-obj-chip .q-chip-remove { color: #4299e1; }
.itens-obj-chip .q-chip-remove:hover { background: #4299e1; }

/* ────────────────────────────────────────────────────────────────
   MODELOS RÁPIDOS LIKERT
   ──────────────────────────────────────────────────────────────── */
.itens-likert-models {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: #f7f8fa;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
}

.itens-models-label {
  font-size: .74rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.itens-models-label i { color: var(--color-accent); }

.itens-models-btns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.itens-model-btn {
  padding: 4px 12px;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  font-family: var(--font-base);
  font-size: .73rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  cursor: pointer;
  transition: var(--transition);
}

.itens-model-btn:hover {
  border-color: var(--color-primary-light);
  background: var(--color-primary-xlight);
  color: var(--color-primary);
}

/* ────────────────────────────────────────────────────────────────
   BLOCO DE ALTERNATIVAS
   ──────────────────────────────────────────────────────────────── */
.itens-alt-block {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  background: #fafbfc;
  margin-bottom: 16px;
}

.itens-alt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.itens-alt-count {
  font-size: .72rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

/* Lista de alternativas */
.itens-alt-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 10px;
}

/* Item de alternativa */
.itens-alt-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 4px 4px;
  border-radius: var(--radius-sm);
  transition: background .12s;
}

.itens-alt-item:hover { background: #f0f2f5; }
.itens-alt-item.itens-alt-over { background: var(--color-primary-xlight); }
.itens-alt-item.itens-alt-dragging { opacity: .45; }

/* Ícone de drag */
.itens-alt-drag {
  color: var(--color-border-mid);
  font-size: .75rem;
  cursor: grab;
  flex-shrink: 0;
  padding: 2px 3px;
}

.itens-alt-drag:active { cursor: grabbing; }

/* Número da opção */
.itens-alt-num {
  width: 20px;
  height: 20px;
  background: var(--color-primary-xlight);
  border: 1px solid #c3dfc8;
  border-radius: 50%;
  font-size: .68rem;
  font-weight: 700;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Input da alternativa */
.itens-alt-input {
  flex: 1;
  height: 32px !important;
  font-size: .8rem !important;
}

/* Botão remover alternativa */
.itens-alt-remove {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: .72rem;
  transition: var(--transition);
  flex-shrink: 0;
  border: 1px solid transparent;
}

.itens-alt-remove:hover {
  background: #fde8e8;
  color: #e53e3e;
  border-color: #fbb6b6;
}

/* Botão adicionar */
.itens-add-alt-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px dashed var(--color-border-mid);
  border-radius: var(--radius-sm);
  font-family: var(--font-base);
  font-size: .77rem;
  color: var(--color-primary-mid);
  background: transparent;
  cursor: pointer;
  transition: var(--transition);
  width: 100%;
  justify-content: center;
}

.itens-add-alt-btn:hover {
  border-color: var(--color-primary-light);
  background: var(--color-primary-xlight);
}

/* ────────────────────────────────────────────────────────────────
   BADGES DE CÓDIGO — POR TIPO
   ──────────────────────────────────────────────────────────────── */
.itens-codigo-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
  font-family: 'Courier New', monospace;
  white-space: nowrap;
}

.itens-codigo--institucional { background: #ebf4ff; border: 1px solid #bee3f8; color: #2b6cb0; }
.itens-codigo--curso         { background: #fdf2f8; border: 1px solid #fbb6ce; color: #97266d; }
.itens-codigo--perfil        { background: #fef3c7; border: 1px solid #fcd34d; color: #92400e; }

/* ────────────────────────────────────────────────────────────────
   BADGES DE TIPO DE AVALIAÇÃO
   ──────────────────────────────────────────────────────────────── */
.itens-tipo-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: .7rem;
  font-weight: 600;
  white-space: nowrap;
}

.itens-tipo--institucional { background: #ebf4ff; color: #2b6cb0; border: 1px solid #bee3f8; }
.itens-tipo--curso         { background: #fdf2f8; color: #97266d; border: 1px solid #fbb6ce; }
.itens-tipo--perfil        { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }

/* ────────────────────────────────────────────────────────────────
   BADGES DE TIPO DE PERGUNTA
   ──────────────────────────────────────────────────────────────── */
.itens-perg-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: .7rem;
  font-weight: 600;
  white-space: nowrap;
}

.itens-perg--likert { background: #f0fff4; color: #276749; border: 1px solid #9ae6b4; }
.itens-perg--opcoes { background: #fffbeb; color: #92400e; border: 1px solid #fcd34d; }

/* ────────────────────────────────────────────────────────────────
   CÉLULAS DA TABELA
   ──────────────────────────────────────────────────────────────── */
.itens-nome-text {
  font-size: .8rem;
  font-weight: 600;
  color: var(--color-text-primary);
  max-width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* Mini OBJ PDI abaixo do nome */
.itens-obj-mini {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  margin-top: 3px;
}

.itens-obj-mini-tag {
  padding: 1px 6px;
  background: #ebf4ff;
  border: 1px solid #bee3f8;
  border-radius: 8px;
  font-size: .63rem;
  font-weight: 600;
  color: #2b6cb0;
}

/* Dimensão abreviada */
.itens-dim-short {
  font-size: .77rem;
  color: var(--color-text-secondary);
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* Critério */
.itens-criterio-text {
  font-size: .77rem;
  color: var(--color-text-secondary);
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* Coluna de dimensão e critério */
.itens-col-dim     { width: 155px; }
.itens-col-criterio{ width: 120px; }

/* Linha inativa */
.itens-table tbody tr.itens-row--inactive { opacity: .65; }
.itens-table tbody tr.itens-row--inactive:hover { opacity: 1; }
.itens-table tbody tr.itens-row--inactive .itens-nome-text {
  text-decoration: line-through;
  text-decoration-color: var(--color-border-mid);
  text-decoration-thickness: 1px;
}

/* Hover */
.itens-table tbody tr:hover .itens-nome-text { color: var(--color-primary); }

/* ────────────────────────────────────────────────────────────────
   MODAL VISUALIZAR — BODY ESPECÍFICO
   ──────────────────────────────────────────────────────────────── */
.itens-view-modal {
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
}

.itens-view-body { padding: 4px 0 8px; }

.itens-view-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  margin-bottom: 16px;
}

.itens-view-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.itens-view-row--full { grid-column: 1 / -1; }

.itens-view-lbl {
  font-size: .7rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.itens-view-val {
  font-size: .82rem;
  color: var(--color-text-primary);
}

.itens-view-nome {
  font-size: .88rem !important;
  font-weight: 600;
  line-height: 1.4;
}

.itens-view-section {
  border-top: 1px solid var(--color-border);
  padding-top: 14px;
  margin-top: 4px;
  margin-bottom: 14px;
}

.itens-view-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

/* Lista de alternativas no modal */
.itens-view-alts {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.itens-view-alt-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  background: #f7f8fa;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: .8rem;
  color: var(--color-text-secondary);
}

.itens-view-alt-num {
  width: 22px;
  height: 22px;
  background: var(--color-primary-xlight);
  border: 1px solid #c3dfc8;
  border-radius: 50%;
  font-size: .68rem;
  font-weight: 700;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ────────────────────────────────────────────────────────────────
   RESPONSIVIDADE
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .itens-col-criterio { display: none; }
}

@media (max-width: 900px) {
  .itens-col-dim { display: none; }
  .itens-nome-text { max-width: 180px; }
}

@media (max-width: 768px) {
  .itens-table th:nth-child(4),
  .itens-table td:nth-child(4) { display: none; } /* Tipo Pergunta */

  .itens-field--codigo { flex: 1 1 100%; min-width: unset; }
  .itens-view-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .itens-table th:nth-child(3),
  .itens-table td:nth-child(3) { display: none; } /* Tipo Avaliação */
}