/* =========================================================================
   FORMS.CSS — form card, fields, labels, section dividers, toggles,
   permission tiles, password meter.
   Usa apenas var(--rb-*) definidas em tokens.css. Claro e escuro saem dos
   mesmos tokens: nenhum override de tema aqui.
   Espelha static/css/forms.css do Reprobank (DESIGN_SYSTEM.md §5.6).
   Cabeçalho (.form-header) e botões ficam no main.css (§5.3 / §5.4).
   ========================================================================= */

/* -------------------------------------------------------------------------
   Form card
   ------------------------------------------------------------------------- */
.form-card {
  background: var(--rb-surface);
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius-lg);
  box-shadow: var(--rb-shadow-sm);
  overflow: hidden;
  color: var(--rb-text);
}
.form-card .card-body { padding: var(--rb-space-5); }

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

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

/* -------------------------------------------------------------------------
   Section divider — <div class="section-divider" data-label="…">
   ------------------------------------------------------------------------- */
.section-divider {
  display: flex;
  align-items: center;
  gap: var(--rb-space-3);
  margin: var(--rb-space-2) 0 calc(-1 * var(--rb-space-2));
  min-height: 18px;
}
.section-divider::before {
  content: attr(data-label);
  flex: 0 0 auto;
  font-size: var(--rb-fs-xs);
  font-weight: var(--rb-fw-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--rb-text-muted);
}
.section-divider:not([data-label])::before,
.section-divider[data-label=""]::before { display: none; }
.section-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--rb-border);
}

/* -------------------------------------------------------------------------
   Labels & help text
   ------------------------------------------------------------------------- */
.form-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: var(--rb-fs-sm);
  font-weight: var(--rb-fw-medium);
  color: var(--rb-text);
  letter-spacing: 0;
}
.form-label > i { font-size: 13px; color: var(--rb-text-subtle); }

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

.form-check-label { color: var(--rb-text); }

/* Field-level error messages (<div class="text-danger small">) */
.form-card .text-danger.small,
.form-card div.text-danger {
  display: block;
  font-size: var(--rb-fs-xs);
  font-weight: var(--rb-fw-medium);
}

/* -------------------------------------------------------------------------
   Inputs, selects, textareas
   ------------------------------------------------------------------------- */
.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: 32px; background-position: right 10px center; }
textarea.form-control { min-height: 72px; line-height: var(--rb-lh); }

.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; }

.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-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);
}

/* <input type="color"> (calendário): keep Bootstrap's swatch geometry */
.form-control-color { padding: 4px; }

/* Native option lists follow the theme */
select option,
.form-select option { background: var(--rb-surface); color: var(--rb-text); }
.form-select optgroup { background: var(--rb-surface-2); color: var(--rb-text-muted); font-weight: var(--rb-fw-semibold); }

/* Validation */
.form-control.is-invalid,
.form-select.is-invalid { border-color: var(--rb-danger); }
.form-control.is-invalid:focus,
.form-select.is-invalid:focus { box-shadow: 0 0 0 3px var(--rb-danger-subtle); }

/* -------------------------------------------------------------------------
   Input groups and leading icons (.input-group.has-icon > i.input-icon)
   ------------------------------------------------------------------------- */
.input-group-text {
  font-size: var(--rb-fs-sm);
  color: var(--rb-text-muted);
  background: var(--rb-surface-2);
  border-color: var(--rb-border-strong);
  border-radius: var(--rb-radius);
}

.has-icon { position: relative; }
.input-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  font-size: 14px;
  line-height: 1;
  color: var(--rb-text-subtle);
  pointer-events: none;
}
.has-icon .form-control,
.has-icon .form-select { padding-left: 34px; }
.has-icon:focus-within .input-icon { color: var(--rb-primary); }

/* Bootstrap squares the left edge of any non-first child of .input-group;
   here the icon is the first child, so restore the full radius.
   The :not(#rb) adds an id-level weight instead of using !important. */
.input-group.has-icon > .form-control:not(#rb),
.input-group.has-icon > .form-select:not(#rb) {
  margin-left: 0;
  border-radius: var(--rb-radius);
}

/* -------------------------------------------------------------------------
   Checkboxes, radios, switches (brand colour)
   ------------------------------------------------------------------------- */
.form-check-input {
  border-color: var(--rb-text-subtle);
  background-color: var(--rb-surface);
}
.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);
}
.form-switch .form-check-input { width: 2.25em; cursor: pointer; }
.form-switch .form-check-input:focus:not(:checked) {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.35%29'/%3e%3c/svg%3e");
}
[data-bs-theme="dark"] .form-switch .form-check-input:focus:not(:checked) {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.35%29'/%3e%3c/svg%3e");
}

/* -------------------------------------------------------------------------
   Permission tiles (usuarios/user_form)
   ------------------------------------------------------------------------- */
.user-perms .perm-item {
  padding: var(--rb-space-4);
  background: var(--rb-surface);
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius-lg);
  transition: border-color var(--rb-dur) var(--rb-ease), background-color var(--rb-dur) var(--rb-ease);
}
.user-perms .perm-item:hover { border-color: var(--rb-border-strong); background: var(--rb-surface-2); }
.user-perms .form-check-label { font-weight: var(--rb-fw-medium); cursor: pointer; user-select: none; }

/* -------------------------------------------------------------------------
   Password strength meter (static/js/password_strength.js —
   minha_conta.html, user_form.html)
   ------------------------------------------------------------------------- */
.password-strength .pw-bars {
  display: flex;
  gap: var(--rb-space-1);
  margin-bottom: var(--rb-space-1);
}
.password-strength .pw-bar {
  flex: 1 1 auto;
  height: 4px;
  border-radius: var(--rb-radius-sm);
  background: var(--rb-surface-3);
  transition: background-color var(--rb-dur) var(--rb-ease);
}
.password-strength .pw-bar-filled.pw-level-danger  { background: var(--rb-danger); }
.password-strength .pw-bar-filled.pw-level-warning { background: var(--rb-warning); }
.password-strength .pw-bar-filled.pw-level-info    { background: var(--rb-info); }
.password-strength .pw-bar-filled.pw-level-success { background: var(--rb-success); }

.password-strength .pw-label {
  font-weight: var(--rb-fw-semibold);
  color: var(--rb-text-muted);
}
.password-strength .pw-label.pw-level-danger  { color: var(--rb-danger-text); }
.password-strength .pw-label.pw-level-warning { color: var(--rb-warning-text); }
.password-strength .pw-label.pw-level-info    { color: var(--rb-info-text); }
.password-strength .pw-label.pw-level-success { color: var(--rb-success-text); }

/* =========================================================================
   Seletor de duas colunas (static/js/dual_list.js): "disponíveis" e "escolhidas"
   ========================================================================= */
.dual-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.dual-list-coluna {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--rb-border-strong);
  border-radius: var(--rb-radius-md, 8px);
  background: var(--rb-surface);
  overflow: hidden;
}

.dual-list-cabecalho {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: var(--rb-surface-2);
  border-bottom: 1px solid var(--rb-border);
  color: var(--rb-text);
}
.dual-list-cabecalho small { color: var(--rb-text-muted); font-size: 0.78rem; }
.dual-list-contador { color: var(--rb-text-muted); font-weight: var(--rb-fw-medium, 500); }

/* Coluna das escolhidas em destaque, como no admin */
.dual-list-escolhidas .dual-list-cabecalho {
  background: var(--rb-primary);
  border-bottom-color: var(--rb-primary);
  color: var(--rb-on-primary);
}
.dual-list-escolhidas .dual-list-cabecalho small,
.dual-list-escolhidas .dual-list-contador { color: var(--rb-on-primary); opacity: 0.85; }

.dual-list-filtro {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--rb-border);
  color: var(--rb-text-muted);
}
.dual-list-filtro input {
  flex: 1;
  min-width: 0;
  padding: 4px 8px;
  border: 1px solid var(--rb-border-strong);
  border-radius: 6px;
  background: var(--rb-surface);
  color: var(--rb-text);
}
.dual-list-filtro input:focus { outline: none; border-color: var(--rb-primary); box-shadow: 0 0 0 3px var(--rb-focus-ring); }

.dual-list-lista {
  flex: 1;
  width: 100%;
  min-height: 200px;
  padding: 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--rb-text);
}
.dual-list-lista:focus { outline: none; box-shadow: inset 0 0 0 2px var(--rb-focus-ring); }
.dual-list-lista option { padding: 5px 8px; border-radius: 4px; }
.dual-list-lista option:checked { background: var(--rb-primary) linear-gradient(0deg, var(--rb-primary), var(--rb-primary)); color: var(--rb-on-primary); }

.dual-list-todas { margin: 8px 12px; align-self: flex-start; }

.dual-list-meio {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.dual-list-seta {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rb-border-strong);
  border-radius: 999px;
  background: var(--rb-surface);
  color: var(--rb-text);
  cursor: pointer;
  transition: background var(--rb-dur) var(--rb-ease), color var(--rb-dur) var(--rb-ease);
}
.dual-list-seta:hover,
.dual-list-seta:focus-visible {
  background: var(--rb-primary);
  border-color: var(--rb-primary);
  color: var(--rb-on-primary);
  outline: none;
}

/* Telas estreitas: as colunas ficam uma sobre a outra e as setas viram setas para cima e para baixo */
@media (max-width: 767.98px) {
  .dual-list { grid-template-columns: 1fr; }
  .dual-list-meio { flex-direction: row; justify-content: center; }
  .dual-list-seta i { transform: rotate(90deg); } /* direita vira para baixo, esquerda vira para cima */
}