.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; } .configDrawer { box-sizing: border-box; width: min(520px, 100vw); 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%; } .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); } .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; } .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; } .simulationGrid, .simulationOverview { grid-template-columns: repeat(2, minmax(140px, 1fr)); } } @media (max-width: 560px) { .configGrid, .subsidyInputs, .simulationGrid, .simulationOverview { grid-template-columns: minmax(0, 1fr); } }