:root {
    --app-bp-sm: 640px;
    --app-bp-md: 768px;
    --app-bp-lg: 1024px;
    --app-page-max-width: 1360px;
    --app-page-gap: 1rem;
    --app-touch-min: 44px;
}

/* Alias so leftover wrappers still pick up the shared shell. */
.app-page-shell,
.xx-page-shell {
    width: 100%;
    max-width: var(--app-page-max-width);
    margin: 0 auto;
    min-width: 0;
}

.app-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.app-page-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.app-page-title-icon {
    font-size: 1.6rem;
    color: var(--rz-primary);
    flex-shrink: 0;
}

.app-page-title-text {
    min-width: 0;
}

.app-page-title {
    margin: 0;
    font-weight: 700;
    line-height: 1.2;
}

.app-page-subtitle {
    margin: 0;
    opacity: 0.6;
}

.app-page-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.app-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.app-toolbar-card {
    margin-bottom: 1rem;
    padding: 0.65rem 1rem;
    border-radius: 8px;
}

.app-filter-field {
    width: 220px;
    min-width: 0;
    max-width: 100%;
}

.rz-dropdown.app-filter-field,
.rz-textbox.app-filter-field,
.rz-form-field.app-filter-field {
    width: 220px;
    max-width: 100%;
}

.app-filter-field-grow {
    min-width: 12rem;
    flex: 1 1 16rem;
    max-width: 100%;
}

.app-grid-card {
    padding: 0;
    border-radius: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.app-grid-host {
    margin: 0;
    padding-bottom: 5px;
}

.app-loading-card {
    padding: 2rem;
    text-align: center;
    border-radius: 8px;
}

.app-dialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    overflow: auto;
}

.app-dialog {
    width: 520px;
    max-width: 100%;
    max-height: min(90dvh, 90vh);
    overflow: auto;
    padding: 1.5rem;
    border-radius: 12px;
}

.app-dialog-wide {
    width: 980px;
}

.app-dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.app-dialog-title {
    margin: 0;
    font-weight: 700;
}

.app-dialog-subtitle {
    margin: 0.25rem 0 0;
    opacity: 0.7;
}

.app-dialog-actions {
    flex-wrap: wrap;
}

.rz-tooltip {
    z-index: 2000;
}

.app-audit-diff-row {
    display: grid;
    grid-template-columns: minmax(160px, 220px) 1fr 1fr;
    gap: 0.75rem;
    align-items: start;
    padding: 0.7rem 0.75rem;
    border-radius: 8px;
    background: var(--rz-card-background-color);
    border: 1px solid var(--rz-border-disabled-color);
}

.app-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.rz-data-grid.scs-common-grid {
    height: 600px;
    width: 100%;
}

@media (max-width: 767px) {
    .app-page-header,
    .app-page-header-actions,
    .app-toolbar,
    .app-dialog-header {
        width: 100%;
    }

    .app-filter-field,
    .app-filter-field-grow,
    .app-toolbar .rz-form-field,
    .app-toolbar .rz-dropdown,
    .app-toolbar .rz-textbox,
    .app-toolbar .rz-datepicker {
        width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 100%;
    }

    .app-toolbar .rz-button,
    .app-page-header-actions .rz-button,
    .app-dialog-actions .rz-button,
    .app-card-actions .rz-button {
        min-height: var(--app-touch-min);
    }

    .app-dialog-actions {
        flex-direction: column-reverse !important;
        align-items: stretch !important;
    }

    .app-dialog-actions .rz-button {
        width: 100%;
    }

    .app-dialog {
        width: 100%;
        max-height: min(92dvh, 92vh);
        padding: 1rem;
    }

    .app-audit-diff-row {
        grid-template-columns: 1fr;
    }

    .rz-data-grid.scs-common-grid {
        height: min(70dvh, 480px);
    }

    /* Host header lives in child components; keep these rules global. */
    .header-user-name,
    .app-header-theme,
    .pwa-install-btn .rz-button-text {
        display: none !important;
    }
}

/* Payout request workbench */
.payout-workbench { display: grid; gap: 1rem; min-width: 0; }
.payout-workbench .rz-column, .payout-panel { min-width: 0; }
.payout-account-select { flex: 1 1 20rem; min-width: 0; }
.payout-environment { padding: .3rem .7rem; border-radius: 1rem; font-weight: 700; background: var(--rz-info-lighter, #e0f2fe); color: var(--rz-info-dark, #075985); }
.payout-environment-live { background: var(--rz-warning-lighter, #fef3c7); color: var(--rz-warning-dark, #92400e); }
.payout-request-bar { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.payout-http-method { font-weight: 800; color: var(--rz-success, #16803c); }
.payout-request-url { flex: 1; min-width: 0; font-family: var(--rz-font-family-monospace, monospace); }
.payout-panel { height: 100%; }
.payout-panel-heading { font-size: 1rem; font-weight: 700; padding-bottom: .75rem; }
.payout-workbench .rz-tabview-nav { overflow-x: auto; flex-wrap: nowrap; }
.payout-content-type, .payout-field-hint { color: var(--rz-text-secondary-color); font-size: .8rem; overflow-wrap: anywhere; }
.payout-form-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid var(--rz-base-200, #e5e7eb); overflow-wrap: anywhere; }
.payout-form-row > .rz-textbox, .payout-form-row > .rz-numeric, .payout-form-row > .rz-dropdown { width: 100%; min-width: 0; }
.payout-form-row label { font-family: var(--rz-font-family-monospace, monospace); font-size: .8rem; }
.payout-code { margin: 0; padding: 1rem; min-height: 18rem; max-height: 35rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--rz-base-100, #f8fafc); color: var(--rz-text-color); font-family: var(--rz-font-family-monospace, monospace); font-size: .8rem; }
.payout-response-empty { min-height: 18rem; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--rz-text-secondary-color); }
.payout-response-meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; font-size: .85rem; }
.payout-response-status { font-weight: 700; }
.payout-response-ok { color: var(--rz-success, #16803c); }
.payout-response-failed { color: var(--rz-danger, #dc2626); }
@media (max-width: 575.98px) {
    .payout-form-row { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
    .payout-request-bar { flex-wrap: wrap; }
    .payout-request-url { flex-basis: 75%; }
    .payout-code { min-height: 12rem; }
}