/*
 * RC1 rendering-performance safeguards.
 *
 * The application contains several large dashboards with wide tables. Chromium
 * browsers become noticeably less responsive when multiple sticky layers,
 * backdrop blur and horizontally scrolling tables are composited at once.
 * Keep the UI intact, but avoid those expensive combinations.
 */

html {
    scroll-behavior: auto;
}

.content,
.stack,
.table-wrapper,
.workspace-shell,
.workspace-planning-focus {
    min-width: 0;
}

/* A blurred sticky toolbar forces a large backdrop repaint on every scroll. */
.topbar {
    background: var(--surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Do not stack additional sticky toolbars below the sticky topbar. */
.workspace-tabs,
.planning-toolbar {
    position: relative !important;
    top: auto !important;
}

/*
 * Sticky TH elements inside overflow-x containers are a common source of
 * compositor churn. Sorting and column filtering remain fully available; only
 * the sticky positioning is removed.
 */
.workspace-planning-table thead th,
.workspace-enhanced-table thead th,
.workspace-column-filter-row th {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
}

/* The gantt already has its own horizontal scroll surface; nested sticky rows
   and columns add compositor layers without adding core functionality. */
.rollout-gantt__corner,
.rollout-gantt__label,
.rollout-gantt__timeline-header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
}

.table-wrapper,
.workspace-planning-table,
.table-scroll,
.table-responsive,
.command-timeline,
.rollout-gantt__scroll {
    max-width: 100%;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

/* Use one horizontal scroll surface for the historical chart instead of a
   clipped parent plus a second overflow layer. */
.historical-weeks {
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
}

.historical-weeks__chart {
    overflow: visible;
}

/* Keep elevation, but reduce the paint area of very large soft shadows. */
.panel,
.card,
.workspace-card,
.command-center,
.workspace-kpi {
    box-shadow: 0 4px 14px rgba(23, 32, 51, .06);
}

:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .workspace-card,
:root[data-theme="dark"] .command-center,
:root[data-theme="dark"] .workspace-kpi {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

/*
 * Project Workspace paint hardening.
 *
 * The large blue hero becomes very tall on mobile. The original radial gradient,
 * full-surface grid overlay, wide shadow and translucent child layers forced a
 * large composited area to be repainted while crossing from the hero into the
 * workspace controls/KPIs. Keep the visual hierarchy and blue identity, but use
 * opaque, low-paint surfaces for this operational screen.
 */
.workspace-hero {
    background: #0a2b5b !important;
    box-shadow: none !important;
}

.workspace-hero::after,
.workspace-kpi::after {
    display: none !important;
}

.workspace-chip,
.workspace-action {
    background: #1a4477 !important;
}

.workspace-action--primary {
    background: #ffffff !important;
    color: #10376c !important;
}

.workspace-hero__summary {
    background: #08234d !important;
}

.workspace-summary-item {
    background: #173962 !important;
}

.workspace-chip--status::before {
    box-shadow: none !important;
}

.workspace-progress__bar {
    background: #5de093 !important;
}

.workspace-tabs,
.workspace-kpi {
    box-shadow: none !important;
}

/*
 * Chromium can skip layout/paint for large sections outside the viewport.
 * contain-intrinsic-size reserves a stable estimate so activating a section
 * does not make the scroll position jump.
 */
@supports (content-visibility: auto) {
    .management-dashboard > .panel,
    .management-dashboard > .historical-weeks,
    .project-cockpit > .panel,
    .project-cockpit > .grid,
    .workspace-shell > .workspace-card,
    .workspace-shell > .command-center,
    .workspace-shell > .workspace-operations,
    .workspace-shell > .workspace-collapsible,
    .workspace-planning-focus > .panel {
        content-visibility: auto;
        contain-intrinsic-size: auto 420px;
    }

    .management-dashboard > .table-wrapper,
    #project-vkst,
    #project-waves,
    #rollout-gantt {
        contain-intrinsic-size: auto 640px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
    }
}