/**
 * Form validation — error text matches required-field asterisk (var(--danger)).
 * Bootstrap hardcodes #ea5455 on .invalid-feedback; theme danger may differ (e.g. Limen #8B4444).
 */
:root {
    --wms-form-invalid-color: var(--danger);
    --wms-form-invalid-border: color-mix(in srgb, var(--danger) 45%, var(--bs-border-color, #d8d6de));
    --wms-form-invalid-shadow: 0 0 0 0.12rem color-mix(in srgb, var(--danger) 14%, transparent);
    --wms-form-focus-shadow: 0 0 0 0.12rem color-mix(in srgb, var(--bs-primary) 18%, transparent);
    --bs-form-invalid-color: var(--danger);
    --bs-form-invalid-border-color: var(--wms-form-invalid-border);
}

.invalid-feedback,
.invalid-tooltip {
    color: var(--wms-form-invalid-color) !important;
}

form .error:not(input),
form span.error {
    color: var(--wms-form-invalid-color) !important;
}

.form-control.is-invalid,
.was-validated .form-control:invalid,
.form-select.is-invalid,
.was-validated .form-select:invalid,
.form-check-input.is-invalid,
.was-validated .form-check-input:invalid,
textarea.form-control.is-invalid,
.was-validated textarea.form-control:invalid {
    border-color: var(--wms-form-invalid-border) !important;
}

.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus,
.form-select.is-invalid:focus,
.was-validated .form-select:invalid:focus,
.form-check-input.is-invalid:focus,
.was-validated .form-check-input:invalid:focus {
    border-color: var(--wms-form-invalid-border) !important;
    box-shadow: var(--wms-form-invalid-shadow) !important;
}

.form-check-input.is-invalid ~ .form-check-label,
.was-validated .form-check-input:invalid ~ .form-check-label {
    color: inherit;
}

.input-group.is-invalid .input-group-text,
.input-group:not(.bootstrap-touchspin):focus-within .form-control.is-invalid,
.input-group:not(.bootstrap-touchspin):focus-within .input-group-text.is-invalid {
    border-color: var(--wms-form-invalid-border) !important;
}

.select2-container--default .select2-selection.is-invalid,
.select2-container--classic .select2-selection.is-invalid {
    border-color: var(--wms-form-invalid-border) !important;
}

/* Row-action menus use Bootstrap fixed Popper (core-datatable.js) — keep horizontal scroll on phones. */
.table-responsive:has(.datatable-row-actions) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive:has(.datatable-row-actions) td.datatable-actions-cell--open {
    position: relative;
    z-index: 4;
}

.merchant-detail-inner-content > .tab-pane {
    overflow: visible;
}

.dropdown-menu .dt-action-form {
    margin: 0;
}

.dropdown-menu .dt-action-form .dropdown-item {
    width: 100%;
    text-align: inherit;
}

/* Select2 optgroup labels — readable size (nested options use option row rules below) */
.select2-container .select2-dropdown .select2-results__group,
.select2-dropdown-spaced .select2-results__group {
    padding: 0.55rem 0.85rem 0.3rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--bs-secondary-color);
}

/* Select2 option spacing — bordered rows; selected/hover distinct from default (rule 19: all dashboard dropdowns) */
.select2-container .select2-dropdown .select2-results__options,
.select2-dropdown-spaced .select2-results__options {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.375rem;
    max-height: 15rem;
    overflow-y: auto;
}

.select2-container .select2-dropdown .select2-results__option,
.select2-dropdown-spaced .select2-results__option {
    padding: 0.65rem 0.85rem;
    margin-bottom: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    background: var(--bs-body-bg);
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.select2-container .select2-dropdown .select2-results__option:last-child,
.select2-dropdown-spaced .select2-results__option:last-child {
    margin-bottom: 0;
}

.select2-container .select2-dropdown .select2-results__option--highlighted,
.select2-dropdown-spaced .select2-results__option--highlighted {
    background: rgba(var(--bs-primary-rgb), 0.08) !important;
    border-color: rgba(var(--bs-primary-rgb), 0.3) !important;
    color: var(--bs-body-color) !important;
}

.select2-container .select2-dropdown .select2-results__option[aria-selected="true"],
.select2-dropdown-spaced .select2-results__option[aria-selected="true"],
.select2-container .select2-dropdown .select2-results__option--selected,
.select2-dropdown-spaced .select2-results__option--selected {
    background: rgba(var(--bs-primary-rgb), 0.12) !important;
    border-color: rgba(var(--bs-primary-rgb), 0.45) !important;
    box-shadow: 0 0 0 0.12rem rgba(var(--bs-primary-rgb), 0.1);
    font-weight: 600;
    color: var(--bs-body-color) !important;
}

.select2-container .select2-dropdown .select2-results__option[aria-selected="true"].select2-results__option--highlighted,
.select2-dropdown-spaced .select2-results__option[aria-selected="true"].select2-results__option--highlighted {
    background: rgba(var(--bs-primary-rgb), 0.18) !important;
    color: var(--bs-heading-color, var(--bs-body-color)) !important;
}

html.dark-layout .select2-container .select2-dropdown .select2-results__option--highlighted,
html.dark-layout .select2-dropdown-spaced .select2-results__option--highlighted {
    background: rgba(var(--bs-primary-rgb), 0.16) !important;
    color: var(--bs-body-color) !important;
}

html.dark-layout .select2-container .select2-dropdown .select2-results__option[aria-selected="true"],
html.dark-layout .select2-dropdown-spaced .select2-results__option[aria-selected="true"],
html.dark-layout .select2-container .select2-dropdown .select2-results__option--selected,
html.dark-layout .select2-dropdown-spaced .select2-results__option--selected {
    background: rgba(var(--bs-primary-rgb), 0.22) !important;
    color: var(--bs-body-color) !important;
}

html.dark-layout .select2-container .select2-dropdown .select2-results__option[aria-selected="true"].select2-results__option--highlighted,
html.dark-layout .select2-dropdown-spaced .select2-results__option[aria-selected="true"].select2-results__option--highlighted {
    background: rgba(var(--bs-primary-rgb), 0.28) !important;
    color: var(--bs-heading-color, var(--bs-body-color)) !important;
}

/* Select2 single: label vertically centered; long text ellipses (no × clear control) */
.select2-container--default .select2-selection--single {
    position: relative;
    display: flex;
    align-items: center;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-inline-end: 2rem;
    line-height: 1.5;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    line-height: inherit;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    display: none !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    position: relative;
    flex: 0 0 1.75rem;
    width: 1.75rem;
    min-width: 1.75rem;
    align-self: stretch;
    height: auto;
    top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    margin: 0;
    transform: none;
}

html[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
    left: auto;
    right: auto;
}

.card-body .select2-container--default .select2-selection--single {
    min-height: 2.714rem;
}

/*
 * Select2 multiple — global chip layout (EN + RTL). Overrides Vuexy theme (#c02526 tags).
 * Matches carrier operating-countries offcanvas polish; applies to all dashboard Select2.
 */
.select2-container--default .select2-selection--multiple,
.select2-container--bootstrap-5 .select2-selection--multiple {
    display: flex !important;
    align-items: center !important;
    min-height: 2.75rem !important;
    border-color: var(--bs-border-color) !important;
    background-color: var(--bs-body-bg) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered,
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    align-content: flex-start !important;
    gap: 0.35rem;
    width: 100% !important;
    min-height: calc(2.75rem - 2px) !important;
    padding: 0.35rem 0.5rem !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered > li,
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered > li {
    float: none !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice,
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
    margin: 0 !important;
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem;
    padding: 0.25rem 0.55rem 0.25rem 0.6rem !important;
    max-width: 100%;
    border-radius: 0.35rem;
    background: color-mix(in srgb, var(--primary) 14%, var(--bs-body-bg)) !important;
    border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--bs-border-color)) !important;
    color: color-mix(in srgb, var(--primary) 78%, var(--bs-body-color)) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__display,
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__display,
.select2-container--default .select2-selection--multiple .select2-selection__choice__label,
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__label {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove,
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove {
    order: 2;
    position: relative !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 1.15rem;
    min-width: 1.15rem;
    height: 1.15rem;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
    line-height: 1 !important;
    font-size: 1.05rem !important;
    font-weight: 500;
    border: 0 !important;
    background: transparent !important;
    color: color-mix(in srgb, var(--primary) 65%, var(--bs-secondary-color)) !important;
    opacity: 1;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove::before,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:before,
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove::before,
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove:before {
    content: none !important;
    display: none !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--primary) !important;
    background: transparent !important;
}

html[dir="rtl"] .select2-container--default .select2-selection--multiple .select2-selection__choice,
html[dir="rtl"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
    padding: 0.25rem 0.6rem 0.25rem 0.55rem !important;
    flex-direction: row-reverse;
}

html[dir="rtl"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove,
html[dir="rtl"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__clear,
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__clear {
    display: none !important;
}

.select2-container--default .select2-selection--multiple .select2-search--inline,
.select2-container--bootstrap-5 .select2-selection--multiple .select2-search--inline {
    float: none !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    flex: 1 1 6rem;
    min-width: 4rem;
}

.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field,
.select2-container--bootstrap-5 .select2-selection--multiple .select2-search--inline .select2-search__field {
    width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    min-height: 1.5rem;
    line-height: 1.5rem;
}

html.dark-layout .select2-container--default .select2-selection--multiple .select2-selection__choice,
html.dark-layout .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
    background: color-mix(in srgb, var(--primary) 22%, var(--bs-body-bg)) !important;
    border-color: color-mix(in srgb, var(--primary) 38%, var(--bs-border-color)) !important;
    color: color-mix(in srgb, var(--primary) 55%, var(--bs-body-color)) !important;
}

/*
 * Select2 open menus can widen the document (second horizontal scrollbar),
 * especially with long labels / RTL. Clamp width and hide page X-scroll
 * only while a dropdown is open.
 */
html.wms-select2-open {
    overflow-x: clip;
}

html.wms-select2-open body {
    overflow-x: clip;
}

body > .select2-container--open {
    max-width: calc(100vw - 1rem) !important;
}

.select2-container--open .select2-dropdown {
    box-sizing: border-box;
    max-width: min(100%, calc(100vw - 1rem));
}

.card .select2-container--open .select2-dropdown {
    max-width: 100%;
}

.card > .card-body:has([data-dt-filter]) {
    overflow: visible;
    padding-inline: 1.5rem;
}

@media (max-width: 767.98px) {
    .card > .card-body:has([data-dt-filter]) {
        padding-inline: 1rem;
    }
}

.card [data-dt-filter].select2-hidden-accessible,
.card .ac-select2.select2-hidden-accessible {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.card .select2-container {
    max-width: 100%;
}

.select2-container--open .select2-results__option {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Required field asterisk — matches validation error tone (var(--danger)) */
.form-required-mark,
.form-label .text-danger.form-required-mark {
    color: var(--danger) !important;
    font-weight: 700;
    line-height: 1;
}

form[class*="-filters"] .select2-container,
form[data-filter-auto-submit] .select2-container {
    width: 100% !important;
}

/*
 * Vuexy sets .card-header + .card-body { padding-top: 0 }, so titles sit flush
 * on the body. Keep a gap under card headers except tab strips and datatable
 * inline filter bars (header immediately above a filter card-body).
 */
.card > .card-header:not(.card-header-tabs):not(:has(.nav-tabs)):not(:has(+ .card-body:has([data-dt-filter]))) {
    margin-bottom: 1rem;
}

.core-confirm-popup {
    padding-bottom: 1.25rem;
}

/* Short action confirms (e.g. Sync orders) — no inner scroll; shell lock owns gutter */
html.wms-swal-confirm-open .swal2-container .swal2-popup.swal2-modal {
    overflow: visible;
    max-height: none;
}

html.wms-swal-confirm-open .swal2-container .swal2-html-container {
    max-height: none !important;
    overflow: visible !important;
}

.core-confirm-html {
    text-align: start;
    margin-top: 0.35rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--bs-body-color);
}

.core-confirm-html .core-confirm-lead {
    margin: 0 0 0.75rem;
}

.core-confirm-html .core-confirm-body {
    margin: 0;
}

.core-confirm-html .core-confirm-note {
    margin: 0.85rem 0 0;
    padding: 0.7rem 0.85rem;
    border: 1px solid rgba(var(--bs-warning-rgb), 0.28);
    background: rgba(var(--bs-warning-rgb), 0.1);
    border-radius: 0.5rem;
    font-size: 0.875rem;
}

/* Toggle notice cards — source of truth: Settings → Appearance dark mode */
.settings-toggle-card {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.625rem;
    background: var(--bs-body-bg, #fff);
    padding: 0.85rem 1rem;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.settings-toggle-card:has(.form-check-input:checked) {
    border-color: rgba(var(--bs-primary-rgb, 115, 103, 240), 0.28);
    background: rgba(var(--bs-primary-rgb, 115, 103, 240), 0.03);
}

.settings-toggle-card:has(.form-check-warning .form-check-input:checked) {
    border-color: rgba(var(--bs-warning-rgb, 255, 159, 67), 0.35);
    background: rgba(var(--bs-warning-rgb, 255, 159, 67), 0.06);
}

.settings-toggle-card__main {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

.settings-toggle-card__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background: rgba(var(--bs-primary-rgb, 115, 103, 240), 0.1);
    color: var(--primary, rgb(var(--bs-primary-rgb, 115, 103, 240)));
}

.settings-toggle-card:has(.form-check-warning) .settings-toggle-card__icon {
    background: rgba(var(--bs-warning-rgb, 255, 159, 67), 0.12);
    color: var(--warning, rgb(var(--bs-warning-rgb, 255, 159, 67)));
}

.settings-toggle-card__icon svg {
    width: 16px;
    height: 16px;
}

.settings-toggle-card__copy {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 0.05rem;
}

.settings-toggle-card__label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 0.2rem;
    color: var(--bs-heading-color, inherit);
    cursor: pointer;
}

.settings-toggle-card__help {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--bs-secondary-color);
}

.settings-toggle-card__switch {
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.offcanvas-form-wide .settings-toggle-card,
.offcanvas-form-extra-wide .settings-toggle-card {
    height: 100%;
}

.table-responsive:has(.datatable-row-actions) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive:has(.datatable-row-actions) td.datatable-actions-cell--open,
.table-responsive:has(.datatable-row-actions) td.datatable-actions-cell:has(.dropdown.show) {
    position: relative;
    z-index: 4;
}

/**
 * Phone / E.164 fields — always LTR regardless of page locale (+ and digits read left-to-right).
 */
input[type="tel"],
input.wms-phone-ltr,
.ltr:is(input, textarea),
input[name="phone"],
input[name="whatsapp"],
input[name="customer_phone"],
input[name="pickup_phone"],
input[name="alternative_phone"],
input[name="support_phone"],
input[name="support_whatsapp"],
input[name="driver_phone"],
input[name="test_sms_phone"],
input[name="phone_code"],
input[name="customer_deny_phone_prefix"],
input[name$="[phone]"],
input[name*="phone"]:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
input[name*="whatsapp"]:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) {
    direction: ltr !important;
    text-align: start;
    unicode-bidi: plaintext;
}

/**
 * Login-style merged inputs (email/password on auth) — reuse on dashboard forms/offcanvas.
 * Matches .auth-form-card .input-group-merge in wms-client-auth.css without auth layout scope.
 */
.input-group-merge.dashboard-credential-merge {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius, 0.357rem);
    overflow: hidden;
    /* Match .form-control fill — not page/offcanvas --bs-body-bg (often gray). */
    background-color: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dark-layout .input-group-merge.dashboard-credential-merge,
[data-bs-theme='dark'] .input-group-merge.dashboard-credential-merge {
    background-color: var(--wms-input-bg, #25222c);
    border-color: var(--saas-border-strong, var(--bs-border-color));
}

.input-group-merge.dashboard-credential-merge .form-control,
.input-group-merge.dashboard-credential-merge .input-group-text,
.input-group-merge.dashboard-credential-merge:focus-within .form-control,
.input-group-merge.dashboard-credential-merge:focus-within .input-group-text,
.input-group-merge.dashboard-credential-merge.is-invalid .form-control,
.input-group-merge.dashboard-credential-merge.is-invalid .input-group-text,
.input-group-merge.dashboard-credential-merge:has(.form-control.is-invalid) .form-control,
.input-group-merge.dashboard-credential-merge:has(.form-control.is-invalid) .input-group-text {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent;
}

.input-group-merge.dashboard-credential-merge:focus-within:not(.is-invalid):not(:has(.form-control.is-invalid)) {
    border-color: var(--bs-primary);
    box-shadow: var(--wms-form-focus-shadow);
}

.input-group-merge.dashboard-credential-merge.is-invalid,
.input-group-merge.dashboard-credential-merge:has(.form-control.is-invalid) {
    border-color: var(--wms-form-invalid-border);
    box-shadow: var(--wms-form-invalid-shadow);
}

.input-group-merge.dashboard-credential-merge.is-invalid:focus-within,
.input-group-merge.dashboard-credential-merge:has(.form-control.is-invalid):focus-within {
    border-color: var(--wms-form-invalid-border);
    box-shadow: var(--wms-form-invalid-shadow);
}

.input-group-merge.dashboard-credential-merge:has(.form-control.is-invalid) .input-group-text,
.input-group-merge.dashboard-credential-merge.is-invalid .input-group-text {
    color: var(--bs-secondary-color) !important;
}

.input-group-merge.dashboard-credential-merge .form-control:focus,
.input-group-merge.dashboard-credential-merge .form-control.is-invalid,
.input-group-merge.dashboard-credential-merge .form-control.is-invalid:focus {
    border: 0 !important;
    box-shadow: none !important;
}

.input-group-merge.dashboard-credential-merge > .input-group-text {
    color: var(--bs-secondary-color);
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.input-group-merge.dashboard-credential-merge > .input-group-text:first-child {
    padding-inline-start: 0.85rem;
    padding-inline-end: 0.5rem;
}

.input-group-merge.dashboard-credential-merge .form-control:not(:first-child) {
    flex: 1 1 auto;
    min-width: 0;
    padding-inline-start: 0.65rem !important;
}

.input-group-merge.dashboard-credential-merge > .input-group-text svg {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
}