/* Phase E5.3 Form Components */
/* 100% Bootstrap CSS Variable Independent */

.form-label {
    display: inline-block;
    margin-bottom: var(--erp-space-1, 4px);
    font-size: var(--erp-font-size-form-label, 13px);
    font-weight: var(--erp-font-weight-form-label, var(--erp-font-weight-semibold, 600));
    color: var(--erp-color-form-label, var(--erp-text-secondary, #334155));
}

.form-text {
    margin-top: var(--erp-space-1, 4px);
    font-size: var(--erp-font-size-form-help, var(--erp-font-size-xs, 12px));
    color: var(--erp-text-secondary, #64748b);
}

.form-control {
    display: block;
    width: 100%;
    height: var(--erp-control-height-standard, 38px);
    padding: 0 var(--erp-space-3, 12px);
    font-family: var(--erp-font-family);
    font-size: var(--erp-font-size-form-control, 13.5px);
    font-weight: var(--erp-font-weight-regular, 400);
    line-height: var(--erp-control-height-standard, 38px);
    color: var(--erp-text-primary);
    background-color: var(--erp-bg-surface);
    background-clip: padding-box;
    border: 1px solid var(--erp-border-form-control, var(--erp-border-default, #cbd5e1));
    appearance: none;
    border-radius: var(--erp-radius-md, 6px);
    transition: border-color var(--erp-transition-fast), box-shadow var(--erp-transition-fast);
    box-sizing: border-box;
}

textarea.form-control {
    font-size: var(--erp-font-size-base, 13px);
    height: auto;
    min-height: calc(var(--erp-control-height-standard, 38px) * 2);
    padding: var(--erp-space-2, 8px) var(--erp-space-3, 12px);
    line-height: var(--erp-line-height-normal, 1.45);
}

.form-control[type="file"] {
    overflow: hidden;
}

.form-control:focus {
    color: var(--erp-text-primary);
    background-color: var(--erp-bg-surface);
    border-color: var(--erp-border-focus);
    outline: 0;
    box-shadow: var(--erp-focus-ring-form, var(--erp-shadow-focus));
}

.form-control::-webkit-input-placeholder {
    color: var(--erp-text-tertiary);
    opacity: 1;
}
.form-control::-moz-placeholder {
    color: var(--erp-text-tertiary);
    opacity: 1;
}
.form-control::placeholder {
    color: var(--erp-text-tertiary);
    opacity: 1;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--erp-bg-page);
    opacity: 1;
}

.form-control-color {
    width: 3rem;
    height: auto;
    padding: 0.375rem;
}
.form-control-color:not(:disabled):not([readonly]) {
    cursor: pointer;
}
.form-control-color::-moz-color-swatch {
    height: 1.5em;
    border-radius: var(--erp-radius-sm);
}
.form-control-color::-webkit-color-swatch {
    height: 1.5em;
    border-radius: var(--erp-radius-sm);
}

.form-select {
    display: block;
    width: 100%;
    height: var(--erp-control-height-standard, 38px);
    padding: 0 2.25rem 0 var(--erp-space-3, 12px);
    font-family: var(--erp-font-family);
    font-size: var(--erp-font-size-form-control, 13.5px);
    font-weight: var(--erp-font-weight-regular, 400);
    line-height: var(--erp-control-height-standard, 38px);
    color: var(--erp-text-primary);
    background-color: var(--erp-bg-surface);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23475569' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    border: 1px solid var(--erp-border-form-control, var(--erp-border-default, #cbd5e1));
    border-radius: var(--erp-radius-md, 6px);
    transition: border-color var(--erp-transition-fast), box-shadow var(--erp-transition-fast);
    appearance: none;
    box-sizing: border-box;
}

.form-select:focus {
    border-color: var(--erp-border-focus);
    outline: 0;
    box-shadow: var(--erp-focus-ring-form, var(--erp-shadow-focus));
}
.form-select:disabled {
    background-color: var(--erp-bg-page);
}

.form-control-sm,
.form-select-sm {
    height: var(--erp-control-height-compact, 34px);
    padding-top: 0;
    padding-bottom: 0;
    padding-left: var(--erp-space-2, 8px);
    padding-right: var(--erp-space-2, 8px);
    font-size: var(--erp-font-size-sm, 12px);
    line-height: var(--erp-control-height-compact, 34px);
    border-radius: var(--erp-radius-sm, 4px);
}
.form-select-sm {
    padding-right: 2rem;
}

.form-control-lg,
.form-select-lg {
    height: var(--erp-control-height-lg, 44px);
    padding-top: 0;
    padding-bottom: 0;
    padding-left: var(--erp-space-4, 16px);
    padding-right: var(--erp-space-4, 16px);
    font-size: var(--erp-font-size-md, 14px);
    line-height: var(--erp-control-height-lg, 44px);
    border-radius: var(--erp-radius-lg, 8px);
}
.form-select-lg {
    padding-right: 2.5rem;
}

/* Check controls */
.form-check {
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5em;
    margin-bottom: 0.125rem;
}

.form-check-input {
    width: 1em;
    height: 1em;
    margin-top: 0.25em;
    vertical-align: top;
    background-color: var(--erp-bg-surface);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid var(--erp-color-slate-400);
    appearance: none;
    print-color-adjust: exact;
    float: left;
    margin-left: -1.5em;
    transition: background-color var(--erp-transition-fast), border-color var(--erp-transition-fast);
}
.form-check-input[type="checkbox"] {
    border-radius: 0.25em;
}
.form-check-input[type="radio"] {
    border-radius: 50%;
}
.form-check-input:active {
    filter: brightness(90%);
}
.form-check-input:focus {
    border-color: var(--erp-border-focus);
    outline: 0;
    box-shadow: var(--erp-shadow-focus);
}
.form-check-input:checked {
    background-color: var(--erp-color-primary-600);
    border-color: var(--erp-color-primary-600);
}
.form-check-input:checked[type="checkbox"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}
.form-check-input:checked[type="radio"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}
.form-check-input:disabled {
    pointer-events: none;
    filter: none;
    opacity: 0.5;
}
.form-check-input[disabled] ~ .form-check-label,
.form-check-input:disabled ~ .form-check-label {
    opacity: 0.5;
}

.form-check-label {
    font-size: var(--erp-font-size-base, 13px);
    font-weight: var(--erp-font-weight-regular, 400);
    color: var(--erp-text-primary);
    cursor: pointer;
}

/* Switch */
.form-switch {
    padding-left: 2.5em;
}
.form-switch .form-check-input {
    width: 2em;
    margin-left: -2.5em;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23cbd5e1'/%3e%3c/svg%3e");
    background-position: left center;
    border-radius: 2em;
    transition: background-position var(--erp-duration-fast) ease-in-out;
}
.form-switch .form-check-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2394a3b8'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:checked {
    background-position: right center;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

/* Input Group */
.input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}
.input-group > .form-control,
.input-group > .form-select {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

.input-group > .form-control:focus,
.input-group > .form-select:focus {
    z-index: 3;
}
.input-group .btn {
    position: relative;
    z-index: 2;
    height: var(--erp-control-height-standard, 38px);
    display: inline-flex;
    align-items: center;
}
.input-group .btn:focus {
    z-index: 3;
}

.input-group-text {
    display: flex;
    align-items: center;
    height: var(--erp-control-height-standard, 38px);
    padding: 0 var(--erp-space-3, 12px);
    font-family: var(--erp-font-family);
    font-size: var(--erp-font-size-form-control, 13.5px);
    font-weight: var(--erp-font-weight-regular, 400);
    line-height: var(--erp-line-height-normal, 1.5);
    color: var(--erp-text-secondary);
    text-align: center;
    white-space: nowrap;
    background-color: var(--erp-color-slate-50, #f8fafc);
    border: 1px solid var(--erp-border-default);
    border-radius: var(--erp-radius-md, 6px);
    box-sizing: border-box;
}

.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text,
.input-group-sm > .btn {
    height: var(--erp-control-height-compact, 34px);
    padding: 0 var(--erp-space-2, 8px);
    font-size: var(--erp-font-size-sm, 12px);
    line-height: var(--erp-control-height-compact, 34px);
    border-radius: var(--erp-radius-sm, 4px);
}

/* Border joining in input groups */
.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n + 3) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Validation */
.valid-feedback,
.invalid-feedback {
    display: none;
    width: 100%;
    margin-top: var(--erp-space-1, 4px);
    font-size: var(--erp-font-size-form-error, var(--erp-font-size-xs, 12px));
}
.valid-feedback {
    font-size: var(--erp-font-size-form-help, var(--erp-font-size-xs, 12px));
    color: var(--erp-color-success-600, #16a34a);
}
.invalid-feedback {
    color: var(--erp-color-danger-600, #dc2626);
    font-weight: var(--erp-font-weight-medium, 500);
}

.was-validated :valid ~ .valid-feedback,
.is-valid ~ .valid-feedback,
.was-validated :invalid ~ .invalid-feedback,
.is-invalid ~ .invalid-feedback {
    display: block;
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: var(--erp-color-danger-600);
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc2626'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc2626' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus {
    border-color: var(--erp-color-danger-600);
    box-shadow: 0 0 0 0.25rem rgba(220, 38, 38, 0.25);
}

.form-control.is-valid,
.was-validated .form-control:valid {
    border-color: var(--erp-color-success-600);
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2316a34a' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.form-control.is-valid:focus,
.was-validated .form-control:valid:focus {
    border-color: var(--erp-color-success-600);
    box-shadow: 0 0 0 0.25rem rgba(22, 163, 74, 0.25);
}

.form-select.is-invalid,
.was-validated .form-select:invalid {
    border-color: var(--erp-color-danger-600);
}
.form-select.is-invalid:focus,
.was-validated .form-select:invalid:focus {
    border-color: var(--erp-color-danger-600);
    box-shadow: 0 0 0 0.25rem rgba(220, 38, 38, 0.25);
}

.form-select.is-valid,
.was-validated .form-select:valid {
    border-color: var(--erp-color-success-600);
}
.form-select.is-valid:focus,
.was-validated .form-select:valid:focus {
    border-color: var(--erp-color-success-600);
    box-shadow: 0 0 0 0.25rem rgba(22, 163, 74, 0.25);
}