.summaryPanel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); } .summaryScrollArea { min-width: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-gutter: stable; -webkit-overflow-scrolling: touch; } .summaryContent { display: grid; min-width: max-content; gap: var(--space-3); } .summaryHeader { display: inline-flex; min-width: 0; align-items: center; gap: var(--space-2); } .summaryActions { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: var(--space-2); align-self: stretch; padding-left: var(--space-3); border-left: 1px solid var(--border); background: var(--bg-card); white-space: nowrap; } .summaryItems { display: flex; min-width: 0; align-items: center; gap: var(--space-5); } .summaryItem { display: inline-flex; min-width: 0; align-items: center; gap: var(--space-2); } .summaryLabel { flex: 0 0 auto; overflow: hidden; color: var(--text-tertiary); font-size: var(--admin-font-size); font-weight: 650; line-height: var(--admin-line-height); text-overflow: ellipsis; white-space: nowrap; } .summaryValue { display: inline-flex; min-width: 0; align-items: center; overflow: hidden; color: var(--text-primary); font-weight: 700; line-height: var(--admin-line-height); text-overflow: ellipsis; white-space: nowrap; } .filterInput { width: 220px; } .poolSelector { width: 160px; } .configDrawer { box-sizing: border-box; width: min(960px, calc(100vw - 16px)); max-width: 100vw; overflow-x: hidden; } .configGrid { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } .configGrid > * { min-width: 0; } .configGrid > :global(.MuiTextField-root), .configGrid > :global(.MuiFormControl-root), .configGrid > :global(.MuiAutocomplete-root) { width: 100%; } .configWide { grid-column: 1 / -1; } .fieldLabel { display: inline-flex; max-width: 100%; align-items: center; gap: 4px; overflow: hidden; vertical-align: middle; } .helpIcon { flex: 0 0 auto; color: var(--text-tertiary); font-size: 15px; } .switchField { display: flex; min-height: var(--control-height); align-items: center; justify-content: space-between; gap: var(--space-3); padding: 0 var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--bg-card); } .subsidyBlock { display: grid; min-width: 0; grid-column: 1 / -1; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border-soft); border-radius: var(--radius-control); background: var(--bg-card-strong); } .subsidyToggle { padding: 0; border: 0; background: transparent; } .subsidyInputs { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } .subsidyInputs > :global(.MuiTextField-root) { width: 100%; } .multiplierBlock { display: grid; min-width: 0; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border-soft); border-radius: var(--radius-control); background: var(--bg-card-strong); } .multiplierHeader { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: var(--space-3); } .multiplierList { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); } .multiplierRow { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-1); } .stageStack { display: grid; min-width: 0; gap: var(--space-3); } .stageBlock { display: grid; min-width: 0; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border-soft); border-radius: var(--radius-control); background: var(--bg-card-strong); } .stageHeader { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto minmax(360px, auto); align-items: center; gap: var(--space-2); } .stageMetrics { display: inline-flex; min-width: 0; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); } .stageTotal { overflow: hidden; color: var(--text-tertiary); font-size: var(--admin-font-size); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; } .stageRTPError { overflow: hidden; color: var(--danger, #dc2626); font-size: var(--admin-font-size); font-weight: 760; text-overflow: ellipsis; white-space: nowrap; } .stageTools { display: inline-grid; min-width: 0; grid-template-columns: minmax(120px, 150px) auto auto; align-items: center; justify-content: end; gap: var(--space-2); } .tierList { display: grid; min-width: 0; gap: var(--space-2); } .tierRow { display: grid; min-width: 0; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); align-items: center; gap: var(--space-2); padding: var(--space-2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg-card); } .tierRow > :global(.MuiTextField-root), .tierRow > :global(.MuiFormControl-root) { width: 100%; min-width: 0; } .tierContribution { min-width: 96px; color: var(--text-tertiary); font-size: var(--admin-font-size-sm); font-weight: 700; white-space: nowrap; } .tierFlags { display: inline-flex; min-width: 0; align-items: center; gap: var(--space-1); white-space: nowrap; } .tierRow > :global(.MuiIconButton-root) { justify-self: end; } .simulationPanel { display: grid; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); } .simulationHeader { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: var(--space-3); } .simulationActions { display: inline-flex; flex: 0 0 auto; align-items: center; gap: var(--space-2); } .simulationGrid { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: var(--space-3); } .simulationOverview { display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)); gap: var(--space-3); } .drawSummaryPanel { display: grid; gap: var(--space-4); padding: var(--space-4) var(--space-5); } .drawSummaryHeader { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: var(--space-3); } .sectionTitle { margin: 0; color: var(--text-primary); font-size: 18px; font-weight: 760; line-height: 1.35; } .drawSummaryFilters { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: var(--space-3); } .drawSummaryGrid { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: var(--space-3); } .summaryError { display: flex; min-height: 120px; align-items: center; justify-content: center; gap: var(--space-3); color: var(--text-secondary); font-weight: 650; } .metricItem { display: grid; min-width: 0; gap: 2px; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--bg-card-strong); } .metricItem span { overflow: hidden; color: var(--text-tertiary); font-size: var(--admin-font-size); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; } .metricItem strong { overflow: hidden; color: var(--text-primary); font-weight: 760; text-overflow: ellipsis; white-space: nowrap; } .metricItem small { overflow: hidden; color: var(--text-tertiary); font-size: 12px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; } .stack { display: grid; min-width: 0; gap: 2px; } .title, .name { overflow: hidden; color: var(--text-primary); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; } .meta { overflow: hidden; color: var(--text-tertiary); font-size: var(--admin-font-size); text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 900px) { .summaryPanel { grid-template-columns: minmax(0, 1fr); align-items: stretch; } .summaryActions { justify-content: flex-start; padding-top: var(--space-3); padding-left: 0; border-top: 1px solid var(--border); border-left: 0; } .simulationHeader { align-items: flex-start; flex-direction: column; } .drawSummaryHeader { align-items: flex-start; flex-direction: column; } .simulationGrid, .simulationOverview, .drawSummaryGrid, .multiplierList, .tierRow { grid-template-columns: repeat(2, minmax(140px, 1fr)); } .tierRow > :global(.MuiIconButton-root) { justify-self: end; } } @media (max-width: 560px) { .configGrid, .subsidyInputs, .simulationGrid, .simulationOverview, .drawSummaryGrid, .stageHeader, .tierRow { grid-template-columns: minmax(0, 1fr); } .tierFlags { justify-content: space-between; } }