/* Awssome UI 2.0 — form controls.
   44px fields, 12px radius, hairline border, orange focus ring. Labels sit above,
   medium weight; hints and errors sit below in a reserved line. */

.aws-input,
.form-control,
.form-select,
.aws-input-group .input-group-text,
textarea.form-control {
    font-family: var(--ui-font-body) !important;
    font-size: 14px !important;
    color: var(--ui-ink) !important;
    background-color: var(--ui-surface) !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: var(--ui-r-md) !important;
    min-height: 44px;
    padding: 10px 14px;
    box-shadow: var(--ui-shadow-xs);
    transition: border-color var(--ui-fast) var(--ui-ease), box-shadow var(--ui-fast) var(--ui-ease);
}

.form-control.form-control-solid,
.form-select.form-select-solid {
    background-color: var(--ui-surface) !important;
}

.aws-input::placeholder,
.form-control::placeholder {
    color: #A1A1A6 !important;
    font-family: var(--ui-font-body) !important;
}

.aws-input:hover,
.form-control:hover,
.form-select:hover {
    border-color: #D6D6DA !important;
}

.aws-input:focus,
.form-control:focus,
.form-select:focus,
.aws-input-group:focus-within .input-group-text {
    border-color: var(--ui-primary) !important;
    box-shadow: var(--ui-focus-ring) !important;
    outline: none !important;
}

.aws-input:disabled,
.aws-input[readonly],
.form-control:disabled,
.form-control[readonly] {
    background-color: var(--ui-fill) !important;
    color: var(--ui-muted) !important;
    box-shadow: none;
}

.aws-input.is-invalid,
.form-control.is-invalid,
.input-validation-error {
    border-color: var(--ui-red-500) !important;
    box-shadow: 0 0 0 4px rgba(240, 68, 56, .12) !important;
}

.invalid-feedback,
.field-validation-error,
.text-danger {
    color: var(--ui-red-700) !important;
    font-size: 12.5px !important;
    margin-top: 6px !important;
}

textarea.form-control,
textarea.aws-input {
    min-height: 104px;
    line-height: 1.5;
}

/* Labels */
.aws-label,
.form-label,
.col-form-label {
    font-family: var(--ui-font-medium) !important;
    font-size: 13.5px !important;
    color: var(--ui-ink-2) !important;
    margin-bottom: 8px !important;
    letter-spacing: -0.003em;
}

.form-text {
    color: var(--ui-muted) !important;
    font-size: 12.5px;
}

/* Search field with leading icon */
.aws-input-search {
    position: relative;
}

.aws-input-search > i {
    position: absolute;
    left: 14px;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    z-index: 1;
    color: var(--ui-subtle);
    line-height: 0;
    pointer-events: none;
}

.aws-input-search > i svg {
    width: 16px;
    height: 16px;
}

.aws-input-search .aws-input,
.aws-input-search .form-control {
    padding-left: 40px !important;
    background-color: var(--ui-surface) !important;
}

/* Input groups */
.aws-input-group .input-group-text {
    background: var(--ui-fill-2) !important;
    color: var(--ui-muted) !important;
    box-shadow: none;
}

/* Select2 */
.select2-container--bootstrap5 .select2-selection,
.aws-form-select + .select2-container .select2-selection {
    min-height: 44px !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: var(--ui-r-md) !important;
    background-color: var(--ui-surface) !important;
    box-shadow: var(--ui-shadow-xs) !important;
    font-family: var(--ui-font-body) !important;
    font-size: 14px !important;
    color: var(--ui-ink) !important;
    display: flex !important;
    align-items: center;
}

.select2-container--bootstrap5.select2-container--focus .select2-selection,
.select2-container--bootstrap5.select2-container--open .select2-selection {
    border-color: var(--ui-primary) !important;
    box-shadow: var(--ui-focus-ring) !important;
}

.select2-container--bootstrap5 .select2-dropdown {
    border: 1px solid var(--ui-line) !important;
    border-radius: var(--ui-r-lg) !important;
    box-shadow: var(--ui-shadow-lg) !important;
    padding: 6px !important;
    overflow: hidden;
    margin-top: 6px;
}

.select2-container--bootstrap5 .select2-dropdown .select2-results__option {
    border-radius: var(--ui-r-sm) !important;
    padding: 9px 12px !important;
    font-size: 14px !important;
    color: var(--ui-ink) !important;
    margin: 1px 0;
}

.select2-container--bootstrap5 .select2-dropdown .select2-results__option--highlighted {
    background: var(--ui-fill) !important;
    color: var(--ui-ink) !important;
}

.select2-container--bootstrap5 .select2-dropdown .select2-results__option--selected {
    background: var(--ui-primary-tint) !important;
    color: var(--ui-brand-700) !important;
    font-family: var(--ui-font-semibold) !important;
}

.select2-container--bootstrap5 .select2-selection--multiple .select2-selection__choice {
    background: var(--ui-fill) !important;
    border: 0 !important;
    border-radius: var(--ui-r-pill) !important;
    padding: 3px 10px !important;
    font-size: 13px !important;
}

/* Checkboxes, radios, switches */
.form-check-input {
    width: 20px;
    height: 20px;
    border: 1.5px solid #C7C7CC !important;
    border-radius: 6px !important;
    background-color: var(--ui-surface);
    cursor: pointer;
    transition: background-color var(--ui-fast) var(--ui-ease), border-color var(--ui-fast) var(--ui-ease);
}

.form-check-input[type="radio"] {
    border-radius: 50% !important;
}

.form-check-input:checked {
    background-color: var(--ui-primary) !important;
    border-color: var(--ui-primary) !important;
}

.form-check-input:focus {
    box-shadow: var(--ui-focus-ring) !important;
}

.form-switch .form-check-input,
.form-check.form-switch .form-check-input {
    width: 44px !important;
    height: 26px !important;
    border-radius: 999px !important;
    background-color: #E5E5EA !important;
    border-color: transparent !important;
}

.form-switch .form-check-input:checked {
    background-color: var(--ui-green-600) !important;
}

.form-check-label {
    color: var(--ui-ink);
    cursor: pointer;
}

/* Flatpickr: brand orange, rounded */
.flatpickr-calendar {
    border-radius: var(--ui-r-lg) !important;
    box-shadow: var(--ui-shadow-lg) !important;
    border: 1px solid var(--ui-line) !important;
    padding: 6px;
}

.flatpickr-day {
    border-radius: var(--ui-r-sm) !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: var(--ui-primary) !important;
    border-color: var(--ui-primary) !important;
}

.flatpickr-day.today {
    background: var(--ui-primary-tint) !important;
    border-color: var(--ui-brand-300) !important;
    color: var(--ui-brand-700) !important;
}

/* Dropzone */
.dropzone {
    border: 1.5px dashed #D1D1D6 !important;
    border-radius: var(--ui-r-lg) !important;
    background: var(--ui-fill-2) !important;
    transition: border-color var(--ui-fast) var(--ui-ease), background var(--ui-fast) var(--ui-ease);
}

.dropzone:hover,
.dropzone.dz-drag-hover {
    border-color: var(--ui-primary) !important;
    background: var(--ui-primary-tint) !important;
}

/* Choice cards (.aws-radio-container): selection is shown by the ring and tint,
   never by recolouring the copy. */
.aws-radio-container {
    border: 1px solid var(--ui-line) !important;
    border-radius: var(--ui-r-lg) !important;
    background: var(--ui-surface) !important;
    transition: border-color var(--ui-fast) var(--ui-ease), box-shadow var(--ui-fast) var(--ui-ease), background var(--ui-fast) var(--ui-ease);
}

.aws-radio-container:hover {
    border-color: #D6D6DA !important;
}

.aws-radio-container.active {
    border-color: var(--ui-primary) !important;
    background: var(--ui-primary-tint) !important;
    box-shadow: 0 0 0 3px rgba(var(--ui-brand-rgb), .12);
}

.aws-radio-container.active .aws-checkbox-label {
    color: var(--ui-ink) !important;
}

.aws-radio-container.active .aws-checkbox-desc {
    color: var(--ui-muted) !important;
}

.aws-radio-container.active a.aws-link,
.aws-radio-container.active .aws-link {
    color: var(--ui-primary-hover) !important;
}

/* Native selects: keep room for the chevron (the shared field padding above would put
   the arrow on top of the value) and use one consistent chevron. */
select.form-select,
select.aws-form-select {
    padding-right: 40px !important;
    background-position: right 14px center !important;
    background-size: 12px 12px !important;
    cursor: pointer;
}

select.form-select.form-select-sm {
    min-height: 36px;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    padding-left: 12px !important;
    padding-right: 34px !important;
    background-position: right 12px center !important;
    font-size: 13.5px !important;
    border-radius: var(--ui-r-sm) !important;
}

/* Search field: legacy scss also positions .svg-icon absolutely (left:10px) inside the
   already-offset <i>, pushing the glyph onto the placeholder. */
.aws-input-search > i .svg-icon {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%);
    margin: 0 !important;
}

/* Select2 single: exactly the 44px field height so it lines up with inputs and buttons */
.aws-form-select + .select2-container .select2-selection--single,
.select2-container--bootstrap5 .select2-selection--single {
    height: 44px !important;
    min-height: 44px !important;
}

.dataTables_length .select2-container--bootstrap5 .select2-selection--single {
    height: 36px !important;
    min-height: 36px !important;
}

/* Filter buttons (.aws-filter-btn: Creator / Status / Countries …) match fields: 44px,
   12px radius, hairline. Promoted from pages/market-lists.css so every page gets it. */
.aws-filter-btn {
    min-height: 44px;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--ui-line) !important;
    border-radius: var(--ui-r-md) !important;
    background: var(--ui-surface) !important;
    box-shadow: var(--ui-shadow-xs);
    font-family: var(--ui-font-semibold) !important;
    font-size: 14px !important;
    color: var(--ui-ink) !important;
    white-space: nowrap;
    transition: border-color var(--ui-fast) var(--ui-ease), background var(--ui-fast) var(--ui-ease);
}

.aws-filter-btn:hover {
    border-color: var(--ui-brand-200) !important;
    background: var(--ui-fill-2) !important;
}

.aws-filter-btn i {
    display: inline-flex;
    line-height: 0;
}

.aws-filter-btn i .me-2 {
    margin-right: 0 !important;
}

/* Single-line fields are exactly 44px (the legacy 24px line-height made them 46px), so
   they line up with Select2 (44px) and toolbar buttons (44px) in the same row. */
input.aws-input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select.form-select:not(.form-select-sm):not([multiple]) {
    height: 44px;
    line-height: 22px !important;
    padding-top: 10px;
    padding-bottom: 10px;
}

.ui-toolbar .btn,
.ui-page-header__actions .btn,
.aws-section-header .btn {
    min-height: 44px;
}

/* Choice-card radios: legacy 14px / #EDEDF3 border made the unselected control invisible */
.aws-radio-container .form-check-input {
    width: 20px !important;
    height: 20px !important;
    border: 1.5px solid #C7C7CC !important;
    flex: none;
}

.aws-radio-container .form-check-input:checked {
    border-color: var(--ui-primary) !important;
    box-shadow: none !important;
}

/* .bg-only variant recoloured the copy orange; selection is shown by ring + tint only */
.aws-radio-container.bg-only .aws-checkbox-label {
    color: var(--ui-ink) !important;
}

.aws-radio-container.bg-only .aws-checkbox-desc {
    color: var(--ui-ink-2) !important;
}

.aws-radio-container.bg-only a {
    color: var(--ui-primary-hover) !important;
}

/* flatpickr's visible alt input is readonly by design; it is an active control, not a
   disabled one, so it keeps the normal field look. */
.flatpickr-input ~ .form-control[readonly]:not(:disabled),
.flatpickr-input ~ .aws-input[readonly]:not(:disabled) {
    background-color: var(--ui-surface) !important;
    color: var(--ui-ink) !important;
    cursor: pointer;
    box-shadow: var(--ui-shadow-xs);
}

/* Description under a choice-card title: legacy ms-8 was sized for the old 14px radio;
   align it with the title (20px radio + me-4 gap). */
.aws-radio-container .aws-checkbox-desc.ms-8 {
    margin-left: calc(20px + 1rem) !important;
}

/* .aws-checkbox (legacy custom-style) forces a 16px box with a #EDEDF3 !important border,
   nearly invisible on white, and paints the checked state tint + orange tick. Bring it in
   line with every other checkbox: 20px, visible border, solid orange with a white tick. */
.aws-checkbox.form-check-custom:not(.form-switch) .form-check-input,
.form-check.form-check-custom:not(.form-switch) .form-check-input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    border: 1.5px solid #C7C7CC !important;
    border-radius: 6px !important;
    background-color: var(--ui-surface) !important;
}

.aws-checkbox.form-check-custom:not(.form-switch) .form-check-input:checked,
.form-check.form-check-custom:not(.form-switch) .form-check-input[type="checkbox"]:checked {
    background-color: var(--ui-primary) !important;
    border-color: var(--ui-primary) !important;
    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='2.4' d='M5.5 10.5l3 3 6-7'/%3e%3c/svg%3e") !important;
    background-size: 100% 100% !important;
    background-position: center !important;
}

.aws-checkbox.form-check-custom:not(.form-switch) .form-check-input:disabled,
.form-check.form-check-custom:not(.form-switch) .form-check-input[type="checkbox"]:disabled {
    opacity: .45;
}

/* Input groups: the shared 12px radius on each part broke Bootstrap's joined corners
   (two rounded boxes with a notch) and the prefix was 46px next to a 44px field.
   .currency is excluded: its suffix sits inside the field (pages/product-pricing.css). */
.input-group:not(.currency) > .input-group-text:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group:not(.currency) > .input-group-text + .form-control,
.input-group:not(.currency) > .input-group-text + .aws-input {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Square the right side only when something is really attached after the field:
   FormValidation appends its message after the input, so :not(:last-child) misfired. */
.input-group:not(.currency) > :is(.form-control, .aws-input):has(+ .input-group-text, + .btn) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group:not(.currency) > .form-control + .input-group-text,
.input-group:not(.currency) > .aws-input + .input-group-text {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.aws-input-group:not(.currency) .input-group-text {
    height: 44px;
    min-height: 44px;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
}

.form-check-input[type="checkbox"]:indeterminate,
.form-check-custom:not(.form-switch) .form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--ui-primary) !important;
    border-color: var(--ui-primary) !important;
    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-width='2.4' d='M6 10h8'/%3e%3c/svg%3e") !important;
    background-size: 100% 100% !important;
    background-position: center !important;
}

/* Switches (incl. .form-check-custom.aws-form-switch) always stay pills */
.form-switch.form-check-custom .form-check-input,
.form-check-custom.form-switch .form-check-input {
    width: 44px !important;
    height: 26px !important;
    border-radius: 999px !important;
    background-color: #E5E5EA !important;
    border-color: transparent !important;
}

.form-switch.form-check-custom .form-check-input:checked {
    background-color: var(--ui-green-600) !important;
}

/* Select2 keeps the original <select> in the DOM, absolutely positioned at 1px; Bootstrap's
   .w-100 !important stretched it to 100% of the scroller and created a sideways scroll. */
select.select2-hidden-accessible,
#kt_app_content_container select.select2-hidden-accessible {
    width: 1px !important;
    max-width: 1px !important;
    min-width: 0 !important;
}

/* Checked radio: white dot on the brand fill (legacy image was an orange dot, which
   vanished on the fill and could not follow a theme change). */
.form-check-input[type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='1.6' fill='%23fff'/%3e%3c/svg%3e") !important;
    background-size: 100% 100% !important;
    background-position: center !important;
}

/* Selected filter chip (.aws-filter-btn.aws-neutral.active, e.g. the approval queue's pipeline
   chips): pale brand tint, brand outline and label — never ink-on-ink. Legacy _form.scss only
   styled it inside .aws-btn-filter-wrapper (#333 fill), and the base rule above forces ink text,
   so chips outside that wrapper rendered as a black pill with an invisible label. */
.aws-filter-btn.aws-neutral.active,
.aws-filter-btn.aws-neutral[aria-pressed="true"],
.aws-btn-filter-wrapper .aws-filter-btn.aws-neutral.active {
    background: var(--ui-primary-tint) !important;
    border-color: var(--ui-brand-300) !important;
    color: var(--ui-brand-700) !important;
    font-family: var(--ui-font-semibold) !important;
    box-shadow: none !important;
}

.aws-filter-btn.aws-neutral.active:hover,
.aws-filter-btn.aws-neutral[aria-pressed="true"]:hover {
    background: var(--ui-brand-100) !important;
}

.aws-filter-btn.aws-neutral.active svg path,
.aws-btn-filter-wrapper .aws-filter-btn.aws-neutral.active svg path {
    fill: var(--ui-brand-700) !important;
}

.aws-filter-btn.aws-neutral:focus-visible {
    outline: none;
    box-shadow: var(--ui-focus-ring) !important;
}