/* Shared form and reading quality. Existing compact sizing, mobile table cards,
   button variants, validation logic and dialog behavior remain authoritative.
   The named layer resolves legacy paint specificity; forced/high contrast opts out. */
@layer code-interaction {
  @media screen and (forced-colors:none) {
    html[data-ui="5"][data-theme="light"] { --iq-field:#f5fafc; --iq-edge:#6c8999; --iq-error:#aa263a; --iq-focus:#087da4; }
    html[data-ui="5"][data-theme="dark"] { --iq-field:#242424; --iq-edge:#777777; --iq-error:#ff9aaa; --iq-focus:#dedede; }

    html[data-ui="5"][data-theme]:not(.a11y-contrast):not([data-contrast="high"])
    :is(.app-shell.ui5-shell:not(.route-in-car) .workspace-main,.public-shell main)
    .field:not(:where(.auth-layout *)) :where(input,select,textarea):not(:where([type="checkbox"],[type="radio"],[type="range"],[type="color"],[type="hidden"],[type="file"],[type="submit"],[type="button"],[type="reset"])) {
      background:var(--iq-field)!important; color:var(--portal-text,var(--text))!important;
      border-color:var(--iq-edge)!important; box-shadow:none!important;
      min-width:0; max-width:100%; box-sizing:border-box;
    }

    html[data-ui="5"][data-theme]:not(.a11y-contrast):not([data-contrast="high"])
    :is(.app-shell.ui5-shell:not(.route-in-car) .workspace-main,.public-shell main)
    .field:not(:where(.auth-layout *)) :where(input,select,textarea):not(:where([type="checkbox"],[type="radio"],[type="range"],[type="color"],[type="hidden"],[type="file"],[type="submit"],[type="button"],[type="reset"]))[readonly] {
      background:var(--portal-floor,var(--surface-soft))!important;
      border-style:dashed!important;
    }

    html[data-ui="5"][data-theme]:not(.a11y-contrast):not([data-contrast="high"])
    :is(.app-shell.ui5-shell:not(.route-in-car) .workspace-main,.public-shell main)
    .field:not(:where(.auth-layout *)) :where(input,select,textarea):not(:where([type="checkbox"],[type="radio"],[type="range"],[type="color"],[type="hidden"],[type="file"],[type="submit"],[type="button"],[type="reset"])):disabled {
      background:var(--portal-raised,var(--raised))!important;
      color:var(--portal-muted,var(--muted))!important; cursor:not-allowed;
    }

    /* Existing aria-invalid and helper copy are the source of truth, never :invalid
       on an untouched required field. No validation/approval state is invented. */
    html[data-ui="5"][data-theme]:not(.a11y-contrast):not([data-contrast="high"])
    :is(.app-shell.ui5-shell:not(.route-in-car) .workspace-main,.public-shell main)
    .field:not(:where(.auth-layout *)) :where(input,select,textarea):not(:where([type="checkbox"],[type="radio"],[type="range"],[type="color"],[type="hidden"],[type="file"],[type="submit"],[type="button"],[type="reset"]))[aria-invalid="true"] {
      border-color:var(--iq-error)!important;
      box-shadow:inset 0 0 0 1px var(--iq-error)!important;
    }
    html[data-ui="5"][data-theme]:not(.a11y-contrast):not([data-contrast="high"])
    :is(.app-shell.ui5-shell:not(.route-in-car) .workspace-main,.public-shell main)
    .field:not(:where(.auth-layout *)) [aria-invalid="true"] ~ small { color:var(--iq-error)!important; }

    html[data-ui="5"][data-theme]:not(.a11y-contrast):not([data-contrast="high"])
    :is(.app-shell.ui5-shell:not(.route-in-car) .workspace-main,.public-shell main)
    :is(.field:not(:where(.auth-layout *)) :where(input,select,textarea):not(:where([type="checkbox"],[type="radio"],[type="range"],[type="color"],[type="hidden"],[type="file"],[type="submit"],[type="button"],[type="reset"])),.table-scroll):focus-visible {
      outline:2px solid var(--iq-focus)!important; outline-offset:2px!important;
    }
  }
}

/* Let real content wrap without hiding columns, truncating errors, changing
   control order or shrinking the existing 16px mobile field type. */
html[data-ui="5"] :is(.app-shell.ui5-shell:not(.route-in-car) .workspace-main,.public-shell main)
:is(.field>label,.field>small,.panel-head>div,.page-heading>div,.notice>div) {
  min-width:0; overflow-wrap:anywhere;
}
html[data-ui="5"] .app-shell.ui5-shell:not(.route-in-car) .workspace-main :is(.table-scroll td,.pager) {
  font-variant-numeric:tabular-nums;
}
html[data-ui="5"] .app-shell.ui5-shell:not(.route-in-car) .workspace-main .table-scroll td {
  overflow-wrap:anywhere;
}