html {
/* The viewport () is the ONLY vertical scroll container in this layout.
Always show its vertical scrollbar so it can't appear/disappear between the
loading and loaded states (which would shift the page width and make the
header/filter bar flicker). */
overflow-x: hidden;
overflow-y: scroll;
max-width: 100%;
}
/* IMPORTANT: use `overflow-x: clip` (not `hidden`) on the inner containers below.
Per the CSS overflow spec, `overflow-x: hidden` forces `overflow-y` to compute
to `auto`, which silently turns each of these wrappers into its OWN vertical
scroll container. When the grid (height: 75vh) renders, one of them overflows
and pops a vertical scrollbar that steals horizontal width -> the filter bar
reflows ("flicker"). `clip` hides horizontal overflow the same way but leaves
`overflow-y` as `visible`, so they never become scroll containers and
stays the single, always-on scroller. */
body {
overflow-x: clip;
max-width: 100%;
}
.mud-main-content {
overflow-x: clip;
max-width: 100%;
}
.main-content {
overflow-x: clip;
}
.page-shell {
padding: 0px;
margin-bottom: 5px;
margin-left: 5px;
max-width: 100%;
box-sizing: border-box;
overflow-x: clip;
}
.flex-1 {
flex: 1 1 0;
}
.qty-toggle {
display: flex;
align-items: center;
height: 56px; /* matches Mud input height */
}
.qty-toggle .mud-toggle-item {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.viewmode-toggle .mud-toggle-item {
min-width: 0;
}
.grid-wrapper {
width: 100%;
max-width: 100%;
overflow-x: clip;
}
.scroll-grid {
width: 100%;
max-width: 100%;
}
.scroll-grid .mud-table-container {
height: 75vh;
overflow-y: auto;
overflow-x: auto;
}
.scroll-grid table {
width: 100%;
}
.dashboard-page {
height: calc(100vh - 58px);
overflow: hidden;
}
.dashboard-page .grid-wrapper {
flex: 1 1 auto;
min-height: 0;
}
.dashboard-page .scroll-grid .mud-table-container {
height: calc(100vh - 350px);
min-height: 150px;
overflow-y: auto;
overflow-x: auto;
}
.runsize-invoice-page {
height: calc(100vh - 58px);
min-height: 0;
overflow: hidden;
}
.runsize-invoice-page .page-header {
display: none;
}
.runsize-invoice-card {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
.runsize-invoice-step {
height: 100%;
min-height: 0;
}
.runsize-invoice-grid {
flex: 1 1 auto;
min-height: 0;
}
.runsize-invoice-grid .mud-table-container {
height: calc(100vh - 245px);
min-height: 240px;
overflow-y: auto;
overflow-x: auto;
}
.runsize-invoice-nav {
position: sticky;
bottom: 0;
z-index: 10;
background: #fff;
border-top: 1px solid #DDE3F0;
padding: 8px 4px;
}
.production-runs-page {
height: calc(100vh - 58px);
min-height: 0;
overflow: hidden;
}
.production-runs-page .page-header {
flex: 0 0 auto;
margin-bottom: 4px !important;
}
.production-runs-page .filter-bar {
flex: 0 0 auto;
margin-bottom: 4px !important;
}
.production-runs-card {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
.production-runs-grid {
height: 100%;
min-height: 0;
}
.production-runs-grid .mud-table-container {
height: calc(100vh - 250px);
min-height: 240px;
overflow-y: auto;
overflow-x: auto;
}
.runsize-view-switch {
height: 40px;
}
.runsize-view-switch .mud-toggle-item {
min-width: 92px;
padding-inline: 12px;
}
.metric-view-switch {
height: 40px;
}
.metric-view-switch .mud-toggle-item {
min-width: 104px;
padding-inline: 12px;
}
.production-calculation-detail-page {
height: calc(100vh - 58px);
min-height: 0;
overflow: hidden;
}
.production-calculation-detail-page .page-header {
flex: 0 0 auto;
margin-bottom: 4px !important;
}
.production-calculation-detail-page .filter-bar {
flex: 0 0 auto;
margin-bottom: 4px !important;
}
.production-calculation-detail-card {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
.production-calculation-detail-grid {
height: 100%;
min-height: 0;
}
.production-calculation-detail-grid .mud-table-container {
height: calc(100vh - 250px);
min-height: 240px;
overflow-y: auto;
overflow-x: auto;
}
.stock-snapshot-fit-grid .mud-table-container {
overflow-x: auto;
}
.stock-snapshot-fit-grid table {
table-layout: auto;
width: max-content;
min-width: 100%;
}
.stock-snapshot-fit-grid th,
.stock-snapshot-fit-grid td {
white-space: nowrap;
}
.pallet-storage-detail-page {
height: calc(100vh - 58px);
min-height: 0;
overflow: hidden;
}
.pallet-storage-detail-toolbar,
.pallet-storage-detail-kpis {
flex: 0 0 auto;
background: #fff;
}
.pallet-storage-detail-kpis {
margin-bottom: 4px !important;
}
.pallet-storage-detail-card {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
.pallet-storage-detail-grid {
height: 100%;
min-height: 0;
}
.pallet-storage-detail-grid .mud-table-container {
height: calc(100vh - 245px);
min-height: 240px;
overflow-y: auto;
overflow-x: auto;
}
.no-border-grid {
border: none !important;
}
.no-paper-border {
box-shadow: none !important;
border: none !important;
}
.page {
background: #f6f7fb;
min-height: 100%;
}
.page-header,
.filter-bar,
.kpi-card,
.content-card,
.contract-card {
background: #ffffff;
border-radius: 16px;
border: 1px solid #DDE3F0;
}
.delta-pos {
color: #2e7d32;
}
.delta-neg {
color: #c62828;
}
.chart-card {
min-height: 390px;
}
.h-100 {
height: 100%;
}
.w-100 {
width: 100%;
}
.fw-500 {
font-weight: 500;
}
.fw-600 {
font-weight: 600;
}
.expansion-panel {
background: #F4F7FC;
border: 1px solid #DDE3F0;
border-radius: 12px;
}
.contract-card {
min-height: 220px;
}
.top-issues-list .mud-list-item {
border-bottom: 1px solid #DDE3F0;
padding-top: 10px;
padding-bottom: 10px;
}
:deep(.transactions-grid .mud-table-container),
:deep(.summary-grid .mud-table-container) {
border-radius: 12px;
overflow: hidden;
}
:deep(.transactions-grid table thead th),
:deep(.summary-grid table thead th) {
background: #F4F7FC;
font-weight: 700;
color: #3e4352;
}
:deep(.transactions-grid table tbody td),
:deep(.summary-grid table tbody td) {
padding-top: 14px;
padding-bottom: 14px;
vertical-align: middle;
}
:deep(.mud-tabs-toolbar) {
padding: 0 16px;
border-bottom: 1px solid #DDE3F0;
}
:deep(.mud-input-control) {
margin-top: 0;
}
.page-header {
background: #fff;
border: 1px solid #DDE3F0;
border-radius: 16px;
}
.header-subtitle {
color: #F5A623;
margin-top: 4px;
}
.kpi-card {
background: #F4F7FC;
border: 1px solid #DDE3F0;
border-radius: 12px;
}
.kpi-label {
color: #7b7f8f;
text-transform: uppercase;
letter-spacing: .03em;
}
.kpi-value {
font-weight: 700;
}
.total-card {
background: #EBF0FA;
}
.left-menu {
min-height: 100vh;
background-color: #f3f3f3;
border-right: 1px solid #C8D3E8;
}
.left-menu .mud-nav-link {
border-radius: 6px;
margin: 2px 8px;
font-size: 0.95rem;
}
.left-menu .mud-nav-link:hover {
background-color: #e9e9e9;
}
.left-menu .mud-nav-group > .mud-nav-link,
.left-menu .mud-nav-group .mud-nav-link {
padding-top: 6px;
padding-bottom: 6px;
}
.left-menu .mud-nav-group .mud-nav-link.active {
background-color: #D6E0F5;
color: #1C3A8C;
font-weight: 600;
}
.left-menu .mud-nav-group .mud-nav-link .mud-nav-link-icon {
min-width: 30px;
}
/* ── Compact data grids ──────────────────────────────────────────────
Smaller font + tighter cell padding for every MudDataGrid so more
columns fit at 100% zoom without horizontal scrolling. */
.mud-data-grid .mud-table-cell {
font-size: 0.75rem;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 8px;
padding-right: 8px;
}
/* Header cells: match the smaller size but keep them legible/bold. */
.mud-data-grid .mud-table-head .mud-table-cell,
.mud-data-grid .mud-table-head .mud-table-sort-label {
font-size: 0.75rem;
}
/* Inline cell content (buttons, chips, checkboxes, text) follows suit so
rows stay compact instead of being forced tall by larger controls. */
.mud-data-grid .mud-table-cell .mud-button-root,
.mud-data-grid .mud-table-cell .mud-chip,
.mud-data-grid .mud-table-cell .mud-input,
.mud-data-grid .mud-table-cell .mud-typography {
font-size: 0.75rem;
}