/* Despesas recorrentes — modal CRUD (#341 redesign unificado)
 *
 * Após o redesign, recorrentes deixaram de ter seção na página — viraram só
 * propriedade do lançamento (selo "repeat · mensal" em lancamentos.css).
 * Este CSS cobre os 2 modais expostos pelo recorrentes.js:
 *   - .rec-modal-new (Nova despesa, com seletor de tipo avulsa/recorrente)
 *   - .rec-modal-manager (Templates recorrentes, full-width modal)
 */

/* ─── Backdrop + container modal ─────────────────────────────── */
.rec-modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0, 0, 0, .45);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  opacity: 0; pointer-events: none;
  transition: opacity .15s ease;
}
.rec-modal-backdrop.open { opacity: 1; pointer-events: auto; }
.rec-modal {
  background: var(--surface, #fff); color: var(--on-surface);
  border-radius: var(--shape-l, 16px);
  max-width: 520px; width: 100%;
  max-height: 92vh; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
}
.rec-modal-manager .rec-modal { max-width: 680px; }

/* ─── Head ──────────────────────────────────────────────────── */
.rec-modal-head {
  padding: 20px 24px 4px;
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px;
}
.rec-modal-title {
  margin: 0 0 4px;
  font: 600 20px/1.2 'Inter Tight';
  letter-spacing: -0.01em;
}
.rec-modal-sub {
  margin: 0;
  font: 400 13px/1.4 'Inter';
  color: var(--on-surface-variant);
}
.rec-modal-x {
  background: transparent; border: 0; padding: 4px;
  cursor: pointer; color: var(--on-surface-variant);
  border-radius: 6px;
}
.rec-modal-x:hover { background: var(--surface-container-low); color: var(--on-surface); }
.rec-modal-x .msym { font-size: 20px; }

/* ─── Body (form fields) ─────────────────────────────────────── */
.rec-modal-body {
  padding: 6px 24px 16px;
  overflow-y: auto; flex: 1;
  display: flex; flex-direction: column; gap: 6px;
}
.rec-modal-body label {
  font: 500 11px/1 'Inter';
  letter-spacing: 0.02em;
  color: var(--on-surface-variant);
  margin-top: 8px;
}
.rec-modal-body input,
.rec-modal-body select {
  padding: 9px 12px;
  border-radius: var(--shape-s, 8px);
  font: 400 13px/1.2 'Inter';
  background: var(--surface-container-low);
  color: var(--on-surface);
  border: 1px solid var(--outline-variant);
}
.rec-modal-body input:focus,
.rec-modal-body select:focus {
  outline: 2px solid var(--primary, #1f3a5f);
  outline-offset: -1px;
}
/* Saulo 2026-06-19: seta nativa do select ficava colada na borda direita.
   appearance:none + caret custom em SVG + padding-right pra respirar. */
.rec-modal-body select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}
.rec-modal-body .hint {
  font: 400 11px/1.3 'Inter';
  color: var(--on-surface-variant);
  margin-top: 2px;
}

.rec-modal-block-label {
  display: block;
  margin-top: 12px !important;
}

/* Checkbox "Repetir mensalmente" — ícone autorenew + label clicável. */
.rec-modal-body .modal-checkbox {
  display: flex; align-items: center; gap: 8px;
  font: 400 13px/1 'Inter';
  color: var(--on-surface);
  margin-top: 14px;
  cursor: pointer;
}
.rec-modal-body .modal-checkbox .msym {
  font-size: 18px;
  color: var(--on-surface-variant);
}
.rec-modal-body .modal-checkbox input[type="checkbox"] { margin: 0; }

/* Bloco de campos de recorrência (aparece quando checkbox marcado). */
.rec-modal-recfields {
  margin-top: 8px;
  padding: 12px 14px;
  background: var(--surface-container-low);
  border-radius: var(--shape-m, 12px);
  display: flex; flex-direction: column; gap: 4px;
}
.rec-modal-recfields .modal-radio input[type="number"] {
  width: 60px;
}

/* Row "Dia do mês" + "1º vencimento" lado a lado. */
.rec-modal-recrow {
  display: flex; gap: 10px;
  margin-bottom: 4px;
}
.rec-modal-reccol {
  flex: 1;
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 0 !important;
}
.rec-modal-reccol > span {
  font: 500 11px/1 'Inter';
  letter-spacing: 0.02em;
  color: var(--on-surface-variant);
}
.rec-modal-reccol > input { width: 100%; }

/* Radio group de duração (sem fim / parcelas). */
.rec-modal-body .modal-radio {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 2px;
}
.rec-modal-body .modal-radio label {
  display: flex; align-items: center; gap: 6px;
  font: 400 13px/1 'Inter';
  color: var(--on-surface);
  margin-top: 0;
}
.rec-modal-body .modal-radio input[type="radio"] { margin: 0; }
.rec-modal-body .modal-radio input[type="number"] { padding: 4px 8px; width: 60px; }

/* ─── Foot ──────────────────────────────────────────────────── */
.rec-modal-foot {
  padding: 14px 24px;
  display: flex; gap: 10px; justify-content: flex-end;
  border-top: 1px solid var(--outline-variant);
}
.rec-modal-foot .btn-primary,
.rec-modal-foot .btn-outline,
.rec-manager-toolbar .btn-primary {
  border-radius: 999px;
  padding: 10px 18px;
  font: 500 13px/1 'Inter';
  border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.rec-modal-foot .btn-primary,
.rec-manager-toolbar .btn-primary {
  background: var(--primary, #1f3a5f);
  color: var(--on-primary, #fff);
}
.rec-modal-foot .btn-primary:hover,
.rec-manager-toolbar .btn-primary:hover { filter: brightness(1.06); }
.rec-modal-foot .btn-outline {
  background: transparent;
  color: var(--on-surface);
  border: 1px solid var(--outline-variant);
}
.rec-modal-foot .btn-outline:hover { background: var(--surface-container-low); }
.rec-modal-foot .btn-primary .msym { font-size: 16px; }
.rec-manager-toolbar .btn-primary .msym { font-size: 16px; }

/* Input com prefixo R$ — editar-lancamento.js usa `.rec-modal-money` no
   wrapper pra que o input fique alinhado e o R$ apareça ancorado à esquerda
   sem precisar duplicar input com type=number. */
.rec-modal-money {
  display: flex;
  align-items: center;
  border: 1px solid var(--outline-variant);
  border-radius: 12px;
  background: var(--surface);
  padding: 0 14px;
  transition: border-color .15s, box-shadow .15s;
}
.rec-modal-money:focus-within {
  border-color: var(--primary, #1f3a5f);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary, #1f3a5f) 18%, transparent);
}
.rec-modal-money-prefix {
  color: var(--on-surface-variant);
  font: 500 14px 'Inter';
  margin-right: 8px;
  user-select: none;
}
.rec-modal-money input {
  flex: 1;
  border: 0 !important;
  background: transparent !important;
  padding: 12px 0 !important;
  font: 500 15px 'Inter';
  color: var(--on-surface);
  outline: none;
}
/* O wrapper .rec-modal-money já tem foco próprio (border + box-shadow).
   .rec-modal-body input:focus aplica outline:2px com radius menor que o do
   wrapper → moldura dupla "troncha". Mata. */
.rec-modal-money input:focus { outline: 0 !important; }
/* Tira spinners do type=number quando dentro do wrapper (visualmente
   "cortavam" a borda direita arredondada). */
.rec-modal-money input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.rec-modal-money input[type="number"]::-webkit-outer-spin-button,
.rec-modal-money input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ─── Manager (lista de templates) ───────────────────────────── */
.rec-modal-manager-body {
  padding: 16px 24px 20px;
}
.rec-manager-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
  gap: 12px;
}
.rec-manager-count {
  font: 400 12px/1 'Inter';
  color: var(--on-surface-variant);
}

.rec-list {
  display: flex; flex-direction: column; gap: 8px;
}
.rec-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-radius: var(--shape-m, 12px);
  background: var(--surface-container-low);
  transition: background .12s;
}
.rec-row:hover { background: var(--surface-container); }
.rec-row.is-paused { opacity: .55; }
.rec-row-main { flex: 1; min-width: 0; }
.rec-row-name { font: 400 14px/1.3 'Inter'; color: var(--on-surface); }
.rec-row-name strong { font-weight: 600; }
.rec-row-desc { color: var(--on-surface-variant); }
.rec-row-meta {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px;
  font: 400 12px/1.3 'Inter';
  color: var(--on-surface-variant);
}
.rec-row-next { color: var(--primary, #1f3a5f); font-weight: 500; }
.rec-row-paused {
  color: var(--error, #b3261e);
  font-weight: 500;
  display: inline-flex; align-items: center; gap: 4px;
}
.rec-row-actions { display: flex; gap: 4px; }
.rec-row-actions .iconbtn {
  background: transparent; border: 0; padding: 6px;
  border-radius: 6px; cursor: pointer;
  color: var(--on-surface-variant);
}
.rec-row-actions .iconbtn:hover { background: var(--surface-container); }
.rec-row-actions .iconbtn.danger:hover {
  background: rgba(196, 60, 74, .08);
  color: var(--error, #c43c4a);
}
.rec-row-actions .iconbtn .msym { font-size: 20px; }

.rec-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--on-surface-variant);
}
.rec-empty .msym { font-size: 40px; opacity: .5; display: block; margin-bottom: 8px; }
.rec-empty .hint { font: 400 12px/1.4 'Inter'; margin-top: 6px; opacity: .8; }

.rec-loading, .rec-error {
  text-align: center; padding: 20px;
  color: var(--on-surface-variant);
}
.rec-error { color: var(--error, #c43c4a); }

/* ─── Toast ────────────────────────────────────────────────── */
.rec-toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: #2e2e2e; color: #fff;
  padding: 10px 18px; border-radius: 8px;
  opacity: 0; transition: all .2s ease;
  z-index: 110; font: 400 14px 'Inter';
}
.rec-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.rec-toast.err { background: var(--error, #c43c4a); }