/**
 * UX2 polish — dialogs (SweetAlert2 v11), toasts (toastr), keyboard focus. App-wide.
 *
 * Pairs with appjs/common/ux2/dialogs.js, which normalises Swal.fire() options before a dialog opens
 * (brand-coloured Confirm, red only for destructive confirms, quiet Cancel, Cancel before Confirm).
 * Load after plugins.bundle.css / style.bundle.css / skolarli.css. The !important flags beat SweetAlert's
 * inline button colours and Metronic's own toastr / swal rules, which are themselves !important in places.
 */

:root {
    --ux2p-brand: var(--sko-primary, #1e5f69);
    --ux2p-brand-dark: var(--sko-primary-dark, #154951);
    --ux2p-brand-press: #174850;
    --ux2p-ring: rgba(30, 95, 105, 0.28);
    --ux2p-ink: #181c32;
    --ux2p-ink-soft: #4b5064;
    --ux2p-muted: #7e8299;
    --ux2p-line: #e4e6ef;
    --ux2p-subtle: #f6f7f9;
    --ux2p-danger: #d9214e;
    --ux2p-danger-dark: #b81a40;
    --ux2p-danger-line: rgba(217, 33, 78, 0.45);
    --ux2p-danger-soft: #fdecef;
    --ux2p-on: #1f9d63;       /* switch "on": a success green with 3.5:1 against white (Metronic's #50cd89 is 2:1) */
    --ux2p-on-dark: #188553;
    --ux2p-off: #c9cdd6;      /* switch "off" track: visible on a white card (Metronic's #eff2f5 is 1.1:1) */
    --ux2p-off-line: #a1a5b7;
    --ux2p-halo: rgba(30, 95, 105, 0.18);      /* press halo: turning a checkbox / radio on (brand) */
    --ux2p-halo-on: rgba(31, 157, 99, 0.2);     /*             turning a switch on (green) */
    --ux2p-halo-off: rgba(126, 130, 153, 0.2);  /*             turning anything off (grey) */
    --ux2p-success: #3bb77e;
    --ux2p-warning: #e8a317;
    --ux2p-info: #3b82f6;
    --ux2p-dialog-width: 480px;
    --ux2p-modal-width: 600px;   /* Bootstrap modals that didn't pick a size (277 of them; default was 500px) */
    --ux2p-brand-soft: var(--sko-primary-light, #d4e0e2);
    --ux2p-ease: cubic-bezier(0.2, 0, 0, 1);
}

@supports (color: color-mix(in srgb, red 50%, white)) {
    :root {
        --ux2p-brand-press: color-mix(in srgb, var(--ux2p-brand) 78%, #000);
        --ux2p-ring: color-mix(in srgb, var(--ux2p-brand) 28%, transparent);
        --ux2p-halo: color-mix(in srgb, var(--ux2p-brand) 18%, transparent);
    }
}

/* ============================================
   1. DIALOGS (SweetAlert2) — toasts made with Swal are styled in section 2
   ============================================ */
.swal2-container.swal2-backdrop-show {
    background: rgba(16, 20, 28, 0.42) !important;
}

.swal2-container .swal2-popup:not(.swal2-toast) {
    width: var(--ux2p-dialog-width);
    max-width: calc(100vw - 32px);
    padding: 28px 28px 24px;
    border-radius: 15px;
    box-shadow: 0 24px 48px -12px rgba(16, 24, 40, 0.22), 0 0 0 1px rgba(16, 24, 40, 0.04);
}

/* Calmer entrance and exit than SweetAlert's bounce */
.swal2-container .swal2-popup.swal2-show:not(.swal2-toast) {
    animation: ux2-dialog-in 0.18s var(--ux2p-ease) !important;
}

.swal2-container .swal2-popup.swal2-hide:not(.swal2-toast) {
    animation: ux2-dialog-out 0.12s cubic-bezier(0.4, 0, 1, 1) forwards !important;
}

@keyframes ux2-dialog-in {
    from { opacity: 0; transform: translateY(6px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

@keyframes ux2-dialog-out {
    from { opacity: 1; }
    to { opacity: 0; transform: scale(0.98); }
}

/* Icons: smaller (the whole icon is sized in em), no animated drawing, Skolarli's semantic colours */
.swal2-container .swal2-popup:not(.swal2-toast) .swal2-icon {
    margin: 2px auto 18px;
    font-size: 8.5px;
}

.swal2-container .swal2-popup:not(.swal2-toast) .swal2-icon,
.swal2-container .swal2-popup:not(.swal2-toast) .swal2-icon * {
    animation: none !important;
}

.swal2-container .swal2-icon.swal2-warning {
    color: var(--ux2p-warning);
    border-color: rgba(232, 163, 23, 0.45);
}

.swal2-container .swal2-icon.swal2-error {
    border-color: rgba(217, 33, 78, 0.4);
}

.swal2-container .swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
    background-color: var(--ux2p-danger);
}

.swal2-container .swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(59, 183, 126, 0.35);
}

.swal2-container .swal2-icon.swal2-success [class^="swal2-success-line"] {
    background-color: var(--ux2p-success);
}

.swal2-container .swal2-icon.swal2-info {
    color: var(--ux2p-info);
    border-color: rgba(59, 130, 246, 0.4);
}

.swal2-container .swal2-icon.swal2-question {
    color: var(--ux2p-muted);
    border-color: var(--ux2p-line);
}

.swal2-container .swal2-popup:not(.swal2-toast) .swal2-title {
    margin: 0 0 8px;
    padding: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ux2p-ink);
}

.swal2-container .swal2-popup:not(.swal2-toast) .swal2-html-container {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--ux2p-ink-soft);
}

/* Close (×): neutral at rest; on hover / keyboard focus a light pink fill, red ring and red cross —
   same as the toasts' close */
.swal2-container .swal2-popup:not(.swal2-toast) .swal2-close {
    width: 30px;
    height: 30px;
    margin: -12px -12px -18px 0; /* sits in the top-right corner without pushing the content down */
    font-size: 22px;
    line-height: 1;
    color: var(--ux2p-muted);
    background: transparent;
    border: 1px solid var(--ux2p-line);
    border-radius: 50%;
    transition: color 0.12s var(--ux2p-ease), background-color 0.12s var(--ux2p-ease), border-color 0.12s var(--ux2p-ease);
}

.swal2-container .swal2-popup:not(.swal2-toast) .swal2-close:hover,
.swal2-container .swal2-popup:not(.swal2-toast) .swal2-close:focus-visible {
    color: var(--ux2p-danger);
    background: var(--ux2p-danger-soft);
    border-color: var(--ux2p-danger);
    box-shadow: none;
}

/* Inputs inside dialogs (prompts) */
.swal2-container .swal2-popup:not(.swal2-toast) .swal2-input,
.swal2-container .swal2-popup:not(.swal2-toast) .swal2-textarea,
.swal2-container .swal2-popup:not(.swal2-toast) .swal2-select {
    width: 100%;
    margin: 16px 0 0;
    font-size: 14px;
    color: var(--ux2p-ink);
    border: 1px solid var(--ux2p-line);
    border-radius: 8px;
    box-shadow: none;
}

.swal2-container .swal2-popup:not(.swal2-toast) .swal2-input:focus,
.swal2-container .swal2-popup:not(.swal2-toast) .swal2-textarea:focus,
.swal2-container .swal2-popup:not(.swal2-toast) .swal2-select:focus {
    border-color: var(--ux2p-brand);
    box-shadow: 0 0 0 3px var(--ux2p-ring);
}

.swal2-container .swal2-popup:not(.swal2-toast) .swal2-validation-message {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--ux2p-danger);
    background: #fdf0f3;
    border-radius: 8px;
}

.swal2-container .swal2-popup:not(.swal2-toast) .swal2-footer {
    margin: 20px 0 0;
    padding: 14px 0 0;
    font-size: 13px;
    color: var(--ux2p-muted);
    border-top: 1px solid var(--ux2p-line);
}

.swal2-container .swal2-popup:not(.swal2-toast) .swal2-timer-progress-bar {
    height: 3px;
    background: var(--ux2p-brand);
    opacity: 0.6;
}

/* Buttons — whatever colours or classes the call passed */
.swal2-container .swal2-popup:not(.swal2-toast) .swal2-actions {
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    margin: 24px 0 0;
    padding: 0;
}

.swal2-container .swal2-popup:not(.swal2-toast) .swal2-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 108px;
    height: 40px;
    margin: 0 !important;
    padding: 0 18px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    transition: background-color 0.12s var(--ux2p-ease), border-color 0.12s var(--ux2p-ease), color 0.12s var(--ux2p-ease), box-shadow 0.12s var(--ux2p-ease);
}

/* Confirm: the tenant's brand colour; darker on hover, darker still while pressed */
.swal2-container .swal2-popup:not(.swal2-toast) .swal2-actions .swal2-confirm {
    color: #fff !important;
    background: var(--ux2p-brand) !important;
}

.swal2-container .swal2-popup:not(.swal2-toast) .swal2-actions .swal2-confirm:hover {
    background: var(--ux2p-brand-dark) !important;
}

.swal2-container .swal2-popup:not(.swal2-toast) .swal2-actions .swal2-confirm:active {
    background: var(--ux2p-brand-press) !important;
}

/* Destructive confirm (a red colour or btn-danger in the call) */
.swal2-container .swal2-popup:not(.swal2-toast) .swal2-actions .swal2-confirm.ux2-danger,
.swal2-container .swal2-popup:not(.swal2-toast) .swal2-actions .swal2-confirm.btn-danger {
    background: var(--ux2p-danger) !important;
}

.swal2-container .swal2-popup:not(.swal2-toast) .swal2-actions .swal2-confirm.ux2-danger:hover,
.swal2-container .swal2-popup:not(.swal2-toast) .swal2-actions .swal2-confirm.btn-danger:hover,
.swal2-container .swal2-popup:not(.swal2-toast) .swal2-actions .swal2-confirm.ux2-danger:active,
.swal2-container .swal2-popup:not(.swal2-toast) .swal2-actions .swal2-confirm.btn-danger:active {
    background: var(--ux2p-danger-dark) !important;
}

/* Cancel / Deny: always quiet */
.swal2-container .swal2-popup:not(.swal2-toast) .swal2-actions .swal2-cancel,
.swal2-container .swal2-popup:not(.swal2-toast) .swal2-actions .swal2-deny {
    color: var(--ux2p-ink) !important;
    background: #fff !important;
    border-color: var(--ux2p-line) !important;
}

.swal2-container .swal2-popup:not(.swal2-toast) .swal2-actions .swal2-cancel:hover,
.swal2-container .swal2-popup:not(.swal2-toast) .swal2-actions .swal2-deny:hover {
    background: var(--ux2p-subtle) !important;
    border-color: #d8dbe4 !important;
}

.swal2-container .swal2-popup:not(.swal2-toast) .swal2-actions .swal2-cancel:active,
.swal2-container .swal2-popup:not(.swal2-toast) .swal2-actions .swal2-deny:active {
    background: #eef0f3 !important;
}

.swal2-container .swal2-popup .swal2-actions button:focus {
    box-shadow: none !important;
}

.swal2-container .swal2-popup .swal2-actions button:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px var(--ux2p-ring) !important;
}

.swal2-container .swal2-popup .swal2-actions .swal2-confirm.ux2-danger:focus-visible,
.swal2-container .swal2-popup .swal2-actions .swal2-confirm.btn-danger:focus-visible {
    box-shadow: 0 0 0 3px rgba(217, 33, 78, 0.28) !important;
}

/* ============================================
   2. TOASTS — toastr (#toastr-container > .toastr.toastr-{type}) and SweetAlert toasts
   ============================================ */
#toastr-container.toastr-top-right {
    top: 76px; /* below the fixed 65px header */
    right: 16px;
}

#toastr-container > .toastr {
    --ux2p-accent: var(--ux2p-brand);
    width: 340px;
    margin: 0 0 8px;
    padding: 13px 46px 13px 46px !important;
    color: var(--ux2p-ink-soft) !important;
    background-color: #fff !important;
    background-position: 16px 15px !important;
    background-repeat: no-repeat !important;
    background-size: 18px 18px !important;
    border: 1px solid var(--ux2p-line) !important;
    border-radius: 14px !important;
    /* 1: the semantic accent on the left edge — an inset shadow, so it follows the rounded corners instead of
          being clipped; 2–3: a clear lift, so a white toast doesn't get lost on a white page */
    box-shadow: inset 3px 0 0 var(--ux2p-accent), 0 18px 40px -12px rgba(16, 24, 40, 0.32), 0 6px 14px -6px rgba(16, 24, 40, 0.14) !important;
    opacity: 1 !important;
    animation: ux2-toast-in 0.22s var(--ux2p-ease);
}

#toastr-container > .toastr-success {
    --ux2p-accent: var(--ux2p-success);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%233bb77e'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z'/%3E%3C/svg%3E") !important;
}

#toastr-container > .toastr-error {
    --ux2p-accent: var(--ux2p-danger);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23d9214e'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z'/%3E%3C/svg%3E") !important;
}

#toastr-container > .toastr-warning {
    --ux2p-accent: var(--ux2p-warning);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e8a317'%3E%3Cpath d='M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z'/%3E%3C/svg%3E") !important;
}

#toastr-container > .toastr-info {
    --ux2p-accent: var(--ux2p-info);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%233b82f6'%3E%3Cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z'/%3E%3C/svg%3E") !important;
}

#toastr-container > .toastr .toastr-title {
    margin-bottom: 2px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ux2p-ink);
}

#toastr-container > .toastr .toastr-message {
    font-size: 13px;
    line-height: 1.45;
    color: var(--ux2p-ink-soft);
}

#toastr-container > .toastr .toastr-message a {
    color: var(--ux2p-brand);
}

/* Close (×): neutral at rest; on hover / keyboard focus a light pink fill, red ring and red cross —
   same as the dialogs' close */
#toastr-container > .toastr .toastr-close-button {
    position: absolute;
    top: 11px;
    right: 12px;
    margin-top: 0;
    left: auto;
    float: none;
    width: 24px;
    height: 24px;
    font-size: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%237e8299'%3E%3Cpath d='M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z'/%3E%3C/svg%3E") center / 10px no-repeat !important;
    border: 1px solid var(--ux2p-line) !important;
    border-radius: 50%;
    opacity: 1;
    transition: background-color 0.12s var(--ux2p-ease), border-color 0.12s var(--ux2p-ease);
}

#toastr-container > .toastr .toastr-close-button:hover,
#toastr-container > .toastr .toastr-close-button:focus-visible {
    background: var(--ux2p-danger-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23d9214e'%3E%3Cpath d='M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z'/%3E%3C/svg%3E") center / 10px no-repeat !important;
    border-color: var(--ux2p-danger) !important;
}

#toastr-container > .toastr .toastr-progress {
    height: 4px;
    background: var(--ux2p-accent);
    opacity: 0.55;
}

@keyframes ux2-toast-in {
    from { opacity: 0; transform: translateX(12px); }
    to { opacity: 1; transform: none; }
}

/* SweetAlert toasts (Swal.mixin({ toast: true })) — the same card */
.swal2-container .swal2-popup.swal2-toast {
    padding: 12px 14px;
    border: 1px solid var(--ux2p-line);
    border-radius: 10px;
    box-shadow: 0 18px 40px -12px rgba(16, 24, 40, 0.32), 0 6px 14px -6px rgba(16, 24, 40, 0.14) !important;
}

.swal2-container .swal2-popup.swal2-toast .swal2-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ux2p-ink);
}

.swal2-container .swal2-popup.swal2-toast .swal2-html-container {
    font-size: 13px;
    color: var(--ux2p-ink-soft);
}

.swal2-container .swal2-popup.swal2-toast .swal2-timer-progress-bar {
    height: 2px;
    background: var(--ux2p-brand);
    opacity: 0.55;
}

/* ============================================
   3. KEYBOARD FOCUS — one brand-coloured ring everywhere, only for keyboard users (:focus-visible)
   ============================================ */
:where(a, button, .btn, [role="button"], summary, .menu-link, .page-link, .nav-link, [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 2px solid var(--ux2p-brand) !important;
    outline-offset: 2px;
}

:where(.form-check-input):focus-visible {
    outline: 2px solid var(--ux2p-brand) !important;
    outline-offset: 2px;
    box-shadow: none !important;
}

/* Text fields show focus on any focus (you're about to type) — a soft ring and the brand border */
:where(.form-control, .form-select):focus {
    border-color: var(--ux2p-brand) !important;
    box-shadow: 0 0 0 3px var(--ux2p-ring) !important;
}

:where(.select2-container--focus, .select2-container--open) .select2-selection {
    border-color: var(--ux2p-brand) !important;
    box-shadow: 0 0 0 3px var(--ux2p-ring) !important;
}

/* ============================================
   4. CHECKBOXES, RADIOS, SWITCHES — checked state in the tenant brand colour instead of Metronic blue.
   Pages that chose a colour (form-check-success — 106 uses — / -danger / -warning / -info) keep it.
   ============================================ */
.form-check:not(.form-check-success):not(.form-check-danger):not(.form-check-warning):not(.form-check-info) .form-check-input:checked {
    background-color: var(--ux2p-brand);
    border-color: var(--ux2p-brand);
}

.form-check:not(.form-check-success):not(.form-check-danger):not(.form-check-warning):not(.form-check-info) .form-check-input:checked:hover {
    background-color: var(--ux2p-brand-dark);
    border-color: var(--ux2p-brand-dark);
}

/* Switches: green when on, a visible grey when off (on = "enabled"; checkboxes above mean "selected") */
.form-check.form-switch:not(.form-check-success):not(.form-check-danger):not(.form-check-warning):not(.form-check-info) .form-check-input:checked {
    background-color: var(--ux2p-on);
    border-color: var(--ux2p-on);
}

.form-check.form-switch:not(.form-check-success):not(.form-check-danger):not(.form-check-warning):not(.form-check-info) .form-check-input:checked:hover {
    background-color: var(--ux2p-on-dark);
    border-color: var(--ux2p-on-dark);
}

.form-check.form-switch .form-check-input:not(:checked) {
    background-color: var(--ux2p-off);
}

/* Unchecked boxes / radios / switches in the solid style: a faint outline so they don't vanish on white */
.form-check.form-check-solid .form-check-input:not(:checked) {
    box-shadow: inset 0 0 0 1px var(--ux2p-off-line);
}

/* ============================================
   4b. MICRO-INTERACTIONS — checkboxes, radios, switches. Transitions and press states only: they run when
   someone touches a control, never on page load (a page of 30 ticked rows doesn't "pop" 30 times).
   ============================================ */
.form-check .form-check-input,
.form-check-input {
    transition:
        background-color 0.12s var(--ux2p-ease),
        border-color 0.12s var(--ux2p-ease),
        box-shadow 0.12s var(--ux2p-ease),
        background-position 0.18s var(--ux2p-ease),  /* the switch knob's slide */
        transform 0.1s var(--ux2p-ease) !important;
}

/* Press: a small dip while held, springing back on release */
.form-check .form-check-input:active:not(:disabled) {
    transform: scale(0.8);
}

.form-check.form-switch .form-check-input:active:not(:disabled) {
    transform: scale(0.95); /* wider control: a smaller dip reads the same */
}

/* Press halo: a soft ring grows while held and shrinks back on release (box-shadow is in the transition
   above). Its colour is the state the control is about to take — brand / green turning on, grey turning
   off. Unchecked solid inputs keep their faint inset outline alongside it. */
.form-check .form-check-input:active:not(:disabled) {
    box-shadow: 0 0 0 6px var(--ux2p-halo) !important;
}

.form-check.form-check-solid .form-check-input:not(:checked):active:not(:disabled) {
    box-shadow: inset 0 0 0 1px var(--ux2p-off-line), 0 0 0 6px var(--ux2p-halo) !important;
}

.form-check.form-switch .form-check-input:not(:checked):active:not(:disabled),
.form-check.form-check-success .form-check-input:not(:checked):active:not(:disabled) {
    box-shadow: inset 0 0 0 1px var(--ux2p-off-line), 0 0 0 6px var(--ux2p-halo-on) !important;
}

.form-check .form-check-input:checked:active:not(:disabled) {
    box-shadow: 0 0 0 6px var(--ux2p-halo-off) !important;
}

/* ============================================
   5. MODALS, MENUS, SELECT2 — the same family as the dialogs: 14px / 10px corners, soft shadow, quick
   motion, neutral hover, brand for "selected". Bootstrap modals (42 pages), KTMenu dropdowns (75 files),
   Bootstrap dropdowns (14), Select2 (63).
   ============================================ */

/* --- Bootstrap modals --- */
/* One width for modals that didn't choose one; sized (modal-sm/-lg/-xl, mw-*) and fullscreen modals keep theirs */
@media (min-width: 576px) {
    .modal-dialog:not(.modal-sm):not(.modal-lg):not(.modal-xl):not([class*="modal-fullscreen"]):not([class*="mw-"]) {
        max-width: var(--ux2p-modal-width);
    }
}

.modal-backdrop {
    background-color: #10141c;
}

.modal-backdrop.show {
    opacity: 0.42;
}

.modal.fade .modal-dialog {
    transform: translateY(8px) scale(0.98);
    transition: transform 0.2s var(--ux2p-ease);
}

.modal.show .modal-dialog {
    transform: none;
}

.modal.fade {
    transition: opacity 0.18s linear;
}

.modal-content {
    border: 0;
    border-radius: 14px;
    box-shadow: 0 24px 48px -12px rgba(16, 24, 40, 0.22), 0 0 0 1px rgba(16, 24, 40, 0.04);
}

.modal-header {
    padding: 20px 24px;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}

.modal-header .modal-title,
.modal-header > h2,
.modal-header > h3,
.modal-header > div > h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--ux2p-ink);
}

.modal-footer {
    padding: 16px 24px;
    border-bottom-right-radius: 14px;
    border-bottom-left-radius: 14px;
}

/* Close (×) in a modal header — the same as the dialogs': neutral ring, pink + red on hover / focus.
   Covers Bootstrap's .btn-close and Metronic's icon button (both carry data-bs-dismiss="modal"). */
.modal-header [data-bs-dismiss="modal"] {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    background-color: transparent !important;
    border: 1px solid var(--ux2p-line) !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    opacity: 1;
    transition: background-color 0.12s var(--ux2p-ease), border-color 0.12s var(--ux2p-ease), color 0.12s var(--ux2p-ease);
}

.modal-header .btn-close[data-bs-dismiss="modal"] {
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%237e8299'%3E%3Cpath d='M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z'/%3E%3C/svg%3E") center / 11px no-repeat !important;
}

.modal-header [data-bs-dismiss="modal"] .svg-icon,
.modal-header [data-bs-dismiss="modal"] > i {
    color: var(--ux2p-muted) !important;
}

.modal-header [data-bs-dismiss="modal"]:hover,
.modal-header [data-bs-dismiss="modal"]:focus-visible {
    background-color: var(--ux2p-danger-soft) !important;
    border-color: var(--ux2p-danger) !important;
}

.modal-header .btn-close[data-bs-dismiss="modal"]:hover,
.modal-header .btn-close[data-bs-dismiss="modal"]:focus-visible {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23d9214e'%3E%3Cpath d='M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z'/%3E%3C/svg%3E") !important;
}

.modal-header [data-bs-dismiss="modal"]:hover .svg-icon,
.modal-header [data-bs-dismiss="modal"]:hover > i,
.modal-header [data-bs-dismiss="modal"]:focus-visible .svg-icon,
.modal-header [data-bs-dismiss="modal"]:focus-visible > i {
    color: var(--ux2p-danger) !important;
}

/* --- KTMenu dropdowns (Actions ▾, filters, header user menu) --- */
.menu-sub-dropdown {
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(16, 24, 40, 0.12), 0 0 0 1px rgba(16, 24, 40, 0.05);
}

/* `translate`, not `transform` or margin: Popper positions the menu with an inline transform */
.menu-sub-dropdown.show[data-popper-placement],
.show.menu-dropdown > .menu-sub-dropdown {
    animation: ux2p-pop 0.14s var(--ux2p-ease) !important;
}

.menu-sub-dropdown .menu-item .menu-link {
    border-radius: 6px;
}

.menu-sub-dropdown .menu-item .menu-link:hover:not(.disabled):not(.active),
.menu-sub-dropdown .menu-item.hover > .menu-link:not(.disabled):not(.active) {
    color: var(--ux2p-ink) !important;
    background-color: var(--ux2p-subtle) !important;
}

.menu-sub-dropdown .menu-item .menu-link:hover:not(.disabled):not(.active) .menu-title {
    color: var(--ux2p-ink) !important;
}

/* --- Bootstrap dropdowns --- */
.dropdown-menu {
    padding: 6px;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(16, 24, 40, 0.12), 0 0 0 1px rgba(16, 24, 40, 0.05);
}

.dropdown-menu.show {
    animation: ux2p-pop 0.14s var(--ux2p-ease);
}

.dropdown-item {
    padding: 8px 12px;
    font-size: 13.5px;
    color: var(--ux2p-ink-soft);
    border-radius: 6px;
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--ux2p-ink);
    background-color: var(--ux2p-subtle);
}

.dropdown-item.active,
.dropdown-item:active {
    color: #fff;
    background-color: var(--ux2p-brand);
}

@keyframes ux2p-pop {
    from { opacity: 0; translate: 0 -4px; }
    to { opacity: 1; translate: 0 0; }
}

/* --- Select2 (bootstrap5 theme) --- */
.select2-container--bootstrap5 .select2-dropdown {
    padding: 6px 0 !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 28px rgba(16, 24, 40, 0.12), 0 0 0 1px rgba(16, 24, 40, 0.05) !important;
}

.select2-container--bootstrap5 .select2-dropdown .select2-results__option {
    margin: 0 6px;
    padding: 9px 12px;
    font-size: 13.5px;
    color: var(--ux2p-ink-soft);
    border-radius: 6px;
}

/* Browsing (keyboard or mouse): the light brand tint */
.select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--highlighted {
    color: var(--ux2p-brand-dark);
    background-color: var(--ux2p-brand-soft);
}

/* Selected: brand text and a brand tick on the right, no fill (Metronic: a #009ef7 block behind a white tick) */
.select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--selected {
    padding-right: 34px;
    font-weight: 600;
    color: var(--ux2p-brand);
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231e5f69'%3E%3Cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E") !important;
    background-position: right 12px center !important;
    background-size: 14px 14px !important;
}

/* Selected and under the pointer: the same tint as any other option being browsed */
.select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--selected.select2-results__option--highlighted {
    background-color: var(--ux2p-brand-soft);
}

.select2-container--bootstrap5 .select2-dropdown .select2-search__field {
    border-radius: 8px;
}

.select2-container--bootstrap5 .select2-dropdown .select2-search__field:focus {
    border-color: var(--ux2p-brand) !important;
    box-shadow: 0 0 0 3px var(--ux2p-ring) !important;
}

.select2-container--bootstrap5 .select2-selection--multiple .select2-selection__choice {
    color: var(--ux2p-ink);
    background-color: var(--ux2p-subtle);
    border-radius: 6px;
}

/* ============================================
   6. KEYBOARD & SCREEN READERS (appjs/common/ux2/a11y.js)
   ============================================ */

/* "Skip to content" — off-screen until it gets keyboard focus (the first Tab stop on a page) */
.ux2-skip {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 3000;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #fff !important;
    background: var(--ux2p-brand);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(16, 24, 40, 0.2);
    transform: translateY(-160%);
    transition: transform 0.15s var(--ux2p-ease);
}

.ux2-skip:focus {
    transform: none;
    outline: 2px solid #fff !important;
    outline-offset: 2px;
}

/* The content area takes focus from the skip link — no ring around the whole page */
#kt_content:focus,
#kt_content:focus-visible {
    outline: none !important;
}

/* Screen-reader-only live regions (toasts, skoAnnounce) */
.ux2-live {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Reduced motion for everything, Metronic included (menus, drawers, accordions, collapses, blinking dots).
   Loading spinners keep turning — they mean "working", not decoration. Same rule when the a11y toolbar on
   the dashboards switches body.reduce-motion on.
   SweetAlert's popup is left out: on close it waits for an animation-end event whenever the popup has any
   animation OR transition time, and a 0.01ms transition here would leave it on screen forever. Its
   animation is switched off cleanly in the REDUCED MOTION block below instead. */
@media (prefers-reduced-motion: reduce) {
    *:not(.spinner-border):not(.spinner-grow):not(.fa-spin):not(.swal2-loader):not(.swal2-popup),
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

body.reduce-motion *:not(.spinner-border):not(.spinner-grow):not(.fa-spin):not(.swal2-loader):not(.swal2-popup),
body.reduce-motion *::before,
body.reduce-motion *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .swal2-container .swal2-popup.swal2-toast.swal2-show,
    .swal2-container .swal2-popup.swal2-toast.swal2-hide,
    .swal2-container .swal2-popup.swal2-show:not(.swal2-toast),
    .swal2-container .swal2-popup.swal2-hide:not(.swal2-toast),
    #toastr-container > .toastr,
    .menu-sub-dropdown.show[data-popper-placement],
    .show.menu-dropdown > .menu-sub-dropdown,
    .dropdown-menu.show {
        animation: none !important;
    }

    .modal.fade .modal-dialog {
        transition: none;
    }

    .form-check .form-check-input,
    .form-check-input {
        transition: none !important;
    }

    .form-check .form-check-input:active:not(:disabled) {
        transform: none;
    }

    .form-check .form-check-input:active:not(:disabled),
    .form-check.form-check-solid .form-check-input:not(:checked):active:not(:disabled),
    .form-check.form-switch .form-check-input:not(:checked):active:not(:disabled),
    .form-check.form-check-success .form-check-input:not(:checked):active:not(:disabled),
    .form-check .form-check-input:checked:active:not(:disabled) {
        box-shadow: none !important;
    }
}

/* Table search boxes are type="search", so password managers don't take them for login fields. The tables
   filter on keyup, which the browser's own clear (×) doesn't send: hide it (Backspace still clears) */
input[type="search"][data-kt-docs-table-filter]::-webkit-search-cancel-button,
input[type="search"][data-kt-docs-table-filter]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

/* ============================================
   7. CONNECTION BANNER (appjs/common/ux2/guard.js) — offline, server unreachable, back online.
      A dark pill at the top centre, over the header; replaces the old Offline.js bar.
   ============================================ */
.ux2-net {
    position: fixed;
    top: 12px;
    left: 50%;
    z-index: 2100; /* above the header, drawers and dialogs: the connection matters more than what's on screen */
    display: flex;
    gap: 8px;
    align-items: center;
    max-width: calc(100vw - 24px);
    padding: 8px 16px 8px 12px;
    font-size: 13px;
    line-height: 1.35;
    color: #fff;
    background: #1f2430;
    border-radius: 999px;
    box-shadow: 0 10px 28px rgba(16, 24, 40, 0.25);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.ux2-net.is-shown {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.ux2-net b {
    font-weight: 600;
    white-space: nowrap;
}

.ux2-net-sub {
    color: #c9ccd6;
}

.ux2-net-sub:empty {
    display: none;
}

.ux2-net-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    background: #f5a524; /* amber: offline */
    border-radius: 50%;
}

/* Waiting states pulse (still trying); "back online" ripples once (done) */
.ux2-net--offline .ux2-net-dot {
    animation: ux2-net-pulse 1.4s ease-in-out infinite;
}

.ux2-net--unreachable .ux2-net-dot {
    background: #f04438;
    animation: ux2-net-pulse 1.4s ease-in-out infinite;
}

.ux2-net--back .ux2-net-dot {
    background: #2fb36e;
    animation: ux2-net-ripple 0.9s ease-out 1;
}

@keyframes ux2-net-pulse {
    50% { opacity: 0.35; }
}

@keyframes ux2-net-ripple {
    from { box-shadow: 0 0 0 0 rgba(47, 179, 110, 0.6); }
    to { box-shadow: 0 0 0 9px rgba(47, 179, 110, 0); }
}

/* The old Offline.js bar (still linked on some pages until they're cleaned up): one indicator, not two */
.offline-ui {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .ux2-net {
        transition: none;
    }

    .ux2-net--offline .ux2-net-dot,
    .ux2-net--unreachable .ux2-net-dot,
    .ux2-net--back .ux2-net-dot {
        animation: none;
    }
}