/* RG COMPANY — idle field surface V4.
   Light theme needs a clearer, but still quiet, Material-like idle surface.
   Dark theme keeps the already approved V3 contrast. */

html[data-theme="light"] body.cabinet-body {
  --rg-idle-field-surface-v4: color-mix(in srgb, var(--cab-panel) 89%, var(--cab-text) 11%);
  --rg-idle-field-surface-hover-v4: color-mix(in srgb, var(--cab-panel) 86%, var(--cab-text) 14%);
}

html[data-theme="dark"] body.cabinet-body {
  --rg-idle-field-surface-v4: var(--rg-idle-field-surface);
  --rg-idle-field-surface-hover-v4: var(--rg-idle-field-surface-hover);
}

/* Filled controls use their wrapper as the visible 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-v4) !important;
}

/* Outlined controls and legacy/dialog fields receive the same idle fill. */
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-v4) !important;
}

@media (hover: hover) and (pointer: fine) {
  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),
  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-v4) !important;
  }
}