/* ===== portal forms.css — form controls + floating labels (admin density) ===== */
/* Load after ui.css — use portal-tokens --portal-float-* */

.portal-auth .form-label {
    font-weight: 500;
    color: var(--portal-body-color);
}

/* Scoped to portal bodies — does not interfere with admin or other Bootstrap checkbox usage */
body.portal-app .form-check-input,
body.portal-auth .form-check-input {
    width: 16px;
    height: 16px;
    border: 1px solid var(--portal-primary);
    cursor: pointer;
    margin-top: 2px;
    --bs-form-check-bg: var(--portal-input-bg);
    background-color: var(--portal-input-bg);
}

body.portal-app .form-check-input:checked,
body.portal-auth .form-check-input:checked {
    background-color: var(--portal-primary);
    border-color: var(--portal-primary);
    background-image: var(--bs-form-check-bg-image);
}

body.portal-app .form-check-input:focus,
body.portal-auth .form-check-input:focus {
    border-color: var(--portal-primary);
    /* box-shadow: none; */
}

.comn-tagify,
.tagify--outside .tagify__input,
.comn-form-control {
    padding: 10px 10px;
    border: 1px solid var(--portal-border);
    border-radius: 5px;
    font-size: 14px;
    font-weight: 400;
    line-height: calc(122% - 0.08px);
    width: 100%;
    margin: 0;
}

.ts-control,
.ts-control input,
.ts-dropdown {
    color: currentColor;
    font-size: 14px;
}

.ts-control > div {
    text-overflow: ellipsis;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

body.portal-app .form-floating .ts-wrapper .ts-control,
body.portal-app .form-floating-lg .ts-wrapper .ts-control,
body.portal-app .form-floating-md .ts-wrapper .ts-control,
body.portal-app .form-floating-sm .ts-wrapper .ts-control,
body.portal-auth .form-floating .ts-wrapper .ts-control,
body.portal-auth .form-floating-lg .ts-wrapper .ts-control,
body.portal-auth .form-floating-md .ts-wrapper .ts-control,
body.portal-auth .form-floating-sm .ts-wrapper .ts-control {
    display: flex;
    flex-wrap: nowrap;
}

body.portal-app .form-floating .ts-wrapper .ts-control > *,
body.portal-app .form-floating-lg .ts-wrapper .ts-control > *,
body.portal-app .form-floating-md .ts-wrapper .ts-control > *,
body.portal-app .form-floating-sm .ts-wrapper .ts-control > *,
body.portal-auth .form-floating .ts-wrapper .ts-control > *,
body.portal-auth .form-floating-lg .ts-wrapper .ts-control > *,
body.portal-auth .form-floating-md .ts-wrapper .ts-control > *,
body.portal-auth .form-floating-sm .ts-wrapper .ts-control > * {
    flex-shrink: 0;
}

body.portal-app .form-floating .ts-wrapper .ts-control > input,
body.portal-app .form-floating-lg .ts-wrapper .ts-control > input,
body.portal-app .form-floating-md .ts-wrapper .ts-control > input,
body.portal-app .form-floating-sm .ts-wrapper .ts-control > input,
body.portal-auth .form-floating .ts-wrapper .ts-control > input,
body.portal-auth .form-floating-lg .ts-wrapper .ts-control > input,
body.portal-auth .form-floating-md .ts-wrapper .ts-control > input,
body.portal-auth .form-floating-sm .ts-wrapper .ts-control > input {
    min-width: auto;
    width: auto;
}

.order-search-input > .comn-form-control,
.comn-datatable-search {
    padding-left: 40px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="rgb(102, 102, 102)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>');
    background-size: 16px;
    background-position: left 12px center;
    background-repeat: no-repeat;
    max-width: 220px;
}

div.dt-container div.dt-paging ul.pagination {
    justify-content: flex-end;
    gap: 10px;
    margin: 0;
}

@media screen and (max-width: 767px) {
    div.dt-container div.dt-paging ul.pagination {
        justify-content: center;
    }
}

.form-label {
    color: var(--portal-body-color);
    font-size: 12px;
    font-weight: 300;
    line-height: 18px;
    margin-bottom: 5px;
    text-transform: capitalize;
}

.form-control {
    padding: 5px 10px 5px 10px;
    border: 1px solid var(--portal-border);
    border-radius: 5px;
    font-size: 12px;
    font-weight: 400;
    line-height: calc(122% - 0.08px);
    width: 100%;
    margin: 0;
}

.form-select {
    padding: 5px 30px 5px 10px;
    border: 1px solid var(--portal-border);
    border-radius: 5px;
    font-size: 12px;
    font-weight: 400;
    line-height: calc(122% - 0.08px);
    width: 100%;
    margin: 0;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--portal-focus);
}

.form-control::placeholder,
.form-select::placeholder {
    color: var(--portal-muted);
}

/* ===== Floating labels (Notch border style) ===== */
.form-floating,
.form-floating-md {
    --f-height: var(--floating-height-md, 38px);
    --f-pad-x: var(--floating-padding-x-md, 10px);
    --f-font-size: var(--floating-font-size-md, 13px);
    --f-label-left: var(--floating-label-left-md, 10px);
    --f-pad-y: 8px;
}

.form-floating-lg {
    --f-height: var(--floating-height, 48px);
    --f-pad-x: var(--floating-padding-x, 12px);
    --f-font-size: var(--floating-font-size, 14px);
    --f-label-left: var(--floating-label-left, 12px);
    --f-pad-y: 12px;
}

.form-floating-sm {
    --f-height: var(--floating-height-sm, 30px);
    --f-pad-x: var(--floating-padding-x-sm, 8px);
    --f-font-size: var(--floating-font-size-sm, 12px);
    --f-label-left: var(--floating-label-left-sm, 8px);
    --f-pad-y: 5px;
}

body.portal-app .form-floating,
body.portal-app .form-floating-lg,
body.portal-app .form-floating-md,
body.portal-app .form-floating-sm,
body.portal-auth .form-floating,
body.portal-auth .form-floating-lg,
body.portal-auth .form-floating-md,
body.portal-auth .form-floating-sm {
    position: relative;
    /* margin-bottom: var(--portal-float-gap, 0.75rem); */
    margin-top: var(--portal-control-gap-y, 0.55rem) !important;
}

body.portal-app .form-floating:last-child,
body.portal-app .form-floating-lg:last-child,
body.portal-app .form-floating-md:last-child,
body.portal-app .form-floating-sm:last-child,
body.portal-auth .form-floating:last-child,
body.portal-auth .form-floating-lg:last-child,
body.portal-auth .form-floating-md:last-child,
body.portal-auth .form-floating-sm:last-child {
    margin-bottom: 0;
}

body.portal-app .form-floating > .form-control,
body.portal-app .form-floating > .form-select,
body.portal-app .form-floating-lg > .form-control,
body.portal-app .form-floating-lg > .form-select,
body.portal-app .form-floating-md > .form-control,
body.portal-app .form-floating-md > .form-select,
body.portal-app .form-floating-sm > .form-control,
body.portal-app .form-floating-sm > .form-select,
body.portal-auth .form-floating > .form-control,
body.portal-auth .form-floating > .form-select,
body.portal-auth .form-floating-lg > .form-control,
body.portal-auth .form-floating-lg > .form-select,
body.portal-auth .form-floating-md > .form-control,
body.portal-auth .form-floating-md > .form-select,
body.portal-auth .form-floating-sm > .form-control,
body.portal-auth .form-floating-sm > .form-select {
    height: var(--f-height) !important;
    min-height: var(--f-height) !important;
    padding: var(--f-pad-y) var(--f-pad-x) !important;
    font-size: var(--f-font-size) !important;
    font-weight: var(--portal-float-value-weight, 400) !important;
    line-height: normal !important;
    background-color: var(--portal-input-bg) !important;
    color: var(--portal-body-color) !important;
    border: 1px solid var(--portal-border) !important;
    border-radius: var(--portal-float-radius, 0.375rem) !important;
}

body.portal-app .form-floating > .form-control:focus,
body.portal-app .form-floating > .form-select:focus,
body.portal-app .form-floating-lg > .form-control:focus,
body.portal-app .form-floating-lg > .form-select:focus,
body.portal-app .form-floating-md > .form-control:focus,
body.portal-app .form-floating-md > .form-select:focus,
body.portal-app .form-floating-sm > .form-control:focus,
body.portal-app .form-floating-sm > .form-select:focus,
body.portal-auth .form-floating > .form-control:focus,
body.portal-auth .form-floating > .form-select:focus,
body.portal-auth .form-floating-lg > .form-control:focus,
body.portal-auth .form-floating-lg > .form-select:focus,
body.portal-auth .form-floating-md > .form-control:focus,
body.portal-auth .form-floating-md > .form-select:focus,
body.portal-auth .form-floating-sm > .form-control:focus,
body.portal-auth .form-floating-sm > .form-select:focus {
    border-color: var(--portal-focus) !important;
    box-shadow: var(--portal-float-focus-shadow) !important;
    outline: none !important;
}

body.portal-app .form-floating > .form-control.is-invalid,
body.portal-app .form-floating > .form-select.is-invalid,
body.portal-app .form-floating-lg > .form-control.is-invalid,
body.portal-app .form-floating-lg > .form-select.is-invalid,
body.portal-app .form-floating-md > .form-control.is-invalid,
body.portal-app .form-floating-md > .form-select.is-invalid,
body.portal-app .form-floating-sm > .form-control.is-invalid,
body.portal-app .form-floating-sm > .form-select.is-invalid,
body.portal-auth .form-floating > .form-control.is-invalid,
body.portal-auth .form-floating > .form-select.is-invalid,
body.portal-auth .form-floating-lg > .form-control.is-invalid,
body.portal-auth .form-floating-lg > .form-select.is-invalid,
body.portal-auth .form-floating-md > .form-control.is-invalid,
body.portal-auth .form-floating-md > .form-select.is-invalid,
body.portal-auth .form-floating-sm > .form-control.is-invalid,
body.portal-auth .form-floating-sm > .form-select.is-invalid {
    border-color: var(--portal-danger) !important;
}

body.portal-app .form-floating > label,
body.portal-app .form-floating-lg > label,
body.portal-app .form-floating-md > label,
body.portal-app .form-floating-sm > label,
body.portal-auth .form-floating > label,
body.portal-auth .form-floating-lg > label,
body.portal-auth .form-floating-md > label,
body.portal-auth .form-floating-sm > label {
    position: absolute !important;
    top: calc(var(--f-height) / 2) !important;
    left: var(--f-label-left) !important;
    transform: translateY(-50%) !important;
    transform-origin: left center !important;
    transition:
        transform 0.15s ease-in-out,
        top 0.15s ease-in-out,
        font-size 0.15s ease-in-out,
        color 0.15s ease-in-out,
        background-color 0.15s ease-in-out,
        padding 0.15s ease-in-out !important;
    pointer-events: none !important;
    font-size: var(--f-font-size) !important;
    color: var(--portal-muted) !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    z-index: 5 !important;
    display: inline-block !important;
    line-height: 1 !important;
}

body.portal-app .form-floating > label::after,
body.portal-app .form-floating-lg > label::after,
body.portal-app .form-floating-md > label::after,
body.portal-app .form-floating-sm > label::after,
body.portal-auth .form-floating > label::after,
body.portal-auth .form-floating-lg > label::after,
body.portal-auth .form-floating-md > label::after,
body.portal-auth .form-floating-sm > label::after {
    display: none !important;
}

body.portal-app .form-floating > .form-control:focus ~ label,
body.portal-app .form-floating > .form-control:not(:placeholder-shown) ~ label,
body.portal-app .form-floating > .form-select ~ label,
body.portal-app .form-floating > .form-control[type="file"] ~ label,
body.portal-app .form-floating-lg > .form-control:focus ~ label,
body.portal-app
    .form-floating-lg
    > .form-control:not(:placeholder-shown)
    ~ label,
body.portal-app .form-floating-lg > .form-select ~ label,
body.portal-app .form-floating-lg > .form-control[type="file"] ~ label,
body.portal-app .form-floating-md > .form-control:focus ~ label,
body.portal-app
    .form-floating-md
    > .form-control:not(:placeholder-shown)
    ~ label,
body.portal-app .form-floating-md > .form-select ~ label,
body.portal-app .form-floating-md > .form-control[type="file"] ~ label,
body.portal-app .form-floating-sm > .form-control:focus ~ label,
body.portal-app
    .form-floating-sm
    > .form-control:not(:placeholder-shown)
    ~ label,
body.portal-app .form-floating-sm > .form-select ~ label,
body.portal-app .form-floating-sm > .form-control[type="file"] ~ label,
body.portal-auth .form-floating > .form-control:focus ~ label,
body.portal-auth .form-floating > .form-control:not(:placeholder-shown) ~ label,
body.portal-auth .form-floating > .form-select ~ label,
body.portal-auth .form-floating > .form-control[type="file"] ~ label,
body.portal-auth .form-floating-lg > .form-control:focus ~ label,
body.portal-auth
    .form-floating-lg
    > .form-control:not(:placeholder-shown)
    ~ label,
body.portal-auth .form-floating-lg > .form-select ~ label,
body.portal-auth .form-floating-lg > .form-control[type="file"] ~ label,
body.portal-auth .form-floating-md > .form-control:focus ~ label,
body.portal-auth
    .form-floating-md
    > .form-control:not(:placeholder-shown)
    ~ label,
body.portal-auth .form-floating-md > .form-select ~ label,
body.portal-auth .form-floating-md > .form-control[type="file"] ~ label,
body.portal-auth .form-floating-sm > .form-control:focus ~ label,
body.portal-auth
    .form-floating-sm
    > .form-control:not(:placeholder-shown)
    ~ label,
body.portal-auth .form-floating-sm > .form-select ~ label,
body.portal-auth .form-floating-sm > .form-control[type="file"] ~ label,
body.portal-app .form-floating.ts-has-value > label,
body.portal-app .form-floating.ts-focus > label,
body.portal-app .form-floating-lg.ts-has-value > label,
body.portal-app .form-floating-lg.ts-focus > label,
body.portal-app .form-floating-md.ts-has-value > label,
body.portal-app .form-floating-md.ts-focus > label,
body.portal-app .form-floating-sm.ts-has-value > label,
body.portal-app .form-floating-sm.ts-focus > label {
    top: 0 !important;
    transform: translateY(-50%) scale(0.8) !important;
    background-color: var(--portal-input-bg) !important;
    padding: 0 4px !important;
    color: var(--portal-muted) !important;
}

body.portal-app .form-floating > .form-control:focus ~ label,
body.portal-app .form-floating-lg > .form-control:focus ~ label,
body.portal-app .form-floating-md > .form-control:focus ~ label,
body.portal-app .form-floating-sm > .form-control:focus ~ label,
body.portal-app .form-floating.ts-focus > label,
body.portal-app .form-floating-lg.ts-focus > label,
body.portal-app .form-floating-md.ts-focus > label,
body.portal-app .form-floating-sm.ts-focus > label,
body.portal-auth .form-floating > .form-control:focus ~ label,
body.portal-auth .form-floating-lg > .form-control:focus ~ label,
body.portal-auth .form-floating-md > .form-control:focus ~ label,
body.portal-auth .form-floating-sm > .form-control:focus ~ label {
    color: var(--portal-focus) !important;
}

/* Invalid / validation error states */
body.portal-app .form-floating > .is-invalid ~ label,
body.portal-app .form-floating-lg > .is-invalid ~ label,
body.portal-app .form-floating-md > .is-invalid ~ label,
body.portal-app .form-floating-sm > .is-invalid ~ label,
body.portal-auth .form-floating > .is-invalid ~ label,
body.portal-auth .form-floating-lg > .is-invalid ~ label,
body.portal-auth .form-floating-md > .is-invalid ~ label,
body.portal-auth .form-floating-sm > .is-invalid ~ label,
body.portal-app .form-floating:has(.is-invalid) > label,
body.portal-app .form-floating-lg:has(.is-invalid) > label,
body.portal-app .form-floating-md:has(.is-invalid) > label,
body.portal-app .form-floating-sm:has(.is-invalid) > label,
body.portal-auth .form-floating:has(.is-invalid) > label,
body.portal-auth .form-floating-lg:has(.is-invalid) > label,
body.portal-auth .form-floating-md:has(.is-invalid) > label,
body.portal-auth .form-floating-sm:has(.is-invalid) > label {
    color: var(--portal-danger) !important;
}

/* ===== Form section headings ===== */
body.portal-app .portal-section-title,
body.portal-auth .portal-section-title {
    margin-top: 0;
    margin-bottom: 0.75rem;
}

body.portal-app .form-floating > textarea.form-control,
body.portal-app .form-floating-lg > textarea.form-control,
body.portal-app .form-floating-md > textarea.form-control,
body.portal-app .form-floating-sm > textarea.form-control,
body.portal-auth .form-floating > textarea.form-control,
body.portal-auth .form-floating-lg > textarea.form-control,
body.portal-auth .form-floating-md > textarea.form-control,
body.portal-auth .form-floating-sm > textarea.form-control {
    height: auto !important;
    min-height: 6rem !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    line-height: 1.5 !important;
}

body.portal-app .form-floating > textarea.form-control.textarea-sm,
body.portal-app .form-floating-lg > textarea.form-control.textarea-sm,
body.portal-app .form-floating-md > textarea.form-control.textarea-sm,
body.portal-app .form-floating-sm > textarea.form-control.textarea-sm,
body.portal-auth .form-floating > textarea.form-control.textarea-sm,
body.portal-auth .form-floating-lg > textarea.form-control.textarea-sm,
body.portal-auth .form-floating-md > textarea.form-control.textarea-sm,
body.portal-auth .form-floating-sm > textarea.form-control.textarea-sm {
    min-height: 8rem !important;
}

body.portal-app .form-floating > textarea.form-control.textarea-md,
body.portal-app .form-floating-lg > textarea.form-control.textarea-md,
body.portal-app .form-floating-md > textarea.form-control.textarea-md,
body.portal-app .form-floating-sm > textarea.form-control.textarea-md,
body.portal-auth .form-floating > textarea.form-control.textarea-md,
body.portal-auth .form-floating-lg > textarea.form-control.textarea-md,
body.portal-auth .form-floating-md > textarea.form-control.textarea-md,
body.portal-auth .form-floating-sm > textarea.form-control.textarea-md {
    min-height: 120px !important;
}

body.portal-app .form-select,
body.portal-auth .form-select {
    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='%236c757d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

body.portal-app .form-floating > .form-control.comn-datepicker,
body.portal-app .form-floating-lg > .form-control.comn-datepicker,
body.portal-app .form-floating-md > .form-control.comn-datepicker,
body.portal-app .form-floating-sm > .form-control.comn-datepicker {
    padding-right: 2.25rem !important;
}

/* Prevent Bootstrap form-select styles from interfering with Tom Select wrappers */
body.portal-app .form-floating > .ts-wrapper,
body.portal-app .form-floating-lg > .ts-wrapper,
body.portal-app .form-floating-md > .ts-wrapper,
body.portal-app .form-floating-sm > .ts-wrapper,
body.portal-auth .form-floating > .ts-wrapper,
body.portal-auth .form-floating-lg > .ts-wrapper,
body.portal-auth .form-floating-md > .ts-wrapper,
body.portal-auth .form-floating-sm > .ts-wrapper {
    border: none !important;
    padding: 0 !important;
    background-image: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

body.portal-app .form-floating > .ts-wrapper:focus,
body.portal-app .form-floating-lg > .ts-wrapper:focus,
body.portal-app .form-floating-md > .ts-wrapper:focus,
body.portal-app .form-floating-sm > .ts-wrapper:focus,
body.portal-auth .form-floating > .ts-wrapper:focus,
body.portal-auth .form-floating-lg > .ts-wrapper:focus,
body.portal-auth .form-floating-md > .ts-wrapper:focus,
body.portal-auth .form-floating-sm > .ts-wrapper:focus {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

body.portal-app .form-floating > .ts-wrapper.is-invalid,
body.portal-app .form-floating-lg > .ts-wrapper.is-invalid,
body.portal-app .form-floating-md > .ts-wrapper.is-invalid,
body.portal-app .form-floating-sm > .ts-wrapper.is-invalid,
body.portal-auth .form-floating > .ts-wrapper.is-invalid,
body.portal-auth .form-floating-lg > .ts-wrapper.is-invalid,
body.portal-auth .form-floating-md > .ts-wrapper.is-invalid,
body.portal-auth .form-floating-sm > .ts-wrapper.is-invalid {
    border: none !important;
    box-shadow: none !important;
}

body.portal-app .form-floating .ts-wrapper,
body.portal-app .form-floating-lg .ts-wrapper,
body.portal-app .form-floating-md .ts-wrapper,
body.portal-app .form-floating-sm .ts-wrapper {
    width: 100% !important;
    margin: 0;
    height: var(--f-height) !important;
    min-height: var(--f-height) !important;
}

body.portal-app .form-floating .ts-wrapper .ts-control,
body.portal-app .form-floating-lg .ts-wrapper .ts-control,
body.portal-app .form-floating-md .ts-wrapper .ts-control,
body.portal-app .form-floating-sm .ts-wrapper .ts-control {
    height: var(--f-height) !important;
    min-height: var(--f-height) !important;
    padding: 0 var(--f-pad-x) !important;
    padding-right: 2rem !important;
    border: 1px solid var(--portal-border) !important;
    border-radius: var(--portal-float-radius, 0.375rem) !important;
    background-color: var(--portal-input-bg) !important;
    color: var(--portal-body-color) !important;
    box-shadow: none !important;
    font-size: var(--f-font-size) !important;
    font-weight: var(--portal-float-value-weight, 400) !important;
    display: flex !important;
    align-items: center !important;
    line-height: normal !important;
}

body.portal-app .form-floating .ts-wrapper.focus .ts-control,
body.portal-app .form-floating .ts-wrapper.dropdown-active .ts-control,
body.portal-app .form-floating-lg .ts-wrapper.focus .ts-control,
body.portal-app .form-floating-lg .ts-wrapper.dropdown-active .ts-control,
body.portal-app .form-floating-md .ts-wrapper.focus .ts-control,
body.portal-app .form-floating-md .ts-wrapper.dropdown-active .ts-control,
body.portal-app .form-floating-sm .ts-wrapper.focus .ts-control,
body.portal-app .form-floating-sm .ts-wrapper.dropdown-active .ts-control {
    border-color: var(--portal-focus) !important;
    box-shadow: var(--portal-float-focus-shadow) !important;
}

body.portal-app .form-floating .ts-wrapper.single .ts-control::after,
body.portal-app .form-floating-lg .ts-wrapper.single .ts-control::after,
body.portal-app .form-floating-md .ts-wrapper.single .ts-control::after,
body.portal-app .form-floating-sm .ts-wrapper.single .ts-control::after {
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 0.75rem !important;
    margin-top: 0 !important;
}

body.portal-app
    .form-floating:not(.ts-has-value)
    .ts-wrapper:not(.focus):not(.dropdown-active)
    .ts-control
    > *:not(input),
body.portal-app
    .form-floating-lg:not(.ts-has-value)
    .ts-wrapper:not(.focus):not(.dropdown-active)
    .ts-control
    > *:not(input),
body.portal-app
    .form-floating-md:not(.ts-has-value)
    .ts-wrapper:not(.focus):not(.dropdown-active)
    .ts-control
    > *:not(input),
body.portal-app
    .form-floating-sm:not(.ts-has-value)
    .ts-wrapper:not(.focus):not(.dropdown-active)
    .ts-control
    > *:not(input) {
    opacity: 0 !important;
}

body.portal-app
    .form-floating:not(.ts-has-value)
    .ts-wrapper:not(.focus):not(.dropdown-active)
    .ts-control
    input::placeholder,
body.portal-app
    .form-floating-lg:not(.ts-has-value)
    .ts-wrapper:not(.focus):not(.dropdown-active)
    .ts-control
    input::placeholder,
body.portal-app
    .form-floating-md:not(.ts-has-value)
    .ts-wrapper:not(.focus):not(.dropdown-active)
    .ts-control
    input::placeholder,
body.portal-app
    .form-floating-sm:not(.ts-has-value)
    .ts-wrapper:not(.focus):not(.dropdown-active)
    .ts-control
    input::placeholder {
    opacity: 0 !important;
}

body.portal-app .form-floating .ts-wrapper + label,
body.portal-app .form-floating-lg .ts-wrapper + label,
body.portal-app .form-floating-md .ts-wrapper + label,
body.portal-app .form-floating-sm .ts-wrapper + label {
    position: absolute !important;
    top: 50% !important;
    left: var(--f-label-left) !important;
    transform: translateY(-50%) !important;
    transform-origin: 0 0 !important;
    transition:
        transform 0.15s ease-in-out,
        top 0.15s ease-in-out,
        opacity 0.15s ease-in-out,
        background-color 0.15s ease-in-out,
        padding 0.15s ease-in-out !important;
    color: var(--portal-muted) !important;
    pointer-events: none !important;
    font-size: var(--f-font-size) !important;
    background-color: transparent !important;
    padding: 0 !important;
    z-index: 5 !important;
    display: inline-block !important;
    line-height: 1 !important;
}

body.portal-app
    .form-floating:not(.ts-has-value)
    .ts-wrapper:not(.focus):not(.dropdown-active)
    + label,
body.portal-app
    .form-floating-lg:not(.ts-has-value)
    .ts-wrapper:not(.focus):not(.dropdown-active)
    + label,
body.portal-app
    .form-floating-md:not(.ts-has-value)
    .ts-wrapper:not(.focus):not(.dropdown-active)
    + label,
body.portal-app
    .form-floating-sm:not(.ts-has-value)
    .ts-wrapper:not(.focus):not(.dropdown-active)
    + label {
    transform: translateY(-50%) !important;
    top: 50% !important;
    opacity: 1 !important;
    color: var(--portal-muted) !important;
}

body.portal-app .form-floating.ts-has-value .ts-wrapper + label,
body.portal-app .form-floating .ts-wrapper.focus + label,
body.portal-app .form-floating .ts-wrapper.dropdown-active + label,
body.portal-app .form-floating-lg.ts-has-value .ts-wrapper + label,
body.portal-app .form-floating-lg .ts-wrapper.focus + label,
body.portal-app .form-floating-lg .ts-wrapper.dropdown-active + label,
body.portal-app .form-floating-md.ts-has-value .ts-wrapper + label,
body.portal-app .form-floating-md .ts-wrapper.focus + label,
body.portal-app .form-floating-md .ts-wrapper.dropdown-active + label,
body.portal-app .form-floating-sm.ts-has-value .ts-wrapper + label,
body.portal-app .form-floating-sm .ts-wrapper.focus + label,
body.portal-app .form-floating-sm .ts-wrapper.dropdown-active + label {
    top: 0 !important;
    transform: translateY(-50%) scale(0.8) !important;
    background-color: var(--portal-input-bg) !important;
    padding: 0 4px !important;
    opacity: 1 !important;
    color: var(--portal-muted) !important;
}

body.portal-app .form-floating.ts-focus .ts-wrapper + label,
body.portal-app .form-floating-lg.ts-focus .ts-wrapper + label,
body.portal-app .form-floating-md.ts-focus .ts-wrapper + label,
body.portal-app .form-floating-sm.ts-focus .ts-wrapper + label {
    color: var(--portal-focus) !important;
}

body.portal-app
    .form-floating
    > .form-select.is-invalid
    + .ts-wrapper
    .ts-control,
body.portal-app .form-floating > select.is-invalid + .ts-wrapper .ts-control,
body.portal-app .form-floating .ts-wrapper:has(select.is-invalid) .ts-control,
body.portal-app
    .form-floating-lg
    > .form-select.is-invalid
    + .ts-wrapper
    .ts-control,
body.portal-app .form-floating-lg > select.is-invalid + .ts-wrapper .ts-control,
body.portal-app
    .form-floating-lg
    .ts-wrapper:has(select.is-invalid)
    .ts-control,
body.portal-app
    .form-floating-md
    > .form-select.is-invalid
    + .ts-wrapper
    .ts-control,
body.portal-app .form-floating-md > select.is-invalid + .ts-wrapper .ts-control,
body.portal-app
    .form-floating-md
    .ts-wrapper:has(select.is-invalid)
    .ts-control,
body.portal-app
    .form-floating-sm
    > .form-select.is-invalid
    + .ts-wrapper
    .ts-control,
body.portal-app .form-floating-sm > select.is-invalid + .ts-wrapper .ts-control,
body.portal-app
    .form-floating-sm
    .ts-wrapper:has(select.is-invalid)
    .ts-control {
    border-color: var(--portal-danger) !important;
}

/* ===== Input-group + floating control (plain .input-group) =====
 * Spacing/visual merge applies when an input-group directly contains a
 * form-floating* child. `.input-group--floating-merge` is a deprecated alias.
 */
body.portal-app .input-group:has(> [class*="form-floating"]),
body.portal-app .input-group--floating-merge {
    align-items: stretch;
    flex-wrap: nowrap;
    margin-top: var(--portal-control-gap-y, 0.55rem) !important;
    margin-bottom: var(--portal-float-gap, 0.75rem);
}

/* Size tokens live on .form-floating*; promote to the group so addon height resolves */
body.portal-app .input-group:has(> .form-floating-sm),
body.portal-app .input-group--floating-merge:has(> .form-floating-sm) {
    --f-height: var(--floating-height-sm, 30px);
    --f-pad-x: var(--floating-padding-x-sm, 8px);
}

body.portal-app .input-group:has(> .form-floating-md),
body.portal-app .input-group:has(> .form-floating),
body.portal-app .input-group--floating-merge:has(> .form-floating-md),
body.portal-app .input-group--floating-merge:has(> .form-floating) {
    --f-height: var(--floating-height-md, 38px);
    --f-pad-x: var(--floating-padding-x-md, 10px);
}

body.portal-app .input-group:has(> .form-floating-lg),
body.portal-app .input-group--floating-merge:has(> .form-floating-lg) {
    --f-height: var(--floating-height, 48px);
    --f-pad-x: var(--floating-padding-x, 12px);
}

body.portal-app .input-group:has(> [class*="form-floating"]) > .form-floating,
body.portal-app
    .input-group:has(> [class*="form-floating"])
    > .form-floating-lg,
body.portal-app
    .input-group:has(> [class*="form-floating"])
    > .form-floating-md,
body.portal-app
    .input-group:has(> [class*="form-floating"])
    > .form-floating-sm,
body.portal-app .input-group--floating-merge > .form-floating,
body.portal-app .input-group--floating-merge > .form-floating-lg,
body.portal-app .input-group--floating-merge > .form-floating-md,
body.portal-app .input-group--floating-merge > .form-floating-sm {
    flex: 1 1 auto;
    height: var(--f-height) !important;
    min-height: var(--f-height) !important;
    max-height: var(--f-height) !important;
    margin-bottom: 0;
    margin-top: 0 !important;
}

body.portal-app
    .input-group:has(> [class*="form-floating"])
    > .input-group-text:first-child,
body.portal-app .input-group--floating-merge > .input-group-text:first-child {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: 2px solid var(--portal-border) !important;
}

body.portal-app
    .input-group:has(> [class*="form-floating"])
    > .input-group-text:last-child,
body.portal-app .input-group--floating-merge > .input-group-text:last-child {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left-width: 0 !important;
}

body.portal-app
    .input-group:has(> [class*="form-floating"])
    > [class^="form-floating"]:first-child
    > .form-control,
body.portal-app
    .input-group--floating-merge
    > [class^="form-floating"]:first-child
    > .form-control {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right-width: 0 !important;
}

body.portal-app
    .input-group:has(> [class*="form-floating"])
    > [class^="form-floating"]:last-child
    > .form-control,
body.portal-app
    .input-group--floating-merge
    > [class^="form-floating"]:last-child
    > .form-control {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left-width: 0 !important;
}

body.portal-app [class^="form-floating"] > .form-control[type="file"] {
    line-height: normal !important;
    overflow: hidden !important;
}

body.portal-app
    [class^="form-floating"]
    > .form-control[type="file"]::-webkit-file-upload-button {
    margin: calc(-1 * var(--f-pad-y)) calc(-1 * var(--f-pad-x)) !important;
    margin-inline-end: var(--f-pad-x) !important;
    height: calc(var(--f-height) - 2px) !important;
    border-radius: 0 !important;
    border-inline-end-width: 1px !important;
    border-inline-end-style: solid !important;
    border-inline-end-color: var(--portal-border) !important;
    display: inline-flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    background-color: var(--portal-soft-bg) !important;
    color: var(--portal-muted) !important;
    border-top-width: 0 !important;
    border-bottom-width: 0 !important;
    border-left-width: 0 !important;
    cursor: pointer !important;
}

body.portal-app
    [class^="form-floating"]
    > .form-control[type="file"]::file-selector-button {
    margin: calc(-1 * var(--f-pad-y)) calc(-1 * var(--f-pad-x)) !important;
    margin-inline-end: var(--f-pad-x) !important;
    height: calc(var(--f-height) - 2px) !important;
    border-radius: 0 !important;
    border-inline-end-width: 1px !important;
    border-inline-end-style: solid !important;
    border-inline-end-color: var(--portal-border) !important;
    display: inline-flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    background-color: var(--portal-soft-bg) !important;
    color: var(--portal-muted) !important;
    border-top-width: 0 !important;
    border-bottom-width: 0 !important;
    border-left-width: 0 !important;
    cursor: pointer !important;
}

body.portal-app
    .input-group:has(> [class*="form-floating"])
    > .form-floating.flex-grow-1,
body.portal-app
    .input-group:has(> [class*="form-floating"])
    > .form-floating-lg.flex-grow-1,
body.portal-app
    .input-group:has(> [class*="form-floating"])
    > .form-floating-md.flex-grow-1,
body.portal-app
    .input-group:has(> [class*="form-floating"])
    > .form-floating-sm.flex-grow-1,
body.portal-app .input-group--floating-merge > .form-floating.flex-grow-1,
body.portal-app .input-group--floating-merge > .form-floating-lg.flex-grow-1,
body.portal-app .input-group--floating-merge > .form-floating-md.flex-grow-1,
body.portal-app .input-group--floating-merge > .form-floating-sm.flex-grow-1 {
    flex: 1 1 0;
    min-width: 0;
}

body.portal-app
    .input-group:has(> [class*="form-floating"])
    > .input-group-text,
body.portal-app .input-group--floating-merge > .input-group-text {
    height: var(--f-height) !important;
    min-height: var(--f-height) !important;
    max-height: var(--f-height) !important;
    padding-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
    border-color: var(--portal-border) !important;
    background-color: var(--portal-input-bg) !important;
    color: var(--portal-muted) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

body.portal-app
    .input-group:has(> [class*="form-floating"])
    > .input-group-text
    > i,
body.portal-app .input-group--floating-merge > .input-group-text > i {
    min-width: 18px;
    color: var(--portal-muted);
    opacity: 1;
    font-size: 15px;
    line-height: 1;
    --fa-primary-color: currentColor;
    --fa-secondary-color: currentColor;
    --fa-secondary-opacity: 0.4;
}

body.portal-app
    .input-group:has(> [class*="form-floating"])
    > .form-floating
    > label,
body.portal-app
    .input-group:has(> [class*="form-floating"])
    > .form-floating-lg
    > label,
body.portal-app
    .input-group:has(> [class*="form-floating"])
    > .form-floating-md
    > label,
body.portal-app
    .input-group:has(> [class*="form-floating"])
    > .form-floating-sm
    > label,
body.portal-app .input-group--floating-merge > .form-floating > label,
body.portal-app .input-group--floating-merge > .form-floating-lg > label,
body.portal-app .input-group--floating-merge > .form-floating-md > label,
body.portal-app .input-group--floating-merge > .form-floating-sm > label {
    padding-left: var(--f-pad-x) !important;
}

/* Tom Select merge: prefer :has(.ts-wrapper); --floating-merge-select is deprecated alias */
body.portal-app
    .input-group:has(.ts-wrapper)
    > .form-floating:first-child
    .ts-wrapper
    .ts-control,
body.portal-app
    .input-group:has(.ts-wrapper)
    > .form-floating-lg:first-child
    .ts-wrapper
    .ts-control,
body.portal-app
    .input-group:has(.ts-wrapper)
    > .form-floating-md:first-child
    .ts-wrapper
    .ts-control,
body.portal-app
    .input-group:has(.ts-wrapper)
    > .form-floating-sm:first-child
    .ts-wrapper
    .ts-control,
body.portal-app
    .input-group--floating-merge-select
    > .form-floating:first-child
    .ts-wrapper
    .ts-control,
body.portal-app
    .input-group--floating-merge-select
    > .form-floating-lg:first-child
    .ts-wrapper
    .ts-control,
body.portal-app
    .input-group--floating-merge-select
    > .form-floating-md:first-child
    .ts-wrapper
    .ts-control,
body.portal-app
    .input-group--floating-merge-select
    > .form-floating-sm:first-child
    .ts-wrapper
    .ts-control {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right-width: 0 !important;
}

body.portal-app
    .input-group:has(.ts-wrapper)
    > .form-floating:last-child
    .ts-wrapper
    .ts-control,
body.portal-app
    .input-group:has(.ts-wrapper)
    > .form-floating-lg:last-child
    .ts-wrapper
    .ts-control,
body.portal-app
    .input-group:has(.ts-wrapper)
    > .form-floating-md:last-child
    .ts-wrapper
    .ts-control,
body.portal-app
    .input-group:has(.ts-wrapper)
    > .form-floating-sm:last-child
    .ts-wrapper
    .ts-control,
body.portal-app
    .input-group--floating-merge-select
    > .form-floating:last-child
    .ts-wrapper
    .ts-control,
body.portal-app
    .input-group--floating-merge-select
    > .form-floating-lg:last-child
    .ts-wrapper
    .ts-control,
body.portal-app
    .input-group--floating-merge-select
    > .form-floating-md:last-child
    .ts-wrapper
    .ts-control,
body.portal-app
    .input-group--floating-merge-select
    > .form-floating-sm:last-child
    .ts-wrapper
    .ts-control {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left-width: 0 !important;
}

body.portal-app
    .input-group:has(.ts-wrapper)
    > .form-floating
    .ts-wrapper
    .ts-control,
body.portal-app
    .input-group:has(.ts-wrapper)
    > .form-floating-lg
    .ts-wrapper
    .ts-control,
body.portal-app
    .input-group:has(.ts-wrapper)
    > .form-floating-md
    .ts-wrapper
    .ts-control,
body.portal-app
    .input-group:has(.ts-wrapper)
    > .form-floating-sm
    .ts-wrapper
    .ts-control,
body.portal-app
    .input-group--floating-merge-select
    > .form-floating
    .ts-wrapper
    .ts-control,
body.portal-app
    .input-group--floating-merge-select
    > .form-floating-lg
    .ts-wrapper
    .ts-control,
body.portal-app
    .input-group--floating-merge-select
    > .form-floating-md
    .ts-wrapper
    .ts-control,
body.portal-app
    .input-group--floating-merge-select
    > .form-floating-sm
    .ts-wrapper
    .ts-control {
    border-color: var(--portal-border) !important;
}

/* ===== Portal control row (two-column / field+chip horizontal) ===== */
body.portal-app .portal-control-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: var(--portal-control-gap-y, 0.55rem);
    margin-bottom: var(--portal-float-gap, 0.75rem);
}

body.portal-app .portal-control-row > * {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: 0;
}

body.portal-app .portal-control-row > .portal-control-row__auto {
    flex: 0 0 auto;
}

body.portal-app .portal-control-row > .portal-control-row__grow {
    flex: 1 1 auto;
}

body.portal-app .portal-control-row.portal-control-row--with-chip {
    align-items: center;
}

body.portal-app
    .portal-control-row
    :is(.input-group, [class*="form-floating"], .portal-condition-chip) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.comn-form-group {
    margin-bottom: 20px;
}

.comn-form-group .form-label {
    display: table;
    margin-bottom: -8px;
    margin-left: 25px;
    background-color: var(--portal-card-bg);
    position: relative;
    text-transform: capitalize;
    padding: 0px 3px;
    z-index: 1;
}

.comn-datepicker,
.comn-datetimepicker {
    background-image: url(../images/datepicker-icon.svg);
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    padding-right: 30px;
    min-width: 120px;
}

.ui-widget.ui-widget-content {
    font-family: var(--app-font-sans, "Inter", sans-serif);
    border: 1px solid var(--portal-border);
    padding: 10px;
    border-radius: 5px;
    min-width: 300px;
    margin-top: 1px;
    z-index: 9999 !important;
}

.ui-datepicker table {
    margin-bottom: 0;
}

.ui-datepicker th {
    font-weight: 500;
    color: var(--portal-muted);
}

.ui-datepicker td {
    border: 0;
    padding: 5px 1px;
}

.ui-datepicker .ui-datepicker-header {
    background-color: transparent;
    border: none;
}

.ui-datepicker .ui-datepicker-header {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    box-shadow: 0px 1px 3px #00000045;
    border-radius: 5px;
    top: 50%;
    transform: translateY(-50%);
}

.ui-datepicker .ui-datepicker-prev {
    left: 0;
}

.ui-datepicker .ui-datepicker-prev::before {
    content: "\f053";
    font-family: "Font Awesome 5 Pro";
    position: absolute;
    font-size: 14px;
    line-height: 100%;
}

.ui-datepicker .ui-datepicker-next {
    right: 0;
}

.ui-datepicker .ui-datepicker-next::before {
    content: "\f054";
    font-family: "Font Awesome 5 Pro";
    position: absolute;
    font-size: 14px;
    line-height: 100%;
}

.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
    background-color: var(--portal-primary);
    border: none;
}

.ui-datepicker .ui-datepicker-prev.ui-datepicker-prev-hover::before,
.ui-datepicker .ui-datepicker-next.ui-datepicker-next-hover::before {
    color: var(--portal-text-on-brand);
}

.ui-datepicker .ui-datepicker-title {
    color: var(--portal-body-color);
}

.ui-widget-content .ui-state-default {
    background-color: transparent;
    border: none;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    padding: 0;
    border-radius: 2px;
    font-size: 14px;
    color: var(--portal-body-color);
}

.ui-widget-content .ui-state-default.ui-state-hover,
.ui-widget-content .ui-datepicker-today .ui-state-default.ui-state-active,
.ui-widget-content .ui-state-default.ui-state-active {
    background-color: var(--portal-primary);
    color: var(--portal-text-on-brand);
    font-weight: 500;
}

.ui-widget-content .ui-datepicker-today .ui-state-default {
    background-color: transparent;
    border: 1px solid var(--portal-primary);
    color: var(--portal-primary);
}

.ui-widget-content .ui-timepicker-div .ui-state-default {
    background-color: var(--portal-primary);
    width: 15px;
    height: 15px;
    border-radius: 50%;
    top: -5px;
}

.ui-widget.ui-widget-content.ui-slider {
    position: relative;
    width: 100%;
    min-width: auto;
    height: 5px;
    padding: 0;
    margin-top: 0;
    border-radius: 0px;
    border: none;
}

.ui-widget.ui-widget-content.ui-slider::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 7.5px;
    border: 1px solid var(--portal-border);
}

.ui_tpicker_second_label,
.ui_tpicker_second,
.ui_tpicker_millisec_label,
.ui_tpicker_millisec,
.ui_tpicker_microsec_label,
.ui_tpicker_microsec,
.ui_tpicker_timezone_label,
.ui_tpicker_timezone {
    display: none;
}

.ui_tpicker_time_label,
.ui_tpicker_time {
    display: inline-block;
    padding: 5px 10px;
    background-color: transparent;
    height: 40px;
    display: inline-flex;
    align-items: center;
    margin-bottom: 15px;
    vertical-align: top;
}

.ui_tpicker_time_label {
    width: 60px;
    border: 1px solid var(--portal-primary);
    border-radius: 5px 0px 0px 5px;
    background-color: var(--portal-primary);
    color: var(--portal-text-on-brand);
}

.ui_tpicker_time {
    width: calc(100% - 60px);
    border: solid var(--portal-primary);
    border-width: 1px 1px 1px 0px;
    border-radius: 0px 5px 5px 0px;
}

.ui_tpicker_time .ui_tpicker_time_input {
    background-color: transparent;
    border: none;
    padding: 0;
    font-size: 16px;
    line-height: 1;
    font-weight: 500;
}

.ui_tpicker_hour_label,
.ui_tpicker_hour,
.ui_tpicker_minute_label,
.ui_tpicker_minute {
    display: inline-flex;
    vertical-align: middle;
    margin-bottom: 10px;
}

.ui_tpicker_hour_label,
.ui_tpicker_minute_label {
    width: 60px;
}

.ui_tpicker_hour,
.ui_tpicker_minute {
    width: calc(95% - 60px);
}

.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
    font-family: var(--app-font-sans, "Inter", sans-serif);
}

.ui-timepicker-div > dl {
    margin-bottom: 0;
}

.ui-datepicker .ui-datepicker-buttonpane {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 15px;
}

.ui-datepicker .ui-datepicker-buttonpane button {
    flex: 1 0 0;
    margin: 0px;
    border: 1px solid;
    height: auto;
    padding: 5px 10px;
    border-radius: 4px;
    opacity: 1;
    font-weight: 500;
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
    background-color: transparent;
    color: var(--portal-body-color);
    border-color: var(--portal-muted);
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current:hover {
    background-color: var(--portal-muted);
    color: var(--portal-text-on-brand);
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-close {
    background-color: transparent;
    color: var(--portal-primary);
    border-color: var(--portal-primary);
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-close:hover {
    background-color: var(--portal-primary);
    color: var(--portal-text-on-brand);
}

/* ===== Condition chips (admin-like inline option toggles) ===== */

/*
 * Default chip = medium size (matches .form-floating-md / .form-floating).
 * Use .portal-condition-chip--sm / --lg modifiers to match form-floating-sm/lg.
 */
.portal-condition-chip {
    display: inline-flex;
    align-items: center;
    flex-direction: row;
    padding: 0 0.625rem;
    min-height: var(
        --floating-height-md,
        38px
    ); /* md default — matches .form-floating */
    font-size: var(--floating-font-size-md, 13px);
    background-color: var(--portal-input-bg);
    color: var(--portal-body-color);
    border: 1px solid var(--portal-border);
    border-radius: var(--portal-float-radius);
    box-shadow: none;
}

body.portal-app .portal-condition-chip,
body.portal-auth .portal-condition-chip {
    margin-top: 0;
}

/* Vertical stack only (profile: field/row/title → chip) */
body.portal-app
    :is(
        .form-floating,
        .form-floating-sm,
        .form-floating-md,
        .form-floating-lg,
        .input-group,
        .row,
        .portal-section-title
    )
    + .portal-condition-chip,
body.portal-auth
    :is(
        .form-floating,
        .form-floating-sm,
        .form-floating-md,
        .form-floating-lg,
        .input-group,
        .row,
        .portal-section-title
    )
    + .portal-condition-chip {
    margin-top: var(--portal-control-gap-y, 0.55rem) !important;
}

/* Horizontal chip/field rows — parent owns spacing */
body.portal-app .d-flex > .portal-condition-chip,
body.portal-auth .d-flex > .portal-condition-chip {
    margin-top: 0 !important;
}

/* Small — matches .form-floating-sm */
.portal-condition-chip--sm {
    min-height: var(--floating-height-sm, 30px);
    font-size: var(--floating-font-size-sm, 12px);
    padding: 0 var(--floating-padding-x-sm, 8px);
}

/* Large — matches .form-floating-lg */
.portal-condition-chip--lg {
    min-height: var(--floating-height, 48px);
    font-size: var(--floating-font-size, 14px);
    padding: 0 var(--floating-padding-x, 12px);
}

.portal-condition-chip--stacked {
    margin-bottom: 1rem;
}

.portal-condition-chip--grouped {
    gap: 0.625rem;
}

.portal-condition-chip .form-check-label.error-color {
    color: var(--bs-form-invalid-color, #dc3545);
}

.portal-condition-chip:focus-within {
    border-color: var(--portal-focus);
    box-shadow: var(--portal-float-focus-shadow);
}

.portal-condition-chip.is-invalid {
    border-color: var(--bs-form-invalid-border-color, #dc3545);
}

.portal-condition-chip.is-invalid + .invalid-feedback,
.form-check.is-invalid + .invalid-feedback,
.input-group + .invalid-feedback {
    display: block;
}

.form-check.is-invalid .form-check-label,
.form-check.is-invalid .error-color {
    color: var(--bs-form-invalid-color, #dc3545);
}

.portal-condition-chip .form-check {
    flex-shrink: 0;
}

.portal-condition-chip .form-check-input {
    width: 17px;
    height: 17px;
    min-width: 17px;
    min-height: 17px;
    flex-shrink: 0;
    margin-top: 0;
    --bs-form-check-bg: var(--portal-input-bg);
    background-color: var(--portal-input-bg);
    border-color: var(--portal-border);
    cursor: pointer;
}

/* Smaller checkbox for sm chips */
.portal-condition-chip--sm .form-check-input {
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
}

.portal-condition-chip .form-check-input:checked {
    background-color: var(--portal-primary);
    border-color: var(--portal-primary);
    background-image: var(--bs-form-check-bg-image);
}

.portal-condition-chip .form-check-input:focus {
    border-color: var(--portal-focus);
    box-shadow: var(--portal-float-focus-shadow);
}

.portal-condition-chip .form-check-label {
    font-size: inherit;
    font-weight: 400;
    line-height: inherit;
    color: var(--portal-muted);
    cursor: pointer;
}

/* Readonly and Disabled input styles matching admin panel */
body.portal-app .form-control[readonly],
body.portal-app .form-control:disabled,
body.portal-app .form-select[readonly],
body.portal-app .form-select:disabled,
body.portal-auth .form-control[readonly],
body.portal-auth .form-control:disabled,
body.portal-auth .form-select[readonly],
body.portal-auth .form-select:disabled {
    background-color: var(--portal-soft-bg) !important;
    color: var(--portal-soft-text) !important;
    border-color: var(--portal-soft-border) !important;
    cursor: not-allowed;
}

/* Ensure label background matches input background when readonly/disabled */
body.portal-app .form-floating > .form-control[readonly] ~ label,
body.portal-app .form-floating > .form-control:disabled ~ label,
body.portal-app .form-floating-lg > .form-control[readonly] ~ label,
body.portal-app .form-floating-lg > .form-control:disabled ~ label,
body.portal-app .form-floating-md > .form-control[readonly] ~ label,
body.portal-app .form-floating-md > .form-control:disabled ~ label,
body.portal-app .form-floating-sm > .form-control[readonly] ~ label,
body.portal-app .form-floating-sm > .form-control:disabled ~ label,
body.portal-auth .form-floating > .form-control[readonly] ~ label,
body.portal-auth .form-floating > .form-control:disabled ~ label,
body.portal-auth .form-floating-lg > .form-control[readonly] ~ label,
body.portal-auth .form-floating-lg > .form-control:disabled ~ label,
body.portal-auth .form-floating-md > .form-control[readonly] ~ label,
body.portal-auth .form-floating-md > .form-control:disabled ~ label,
body.portal-auth .form-floating-sm > .form-control[readonly] ~ label,
body.portal-auth .form-floating-sm > .form-control:disabled ~ label {
    background-color: var(--portal-soft-bg) !important;
    color: var(--portal-soft-text) !important;
}

/* ── Password visibility toggle ──────────────────────────────────── */
.pw-toggle-wrap {
    position: relative;
}

.pw-toggle-wrap .btn-pw-toggle {
    position: absolute;
    top: 0;
    right: 0.75rem;
    height: var(--f-height, 38px) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    background: none;
    border: none;
    color: var(--portal-muted);
    padding: 0;
    cursor: pointer;
    transition: color 0.15s;
}

.pw-toggle-wrap .btn-pw-toggle:hover,
.pw-toggle-wrap .btn-pw-toggle:focus {
    color: var(--portal-primary);
    outline: none;
    box-shadow: none;
}

/* push the text away from the icon so it doesn't overlap */
.pw-toggle-wrap .form-control {
    padding-right: 2.75rem !important;
}

/* Suppress Bootstrap's built-in validation icon inside pw-toggle-wrap
   to prevent it overlapping the eye toggle button */
.pw-toggle-wrap .form-control.is-invalid,
.pw-toggle-wrap .form-control.is-valid,
.was-validated .pw-toggle-wrap .form-control:invalid,
.was-validated .pw-toggle-wrap .form-control:valid,
body.portal-app .pw-toggle-wrap .form-control.is-invalid,
body.portal-auth .pw-toggle-wrap .form-control.is-invalid {
    background-image: none !important;
}

/* Locked AU date inputs — no picker / typing (advance booking off, etc.) */
body.portal-app input.au-date-input[readonly],
body.portal-app input.au-date-input:disabled,
body.portal-auth input.au-date-input[readonly],
body.portal-auth input.au-date-input:disabled {
    cursor: default !important;
    pointer-events: none !important;
}