/* =====================================================================
   CRIA CAFÉ — CRIVO Finance · estilos do módulo (herda ../gestao/styles.css)
   Inclui modal, campos de formulário e toast (que não vêm do gestao).
   ===================================================================== */

/* Marca do módulo na sidebar */
.sidebar-brand { display: flex; align-items: center; gap: 10px; }
.sidebar-brand-tag {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brand); font-weight: 600;
  border: 1px solid var(--separator); border-radius: 980px; padding: 2px 8px;
}

/* ---------- Modal (dialog) ---------- */
#modal {
  border: none; border-radius: 18px; padding: 0;
  width: min(680px, 94vw); max-height: 90vh; overflow: auto;
  box-shadow: 0 24px 60px rgba(0,0,0,0.28);
  background: var(--bg-elevated, #fff); color: var(--label-primary);
}
#modal::backdrop { background: rgba(0,0,0,0.42); backdrop-filter: blur(2px); }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 12px;
}
.modal-head h3 { margin: 0; font-size: var(--fs-title-3); font-weight: 600; letter-spacing: -0.02em; }
.modal-close {
  background: transparent; border: none; cursor: pointer;
  font-size: 24px; line-height: 1; color: var(--label-tertiary); padding: 4px 8px;
  border-radius: 8px;
}
.modal-close:hover { background: var(--bg-secondary); color: var(--label-primary); }
.modal-body { padding: 4px 24px 8px; }
.modal-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 16px 24px 22px; position: sticky; bottom: 0; background: var(--bg-elevated, #fff);
}

/* ---------- Campos de formulário ---------- */
.field { margin-bottom: 14px; }
.field > label {
  display: block; font-size: var(--fs-footnote); font-weight: 600;
  color: var(--label-secondary); margin-bottom: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.field input, .field select, .field textarea {
  width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--separator);
  border-radius: 10px; font-size: var(--fs-subhead); font-family: inherit;
  background: var(--bg-input, #fff); color: var(--label-primary);
}
.field select { -webkit-appearance: none; appearance: none; padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8a8e' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(111,78,44,0.12);
}
.field textarea { height: auto; padding: 9px 12px; resize: vertical; min-height: 56px; }
.field-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.field-row > .field { flex: 1 1 148px; min-width: 148px; margin-bottom: 14px; }
.field-hint { font-size: var(--fs-caption-1); color: var(--label-tertiary); margin-top: 5px; white-space: normal; line-height: 1.35; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: #1c1c1e; color: #fff; padding: 12px 20px; border-radius: 12px;
  font-size: var(--fs-subhead); box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 9999;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { background: #b3261e; }

/* ---------- Anexos (comprovantes) ---------- */
.anexo-input { width: 100%; height: auto; padding: 8px 10px; font-size: var(--fs-footnote); }
.anexo-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.anexo-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--brand-soft); border: 1px solid var(--separator);
  border-radius: 980px; padding: 4px 6px 4px 12px; font-size: var(--fs-footnote); max-width: 100%;
}
.anexo-chip a { color: var(--brand-2); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anexo-chip button {
  background: rgba(0,0,0,0.08); border: none; cursor: pointer; color: var(--label-secondary);
  width: 18px; height: 18px; border-radius: 50%; line-height: 1; font-size: 14px; padding: 0;
}
.anexo-chip button:hover { background: var(--red); color: #fff; }

/* ---------- Barra de classificação em lote (extrato) ---------- */
.ext-bulk {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--brand-soft); border: 1px solid var(--separator);
  border-radius: 12px; padding: 10px 14px; margin: 4px 0 12px;
}
.ext-bulk-txt { font-weight: 600; font-size: var(--fs-subhead); color: var(--brand-2); }
.ext-check { width: 16px; height: 16px; cursor: pointer; }

/* ---------- Ajustes de tabela ---------- */
td .btn.btn-sm + .btn.btn-sm { margin-left: 6px; }
.card > .card-header-row .segmented { margin: 2px 0 6px; }