/* Modal styles extracted from style.css and centered vertically & horizontally */

.vexur-admin-ui-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65); /* closer to admin bar */
    backdrop-filter: none; /* simplify to match WP minimal style */
    z-index: 999999; /* above admin bar */
    display: flex;
    align-items: center; /* center vertically */
    justify-content: center; /* center horizontally */
    overflow-y: auto;
    padding: 20px;
}

.vexur-admin-ui-modal {
    width: 100%;
    max-width: 820px;
    background: #ffffff; /* light */
    color: #222222;
    border: 1px solid #e3e6e8;
    box-shadow: 0 12px 40px -4px rgba(0, 0, 0, 0.25), 0 4px 16px -2px rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    position: relative;
    display: flex;
    flex-direction: column;
    animation: vexur-admin-ui-fade-in .18s ease-out;
}

@keyframes vexur-admin-ui-fade-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.vexur-admin-ui-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid #e3e6e8;
    background: #f7f9fa;
}

.vexur-admin-ui-modal-title {
    font-size: 13px;
    letter-spacing: .5px;
    text-transform: uppercase;
    margin: 0;
    color: #1d2327;
}

.vexur-admin-ui-modal-close {
    background: transparent;
    border: none;
    color: #6b747b;
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    padding: 3px 4px;
    height: 25px;
    width: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.vexur-admin-ui-modal-close svg { display:block; }

.vexur-admin-ui-modal-close:hover {
    color: #1d2327;
    background: #e9edf0;
    border-radius: 4px;
}

.vexur-admin-ui-modal-notice {
    margin: 16px 16px 0;
    background: #eef8ff;
    color: #174766;
    padding: 10px 12px;
    border-radius: 3px;
    font-size: 12px;
    border: 1px solid #bee4ff;
}

.vexur-admin-ui-modal-notice.error {
    background: #ffecec;
    color: #7a1f1f;
    border-color: #ffb7b7;
}

.vexur-admin-ui-modal-notice.hidden {
    display: none;
}

.vexur-admin-ui-modal-sub {
    text-align: center;
    margin: 20px 20px 6px;
    font-size: 14px;
    color: #4a4f55;
}

.vexur-admin-ui-modal-form {
    padding: 6px 24px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}

.vexur-admin-ui-row {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}

.vexur-admin-ui-row-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: flex-end;
    justify-content: center;
}

.vexur-admin-ui-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vexur-admin-ui-label {
    width: 150px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #495057;
}

.vexur-admin-ui-field .vexur-admin-ui-label {
    width: auto;
    padding: 0;
    margin: 0;
}

.vexur-admin-ui-cond-select {
    min-width: 200px;
    background: #ffffff;
    color: #222;
    border: 1px solid #c7ccd1;
    border-radius: 4px;
    padding: 5px 8px;
    font-size: 13px;
    transition: border-color .15s, box-shadow .15s;
}

.vexur-admin-ui-field select.vexur-admin-ui-cond-select {
    min-width: 170px;
}

.vexur-admin-ui-cond-select:focus {
    outline: none;
    border-color: #00c716;
    box-shadow: 0 0 0 2px rgba(0, 199, 22, 0.25);
}

.vexur-admin-ui-modal-actions {
    display: flex;
    justify-content: flex-end; /* was center, now right aligned per requirement */
    gap: 10px;
    padding: 18px 16px 16px;
    border-top: 1px solid #e3e6e8;
    background: #f7f9fa;
    margin-top: 12px;
}

/* Saving state spinner adjusted left & vertically centered */
.vexur-admin-ui-btn-save.saving {
    position: relative;
    padding-left: 38px;
}

.vexur-admin-ui-btn-save.saving:after {
    content: "";
    position: absolute;
    left: 14px;
    top: 7px;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: vexur-admin-ui-spin .6s linear infinite;
}

/* Buttons */
.vexur-admin-ui-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    line-height: 1.2;
    text-decoration: none;
    background: #f2f5f7;
    color: #1d2327;
    transition: background .18s, box-shadow .18s, border-color .18s;
}

.vexur-admin-ui-btn:focus-visible {
    outline: 2px solid #00c716;
    outline-offset: 2px;
}

.vexur-admin-ui-btn-primary {
    background: #00c716;
    color: #ffffff;
    border-color: #00b013;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.vexur-admin-ui-btn-primary:hover {
    background: #00b013;
}

.vexur-admin-ui-btn-primary:active {
    background: #00920f;
}

.vexur-admin-ui-btn-secondary {
    background: #e9edf0;
    color: #1d2327;
    border-color: #d0d5d9;
}

.vexur-admin-ui-btn-secondary:hover {
    background: #dfe4e8;
}

.vexur-admin-ui-btn-secondary:active {
    background: #d2d8dd;
}

.vexur-admin-ui-btn[disabled], .vexur-admin-ui-btn.disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* Busy animation (custom, similar to WP .is-busy) */
@keyframes vexur-admin-ui-btn__busy-animation {
    0%{
        background-position:right 200px top 0;
    }
}
.vexur-admin-ui-btn.is-busy {
    background-image: linear-gradient(-45deg, #00c716 33%, #47e152 33% 33%, #47e152 70% 70%, #00c716 70%);
    background-size: 100px 100%;
    border-color: #00c716;
    color: #fff;
}
.vexur-admin-ui-btn.is-busy:disabled { opacity: 1; }
@media not (prefers-reduced-motion) {
    .vexur-admin-ui-btn.is-busy,
    .vexur-admin-ui-btn.is-busy:hover,
    .vexur-admin-ui-btn.is-busy:focus,
    .vexur-admin-ui-btn.is-busy:active {
        animation:vexur-admin-ui-btn__busy-animation 2.5s linear infinite;
    }
}

/* Hide spinner pseudo when busy to avoid clash */
.vexur-admin-ui-btn-save.is-busy:after { display:none; }

/* Custom dropdown component (replaces native select inside modal) */
.vexur-admin-ui-dropdown {
    position: relative;
    min-width: 170px;
    font-size: 13px;
}

.vexur-admin-ui-dropdown-toggle {
    width: 100%;
    text-align: left;
    background: #ffffff;
    color: #222;
    border: 1px solid #c7ccd1;
    border-radius: 4px;
    padding: 10px 30px 10px 10px;
    cursor: pointer;
    line-height: 1.3;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

.vexur-admin-ui-dropdown-toggle:focus {
    outline: none;
    border-color: #00c716;
    box-shadow: 0 0 0 2px rgba(0, 199, 22, 0.25);
}

.vexur-admin-ui-dropdown-caret {
    position: absolute;
    right: 10px;
    top: 50%;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #555;
    transform: translateY(-40%);
    pointer-events: none;
}

.vexur-admin-ui-dropdown.open .vexur-admin-ui-dropdown-caret {
    transform: translateY(-60%) rotate(180deg);
}

.vexur-admin-ui-dropdown-menu {
    list-style: none;
    margin: 4px 0 0 0;
    padding: 4px;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #ffffff;
    border: 1px solid #c7ccd1;
    border-radius: 4px;
    max-height: 220px;
    overflow-y: auto;
    box-shadow: 0 6px 18px -4px rgba(0, 0, 0, 0.15), 0 2px 6px -2px rgba(0, 0, 0, 0.12);
    display: none;
    z-index: 999999;
}

.vexur-admin-ui-dropdown.open .vexur-admin-ui-dropdown-menu {
    display: block;
}

.vexur-admin-ui-dropdown-item {
    padding: 6px 10px;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
}

.vexur-admin-ui-dropdown-item:hover, .vexur-admin-ui-dropdown-item:focus {
    background: #f0f4f6;
    outline: none;
}

.vexur-admin-ui-dropdown-item.selected {
    background: #00c716;
    color: #fff;
}

.vexur-admin-ui-dropdown-item.selected:hover {
    background: #00b013;
}

@media (max-width: 640px) {
    .vexur-admin-ui-label {
        width: 100%;
    }

    .vexur-admin-ui-cond-select {
        flex: 1;
    }

    .vexur-admin-ui-row {
        align-items: stretch;
    }

    .vexur-admin-ui-row-inline {
        flex-direction: column;
        align-items: stretch;
    }

    .vexur-admin-ui-field select.vexur-admin-ui-cond-select {
        width: 100%;
    }

    .vexur-admin-ui-modal-form {
        align-items: stretch;
    }

    .vexur-admin-ui-row-inline {
        justify-content: stretch;
    }
}

/*@media (prefers-color-scheme: dark) {
    .vexur-admin-ui-modal-overlay {
        background: rgba(0, 0, 0, 0.70);
    }

    .vexur-admin-ui-modal {
        background: #1f2327;
        color: #e5e8ea;
        border: 1px solid #2c3237;
        box-shadow: 0 12px 42px -6px rgba(0, 0, 0, 0.55), 0 4px 18px -2px rgba(0, 0, 0, 0.35);
    }

    .vexur-admin-ui-modal-header,
    .vexur-admin-ui-modal-actions {
        background: #242a2f;
        border-color: #2c3237;
    }

    .vexur-admin-ui-modal-title {
        color: #f0f2f3;
    }

    .vexur-admin-ui-modal-sub {
        color: #b5bcc1;
    }

    .vexur-admin-ui-label {
        color: #c0c7cc;
    }

    .vexur-admin-ui-cond-select {
        background: #2b3136;
        color: #f0f2f3;
        border: 1px solid #3a4248;
    }

    .vexur-admin-ui-cond-select:focus {
        border-color: #00c716;
        box-shadow: 0 0 0 2px rgba(0, 199, 22, 0.35);
    }

    .vexur-admin-ui-modal-close {
        color: #9aa3aa;
    }

    .vexur-admin-ui-modal-close:hover {
        color: #ffffff;
        background: #343c42;
    }

    !* Buttons *!
    .vexur-admin-ui-btn {
        background: #343c42;
        color: #f0f2f3;
        border-color: #3d464c;
    }

    .vexur-admin-ui-btn:not(.is-busy):hover {
        background: #3d464c;
    }

    .vexur-admin-ui-btn-secondary {
        background: #2b3339;
        color: #d7dcdf;
        border-color: #3a4248;
    }

    .vexur-admin-ui-btn-secondary:hover {
        background: #343c42;
    }

    .vexur-admin-ui-btn-primary {
        background: #00c716;
        color: #ffffff;
        border-color: #00b013;
    }

    .vexur-admin-ui-btn-primary:not(.is-busy):hover {
        background: #00b013;
    }

    .vexur-admin-ui-btn-primary:not(.is-busy):active {
        background: #00920f;
    }

    .vexur-admin-ui-btn-save.saving:after {
        border: 2px solid rgba(255, 255, 255, 0.35);
        border-top-color: #ffffff;
    }

    !* Custom dropdown component (replaces native select inside modal) *!
    .vexur-admin-ui-dropdown-toggle {
        background: #2b3136;
        color: #f0f2f3;
        border: 1px solid #3a4248;
    }

    .vexur-admin-ui-dropdown-toggle:focus {
        border-color: #00c716;
        box-shadow: 0 0 0 2px rgba(0, 199, 22, 0.35);
    }

    .vexur-admin-ui-dropdown-caret {
        border-top-color: #ccc;
    }

    .vexur-admin-ui-dropdown-menu {
        background: #2b3136;
        border: 1px solid #3a4248;
        box-shadow: 0 8px 22px -6px rgba(0, 0, 0, 0.55), 0 3px 10px -3px rgba(0, 0, 0, 0.4);
    }

    .vexur-admin-ui-dropdown-item {
        color: #f0f2f3;
    }

    .vexur-admin-ui-dropdown-item:hover, .vexur-admin-ui-dropdown-item:focus {
        background: #3a4248;
    }

    .vexur-admin-ui-dropdown-item.selected {
        background: #00c716;
        color: #ffffff;
    }

    .vexur-admin-ui-dropdown-item.selected:hover {
        background: #00b013;
    }
}*/

/* Force light theme for WP Admin regardless of user prefers-color-scheme */
/*body.wp-admin .vexur-admin-ui-modal-overlay { background: rgba(0,0,0,0.65); }
body.wp-admin .vexur-admin-ui-modal { background:#ffffff; color:#222222; border:1px solid #e3e6e8; box-shadow:0 12px 40px -4px rgba(0,0,0,0.25),0 4px 16px -2px rgba(0,0,0,0.12); }
body.wp-admin .vexur-admin-ui-modal-header,
body.wp-admin .vexur-admin-ui-modal-actions { background:#f7f9fa; border-color:#e3e6e8; }
body.wp-admin .vexur-admin-ui-modal-title { color:#1d2327; }
body.wp-admin .vexur-admin-ui-modal-sub { color:#4a4f55; }
body.wp-admin .vexur-admin-ui-label { color:#495057; }
body.wp-admin .vexur-admin-ui-cond-select { background:#ffffff; color:#222; border:1px solid #c7ccd1; }
body.wp-admin .vexur-admin-ui-modal-close { color:#6b747b; }
body.wp-admin .vexur-admin-ui-modal-close:hover { color:#1d2327; background:#e9edf0; }
body.wp-admin .vexur-admin-ui-btn { background:#f2f5f7; color:#1d2327; border-color:transparent; }
body.wp-admin .vexur-admin-ui-btn:not(.is-busy):hover { background:#e9edf0; }
body.wp-admin .vexur-admin-ui-btn-secondary { background:#e9edf0; color:#1d2327; border-color:#d0d5d9; }
body.wp-admin .vexur-admin-ui-btn-secondary:hover { background:#dfe4e8; }
body.wp-admin .vexur-admin-ui-btn-primary { background:#00c716; color:#ffffff; border-color:#00b013; }
body.wp-admin .vexur-admin-ui-btn-primary:not(.is-busy):hover { background:#00b013; }
body.wp-admin .vexur-admin-ui-btn-primary:not(.is-busy):active { background:#00920f; }
body.wp-admin .vexur-admin-ui-dropdown-toggle { background:#ffffff; color:#222; border:1px solid #c7ccd1; }
body.wp-admin .vexur-admin-ui-dropdown-menu { background:#ffffff; border:1px solid #c7ccd1; }
body.wp-admin .vexur-admin-ui-dropdown-item { color:#222; }
body.wp-admin .vexur-admin-ui-dropdown-item:hover,
body.wp-admin .vexur-admin-ui-dropdown-item:focus { background:#f0f4f6; }
body.wp-admin .vexur-admin-ui-dropdown-item.selected { background:#00c716; color:#fff; }*/