/* ==========================================================================
   ERP Prowel — extensões do aplicativo
   --------------------------------------------------------------------------
   Este arquivo é o design system gerado no Open Studio/Open Design
   (projeto `erp-prowel`). Abaixo, só o que o design system não previa e que a
   aplicação real precisa: avisos flutuantes (toast), empilhamento de alertas,
   grade de detalhe e alguns auxiliares. Tudo escrito com os mesmos tokens.
   ========================================================================== */

/* --- empilhamento e ritmo vertical entre blocos de conteúdo --------------- */
.content > * + * { margin-top: var(--sp-4); }

/* --- avisos flutuantes (retorno de ação) --------------------------------- */
.toast-area {
  position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 200;
  display: flex; flex-direction: column; gap: var(--sp-2); pointer-events: none;
}
.toast {
  pointer-events: auto;
  background: var(--fg-strong); color: var(--surface);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 10px 14px; font-size: var(--fs-base); font-weight: 500;
  max-width: 380px; animation: toast-in 0.16s ease-out;
}
.toast--ok { background: var(--green-dark); color: var(--on-accent); }
.toast--erro { background: var(--red); color: var(--on-accent); }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* --- login: mensagem de erro acima do formulário ------------------------- */
.login__erro {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px; margin-bottom: 16px;
  border-radius: var(--radius);
  background: var(--red-soft); color: var(--red-ink);
  font-size: var(--fs-sm); font-weight: 500;
}

/* --- detalhe do circuito: coluna dupla (conteúdo + lateral) -------------- */
.split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
@media (max-width: 1080px) { .split { grid-template-columns: 1fr; } }

/* --- tabela: linhas clicáveis e alinhamento numérico --------------------- */
.table tbody tr.row-link:hover { background: var(--accent-soft); }
.table .margem-baixa { color: var(--red-ink); font-weight: 600; }
.table .margem-media { color: var(--amber-ink); font-weight: 600; }
.table tfoot td {
  padding: 12px 14px; font-weight: 700; color: var(--fg-strong);
  background: var(--surface-2); border-top: 1px solid var(--border-strong);
}

/* --- campos em grade para os formulários dos diálogos -------------------- */
.form-grid { display: grid; gap: 0 var(--sp-4); }
.form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .form-grid--3, .form-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .form-grid--2, .form-grid--3, .form-grid--4 { grid-template-columns: 1fr; } }
.form-grid > .field { margin-bottom: var(--sp-3); }

/* --- diálogos largos (formulários de circuito e contrato) ---------------- */
dialog.dialog.dialog--largo { width: min(920px, calc(100vw - 32px)); }
dialog.dialog.dialog--estreito { width: min(440px, calc(100vw - 32px)); }
.dialog__body form { margin: 0; }

/* --- agrupamento de ações no topo do cartão ------------------------------ */
.card__header .card__actions { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }

/* --- barra de filtros: rótulos compactos --------------------------------- */
.filter-bar .field { min-width: 150px; }
.filter-bar .field--busca { flex: 1 1 260px; min-width: 220px; max-width: 380px; }

/* --- aviso dentro do corpo do cartão ------------------------------------- */
.card__body > .alert + .alert { margin-top: var(--sp-2); }

/* O design system declara title/text como spans; no fluxo do alerta eles
   precisam ocupar linhas próprias, senão o título cola no texto. */
.alert__title, .alert__text { display: block; }

/* --- esconder ------------------------------------------------------------ */
.is-hidden { display: none !important; }

/* --- item de lista de documento sem borda dupla -------------------------- */
.file-list .file-item:first-child { padding-top: 0; }

/* --- ícone dentro de botão pequeno --------------------------------------- */
.btn .icon { width: 15px; height: 15px; }
.btn--sm .icon, .btn--xs .icon { width: 14px; height: 14px; }