.performance-page { width: 100%; max-width: none; padding: 16px 24px 32px; margin: 0 auto; }
.performance-page h1 { margin: 0; font-size: 1.75rem; }
.performance-refresh-status { visibility: hidden; font-size: 0.8rem; color: #b6bdc5; }
.performance-refresh-status.is-refreshing { visibility: visible; }
.performance-loading { display: flex; align-items: center; gap: 10px; padding: 24px 0; color: #b6bdc5; }
.performance-filters { display: grid; grid-template-columns: minmax(140px, 1fr) repeat(2, minmax(0, 2fr)); gap: 16px; margin: 16px 0 24px; }
.performance-filters label { margin-bottom: 6px; font-size: 0.875rem; }
.performance-filters > div { min-width: 0; }
.performance-filters .form-select, .performance-filters .form-select option { color: #fff; background-color: #303030; }
.performance-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0 0 24px; }
.performance-stat { padding: 14px; border: 1px solid #ffffff18; border-radius: 6px; min-width: 0; }
.performance-stat dt { color: #b6bdc5; font-size: 0.8rem; font-weight: 400; }
.performance-stat dd { font-size: 1.45rem; margin: 4px 0 0; overflow-wrap: anywhere; }
.performance-stat small { display: block; font-size: 0.75rem; }
.performance-charts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.performance-chart { min-width: 0; border: 1px solid #ffffff18; border-radius: 6px; padding: 12px 8px 0; }
.performance-chart h2, .performance-section h2 { font-size: 1rem; margin: 0 8px 10px; }
.performance-section { margin: 24px 0; min-width: 0; }
.performance-measurements { margin: -12px 0 20px; }
.performance-measurements summary { cursor: pointer; width: fit-content; padding: 8px 0; }
.performance-measurements p { max-width: 48rem; margin: 4px 0; }
#performance-detail-tabs { margin-top: 24px; }
.performance-group-tools { display: grid; grid-template-columns: minmax(0, 2fr) minmax(180px, 1fr); gap: 12px; margin-bottom: 12px; }
.performance-group-tools > label { min-width: 0; margin: 0; }
.performance-group-tools .form-select, .performance-group-tools option,
#performance-history-page-size { color: #e5edf3; background: #303030; }
.performance-group-table-wrap { width: 100%; overflow-x: auto; }
.performance-group-table { width: 100%; min-width: 720px; }
.performance-group-table td:not(:first-child), .performance-group-table th:not(:first-child) { text-align: right; }
.performance-row-name { min-width: 13rem; }
.performance-running { display: block; color: #b6bdc5; }
.performance-no-matches { padding: 20px 0; }
.performance-section h2 { margin-left: 0; }
.performance-table td:first-child { max-width: 32rem; overflow-wrap: anywhere; }
.performance-table td:not(:first-child) { white-space: nowrap; }
.overview-tile-performance { grid-column: 1 / -1; }
.performance-overview-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.performance-overview-stats .performance-stat { padding: 8px 10px; }
.performance-overview-stats .performance-stat dd { font-size: 1.2rem; }
#performance-history-controls .pagination { flex-wrap: wrap; gap: 4px; }
#performance-history-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
#performance-history-page-size { width: 5rem; }
.performance-page:not(:has(.tab-pane.active #performance-history)) #performance-history-controls { display: none; }
/* The Engine section: the Syncing Engine's runs, freshness, backlog and nodes. */
.performance-engine { margin-top: 40px; padding-top: 24px; border-top: 1px solid #ffffff18; }
.performance-page #performance-engine-heading { font-size: 1.35rem; margin: 0 0 16px; }
.performance-engine-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.performance-engine-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.performance-chart h3 { font-size: 1rem; margin: 0 8px 10px; }
#performance-engine-tabs { margin-top: 24px; }
#performance-engine .tab-content { padding-top: 12px; }
#performance-engine .performance-table td.performance-engine-reason,
#performance-engine .performance-table td.performance-engine-parents { white-space: normal; min-width: 14rem; max-width: 28rem; }
.performance-engine-parents div + div { margin-top: 2px; }
.performance-engine-none { padding: 12px 0; }
@media (max-width: 1100px) { .performance-charts { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .performance-engine-charts { grid-template-columns: 1fr; } }
@media (max-width: 767.98px) {
    .performance-page { padding: 12px 16px 24px; }
    .performance-filters { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .performance-filters .form-select, .performance-filters .dash-dropdown-trigger { min-height: 44px; }
    .performance-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .performance-stat { padding: 10px; }
    .performance-stat dd { font-size: 1.2rem; }
    .performance-group-tools { grid-template-columns: minmax(0, 1fr); }
    .performance-group-tools input, .performance-group-tools select, #performance-history-page-size { min-height: 44px; }
    .performance-page .page-link { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
    .performance-page .pagination { flex-wrap: wrap; gap: 4px; }
    .performance-page .pagination .page-item { display: none; }
    .performance-page .pagination .page-item.active,
    .performance-page .pagination .page-item:first-child,
    .performance-page .pagination .page-item:nth-child(2),
    .performance-page .pagination .page-item:nth-last-child(2),
    .performance-page .pagination .page-item:last-child { display: list-item; }
    .performance-group-table-wrap, .performance-section .console-table-scroll { overflow: visible; }
    .performance-table { min-width: 0; display: block; margin-bottom: 16px; }
    .performance-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .performance-table tbody { display: grid; gap: 12px; width: 100%; }
    .performance-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px; border: 1px solid #ffffff20; border-radius: 8px; }
    .performance-table td, .performance-table td:not(:first-child) { display: block; min-width: 0; max-width: none; text-align: left; white-space: normal; padding: 0; border: 0; box-shadow: none; background: transparent; overflow-wrap: anywhere; }
    .performance-table td::before { content: attr(data-label); display: block; margin-bottom: 3px; color: #b6bdc5; font-size: 0.75rem; }
    .performance-group-table td:first-child { grid-column: 1 / -1; min-width: 0; }
    .performance-group-table td:first-child::before { display: none; }
    .performance-row-name a { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 0; }
    #performance-history .performance-table td:nth-child(2) { grid-column: 1 / -1; order: -1; font-weight: 600; }
    #performance-history .performance-table td:first-child { grid-column: 1 / -1; font-size: 0.85rem; }
    .performance-engine { margin-top: 32px; padding-top: 16px; }
    .performance-engine-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #performance-engine .performance-table td.performance-row-name { grid-column: 1 / -1; order: -1; font-weight: 600; }
    #performance-engine .performance-table td.performance-engine-reason,
    #performance-engine .performance-table td.performance-engine-parents { grid-column: 1 / -1; min-width: 0; max-width: none; }
    #performance-engine .performance-table td.performance-row-name a { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 0; }
    #performance-engine .performance-table td.performance-row-name::before { display: none; }
    #performance-engine .nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; }
    #performance-engine .nav-tabs .nav-link { min-height: 44px; padding: 8px 12px; white-space: nowrap; }
}