/* ==========================================================================
   One size for buttons and form fields across the CRM.
   Loaded after the page stylesheets (and before phone.css), so the many
   page-by-page heights, paddings and colours collapse to one standard:

     Buttons      30px, 12px sides, 8px corners, 14px text (small: 28px)
     Form fields  36px, 8px corners, 14px text, white, one focus ring
                  (40px with 16px text on phones, so iOS doesn't zoom)
     Filter bars  stay at 30px, in line with the buttons beside them

   Left alone on purpose: the technician report forms (big touch targets
   on site), the Safi composer, the form builder's title, and fields that
   sit borderless inside another box (category / competitor tokens).
   ========================================================================== */

:root {
  --field-height: 36px;
  --field-radius: 8px;
  --field-font: 14px;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */

@media (min-width: 769px) {
  .btn:not(.btn-sm):not(.btn-xs):not(.btn-lg):not(#auth-screen *) {
    height: var(--control-height-md) !important;
    min-height: var(--control-height-md) !important;
    border-radius: var(--btn-radius) !important;
    font-size: var(--btn-font-size) !important;
    font-weight: var(--btn-font-weight) !important;
  }

  .btn.btn-sm:not(#auth-screen *) {
    height: var(--control-height-sm) !important;
    min-height: var(--control-height-sm) !important;
    border-radius: var(--btn-radius) !important;
  }
}

/* Dialog footers had their own padding (0.4rem 0.875rem in some) */
.modal-footer .btn:not(.btn-sm):not(.btn-icon),
.modal .modal-footer .btn:not(.btn-sm):not(.btn-icon) {
  padding: 0 var(--space-3) !important;
}

/* The bar that appears when rows are ticked */
.bab-btn {
  height: var(--control-height-md);
  padding: 0 var(--space-3) !important;
  border-radius: var(--btn-radius) !important;
  font-size: var(--btn-font-size) !important;
}

/* Required fields: one red asterisk after the label, everywhere */
.required-indicator,
.ups-required {
  margin-left: 2px;
  font-size: inherit !important;
  font-weight: 500 !important;
  color: var(--color-danger, #dc2626) !important;
}

/* ── Form fields ───────────────────────────────────────────────────────── */

:is(
  .form-field :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]):not(.categories-input):not(.opp-token-input), select),
  input.calls-input,
  select.calls-input,
  .modal input.ups-input,
  .modal input.form-control,
  input.sv-input,
  select.sv-input,
  input.vl-input,
  #company-search-input
) {
  height: var(--field-height) !important;
  min-height: var(--field-height) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--field-radius) !important;
  background-color: var(--bg-secondary) !important;
  font-size: var(--field-font) !important;
  line-height: normal;
  box-sizing: border-box;
}

/* Plain fields get the same 12px sides. Log Visit and Route plan keep
   theirs: some hold an icon on the left or a unit ("min", "USD") on the right */
:is(
  .form-field :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]):not(.categories-input):not(.opp-token-input), select),
  input.calls-input,
  .modal input.ups-input,
  .modal input.form-control,
  input.sv-input
) {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

:is(.form-field, .modal) select,
select.sv-input {
  padding-right: 32px !important;
}

/* Choice buttons in the contract dialog line up with the fields */
.contracts-type-btn {
  height: var(--field-height) !important;
}

/* Dropdowns used as form fields */
.crm-dd--form .crm-dd-trigger {
  height: var(--field-height) !important;
  min-height: var(--field-height) !important;
  border-radius: var(--field-radius) !important;
  font-size: var(--field-font) !important;
}

/* Boxes that hold tokens and a borderless input */
.categories-input-container,
.opp-token-field {
  min-height: var(--field-height) !important;
  border-radius: var(--field-radius) !important;
  background-color: var(--bg-secondary) !important;
}

.categories-input,
.opp-token-input {
  height: 26px !important;
  min-height: 0 !important;
  font-size: var(--field-font) !important;
}

/* Longer text */
:is(
  .form-field textarea,
  textarea.calls-input,
  .modal textarea.ups-input,
  .modal textarea.form-control,
  textarea.sv-input,
  textarea.vl-input
) {
  min-height: 80px;
  padding: 8px 12px !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--field-radius) !important;
  background-color: var(--bg-secondary) !important;
  font-size: var(--field-font) !important;
  line-height: 1.5 !important;
}

/* One focus ring for all of them */
:is(
  .form-field :is(input, select, textarea),
  .calls-input,
  .modal .ups-input,
  .modal .form-control,
  .sv-input,
  .vl-input,
  #company-search-input
):focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 2px var(--color-primary-bg) !important;
  outline: none !important;
}

.categories-input-container:focus-within,
.opp-token-field:focus-within {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 2px var(--color-primary-bg) !important;
}

/* Phones: a bigger target, and 16px text so iOS doesn't zoom in */
@media (max-width: 768px) {
  :root {
    --field-height: 40px;
    --field-font: 16px;
  }
}

/* Phones: every dialog ends the same way, two equal buttons across */
@media (max-width: 768px) {
  .modal-footer .btn:not(.btn-sm):not(.btn-icon) {
    height: 44px !important;
    min-height: 44px !important;
    font-size: 15px !important;
  }

  .modal-footer .modal-footer-meta:not(:has(*)) {
    display: none;
  }

  .modal-footer .modal-footer-actions {
    display: grid !important;
    flex: 1 1 100%;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    gap: 8px;
    width: 100%;
  }

  .modal-footer .modal-footer-actions .btn {
    width: 100%;
    justify-content: center;
  }
}