/* Funil de Patrocínios — form, modal, table actions.
   Complementa styles.css (cards, kpis, charts, funnel, table). */

/* ---- Button variants ---- */
.btn.primary {
  background: var(--accent); border-color: var(--accent); color: oklch(27% 0.06 25);
}
.btn.primary:hover { background: oklch(82% 0.11 26.5); border-color: oklch(82% 0.11 26.5); }
.btn.danger { color: var(--lost); border-color: oklch(68% 0.19 25 / 0.4); }
.btn.danger:hover { background: oklch(68% 0.19 25 / 0.12); border-color: var(--lost); }
.btn.ghost { background: transparent; }

/* ---- Config / empty states ---- */
.config-screen { display: none; place-items: center; min-height: 55vh; text-align: center; }
body.is-unconfigured .config-screen { display: grid; }
body.is-unconfigured main, body.is-loading main { display: none; }
.config-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
.config-screen h2 { margin: 0 0 0.5rem; }
.config-screen p { color: var(--text-dim); max-width: 440px; margin: 0 auto; }

.empty-state {
  text-align: center; color: var(--text-faint); padding: 2.5rem 1rem;
  font-size: 0.9rem;
}

/* ---- Row actions ---- */
.row-actions { display: flex; gap: 0.35rem; justify-content: flex-end; }
.icon-btn {
  appearance: none; cursor: pointer; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--text-dim);
  width: 30px; height: 30px; border-radius: 8px; font-size: 0.85rem;
  display: inline-grid; place-items: center;
  transition: all 0.16s var(--ease);
}
.icon-btn:hover { color: var(--text); border-color: var(--accent); }
.icon-btn.del:hover { color: var(--lost); border-color: var(--lost); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); }
.sub-cell { font-size: 0.75rem; color: var(--text-faint); margin-top: 2px; }

/* ---- Status tags (patrocínios) ---- */
.tag.s-prospeccao { color: var(--teal); background: oklch(78% 0.12 195 / 0.13); }
.tag.s-contato { color: oklch(80% 0.09 230); background: oklch(80% 0.09 230 / 0.13); }
.tag.s-negociacao { color: var(--proposal); background: oklch(82% 0.15 80 / 0.13); }
.tag.s-proposta { color: oklch(80% 0.13 55); background: oklch(80% 0.13 55 / 0.13); }
.tag.s-fechado { color: var(--won); background: oklch(78% 0.16 155 / 0.13); }
.tag.s-perdido { color: var(--lost); background: oklch(68% 0.19 25 / 0.13); }

/* ---- Modal ---- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: oklch(8% 0.01 265 / 0.6); backdrop-filter: blur(4px);
  display: grid; place-items: center; padding: 1.25rem;
  animation: fade 0.18s var(--ease);
}
@keyframes fade { from { opacity: 0; } }
.modal {
  width: min(620px, 100%); max-height: 90vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 40px 80px -30px oklch(0% 0 0 / 0.8);
  animation: pop 0.22s var(--ease);
}
@keyframes pop { from { transform: translateY(12px) scale(0.98); opacity: 0; } }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.4rem 0.9rem; border-bottom: 1px solid var(--line-soft);
  position: sticky; top: 0; background: var(--surface);
}
.modal-head h2 { margin: 0; font-size: 1.15rem; letter-spacing: -0.02em; }

/* ---- Form ---- */
.form {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.1rem;
  padding: 1.4rem;
}
.field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.field.span-2 { grid-column: 1 / -1; }
.field label { font-size: 0.78rem; color: var(--text-dim); font-weight: 600; }
.field .req { color: var(--lost); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 0.9rem; color: var(--text);
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 0.6rem 0.7rem; width: 100%;
  color-scheme: dark; transition: border-color 0.16s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
}
.field textarea { resize: vertical; }
.field input::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; }

.form-actions { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.3rem; }
.form-actions .spacer { flex: 1; }
.form-error {
  grid-column: 1 / -1; margin: 0; color: var(--lost); font-size: 0.82rem;
  background: oklch(68% 0.19 25 / 0.1); border: 1px solid oklch(68% 0.19 25 / 0.3);
  padding: 0.6rem 0.8rem; border-radius: 9px;
}

@media (max-width: 560px) {
  .form { grid-template-columns: 1fr; }
  .field.span-2 { grid-column: 1; }
}