/*
 * Contrato final de tipografia e densidade do CRM.
 *
 * Este arquivo e carregado depois dos estilos de feature para que paginas antigas,
 * Setup e modais compartilhem a escala do Record Edit. As excecoes de altura sao
 * controles cuja propria natureza exige outra geometria: textarea, select multiplo,
 * upload, color picker, checkbox/radio/range e editores graficos.
 */

html body {
  font-family: var(--bs-body-font-family);
}

body :is(button, input, optgroup, select, textarea) {
  font-family: inherit !important;
}

body :is(label, .form-label, .form-check-label) {
  font-size: var(--crm-field-label-font-size) !important;
}

body :is(input, select, textarea, .form-control, .form-select, .input-group-text) {
  font-size: var(--crm-control-font-size) !important;
}

body input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
body select:not([multiple]):not([size]) {
  height: var(--crm-control-height) !important;
  min-height: var(--crm-control-height) !important;
}

body input[type="file"] {
  min-height: var(--crm-control-height) !important;
}

body .input-group-text {
  min-height: var(--crm-control-height) !important;
}

body button:not(.btn-close) {
  font-size: var(--crm-button-font-size) !important;
}

body .btn:not(.btn-close) {
  min-height: var(--crm-button-height) !important;
}

/* Flex gap also separates icons from bare text nodes. A lone icon has no gap.
   Keep hidden controls hidden and let Bootstrap display utilities take precedence. */
body .btn:not(.btn-close):not([hidden]):has(> .bi) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  column-gap: var(--crm-button-icon-gap);
}

body .dropdown-item:not([hidden]):has(> .bi) {
  display: flex;
  align-items: center;
  column-gap: var(--crm-button-icon-gap);
}

body :is(.btn:not(.btn-close), .dropdown-item) > .bi {
  flex-shrink: 0;
}

/* Replace legacy icon spacing, preserving auto margins used to align menu icons. */
body :is(.btn:not(.btn-close), .dropdown-item) > .bi:not(.ms-auto):not(.mx-auto):not(.m-auto) {
  margin-inline-start: 0 !important;
}

body :is(.btn:not(.btn-close), .dropdown-item) > .bi:not(.me-auto):not(.mx-auto):not(.m-auto) {
  margin-inline-end: 0 !important;
}

body .btn.btn-sm:not(.btn-close) {
  min-height: var(--crm-button-sm-height) !important;
  font-size: var(--crm-button-sm-font-size) !important;
}

body .btn.btn-lg:not(.btn-close) {
  min-height: var(--crm-button-lg-height) !important;
  font-size: var(--crm-button-lg-font-size) !important;
}

body :is(.modal, [role="dialog"]) :is(.row.g-2, .row.g-3) {
  row-gap: var(--crm-field-gap) !important;
}

@media (max-width: 575.98px) {
  body :is(.modal-footer, .rv-modal-form__footer) .btn {
    min-width: 0;
  }
}