@use '../globals' as *;

// Universal runtime contract -------------------------------------------------
.presszone-international-admin,
#ipz-translate-metabox,
#ipz-modal-container {
    @include ipz-emit-admin-theme($ipz-admin-theme-light);
    --ipz-font: #{$presszone-international-font};
    --ipz-space-1: 4px;
    --ipz-space-2: 8px;
    --ipz-space-3: 12px;
    --ipz-space-4: 16px;
    --ipz-space-5: 20px;
    --ipz-space-6: 24px;
    --ipz-space-8: 32px;
    --ipz-radius-sm: 6px;
    --ipz-radius-md: 9px;
    --ipz-radius-lg: 12px;
    --ipz-control-radius: var(--ipz-radius-md);
    --ipz-control-height: 42px;
    color: var(--ipz-text);
    font-family: var(--ipz-font);
    font-size: 14px;
    line-height: 1.45;
}

body.dark-mode {
    .presszone-international-admin,
    #ipz-translate-metabox {
        @include ipz-emit-admin-theme($ipz-admin-theme-dark);
    }
}

body.dark-mode #ipz-modal-container {
    @include ipz-emit-admin-theme($ipz-admin-theme-dark);
}

.presszone-international-admin,
#ipz-translate-metabox,
#ipz-modal-container {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    [hidden] {
        display: none !important;
    }

    :where(button, a, input, select, textarea, summary):focus-visible {
        outline: 2px solid var(--ipz-focus);
        outline-offset: 2px;
    }

    :where(h1, h2, h3, h4, p) {
        overflow-wrap: anywhere;
    }
}

.presszone-international-scroll-locked {
    overflow: hidden;
}

// Dynamic values pass only through StyleContract.js -------------------------
.ipz-progress-bar__bar,
.ipz-progress-bar__fill,
[data-bulk-bar],
.ipz-ct-generating__progress-bar-fill:not(.ipz-ct-generating__progress-bar-fill--indeterminate) {
    width: var(--ipz-progress-value, 0%);
}

.ipz-dynamic-position {
    left: var(--ipz-position-x, 0);
    top: var(--ipz-position-y, 0);
}

.ipz-dynamic-grid {
    grid-template-columns: var(--ipz-grid-template-columns, minmax(0, 1fr));
}

.ipz-modal,
.international-modal {
    width: min(var(--ipz-modal-width, 640px), calc(100vw - 32px));
}

.ipz-table__column--sized {
    width: var(--ipz-table-column-width, auto);
}

.ipz-component-color {
    background-color: var(--ipz-component-color, transparent);
}

.ipz-dynamic-length {
    inline-size: var(--ipz-component-length, auto);
}

// WordPress host seam --------------------------------------------------------
.mpz-admin-page {
    margin: 0 0 0 -20px;
}

#ipz-admin-root {
    min-width: 0;
}

// Application frame ---------------------------------------------------------
.presszone-international-admin {
    display: grid;
    grid-template-columns: 238px minmax(0, 1fr);
    min-height: calc(100vh - 32px);
    background: var(--ipz-canvas);
    isolation: isolate;
}

.presszone-international-sidebar {
    position: sticky;
    top: 32px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: calc(100vh - 32px);
    overflow: hidden;
    color: var(--ipz-text);
    background: var(--ipz-surface);
    border-inline-end: 1px solid var(--ipz-border);
}

.presszone-international-sidebar__header {
    display: grid;
    gap: 2px;
    min-height: 82px;
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--ipz-border);
}

.presszone-international-sidebar__eyebrow {
    color: var(--ipz-text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.presszone-international-sidebar__title {
    margin: 0;
    color: var(--ipz-text);
    font-size: 18px;
    font-weight: 750;
    line-height: 1.2;
}

.presszone-international-sidebar__version {
    color: var(--ipz-text-muted);
    font-size: 11px;
}

.presszone-international-sidebar__nav {
    display: grid;
    gap: 3px;
    padding: 14px 10px;
    overflow: auto;
    scrollbar-width: thin;
}

.presszone-international-sidebar__link {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 42px;
    padding: 8px 12px;
    color: var(--ipz-text-muted);
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--ipz-radius-sm);
    transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease;

    &:hover {
        color: var(--ipz-text);
        background: var(--ipz-hover);
    }
}

.presszone-international-sidebar__link--active {
    color: var(--ipz-on-primary);
    background: linear-gradient(135deg, var(--ipz-primary), var(--ipz-primary-hover));
    box-shadow: 0 5px 14px color-mix(in srgb, var(--ipz-primary) 24%, transparent);

    &:hover {
        color: var(--ipz-on-primary);
        background: var(--ipz-primary-hover);
    }
}

.presszone-international-sidebar__icon {
    display: grid;
    place-items: center;
    inline-size: 24px;
    block-size: 24px;
    font-size: 16px;
    line-height: 1;
}

.presszone-international-sidebar__label {
    min-width: 0;
    font-weight: 550;
    white-space: nowrap;
}

.presszone-international-sidebar__collapse {
    display: flex;
    gap: 10px;
    align-items: center;
    min-height: 44px;
    margin: auto 10px 12px;
    padding: 8px 12px;
    color: var(--ipz-text-muted);
    background: transparent;
    border: 0;
    border-radius: var(--ipz-radius-sm);
    cursor: pointer;

    &:hover {
        color: var(--ipz-text);
        background: var(--ipz-hover);
    }
}

.presszone-international-admin--sidebar-collapsed {
    grid-template-columns: 76px minmax(0, 1fr);

    .presszone-international-sidebar__header {
        padding-inline: 10px;
        text-align: center;
    }

    .presszone-international-sidebar__eyebrow,
    .presszone-international-sidebar__title,
    .presszone-international-sidebar__label,
    .presszone-international-sidebar__collapse-label {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .presszone-international-sidebar__version {
        margin: auto;
    }

    .presszone-international-sidebar__link {
        grid-template-columns: 1fr;
        justify-items: center;
        padding-inline: 8px;
    }

    .presszone-international-sidebar__collapse {
        justify-content: center;
    }
}

.presszone-international-admin-main {
    min-width: 0;
    max-width: 100%;
    padding: 24px clamp(20px, 3vw, 40px) 48px;
    background: var(--ipz-canvas);
}

.presszone-international-hamburger,
.presszone-international-sidebar-overlay {
    display: none;
}

// Route heading and tabs -----------------------------------------------------
.ipz-app-frame__route-header,
.ipz-page-header,
.presszone-international-settings__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px 24px;
    align-items: start;
    margin: 0 0 20px;
    padding: 0 0 16px;
    color: var(--ipz-text);
    border-bottom: 1px solid var(--ipz-border);
}

.ipz-app-frame__route-heading {
    min-width: 0;

    h1 {
        margin: 0;
        color: var(--ipz-text);
        font-size: clamp(24px, 2.2vw, 30px);
        font-weight: 720;
        line-height: 1.2;
        letter-spacing: -.025em;
    }
}

.ipz-app-frame__route-description {
    max-width: 72ch;
    margin: 6px 0 0;
    color: var(--ipz-text-muted);
    font-size: 13px;
}

.ipz-app-frame__route-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.ipz-app-frame__route-tabs {
    grid-column: 1 / -1;
}

.presszone-international-tabs,
.ipz-tabs {
    display: flex;
    gap: clamp(6px, 2vw, 34px);
    align-items: end;
    max-width: 100%;
    margin: 0 0 20px;
    padding: 0 2px;
    overflow-x: auto;
    border-bottom: 1px solid var(--ipz-border);
    scrollbar-width: thin;
}

.presszone-international-tabs__item,
.ipz-tabs__item {
    position: relative;
    flex: 0 0 auto;
    min-height: 44px;
    padding: 10px 12px;
    color: var(--ipz-text-muted);
    font: inherit;
    font-weight: 600;
    background: transparent;
    border: 0;
    cursor: pointer;

    &::after {
        position: absolute;
        inset-inline: 0;
        inset-block-end: -1px;
        block-size: 2px;
        content: '';
        background: transparent;
    }

    &:hover {
        color: var(--ipz-text);
    }
}

.presszone-international-tabs__item--active,
.ipz-tabs__item--active,
.presszone-international-tabs__item[aria-selected='true'],
.ipz-tabs__item[aria-selected='true'] {
    color: var(--ipz-primary);

    &::after {
        background: var(--ipz-primary);
    }
}

.presszone-international-tabs__count,
.ipz-tabs__count {
    display: inline-flex;
    min-width: 22px;
    min-height: 20px;
    margin-inline-start: 6px;
    padding-inline: 6px;
    align-items: center;
    justify-content: center;
    color: var(--ipz-text-muted);
    font-size: 11px;
    background: var(--ipz-surface-subtle);
    border: 1px solid var(--ipz-border);
    border-radius: $presszone-international-radius-full;
}

// Surfaces -------------------------------------------------------------------
.presszone-international-settings-card,
.presszone-international-widget,
.presszone-international-stat-card,
.ipz-filters,
.ipz-notice,
.international-error-state,
.presszone-international-empty-state,
.international-empty-state,
.ipz-fields-translate__master,
.ipz-fields-translate__detail,
.international-data-region,
.international-data-region--table {
    color: var(--ipz-text);
    background: var(--ipz-surface);
    border: 1px solid var(--ipz-border);
    border-radius: var(--ipz-radius-lg);
    box-shadow: var(--ipz-shadow-soft);
}

.presszone-international-settings-card,
.presszone-international-widget,
.presszone-international-stat-card {
    overflow: hidden;
}

.presszone-international-settings-card__header {
    padding: 18px 20px 12px;
}

.presszone-international-settings-card__body {
    padding: 12px 20px 20px;
}

.presszone-international-admin {
    .presszone-international-settings-card__title,
    .presszone-international-widget__label,
    .presszone-international-stat-card__value,
    .presszone-international-stat-card__label,
    .presszone-international-empty-state__title,
    .international-empty-state__title,
    .international-error-state__title {
        color: var(--ipz-text);
    }

    .presszone-international-settings-card__desc,
    .presszone-international-widget__comparison,
    .presszone-international-stat-card__trend,
    .presszone-international-empty-state__description,
    .international-empty-state__description,
    .international-error-state__desc {
        color: var(--ipz-text-muted);
    }
}

// Controls -------------------------------------------------------------------
.presszone-international-admin,
#ipz-translate-metabox,
#ipz-modal-container {
    :where(
        input[type='text'],
        input[type='search'],
        input[type='email'],
        input[type='url'],
        input[type='number'],
        input[type='password'],
        select,
        textarea,
        .ipz-control
    ) {
        min-width: 0;
        min-height: var(--ipz-control-height);
        margin: 0;
        padding: 10px 14px;
        color: var(--ipz-text);
        font: inherit;
        line-height: 1.3;
        background-color: var(--ipz-surface);
        border: 1px solid color-mix(in srgb, var(--ipz-border-strong) 82%, transparent);
        border-radius: var(--ipz-control-radius);
        box-shadow: 0 1px 2px color-mix(in srgb, var(--ipz-text) 5%, transparent);
        transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;

        &::placeholder {
            color: color-mix(in srgb, var(--ipz-text-muted) 72%, transparent);
        }

        &:hover:not(:disabled) {
            border-color: color-mix(in srgb, var(--ipz-primary) 62%, var(--ipz-border-strong));
            background-color: color-mix(in srgb, var(--ipz-surface) 96%, var(--ipz-primary));
        }

        &:focus {
            border-color: var(--ipz-primary);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--ipz-primary) 14%, transparent);
            outline: 0;
        }

        &:disabled,
        &[aria-disabled='true'] {
            color: var(--ipz-text-muted);
            background: var(--ipz-surface-subtle);
            cursor: not-allowed;
            opacity: .72;
        }
    }

    select,
    .ipz-control--select {
        appearance: none;
        padding-inline-end: 36px;
        background-image: $ipz-select-chevron;
        background-repeat: no-repeat;
        background-position: calc(100% - 12px) 50%;
        background-size: 16px 16px;
        cursor: pointer;
    }

    textarea,
    .ipz-control--textarea {
        min-height: 100px;
        resize: vertical;
    }
}

[dir='rtl'] :where(.presszone-international-admin, #ipz-translate-metabox, #ipz-modal-container) :where(select, .ipz-control--select) {
    background-position: 18px 50%, 13px 50%;
}

.ipz-control--search,
.ipz-filter-group--search input {
    padding-inline-start: 40px !important;
    background-image: radial-gradient(circle, transparent 52%, var(--ipz-text-muted) 54%, var(--ipz-text-muted) 64%, transparent 66%), linear-gradient(45deg, transparent 44%, var(--ipz-text-muted) 45%, var(--ipz-text-muted) 55%, transparent 56%);
    background-repeat: no-repeat;
    background-position: 15px 50%, 24px calc(50% + 8px);
    background-size: 12px 12px, 7px 7px;
}

[dir='rtl'] .ipz-control--search,
[dir='rtl'] .ipz-filter-group--search input {
    padding-inline-start: 40px !important;
    background-position: calc(100% - 15px) 50%, calc(100% - 24px) calc(50% + 8px);
}

.ipz-search-control {
    position: relative;
    min-width: 0;

    .ipz-control--search {
        width: 100%;
        padding-inline-end: 34px !important;
    }

    &__clear {
        position: absolute;
        inset-inline-end: 8px;
        top: 50%;
        translate: 0 -50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 24px;
        height: 24px;
        padding: 0 4px;
        color: var(--ipz-text-muted);
        font-size: 16px;
        line-height: 1;
        background: transparent;
        border: 0;
        border-radius: var(--ipz-radius-sm);
        cursor: pointer;

        &:hover:not(:disabled) {
            color: var(--ipz-text);
        }

        &:focus-visible {
            outline: 2px solid var(--ipz-primary);
            outline-offset: 1px;
        }

        &:disabled {
            cursor: not-allowed;
            opacity: .6;
        }

        &[hidden] {
            display: none;
        }
    }
}

.ipz-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    color: var(--ipz-text-muted);
    line-height: 1;
    background: transparent;
    border: 0;
    border-radius: var(--ipz-radius-sm);
    cursor: pointer;
    transition: color 140ms ease, background-color 140ms ease;

    svg {
        display: block;
    }

    &:hover:not(:disabled) {
        color: var(--ipz-text);
        background: var(--ipz-surface-subtle);
    }

    &--danger {
        color: var(--ipz-danger);

        &:hover:not(:disabled) {
            color: var(--ipz-danger);
            background: var(--ipz-danger-soft);
        }
    }

    &:disabled {
        cursor: not-allowed;
        opacity: .5;
    }
}

.ipz-menu {
    position: relative;
    display: inline-flex;

    &__chevron {
        width: 0;
        height: 0;
        border-top: 4px solid currentcolor;
        border-inline: 4px solid transparent;
    }

    &__trigger--icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        min-width: 0;
        height: 30px;
        padding: 0;
    }

    // Vertical 3-dot glyph: the middle dot is the box itself, the outer two are
    // its pseudo-elements. Pure CSS keeps it inheriting currentcolor.
    &__glyph--kebab {
        position: relative;
        display: block;
        width: 3px;
        height: 3px;
        background: currentcolor;
        border-radius: 50%;

        &::before,
        &::after {
            position: absolute;
            inset-inline-start: 0;
            width: 3px;
            height: 3px;
            background: currentcolor;
            border-radius: 50%;
            content: '';
        }

        &::before {
            top: -5px;
        }

        &::after {
            top: 5px;
        }
    }

    &__list {
        position: absolute;
        inset-inline-end: 0;
        top: calc(100% + 4px);
        z-index: 20;
        display: grid;
        min-width: 190px;
        padding: 4px;
        background: var(--ipz-surface);
        border: 1px solid var(--ipz-border);
        border-radius: var(--ipz-radius-md);
        box-shadow: var(--ipz-shadow-soft);
    }

    &__item {
        padding: 8px 10px;
        color: var(--ipz-text);
        font: inherit;
        font-size: 13px;
        text-align: start;
        background: transparent;
        border: 0;
        border-radius: var(--ipz-radius-sm);
        cursor: pointer;

        &:hover:not(:disabled),
        &:focus-visible {
            background: var(--ipz-surface-subtle);
        }

        &--danger {
            color: var(--ipz-danger);
        }

        &:disabled {
            color: var(--ipz-text-muted);
            cursor: not-allowed;
        }
    }
}

.ipz-control-group,
.presszone-international-form-group,
.ipz-filter-group {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.ipz-control-group__label,
.presszone-international-label--settings,
.ipz-filter-label {
    margin: 0;
    color: var(--ipz-text-muted);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.25;
}

.ipz-control-group__help,
.presszone-international-form-help {
    margin: 0;
    color: var(--ipz-text-muted);
    font-size: 12px;
}

#ipz-modal-container {
    .ipz-modal__title,
    .presszone-international-label--settings,
    .presszone-international-form-group > label {
        color: var(--ipz-text);
    }

    .presszone-international-tooltip {
        color: var(--ipz-text-muted);
    }
}

.ipz-action-group,
.ipz-app-frame__route-actions,
.presszone-international-modal__actions,
.international-modal__actions,
.ipz-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.presszone-international-btn,
.presszone-international-button,
#ipz-translate-metabox .button,
#ipz-translate-metabox .button-primary {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    justify-content: center;
    min-height: var(--ipz-control-height);
    padding: 8px 15px;
    color: var(--ipz-on-primary);
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.2;
    text-decoration: none;
    text-shadow: none;
    white-space: nowrap;
    background: var(--ipz-primary);
    border: 1px solid var(--ipz-primary);
    border-radius: var(--ipz-radius-sm);
    box-shadow: none;
    cursor: pointer;
    transition: transform 120ms ease, color 140ms ease, background-color 140ms ease, border-color 140ms ease;

    &:hover:not(:disabled) {
        color: var(--ipz-on-primary);
        background: var(--ipz-primary-hover);
        border-color: var(--ipz-primary-hover);
    }

    &:active:not(:disabled) {
        transform: translateY(1px);
    }

    &:disabled,
    &[aria-disabled='true'] {
        cursor: not-allowed;
        opacity: .55;
    }
}

.presszone-international-btn--secondary,
.presszone-international-btn--ghost,
.presszone-international-button--secondary,
#ipz-translate-metabox .button:not(.button-primary) {
    color: var(--ipz-text);
    background: var(--ipz-surface);
    border-color: var(--ipz-border-strong);

    &:hover:not(:disabled) {
        color: var(--ipz-primary);
        background: var(--ipz-primary-soft);
        border-color: var(--ipz-primary);
    }
}

.presszone-international-btn--danger,
.ipz-bulk-confirm-btn--delete {
    color: var(--ipz-on-primary);
    background: var(--ipz-danger);
    border-color: var(--ipz-danger);

    &:hover:not(:disabled) {
        color: var(--ipz-on-primary);
        background: color-mix(in srgb, var(--ipz-danger) 86%, black);
        border-color: color-mix(in srgb, var(--ipz-danger) 86%, black);
    }
}

.presszone-international-btn--success {
    color: var(--ipz-on-primary);
    background: var(--ipz-success);
    border-color: var(--ipz-success);
}

.presszone-international-btn--sm,
#ipz-translate-metabox .button-small {
    min-height: 32px;
    padding: 6px 11px;
    font-size: 12px;
}

.presszone-international-btn--lg {
    min-height: 44px;
    padding: 10px 18px;
}

// Filter bar -----------------------------------------------------------------
.ipz-filters {
    margin: 0 0 20px;
    padding: 18px 20px;
}

.ipz-filters__row {
    display: grid;
    grid-template-columns: minmax(220px, 1.45fr) repeat(3, minmax(155px, 1fr)) auto;
    gap: 14px 18px;
    align-items: end;
}

.ipz-filter-group--actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
}

// Tables ---------------------------------------------------------------------
.presszone-international-table-wrapper,
.international-table-wrapper {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    background: var(--ipz-surface);
    border: 1px solid var(--ipz-border);
    border-radius: var(--ipz-radius-lg);
    box-shadow: var(--ipz-shadow-soft);
    scrollbar-width: thin;
    overscroll-behavior-inline: contain;
}

.presszone-international-table,
.international-table,
.international-skeleton-table {
    width: 100%;
    min-width: 680px;
    margin: 0;
    color: var(--ipz-text);
    font-size: 13px;
    border: 0;
    border-spacing: 0;
    border-collapse: separate;
    background: var(--ipz-surface);

    caption {
        text-align: start;
    }

    th,
    td {
        min-width: 0;
        padding: 11px 14px;
        text-align: start;
        vertical-align: middle;
        border: 0;
        border-bottom: 1px solid var(--ipz-border);
    }

    th {
        height: 48px;
        color: var(--ipz-text);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .005em;
        background: var(--ipz-surface-subtle);
        white-space: nowrap;
    }

    tbody tr:nth-child(odd) > td,
    tbody tr[data-row-parity='odd'] > td {
        background: var(--ipz-surface);
    }

    tbody tr:nth-child(even) > td,
    tbody tr[data-row-parity='even'] > td {
        background: var(--ipz-zebra);
    }

    tbody tr:hover > td {
        background: var(--ipz-hover);
    }

    tbody tr:focus-within > td {
        box-shadow: inset 0 0 0 1px var(--ipz-focus);
    }

    tbody tr:last-child > td {
        border-bottom: 0;
    }
}

.ipz-st-table-row--selected > td,
.presszone-international-table .ipz-st-table-row--selected > td,
.international-table .ipz-st-table-row--selected > td {
    background: var(--ipz-primary-soft);
}

.ipz-st-tab-check {
    color: var(--ipz-success);
}

.ipz-st-tab-check--failed {
    color: var(--ipz-danger);
}

.international-grid-table,
.presszone-international-grid-table {
    display: grid;
    min-width: 680px;
    color: var(--ipz-text);
    background: var(--ipz-surface);
}

.international-grid-table__cell {
    min-width: 0;
    padding: 11px 14px;
    border-bottom: 1px solid var(--ipz-border);
    background: var(--ipz-surface);
}

.international-grid-table__cell--header {
    color: var(--ipz-text);
    font-size: 12px;
    font-weight: 700;
    background: var(--ipz-surface-subtle);
}

.international-grid-table__cell[data-row-parity='even'] {
    background: var(--ipz-surface);
}

.international-grid-table__cell[data-row-parity='odd'] {
    background: var(--ipz-zebra);
}

.international-grid-table__cell[data-row]:hover,
.international-grid-table__cell[data-row]:focus-within {
    background: var(--ipz-hover);
}

// Checkbox and toggle --------------------------------------------------------
.presszone-international-checkbox {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    min-height: 20px;
    margin: 0;
    cursor: pointer;
}

.presszone-international-checkbox__input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
}

.presszone-international-checkbox__control {
    display: grid;
    place-items: center;
    inline-size: 18px;
    block-size: 18px;
    background: var(--ipz-surface);
    border: 1px solid var(--ipz-border-strong);
    border-radius: $presszone-international-radius-compact;
}

.presszone-international-checkbox__input:checked + .presszone-international-checkbox__control {
    color: var(--ipz-on-primary);
    background: var(--ipz-primary);
    border-color: var(--ipz-primary);

    &::after {
        inline-size: 8px;
        block-size: 4px;
        content: '';
        border-inline-start: 2px solid currentColor;
        border-block-end: 2px solid currentColor;
        transform: rotate(-45deg) translateY(-1px);
    }
}

.presszone-international-toggle {
    position: relative;
    inline-size: 40px;
    block-size: 22px;
    padding: 0;
    background: var(--ipz-border-strong);
    border: 0;
    border-radius: $presszone-international-radius-full;
    cursor: pointer;

    &::after {
        position: absolute;
        inset-block-start: 3px;
        inset-inline-start: 3px;
        inline-size: 16px;
        block-size: 16px;
        content: '';
        background: var(--ipz-surface);
        border-radius: 50%;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
        transition: transform 150ms ease;
    }
}

.presszone-international-toggle--active {
    background: var(--ipz-primary);

    &::after {
        transform: translateX(18px);
    }
}

[dir='rtl'] .presszone-international-toggle--active::after {
    transform: translateX(-18px);
}

// Badges and feedback --------------------------------------------------------
.ipz-badge,
.presszone-international-admin-badge {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
    width: max-content;
    max-width: 100%;
    min-height: 24px;
    padding: 3px 8px;
    color: var(--ipz-text-muted);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.2;
    background: var(--ipz-surface-subtle);
    border: 1px solid var(--ipz-border);
    border-radius: var(--ipz-radius-sm);
}

.ipz-badge--pill {
    border-radius: $presszone-international-radius-full;
}

.ipz-badge--primary,
.ipz-badge--info {
    color: var(--ipz-primary);
    background: var(--ipz-primary-soft);
    border-color: color-mix(in srgb, var(--ipz-primary) 24%, var(--ipz-border));
}

.ipz-badge--success {
    color: var(--ipz-success);
    background: var(--ipz-success-soft);
    border-color: color-mix(in srgb, var(--ipz-success) 26%, var(--ipz-border));
}

.ipz-badge--warning {
    color: var(--ipz-warning);
    background: var(--ipz-warning-soft);
    border-color: color-mix(in srgb, var(--ipz-warning) 26%, var(--ipz-border));
}

.ipz-badge--danger {
    color: var(--ipz-danger);
    background: var(--ipz-danger-soft);
    border-color: color-mix(in srgb, var(--ipz-danger) 26%, var(--ipz-border));
}

.ipz-notice {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    box-shadow: none;
}

.ipz-notice--success { border-inline-start: 4px solid var(--ipz-success); }
.ipz-notice--warning { border-inline-start: 4px solid var(--ipz-warning); }
.ipz-notice--error { border-inline-start: 4px solid var(--ipz-danger); }
.ipz-notice--info { border-inline-start: 4px solid var(--ipz-primary); }

// Native WordPress notice adapter. These notices render outside the SPA root,
// so they receive the same semantic token contract directly on the wrapper.
.presszone-international-notice {
    @include ipz-emit-admin-theme($ipz-admin-theme-light);
    box-sizing: border-box;
    padding: 4px 42px 4px 12px;
    color: var(--ipz-text);
    font-family: $presszone-international-font;
    background: var(--ipz-surface);
    border-color: var(--ipz-border);
    border-radius: $presszone-international-radius-sm;
    box-shadow: var(--ipz-shadow-soft);

    p {
        color: inherit;
        line-height: 1.5;
    }

    a:not(.button) {
        color: var(--ipz-primary);
    }

    &.notice-success { border-inline-start-color: var(--ipz-success); }
    &.notice-warning { border-inline-start-color: var(--ipz-warning); }
    &.notice-error { border-inline-start-color: var(--ipz-danger); }
    &.notice-info { border-inline-start-color: var(--ipz-primary); }

    .button,
    .button-primary {
        min-height: 34px;
        border-radius: $presszone-international-radius-xs;
    }

    .button-primary {
        color: var(--ipz-on-primary);
        background: var(--ipz-primary);
        border-color: var(--ipz-primary);

        &:hover,
        &:focus {
            color: var(--ipz-on-primary);
            background: var(--ipz-primary-hover);
            border-color: var(--ipz-primary-hover);
        }
    }
}

body.dark-mode .presszone-international-notice {
    @include ipz-emit-admin-theme($ipz-admin-theme-dark);
}

// Native WordPress integration adapters share the universal badge contract
// without requiring the SPA bundle on list-table screens.
.presszone-international-product-translations {
    @include ipz-emit-admin-theme($ipz-admin-theme-light);
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    max-width: 100%;
    font-family: $presszone-international-font;
}

.presszone-international-admin-badge--translation {
    color: var(--ipz-primary);
    background: var(--ipz-primary-soft);
    border-color: color-mix(in srgb, var(--ipz-primary) 24%, var(--ipz-border));
}

.presszone-international-admin-badge--muted {
    @include ipz-emit-admin-theme($ipz-admin-theme-light);
    color: var(--ipz-text-muted);
    font-family: $presszone-international-font;
}

body.dark-mode .presszone-international-product-translations,
body.dark-mode .presszone-international-admin-badge--muted {
    @include ipz-emit-admin-theme($ipz-admin-theme-dark);
}

// The hidden WordPress onboarding registration owns a small native loading
// shell outside the SPA mount. Keep it on the same frame/token contract.
.ipz-onboarding-wrap {
    @include ipz-emit-admin-theme($ipz-admin-theme-light);
    box-sizing: border-box;
    max-width: 1180px;
    margin: 20px 20px 0 0;
    color: var(--ipz-text);
    font-family: $presszone-international-font;

    > h1 {
        margin: 0 0 16px;
        color: var(--ipz-text);
        font-size: clamp(24px, 2vw, 32px);
        line-height: 1.2;
    }

    #ipz-wizard-app > p:only-child {
        margin: 0;
        padding: 24px;
        color: var(--ipz-text-muted);
        background: var(--ipz-surface);
        border: 1px solid var(--ipz-border);
        border-radius: var(--ipz-radius-lg);
        box-shadow: var(--ipz-shadow-soft);
    }
}

body.dark-mode .ipz-onboarding-wrap {
    @include ipz-emit-admin-theme($ipz-admin-theme-dark);
}

[dir='rtl'] .ipz-onboarding-wrap {
    margin-inline: 20px 0;
}

.presszone-international-empty-state,
.international-error-state,
.international-empty-state {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 28px 20px;
    text-align: center;
    box-shadow: none;
}

.presszone-international-empty-state__title,
.international-error-state__title {
    margin: 0;
    color: var(--ipz-text);
    font-size: 16px;
}

.presszone-international-empty-state__description,
.international-error-state__desc {
    max-width: 52ch;
    margin: 0;
    color: var(--ipz-text-muted);
}

// Progress and skeleton ------------------------------------------------------
.ipz-progress-bar__track,
.ipz-ct-generating__progress-bar,
.ipz-generate-all-progress__bar,
.ipz-bulk-progress-container__bar {
    position: relative;
    min-height: 8px;
    overflow: hidden;
    background: var(--ipz-border);
    border-radius: $presszone-international-radius-full;
}

.ipz-progress-bar__bar,
.ipz-progress-bar__fill,
[data-bulk-bar] {
    display: block;
    min-height: inherit;
    background: var(--ipz-primary);
    border-radius: inherit;
    transition: width 180ms ease;
}

// The bulk/generate progress mount points are painted as tracks above, so the
// ProgressBar component rendered inside them must not add its own bottom
// margin — otherwise the wrapper stays 16px taller than the fill and the bar
// reads as half height while progressing.
.ipz-bulk-progress-container__bar .ipz-progress-bar,
.ipz-generate-all-progress__bar .ipz-progress-bar {
    margin-bottom: 0;
}

.international-skeleton {
    background: linear-gradient(90deg, var(--ipz-surface-subtle), var(--ipz-border), var(--ipz-surface-subtle));
    background-size: 200% 100%;
}

// Modal and toast ------------------------------------------------------------
#ipz-modal-container {
    position: fixed;
    z-index: 100000;
    inset: 0;

    &[hidden] {
        display: none;
    }
}

.international-modal__overlay,
.ipz-modal-overlay,
.ipz-modal__overlay,
.presszone-international-modal-overlay {
    position: fixed;
    z-index: 100000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 16px;
    background: var(--ipz-modal-overlay);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.international-modal,
.ipz-modal,
.presszone-international-modal {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    max-height: calc(100vh - 32px);
    overflow: auto;
    color: var(--ipz-text);
    background: var(--ipz-surface-raised);
    border: 1px solid var(--ipz-border);
    border-radius: var(--ipz-radius-lg);
    box-shadow: var(--ipz-shadow);
}

.international-modal__header,
.ipz-modal__header,
.presszone-international-modal__header {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ipz-border);
}

.international-modal__title,
.ipz-modal__title,
.presszone-international-modal__title {
    margin: 0;
    color: var(--ipz-text);
    font-size: 18px;
    font-weight: 650;
}

.international-modal__close,
.ipz-modal__close,
.presszone-international-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    color: var(--ipz-text-muted);
    font-size: 22px;
    line-height: 1;
    background: transparent;
    border: 0;
    border-radius: var(--ipz-control-radius);
    cursor: pointer;

    &:hover {
        color: var(--ipz-text);
        background: var(--ipz-surface-subtle);
    }
}

.international-modal__content,
.ipz-modal__content,
.presszone-international-modal__content {
    padding: 20px;
}

.international-modal__actions,
.ipz-modal__actions,
.presszone-international-modal__actions {
    justify-content: flex-end;
    padding: 14px 20px;
    border-top: 1px solid var(--ipz-border);
}

// Shared disclosure ----------------------------------------------------------
.ipz-disclosure {
    min-width: 0;
    overflow: hidden;
    background: var(--ipz-surface);
    border: 1px solid var(--ipz-border);
    border-radius: var(--ipz-radius-md);
}

.ipz-disclosure__summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
    min-height: 40px;
    padding: 9px 12px;
    color: var(--ipz-text);
    font-weight: 650;
    cursor: pointer;
    list-style: none;

    &::-webkit-details-marker {
        display: none;
    }

    &:hover {
        background: var(--ipz-hover);
    }

    &[aria-disabled='true'] {
        cursor: default;
    }
}

.ipz-disclosure__meta {
    color: var(--ipz-text-muted);
    font-size: 11px;
    font-weight: 550;
}

.ipz-disclosure__chevron {
    display: block;
    inline-size: 7px;
    block-size: 7px;
    border-inline-end: 1.5px solid currentColor;
    border-block-end: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 140ms ease;
}

.ipz-disclosure[open] > .ipz-disclosure__summary .ipz-disclosure__chevron {
    transform: rotate(225deg);
}

.ipz-disclosure__content {
    padding: 10px;
    border-top: 1px solid var(--ipz-border);
}

// Fields master/detail -------------------------------------------------------
.ipz-fields-translate {
    min-width: 0;
}

.ipz-fields-translate__intro {
    margin-block-end: 18px;

    h2 {
        margin: 0;
        color: var(--ipz-text);
        font-size: 26px;
        line-height: 1.2;
    }

    p {
        margin: 6px 0 0;
        color: var(--ipz-text-muted);
    }
}

.ipz-fields-master-detail {
    display: grid;
    grid-template-columns: minmax(236px, 284px) minmax(0, 1fr);
    gap: 12px;
    min-width: 0;
    align-items: stretch;
}

.ipz-fields-translate__master,
.ipz-fields-translate__detail {
    min-width: 0;
    overflow: hidden;
    box-shadow: var(--ipz-shadow-soft);
}

.ipz-fields-translate__master {
    display: grid;
    grid-template-rows: auto auto minmax(260px, 1fr) auto;
    min-height: min(720px, calc(100vh - 180px));
    padding: 16px;
}

.ipz-fields-translate__detail {
    display: flex;
    flex-direction: column;
    padding: 16px 14px 0;
}

.ipz-fields-translate__pane-heading,
.ipz-fields-translate__detail-heading {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
}

.ipz-fields-translate__pane-heading {
    margin-block-end: 12px;

    h3 {
        margin: 0;
        font-size: 14px;
    }
}

.ipz-fields-translate__pane-count {
    display: inline-flex;
    min-width: 24px;
    min-height: 22px;
    align-items: center;
    justify-content: center;
    color: var(--ipz-text-muted);
    font-size: 11px;
    background: var(--ipz-surface-subtle);
    border: 1px solid var(--ipz-border);
    border-radius: $presszone-international-radius-full;
}

.ipz-fields-translate__group-search {
    margin-block-end: 12px;
}

.ipz-fields-translate__group-list {
    display: grid;
    align-content: start;
    gap: 3px;
    min-height: 0;
    max-height: 650px;
    margin: 0;
    padding: 2px;
    overflow: auto;
    list-style: none;
    scrollbar-width: thin;
}

.ipz-fields-translate__group-item {
    min-width: 0;
    margin: 0;
}

.ipz-selection-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: 9px 10px;
    color: var(--ipz-text);
    font: inherit;
    font-size: 12px;
    text-align: start;
    background: var(--ipz-surface);
    border: 1px solid var(--ipz-border);
    border-radius: var(--ipz-radius-sm);
    cursor: pointer;

    &:hover {
        background: var(--ipz-hover);
        border-color: var(--ipz-border-strong);
    }
}

.ipz-selection-card--selected {
    color: var(--ipz-primary);
    background: var(--ipz-primary-soft);
    border-color: var(--ipz-primary);
    box-shadow: inset 0 0 0 1px var(--ipz-primary);
}

.ipz-selection-card__number {
    font-weight: 700;
}

.ipz-selection-card__title {
    min-width: 0;
    color: var(--ipz-text);
    font-weight: 650;
    overflow-wrap: anywhere;
}

.ipz-selection-card__chevron {
    color: var(--ipz-primary);
    font-size: 20px;
    line-height: 1;
}

.ipz-fields-translate__group-footer {
    margin: 12px -16px -16px;
    padding: 12px 16px;
    color: var(--ipz-text-muted);
    font-size: 11px;
    text-align: center;
    border-top: 1px solid var(--ipz-border);
}

.ipz-fields-translate__detail-heading {
    padding: 0 2px 14px;

    h3 {
        margin: 2px 0 0;
        color: var(--ipz-text);
        font-size: 17px;
        line-height: 1.25;
    }
}

.ipz-fields-translate__eyebrow {
    margin: 0;
    color: var(--ipz-text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.ipz-fields-translate__group-key {
    display: block;
    margin-block-start: 3px;
    color: var(--ipz-text-muted);
    font: inherit;
    font-size: 11px;
}

.ipz-fields-translate__controls {
    display: grid;
    grid-template-columns: minmax(150px, 220px) minmax(200px, 1fr);
    gap: 12px;
    align-items: end;
    margin: 0 -14px;
    padding: 12px 14px;
    background: var(--ipz-surface-subtle);
    border-block: 1px solid var(--ipz-border);
}

.ipz-fields-translate__table-wrapper {
    flex: 1 1 auto;
    margin: 12px 0;
    border-radius: var(--ipz-radius-md);
    box-shadow: none;
}

.ipz-fields-translate__table {
    min-width: 720px;

    th,
    td {
        padding: 9px 10px;
    }
}

.ipz-fields-translate__name,
.ipz-fields-translate__setting {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.ipz-fields-translate__setting {
    min-width: 148px;
}

.ipz-fields-translate__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.ipz-fields-translate__key {
    color: var(--ipz-text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
    overflow-wrap: anywhere;
}

.ipz-fields-translate__nested,
.ipz-fields-translate__layout {
    margin-block-start: 4px;
    background: var(--ipz-surface-subtle);

    > .ipz-disclosure__summary {
        min-height: 34px;
        padding: 6px 8px;
        font-size: 11px;
    }

    > .ipz-disclosure__content {
        padding: 8px;
    }

    .ipz-fields-translate__table-wrapper {
        margin: 0;
    }
}

.ipz-fields-translate__layouts {
    display: grid;
    gap: 8px;
}

.ipz-fields-translate__empty-row td {
    padding: 24px;
    color: var(--ipz-text-muted);
    text-align: center;
}

.ipz-fields-translate__pagination {
    flex: 0 0 auto;
    margin: 0 -14px;
    border-top: 1px solid var(--ipz-border);
}

.ipz-pagination {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    min-height: 58px;
    padding: 10px 14px;
    color: var(--ipz-text-muted);
    font-size: 11px;
}

.ipz-pagination__controls {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
}

.ipz-pagination__size select {
    min-height: 32px !important;
    padding-block: 5px !important;
    font-size: 11px !important;
}

.ipz-fields-translate__state {
    display: grid;
    gap: 10px;
    margin: 12px 0;
}

.ipz-fields-translate__state-actions {
    display: flex;
    justify-content: flex-end;
}

.ipz-background-progress-hint {
    margin: 12px 0 0;
    color: var(--ipz-text-muted);
    font-size: 13px;
}

.ipz-background-progress-hint--centered {
    margin-block-start: 16px;
    text-align: center;
}

.ipz-tooltip-box--preformatted {
    white-space: pre;
}

// Editor metabox -------------------------------------------------------------
#ipz-translate-metabox {
    min-width: 0;
    color: var(--ipz-text);
    background: var(--ipz-surface);
}

#ipz-translate-metabox .presszone-international-editor-translation__heading {
    margin: 0 0 10px;
    color: var(--ipz-text);
    font-size: 14px;
}

#ipz-translate-metabox .presszone-international-editor-translation__notice,
#ipz-translate-metabox .presszone-international-editor-translation__empty,
#ipz-translate-metabox .presszone-international-editor-translation__error {
    margin: 8px 0;
    color: var(--ipz-text-muted);
    font-size: 12px;
}

#ipz-translate-metabox .presszone-international-editor-translation__error {
    color: var(--ipz-danger);
}

#ipz-translate-metabox .presszone-international-editor-translation__target {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid var(--ipz-border);
}

#ipz-translate-metabox .presszone-international-editor-translation__language {
    min-width: 0;
    color: var(--ipz-text);
    font-weight: 650;
    overflow-wrap: anywhere;
}

#ipz-translate-metabox .presszone-international-editor-translation__status {
    color: var(--ipz-text-muted);
    font-size: 11px;
}

#ipz-translate-metabox .presszone-international-editor-translation__target--translated .presszone-international-editor-translation__status {
    color: var(--ipz-success);
}

#ipz-translate-metabox .presszone-international-editor-translation__target--failed .presszone-international-editor-translation__status {
    color: var(--ipz-danger);
}

#ipz-translate-metabox .presszone-international-editor-translation__actions {
    display: inline-flex;
    gap: 4px;
    justify-content: flex-end;
}

#ipz-translate-metabox .presszone-international-editor-translation__target .presszone-international-editor-translation__error {
    grid-column: 1 / -1;
    margin: 0;
}

// Responsive / alternate modes ----------------------------------------------
@media (max-width: 1100px) {
    .ipz-filters__row {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }

    .ipz-filter-group--actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .ipz-fields-master-detail {
        grid-template-columns: minmax(210px, 250px) minmax(0, 1fr);
    }
}

@media (max-width: 900px) {
    .mpz-admin-page {
        margin-inline-start: -10px;
    }

    .presszone-international-admin,
    .presszone-international-admin--sidebar-collapsed {
        grid-template-columns: minmax(0, 1fr);
        min-height: calc(100vh - 46px);
    }

    .presszone-international-sidebar {
        position: fixed;
        z-index: 100000;
        inset-block: 46px 0;
        inset-inline-start: 0;
        width: min(280px, calc(100vw - 44px));
        height: auto;
        visibility: hidden;
        pointer-events: none;
        transform: translateX(-105%);
        transition: transform 180ms ease, visibility 180ms ease;
    }

    [dir='rtl'] .presszone-international-sidebar {
        transform: translateX(105%);
    }

    body.presszone-international-sidebar-open .presszone-international-sidebar {
        visibility: visible;
        pointer-events: auto;
        transform: translateX(0);
    }

    .presszone-international-hamburger {
        position: fixed;
        z-index: 100001;
        inset-block-start: 54px;
        inset-inline-start: 12px;
        display: grid;
        place-items: center;
        inline-size: 40px;
        block-size: 40px;
        padding: 0;
        color: var(--ipz-text);
        background: var(--ipz-surface);
        border: 1px solid var(--ipz-border);
        border-radius: var(--ipz-radius-sm);
        box-shadow: var(--ipz-shadow-soft);
    }

    .presszone-international-hamburger__bars,
    .presszone-international-hamburger__bars::before,
    .presszone-international-hamburger__bars::after {
        display: block;
        inline-size: 18px;
        block-size: 2px;
        content: '';
        background: currentColor;
        border-radius: $presszone-international-radius-hairline;
    }

    .presszone-international-hamburger__bars {
        position: relative;
    }

    .presszone-international-hamburger__bars::before {
        position: absolute;
        inset-block-start: -6px;
    }

    .presszone-international-hamburger__bars::after {
        position: absolute;
        inset-block-start: 6px;
    }

    .presszone-international-sidebar-overlay {
        position: fixed;
        z-index: 99999;
        inset: 0;
        display: block;
        visibility: hidden;
        padding: 0;
        background: var(--ipz-overlay);
        border: 0;
        opacity: 0;
        transition: opacity 180ms ease, visibility 180ms ease;
    }

    body.presszone-international-sidebar-open .presszone-international-sidebar-overlay {
        visibility: visible;
        opacity: 1;
    }

    .presszone-international-admin-main {
        padding: 72px 16px 36px;
    }

    .ipz-fields-master-detail {
        grid-template-columns: minmax(0, 1fr);
    }

    .ipz-fields-translate__master {
        min-height: 0;
    }

    .ipz-fields-translate__group-list {
        max-height: 330px;
    }
}

@media (max-width: 600px) {
    .presszone-international-admin-main {
        padding-inline: 12px;
    }

    .ipz-app-frame__route-header,
    .ipz-page-header,
    .presszone-international-settings__header {
        grid-template-columns: minmax(0, 1fr);
    }

    .ipz-app-frame__route-actions {
        justify-content: flex-start;
    }

    .ipz-filters__row,
    .ipz-fields-translate__controls {
        grid-template-columns: minmax(0, 1fr);
    }

    .ipz-pagination {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
    }

    .ipz-pagination__total {
        justify-self: start;
    }

    .ipz-pagination__size {
        justify-self: stretch;

        select {
            width: 100%;
        }
    }

    #ipz-translate-metabox .presszone-international-editor-translation__target {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    #ipz-translate-metabox .presszone-international-editor-translation__status {
        grid-column: 1;
    }

    #ipz-translate-metabox .presszone-international-editor-translation__actions {
        grid-column: 2;
        grid-row: 1 / span 2;
    }
}

@media (max-width: 360px) {
    .presszone-international-admin-main {
        padding-inline: 8px;
    }

    .ipz-fields-translate__master,
    .ipz-fields-translate__detail,
    .ipz-filters {
        border-radius: var(--ipz-radius-md);
    }

    .ipz-fields-translate__master {
        padding: 12px;
    }

    .ipz-fields-translate__group-footer {
        margin-inline: -12px;
        margin-block-end: -12px;
    }
}

[dir='rtl'] {
    .presszone-international-sidebar {
        border-inline-end: 1px solid var(--ipz-border);
    }

    .ipz-selection-card__chevron {
        transform: rotate(180deg);
    }

    .presszone-international-table th,
    .presszone-international-table td,
    .international-table th,
    .international-table td {
        text-align: start;
    }
}

@media (forced-colors: active) {
    .presszone-international-admin,
    #ipz-translate-metabox {
        --ipz-primary: LinkText;
        --ipz-primary-hover: LinkText;
        --ipz-focus: Highlight;
        --ipz-border: CanvasText;
        --ipz-border-strong: CanvasText;
        --ipz-surface: Canvas;
        --ipz-surface-subtle: Canvas;
        --ipz-canvas: Canvas;
        --ipz-text: CanvasText;
        --ipz-text-muted: CanvasText;
    }

    .presszone-international-admin :where(select, .ipz-control--select),
    #ipz-translate-metabox :where(select, .ipz-control--select),
    #ipz-modal-container :where(select, .ipz-control--select) {
        appearance: auto;
        background-image: none;
        padding-inline-end: 14px;
    }

    .presszone-international-sidebar__link--active,
    .presszone-international-btn,
    .presszone-international-checkbox__input:checked + .presszone-international-checkbox__control,
    .presszone-international-toggle--active {
        forced-color-adjust: none;
        color: HighlightText;
        background: Highlight;
        border-color: Highlight;
    }

    .presszone-international-table th,
    .presszone-international-table td,
    .international-table th,
    .international-table td,
    .ipz-selection-card,
    .ipz-disclosure {
        border-color: CanvasText;
    }
}

@media (prefers-reduced-motion: reduce) {
    .presszone-international-admin,
    #ipz-translate-metabox {
        *,
        *::before,
        *::after {
            scroll-behavior: auto !important;
            animation-duration: .01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: .01ms !important;
        }
    }
}