/* =========================================================
   ControlPlane density compatibility layer

   Loaded after scoped component CSS so existing ControlPlane
   forms and tables consume one reversible density contract.
   Widths, grid definitions, colors, and interaction states are
   intentionally untouched.
   ========================================================= */

:root body :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="hidden"]),
    select) {
    box-sizing: border-box;
    min-height: var(--cp-input-height) !important;
    height: var(--cp-input-height) !important;
    padding-block: var(--cp-input-py) !important;
    padding-inline: var(--cp-input-px) !important;
    font-size: var(--cp-input-font-size) !important;
    line-height: 1.25;
}

:root body textarea {
    box-sizing: border-box;
    padding-block: var(--cp-input-py) !important;
    padding-inline: var(--cp-input-px) !important;
    font-size: var(--cp-input-font-size) !important;
    line-height: 1.35;
}

/* Preserve useful native targets for compact binary controls. */
:root body :is(input[type="checkbox"], input[type="radio"]) {
    min-width: 16px;
    min-height: 16px;
}

/* Common form containers across the scoped component library. */
:root body :is(
    .vx-form-grid,
    .vx-login__form,
    .vx-auth-recovery__form,
    [class$="__form-grid"],
    [class$="__fields"],
    [class$="__form"]) {
    row-gap: var(--cp-form-row-gap) !important;
}

/* Validation remains in normal flow with enough separation to avoid overlap. */
:root body :is(.validation-message, [role="alert"]) {
    line-height: 1.3;
}

/* Tables can contain child components; this global layer reaches their
   generated cells after scoped CSS without requiring per-page duplication. */
:root body table > thead > tr > th {
    padding-block: var(--cp-table-header-py) !important;
    padding-inline: var(--cp-table-cell-px) !important;
    vertical-align: middle;
}

:root body table > :is(tbody, tfoot) > tr > :is(td, th) {
    padding-block: var(--cp-table-cell-py) !important;
    padding-inline: var(--cp-table-cell-px) !important;
    vertical-align: middle;
}

:root body table :is(button, a, [role="button"], [class*="badge"], [class*="status"], [class*="avatar"]) {
    vertical-align: middle;
}

/* Buttons embedded in fields and table rows keep an accessible compact target. */
:root body :is(table, [class*="field"], [class*="input"]) :is(button, [role="button"]) {
    min-height: 32px;
}