/*
 * UI v2 cross-page component polish.
 * Intentionally scoped to body.ui-v2; shell/navigation geometry remains owned by
 * the primary UI stylesheets.
 */

/* Keep component content shrinkable inside the existing shell/grid tracks. */
body.ui-v2 :where(.page, .panel, .panel-head, .page-header, .page-heading,
    .page-copy, .summary-grid, .mini-grid, .ops-summary-grid, .ticket-summary-grid,
    .summary-card, .stat-card, .mini-card, .ops-metric, .ticket-card,
    .toolbar-grid, .form-grid, .compact-form, .table-footer,
    .table-footer-group, .toast-copy) {
    min-width: 0;
}

/* Flash messages remain below the header/account layer and away from page actions. */
body.ui-v2.app-layout .content-shell > .toast-stack {
    top: auto;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1.25rem, env(safe-area-inset-bottom));
    width: min(24rem, calc(100vw - 2rem));
    max-height: calc(100dvh - 7.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    z-index: calc(var(--layer-header) - 1);
}

body.ui-v2 .toast-item {
    min-width: 0;
    border-inline-start-width: 0.3rem;
}

body.ui-v2 .toast-copy,
body.ui-v2 .toast-message {
    overflow-wrap: anywhere;
}

body.ui-v2 .toast-success {
    border-inline-start-color: hsl(var(--success));
    background: linear-gradient(90deg, hsl(var(--success-soft)), hsl(var(--card)) 42%);
}

body.ui-v2 .toast-warning {
    border-inline-start-color: hsl(var(--warning));
    background: linear-gradient(90deg, hsl(var(--warning-soft)), hsl(var(--card)) 42%);
}

body.ui-v2 .toast-error {
    border-inline-start-color: hsl(var(--destructive));
    background: linear-gradient(90deg, hsl(var(--rose-soft)), hsl(var(--card)) 42%);
}

/* In-flow status bands cannot cover adjacent controls and communicate state by more than color. */
body.ui-v2 :where(.content-alert, .flash, .page-note) {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    border-inline-start-width: 0.3rem;
    box-shadow: none;
}

body.ui-v2 :where(.content-alert, .flash, .page-note):not(.warning):not(.success):not(.error):not(.danger):not(.flash-warning):not(.flash-success):not(.flash-error) {
    border-inline-start-color: hsl(var(--info));
    background: linear-gradient(90deg, hsl(var(--info-soft)), hsl(var(--card)) 48%);
}

body.ui-v2 :where(.content-alert.warning, .flash-warning) {
    border-inline-start-color: hsl(var(--warning));
    background: linear-gradient(90deg, hsl(var(--warning-soft)), hsl(var(--card)) 48%);
}

body.ui-v2 :where(.content-alert.success, .flash-success) {
    border-color: hsl(var(--success) / 0.35);
    border-inline-start-color: hsl(var(--success));
    background: linear-gradient(90deg, hsl(var(--success-soft)), hsl(var(--card)) 48%);
}

body.ui-v2 :where(.content-alert.error, .content-alert.danger, .flash-error) {
    border-color: hsl(var(--destructive) / 0.35);
    border-inline-start-color: hsl(var(--destructive));
    background: linear-gradient(90deg, hsl(var(--rose-soft)), hsl(var(--card)) 48%);
}

/* Tables own their horizontal scroll region; the document never needs to. */
body.ui-v2 .table-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    scrollbar-width: auto;
    scrollbar-color: hsl(var(--muted-foreground) / 0.65) hsl(var(--muted) / 0.55);
}

body.ui-v2 .table-wrap::-webkit-scrollbar {
    height: 0.8rem;
}

body.ui-v2 .table-wrap::-webkit-scrollbar-track {
    background: hsl(var(--muted) / 0.55);
    border-radius: 999px;
}

body.ui-v2 .table-wrap::-webkit-scrollbar-thumb {
    min-width: 3rem;
    border: 0.2rem solid hsl(var(--muted) / 0.55);
    border-radius: 999px;
    background: hsl(var(--muted-foreground) / 0.65);
}

body.ui-v2 .table-wrap > table {
    min-width: 100%;
}

body.ui-v2 .table-wrap :where(th, td) {
    overflow-wrap: normal;
    word-break: normal;
}

body.ui-v2 .table-wrap :where(a, strong, .muted) {
    max-width: 100%;
}

/* Decorative card layers stay inside their own paint box. */
body.ui-v2 :where(.summary-card, .stat-card, .mini-card, .ops-metric, .quick-action-card) {
    position: relative;
    isolation: isolate;
    max-width: 100%;
    overflow: hidden;
    contain: paint;
}

body.ui-v2 :where(.summary-card, .stat-card, .mini-card, .ops-metric, .quick-action-card)::before,
body.ui-v2 :where(.summary-card, .stat-card, .mini-card, .ops-metric, .quick-action-card)::after {
    pointer-events: none;
}

body.ui-v2 :where(.summary-card-header, .ops-metric) > * {
    min-width: 0;
}

body.ui-v2 :where(.summary-card-value, .mini-card-value, .stat-value) {
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* Twelve-column forms retain usable controls instead of squeezing narrow tracks. */
body.ui-v2 :where(.toolbar-grid, .form-grid, .compact-form) {
    min-width: 0;
}

body.ui-v2 .toolbar-grid > *,
body.ui-v2 .form-grid > *,
body.ui-v2 .compact-form > * {
    min-width: 0;
}

body.ui-v2 :where(.input, .select, .textarea) {
    min-width: 0;
    max-width: 100%;
}

/* Compact action clusters wrap without forcing table/card width. */
body.ui-v2 :where(.page-actions, .panel-actions, .table-actions, .button-row,
    .ticket-actions, .ops-card-actions, .restart-batch-toolbar,
    .restart-batch-actions, .modal-actions, .form-actions, .inline-form,
    .pagination-group, .page-size-group) {
    min-width: 0;
    flex-wrap: wrap;
}

body.ui-v2 :where(.table-actions, .ticket-actions, .ops-card-actions) > * {
    max-width: 100%;
}

body.ui-v2 .table-actions .inline-form {
    width: auto;
}

/* Core component controls meet the WCAG target-size baseline. */
body.ui-v2 :where(.button, .toast-close, .modal-close, .dialog-close,
    .password-toggle, .page-size-button, .table-sort-button,
    .ticket-filter-tab, .restart-checkbox) {
    min-width: 44px;
    min-height: 44px;
}

body.ui-v2 .table-sort-button {
    justify-content: space-between;
    padding-block: 0.35rem;
}

body.ui-v2 :where(.restart-checkbox, input[type="checkbox"], input[type="radio"]) {
    accent-color: hsl(var(--primary));
}

@media (max-width: 900px) {
    body.ui-v2 .toolbar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.ui-v2 .toolbar-grid > [class*="field-span-"] {
        grid-column: span 1;
    }

    body.ui-v2 .toolbar-grid > :where(.field-span-8, .field-span-9, .field-span-12,
        .field-span-lg-9, .form-section-title) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    body.ui-v2.app-layout .content-shell > .toast-stack {
        top: auto;
        bottom: calc(5.35rem + env(safe-area-inset-bottom));
        left: max(0.6rem, env(safe-area-inset-left));
        right: max(0.6rem, env(safe-area-inset-right));
        width: auto;
        max-height: calc(100dvh - 10.5rem - env(safe-area-inset-bottom));
    }

    body.ui-v2 .toast-item {
        grid-template-columns: auto minmax(0, 1fr) auto;
        padding: 0.8rem;
    }

    body.ui-v2 .toolbar-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body.ui-v2 .toolbar-grid > [class*="field-span-"] {
        grid-column: 1 / -1;
    }

    body.ui-v2 :where(.page-actions, .panel-actions, .form-actions) {
        align-items: stretch;
    }

    body.ui-v2 :where(.page-actions, .panel-actions, .form-actions) > :where(.button, form),
    body.ui-v2 :where(.page-actions, .panel-actions, .form-actions) > form > .button {
        width: 100%;
    }

    body.ui-v2 .table-wrap > table {
        width: max-content;
        min-width: 100%;
    }

    body.ui-v2 .table-actions {
        min-width: 0;
        width: min(15rem, 72vw);
    }

    body.ui-v2 .table-actions > :where(.button, .inline-form) {
        flex: 1 1 auto;
    }

    body.ui-v2 .table-actions .inline-form > :where(.button, .select) {
        min-height: 44px;
    }

    body.ui-v2 :where(.summary-grid, .mini-grid, .ops-summary-grid, .ticket-summary-grid) {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.ui-v2 .table-wrap {
        scroll-behavior: auto;
    }
}