/* RG COMPANY — idle field surface V3.
   Unfocused text fields and ComboBoxes retain a subtle Material-style surface. */

body.cabinet-body {
  --rg-idle-field-surface: color-mix(in srgb, var(--cab-panel) 94%, var(--cab-text) 6%);
  --rg-idle-field-surface-hover: color-mix(in srgb, var(--cab-panel) 91%, var(--cab-text) 9%);
}

/* Filled Material controls already use the wrapper as their surface. */
body.cabinet-body .rg-md-field.rg-md-filled,
body.cabinet-body .md-control-field.md-variant-filled {
  background-color: var(--rg-idle-field-surface) !important;
}

body.cabinet-body .rg-md-field.rg-md-filled:hover:not(.is-disabled):not(.is-readonly),
body.cabinet-body .md-control-field.md-variant-filled:hover:not(.is-disabled):not(.is-readonly) {
  background-color: var(--rg-idle-field-surface-hover) !important;
}

/* Outlined controls get the same quiet surface without changing their soft border. */
body.cabinet-body .rg-md-field.rg-md-outlined > input.rg-md-control:not([type="file"]),
body.cabinet-body .rg-md-field.rg-md-outlined > textarea.rg-md-control,
body.cabinet-body .rg-md-field.rg-md-outlined > .custom-select .custom-select-button,
body.cabinet-body .rg-md-field.rg-md-outlined > .rg-md-select .custom-select-button,
body.cabinet-body .md-control-field.md-variant-outlined > input.md-control-input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
body.cabinet-body .md-control-field.md-variant-outlined > textarea.md-control-input,
body.cabinet-body .md-control-field.md-variant-outlined .custom-select-button,
body.cabinet-body #modal-root label.field > input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
body.cabinet-body #modal-root label.field > textarea,
body.cabinet-body #modal-root label.field > .custom-select .custom-select-button,
body.cabinet-body [role="dialog"] label.field > input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
body.cabinet-body [role="dialog"] label.field > textarea,
body.cabinet-body [role="dialog"] label.field > .custom-select .custom-select-button,
body.cabinet-body .field:has(> input:not([type="file"]):not([type="checkbox"]):not([type="radio"]), > textarea, > .custom-select) > input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
body.cabinet-body .field:has(> input:not([type="file"]):not([type="checkbox"]):not([type="radio"]), > textarea, > .custom-select) > textarea,
body.cabinet-body .field:has(> input:not([type="file"]):not([type="checkbox"]):not([type="radio"]), > textarea, > .custom-select) > .custom-select .custom-select-button {
  background-color: var(--rg-idle-field-surface) !important;
}

@media (hover: hover) and (pointer: fine) {
  body.cabinet-body .rg-md-field.rg-md-outlined:hover:not(.is-disabled):not(.is-readonly) > input.rg-md-control,
  body.cabinet-body .rg-md-field.rg-md-outlined:hover:not(.is-disabled):not(.is-readonly) > textarea.rg-md-control,
  body.cabinet-body .rg-md-field.rg-md-outlined:hover:not(.is-disabled) > .custom-select .custom-select-button,
  body.cabinet-body .rg-md-field.rg-md-outlined:hover:not(.is-disabled) > .rg-md-select .custom-select-button,
  body.cabinet-body .md-control-field.md-variant-outlined:hover:not(.is-disabled):not(.is-readonly) > input.md-control-input,
  body.cabinet-body .md-control-field.md-variant-outlined:hover:not(.is-disabled):not(.is-readonly) > textarea.md-control-input,
  body.cabinet-body .md-control-field.md-variant-outlined:hover:not(.is-disabled) .custom-select-button,
  body.cabinet-body #modal-root label.field:hover > input,
  body.cabinet-body #modal-root label.field:hover > textarea,
  body.cabinet-body #modal-root label.field:hover > .custom-select .custom-select-button,
  body.cabinet-body [role="dialog"] label.field:hover > input,
  body.cabinet-body [role="dialog"] label.field:hover > textarea,
  body.cabinet-body [role="dialog"] label.field:hover > .custom-select .custom-select-button {
    background-color: var(--rg-idle-field-surface-hover) !important;
  }
}