/* =========================================================================
   FORMS.CSS — cartão de formulário, campos, labels, validação,
   divisor de seção, chips de seleção, tabelas/cartões de itens em
   formulários e editor rich text (Quill).
   Só var(--rb-*). Carregado globalmente pelo base.html (depois do main.css).
   Não define .btn*, .badge*, .alert*, .dropdown*, .page-header,
   .form-header nem tipografia base: isso é do main.css.
   ========================================================================= */


/* ---------- 1. Cartão de formulário ---------- */

.form-card {
  --bs-card-bg: var(--rb-surface);
  --bs-card-border-color: var(--rb-border);
  --bs-card-border-radius: var(--rb-radius-lg);
  --bs-card-inner-border-radius: calc(var(--rb-radius-lg) - 1px);
  --bs-card-box-shadow: var(--rb-shadow-sm);
  --bs-card-cap-bg: var(--rb-surface-2);
  color: var(--rb-text);
  background: var(--rb-surface);
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius-lg);
  box-shadow: var(--rb-shadow-sm);
  overflow: hidden;
}

/* .card.shadow-sm usado em alguns templates: a sombra continua a do token */
.form-card.shadow-sm { box-shadow: var(--rb-shadow-sm) !important; }

.form-card .card-body { padding: var(--rb-space-5); }

.form-card > .card-footer {
  padding: var(--rb-space-3) var(--rb-space-5);
  background: var(--rb-surface-2);
  border-top: 1px solid var(--rb-border);
  border-radius: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--rb-space-2);
}

@media (max-width: 575.98px) {
  .form-card .card-body { padding: var(--rb-space-4); }
  .form-card > .card-footer { padding: var(--rb-space-3) var(--rb-space-4); }
}


/* ---------- 2. Labels e texto de ajuda ---------- */

.form-label {
  margin-bottom: 6px;
  font-size: var(--rb-fs-sm);
  font-weight: var(--rb-fw-medium);
  color: var(--rb-text);
  text-transform: none;
}
.form-label > i.bi { color: var(--rb-text-subtle); }

.form-text {
  margin-top: var(--rb-space-1);
  font-size: var(--rb-fs-xs);
  color: var(--rb-text-muted);
}


/* ---------- 3. Campos ---------- */

.form-control,
.form-select {
  min-height: var(--rb-control-h);
  padding: 7px var(--rb-space-3);
  font-size: var(--rb-fs-base);
  line-height: 20px;
  color: var(--rb-text);
  background-color: var(--rb-surface);
  border: 1px solid var(--rb-border-strong);
  border-radius: var(--rb-radius);
  box-shadow: none;
  transition: border-color var(--rb-dur) var(--rb-ease),
              box-shadow var(--rb-dur) var(--rb-ease);
}
.form-select { padding-right: 36px; }

.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) { border-color: var(--rb-text-subtle); }

.form-control:focus,
.form-select:focus {
  color: var(--rb-text);
  background-color: var(--rb-surface);
  border-color: var(--rb-primary);
  box-shadow: 0 0 0 3px var(--rb-focus-ring);
  outline: 0;
}

.form-control::placeholder { color: var(--rb-text-subtle); opacity: 1; }

textarea.form-control { min-height: 72px; resize: vertical; }

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
  color: var(--rb-text-muted);
  background-color: var(--rb-surface-2);
  border-color: var(--rb-border);
  opacity: 1;
}
.form-control[readonly]:focus {
  border-color: var(--rb-border-strong);
  box-shadow: none;
}

.form-select option,
.form-select optgroup {
  color: var(--rb-text);
  background-color: var(--rb-surface);
}

/* Tamanhos */
.form-control-sm,
.form-select-sm {
  min-height: var(--rb-control-h-sm);
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: var(--rb-fs-sm);
  border-radius: var(--rb-radius);
}
.form-control-sm { padding-left: 10px; padding-right: 10px; }
.form-select-sm { padding-left: 10px; padding-right: 32px; }

.form-control-lg {
  min-height: 44px;
  font-size: var(--rb-fs-md);
  border-radius: var(--rb-radius);
}

/* Campos calculados (ex.: diluente/doses no processamento) */
.form-control.calc-result {
  color: var(--rb-primary-subtle-text);
  background-color: var(--rb-primary-subtle);
  border-color: var(--rb-primary-border);
  font-weight: var(--rb-fw-semibold);
  font-variant-numeric: tabular-nums;
}

/* Campo desabilitado por regra de negócio (ex.: volume de pré-diluição) */
.form-control.is-disabled {
  color: var(--rb-text-muted);
  background-color: var(--rb-surface-2);
  border-color: var(--rb-border);
}

/* Condições ambientais: somente leitura, preenchidas por sensor */
.campo-sensor-ambiental,
.field-display-ambiental {
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  caret-color: transparent;
  cursor: default;
  font-weight: var(--rb-fw-semibold);
  font-variant-numeric: tabular-nums;
}


/* ---------- 4. Checkbox, rádio e switch ---------- */

.form-check-input {
  background-color: var(--rb-surface);
  border: 1px solid var(--rb-border-strong);
  cursor: pointer;
}
.form-check-input:checked {
  background-color: var(--rb-primary);
  border-color: var(--rb-primary);
}
.form-check-input:focus {
  border-color: var(--rb-primary);
  box-shadow: 0 0 0 3px var(--rb-focus-ring);
  outline: 0;
}
.form-check-input:disabled { opacity: .5; }

.form-check-label {
  font-size: var(--rb-fs-base);
  color: var(--rb-text);
  cursor: pointer;
}

.form-range::-webkit-slider-thumb { background-color: var(--rb-primary); }
.form-range::-moz-range-thumb     { background-color: var(--rb-primary); }
.form-range::-webkit-slider-runnable-track { background-color: var(--rb-surface-3); }
.form-range::-moz-range-track     { background-color: var(--rb-surface-3); }
.form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--rb-focus-ring); }
.form-range:focus::-moz-range-thumb     { box-shadow: 0 0 0 3px var(--rb-focus-ring); }

/* Permissões do usuário (cartões com switch) */
.user-perms .perm-item {
  padding: var(--rb-space-3) var(--rb-space-4);
  background: var(--rb-surface-2);
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius-lg);
}
.user-perms .form-switch { padding-left: 0; display: flex; flex-wrap: wrap; align-items: flex-start; }
.user-perms .form-switch .form-check-input {
  width: 2.25rem;
  height: 1.25rem;
  margin: 0;
  flex: 0 0 auto;
}
.user-perms .form-check-label { font-weight: var(--rb-fw-medium); flex: 1 1 0; }
.user-perms .form-switch .text-body-secondary { flex: 1 0 100%; padding-left: 2.25rem; }


/* ---------- 5. Input group e campo com ícone ---------- */

.input-group-text {
  min-height: var(--rb-control-h);
  padding: 0 var(--rb-space-3);
  font-size: var(--rb-fs-base);
  color: var(--rb-text-muted);
  background-color: var(--rb-surface-2);
  border: 1px solid var(--rb-border-strong);
  border-radius: var(--rb-radius);
}
.input-group > .form-control:focus,
.input-group > .form-select:focus { z-index: 5; }

/* <div class="has-icon"><i class="bi … input-icon"></i><input class="form-control"></div> */
.has-icon { position: relative; }
.has-icon > .form-control,
.has-icon > .form-select { padding-left: 36px; }
.has-icon > .input-icon {
  position: absolute;
  top: 50%;
  left: var(--rb-space-3);
  z-index: 6;
  transform: translateY(-50%);
  font-size: 14px;
  line-height: 1;
  color: var(--rb-text-subtle);
  pointer-events: none;
  transition: color var(--rb-dur) var(--rb-ease);
}
.has-icon:focus-within > .input-icon { color: var(--rb-primary); }


/* ---------- 6. Validação ---------- */

.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
  border-color: var(--rb-danger);
  background-image: none;
  padding-right: var(--rb-space-3);
}
.form-select.is-invalid,
.was-validated .form-select:invalid { padding-right: 36px; }

.form-control.is-invalid:focus,
.form-select.is-invalid:focus,
.was-validated .form-control:invalid:focus,
.was-validated .form-select:invalid:focus {
  border-color: var(--rb-danger);
  box-shadow: 0 0 0 3px rgba(var(--rb-danger-rgb), .25);
}

.form-control.is-valid,
.form-select.is-valid,
.was-validated .form-control:valid,
.was-validated .form-select:valid {
  border-color: var(--rb-success);
  background-image: none;
  padding-right: var(--rb-space-3);
}
.form-select.is-valid,
.was-validated .form-select:valid { padding-right: 36px; }

.form-control.is-valid:focus,
.form-select.is-valid:focus,
.was-validated .form-control:valid:focus,
.was-validated .form-select:valid:focus {
  border-color: var(--rb-success);
  box-shadow: 0 0 0 3px rgba(var(--rb-success-rgb), .25);
}

.form-check-input.is-invalid { border-color: var(--rb-danger); }
.form-check-input.is-valid,
.form-check-input.is-valid:checked {
  border-color: var(--rb-success);
  background-color: var(--rb-success);
}

.invalid-feedback,
.valid-feedback {
  margin-top: var(--rb-space-1);
  font-size: var(--rb-fs-xs);
}
.invalid-feedback { color: var(--rb-danger-text); }
.valid-feedback   { color: var(--rb-success-text); }

/* Lista de erros renderizada pelo Django ({{ field.errors }}) */
.errorlist {
  margin: var(--rb-space-1) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--rb-fs-xs);
  color: var(--rb-danger-text);
}
.alert .errorlist { margin: 0; font-size: inherit; color: inherit; }

/* Medidor de força de senha (usuarios/user_form, minha_conta) */
.password-strength-bars {
  display: flex;
  gap: var(--rb-space-1);
  margin-bottom: var(--rb-space-1);
}
.password-strength-bar {
  flex: 1 1 0;
  height: 4px;
  border-radius: var(--rb-radius-sm);
  background: var(--rb-surface-3);
  transition: background-color var(--rb-dur) var(--rb-ease);
}
.password-strength-label {
  font-size: var(--rb-fs-xs);
  font-weight: var(--rb-fw-semibold);
  color: var(--rb-text-muted);
}
.password-strength[data-level="1"] .password-strength-bar.is-on { background: var(--rb-danger); }
.password-strength[data-level="1"] .password-strength-label     { color: var(--rb-danger-text); }
.password-strength[data-level="2"] .password-strength-bar.is-on { background: var(--rb-warning); }
.password-strength[data-level="2"] .password-strength-label     { color: var(--rb-warning-text); }
.password-strength[data-level="3"] .password-strength-bar.is-on { background: var(--rb-info); }
.password-strength[data-level="3"] .password-strength-label     { color: var(--rb-info-text); }
.password-strength[data-level="4"] .password-strength-bar.is-on { background: var(--rb-success); }
.password-strength[data-level="4"] .password-strength-label     { color: var(--rb-success-text); }


/* ---------- 7. Divisor de seção ---------- */
/* <div class="section-divider" data-label="Contato"></div> */

.section-divider {
  display: flex;
  align-items: center;
  gap: var(--rb-space-3);
  min-height: 18px;
  margin-top: var(--rb-space-2);
}
.section-divider::before {
  content: attr(data-label);
  font-size: var(--rb-fs-xs);
  font-weight: var(--rb-fw-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--rb-text-muted);
  white-space: nowrap;
}
.section-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--rb-border);
}
.row > .col-12:first-child > .section-divider { margin-top: 0; }


/* ---------- 8. Chips de seleção (categorias, parâmetro de qualidade) ---------- */
/* <label class="cat-chip active"><input type="checkbox"><span class="dot"></span><span>…</span></label> */

.cat-chip,
.param-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--rb-space-2);
  min-height: 30px;
  padding: 4px var(--rb-space-3);
  font-size: var(--rb-fs-sm);
  font-weight: var(--rb-fw-medium);
  line-height: 20px;
  white-space: nowrap;
  color: var(--rb-text);
  background: var(--rb-surface);
  border: 1px solid var(--rb-border-strong);
  border-radius: var(--rb-radius);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--rb-dur) var(--rb-ease),
              border-color var(--rb-dur) var(--rb-ease),
              color var(--rb-dur) var(--rb-ease);
}
.cat-chip:hover,
.param-chip:hover { background: var(--rb-surface-2); }

.cat-chip:focus-within,
.param-chip:focus-within { box-shadow: 0 0 0 3px var(--rb-focus-ring); }

/* input nativo escondido, mas acessível */
.cat-chip input[type="checkbox"],
.param-chip input[type="checkbox"],
.param-chip input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}

.cat-chip .dot,
.param-chip .dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--rb-border-strong);
  background: transparent;
}

.cat-chip.active,
.param-chip.active {
  color: var(--rb-primary-subtle-text);
  background: var(--rb-primary-subtle);
  border-color: var(--rb-primary-border);
}
.cat-chip.active .dot,
.param-chip.active .dot {
  border-color: var(--rb-primary);
  background: var(--rb-primary);
}

.cat-chip.locked { opacity: .5; pointer-events: none; }


/* ---------- 9. Itens em formulários (pedido, venda) ---------- */

.itens-header {
  gap: var(--rb-space-3);
  flex-wrap: wrap;
  margin-bottom: var(--rb-space-3);
}
.itens-header h2 { margin: 0; font-size: var(--rb-fs-md); }
.itens-header h2 > i { color: var(--rb-text-subtle); }
.itens-header p { font-size: var(--rb-fs-sm); color: var(--rb-text-muted); }

/* Tabela editável de itens (pedido) */
.itens-table-container {
  background: var(--rb-surface);
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius-lg);
  overflow: hidden;
}
.itens-table-container .table-soft {
  --bs-table-bg: transparent;
  --bs-table-color: var(--rb-text);
  --bs-table-border-color: var(--rb-border);
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
}
.itens-table-container .table-soft > thead > tr > th {
  padding: 10px var(--rb-space-3);
  background: var(--rb-surface-2);
  border-bottom: 1px solid var(--rb-border);
  font-size: var(--rb-fs-xs);
  font-weight: var(--rb-fw-semibold);
  letter-spacing: .02em;
  color: var(--rb-text-muted);
  white-space: nowrap;
}
.itens-table-container .table-soft > tbody > tr > td {
  padding: var(--rb-space-2) var(--rb-space-3);
  border-bottom: 1px solid var(--rb-border);
  vertical-align: top;
  color: var(--rb-text);
  background: transparent;
}
.itens-table-container .table-soft > tbody > tr:last-child > td { border-bottom: 0; }
.itens-table-container .table-soft textarea.form-control { min-height: var(--rb-control-h); }
.itens-table-container .table-soft input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 9px;
  cursor: pointer;
  accent-color: var(--rb-danger);
}
.itens-table-container .empty-state {
  padding: var(--rb-space-6) var(--rb-space-4);
  text-align: center;
  color: var(--rb-text-muted);
}
.itens-table-container .empty-state i {
  display: block;
  margin-bottom: var(--rb-space-2);
  font-size: 24px;
  color: var(--rb-text-subtle);
}

/* Cartão de cada item da venda (inclui os criados pelo venda_form_doses.js) */
.item-venda-card {
  --bs-card-bg: var(--rb-surface);
  --bs-card-border-color: var(--rb-border);
  --bs-card-border-radius: var(--rb-radius-lg);
  background: var(--rb-surface);
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius-lg);
  box-shadow: none;
}
.form-card .item-venda-card .card-body { padding: var(--rb-space-4); }

/* Controles da barra de doses (larguras fixas, também nos cartões gerados por JS) */
.qtd-preencher-doses { width: 90px; }
.filtro-brinco-select { width: 260px; flex: 0 0 260px; max-width: 100%; }
@media (max-width: 575.98px) {
  .filtro-brinco-select { width: 100%; flex-basis: 100%; }
}


/* ---------- 10. Campo condicional animado (processamento: motivo de rejeição) ---------- */

.anim-enter { animation: rb-field-in .2s var(--rb-ease) both; }
.anim-exit  { animation: rb-field-out .15s var(--rb-ease) both; }
.anim-exit,
.anim-hidden { pointer-events: none; }
.anim-hidden { opacity: 0; }

@keyframes rb-field-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
@keyframes rb-field-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(4px); }
}


/* ---------- 11. Editor rich text (Quill) ---------- */
/* Prefixo html: o quill.snow.css costuma carregar depois e venceria. */

html .ql-toolbar.ql-snow,
html .ql-container.ql-snow { border-color: var(--rb-border-strong); }
html .ql-toolbar.ql-snow   { background: var(--rb-surface-2); border-radius: var(--rb-radius) var(--rb-radius) 0 0; }
html .ql-container.ql-snow { background: var(--rb-surface); color: var(--rb-text); border-radius: 0 0 var(--rb-radius) var(--rb-radius); }
html .ql-container.ql-snow:focus-within { border-color: var(--rb-primary); box-shadow: 0 0 0 3px var(--rb-focus-ring); }
html .ql-snow .ql-editor.ql-blank::before { color: var(--rb-text-subtle); }
html .ql-snow .ql-stroke, html .ql-snow .ql-stroke-miter { stroke: var(--rb-text-muted); }
html .ql-snow .ql-fill,   html .ql-snow .ql-stroke.ql-fill { fill: var(--rb-text-muted); }
html .ql-snow .ql-picker { color: var(--rb-text-muted); }
html .ql-snow .ql-picker-options { background: var(--rb-surface); border-color: var(--rb-border); }
html .ql-snow button:hover .ql-stroke, html .ql-snow button.ql-active .ql-stroke { stroke: var(--rb-primary); }
html .ql-snow button:hover .ql-fill,   html .ql-snow button.ql-active .ql-fill   { fill:   var(--rb-primary); }


/* ---------- 12. Movimento reduzido ---------- */

@media (prefers-reduced-motion: reduce) {
  .anim-enter,
  .anim-exit { animation: none; }
  .form-control,
  .form-select,
  .cat-chip,
  .param-chip,
  .has-icon > .input-icon,
  .password-strength-bar { transition: none; }
}