/*!**********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/@angular-devkit/build-angular/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/gridstack/dist/gridstack.min.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************/
.grid-stack{position:relative}.grid-stack-placeholder>.placeholder-content{background-color:rgba(0,0,0,.1);margin:0;position:absolute;width:auto;z-index:0!important}.grid-stack>.grid-stack-item{position:absolute;padding:0;top:0;width:var(--gs-column-width);height:var(--gs-cell-height)}.grid-stack>.grid-stack-item>.grid-stack-item-content{margin:0;position:absolute;width:auto;overflow-x:hidden;overflow-y:auto}.grid-stack>.grid-stack-item.size-to-content:not(.size-to-content-max)>.grid-stack-item-content{overflow-y:hidden}.grid-stack:not(.grid-stack-rtl)>.grid-stack-item{left:0}.grid-stack.grid-stack-rtl>.grid-stack-item{right:0}.grid-stack>.grid-stack-item>.grid-stack-item-content,.grid-stack>.grid-stack-placeholder>.placeholder-content{top:var(--gs-item-margin-top);right:var(--gs-item-margin-right);bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-handle{position:absolute;font-size:.1px;display:block;touch-action:none;-webkit-user-select:none;user-select:none;z-index:100}.grid-stack-item.ui-resizable-autohide>.ui-resizable-handle,.grid-stack-item.ui-resizable-disabled>.ui-resizable-handle{display:none}.grid-stack-item>.ui-resizable-ne,.grid-stack-item>.ui-resizable-nw,.grid-stack-item>.ui-resizable-se,.grid-stack-item>.ui-resizable-sw{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23666" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 20 20"><path d="m10 3 2 2H8l2-2v14l-2-2h4l-2 2"/></svg>');background-repeat:no-repeat;background-position:center;z-index:101}.grid-stack-item>.ui-resizable-ne{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-sw{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-nw{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-se{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-nw{cursor:nw-resize;width:20px;height:20px;top:var(--gs-item-margin-top);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-n{cursor:n-resize;height:10px;top:var(--gs-item-margin-top);left:25px;right:25px}.grid-stack-item>.ui-resizable-ne{cursor:ne-resize;width:20px;height:20px;top:var(--gs-item-margin-top);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-e{cursor:e-resize;width:10px;top:15px;bottom:15px;right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-se{cursor:se-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-s{cursor:s-resize;height:10px;left:25px;bottom:var(--gs-item-margin-bottom);right:25px}.grid-stack-item>.ui-resizable-sw{cursor:sw-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-w{cursor:w-resize;width:10px;top:15px;bottom:15px;left:var(--gs-item-margin-left)}.grid-stack-item.ui-draggable-dragging>.ui-resizable-handle{display:none!important}.grid-stack-item.ui-draggable-dragging{will-change:left,right,top}.grid-stack-item.ui-resizable-resizing{will-change:width,height}.ui-draggable-dragging,.ui-resizable-resizing{z-index:10000}.ui-draggable-dragging>.grid-stack-item-content,.ui-resizable-resizing>.grid-stack-item-content{box-shadow:1px 4px 6px rgba(0,0,0,.2);opacity:.8}.grid-stack-animate,.grid-stack-animate .grid-stack-item{transition:left .3s,right .3s,top .3s,height .3s,width .3s}.grid-stack-animate .grid-stack-item.grid-stack-placeholder,.grid-stack-animate .grid-stack-item.ui-draggable-dragging,.grid-stack-animate .grid-stack-item.ui-resizable-resizing{transition:left 0s,right 0s,top 0s,height 0s,width 0s}.grid-stack>.grid-stack-item[gs-y="0"]{top:0}.grid-stack:not(.grid-stack-rtl)>.grid-stack-item[gs-x="0"]{left:0}.grid-stack.grid-stack-rtl>.grid-stack-item[gs-x="0"]{right:0}
/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/@angular-devkit/build-angular/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./apps/angular-gridstack-demo/src/app/components/orderportal/orderportal.component.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************/
:host {
  display: block;
  min-height: 100vh;
  color: var(--text);
}

.orderportal-page { max-width: 1440px; margin: 0 auto; padding: 24px 18px 72px; }
.orderportal-header { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 8px; }
.orderportal-eyebrow { margin: 0 0 6px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.orderportal-header h1 { margin: 0; color: var(--text); font-size: clamp(28px, 4vw, 42px); letter-spacing: -.055em; line-height: .98; }
.orderportal-subtitle { max-width: 620px; margin: 10px 0 0; color: var(--muted); font-size: 14px; }
.orderportal-live-control { display: inline-flex; min-height: 42px; align-items: center; gap: 9px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 12px; color: var(--muted); background: var(--surface-card); font-size: 12px; font-weight: 700; white-space: nowrap; }
.orderportal-live-control a { color: var(--primary); text-decoration: none; }
.orderportal-live-control a:hover { text-decoration: underline; }
.live-dot, .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; }
.live-dot.is-on { background: var(--success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 16%, transparent); }
.live-switch { width: 34px; height: 20px; padding: 2px; border: 0; border-radius: 999px; background: #94a3b8; cursor: pointer; }
.live-switch > span { display: block; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 160ms ease; }
.live-switch[aria-checked='true'] { background: var(--success); }
.live-switch[aria-checked='true'] > span { transform: translateX(14px); }
.live-switch:focus-visible, .orderportal-page button:focus-visible, .orderportal-page a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.orderportal-status { min-height: 20px; margin: 14px 0 8px; color: var(--muted); font-size: 12px; }
.orderportal-error { margin: 0 0 8px; color: var(--error); font-size: 12px; font-weight: 700; }
.orderportal-grid.grid-stack { min-height: 1010px; margin: 0; padding: 8px; border: 1px solid var(--border); border-radius: 16px; background: color-mix(in srgb, var(--surface) 92%, var(--primary) 8%); }
.grid-stack-item-content { overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-card); box-shadow: 0 6px 16px rgb(21 34 56 / 6%); }
.orderportal-card { display: flex; height: 100%; min-width: 0; min-height: 0; box-sizing: border-box; flex-direction: column; padding: 14px; background: var(--surface-card); }
.kpi-card { justify-content: space-between; gap: 7px; }
.kpi-heading, .widget-header, .planning-actions, .chart-legend { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kpi-heading { color: var(--muted); font-size: 11px; font-weight: 800; }
.metric-icon { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; color: var(--primary); background: var(--primary-soft); font-size: 16px; }
.tone-success .metric-icon { color: var(--success); background: color-mix(in srgb, var(--success) 14%, transparent); }
.tone-primary .metric-icon { color: #2563eb; background: #dbeafe; }
.tone-error .metric-icon { color: var(--error); background: color-mix(in srgb, var(--error) 12%, transparent); }
.tone-warning .metric-icon { color: var(--warning); background: color-mix(in srgb, var(--warning) 14%, transparent); }
.kpi-value { color: var(--text); font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -.04em; }
.kpi-value small { margin-left: 4px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0; }
.kpi-delta, .kpi-caption { color: var(--success); font-size: 11px; font-weight: 800; }
.kpi-delta small, .kpi-caption { color: var(--muted); font-weight: 600; }
.tone-error .kpi-delta { color: var(--error); }
.tone-warning .kpi-delta { color: var(--warning); }
.widget-header { min-height: 28px; margin-bottom: 10px; color: var(--text); cursor: grab; }
.widget-header strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.widget-kicker { display: block; margin-bottom: 2px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.planning-card { padding: 12px 14px; }
.planning-actions { flex-wrap: wrap; justify-content: end; }
.segmented { display: inline-flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.segmented button, .today-button, .icon-button, .quiet-button, .primary-button, .card-link, .more-link { border: 0; color: var(--muted); background: transparent; font: inherit; cursor: pointer; }
.segmented button { padding: 7px 10px; font-size: 11px; }
.segmented button.is-active { color: var(--primary); background: var(--primary-soft); font-weight: 800; }
.segmented button:hover { color: var(--primary); background: color-mix(in srgb, var(--primary-soft) 72%, var(--surface-card)); }
.today-button, .icon-button { min-height: 30px; padding: 0 8px; border: 1px solid var(--border); border-radius: 7px; font-size: 11px; }
.icon-button { font-size: 18px; line-height: 1; }
.quiet-button { min-height: 30px; padding: 0 10px; border: 1px solid var(--border); border-radius: 7px; color: var(--text); background: color-mix(in srgb, var(--muted) 10%, var(--surface-card)); font-size: 11px; }
.quiet-button:hover { border-color: var(--muted); background: color-mix(in srgb, var(--muted) 18%, var(--surface-card)); }
.primary-button { min-height: 30px; padding: 0 11px; border-radius: 7px; color: var(--on-primary); background: var(--primary); font-size: 11px; font-weight: 800; }
.filter-menu { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px 0 10px; border-bottom: 1px solid var(--border); }
.filter-menu button { padding: 6px 9px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); background: var(--surface-card); font-size: 11px; cursor: pointer; }
.filter-menu button.is-active { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); font-weight: 800; }
.kanban-board { display: grid; min-height: 0; flex: 1; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.kanban-column { min-width: 0; border-right: 1px solid var(--border); background: color-mix(in srgb, var(--surface-card) 92%, var(--primary) 8%); }
.kanban-column:last-child { border-right: 0; }
.kanban-column-heading { padding: 9px 8px 7px; border-bottom: 1px solid var(--border); }
.kanban-column-heading strong { display: block; overflow: hidden; color: var(--text); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.kanban-column-heading small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.status-dot { margin-right: 5px; vertical-align: middle; }
.status-planned { background: #94a3b8; }.status-released { background: var(--success); }.status-production { background: #2563eb; }.status-completion { background: var(--accent); }.status-completed { background: #64748b; }.status-fault { background: var(--error); }.status-idle { background: var(--warning); }
.drop-zone { min-height: 100px; padding: 6px; }
.order-card { display: flex; min-height: 56px; align-items: flex-start; justify-content: space-between; gap: 6px; margin-bottom: 6px; padding: 8px; border: 1px solid var(--border); border-radius: 7px; color: var(--text); background: var(--surface-card); cursor: grab; }
.order-card:active { cursor: grabbing; }
.order-card strong, .order-card span, .order-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-card strong { font-size: 10px; }.order-card span, .order-card small { margin-top: 3px; color: var(--muted); font-size: 9px; }.order-status-badge { align-self: start; padding: 3px 4px; border-radius: 4px; color: var(--primary); background: var(--primary-soft); font-size: 9px; font-weight: 800; }
.empty-column { margin: 20px 0; color: var(--muted); text-align: center; }.more-link { margin: 0 8px 8px; padding: 6px 0; color: var(--primary); text-align: left; font-size: 10px; font-weight: 800; }
.gantt-view, .timeline-view { flex: 1; overflow: auto; }.gantt-row { display: grid; grid-template-columns: 78px 1fr 70px; align-items: center; gap: 8px; min-height: 30px; border-bottom: 1px solid var(--border); font-size: 10px; }.gantt-row strong, .gantt-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.gantt-row small { color: var(--muted); }.gantt-track, .progress-track { display: block; height: 6px; overflow: hidden; border-radius: 999px; background: var(--border); }.gantt-track i, .progress-track i { display: block; height: 100%; border-radius: inherit; background: var(--primary); }.gantt-track i.status-released { background: var(--success); }.gantt-track i.status-completion { background: var(--accent); }.gantt-track i.status-completed { background: #64748b; }
.timeline-row { display: grid; grid-template-columns: 14px 1fr 40px; align-items: center; gap: 8px; min-height: 34px; border-bottom: 1px solid var(--border); }.timeline-row strong, .timeline-row span { display: block; font-size: 10px; }.timeline-row span { margin-top: 2px; color: var(--muted); }.timeline-row b { color: var(--primary); font-size: 10px; text-align: right; }
.compact-card { padding: 12px; }.card-link { color: var(--primary); font-size: 10px; font-weight: 800; }.alert-list, .machine-list, .progress-list, .quick-action-list { display: grid; min-height: 0; overflow: auto; }.alert-row, .machine-row, .progress-row { display: grid; align-items: center; gap: 6px; padding: 7px 0; border-bottom: 1px solid var(--border); }.alert-row { grid-template-columns: 16px 1fr auto; }.alert-row strong, .alert-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.alert-row strong { color: var(--text); font-size: 10px; }.alert-row small, .alert-row time { color: var(--muted); font-size: 9px; }.alert-icon { font-size: 10px; }.alert-icon.tone-error { color: var(--error); }.alert-icon.tone-warning { color: var(--warning); }.alert-icon.tone-primary { color: var(--primary); }
.machine-row { grid-template-columns: 10px 42px 1fr auto; font-size: 10px; }.machine-row .status-dot { margin: 0; }.machine-state { color: var(--success); }.machine-row small { color: var(--muted); font-size: 9px; }.machine-row:has(.status-fault) .machine-state { color: var(--error); }.machine-row:has(.status-idle) .machine-state { color: var(--warning); }
.donut-wrap { position: relative; display: grid; width: min(140px, 100%); margin: 5px auto 8px; place-items: center; }.donut-wrap svg { width: 100%; transform: rotate(-90deg); }.donut-track, .donut-value { fill: none; stroke-width: 12; }.donut-track { stroke: var(--border); }.donut-value { stroke: var(--primary); stroke-linecap: round; }.donut-label { position: absolute; display: grid; place-items: center; color: var(--text); }.donut-label strong { font-size: 20px; }.donut-label span { color: var(--muted); font-size: 9px; }.legend-list { display: grid; gap: 4px; color: var(--muted); font-size: 9px; }.legend-dot { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; }.legend-dot.tone-primary { background: var(--primary); }.legend-dot.tone-success { background: var(--success); }.legend-dot.tone-muted { background: #94a3b8; }.legend-dot.tone-accent { background: var(--accent); }.legend-dot.tone-error { background: var(--error); }
.chart-legend { gap: 4px; color: var(--muted); font-size: 9px; font-weight: 600; }.line-swatch { display: inline-block; width: 13px; height: 3px; margin-left: 4px; border-radius: 99px; background: var(--primary); }.line-swatch.plan { height: 0; border-top: 2px dashed var(--muted); background: none; }.line-chart { display: block; width: 100%; height: auto; margin-top: 8px; }.chart-gridline { fill: none; stroke: var(--border); stroke-width: 1; }.actual-line, .plan-line { fill: none; stroke-width: 2.5; }.actual-line { stroke: var(--primary); }.plan-line { stroke: var(--muted); stroke-dasharray: 4 4; }.chart-axis { display: flex; justify-content: space-between; color: var(--muted); font-size: 9px; }
.progress-row { grid-template-columns: 70px 1fr 30px; }.progress-row strong, .progress-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.progress-row strong { font-size: 10px; }.progress-row small { margin-top: 2px; color: var(--muted); font-size: 9px; }.progress-row b { color: var(--text); font-size: 10px; text-align: right; }.progress-track i { background: var(--success); }.progress-row:nth-child(2) .progress-track i { background: var(--primary); }.progress-row:nth-child(3) .progress-track i { background: var(--warning); }.progress-row:nth-child(4) .progress-track i { background: var(--accent); }.progress-row:nth-child(5) .progress-track i { background: var(--error); }
.quality-stat { display: grid; gap: 3px; padding: 8px 0; border-bottom: 1px solid var(--border); }.quality-stat span { color: var(--muted); font-size: 10px; }.quality-stat strong { color: var(--text); font-size: 21px; letter-spacing: -.03em; }.quality-stat small { font-size: 9px; }.positive { color: var(--success); }.quality-sparkline { width: 100%; margin-top: auto; }.quality-sparkline polyline { fill: none; stroke: var(--accent); stroke-width: 2; }
.quick-action-list { gap: 6px; }.quick-action-list button { display: flex; min-height: 30px; align-items: center; gap: 7px; padding: 0 7px; border: 1px solid var(--border); border-radius: 6px; color: var(--primary); background: var(--surface-card); font-size: 10px; text-align: left; cursor: pointer; }.quick-action-list button:hover { border-color: var(--primary); background: var(--primary-soft); }.quick-action-list span { font-size: 16px; }
@media (max-width: 1024px) { .orderportal-header { align-items: flex-start; flex-direction: column; }.orderportal-live-control { align-self: stretch; justify-content: space-between; }.orderportal-grid.grid-stack { min-height: 1320px; }.kanban-board { align-content: start; grid-auto-rows: max-content; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }.kanban-column:nth-child(n+4) { border-top: 1px solid var(--border); } }
@media (max-width: 600px) { .orderportal-page { padding: 18px 10px 88px; }.orderportal-grid.grid-stack { min-height: 2200px; padding: 5px; }.planning-actions { justify-content: start; }.kanban-board { grid-template-columns: 1fr; }.kanban-column { border-right: 0; border-bottom: 1px solid var(--border); }.kanban-column:nth-child(n+4) { border-top: 0; }.gantt-row { grid-template-columns: 62px 1fr 58px; }.orderportal-live-control { flex-wrap: wrap; white-space: normal; } }
@media (prefers-reduced-motion: reduce) { .live-switch > span { transition: none; }.orderportal-grid.grid-stack { scroll-behavior: auto; } }

/* Reference-aligned surfaces, controls, and chart containers. */
.orderportal-grid.grid-stack { min-height: 1400px; background: var(--surface); }
.grid-stack-item-content { background: var(--surface-card); box-shadow: 0 4px 12px rgb(21 34 56 / 4%); }
.realtime-widget { min-height: 0; padding: 10px 14px; gap: 8px; }
.realtime-status-rail, .realtime-status, .realtime-toggle-group, .realtime-login, .date-nav, .planning-toolbar { display: flex; align-items: center; gap: 8px; }
.realtime-status-rail { width: 100%; min-height: 40px; flex-wrap: wrap; }
.realtime-toggle-group { margin-left: auto; min-height: 40px; padding: 0 8px; border: 1px solid var(--border); border-radius: 10px; color: var(--muted); font-size: 12px; font-weight: 700; }
.realtime-divider { width: 1px; height: 24px; background: var(--border); }
.realtime-status { color: var(--muted); font-size: 12px; }
.realtime-status strong { color: var(--text); }
.realtime-login { min-height: 40px; padding: 0 8px; color: var(--primary); font-size: 12px; font-weight: 700; text-decoration: none; }
.realtime-login:hover { text-decoration: underline; }
.realtime-tiles { display: grid; width: 100%; min-height: 78px; flex: 1; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.realtime-tile { display: grid; height: 100%; min-width: 0; min-height: 78px; align-content: center; gap: 4px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-card); }
.realtime-tile strong { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.realtime-tile span { color: var(--text); font-size: 18px; font-variant-numeric: tabular-nums; font-weight: 700; }
.realtime-tile small { color: var(--muted); font-size: 10px; }
.realtime-toggle-group .live-switch { position: relative; display: inline-flex; width: 44px; height: 40px; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.realtime-toggle-group .live-switch::before { display: block; width: 36px; height: 20px; content: ''; border-radius: 999px; background: #cbd5e1; transition: background-color 140ms ease; }
.realtime-toggle-group .live-switch[aria-checked='true']::before { background: var(--success); }
.realtime-toggle-group .live-switch > span { position: absolute; top: 13px; left: 8px; display: block; width: 14px; height: 14px; margin: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(15 23 42 / 35%); transition: left 140ms ease; transform: none; }
.realtime-toggle-group .live-switch[aria-checked='true'] > span { left: 22px; margin: 0; transform: none; }
.planning-title-row { margin-bottom: 2px; }
.planning-toolbar { justify-content: space-between; margin-bottom: 10px; }
.date-nav strong { color: var(--text); font-size: 13px; font-weight: 500; white-space: nowrap; }
.planning-toolbar .planning-actions { justify-content: flex-end; }
.kanban-column { background: color-mix(in srgb, var(--surface-card) 97%, var(--muted) 3%); }
.metric-icon { padding: 6px; }
.orderportal-icon { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.kpi-spinner { position: relative; display: grid; width: 56px; height: 56px; margin: 2px auto; place-items: center; }
.kpi-spinner-value { position: absolute; color: var(--text); font-size: 15px; letter-spacing: -.03em; }
.kpi-spinner .mat-mdc-progress-spinner { --mdc-circular-progress-active-indicator-color: #16a34a !important; --mat-progress-spinner-active-indicator-color: #16a34a !important; }
.kpi-spinner .mdc-circular-progress__determinate-circle { stroke: #16a34a !important; }
.donut-chart-wrap { position: relative; min-height: 156px; }
.echarts-chart { width: 100%; }
.order-status-chart { height: 156px; }
.production-chart-canvas { height: 160px; }
.donut-label { position: absolute; top: 39%; left: 50%; display: grid; transform: translate(-50%, -50%); place-items: center; color: var(--text); pointer-events: none; }
.quality-stat-card { margin-bottom: 8px; padding: 7px 8px 4px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-card); }
.quality-stat-card:last-child { margin-bottom: 0; }
.quality-stat { padding: 0 0 4px; border-bottom: 0; }
.quality-sparkline-chart { height: 48px; }
.order-status-badge { display: grid !important; width: 22px; height: 22px; flex: 0 0 auto; align-self: center; margin-top: 0; padding: 3px; place-items: center; border-radius: 5px; color: var(--primary); background: var(--primary-soft); }
.order-status-badge .orderportal-icon { width: 16px; height: 16px; }
.status-badge-planned { color: #c2410c; background: #ffedd5; }
.status-badge-released { color: #16a34a; background: #dcfce7; }
.status-badge-production { color: #2563eb; background: #dbeafe; }
.status-badge-completion { color: #dc2626; background: #fee2e2; }
.status-badge-completed { width: 22px; height: 22px; padding: 3px; color: var(--muted); background: color-mix(in srgb, var(--muted) 18%, var(--surface-card)); }
.alert-icon { display: grid; width: 16px; height: 16px; place-items: center; }
.quick-action-list .orderportal-icon { width: 16px; height: 16px; }
.quick-action-list span { font-size: initial; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 1024px) { .realtime-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .realtime-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .realtime-toggle-group { margin-left: 0; } .realtime-divider { display: none; } }

:root[data-theme='dark'] .realtime-toggle-group .live-switch::before { background: #475569; }
:root[data-theme='dark'] .realtime-toggle-group .live-switch[aria-checked='true']::before { background: var(--success); }
:root[data-theme='dark'] .status-badge-planned { color: #fed7aa; background: #7c2d12; }
:root[data-theme='dark'] .status-badge-released { color: #bbf7d0; background: #14532d; }
:root[data-theme='dark'] .status-badge-production { color: #bfdbfe; background: #1e3a8a; }
:root[data-theme='dark'] .status-badge-completion { color: #fecaca; background: #7f1d1d; }

/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/@angular-devkit/build-angular/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./apps/angular-gridstack-demo/src/styles.scss?ngGlobalStyle ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--surface);
  --primary: #dc2626;
  --primary-hover: #b91c1c;
  --primary-soft: #fee2e2;
  --primary-border: #fecaca;
  --success: #16a34a;
  --surface: #f5f7fb;
  --surface-card: #fff;
  --text: #152238;
  --muted: #64748b;
  --border: #e2e8f0;
}

:root[data-theme=dark] {
  color-scheme: dark;
  --surface: #0f172a;
  --surface-card: #17233c;
  --text: #fff;
  --muted: rgb(169 183 204);
  --border: #334155;
  --primary-soft: color-mix(in srgb, var(--primary) 30%, white);
  --primary-border: var(--primary);
  --success: #22c55e;
}

* {
  box-sizing: border-box;
}

/* Keep Material tokens at document scope so controls and CDK overlays share one theme. */
:root {
  --mat-sys-background: #fff8f6;
  --mat-sys-error: #ba1a1a;
  --mat-sys-error-container: #ffdad6;
  --mat-sys-inverse-on-surface: #fbeeec;
  --mat-sys-inverse-primary: #ffb4a8;
  --mat-sys-inverse-surface: #362f2e;
  --mat-sys-on-background: #201a19;
  --mat-sys-on-error: #ffffff;
  --mat-sys-on-error-container: #93000a;
  --mat-sys-on-primary: #fff;
  --mat-sys-on-primary-container: #7f1d1d;
  --mat-sys-on-primary-fixed: #410000;
  --mat-sys-on-primary-fixed-variant: #930100;
  --mat-sys-on-secondary: #ffffff;
  --mat-sys-on-secondary-container: #5d3f3b;
  --mat-sys-on-secondary-fixed: #2c1512;
  --mat-sys-on-secondary-fixed-variant: #5d3f3b;
  --mat-sys-on-surface: #201a19;
  --mat-sys-on-surface-variant: #534341;
  --mat-sys-on-tertiary: #ffffff;
  --mat-sys-on-tertiary-container: #930100;
  --mat-sys-on-tertiary-fixed: #410000;
  --mat-sys-on-tertiary-fixed-variant: #930100;
  --mat-sys-outline: #857370;
  --mat-sys-outline-variant: #fecaca;
  --mat-sys-primary: #dc2626;
  --mat-sys-primary-container: #fee2e2;
  --mat-sys-primary-fixed: #ffdad4;
  --mat-sys-primary-fixed-dim: #ffb4a8;
  --mat-sys-scrim: #000000;
  --mat-sys-secondary: #775651;
  --mat-sys-secondary-container: #ffdad4;
  --mat-sys-secondary-fixed: #ffdad4;
  --mat-sys-secondary-fixed-dim: #e7bdb6;
  --mat-sys-shadow: #000000;
  --mat-sys-surface: #fff;
  --mat-sys-surface-bright: #fff8f6;
  --mat-sys-surface-container: #fff;
  --mat-sys-surface-container-high: #fff;
  --mat-sys-surface-container-highest: #ede0dd;
  --mat-sys-surface-container-low: #fef1ef;
  --mat-sys-surface-container-lowest: #ffffff;
  --mat-sys-surface-dim: #e4d7d6;
  --mat-sys-surface-tint: #c00100;
  --mat-sys-surface-variant: #f5ddda;
  --mat-sys-tertiary: #c00100;
  --mat-sys-tertiary-container: #ffdad4;
  --mat-sys-tertiary-fixed: #ffdad4;
  --mat-sys-tertiary-fixed-dim: #ffb4a8;
  --mat-sys-neutral-variant20: #3b2d2b;
  --mat-sys-neutral10: #201a19;
  --mat-sys-level0: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-sys-level1: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-sys-level2: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-sys-level3: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-sys-level4: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-sys-level5: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-sys-body-large: 400 1rem / 1.5rem Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-body-large-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-body-large-line-height: 1.5rem;
  --mat-sys-body-large-size: 1rem;
  --mat-sys-body-large-tracking: 0.031rem;
  --mat-sys-body-large-weight: 400;
  --mat-sys-body-medium: 400 0.875rem / 1.25rem Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-body-medium-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-body-medium-line-height: 1.25rem;
  --mat-sys-body-medium-size: 0.875rem;
  --mat-sys-body-medium-tracking: 0.016rem;
  --mat-sys-body-medium-weight: 400;
  --mat-sys-body-small: 400 0.75rem / 1rem Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-body-small-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-body-small-line-height: 1rem;
  --mat-sys-body-small-size: 0.75rem;
  --mat-sys-body-small-tracking: 0.025rem;
  --mat-sys-body-small-weight: 400;
  --mat-sys-display-large: 400 3.562rem / 4rem Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-display-large-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-display-large-line-height: 4rem;
  --mat-sys-display-large-size: 3.562rem;
  --mat-sys-display-large-tracking: -0.016rem;
  --mat-sys-display-large-weight: 400;
  --mat-sys-display-medium: 400 2.812rem / 3.25rem Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-display-medium-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-display-medium-line-height: 3.25rem;
  --mat-sys-display-medium-size: 2.812rem;
  --mat-sys-display-medium-tracking: 0;
  --mat-sys-display-medium-weight: 400;
  --mat-sys-display-small: 400 2.25rem / 2.75rem Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-display-small-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-display-small-line-height: 2.75rem;
  --mat-sys-display-small-size: 2.25rem;
  --mat-sys-display-small-tracking: 0;
  --mat-sys-display-small-weight: 400;
  --mat-sys-headline-large: 400 2rem / 2.5rem Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-headline-large-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-headline-large-line-height: 2.5rem;
  --mat-sys-headline-large-size: 2rem;
  --mat-sys-headline-large-tracking: 0;
  --mat-sys-headline-large-weight: 400;
  --mat-sys-headline-medium: 400 1.75rem / 2.25rem Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-headline-medium-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-headline-medium-line-height: 2.25rem;
  --mat-sys-headline-medium-size: 1.75rem;
  --mat-sys-headline-medium-tracking: 0;
  --mat-sys-headline-medium-weight: 400;
  --mat-sys-headline-small: 400 1.5rem / 2rem Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-headline-small-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-headline-small-line-height: 2rem;
  --mat-sys-headline-small-size: 1.5rem;
  --mat-sys-headline-small-tracking: 0;
  --mat-sys-headline-small-weight: 400;
  --mat-sys-label-large: 500 0.875rem / 1.25rem Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-label-large-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-label-large-line-height: 1.25rem;
  --mat-sys-label-large-size: 0.875rem;
  --mat-sys-label-large-tracking: 0.006rem;
  --mat-sys-label-large-weight: 500;
  --mat-sys-label-large-weight-prominent: 800;
  --mat-sys-label-medium: 500 0.75rem / 1rem Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-label-medium-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-label-medium-line-height: 1rem;
  --mat-sys-label-medium-size: 0.75rem;
  --mat-sys-label-medium-tracking: 0.031rem;
  --mat-sys-label-medium-weight: 500;
  --mat-sys-label-medium-weight-prominent: 800;
  --mat-sys-label-small: 500 0.688rem / 1rem Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-label-small-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-label-small-line-height: 1rem;
  --mat-sys-label-small-size: 0.688rem;
  --mat-sys-label-small-tracking: 0.031rem;
  --mat-sys-label-small-weight: 500;
  --mat-sys-title-large: 400 1.375rem / 1.75rem Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-title-large-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-title-large-line-height: 1.75rem;
  --mat-sys-title-large-size: 1.375rem;
  --mat-sys-title-large-tracking: 0;
  --mat-sys-title-large-weight: 400;
  --mat-sys-title-medium: 500 1rem / 1.5rem Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-title-medium-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-title-medium-line-height: 1.5rem;
  --mat-sys-title-medium-size: 1rem;
  --mat-sys-title-medium-tracking: 0.009rem;
  --mat-sys-title-medium-weight: 500;
  --mat-sys-title-small: 500 0.875rem / 1.25rem Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-title-small-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-title-small-line-height: 1.25rem;
  --mat-sys-title-small-size: 0.875rem;
  --mat-sys-title-small-tracking: 0.006rem;
  --mat-sys-title-small-weight: 500;
  --mat-sys-corner-extra-large: 28px;
  --mat-sys-corner-extra-large-top: 28px 28px 0 0;
  --mat-sys-corner-extra-small: 4px;
  --mat-sys-corner-extra-small-top: 4px 4px 0 0;
  --mat-sys-corner-full: 9999px;
  --mat-sys-corner-large: 16px;
  --mat-sys-corner-large-end: 0 16px 16px 0;
  --mat-sys-corner-large-start: 16px 0 0 16px;
  --mat-sys-corner-large-top: 16px 16px 0 0;
  --mat-sys-corner-medium: 12px;
  --mat-sys-corner-none: 0;
  --mat-sys-corner-small: 8px;
  --mat-sys-dragged-state-layer-opacity: 0.16;
  --mat-sys-focus-state-layer-opacity: 0.12;
  --mat-sys-hover-state-layer-opacity: 0.08;
  --mat-sys-pressed-state-layer-opacity: 0.12;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root[data-theme=dark] {
  --mat-sys-background: #181211;
  --mat-sys-error: #ffb4ab;
  --mat-sys-error-container: #93000a;
  --mat-sys-inverse-on-surface: #362f2e;
  --mat-sys-inverse-primary: #c00100;
  --mat-sys-inverse-surface: #ede0dd;
  --mat-sys-on-background: #ede0dd;
  --mat-sys-on-error: #690005;
  --mat-sys-on-error-container: #ffdad6;
  --mat-sys-on-primary: #fff;
  --mat-sys-on-primary-container: #ffe4e6;
  --mat-sys-on-primary-fixed: #410000;
  --mat-sys-on-primary-fixed-variant: #930100;
  --mat-sys-on-secondary: #442925;
  --mat-sys-on-secondary-container: #ffdad4;
  --mat-sys-on-secondary-fixed: #2c1512;
  --mat-sys-on-secondary-fixed-variant: #5d3f3b;
  --mat-sys-on-surface: #fff;
  --mat-sys-on-surface-variant: #a9b7cc;
  --mat-sys-on-tertiary: #690100;
  --mat-sys-on-tertiary-container: #ffdad4;
  --mat-sys-on-tertiary-fixed: #410000;
  --mat-sys-on-tertiary-fixed-variant: #930100;
  --mat-sys-outline: #64748b;
  --mat-sys-outline-variant: #334155;
  --mat-sys-primary: #dc2626;
  --mat-sys-primary-container: #5f1d2a;
  --mat-sys-primary-fixed: #ffdad4;
  --mat-sys-primary-fixed-dim: #ffb4a8;
  --mat-sys-scrim: #000000;
  --mat-sys-secondary: #e7bdb6;
  --mat-sys-secondary-container: #5d3f3b;
  --mat-sys-secondary-fixed: #ffdad4;
  --mat-sys-secondary-fixed-dim: #e7bdb6;
  --mat-sys-shadow: #000000;
  --mat-sys-surface: #0f172a;
  --mat-sys-surface-bright: #3f3737;
  --mat-sys-surface-container: #17233c;
  --mat-sys-surface-container-high: #1e293b;
  --mat-sys-surface-container-highest: #3b3332;
  --mat-sys-surface-container-low: #201a19;
  --mat-sys-surface-container-lowest: #130d0c;
  --mat-sys-surface-dim: #181211;
  --mat-sys-surface-tint: #ffb4a8;
  --mat-sys-surface-variant: #534341;
  --mat-sys-tertiary: #ffb4a8;
  --mat-sys-tertiary-container: #930100;
  --mat-sys-tertiary-fixed: #ffdad4;
  --mat-sys-tertiary-fixed-dim: #ffb4a8;
  --mat-sys-neutral-variant20: #3b2d2b;
  --mat-sys-neutral10: #201a19;
  --mat-sys-level0: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-sys-level1: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-sys-level2: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-sys-level3: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-sys-level4: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-sys-level5: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-sys-body-large: 400 1rem / 1.5rem Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-body-large-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-body-large-line-height: 1.5rem;
  --mat-sys-body-large-size: 1rem;
  --mat-sys-body-large-tracking: 0.031rem;
  --mat-sys-body-large-weight: 400;
  --mat-sys-body-medium: 400 0.875rem / 1.25rem Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-body-medium-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-body-medium-line-height: 1.25rem;
  --mat-sys-body-medium-size: 0.875rem;
  --mat-sys-body-medium-tracking: 0.016rem;
  --mat-sys-body-medium-weight: 400;
  --mat-sys-body-small: 400 0.75rem / 1rem Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-body-small-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-body-small-line-height: 1rem;
  --mat-sys-body-small-size: 0.75rem;
  --mat-sys-body-small-tracking: 0.025rem;
  --mat-sys-body-small-weight: 400;
  --mat-sys-display-large: 400 3.562rem / 4rem Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-display-large-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-display-large-line-height: 4rem;
  --mat-sys-display-large-size: 3.562rem;
  --mat-sys-display-large-tracking: -0.016rem;
  --mat-sys-display-large-weight: 400;
  --mat-sys-display-medium: 400 2.812rem / 3.25rem Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-display-medium-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-display-medium-line-height: 3.25rem;
  --mat-sys-display-medium-size: 2.812rem;
  --mat-sys-display-medium-tracking: 0;
  --mat-sys-display-medium-weight: 400;
  --mat-sys-display-small: 400 2.25rem / 2.75rem Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-display-small-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-display-small-line-height: 2.75rem;
  --mat-sys-display-small-size: 2.25rem;
  --mat-sys-display-small-tracking: 0;
  --mat-sys-display-small-weight: 400;
  --mat-sys-headline-large: 400 2rem / 2.5rem Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-headline-large-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-headline-large-line-height: 2.5rem;
  --mat-sys-headline-large-size: 2rem;
  --mat-sys-headline-large-tracking: 0;
  --mat-sys-headline-large-weight: 400;
  --mat-sys-headline-medium: 400 1.75rem / 2.25rem Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-headline-medium-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-headline-medium-line-height: 2.25rem;
  --mat-sys-headline-medium-size: 1.75rem;
  --mat-sys-headline-medium-tracking: 0;
  --mat-sys-headline-medium-weight: 400;
  --mat-sys-headline-small: 400 1.5rem / 2rem Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-headline-small-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-headline-small-line-height: 2rem;
  --mat-sys-headline-small-size: 1.5rem;
  --mat-sys-headline-small-tracking: 0;
  --mat-sys-headline-small-weight: 400;
  --mat-sys-label-large: 500 0.875rem / 1.25rem Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-label-large-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-label-large-line-height: 1.25rem;
  --mat-sys-label-large-size: 0.875rem;
  --mat-sys-label-large-tracking: 0.006rem;
  --mat-sys-label-large-weight: 500;
  --mat-sys-label-large-weight-prominent: 800;
  --mat-sys-label-medium: 500 0.75rem / 1rem Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-label-medium-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-label-medium-line-height: 1rem;
  --mat-sys-label-medium-size: 0.75rem;
  --mat-sys-label-medium-tracking: 0.031rem;
  --mat-sys-label-medium-weight: 500;
  --mat-sys-label-medium-weight-prominent: 800;
  --mat-sys-label-small: 500 0.688rem / 1rem Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-label-small-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-label-small-line-height: 1rem;
  --mat-sys-label-small-size: 0.688rem;
  --mat-sys-label-small-tracking: 0.031rem;
  --mat-sys-label-small-weight: 500;
  --mat-sys-title-large: 400 1.375rem / 1.75rem Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-title-large-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-title-large-line-height: 1.75rem;
  --mat-sys-title-large-size: 1.375rem;
  --mat-sys-title-large-tracking: 0;
  --mat-sys-title-large-weight: 400;
  --mat-sys-title-medium: 500 1rem / 1.5rem Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-title-medium-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-title-medium-line-height: 1.5rem;
  --mat-sys-title-medium-size: 1rem;
  --mat-sys-title-medium-tracking: 0.009rem;
  --mat-sys-title-medium-weight: 500;
  --mat-sys-title-small: 500 0.875rem / 1.25rem Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-title-small-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mat-sys-title-small-line-height: 1.25rem;
  --mat-sys-title-small-size: 0.875rem;
  --mat-sys-title-small-tracking: 0.006rem;
  --mat-sys-title-small-weight: 500;
  --mat-sys-corner-extra-large: 28px;
  --mat-sys-corner-extra-large-top: 28px 28px 0 0;
  --mat-sys-corner-extra-small: 4px;
  --mat-sys-corner-extra-small-top: 4px 4px 0 0;
  --mat-sys-corner-full: 9999px;
  --mat-sys-corner-large: 16px;
  --mat-sys-corner-large-end: 0 16px 16px 0;
  --mat-sys-corner-large-start: 16px 0 0 16px;
  --mat-sys-corner-large-top: 16px 16px 0 0;
  --mat-sys-corner-medium: 12px;
  --mat-sys-corner-none: 0;
  --mat-sys-corner-small: 8px;
  --mat-sys-dragged-state-layer-opacity: 0.16;
  --mat-sys-focus-state-layer-opacity: 0.12;
  --mat-sys-hover-state-layer-opacity: 0.08;
  --mat-sys-pressed-state-layer-opacity: 0.12;
}

.advanced-page,
.scalability-page,
.advanced-select-panel,
.scalability-select-panel {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.advanced-select-panel,
.scalability-select-panel {
  background: var(--surface-card);
}

.advanced-page .input-card .mat-mdc-text-field-wrapper,
.scalability-page .scalability-form-body .mat-mdc-text-field-wrapper {
  padding-inline: 8px;
}

.advanced-page .input-card .mat-mdc-form-field-infix,
.scalability-page .scalability-form-body .mat-mdc-form-field-infix {
  min-width: 0;
  padding-inline: 8px;
}

.advanced-page .input-card .mat-mdc-text-field-wrapper,
.scalability-page .scalability-form-body .mat-mdc-text-field-wrapper {
  background-color: var(--mat-sys-surface);
}

.scalability-page .scalability-compact-field {
  --mat-form-field-container-height: 40px;
  --mat-form-field-container-vertical-padding: 8px;
}

.scalability-page .scalability-compact-field .mdc-text-field--outlined {
  height: 40px;
}

.advanced-page .advanced-status {
  min-height: 24px;
  margin: 28px 0 18px;
  color: #64748b;
  font-size: 14px;
}

.advanced-page .source-options {
  display: flex;
  flex-direction: column;
}

.scalability-page .source-options {
  display: flex;
  flex-direction: column;
}

/* GridStack's Angular host receives the grid-stack class at runtime. */
.advanced-grid-stack.grid-stack {
  min-height: 310px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 16px;
  background: #e9eef7;
  box-shadow: 0 18px 50px rgba(25, 44, 82, 0.08);
}

.advanced-grid-stack.grid-stack > .grid-stack-placeholder > .placeholder-content {
  border: 2px dotted var(--mat-sys-primary);
  border-radius: 14px;
  background: var(--mat-sys-primary-container);
}

@media (max-width: 700px) {
  .advanced-grid-stack.grid-stack {
    padding: 8px;
  }
}
html {
  min-height: 100%;
  background: var(--surface);
}

body {
  margin: 0;
  min-height: 100dvh;
  color: var(--text);
  background: var(--surface);
}

ngs-root {
  display: block;
  min-height: 100dvh;
  background: var(--surface);
}

button,
textarea {
  font: inherit;
}

.page-shell {
  max-width: 1240px;
  margin: 0 auto;
  padding: 48px 24px 64px;
}

.hero,
.section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.eyebrow {
  margin: 0 0 8px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

h1,
h2 {
  margin: 0;
  letter-spacing: -0.04em;
}

h1 {
  max-width: 700px;
  font-size: clamp(34px, 6vw, 64px);
  line-height: 0.98;
}

h2 {
  font-size: 24px;
}

.lede {
  max-width: 620px;
  margin: 18px 0 0;
  color: #64748b;
  font-size: 17px;
  line-height: 1.6;
}

.framework-badge {
  border: 1px solid var(--primary-border);
  border-radius: 999px;
  padding: 10px 14px;
  color: var(--primary);
  background: var(--primary-soft);
  font-size: 13px;
  font-weight: 800;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 36px 0 14px;
}

.status {
  min-height: 24px;
  margin: 28px 0 18px;
  color: #64748b;
  font-size: 14px;
}

.grid-stack {
  min-height: 310px;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 16px;
  background: #e9eef7;
  box-shadow: 0 18px 50px rgba(25, 44, 82, 0.08);
}

.grid-stack > .grid-stack-placeholder > .placeholder-content {
  border: 2px dotted var(--primary);
  border-radius: 14px;
  background: var(--primary-soft);
}

.grid-stack-item-content {
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(21, 34, 56, 0.14);
}

:root[data-theme=dark] .app-header,
:root[data-theme=dark] .grid-stack-item-content,
:root[data-theme=dark] .json-panel {
  color: var(--text);
  background: var(--surface-card);
  border-color: var(--border);
}

:root[data-theme=dark] .page-shell, :root[data-theme=dark] .advanced-page, :root[data-theme=dark] .scalability-page {
  color: var(--text);
  background: var(--surface);
}

:root[data-theme=dark] .grid-stack, :root[data-theme=dark] .advanced-grid-stack.grid-stack, :root[data-theme=dark] .scalability-grid-stack.grid-stack {
  background: #1e293b;
  border-color: var(--border);
}

:root[data-theme=dark] .chart-widget, :root[data-theme=dark] .widget-header, :root[data-theme=dark] .data-table-widget-header, :root[data-theme=dark] .scalability-widget-header, :root[data-theme=dark] textarea {
  color: var(--text);
}

:root[data-theme=dark] textarea {
  background: #0f172a;
  border-color: var(--border);
}

:root[data-theme=dark] .app-header__locale select, :root[data-theme=dark] .advanced-page .mat-mdc-text-field-wrapper, :root[data-theme=dark] .scalability-page .mat-mdc-text-field-wrapper {
  color: var(--text);
  background: var(--surface-card);
  border-color: var(--border);
}

:root[data-theme=dark] .advanced-select-panel, :root[data-theme=dark] .scalability-select-panel {
  color: var(--text);
  background: var(--surface-card);
}

:root[data-theme=dark] .data-table-widget, :root[data-theme=dark] .data-table-widget table, :root[data-theme=dark] .data-table-widget .mat-mdc-table {
  color: var(--text);
  background: var(--surface-card);
}

:root[data-theme=dark] .data-table-widget th, :root[data-theme=dark] .data-table-widget td {
  color: var(--text);
  border-color: var(--border);
}

:root[data-theme=dark] .eyebrow, :root[data-theme=dark] .lede, :root[data-theme=dark] .status, :root[data-theme=dark] .advanced-status, :root[data-theme=dark] .scalability-status, :root[data-theme=dark] .advanced-eyebrow, :root[data-theme=dark] .scalability-eyebrow, :root[data-theme=dark] .hint, :root[data-theme=dark] .empty-state, :root[data-theme=dark] .data-table-selection {
  color: var(--muted) !important;
}

:root[data-theme=dark] .grid-stack > .grid-stack-placeholder > .placeholder-content, :root[data-theme=dark] .advanced-grid-stack .grid-stack-placeholder > .placeholder-content, :root[data-theme=dark] .scalability-grid-stack .grid-stack-placeholder > .placeholder-content {
  border: 2px solid var(--primary) !important;
  background: color-mix(in srgb, color-mix(in srgb, var(--primary) 30%, white) 60%, transparent) !important;
}

:root[data-theme=dark] .mat-mdc-form-field, :root[data-theme=dark] .mat-mdc-input-element, :root[data-theme=dark] .mat-mdc-select-value, :root[data-theme=dark] .mat-mdc-form-field label {
  color: var(--text) !important;
  caret-color: var(--primary);
}

:root[data-theme=dark] .mat-mdc-text-field-wrapper, :root[data-theme=dark] .mat-mdc-select-panel, :root[data-theme=dark] .mat-mdc-paginator, :root[data-theme=dark] .mat-mdc-table {
  background: var(--surface-card) !important;
}

:root[data-theme=dark] .mat-mdc-paginator, :root[data-theme=dark] .mat-mdc-paginator-page-size-label, :root[data-theme=dark] .mat-mdc-paginator-range-label, :root[data-theme=dark] .mat-sort-header-content {
  color: var(--text) !important;
}

:root[data-theme=dark] .mat-mdc-icon-button, :root[data-theme=dark] .mat-sort-header-arrow {
  color: #64748b !important;
}

:root[data-theme=dark] button.mat-mdc-button-base {
  --mdc-filled-button-container-color: var(--primary);
  --mdc-filled-button-label-text-color: #fff;
}

:root[data-theme=dark] .mat-mdc-unelevated-button, :root[data-theme=dark] .mat-mdc-raised-button {
  background: var(--primary) !important;
  color: #fff !important;
}

:root[data-theme=dark] {
  --table-row-hover: #243249;
  --table-row-selected: #334155;
  --table-row-selected-hover: #3f4d63;
}

:root[data-theme=dark] .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline__leading,
:root[data-theme=dark] .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline__notch,
:root[data-theme=dark] .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline__trailing {
  border-color: #64748b !important;
}

:root[data-theme=dark] .mat-mdc-text-field-wrapper.mdc-text-field--outlined:hover .mdc-notched-outline__leading,
:root[data-theme=dark] .mat-mdc-text-field-wrapper.mdc-text-field--outlined:hover .mdc-notched-outline__notch,
:root[data-theme=dark] .mat-mdc-text-field-wrapper.mdc-text-field--outlined:hover .mdc-notched-outline__trailing {
  border-color: #fff !important;
}

:root[data-theme=dark] .mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,
:root[data-theme=dark] .mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,
:root[data-theme=dark] .mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing {
  border-color: var(--primary) !important;
}

:root[data-theme=dark] .mat-mdc-form-field.mat-form-field-invalid .mdc-notched-outline__leading,
:root[data-theme=dark] .mat-mdc-form-field.mat-form-field-invalid .mdc-notched-outline__notch,
:root[data-theme=dark] .mat-mdc-form-field.mat-form-field-invalid .mdc-notched-outline__trailing {
  border-color: var(--error) !important;
}

:root[data-theme=dark] .mat-mdc-form-field.mat-form-field-invalid .mdc-floating-label {
  color: var(--error) !important;
}

:root[data-theme=dark] .mat-mdc-form-field.mat-form-field-disabled .mdc-notched-outline__leading,
:root[data-theme=dark] .mat-mdc-form-field.mat-form-field-disabled .mdc-notched-outline__notch,
:root[data-theme=dark] .mat-mdc-form-field.mat-form-field-disabled .mdc-notched-outline__trailing {
  border-color: #64748b !important;
  opacity: 0.55;
}

:root[data-theme=dark] .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-input-element,
:root[data-theme=dark] .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-value,
:root[data-theme=dark] .mat-mdc-form-field.mat-form-field-disabled .mdc-floating-label {
  color: var(--muted) !important;
  opacity: 0.55;
}

:root[data-theme=dark] .mat-mdc-select-arrow,
:root[data-theme=dark] .mat-mdc-select-value-text,
:root[data-theme=dark] .mat-mdc-form-field-hint,
:root[data-theme=dark] .mat-mdc-form-field-error {
  color: var(--text) !important;
}

:root[data-theme=dark] .mat-mdc-form-field-error {
  color: var(--error) !important;
}

:root[data-theme=dark] .mat-mdc-option {
  color: #fff !important;
  background: var(--surface-card) !important;
}

:root[data-theme=dark] .mat-mdc-option:hover,
:root[data-theme=dark] .mat-mdc-option.mdc-list-item--selected {
  background: #243249 !important;
}

:root[data-theme=dark] .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text {
  color: var(--primary) !important;
}

:root[data-theme=dark] .mat-mdc-slide-toggle .mdc-label,
:root[data-theme=dark] .mat-mdc-list-item,
:root[data-theme=dark] .mat-mdc-list-item .mdc-list-item__primary-text,
:root[data-theme=dark] .mat-mdc-checkbox .mdc-form-field > label {
  color: #fff !important;
}

:root[data-theme=dark] .mat-mdc-checkbox .mdc-checkbox__background,
:root[data-theme=dark] .mat-mdc-list-option .mdc-checkbox__background {
  border-color: #64748b !important;
}

:root[data-theme=dark] .mat-mdc-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background,
:root[data-theme=dark] .mat-mdc-list-option[aria-selected=true] .mdc-checkbox__background {
  border-color: var(--primary) !important;
  background-color: var(--primary) !important;
}

:root[data-theme=dark] .mat-mdc-paginator .mat-mdc-icon-button:disabled {
  color: #64748b !important;
  opacity: 0.45;
}

:root[data-theme=dark] .data-table-row:hover {
  background: var(--table-row-hover) !important;
}

:root[data-theme=dark] .data-table-row-selected {
  background: var(--table-row-selected) !important;
}

:root[data-theme=dark] .data-table-row-selected:hover {
  background: var(--table-row-selected-hover) !important;
}

.chart-widget {
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px 8px;
  color: #152238;
}

.chart-widget-heading {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.chart-widget-heading strong {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-widget-type {
  color: #94a3b8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.chart-widget-canvas {
  min-width: 0;
  min-height: 120px;
  flex: 1;
}

.chart-widget-canvas .echarts-chart {
  display: block;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
}

.chart-widget-canvas .echarts-chart,
.chart-widget-canvas .echarts-chart svg {
  max-width: 100%;
}

.demo-widget {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  color: white;
}

.demo-widget-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  opacity: 0.72;
  text-transform: uppercase;
}

.demo-widget strong {
  font-size: clamp(16px, 2vw, 22px);
}

.demo-widget small {
  opacity: 0.78;
}

.empty-state {
  padding: 40px;
  color: #64748b;
  text-align: center;
}

.json-panel {
  margin-top: 28px;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 22px;
  background: white;
}

.hint {
  color: #94a3b8;
  font-size: 13px;
}

textarea {
  width: 100%;
  min-height: 210px;
  margin-top: 18px;
  resize: vertical;
  border: 1px solid #d6deea;
  border-radius: 12px;
  padding: 14px;
  color: #334155;
  background: #f8fafc;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  line-height: 1.6;
}

@media (max-width: 700px) {
  .page-shell {
    padding: 32px 14px 44px;
  }
  .hero,
  .section-heading {
    flex-direction: column;
  }
  .framework-badge {
    align-self: flex-start;
  }
  .grid-stack {
    padding: 8px;
  }
}

/*# sourceMappingURL=styles.css.map*/