/* Shared by Razor components and the Razor Pages control adapters. */
.beatori-input {
    box-sizing:border-box;
    min-width:0;
    max-width:100%;
    width:var(--field-width,100%);
    min-height:44px;
    padding:var(--field-padding,10px);
    border:var(--field-outline-width,1.5px) solid var(--field-outline,var(--theme-tube-dim));
    border-radius:var(--field-radius,var(--theme-radius-frame));
    color:var(--field-text,var(--theme-text));
    background-color:var(--field-fill,var(--theme-surface));
    font:var(--field-font-weight,400) var(--field-font-size,16px)/1.2 var(--font-body);
    text-align:var(--field-align,start);
    caret-color:var(--field-accent,var(--theme-primary));
    box-shadow:inset var(--field-stripe,0px) 0 rgb(from var(--field-accent,var(--theme-primary)) r g b / .68);
}
input.beatori-input:not([type=file]), [data-ui-text-field]:not(textarea) { height:var(--field-height,44px); }
:root .beatori-input::placeholder { color:var(--field-placeholder,var(--theme-text-dim)); }
:root .beatori-input:focus-visible {
    background-color:var(--field-focused-fill,color-mix(in srgb,var(--theme-primary) 10%,var(--theme-surface)));
    border-color:var(--field-outline,var(--theme-primary-bright));
    outline:2px solid var(--field-outline,var(--theme-primary-bright));
    outline-offset:-2px;
    box-shadow:inset var(--field-stripe,0px) 0 var(--field-accent,var(--theme-primary));
}
:root .beatori-input:is(.input-validation-error, [aria-invalid="true"]),
:root .beatori-input:is(.input-validation-error, [aria-invalid="true"]):focus {
    border:2px solid var(--theme-red);
}
.beatori-input:disabled { opacity:.45; cursor: var(--beatori-cursor-not-allowed, not-allowed); }
.beatori-input.beatori-textarea { min-height:var(--field-height,132px); height:var(--field-height,auto); padding:var(--field-padding,12px); resize:vertical; }
.beatori-text-field { position:relative; min-width:0; width:var(--field-width,100%); max-width:100%; }
.beatori-text-field > .beatori-input { width:100%; padding-inline-start:calc(10px + var(--field-leading-width,0px)); padding-inline-end:calc(10px + var(--field-trailing-width,0px)); }
.beatori-text-field:has(> .beatori-field-clear:not([hidden])) > .beatori-input { padding-inline-end:54px; }
.beatori-field-leading, .beatori-field-trailing { position:absolute; z-index:1; inset-block:0; display:flex; align-items:center; justify-content:center; color:var(--theme-text-muted); }
.beatori-field-leading { inset-inline-start:10px; width:var(--field-leading-width,30px); }
.beatori-field-trailing { inset-inline-end:10px; width:var(--field-trailing-width,30px); }
.beatori-field-clear { position:absolute; inset-inline-end:10px; inset-block-start:0; display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:var(--field-radius,8px); background:transparent; color:var(--theme-text-muted); font-size:14px; cursor: var(--beatori-cursor-pointer, pointer); }
.beatori-field-clear[hidden] { display:none; }
.beatori-field-clear:hover { background:rgb(from var(--field-accent,var(--theme-primary)) r g b / .18); }
.beatori-field-clear:focus-visible { outline-offset:-4px; box-shadow:none; }
.beatori-text-field input[type=search]::-webkit-search-cancel-button { display:none; }
.beatori-input.beatori-select {
    appearance:none;
    padding:10px 40px 10px 14px;
    background-image:linear-gradient(45deg,transparent 50%,var(--theme-primary-bright) 50%),linear-gradient(135deg,var(--theme-primary-bright) 50%,transparent 50%);
    background-position:calc(100% - 19px) center,calc(100% - 14px) center;
    background-size:5px 5px;
    background-repeat:no-repeat;
    cursor: var(--beatori-cursor-pointer, pointer);
}
.beatori-select option, .beatori-select optgroup {
    color:var(--theme-text);
    background:var(--theme-surface-raised);
}
.beatori-input.beatori-select[multiple], .beatori-input.beatori-select[size]:not([size="1"]) {
    background-image:none;
    padding:8px;
}
.beatori-select[multiple] option, .beatori-select[size] option { min-height:44px; padding:10px 12px; }
.beatori-input.beatori-file-input { padding:0 12px 0 0; }
.beatori-file-input {
    min-height: 44px;
    min-width: 0;
    max-width: 100%;
    padding: 0 12px 0 0;
    border: 1px solid var(--theme-tube-unlit);
    border-radius: var(--theme-radius-sm);
    background: var(--theme-surface-raised);
    overflow: hidden;
    font: inherit;
    color: var(--theme-text-muted);
}

.beatori-file-input::file-selector-button {
    min-height: 44px;
    margin: 0 12px 0 0;
    padding: 8px 14px;
    border: 0;
    border-right: 1px solid var(--theme-tube-dim);
    border-radius: 0;
    background: var(--theme-surface-raised);
    color: var(--theme-text);
    font: inherit;
    font-weight: 700;
    cursor: var(--beatori-cursor-pointer, pointer);
    transition: background var(--theme-transition), color var(--theme-transition);
}

.beatori-file-input:hover:not(:disabled)::file-selector-button {
    background: var(--theme-primary);
    color: white;
}

.beatori-file-input:focus-visible {
    outline: 2px solid var(--theme-primary-bright);
    outline-offset: 3px;
}

.beatori-file-input:disabled {
    opacity: .45;
    cursor: var(--beatori-cursor-not-allowed, not-allowed);
}

.beatori-file-input:disabled::file-selector-button { cursor: var(--beatori-cursor-not-allowed, not-allowed); }

@media (prefers-reduced-motion: reduce) {
    .beatori-file-input::file-selector-button { transition: none; }
}



/* Single-select geometry is shared by components and MVC field adapters. */
.beatori-input.beatori-select {
    height:var(--field-height,44px);
    padding-inline-start:calc(12px + var(--field-select-leading-space,0px));
    padding-inline-end:calc(32px + var(--field-select-trailing-space,0px));
    font-weight:var(--field-font-weight,700);
    letter-spacing:var(--field-tracking,.5px);
    background-position:calc(100% - 19px - var(--field-select-trailing-space,0px)) center,calc(100% - 14px - var(--field-select-trailing-space,0px)) center;
    background-image:linear-gradient(45deg,transparent 50%,var(--field-select-icon,var(--theme-primary-bright)) 50%),linear-gradient(135deg,var(--field-select-icon,var(--theme-primary-bright)) 50%,transparent 50%);
}
.beatori-input.beatori-select:hover:not(:disabled) { background-color:var(--field-focused-fill,color-mix(in srgb,var(--theme-primary) 10%,var(--field-fill,var(--theme-surface)))); }
.beatori-input.beatori-select[data-show-arrow=false] { background-image:none; padding-inline-end:calc(12px + var(--field-select-trailing-space,0px)); }
.beatori-select-field { position:relative; width:var(--field-width,200px); max-width:100%; min-width:0; }
.beatori-select-field > select { width:100%; }
.beatori-select-leading { position:absolute; inset-inline-start:12px; top:50%; transform:translateY(-50%); color:var(--field-select-leading-color,var(--theme-primary)); font-size:var(--field-select-icon-size,16px); pointer-events:none; }
.beatori-select-field > .beatori-select-secondary-leading, .beatori-select-field > .beatori-select-secondary-trailing { position:absolute; top:50%; transform:translateY(-50%); z-index:1; }
.beatori-select-secondary-leading { inset-inline-start:12px; }
.beatori-select-leading + .beatori-select-secondary-leading { inset-inline-start:calc(20px + var(--field-select-icon-size,16px)); }
.beatori-select-secondary-trailing { inset-inline-end:0; }
@supports (appearance:base-select) {
    .beatori-select:not([multiple]):not([size]), .beatori-select:not([multiple]):not([size])::picker(select) { appearance:base-select; }
    .beatori-select::picker-icon { display:none; }
    .beatori-select::picker(select) { padding:4px; max-height:min(360px,calc(100dvh - 16px)); overflow:auto; color:var(--field-text,var(--theme-text)); background:var(--field-select-overlay,var(--theme-surface)); border:1px solid var(--field-outline,var(--theme-tube-dim)); border-radius:var(--theme-radius-sm); box-shadow:var(--theme-glow); }
    .beatori-select option { min-height:44px; padding:10px 12px; border-radius:6px; font:400 16px/1.2 var(--font-body); background:transparent; overflow-wrap:anywhere; white-space:normal; }
    .beatori-select option:checked { background:rgb(from var(--theme-primary) r g b / .18); color:var(--theme-primary-bright); }
    .beatori-select option:hover, .beatori-select option:focus { background:rgb(from var(--theme-primary) r g b / .12); outline:2px solid var(--theme-primary-bright); outline-offset:-2px; }
    .beatori-select option:disabled { opacity:.45; }
}