/*
 * WedUploader form theme for Bootstrap 5.3.x.
 * Load after Bootstrap, wu-foundation.css and any old form styles.
 * Move into shared wu-components.css after removing superseded app form rules.
 */
:root {
    --wu-form-height: 44px;
    --wu-form-radius: 7px;
    --wu-form-padding-y: 9px;
    --wu-form-padding-x: 11px;
    --wu-form-font-size: var(--wu-text-sm, .875rem);
    --wu-form-bg: var(--wu-neutral-0, #fff);
    --wu-form-color: var(--wu-neutral-900, #2b2824);
    --wu-form-border: var(--wu-neutral-300, #d8d1c6);
    --wu-form-muted: var(--wu-neutral-500, #958c80);
    --wu-form-disabled-bg: var(--wu-neutral-100, #f4f1ec);
    --wu-form-accent: var(--wu-gold-500, #c19a5b);
    --wu-form-checked: var(--wu-gold-600, #a47d45);
    --wu-form-ring: color-mix(in srgb, var(--wu-form-accent) 18%, transparent);
}

/* Bootstrap classes are canonical; WU aliases also support existing fields. */
.form-control,
.form-select,
.wu-input,
.wu-textarea,
.wu-select,
input.wu-search {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-width: 0;
    min-height: var(--wu-form-height);
    padding: var(--wu-form-padding-y) var(--wu-form-padding-x);
    border: 1px solid var(--wu-form-border);
    border-radius: var(--wu-form-radius);
    background-color: var(--wu-form-bg);
    color: var(--wu-form-color);
    font-family: inherit;
    font-size: var(--wu-form-font-size);
    line-height: 1.5;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.form-control::placeholder,
.wu-input::placeholder,
.wu-textarea::placeholder,
input.wu-search::placeholder {
    color: var(--wu-form-muted);
    opacity: 1;
}

.form-control:focus,
.form-select:focus,
.wu-input:focus,
.wu-textarea:focus,
.wu-select:focus,
input.wu-search:focus {
    border-color: var(--wu-form-accent);
    outline: 0;
    box-shadow: 0 0 0 3px var(--wu-form-ring);
}

.form-select,
.wu-select {
    padding-inline-end: 40px;
    background-position: right 12px center;
    background-size: 16px 16px;
    --bs-form-select-bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23111' d='M18.632 8.183a.996.996 0 0 0-1.414 0l-4.561 4.565a.996.996 0 0 1-1.414 0L6.682 8.183a.996.996 0 1 0-1.414 1.405l4.57 4.575a2.986 2.986 0 0 0 4.223 0l4.57-4.575a.997.997 0 0 0 0-1.405'%3E%3C/path%3E%3C/svg%3E");
}

/* Match Bootstrap's multi-select behavior; leave validation icons intact. */
.form-select[multiple],
.form-select[size]:not([size="1"]) {
    padding-inline-end: var(--wu-form-padding-x);
}

.form-control-sm,
.form-select-sm,
.input-group-sm,
.wu-search:has(> .form-control-sm) {
    --wu-form-height: 36px;
    --wu-form-padding-y: 6px;
    --wu-form-padding-x: 10px;
    --wu-form-font-size: var(--wu-text-sm, .875rem);
}

.form-control-lg,
.form-select-lg,
.input-group-lg,
.wu-search:has(> .form-control-lg) {
    --wu-form-height: 52px;
    --wu-form-padding-y: 12px;
    --wu-form-padding-x: 14px;
    --wu-form-font-size: var(--wu-text-md, 1rem);
}

.form-control:disabled,
.form-select:disabled,
.wu-input:disabled,
.wu-textarea:disabled,
.wu-select:disabled,
input.wu-search:disabled {
    background-color: var(--wu-form-disabled-bg);
    color: var(--wu-form-muted);
    cursor: not-allowed;
    opacity: 1;
}

.form-control[readonly]:not(.form-control-plaintext),
.wu-input[readonly],
.wu-textarea[readonly] {
    background-color: var(--wu-neutral-50, #faf9f7);
}

/* Keep .wu-search as a wrapper. Use a real labeled input inside it. */
.wu-search:not(input) {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    min-height: var(--wu-form-height);
    padding: 0 var(--wu-form-padding-x);
    border: 1px solid var(--wu-form-border);
    border-radius: var(--wu-form-radius);
    background: var(--wu-form-bg);
    color: var(--wu-form-color);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.wu-search:not(input):focus-within {
    border-color: var(--wu-form-accent);
    box-shadow: 0 0 0 3px var(--wu-form-ring);
}

.wu-search:not(input) > input[type="search"],
.wu-search:not(input) > input[type="search"]:focus {
    flex: 1 1 auto;
    width: 0;
    min-width: 0;
    min-height: calc(var(--wu-form-height) - 2px);
    padding: var(--wu-form-padding-y) 0;
    border: 0;
    border-radius: 0;
    outline: 0;
    background-color: transparent;
    color: inherit;
    font-family: inherit;
    font-size: var(--wu-form-font-size);
    line-height: 1.5;
    box-shadow: none;
}

.wu-search:not(input):has(> input:disabled) {
    background-color: var(--wu-form-disabled-bg);
    color: var(--wu-form-muted);
    cursor: not-allowed;
}

.wu-search:not(input):has(> .is-invalid) {
    border-color: var(--bs-form-invalid-border-color, #dc3545);
}

.wu-search:not(input):has(> .is-valid) {
    border-color: var(--bs-form-valid-border-color, #198754);
}

.wu-search:not(input):has(> .is-invalid):focus-within {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-form-invalid-border-color, #dc3545) 18%, transparent);
}

.wu-search:not(input):has(> .is-valid):focus-within {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-form-valid-border-color, #198754) 18%, transparent);
}

/* Native Bootstrap input group. Icon/text addons share the field surface. */
.input-group {
    --bs-border-radius: var(--wu-form-radius);
    --bs-border-radius-sm: var(--wu-form-radius);
    --bs-border-radius-lg: var(--wu-form-radius);
    border-radius: var(--wu-form-radius);
}

/* Compatibility: replace the old custom wrapper rules when both classes exist. */
.input-group.wu-input-group {
    border: 0;
    overflow: visible;
    background: transparent;
}

.input-group > .form-control,
.input-group > .form-select {
    min-height: var(--wu-form-height);
    padding: 9px 11px 9px 0;
    border: 1px solid var(--wu-form-border);
    font-size: var(--wu-form-font-size);
    line-height: 1.5;
}

.input-group > .form-select {
    padding-inline-end: 40px;
}

/* Leave room for Bootstrap's feedback icon when our group padding overrides it. */
.input-group > .form-control:is(.is-valid, .is-invalid),
.was-validated .input-group > .form-control:is(:valid, :invalid) {
    padding-inline-end: calc(var(--wu-form-padding-x) + 1.5em);
}

.input-group > .input-group-text {
    min-height: var(--wu-form-height);
    padding: var(--wu-form-padding-y) var(--wu-form-padding-x);
    border-color: var(--wu-form-border);
    background-color: var(--wu-form-bg);
    color: var(--wu-form-muted);
    font-size: var(--wu-form-font-size);
    line-height: 1.5;
}

/* Remove only icon/text seams. Button separators keep Bootstrap behavior. */
.input-group > .input-group-text:has(+ .form-control, + .form-select),
.input-group > :is(.form-control, .form-select):has(+ .input-group-text) {
    border-inline-end: 0;
}

.input-group > .input-group-text + :is(.form-control, .form-select),
.input-group > :is(.form-control, .form-select) + .input-group-text {
    border-inline-start: 0;
}

.input-group:focus-within > :is(.form-control, .form-select, .input-group-text) {
    border-color: var(--wu-form-accent);
}

/* Feedback inside .has-validation keeps Bootstrap's own focus/validation styles. */
.input-group:not(.has-validation):focus-within {
    box-shadow: 0 0 0 3px var(--wu-form-ring);
}

.input-group:not(.has-validation) > :is(.form-control, .form-select):focus {
    box-shadow: none;
}

.input-group:has(> .is-invalid) > :is(.form-control, .form-select, .input-group-text),
.was-validated .input-group:has(> :invalid) > :is(.form-control, .form-select, .input-group-text) {
    border-color: var(--bs-form-invalid-border-color, #dc3545);
}

.input-group:has(> .is-valid) > :is(.form-control, .form-select, .input-group-text),
.was-validated .input-group:has(> :valid):not(:has(> :invalid)) > :is(.form-control, .form-select, .input-group-text) {
    border-color: var(--bs-form-valid-border-color, #198754);
}

.input-group:not(.has-validation):has(> .is-invalid):focus-within {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-form-invalid-border-color, #dc3545) 18%, transparent);
}

.input-group:not(.has-validation):has(> .is-valid):focus-within {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-form-valid-border-color, #198754) 18%, transparent);
}

.input-group:has(> .form-control:disabled, > .form-select:disabled) > .input-group-text {
    background-color: var(--wu-form-disabled-bg);
    color: var(--wu-form-muted);
}

/* Checkbox / radio / switch: Bootstrap keeps the icons and interaction. */
.form-check-input {
    border-color: var(--wu-form-border);
    background-color: var(--wu-form-bg);
    cursor: pointer;
}

.form-check-input:focus {
    border-color: var(--wu-form-accent);
    outline: 0;
    box-shadow: 0 0 0 3px var(--wu-form-ring);
}

.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--wu-form-checked);
    border-color: var(--wu-form-checked);
}

.form-check-input.is-valid,
.was-validated .form-check-input:valid {
    border-color: var(--bs-form-valid-border-color, #198754);
}

.form-check-input.is-invalid,
.was-validated .form-check-input:invalid {
    border-color: var(--bs-form-invalid-border-color, #dc3545);
}

.form-check-input:disabled {
    cursor: not-allowed;
}

/* Bootstrap's unchecked switch focus dot normally turns blue. */
.form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23958c80'/%3E%3C/svg%3E");
}

/* Existing WU switch sizes; checkbox/radio need no extra custom class. */
.form-switch.wu-form-switch {
    --wu-switch-height: 20px;
    --wu-switch-width: 38px;
    /* padding-inline-start: calc(var(--wu-switch-width) + 10px); */
}

.form-switch.wu-form-switch--sm {
    --wu-switch-height: 16px;
    --wu-switch-width: 30px;
}

.form-switch.wu-form-switch--lg {
    --wu-switch-height: 24px;
    --wu-switch-width: 46px;
}

.form-switch.wu-form-switch .form-check-input {
    width: var(--wu-switch-width);
    height: var(--wu-switch-height);
    /* margin-inline-start: calc(-1 * (var(--wu-switch-width) + 10px)); */
    border-radius: var(--wu-radius-full, 999px);
}

.form-switch.wu-form-switch.form-check-reverse {
    padding-inline-start: 0;
    padding-inline-end: calc(var(--wu-switch-width) + 10px);
}

.form-switch.wu-form-switch.form-check-reverse .form-check-input {
    margin-inline-start: 0;
    margin-inline-end: calc(-1 * (var(--wu-switch-width) + 10px));
}


@media (prefers-reduced-motion: reduce) {
    .form-control,
    .form-select,
    .wu-input,
    .wu-textarea,
    .wu-select,
    .wu-search,
    .form-check-input {
        transition: none;
    }
}