/* ════════════════════════════════════════════════════════════════════════
   Goro Forms — Stylesheet v1.0.0
   Acompanha goro-forms.js
   Usa variáveis CSS já definidas em app.css / design-system.css quando existem
   ════════════════════════════════════════════════════════════════════════ */

/* ── Form root ─────────────────────────────────────────────────────── */
.gf-form {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}

/* ── Header reforçado ──────────────────────────────────────────────── */
.gf-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg, #fff);
  border-bottom: 1px solid var(--border, rgba(0,0,0,.08));
}
.gf-header .modal-title {
  font-size: 15px;
  font-weight: 600;
}

/* ── Body ──────────────────────────────────────────────────────────── */
.gf-body {
  padding: 18px 20px;
  overflow-y: auto;
  flex: 1;
}

/* ── Fieldsets ─────────────────────────────────────────────────────── */
.gf-fieldset {
  border: 1px solid var(--border, rgba(0,0,0,.08));
  border-radius: 10px;
  padding: 16px 18px 18px;
  margin-bottom: 16px;
  background: var(--bg-s, rgba(0,0,0,.015));
}
.gf-fieldset:last-child {
  margin-bottom: 0;
}
.gf-legend {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--primary, #6366f1);
  padding: 0 8px;
  margin-left: -8px;
  background: var(--bg, #fff);
  border-radius: 4px;
}
.gf-legend i {
  margin-right: 6px;
}
.gf-fieldset-desc {
  font-size: 12px;
  color: var(--text-m, #6b7280);
  margin: 4px 0 12px;
  line-height: 1.5;
}

/* ── Grid de campos ────────────────────────────────────────────────── */
.gf-fields-grid {
  display: grid;
  gap: 14px 16px;
}
.gf-cols-1 { grid-template-columns: 1fr; }
.gf-cols-2 { grid-template-columns: repeat(2, 1fr); }
.gf-cols-3 { grid-template-columns: repeat(3, 1fr); }
.gf-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Campos "full width" via attr data-cols="full" */
.gf-field[data-cols="full"] { grid-column: 1 / -1; }
.gf-field[data-cols="2"] { grid-column: span 2; }

/* Auto-responsive [v11.10.1]:
   - desktop wide (≥1100px): mantém colunas declaradas
   - tablet (720-1099px): gf-cols-3/4 caem para 2 colunas
   - mobile (<720px): tudo cai para 1 coluna
*/
@media (max-width: 1099px) {
  .gf-cols-3, .gf-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .gf-cols-2, .gf-cols-3, .gf-cols-4 { grid-template-columns: 1fr; }
}

/* ── Campo individual ──────────────────────────────────────────────── */
.gf-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.gf-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-d, #374151);
  display: flex;
  align-items: center;
  gap: 6px;
}
.gf-label i {
  font-size: 11px;
  color: var(--text-m, #6b7280);
  width: 14px;
  text-align: center;
}

/* ── Inputs ────────────────────────────────────────────────────────── */
.gf-input,
.gf-select,
.gf-textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border, rgba(0,0,0,.12));
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
  background: var(--bg, #fff);
  color: var(--text-d, #1f2937);
  transition: border-color .15s, box-shadow .15s, background-color .15s;
  box-sizing: border-box;
}
.gf-input:hover,
.gf-select:hover,
.gf-textarea:hover {
  border-color: var(--border-d, rgba(0,0,0,.22));
}
.gf-input:focus,
.gf-select:focus,
.gf-textarea:focus {
  outline: none;
  border-color: var(--primary, #6366f1);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
  background: var(--bg, #fff);
}
.gf-textarea {
  min-height: 70px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.5;
}
.gf-select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%236b7280' d='M0 0l5 6 5-6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 30px;
  cursor: pointer;
}

/* ── Input group (com sufixo tipo "AOA") ───────────────────────────── */
.gf-input-group {
  position: relative;
  display: flex;
  align-items: stretch;
}
.gf-input-group .gf-input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
}
.gf-input-suffix {
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-m, #6b7280);
  background: var(--bg-s, rgba(0,0,0,.03));
  border: 1px solid var(--border, rgba(0,0,0,.12));
  border-left: 0;
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
}

/* ── Checkbox ──────────────────────────────────────────────────────── */
.gf-checkbox-wrap {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  padding: 7px 0;
  font-size: 13px;
  color: var(--text-d, #1f2937);
  user-select: none;
}
.gf-checkbox {
  width: 17px;
  height: 17px;
  cursor: pointer;
  accent-color: var(--primary, #6366f1);
}

/* ── Radio group ───────────────────────────────────────────────────── */
.gf-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.gf-radio-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border, rgba(0,0,0,.12));
  border-radius: 7px;
  cursor: pointer;
  font-size: 13px;
  background: var(--bg, #fff);
  transition: border-color .15s, background-color .15s;
}
.gf-radio-wrap:hover {
  border-color: var(--primary, #6366f1);
}
.gf-radio-wrap input[type="radio"] {
  accent-color: var(--primary, #6366f1);
}

/* ── Hint & Error ──────────────────────────────────────────────────── */
.gf-field-hint {
  font-size: 11px;
  color: var(--text-m, #6b7280);
  line-height: 1.45;
  margin-top: 2px;
}
.gf-field-error {
  font-size: 11px;
  color: #dc2626;
  font-weight: 500;
  margin-top: 2px;
  min-height: 0;
  display: none;
}
.gf-field.gf-has-error .gf-field-error {
  display: block;
}
.gf-field.gf-has-error .gf-input,
.gf-field.gf-has-error .gf-select,
.gf-field.gf-has-error .gf-textarea {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}
.gf-field.gf-has-error .gf-label {
  color: #dc2626;
}
.gf-field.gf-has-error .gf-field-error::before {
  content: "\f071";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 4px;
}

/* ── Banner ────────────────────────────────────────────────────────── */
.gf-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 8px;
  margin-bottom: 14px;
  font-size: 12.5px;
  line-height: 1.5;
}
.gf-banner i {
  font-size: 15px;
  margin-top: 1px;
}
.gf-banner-info { background: #dbeafe; border: 1px solid #93c5fd; color: #1e40af; }
.gf-banner-warning { background: #fef3c7; border: 1px solid #fcd34d; color: #92400e; }
.gf-banner-success { background: #d1fae5; border: 1px solid #6ee7b7; color: #065f46; }
.gf-banner-danger { background: #fee2e2; border: 1px solid #fca5a5; color: #991b1b; }

/* ── Footer reforçado ──────────────────────────────────────────────── */
.gf-footer {
  position: sticky;
  bottom: 0;
  background: var(--bg, #fff);
  border-top: 1px solid var(--border, rgba(0,0,0,.08));
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Modal sizes [v11.10.2] ─────────────────────────────────────────
   .modal-full é controlado pelo app.css (100vw × 100vh) — preferência
   do user é usar o ecrã na totalidade SEMPRE. Não fazemos override
   aqui para evitar conflitos com o estilo global do app.
   .modal-lg é mantido só para uso explícito (raro). */
.modal-overlay .modal.modal-lg {
  width: min(720px, 94vw);
}

/* ── Dark mode override (caso o app use dark theme via .dark) ─────── */
.dark .gf-fieldset { background: rgba(255,255,255,.02); border-color: rgba(255,255,255,.08); }
.dark .gf-legend { background: var(--bg, #1f2937); }
.dark .gf-input,
.dark .gf-select,
.dark .gf-textarea {
  background: var(--bg-s, #1f2937);
  border-color: rgba(255,255,255,.12);
  color: #e5e7eb;
}
.dark .gf-input-suffix {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12);
  color: #9ca3af;
}
.dark .gf-banner-info { background: #1e3a8a40; border-color: #1e40af; color: #93c5fd; }
.dark .gf-banner-warning { background: #78350f40; border-color: #92400e; color: #fcd34d; }
.dark .gf-banner-success { background: #065f4640; border-color: #047857; color: #6ee7b7; }

/* ── Animação de entrada ───────────────────────────────────────────── */
@keyframes gf-slide-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.gf-form {
  animation: gf-slide-in .18s ease-out;
}