/* Tailwind-backed interaction primitives used by the backoffice. */
.backoffice-shell .cms-ui-backdrop {
    position: fixed;
    inset: 0;
    z-index: 19999;
    display: block;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background: rgb(15 23 42 / 52%);
    transition: opacity var(--ds-motion-base) var(--ds-ease-standard), visibility var(--ds-motion-base) var(--ds-ease-standard);
}

.backoffice-shell .cms-ui-backdrop.show {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.backoffice-shell .cms-ui-backdrop.is-closing {
    visibility: visible;
    opacity: 0;
    pointer-events: none;
}

.backoffice-shell.cms-ui-modal-open {
    overflow: hidden;
}

.backoffice-shell.cms-ui-drawer-open { overflow: hidden; }

.backoffice-shell .ds-modal {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 16px;
    overflow-x: hidden;
    overflow-y: auto;
}

.backoffice-shell .ds-modal.show,
.backoffice-shell .ds-modal.is-open,
.backoffice-shell .ds-modal.is-closing {
    display: flex;
}

.backoffice-shell .ds-modal__dialog {
    will-change: transform, opacity;
    transform: translateY(8px) scale(.985);
    opacity: 0;
    transition: transform var(--ds-motion-base) var(--ds-ease-standard), opacity var(--ds-motion-base) var(--ds-ease-standard);
}

.backoffice-shell .ds-modal.show .ds-modal__dialog,
.backoffice-shell .ds-modal.is-open .ds-modal__dialog { transform: translateY(0) scale(1); opacity: 1; }
.backoffice-shell .ds-modal.is-closing .ds-modal__dialog { transform: translateY(8px) scale(.985); opacity: 0; }

/* Generic attribute hook for legacy pages migrating to the shared API. */
.backoffice-shell [data-ui-modal].is-closing { display: flex; }
.backoffice-shell [data-ui-modal].is-closing > .ds-modal__dialog,
.backoffice-shell [data-ui-modal].is-closing .ds-modal__dialog { transform: translateY(8px) scale(.985); opacity: 0; }

.backoffice-shell .ds-modal__dialog {
    position: relative;
    width: min(100%, 720px);
    max-height: calc(100vh - 32px);
    margin: 0 auto;
}

.backoffice-shell .ds-modal__panel {
    max-height: calc(100vh - 32px);
    overflow: auto;
    border: 1px solid var(--ds-color-border);
    border-radius: var(--ds-radius-overlay, 8px);
    background: var(--ds-color-surface);
    box-shadow: 0 20px 60px -20px rgb(23 26 54 / 45%);
}

.backoffice-shell .ds-modal__header,
.backoffice-shell .ds-modal__footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-color: var(--ds-color-border);
    background: var(--ds-color-surface);
}

.backoffice-shell .ds-modal__header { justify-content: space-between; border-bottom: 1px solid var(--ds-color-border); }
.backoffice-shell .ds-modal__footer { justify-content: flex-end; border-top: 1px solid var(--ds-color-border); }
.backoffice-shell .ds-modal__body { padding: 20px; }
.backoffice-shell .ds-modal__title { margin: 0; color: var(--ds-color-text); font-size: 16px; font-weight: 700; }
.backoffice-shell .ds-modal__header .ds-modal__close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0; padding: 0; border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-control); background: transparent; color: var(--ds-color-muted); font-size: 18px; opacity: 1; }

.backoffice-shell .ds-modal--lg .ds-modal__dialog { width: min(100%, 960px); }
.backoffice-shell .ds-modal--sm .ds-modal__dialog { width: min(100%, 420px); }

.backoffice-shell [data-ui-dropdown-open="true"],
.backoffice-shell .ds-dropdown__menu.show,
.backoffice-shell .ds-dropdown__menu.show,
.backoffice-shell .ds-dropdown.show > .ds-dropdown__menu,
.backoffice-shell .ds-dropdown.show > .ds-dropdown__menu { display: block; }

.backoffice-shell .ds-dropdown__menu,
.backoffice-shell .ds-dropdown__menu { display: none; }

.backoffice-shell .ds-dropdown__menu {
    opacity: 0;
    transform: translateY(-8px) scale(.985);
    transform-origin: top center;
    transition: opacity var(--ds-motion-fast) var(--ds-ease-standard), transform var(--ds-motion-fast) var(--ds-ease-standard);
}
.backoffice-shell .ds-dropdown__menu.show { opacity: 1; transform: translateY(0) scale(1); }

.backoffice-shell [data-ui-drawer],
.backoffice-shell .ds-drawer {
    transition: transform var(--ds-motion-slow) var(--ds-ease-standard), opacity var(--ds-motion-base) var(--ds-ease-standard);
}
.backoffice-shell [data-ui-drawer].is-closing,
.backoffice-shell .ds-drawer.is-closing { opacity: 0; }

.backoffice-shell .ds-toast-region {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 22000;
    display: grid;
    gap: 8px;
    width: min(360px, calc(100vw - 40px));
}
.backoffice-shell .ds-toast {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--ds-color-border);
    border-radius: var(--ds-radius-control);
    background: var(--ds-color-surface);
    color: var(--ds-color-text);
    box-shadow: var(--ds-shadow-card);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--ds-motion-base) var(--ds-ease-standard), transform var(--ds-motion-base) var(--ds-ease-standard);
}
.backoffice-shell .ds-toast.is-visible { opacity: 1; transform: translateY(0); }
.backoffice-shell .ds-toast__close { border: 0; background: transparent; color: var(--ds-color-muted); cursor: pointer; }
.backoffice-shell .ds-toast--success { border-color: var(--ds-color-success); }
.backoffice-shell .ds-toast--error { border-color: var(--ds-color-danger); }

.backoffice-shell .ds-alert {
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--ds-motion-base) var(--ds-ease-standard), transform var(--ds-motion-base) var(--ds-ease-standard);
}
.backoffice-shell .ds-alert.is-closing { opacity: 0; transform: translateY(-4px); }

.backoffice-shell .ds-tabs [data-ui-toggle="tab"] {
    position: relative;
    transition: color var(--ds-motion-fast) var(--ds-ease-standard), background-color var(--ds-motion-fast) var(--ds-ease-standard);
}
.backoffice-shell .ds-tabs [data-ui-toggle="tab"]::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--ds-color-primary);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--ds-motion-base) var(--ds-ease-standard);
}
.backoffice-shell .ds-tabs [data-ui-toggle="tab"].active::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
    .backoffice-shell .cms-ui-backdrop,
    .backoffice-shell .ds-modal__dialog,
    .backoffice-shell .ds-dropdown__menu,
    .backoffice-shell [data-ui-drawer],
    .backoffice-shell .ds-drawer,
    .backoffice-shell .ds-toast,
    .backoffice-shell .ds-alert,
    .backoffice-shell .ds-tabs [data-ui-toggle="tab"],
    .backoffice-shell .ds-tabs [data-ui-toggle="tab"]::after { transition-duration: 1ms !important; }
}

.backoffice-shell .ds-collapse:not(.show) { display: none; }
.backoffice-shell .ds-collapse.show { display: block; }


.backoffice-shell .ds-tab-panel:not(.active) { display: none; }
.backoffice-shell .ds-tab-panel.active { display: block; }

.backoffice-shell .cms-ui-popup {
    position: absolute;
    z-index: 21000;
    max-width: 280px;
    padding: 8px 10px;
    border: 1px solid var(--ds-color-border);
    border-radius: var(--ds-radius-control);
    background: var(--ds-color-text);
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
    box-shadow: var(--ds-shadow-card);
}

@media (max-width: 576px) {
    .backoffice-shell .ds-modal { padding: 10px; }
    .backoffice-shell .ds-modal__dialog,
    .backoffice-shell .ds-modal__panel { max-height: calc(100vh - 20px); }
    .backoffice-shell .ds-modal__header,
    .backoffice-shell .ds-modal__body,
    .backoffice-shell .ds-modal__footer { padding: 14px 16px; }
}