/*
 * Vyzor form parity — matches vyzorTheme/assets/css/styles.css
 * (form_inputs.html: .form-label, .form-control, .form-select, .input-group-text, .form-text, row gy-4).
 * Loaded after crm-theme.css; wins over CRM Dynamics layout tweaks on control chrome only.
 */

.crm-shell-dynamics :is(.crm-user-form, .crm-sales-form, .crm-modal-form, .crm-form-page, .crm-email-verify-form),
.authentication-background .crm-user-form {
  --crm-vyzor-field-gap-y: 1.5rem;
  --crm-vyzor-field-gap-x: 1.5rem;
}

.crm-shell-dynamics :is(.crm-user-form, .crm-sales-form, .crm-modal-form) .row,
.crm-shell-dynamics .crm-form-page .row:not(.g-0),
.crm-shell-dynamics .crm-form-page .crm-form-section-panel > .row,
.crm-shell-dynamics .crm-opportunity-form--edit-layout .crm-opportunity-edit__info > .row,
.crm-shell-dynamics .crm-opportunity-form--edit-layout .crm-opportunity-edit__pipeline > .row {
  --bs-gutter-y: var(--crm-vyzor-field-gap-y);
  --bs-gutter-x: var(--crm-vyzor-field-gap-x);
}

.crm-shell-dynamics :is(.crm-user-form, .crm-sales-form, .crm-modal-form, .crm-form-page, .crm-email-verify-form) :is(.form-control, .form-select, textarea.form-control):not(.form-control-sm):not(.form-control-lg),
.crm-shell-dynamics .crm-form-page :is(.form-control, .form-select, textarea.form-control):not(.form-control-sm):not(.form-control-lg),
.crm-shell-dynamics .crm-inline-field__control :is(.form-control, .form-select, textarea.form-control):not(.form-control-sm):not(.form-control-lg),
.authentication-background .crm-user-form :is(.form-control, .form-select):not(.form-control-sm):not(.form-control-lg) {
  font-size: 0.875rem;
  font-weight: var(--default-font-weight, 400);
  line-height: 1.5;
  border-radius: 0.3rem;
  padding: 0.5rem 0.75rem;
  min-height: unset;
}

.crm-shell-dynamics :is(.crm-user-form, .crm-sales-form, .crm-modal-form, .crm-form-page) .form-control:disabled,
.crm-shell-dynamics :is(.crm-user-form, .crm-sales-form, .crm-modal-form, .crm-form-page) .form-select:disabled,
.crm-shell-dynamics :is(.crm-user-form, .crm-sales-form, .crm-modal-form, .crm-form-page) .form-control[readonly]:not(.form-control-plaintext) {
  background-color: rgb(var(--light-rgb));
  color: var(--default-text-color);
}

.crm-shell-dynamics :is(.crm-user-form, .crm-sales-form, .crm-modal-form, .crm-form-page, .crm-email-verify-form) .form-label,
.crm-shell-dynamics .crm-inline-field__label,
.crm-shell-dynamics .crm-contact-comm__label,
.authentication-background .crm-user-form .form-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--default-text-color);
  margin-bottom: 0.5rem;
}

.crm-shell-dynamics :is(.crm-user-form, .crm-sales-form, .crm-modal-form, .crm-form-page) .form-text,
.crm-shell-dynamics .crm-contact-comm__hint {
  color: var(--text-muted);
  font-size: 0.875rem;
}

.crm-shell-dynamics :is(.crm-user-form, .crm-sales-form, .crm-modal-form, .crm-form-page) .input-group-text {
  border-color: var(--input-border);
  font-size: 0.875rem;
  border-radius: 0.25rem;
  background-color: rgb(var(--light-rgb));
  color: var(--default-text-color);
  padding: 0.5rem 0.75rem;
}

.crm-shell-dynamics :is(.crm-user-form, .crm-sales-form, .crm-modal-form) .form-control-plaintext {
  font-size: 0.875rem;
  color: var(--default-text-color);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.crm-shell-dynamics :is(.crm-user-form, .crm-sales-form, .crm-modal-form, .crm-form-page) .form-check:not(.form-switch) .form-check-input,
.authentication-background .crm-user-form .form-check:not(.form-switch) .form-check-input {
  width: 1.1em;
  height: 1.1em;
  background-color: var(--custom-white);
  border: 1px solid var(--input-border);
  cursor: pointer;
  position: relative;
  z-index: 1;
}

/* Must beat the rule above — theme checked state uses a white tick on a light fill (invisible). */
.crm-shell-dynamics :is(.crm-user-form, .crm-sales-form, .crm-modal-form, .crm-form-page) .form-check:not(.form-switch) .form-check-input:checked,
.authentication-background .crm-user-form .form-check:not(.form-switch) .form-check-input:checked {
  background-color: var(--primary-color, #5a8dee);
  border-color: var(--primary-color, #5a8dee);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 0.75em;
}

.crm-shell-dynamics :is(.crm-user-form, .crm-sales-form, .crm-modal-form, .crm-form-page) .form-check:not(.form-switch) .form-check-label,
.authentication-background .crm-user-form .form-check:not(.form-switch) .form-check-label {
  cursor: pointer;
  user-select: none;
}

/* Owner-transfer confirm: keep hit target clear in RTL modal body */
.crm-shell-dynamics .crm-owner-transfer-check {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding-right: 0;
  padding-left: 0;
  min-height: 1.5rem;
}

.crm-shell-dynamics .crm-owner-transfer-check .form-check-input {
  float: none;
  margin: 0.15rem 0 0;
  flex: 0 0 auto;
}

.crm-shell-dynamics .crm-owner-transfer-check .form-check-label {
  margin: 0;
  flex: 1 1 auto;
}

/* Vyzor form_check_radios.html — medium switch width only (keep Bootstrap track/knob) */
.crm-shell-dynamics :is(.crm-user-form, .crm-sales-form, .crm-modal-form, .crm-form-page) .form-check.form-switch .form-check-input,
.crm-shell-dynamics .crm-form-option-panel .form-check.form-switch .form-check-input,
.crm-shell-dynamics .crm-profile-page .form-check.form-switch .form-check-input,
.authentication-background .crm-user-form .form-check.form-switch .form-check-input {
  width: 2.25rem;
  height: 1.25rem;
  margin-top: 0.125rem;
  cursor: pointer;
}

.crm-shell-dynamics :is(.crm-user-form, .crm-sales-form, .crm-modal-form, .crm-form-page) .form-check-label,
.crm-shell-dynamics .crm-form-option-panel .form-check.form-switch .form-check-label {
  font-size: 0.875rem;
  color: var(--default-text-color);
}

.crm-shell-dynamics :is(.crm-user-form, .crm-sales-form, .crm-modal-form, .crm-form-page) .form-check.form-switch .form-check-label:not(.visually-hidden),
.crm-shell-dynamics .crm-form-option-panel .form-check.form-switch .form-check-label:not(.visually-hidden),
.crm-shell-dynamics .crm-profile-page .form-check.form-switch .form-check-label:not(.visually-hidden),
.authentication-background .crm-user-form .form-check.form-switch .form-check-label:not(.visually-hidden) {
  font-size: 0.95rem;
  margin-block-start: 2px;
}

.crm-shell-dynamics :is(.crm-user-form, .crm-sales-form, .crm-modal-form) .choices__inner {
  padding: 0.5rem 0.75rem !important;
  background-color: var(--form-control-bg) !important;
  border-radius: 0.35rem !important;
  font-size: 0.875rem !important;
  border: 1px solid var(--input-border) !important;
  min-height: auto !important;
  line-height: 1.5;
}

.crm-shell-dynamics :is(.crm-user-form, .crm-sales-form, .crm-modal-form) tags.tagify {
  border-color: var(--input-border);
  background-color: var(--form-control-bg);
  border-radius: 0.3rem;
}

.page:has(.crm-form-page) .card.custom-card > .card-body {
  padding: 1.25rem !important;
  gap: 1.25rem;
}

.page:has(.crm-form-page) .card.custom-card > .card-body > .row {
  --bs-gutter-y: 1.5rem !important;
  --bs-gutter-x: 1.5rem !important;
}

.page:has(.crm-form-page) .crm-form-section-panel,
.page:has(.crm-form-page) .crm-form-aside .crm-form-section-panel {
  padding: 1.25rem !important;
}

.crm-shell-dynamics .modal-body.crm-sales-form-body {
  padding: 1.25rem;
}

.crm-shell-dynamics .modal-footer {
  padding: 1rem 1.25rem;
}

.crm-shell-dynamics .modal-header {
  padding: 1rem 1.25rem;
}

/* Inline edit hub — same control metrics as standard fields (beats older inline shrink rules) */
.crm-shell-dynamics :is(.crm-opportunity-form--inline, .crm-opportunity-form--edit-layout) .crm-inline-field__control :is(.form-control, .form-select):not(.form-control-sm):not(.form-control-lg) {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: 0.3rem;
  min-height: unset;
}

.crm-shell-dynamics :is(.crm-opportunity-form--inline, .crm-opportunity-form--edit-layout) .crm-inline-field--stack .crm-inline-field__control textarea.form-control {
  min-height: 4rem;
}