/*
 * Shared field appearance. Keep this global: Blazor InputBase components and
 * shared dropdowns do not receive their parent's CSS-isolation attribute.
 * #app deliberately outranks legacy page appearance; pages still own layout.
 */
:root {
    --field-bg: #111827;
    --field-text: #f3f4f6;
    --field-muted: #94a3b8;
    --field-border: #64748b;
    --field-hover: #94a3b8;
    --field-focus: #60a5fa;
    --field-error: #f87171;
    --field-radius: 10px;
    --field-height: 46px;
    --field-ring: 0 0 0 3px rgb(96 165 250 / 22%);
}

/* Low-specificity sizing lets search bars, tables and inline editors own width. */
:where(#app input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"], [type="button"], [type="submit"], [type="reset"], [type="image"]), #app select, #app textarea) {
    display: block;
    width: 100%;
}

#app :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"], [type="button"], [type="submit"], [type="reset"], [type="image"]), select, textarea) {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    min-height: var(--field-height);
    height: auto;
    padding: 10px 14px;
    border: 1px solid var(--field-border);
    border-radius: var(--field-radius);
    background-color: var(--field-bg);
    color: var(--field-text);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color-scheme: dark;
    box-shadow: none;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

#app :where(input, textarea)::placeholder {
    color: var(--field-muted);
    opacity: 1;
}

#app :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"], [type="button"], [type="submit"], [type="reset"], [type="image"]), select, textarea):hover:not(:disabled):not(:focus):not(.invalid, .is-invalid, [aria-invalid="true"]) {
    border-color: var(--field-hover);
}

#app :where(input, select, textarea):focus {
    border-color: var(--field-focus);
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: var(--field-ring);
}

#app :where(select:not([multiple]):not([size])) {
    appearance: none;
    padding-right: 42px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23cbd5e1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: right 14px center;
    cursor: pointer;
}

#app select:is([multiple], [size]) {
    background-image: none;
}

#app select :is(option, optgroup) {
    background: var(--field-bg);
    color: var(--field-text);
}

#app textarea {
    min-height: 110px;
    resize: vertical;
}

/* Native mobile date controls must shrink with their field, including WebKit's
 * internal date editor. Keep the native picker and a full-width touch target. */
#app input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    min-width: 0;
    min-inline-size: 0;
    max-inline-size: 100%;
}

#app input[type="date"]::-webkit-date-and-time-value {
    min-width: 0;
    text-align: start;
}

#app input[type="date"]::-webkit-datetime-edit {
    min-width: 0;
    padding: 0;
}

#app input[type="date"]::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
}

/* Let the browser draw a legible dark-mode calendar, without double inversion. */
#app input::-webkit-calendar-picker-indicator {
    filter: none;
    opacity: .85;
    cursor: pointer;
}

#app :where(input, select, textarea):is(.invalid, .is-invalid, [aria-invalid="true"]) {
    border-color: var(--field-error);
}

#app :where(input, select, textarea):is(.invalid, .is-invalid, [aria-invalid="true"]):focus {
    box-shadow: 0 0 0 3px rgb(248 113 113 / 22%);
}

#app :is(.validation-message, .validation-summary-errors, .invalid-feedback, .cr-validation, .cu-validation) {
    color: var(--field-error);
    font-size: .875rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

#app :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"]), select, textarea):disabled {
    background-color: #263244;
    color: #cbd5e1;
    border-color: var(--field-border);
    cursor: not-allowed;
    opacity: 1;
}

#app :where(input, textarea)[readonly] {
    background-color: #1f2937;
    color: #cbd5e1;
}

#app :where(input, textarea):autofill {
    -webkit-text-fill-color: var(--field-text);
    caret-color: var(--field-text);
    box-shadow: 0 0 0 1000px var(--field-bg) inset;
}

#app :where(input, textarea):autofill:focus {
    box-shadow: 0 0 0 1000px var(--field-bg) inset, var(--field-ring);
}

/* Labels share typography; checkbox labels retain their inline layout. */
#app label:not(.form-check-label):not(.genre-option):not(:has(input[type="checkbox"], input[type="radio"])) {
    color: #cbd5e1;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.5;
    text-transform: none;
    letter-spacing: normal;
}

#app :is(.cr-field, .veh-field, .onr-field, .slr-field, .scy-field, .sty-field, .cu-field, .srf-field) {
    min-width: 0;
}

#app :is(.cr-field, .veh-field, .onr-field, .slr-field, .scy-field, .sty-field, .cu-field, .srf-field) > label {
    margin-bottom: 0;
}

/* Joined fields keep Bootstrap's flex sizing and connected corners. */
#app .input-group > :is(input, select, textarea) {
    width: 1%;
    flex: 1 1 auto;
}

#app .input-group-text {
    border-color: var(--field-border);
    background-color: #263244;
    color: #cbd5e1;
    border-radius: var(--field-radius);
    font-size: 1rem;
}

#app .input-group > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#app .input-group > :not(:first-child):not(.dropdown-menu) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

#app :is(.form-control-sm, .form-select-sm),
#app .input-group-sm > :is(input, select, .input-group-text) {
    min-height: 38px;
    padding-top: 6px;
    padding-bottom: 6px;
}

#app .input-group-lg > :is(input, select, .input-group-text) {
    min-height: 54px;
    padding-top: 14px;
    padding-bottom: 14px;
}

/* File controls use the same surface while retaining the native file picker. */
#app input[type="file"] {
    padding: 6px;
}

#app input[type="file"]::file-selector-button {
    margin: 0 12px 0 0;
    padding: 6px 12px;
    border: 0;
    border-radius: 6px;
    background: #334155;
    color: var(--field-text);
    font: inherit;
    cursor: pointer;
}

#app input[type="file"]:disabled::file-selector-button {
    cursor: not-allowed;
}

/* Native choices must never inherit full-width text-field dimensions. */
#app input:is([type="checkbox"], [type="radio"]) {
    width: 18px;
    height: 18px;
    min-height: 0;
    padding: 0;
    flex-shrink: 0;
    accent-color: var(--blue-500);
    color-scheme: dark;
    cursor: pointer;
}

#app input:is([type="checkbox"], [type="radio"]):disabled {
    cursor: not-allowed;
    opacity: .6;
}

#app .form-check-input:checked {
    background-color: var(--blue-500);
    border-color: var(--blue-500);
}

#app .form-switch .form-check-input {
    width: 2.5em;
}

#app input[type="range"] {
    accent-color: var(--blue-500);
}

/* Search icons sit inside the same field, without a second surrounding border. */
#app .movies-search-wrap {
    position: relative;
    padding: 0;
    border: 0;
    background: transparent;
    min-width: 0;
}

#app .movies-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

#app .movies-search-input {
    padding-left: 40px;
}

@media (prefers-reduced-motion: reduce) {
    #app :is(input, select, textarea) {
        transition: none;
    }
}

@media (forced-colors: active) {
    #app :is(input, select, textarea):focus {
        outline-color: Highlight;
    }
    #app :where(select:not([multiple]):not([size])) {
        appearance: auto;
    }
}