/* Shared compact form controls used by document forms and reusable entity cards. */

html body .vario-shared-form-controls :where(.form-control:not(textarea), .form-select),
html body .vario-erp-document-details-modal .vario-document-form-grid input:not([type="checkbox"]):not([type="radio"]),
html body .vario-erp-document-details-modal .vario-document-form-grid select,
html[data-vario-theme] body .vario-shared-form-controls :where(.form-control:not(textarea), .form-select),
html[data-vario-theme] body .vario-erp-document-details-modal .vario-document-form-grid input:not([type="checkbox"]):not([type="radio"]),
html[data-vario-theme] body .vario-erp-document-details-modal .vario-document-form-grid select {
    height: var(--vario-size-form-control-height) !important;
    min-height: var(--vario-size-form-control-height) !important;
    max-height: var(--vario-size-form-control-height) !important;
    padding: 0 8px !important;
    border-color: var(--vario-color-border-field) !important;
    border-radius: var(--vario-size-form-control-radius) !important;
    background-color: var(--vario-input-bg) !important;
    color: var(--vario-text) !important;
    font: var(--vario-font-form-control) !important;
}

/* A compact date picker is enhanced in-place over a native date input.  Keep
   its field itself on the same FV contract even where an older screen has a
   page-level input rule.  The popup remains in vario-date-picker.css; this is
   deliberately the one shared field-metric source. */
html body :is(input[type="date"], input[type="datetime-local"])[data-vario-date-picker="compact"],
html[data-vario-theme] body :is(input[type="date"], input[type="datetime-local"])[data-vario-date-picker="compact"] {
    box-sizing: border-box !important;
    height: var(--vario-date-picker-field-height) !important;
    min-height: var(--vario-date-picker-field-height) !important;
    max-height: var(--vario-date-picker-field-height) !important;
    padding: 0 var(--vario-date-picker-field-padding-x) !important;
    border-color: var(--vario-color-border-field) !important;
    border-radius: var(--vario-date-picker-field-radius) !important;
    background-color: var(--vario-input-bg) !important;
    color: var(--vario-text) !important;
    font: var(--vario-font-form-control) !important;
}

html body :is(input[type="date"], input[type="datetime-local"])[data-vario-date-picker="compact"]:is([readonly], :disabled),
html[data-vario-theme] body :is(input[type="date"], input[type="datetime-local"])[data-vario-date-picker="compact"]:is([readonly], :disabled) {
    background-color: var(--vario-input-readonly-bg) !important;
}

html body .vario-shared-form-controls select.form-select,
html body .vario-erp-document-details-modal .vario-document-form-grid select,
html[data-vario-theme] body .vario-shared-form-controls select.form-select,
html[data-vario-theme] body .vario-erp-document-details-modal .vario-document-form-grid select {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    background-image: none !important;
}

html body .vario-shared-form-controls .form-control[readonly],
html body .vario-shared-form-controls .form-control:disabled,
html body .vario-shared-form-controls .form-select:disabled,
html[data-vario-theme] body .vario-shared-form-controls .form-control[readonly],
html[data-vario-theme] body .vario-shared-form-controls .form-control:disabled,
html[data-vario-theme] body .vario-shared-form-controls .form-select:disabled {
    background-color: var(--vario-input-readonly-bg) !important;
}

html body .vario-shared-form-controls textarea.form-control,
html body .vario-erp-document-details-modal .vario-document-form-grid textarea,
html[data-vario-theme] body .vario-erp-document-details-modal .vario-document-form-grid textarea,
html[data-vario-theme] body .vario-shared-form-controls textarea.form-control {
    height: var(--vario-size-form-textarea-height) !important;
    min-height: var(--vario-size-form-textarea-height) !important;
    max-height: var(--vario-size-form-textarea-height) !important;
    padding: 5px 9px !important;
    border-color: var(--vario-color-border-field) !important;
    border-radius: var(--vario-size-form-control-radius) !important;
    background-color: var(--vario-input-bg) !important;
    color: var(--vario-text) !important;
    font: var(--vario-font-form-textarea) !important;
    resize: none;
}

html body .vario-shared-form-controls .vario-numeric-input,
html[data-vario-theme] body .vario-shared-form-controls .vario-numeric-input {
    height: var(--vario-size-form-control-height) !important;
    min-height: var(--vario-size-form-control-height) !important;
}

html body .vario-shared-form-controls .vario-check,
html[data-vario-theme] body .vario-shared-form-controls .vario-check {
    display: flex;
    align-items: center;
    min-height: 22px;
    gap: 6px;
    margin: 0;
    color: var(--vario-text);
    font: 500 10px/14px var(--vario-font-family-ui);
}

html body .vario-shared-form-controls .vario-check input,
html[data-vario-theme] body .vario-shared-form-controls .vario-check input {
    flex: 0 0 auto;
    margin: 0;
    accent-color: var(--vario-accent);
}

html body .vario-shared-form-controls .vario-section-action,
html[data-vario-theme] body .vario-shared-form-controls .vario-section-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: var(--vario-size-section-action-height) !important;
    min-height: var(--vario-size-section-action-height) !important;
    padding: 0 10px !important;
    border-radius: var(--vario-size-form-control-radius) !important;
    font: var(--vario-font-section-action) !important;
}

html body .vario-shared-form-controls .vario-form-inline-action,
html[data-vario-theme] body .vario-shared-form-controls .vario-form-inline-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: var(--vario-size-form-control-height) !important;
    min-height: var(--vario-size-form-control-height) !important;
    padding: 0 8px !important;
    border-radius: var(--vario-size-form-control-radius) !important;
    font: 800 10px/22px var(--vario-font-family-ui) !important;
    white-space: nowrap;
}

html body .vario-shared-form-controls .vario-row-action,
html[data-vario-theme] body .vario-shared-form-controls .vario-row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--vario-size-row-action-height) !important;
    min-height: var(--vario-size-row-action-height) !important;
    padding: 0 7px !important;
    border-radius: 6px !important;
    font: var(--vario-font-row-action) !important;
}

html body .vario-shared-form-controls .vario-icon-action,
html[data-vario-theme] body .vario-shared-form-controls .vario-icon-action {
    display: inline-grid;
    flex: 0 0 var(--vario-size-icon-action);
    width: var(--vario-size-icon-action) !important;
    min-width: var(--vario-size-icon-action) !important;
    height: var(--vario-size-icon-action) !important;
    min-height: var(--vario-size-icon-action) !important;
    padding: 0 !important;
    place-items: center;
    border-radius: var(--vario-size-form-control-radius) !important;
}

html body .vario-shared-form-controls :where(.vario-section-action, .vario-form-inline-action, .vario-row-action, .vario-icon-action) .nav-icon,
html[data-vario-theme] body .vario-shared-form-controls :where(.vario-section-action, .vario-form-inline-action, .vario-row-action, .vario-icon-action) .nav-icon {
    width: 13px;
    height: 13px;
}

html body .vario-shared-form-controls .vario-copy-value,
html[data-vario-theme] body .vario-shared-form-controls .vario-copy-value {
    max-width: 100%;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: transparent;
    color: var(--vario-color-primary-600);
    font: var(--vario-font-form-control);
    text-align: left;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html body .vario-shared-form-dialog > .vario-erp-document-card-footer,
html[data-vario-theme] body .vario-shared-form-dialog > .vario-erp-document-card-footer {
    align-items: center !important;
    flex-wrap: nowrap !important;
    height: var(--vario-size-compact-dialog-footer-height) !important;
    min-height: var(--vario-size-compact-dialog-footer-height) !important;
    padding: 7px 12px !important;
}

html body .vario-shared-form-controls > .vario-erp-document-card-footer > *,
html[data-vario-theme] body .vario-shared-form-controls > .vario-erp-document-card-footer > * {
    margin: 0 !important;
}

html body .vario-shared-form-controls > .vario-erp-document-card-footer .vario-erp-modal-footer-actions,
html[data-vario-theme] body .vario-shared-form-controls > .vario-erp-document-card-footer .vario-erp-modal-footer-actions {
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    align-self: center !important;
    align-items: center !important;
}

/* Reusable document-line panels can occupy two form columns without every
   document recreating a width rule.  At the one-column breakpoint they still
   occupy the full available row instead of creating an implicit grid column. */
html body .vario-erp-document-details-modal .vario-document-form-grid > .vario-document-lines-panel-wide,
html[data-vario-theme] body .vario-erp-document-details-modal .vario-document-form-grid > .vario-document-lines-panel-wide {
    grid-column: span 2 !important;
    min-width: 0 !important;
}

@media (max-width: 640px) {
    html body .vario-erp-document-details-modal .vario-document-form-grid > .vario-document-lines-panel-wide,
    html[data-vario-theme] body .vario-erp-document-details-modal .vario-document-form-grid > .vario-document-lines-panel-wide {
        grid-column: 1 / -1 !important;
    }
}