/* utils.css — Menu Utilitários: nav secundária (sub-menus) + conteúdo */
/* Sprint 37.7: alinhado ao padrão Conf (conf-shell): nav 210px transparente + gap,
   sem painel branco/borda. Mantém os grupos expansíveis (intencional p/ Utils). */
.utils { display: flex; min-height: 0; flex: 1; gap: 18px; }
.utils-nav { width: 210px; flex-shrink: 0; overflow-y: auto; padding: 4px 0; background: transparent; }
.utils-sec { margin-bottom: 4px; }
.utils-sec .sec-h { display: flex; align-items: center; gap: 8px; padding: 8px 16px; font-size: 11px; font-weight: 600;
  color: var(--az-text-secondary); text-transform: uppercase; letter-spacing: .4px; cursor: pointer; user-select: none; }
.utils-sec .sec-h:hover { color: var(--az-text-primary); }
.utils-sec .sec-h .caret { margin-left: auto; transition: transform .12s; font-size: 14px; }
.utils-sec.collapsed .sec-h .caret { transform: rotate(-90deg); }
.utils-sec.collapsed .sec-items { display: none; }
/* alinhado ao padrão Conf (Sprint 10): item arredondado, cor primária, sem barra lateral */
.utils-item { display: flex; align-items: center; gap: 8px; margin: 2px 8px; padding: 9px 12px 9px 26px; font-size: 13px; cursor: pointer; color: var(--az-text-secondary); border-radius: 8px; }
.utils-item:hover { background: var(--az-bg-secondary); }
.utils-item.active { background: var(--az-primary-50); color: var(--az-primary); font-weight: 500; }

.utils-content { flex: 1; min-width: 0; overflow-y: auto; padding: 20px 24px; }
.util-head { margin-bottom: 16px; }
.util-head .crumb { font-size: 11px; color: var(--az-text-tertiary); text-transform: uppercase; letter-spacing: .4px; }
.util-head h2 { font-size: 18px; font-weight: 500; margin: 4px 0 2px; }
.util-head .desc { font-size: 13px; color: var(--az-text-secondary); }

.util-banner { display: flex; align-items: flex-start; gap: 10px; background: var(--az-warning-50); color: var(--az-warning-700);
  border-radius: var(--az-radius-md); padding: 12px 14px; font-size: 13px; margin-bottom: 16px; }
.util-banner.info { background: var(--az-primary-50); color: var(--az-primary-dark); }
.util-banner code { font-family: var(--font-mono); font-size: 12px; }

.util-form { display: flex; gap: 12px; align-items: flex-end; margin-bottom: 16px; flex-wrap: wrap; }
.util-form .field { min-width: 200px; flex: 1 1 220px; display: flex; flex-direction: column; }
.util-form .field.grow { flex: 2 1 320px; }
.util-form .field > label {
  display: block;
  font-size: 12px;
  color: var(--az-text-secondary);
  font-weight: 500;
  margin-bottom: 4px;
  height: 18px;             /* labels alinham mesmo se quebrarem linha */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Inputs/selects/combo do .util-form: MESMA altura e padding (visual consistente) */
.util-form .field > input,
.util-form .field > select,
.util-form .field > textarea,
.util-form .field > .adm-input,
.util-form .btn,
.util-form > .btn,
.util-form .btn.combo {
  height: 36px;
  box-sizing: border-box;
  padding: 0 10px;
  font-size: 13px;
  border-radius: 6px;
  border: .5px solid var(--az-border-secondary);
  background: #fff;
}
.util-form .field > textarea { height: auto; min-height: 72px; padding: 8px 10px; }
.util-form .btn.combo { height: 36px; font-weight: 400; }
.util-form .btn.combo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.util-form .btn.primary { margin-left: auto; }
/* Fix: a regra ".util-form .btn { background:#fff }" (acima, p/ os combos parecerem campos)
   estava deixando os botões de AÇÃO brancos (texto branco em fundo branco = invisível, só
   pintava no hover). Restaura cor/contraste dos primary/danger (especificidade maior). */
.util-form .btn.primary { background: var(--az-primary); color: #fff; border-color: var(--az-primary); }
.util-form .btn.primary:hover { background: var(--az-primary-dark); }
.util-form .btn.danger { background: var(--az-danger-700); color: #fff; border-color: var(--az-danger-700); }
.util-form .btn.danger:hover { background: var(--az-danger-900); }
/* 2.B.5: polish — cards não esticam */
.util-content .card { max-width: 560px; }
/* Em telas estreitas: campos ocupam 100% (1 por linha) */
@media (max-width: 768px) {
  .util-form { gap: 10px; }
  .util-form .field { min-width: 0; flex: 1 1 100%; }
  .util-form .btn { width: 100%; }
}

.util-table { width: 100%; border-collapse: collapse; }
.util-table th, .util-table td { text-align: left; padding: 9px 12px; border-bottom: .5px solid var(--az-border-tertiary); font-size: 13px; }
.util-table th { font-size: 11px; color: var(--az-text-secondary); text-transform: uppercase; }
.util-table .actions { text-align: right; }

.scripts-layout { display: grid; grid-template-columns: 260px 1fr; gap: 16px; }
.scripts-list .si { padding: 10px 12px; border: .5px solid var(--az-border-tertiary); border-radius: 6px; margin-bottom: 6px; cursor: pointer; font-size: 13px; }
.scripts-list .si:hover { background: var(--az-bg-tertiary); }
.scripts-list .si.active { border-color: var(--az-primary); background: var(--az-primary-50); }
.scripts-editor textarea { width: 100%; min-height: 280px; padding: 12px; font-family: var(--font-mono); font-size: 13px; border: .5px solid var(--az-border-secondary); border-radius: 6px; resize: vertical; }

/* Sprint 49.11 — Capacity layout lado a lado (responsivo) */
@media (max-width: 760px) { .cap-grid { grid-template-columns: 1fr !important; } }