html, body {
    height: 100%;
}

app {
    display: block;
    height: 100%;
}

/*.header-logo {
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url('../images/Logo.svg');
    mask: url('../images/Logo.svg');
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    width: 28px;
    height: 24px;
}*/

.header-logo {
    background-image: url(../images/Logo.svg);
    width: 200px;
    height: 44px;
    background-position: left center;
    background-size: contain;
    background-repeat: no-repeat;
}

[data-ice-theme="dark"] .header-logo,
[data-bs-theme="dark"] .header-logo {
    background-image: url(../images/Logo-dark.svg);
}

#blazor-error-ui {
    background: inherit;
    bottom: 0;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100001;
}

.workbench-operations-grid {
    height: 55vh;
    overflow: auto;
}

.workbench-operations-grid .dxbl-grid {
    height: 49vh !important;
}

.workbench-components-grid {
    height: 17.5vh;
}

.workbench-components-grid .dxbl-grid {
    height: 18vh !important;
}

/* WorkBench right action panel compact spacing */
.workbench-button-panel .dxbl-fl-group-content,
.workbench-button-panel .dxbl-fl-item-content,
.workbench-button-panel .dxbl-fl-item {
    padding: 2px !important;
}

.workbench-button-panel .workbench-operation-buttons .dxbl-fl-group-content,
.workbench-button-panel .workbench-operation-buttons .dxbl-fl-item-content {
    gap: 4px !important;
}

/* External Operation Delivery highlight group rows */
.eod-green-groups .dxbl-group-row,
.eod-green-groups .dxbl-grid-group-row {
    background-color: #e8f5e9 !important;
}

.eod-green-groups .dxbl-group-row .dxbl-group-cell,
.eod-green-groups .dxbl-grid-group-row .dxbl-group-cell {
    font-weight: 600;
}

.workorder-planning-main {
    --workorder-planning-gap: 8px;
    height: calc(100dvh - 140px);
    min-height: 0;
    overflow: hidden;
}

dxbl-drag-hint.workorder-planning-drag-hint,
.dxbl-grid-row-drag-hint.workorder-planning-drag-hint {
    width: auto !important;
    max-width: 320px !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

.workorder-planning-group-drop-target.workorder-planning-group-drop-hover {
    outline: 2px solid var(--dxbl-primary, #0d6efd);
    outline-offset: -2px;
}

.workorder-planning-main,
.workorder-planning-main > .dxbl-row,
.workorder-planning-grid-area,
.workorder-planning-grid-area > .dxbl-row,
.workorder-planning-top-row,
.workorder-planning-top-row > .dxbl-row,
.workorder-planning-bottom-row,
.workorder-planning-bottom-row > .dxbl-row,
.workorder-planning-top-row > .dxbl-row > .dxbl-fl-group,
.workorder-planning-bottom-row > .dxbl-row > .dxbl-fl-group,
.workorder-planning-grid-panel,
.workorder-planning-grid-panel > .dxbl-row,
.workorder-planning-grid-panel .dxbl-fl-item,
.workorder-planning-grid-panel .dxbl-fl-ctrl,
.workorder-planning-grid-panel .nested-frame,
.workorder-planning-grid-panel .nested-content,
.workorder-planning-grid-panel .grid-content {
    min-height: 0 !important;
}

.workorder-planning-main > .dxbl-row {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    height: calc(100% + 8px);
    overflow: hidden;
}

.workorder-planning-filter {
    flex: 0 0 auto;
    overflow: visible;
}

.workorder-planning-filter > .dxbl-row {
    justify-content: flex-start;
    min-height: 0 !important;
}

.workorder-planning-filter > .dxbl-row > .dxbl-fl-item {
    flex: 0 1 380px !important;
    width: min(100%, 380px) !important;
    max-width: 380px !important;
}

.workorder-planning-grid-area {
    flex: 1 1 auto !important;
    overflow: hidden;
}

.workorder-planning-grid-area > .dxbl-row {
    display: grid;
    grid-template-rows: minmax(0, 1.08fr) minmax(0, 1fr);
    gap: var(--workorder-planning-gap);
    height: calc(100% + 8px);
    overflow: hidden;
}

.workorder-planning-top-row,
.workorder-planning-bottom-row {
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden;
}

.workorder-planning-top-row > .dxbl-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--workorder-planning-gap);
    height: calc(100% + 8px);
    overflow: hidden;
}

.workorder-planning-top-row > .dxbl-row > .workorder-planning-grid-panel {
    width: 100% !important;
    max-width: 100% !important;
}

.workorder-planning-bottom-row > .dxbl-row,
.workorder-planning-top-row > .dxbl-row > .dxbl-fl-group,
.workorder-planning-bottom-row > .dxbl-row > .dxbl-fl-group {
    height: 100%;
    overflow: hidden;
}

.workorder-planning-top-row .workorder-planning-planned-panel {
    order: 2;
}

.workorder-planning-top-row .workorder-planning-unplanned-panel {
    order: 1;
}

.workorder-planning-grid-panel {
    height: 100%;
    overflow: hidden;
}

.workorder-planning-grid-panel > .dxbl-row {
    display: flex;
    flex-direction: column;
    height: calc(100% + 8px);
    overflow: hidden;
}

.workorder-planning-grid-panel > .dxbl-row > .dxbl-fl-item {
    flex: 1 1 0 !important;
    height: 100%;
    overflow: hidden;
}

.workorder-planning-grid-panel .dxbl-fl-ctrl,
.workorder-planning-grid-panel .nested-frame,
.workorder-planning-grid-panel .nested-content,
.workorder-planning-grid-panel .grid-content {
    height: 100%;
    overflow: hidden;
}

.workorder-planning-grid-panel .nested-frame {
    display: flex;
    flex-direction: column;
}

.workorder-planning-grid-panel .nested-content {
    flex: 1 1 0;
}

.workorder-planning-grid-panel .grid-content {
    overflow: auto;
}

.workorder-planning-grid-panel .dxbl-grid,
.workorder-planning-grid-panel .dxbl-grid-root,
.workorder-planning-grid-panel .workorder-planning-pivot,
.workorder-planning-grid-panel .workorder-planning-pivot-table,
.workorder-planning-grid-panel .dxbl-pivot-grid,
.workorder-planning-grid-panel .dxbl-pivotgrid,
.workorder-planning-grid-panel .dxbl-pivottable {
    height: 100% !important;
    min-height: 0 !important;
}

.workorder-planning-grid-panel .dxbl-grid-table {
    height: auto !important;
    min-height: 0 !important;
}

.workorder-planning-grid-panel .dxbl-grid,
.workorder-planning-grid-panel .workorder-planning-pivot-table,
.workorder-planning-grid-panel .dxbl-pivot-grid,
.workorder-planning-grid-panel .dxbl-pivotgrid,
.workorder-planning-grid-panel .dxbl-pivottable {
    overflow: auto;
}

.workorder-planning-pivot {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 6px;
    height: 100%;
    min-height: 0;
}

.workorder-planning-pivot-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.workorder-planning-pivot-record-count {
    font-size: 12px;
    opacity: 0.8;
}

.workorder-planning-pivot-table {
    min-height: 0;
    overflow: auto;
}

.workorder-pivot-progress-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 120px;
}

.workorder-pivot-progress-track {
    position: relative;
    flex: 1 1 auto;
    min-width: 72px;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background-color: var(--dxbl-disabled-color, rgba(0, 0, 0, 0.15));
}

.workorder-pivot-progress-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2383e2 0%, #20a464 100%);
}

.workorder-pivot-progress-text {
    min-width: 50px;
    text-align: right;
    white-space: nowrap;
    font-size: 11px;
}

/* ==========================================================================
   Work Order Planning V2 (Modern Workspace) Styles
   ========================================================================== */

.workorder-planning-v2-main {
    --workorder-planning-gap: 8px;
    height: calc(100dvh - 140px);
    min-height: 0;
    overflow: hidden;
}

.workorder-planning-v2-main > .dxbl-row {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--workorder-planning-gap) !important;
    height: 100% !important;
    overflow: hidden !important;
}

.workorder-planning-v2-main .workorder-planning-v2-kpi-row {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
}

.workorder-planning-v2-main .workorder-planning-v2-kpi-row > .dxbl-row,
.workorder-planning-v2-main .workorder-planning-v2-kpi-row .dxbl-fl-item,
.workorder-planning-v2-main .workorder-planning-v2-kpi-row .dxbl-fl-ctrl {
    height: auto !important;
    min-height: 0 !important;
}

.workorder-planning-v2-main .workorder-planning-workspace-area {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
}

.workorder-planning-v2-main .workorder-planning-workspace-area > .dxbl-row,
.workorder-planning-v2-main .workorder-planning-workspace-area .dxbl-fl-item,
.workorder-planning-v2-main .workorder-planning-workspace-area .dxbl-fl-ctrl {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.workorder-planning-v2-workspace-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    gap: 8px;
}

.workspace-top-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 8px 12px;
    background: var(--bs-card-bg, #ffffff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
}

.workspace-main-content {
    display: grid;
    grid-template-columns: 310px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 8px 12px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.global-search-wrapper {
    min-width: 280px;
    max-width: 400px;
}

.global-search-dxtext .dxbl-text-edit {
    border-radius: 6px;
    background: #f8fafc;
    border-color: #cbd5e1;
}

.global-search-dxtext .dxbl-text-edit:focus-within {
    background: #ffffff;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* ==========================================================================
   Left Panel: Unplanned Work Orders Pool
   ========================================================================== */

.workspace-unplanned-pool {
    display: flex;
    flex-direction: column;
    background: var(--bs-card-bg, #ffffff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 8px;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.pool-header {
    padding: 10px 12px;
    border-bottom: 1px solid var(--bs-border-color, #e9ecef);
    background: #f8fafc;
}

.pool-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.pool-title {
    font-weight: 700;
    font-size: 13px;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pool-count-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    background: #e2e8f0;
    color: #475569;
}

.pool-search-box {
    margin-bottom: 6px;
}

.pool-search-input {
    font-size: 12px;
    border-radius: 6px;
}

.pool-priority-pills {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.priority-pill {
    background: #fff;
    border: 1px solid #cbd5e1;
    color: #64748b;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.priority-pill.active {
    background: #0d6efd;
    color: #fff;
    border-color: #0d6efd;
}

.priority-pill-critical.active {
    background: #dc3545;
    border-color: #dc3545;
}

.priority-pill-high.active {
    background: #fd7e14;
    border-color: #fd7e14;
}

.priority-pill-normal.active {
    background: #0d6efd;
    border-color: #0d6efd;
}

.pool-cards-list {
    flex: 1 1 0;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: background 0.15s ease;
}

.workspace-unplanned-pool.pool-dragover,
.pool-cards-list.pool-dragover {
    background-color: rgba(13, 110, 253, 0.08) !important;
    outline: 2px dashed #0d6efd !important;
    outline-offset: -2px;
}

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

.empty-icon {
    font-size: 28px;
    margin-bottom: 6px;
}

.empty-text {
    font-size: 12px;
}

.unplanned-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #0d6efd;
    border-radius: 6px;
    padding: 8px 10px;
    cursor: grab;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.unplanned-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}

.unplanned-card.card-priority-critical {
    border-left-color: #dc3545;
}

.unplanned-card.card-priority-high {
    border-left-color: #fd7e14;
}

.unplanned-card.card-priority-normal {
    border-left-color: #0d6efd;
}

.unplanned-card.card-priority-low {
    border-left-color: #94a3b8;
}

.unplanned-card.card-overdue {
    background: rgba(220, 53, 69, 0.03);
}

.unplanned-card.card-selected,
.planned-wo-card.card-selected {
    border-color: #0d6efd !important;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.35) !important;
    background: #f0f7ff !important;
}

.card-select-check,
.card-select-toggle,
.card-select-dxcheck {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    line-height: 1;
}

.card-select-dxcheck .dxbl-checkbox-check {
    width: 16px;
    height: 16px;
}

.pool-bulk-action-bar {
    background: #e0f2fe;
    border: 1px solid #bae6fd;
    border-radius: 6px;
    padding: 6px 8px;
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bulk-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    color: #0369a1;
}

.bulk-main-stat {
    font-size: 11.5px;
    font-weight: 700;
    color: #0369a1;
}

.bulk-mini-stats-row {
    font-size: 10.5px;
    font-weight: 600;
    margin-top: 2px;
}

.bulk-mat-pill {
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
}

.bulk-mat-pill.pill-ready {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.bulk-mat-pill.pill-missing {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.bulk-op-stat {
    font-size: 10px;
    font-weight: 600;
    color: #475569;
    background: #f1f5f9;
    padding: 1px 6px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}

.bulk-btns-row {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.unplanned-card.card-dragging,
.planned-wo-card.card-dragging,
.gantt-op-block.block-dragging {
    opacity: 0.45 !important;
    border-style: dashed !important;
}

.card-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-wo-no {
    font-weight: 700;
    font-size: 12px;
    color: #0f172a;
}

.card-so-badge {
    font-size: 9.5px;
    font-weight: 600;
    color: #0284c7;
    background: #e0f2fe;
    padding: 1px 4px;
    border-radius: 3px;
    border: 1px solid #bae6fd;
    white-space: nowrap;
}

.card-priority-badge {
    font-size: 10px;
}

.card-part-name {
    font-size: 11px;
    color: #334155;
    margin: 2px 0 1px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.card-customer-row {
    font-size: 10px;
    color: #475569;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 3px;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-customer-row .customer-icon {
    font-size: 10.5px;
    color: #64748b;
    flex-shrink: 0;
}

.card-bottom-row {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #64748b;
}

.card-actions-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    padding-top: 4px;
    border-top: 1px dashed #e2e8f0;
}

.card-quick-plan-btn {
    font-size: 10px;
    padding: 1px 6px;
}

.card-drag-hint {
    font-size: 10px;
    color: #94a3b8;
}

/* ==========================================================================
   Right Panel: Interactive Work Center Timeline / Gantt
   ========================================================================== */

/* ==========================================================================
   Right Panel: Day-Based Work Order Planning Board & Capacity Panel
   ========================================================================== */

.workspace-day-board {
    display: flex;
    flex-direction: column;
    background: var(--bs-card-bg, #ffffff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 8px;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.board-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--bs-border-color, #e9ecef);
    background: #f8fafc;
    flex-shrink: 0;
}

.board-nav-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.board-current-period {
    font-weight: 600;
    font-size: 12px;
    color: #1e293b;
    margin-left: 6px;
}

.board-capacity-legend {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    color: #64748b;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.dot-normal { background-color: #10b981; }
.dot-optimum { background-color: #f59e0b; }
.dot-overload { background-color: #ef4444; }

.board-view-modes {
    display: flex;
    gap: 4px;
}

/* Day Columns Grid */
.day-columns-container {
    flex: 1 1 0;
    overflow-x: auto;
    overflow-y: hidden;
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
    display: flex;
    min-height: 0;
}

.day-columns-grid {
    display: grid;
    width: max-content;
    min-width: 100%;
    height: 100%;
    gap: 1px;
    background: #e2e8f0;
}

.day-column {
    background: #ffffff;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 175px;
    overflow: hidden;
}

.day-today {
    background: rgba(13, 110, 253, 0.02);
}

.day-weekend {
    background: #fbfcfe;
}

.day-column-header {
    padding: 8px;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
    text-align: center;
    flex-shrink: 0;
}

.day-today .day-column-header {
    background: rgba(13, 110, 253, 0.1);
}

.day-name-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.day-name {
    font-weight: 700;
    font-size: 12px;
    color: #1e293b;
}

.day-date {
    font-size: 11px;
    color: #64748b;
}

.day-today-pill {
    font-size: 9px;
    padding: 1px 4px;
}

.day-summary-badge {
    font-size: 10px;
    color: #475569;
    margin-top: 3px;
    display: flex;
    justify-content: center;
    gap: 4px;
    font-weight: 500;
}

.day-column-body {
    flex: 1 1 0;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: background 0.15s ease;
}

.day-column-body.slot-dragover {
    background: rgba(13, 110, 253, 0.15) !important;
    outline: 2px dashed #0d6efd !important;
    outline-offset: -2px;
}

/* Planned Work Order Cards */
.planned-wo-card {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-left: 4px solid #0d6efd;
    border-radius: 6px;
    padding: 6px 8px;
    cursor: grab;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.planned-wo-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}

.planned-wo-card.card-priority-critical { border-left-color: #dc3545; }
.planned-wo-card.card-priority-high { border-left-color: #fd7e14; }
.planned-wo-card.card-priority-normal { border-left-color: #0d6efd; }
.planned-wo-card.card-priority-low { border-left-color: #94a3b8; }
.planned-wo-card.card-overdue { background: #fef2f2; }

.planned-wo-card.drop-target-above {
    border-top: 3px solid #0d6efd !important;
    transform: translateY(2px);
}

.planned-wo-card.drop-target-below {
    border-bottom: 3px solid #0d6efd !important;
    transform: translateY(-2px);
}

.planned-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.planned-card-seq-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
    padding-bottom: 2px;
    border-bottom: 1px dashed #e2e8f0;
}

.planned-card-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

.btn-seq-nav {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 8.5px;
    line-height: 1;
    padding: 1px 4px !important;
    min-width: 0 !important;
    cursor: pointer;
    border-radius: 3px;
}

.btn-seq-nav:hover:not(:disabled) {
    background: #e2e8f0;
    color: #0f172a;
}

.btn-seq-nav:disabled {
    opacity: 0.25;
    cursor: default;
}

.btn-unplan-x {
    background: #fee2e2;
    border: 1px solid #fecaca;
    color: #dc2626;
    font-size: 8.5px;
    line-height: 1;
    padding: 1px 4px !important;
    min-width: 0 !important;
    cursor: pointer;
    border-radius: 3px;
}

.btn-unplan-x:hover {
    background: #fca5a5;
    color: #991b1b;
}

.planned-card-title {
    display: flex;
    align-items: center;
    gap: 4px;
}

.planned-seq-badge {
    font-size: 8.5px;
    font-weight: 600;
    padding: 1px 4px;
    background: #f8fafc;
    color: #475569;
}

.planned-wo-no {
    font-weight: 700;
    font-size: 11px;
    color: #0f172a;
}

.planned-card-part-name {
    font-size: 11px;
    color: #334155;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.planned-card-meta {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #64748b;
    margin-bottom: 3px;
}

.card-material-status-row {
    margin-bottom: 4px;
}

.badge-mat-ready {
    background-color: rgba(16, 185, 129, 0.12);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.3);
    font-size: 8px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    display: inline-block;
}

.badge-mat-partial {
    background-color: rgba(245, 158, 11, 0.12);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.3);
    font-size: 8px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    display: inline-block;
}

.badge-mat-missing {
    background-color: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.25);
    font-size: 8px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    display: inline-block;
}

.planned-card-ops {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    padding-top: 4px;
    border-top: 1px dashed #e2e8f0;
}

.op-mini-tag {
    font-size: 8px;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    border-radius: 3px;
    padding: 1px 4px;
    white-space: nowrap;
}

.card-op-tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: 2px 0;
}

.card-op-mini-pill {
    font-size: 8px;
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
    border-radius: 3px;
    padding: 0 4px;
}

.day-empty-drop-target {
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    padding: 12px 6px;
    text-align: center;
    background: #fafafa;
}

/* ==========================================================================
   Bottom Panel: Synchronized Work Center Capacity Load Matrix
   ========================================================================== */

/* Bottom-Left: Work Center Names (Under Unplanned Pool) */
.workspace-capacity-wc-labels {
    background: var(--bs-card-bg, #ffffff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.cap-wc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    height: 30px;
}

.cap-wc-header-title {
    font-weight: 700;
    font-size: 11px;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 5px;
}

.cap-standard-hint {
    color: #64748b;
    font-size: 9.5px;
}

.cap-wc-labels-list {
    display: flex;
    flex-direction: column;
    max-height: 190px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}

.cap-wc-label-row {
    height: 38px;
    min-height: 38px;
    padding: 3px 10px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cap-wc-label-row:last-child {
    border-bottom: none;
}

.cap-wc-label-row.row-total-factory {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #f1f5f9;
    border-bottom: 2px solid #cbd5e1;
}

.cap-wc-label-row.row-total-factory .cap-wc-name {
    color: #0f172a;
    font-weight: 700;
}

.cap-wc-name {
    font-weight: 600;
    font-size: 10px;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cap-wc-code {
    font-size: 8px;
    color: #94a3b8;
}

/* Bottom-Right: Synchronized Capacity Load Cells (Under Day Board) */
.workspace-capacity-matrix-grid {
    background: var(--bs-card-bg, #ffffff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.cap-matrix-header-spacer {
    height: 30px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    padding: 0 8px;
    font-size: 10px;
    color: #64748b;
    font-weight: 600;
    flex-shrink: 0;
    width: max-content;
    min-width: 100%;
}

.cap-matrix-body-scroll {
    max-height: 190px;
    overflow-y: auto;
    overflow-x: visible;
    scrollbar-width: thin;
    width: max-content;
    min-width: 100%;
}

.cap-matrix-days-grid {
    display: grid;
    width: max-content;
    min-width: 100%;
    gap: 1px;
    background: #e2e8f0;
}

.cap-day-column {
    background: #ffffff;
    display: flex;
    flex-direction: column;
    min-width: 175px;
}

.cap-day-column.cell-today {
    background: rgba(13, 110, 253, 0.02);
}

.cap-day-column.cell-weekend {
    background: #fbfcfe;
}

.cap-cell-wrapper {
    height: 38px;
    min-height: 38px;
    padding: 3px 6px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cap-cell-wrapper:last-child {
    border-bottom: none;
}

.cap-cell-wrapper.row-total-factory {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #f1f5f9;
    border-bottom: 2px solid #cbd5e1;
}

.cap-cell-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cap-cell-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 9px;
}

.cap-qty-text {
    color: #334155;
    font-weight: 600;
}

.cap-tfoot-row {
    background: #f1f5f9;
    border-top: 2px solid #cbd5e1;
}

.capacity-badge {
    font-size: 8px;
    font-weight: 700;
    padding: 0 3px;
    border-radius: 3px;
}

.badge-cap-normal {
    background-color: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.badge-cap-optimum {
    background-color: rgba(245, 158, 11, 0.15);
    color: #d97706;
}

.badge-cap-overload {
    background-color: rgba(239, 68, 68, 0.15);
    color: #dc2626;
    animation: pulse 1.5s infinite;
}

.badge-cap-empty {
    background-color: transparent;
    color: #94a3b8;
}

.capacity-bar-track {
    width: 100%;
    height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
    overflow: hidden;
}

.capacity-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.fill-cap-normal { background-color: #10b981; }
.fill-cap-optimum { background-color: #f59e0b; }
.fill-cap-overload { background-color: #ef4444; }

.workorder-planning-v2-kpi-container {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 4px;
    width: 100%;
}

.workorder-kpi-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--bs-border-color, #dee2e6);
    background-color: var(--bs-card-bg, #ffffff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.workorder-kpi-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}

.kpi-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    flex-shrink: 0;
}

.kpi-card-unplanned .kpi-icon-wrapper {
    background-color: rgba(255, 152, 0, 0.12);
    color: #f57c00;
}

.kpi-card-planned .kpi-icon-wrapper {
    background-color: rgba(13, 110, 253, 0.12);
    color: #0d6efd;
}

.kpi-card-delayed .kpi-icon-wrapper {
    background-color: rgba(220, 53, 69, 0.12);
    color: #dc3545;
}

.kpi-card-delayed.kpi-card-alert {
    border-color: rgba(220, 53, 69, 0.4);
    background-color: rgba(220, 53, 69, 0.03);
}

.kpi-card-progress .kpi-icon-wrapper {
    background-color: rgba(25, 135, 84, 0.12);
    color: #198754;
}

.kpi-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.kpi-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bs-secondary-color, #6c757d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kpi-value-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 2px;
}

.kpi-main-value {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--bs-body-color, #212529);
}

.kpi-sub-value {
    font-size: 11px;
    color: var(--bs-secondary-color, #6c757d);
    white-space: nowrap;
}

.kpi-progress-bar-wrapper {
    flex: 1 1 auto;
    height: 6px;
    background-color: var(--bs-tertiary-bg, #e9ecef);
    border-radius: 999px;
    overflow: hidden;
    margin-left: 4px;
}

.kpi-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #0d6efd, #198754);
    border-radius: inherit;
    transition: width 0.3s ease;
}

.workorder-planning-v2-pivot.pivot-collapsed {
    height: auto !important;
}

.workorder-planning-v2-pivot.pivot-collapsed .workorder-planning-pivot-table {
    display: none !important;
}

/* Dark theme overrides for Work Order Planning V2 */
[data-ice-theme="dark"] .workorder-kpi-card {
    background-color: #242526;
    border-color: #383a3d;
}

[data-ice-theme="dark"] .kpi-main-value {
    color: #e4e6eb;
}

[data-ice-theme="dark"] .kpi-label,
[data-ice-theme="dark"] .kpi-sub-value {
    color: #b0b3b8;
}

[data-ice-theme="dark"] .kpi-progress-bar-wrapper {
    background-color: #3a3b3c;
}

/* Bootstrap utilities (bg-light, text-dark, border*, *-subtle, table-light)
   read CSS variables that the DX dark theme leaves at their LIGHT values;
   re-point them once per scope instead of fighting their !important rules. */
[data-ice-theme="dark"] .workorder-planning-v2-workspace-container,
[data-ice-theme="dark"] .v2-popup-body {
    --bs-border-color: #383a3d;
    --bs-light-rgb: 47, 48, 49;
    --bs-dark-rgb: 228, 230, 235;
    --bs-info-rgb: 8, 60, 90;
    --bs-warning-bg-subtle: rgba(245, 158, 11, 0.12);
    --bs-warning-border-subtle: rgba(245, 158, 11, 0.35);
    --bs-warning-text-emphasis: #fcd34d;
    --bs-info-bg-subtle: rgba(56, 189, 248, 0.12);
    --bs-info-border-subtle: rgba(56, 189, 248, 0.35);
    --bs-info-text-emphasis: #7dd3fc;
}

/* Panels and toolbars */
[data-ice-theme="dark"] .workspace-top-filter-bar,
[data-ice-theme="dark"] .workspace-unplanned-pool,
[data-ice-theme="dark"] .workspace-day-board,
[data-ice-theme="dark"] .workspace-capacity-wc-labels,
[data-ice-theme="dark"] .workspace-capacity-matrix-grid {
    background: #242526;
    border-color: #383a3d;
}

[data-ice-theme="dark"] .pool-header,
[data-ice-theme="dark"] .board-toolbar,
[data-ice-theme="dark"] .cap-wc-header,
[data-ice-theme="dark"] .cap-matrix-header-spacer {
    background: #2f3031;
    border-color: #383a3d;
}

[data-ice-theme="dark"] .pool-title,
[data-ice-theme="dark"] .board-current-period {
    color: #e4e6eb;
}

[data-ice-theme="dark"] .pool-count-badge {
    background: #3a3b3c;
    color: #c9ccd1;
}

[data-ice-theme="dark"] .board-capacity-legend,
[data-ice-theme="dark"] .cap-standard-hint,
[data-ice-theme="dark"] .cap-matrix-header-spacer,
[data-ice-theme="dark"] .pool-empty-state {
    color: #b0b3b8;
}

[data-ice-theme="dark"] .cap-wc-header-title {
    color: #c9ccd1;
}

[data-ice-theme="dark"] .priority-pill {
    background: #2f3031;
    border-color: #4a4b4d;
    color: #b0b3b8;
}

[data-ice-theme="dark"] .global-search-dxtext .dxbl-text-edit {
    background: #2f3031;
    border-color: #4a4b4d;
}

[data-ice-theme="dark"] .global-search-dxtext .dxbl-text-edit:focus-within {
    background: #242526;
}

/* Day board grid */
[data-ice-theme="dark"] .day-columns-container {
    background: #242526;
    border-bottom-color: #383a3d;
}

[data-ice-theme="dark"] .day-columns-grid,
[data-ice-theme="dark"] .cap-matrix-days-grid {
    background: #383a3d;
}

[data-ice-theme="dark"] .day-column,
[data-ice-theme="dark"] .cap-day-column {
    background: #242526;
}

[data-ice-theme="dark"] .day-weekend,
[data-ice-theme="dark"] .cap-day-column.cell-weekend {
    background: #222324;
}

[data-ice-theme="dark"] .day-today,
[data-ice-theme="dark"] .cap-day-column.cell-today {
    background: rgba(13, 110, 253, 0.08);
}

[data-ice-theme="dark"] .day-column-header {
    background: #2f3031;
    border-bottom-color: #383a3d;
}

[data-ice-theme="dark"] .day-today .day-column-header {
    background: rgba(13, 110, 253, 0.22);
}

[data-ice-theme="dark"] .day-name {
    color: #e4e6eb;
}

[data-ice-theme="dark"] .day-date,
[data-ice-theme="dark"] .day-summary-badge {
    color: #b0b3b8;
}

[data-ice-theme="dark"] .day-column.day-non-working,
[data-ice-theme="dark"] .cap-day-column.day-non-working {
    background: repeating-linear-gradient(
        -45deg,
        #202122,
        #202122 10px,
        #28292b 10px,
        #28292b 20px
    ) !important;
    border-color: #383a3d !important;
}

[data-ice-theme="dark"] .day-empty-drop-target {
    background: #202122;
    border-color: #4a4b4d;
}

/* Cards */
[data-ice-theme="dark"] .unplanned-card,
[data-ice-theme="dark"] .planned-wo-card {
    background: #2b2c2e;
    border-top-color: #4a4b4d;
    border-right-color: #4a4b4d;
    border-bottom-color: #4a4b4d;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

[data-ice-theme="dark"] .card-wo-no,
[data-ice-theme="dark"] .planned-wo-no {
    color: #e4e6eb;
}

[data-ice-theme="dark"] .card-part-name,
[data-ice-theme="dark"] .planned-card-part-name {
    color: #c9ccd1;
}

[data-ice-theme="dark"] .card-customer-row {
    color: #b0b3b8;
}

[data-ice-theme="dark"] .card-customer-row .customer-icon {
    color: #8a8d91;
}

[data-ice-theme="dark"] .card-bottom-row,
[data-ice-theme="dark"] .planned-card-meta {
    color: #b0b3b8;
}

[data-ice-theme="dark"] .card-drag-hint {
    color: #8a8d91;
}

[data-ice-theme="dark"] .card-actions-row,
[data-ice-theme="dark"] .planned-card-seq-row,
[data-ice-theme="dark"] .planned-card-ops {
    border-color: #3f4143;
}

[data-ice-theme="dark"] .unplanned-card.card-overdue {
    background: rgba(220, 53, 69, 0.1);
}

[data-ice-theme="dark"] .planned-wo-card.card-overdue {
    background: rgba(220, 53, 69, 0.12);
}

[data-ice-theme="dark"] .unplanned-card.card-selected,
[data-ice-theme="dark"] .planned-wo-card.card-selected {
    background: rgba(13, 110, 253, 0.18) !important;
}

[data-ice-theme="dark"] .planned-seq-badge {
    background: #3a3b3c;
    color: #c9ccd1;
}

[data-ice-theme="dark"] .btn-seq-nav {
    background: #3a3b3c;
    border-color: #4a4b4d;
    color: #c9ccd1;
}

[data-ice-theme="dark"] .btn-seq-nav:hover:not(:disabled) {
    background: #4a4b4d;
    color: #e4e6eb;
}

[data-ice-theme="dark"] .btn-unplan-x {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
    color: #f87171;
}

[data-ice-theme="dark"] .btn-unplan-x:hover {
    background: rgba(239, 68, 68, 0.3);
    color: #fecaca;
}

[data-ice-theme="dark"] .card-so-badge {
    background: rgba(56, 189, 248, 0.15);
    border-color: rgba(56, 189, 248, 0.35);
    color: #7dd3fc;
}

[data-ice-theme="dark"] .op-mini-tag {
    background: #3a3b3c;
    border-color: #4a4b4d;
    color: #c9ccd1;
}

[data-ice-theme="dark"] .card-op-mini-pill {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.35);
    color: #93c5fd;
}

[data-ice-theme="dark"] .badge-mat-ready { color: #34d399; }
[data-ice-theme="dark"] .badge-mat-partial { color: #fbbf24; }
[data-ice-theme="dark"] .badge-mat-missing { color: #f87171; }

/* Pool bulk selection bar */
[data-ice-theme="dark"] .pool-bulk-action-bar {
    background: rgba(56, 189, 248, 0.12);
    border-color: rgba(56, 189, 248, 0.3);
}

[data-ice-theme="dark"] .bulk-info-row,
[data-ice-theme="dark"] .bulk-main-stat {
    color: #7dd3fc;
}

[data-ice-theme="dark"] .bulk-mat-pill.pill-ready {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.35);
    color: #6ee7b7;
}

[data-ice-theme="dark"] .bulk-mat-pill.pill-missing {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}

[data-ice-theme="dark"] .bulk-op-stat {
    background: #3a3b3c;
    border-color: #4a4b4d;
    color: #c9ccd1;
}

/* Capacity matrix */
[data-ice-theme="dark"] .cap-wc-label-row,
[data-ice-theme="dark"] .cap-cell-wrapper {
    border-bottom-color: #383a3d;
}

[data-ice-theme="dark"] .cap-wc-label-row.row-total-factory,
[data-ice-theme="dark"] .cap-cell-wrapper.row-total-factory {
    background: #2f3031;
    border-bottom-color: #4a4b4d;
}

[data-ice-theme="dark"] .cap-wc-label-row.row-total-factory .cap-wc-name {
    color: #e4e6eb;
}

[data-ice-theme="dark"] .cap-wc-name {
    color: #c9ccd1;
}

[data-ice-theme="dark"] .cap-wc-code {
    color: #8a8d91;
}

[data-ice-theme="dark"] .cap-qty-text {
    color: #c9ccd1;
}

[data-ice-theme="dark"] .capacity-bar-track {
    background: #3a3b3c;
}

[data-ice-theme="dark"] .badge-cap-normal { color: #34d399; }
[data-ice-theme="dark"] .badge-cap-optimum { color: #fbbf24; }
[data-ice-theme="dark"] .badge-cap-overload { color: #f87171; }
[data-ice-theme="dark"] .badge-cap-empty { color: #8a8d91; }

[data-ice-theme="dark"] .cap-cell-non-working {
    background-color: rgba(58, 59, 60, 0.5);
    color: #8a8d91;
}

/* Non-working / holiday badges */
[data-ice-theme="dark"] .non-working-badge {
    background-color: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
    color: #fca5a5;
}

[data-ice-theme="dark"] .holiday-special-badge {
    background-color: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.4);
    color: #fcd34d;
}

/* Due-date lens paints card backgrounds with !important light tints */
[data-ice-theme="dark"] .lens-duedate .card-risk-overdue { background: rgba(239, 68, 68, 0.12) !important; }
[data-ice-theme="dark"] .lens-duedate .card-risk-imminent { background: rgba(245, 158, 11, 0.12) !important; }
[data-ice-theme="dark"] .lens-duedate .card-risk-ontime { background: rgba(16, 185, 129, 0.12) !important; }

/* Routing flow popup content */
[data-ice-theme="dark"] .routing-kpi-pill {
    background: #2f3031;
    border-color: #4a4b4d;
}

[data-ice-theme="dark"] .routing-kpi-pill .kpi-title {
    color: #b0b3b8;
}

[data-ice-theme="dark"] .routing-section-title {
    color: #e4e6eb;
}

[data-ice-theme="dark"] .routing-stepper-track {
    background: #242526;
    border-color: #383a3d;
}

[data-ice-theme="dark"] .routing-stepper-node {
    background: #2f3031;
    border-color: #4a4b4d;
}

[data-ice-theme="dark"] .routing-stepper-node.node-completed {
    background: rgba(25, 135, 84, 0.18);
    border-color: rgba(25, 135, 84, 0.45);
}

[data-ice-theme="dark"] .routing-stepper-node.node-inprogress {
    background: rgba(13, 110, 253, 0.18);
    border-color: rgba(13, 110, 253, 0.45);
}

[data-ice-theme="dark"] .routing-stepper-node .node-name {
    color: #e4e6eb;
}

[data-ice-theme="dark"] .routing-stepper-node .node-wc {
    color: #b0b3b8;
}

[data-ice-theme="dark"] .stepper-line {
    color: #4a4b4d;
}

[data-ice-theme="dark"] .routing-ops-table th,
[data-ice-theme="dark"] .routing-ops-table td {
    color: #c9ccd1;
}

[data-ice-theme="dark"] .v2-popup-body .table-light {
    --bs-table-bg: #2f3031;
    --bs-table-color: #c9ccd1;
    --bs-table-border-color: #383a3d;
}

[data-ice-theme="dark"] .routing-progress-track {
    background: #3a3b3c;
}

/* BOM drilldown popup content */
[data-ice-theme="dark"] .bom-kpi-summary-card {
    background: #2f3031;
    border-color: #4a4b4d;
}

[data-ice-theme="dark"] .bom-kpi-label {
    color: #b0b3b8;
}

[data-ice-theme="dark"] .bom-kpi-val {
    color: #e4e6eb;
}

[data-ice-theme="dark"] .bom-progress-bar-track {
    background: #3a3b3c;
}

[data-ice-theme="dark"] .bom-components-table th {
    background: #2f3031;
    color: #c9ccd1;
    border-bottom-color: #4a4b4d;
}

[data-ice-theme="dark"] .bom-components-table td {
    border-bottom-color: #383a3d;
}

[data-ice-theme="dark"] .bom-components-table tr:hover {
    background-color: #313234;
}

[data-ice-theme="dark"] .bom-comp-code {
    color: #e4e6eb;
}

[data-ice-theme="dark"] .bom-comp-name {
    color: #b0b3b8;
}

[data-ice-theme="dark"] .badge-supply-stock {
    background-color: rgba(56, 189, 248, 0.15);
    color: #7dd3fc;
}

[data-ice-theme="dark"] .badge-supply-po {
    background-color: rgba(245, 158, 11, 0.15);
    color: #fcd34d;
}

[data-ice-theme="dark"] .badge-supply-prod {
    background-color: rgba(167, 139, 250, 0.18);
    color: #c4b5fd;
}

@media (max-width: 1200px) {
    .workorder-planning-v2-kpi-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Nested batch grids are edited directly in cells; keep New and hide Detail View navigation. */
.nested-frame .xaf-grid-batchedit-mode button[data-action-id="ListViewShowObject"] {
    display: none !important;
}

@media (max-width: 1200px) {
    .workorder-planning-main {
        height: calc(100dvh - 120px);
    }
}

@media (max-width: 992px) {
    .workorder-planning-top-row > .dxbl-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

@media (max-width: 768px) {
    .workorder-planning-main {
        height: calc(100dvh - 96px);
    }
}

/* ── CRP Capacity Load Analysis ─────────────────────────────────────── */
.crp-analysis-main {
    height: calc(100dvh - 180px);
}

.crp-matrix {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: 6px;
}

.crp-matrix-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.crp-matrix-runinfo {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--bs-body-color, #445);
}

.crp-matrix-legend {
    display: flex;
    gap: 12px;
    font-size: 0.78rem;
    color: var(--bs-secondary-color, #556);
}

.crp-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.crp-legend-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.15));
}

.crp-matrix-empty {
    padding: 24px;
    text-align: center;
    color: var(--bs-secondary-color, #778);
    font-style: italic;
}

.crp-matrix-scroll {
    overflow: auto;
    flex: 1 1 auto;
    border: 1px solid var(--bs-border-color, #dde);
    border-radius: 6px;
}

.crp-matrix-table {
    border-collapse: separate;
    border-spacing: 0;
    width: max-content;
    table-layout: fixed;
    font-size: 0.78rem;
}

.crp-matrix-table th,
.crp-matrix-table td {
    border-right: 1px solid var(--bs-border-color, #e3e6ee);
    border-bottom: 1px solid var(--bs-border-color, #e3e6ee);
    padding: 4px 6px;
    white-space: nowrap;
    box-sizing: border-box;
}

.crp-matrix-colhead {
    background: var(--bs-tertiary-bg, #f8fafc);
    color: var(--bs-secondary-color, #475569);
    font-weight: 600;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 5;
    cursor: pointer;
    width: 86px;
    min-width: 86px;
    max-width: 86px;
    font-size: 11.5px;
    letter-spacing: 0.3px;
    padding: 6px 4px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 2px solid var(--bs-border-color, #e2e8f0) !important;
}

.crp-colhead-selected {
    outline: 2px solid #4f46e5;
    outline-offset: -2px;
    background: #e0e7ff !important;
}

.crp-matrix-rowhead-header {
    background: var(--bs-tertiary-bg, #f8fafc);
    color: var(--bs-secondary-color, #475569);
    position: sticky;
    left: 0;
    top: 0;
    z-index: 10;
    text-align: left;
    width: 240px;
    min-width: 240px;
    max-width: 240px;
    padding: 6px 10px !important;
    font-weight: 600;
    font-size: 12px;
    text-transform: none;
    letter-spacing: normal;
    border-right: 2px solid var(--bs-border-color, #cbd5e1) !important;
    border-bottom: 2px solid var(--bs-border-color, #e2e8f0) !important;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.04);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crp-matrix-rowhead {
    background: var(--bs-body-bg, #fbfcfe);
    position: sticky;
    left: 0;
    z-index: 4;
    cursor: pointer;
    width: 240px;
    min-width: 240px;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 5px 8px !important;
    border-right: 2px solid var(--bs-border-color, #cbd5e1) !important;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.04);
}

.crp-row-wc .crp-matrix-rowhead {
    font-weight: 600;
    background: var(--bs-secondary-bg, #f1f5f9);
}

.crp-matrix-rowhead-machine {
    padding-left: 22px !important;
    font-weight: 400;
    background: var(--bs-body-bg, #ffffff);
}

.crp-rowhead-code {
    font-weight: 600;
    font-size: 11.5px;
}

.crp-rowhead-name {
    color: var(--bs-secondary-color, #64748b);
    margin-left: 4px;
    font-weight: 400;
    font-size: 11px;
}

.crp-expander {
    display: inline-block;
    width: 14px;
    color: var(--bs-secondary-color, #64748b);
    font-size: 11px;
    cursor: pointer;
}

.crp-matrix-cell {
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    width: 86px;
    min-width: 86px;
    max-width: 86px;
    font-family: var(--bs-font-monospace, monospace);
    font-size: 11.5px;
    padding: 4px 2px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color 0.1s ease;
}

.crp-matrix-table tr:hover td:not(.crp-matrix-rowhead) {
    filter: brightness(0.96);
}

.crp-row-wc:hover .crp-matrix-rowhead,
.crp-row-machine:hover .crp-matrix-rowhead {
    background: #e2e8f0 !important;
}

.crp-cell-empty {
    background: var(--bs-tertiary-bg, #f8fafc);
    color: var(--bs-tertiary-color, #cbd5e1);
    cursor: default;
}

.crp-cell-idle {
    background: var(--bs-body-bg, #ffffff);
    color: #94a3b8;
}

.crp-cell-ok {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #047857 !important;
    font-weight: 500;
}

.crp-cell-warning {
    background: rgba(245, 158, 11, 0.14) !important;
    color: #b45309 !important;
    font-weight: 600;
}

.crp-cell-overload {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #b91c1c !important;
    font-weight: 700;
}

.crp-cell-selected {
    outline: 2px solid #4f46e5 !important;
    outline-offset: -2px;
}

.crp-chart {
    flex: 0 0 auto;
    border: 1px solid var(--bs-border-color, #dde);
    border-radius: 6px;
    padding: 8px 10px 4px 10px;
}

.crp-chart-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--bs-body-color, #445);
    margin-bottom: 4px;
    min-height: 1em;
}

.crp-chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 110px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.crp-chart-bucket {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    width: 86px;
    min-width: 86px;
    max-width: 86px;
}

.crp-chart-bar-area {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 86px;
}

.crp-chart-bar-capacity {
    width: 16px;
    background: var(--bs-secondary-bg, #c9d4e8);
    border-radius: 2px 2px 0 0;
}

.crp-chart-bar-load {
    width: 16px;
    background: var(--bs-success, #4d8f56);
    border-radius: 2px 2px 0 0;
}

.crp-chart-bar-overload {
    background: var(--bs-danger, #c4453a);
}

.crp-chart-bucket-label {
    font-size: 0.65rem;
    color: var(--bs-secondary-color, #667);
    margin-top: 2px;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .crp-analysis-main {
        height: calc(100dvh - 96px);
    }
}

/* ── CRP Gantt (read-only) ──────────────────────────────────────────── */
.crp-gantt {
    display: flex;
    flex-direction: column;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    gap: 8px;
}

.crp-gantt-scroll {
    overflow: auto;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    border: 1px solid var(--bs-border-color, #dde);
    border-radius: 6px;
    padding-bottom: 4px;
    scrollbar-gutter: stable;
}

.crp-gantt-axis {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 6;
    background: var(--bs-tertiary-bg, #f8fafc);
    border-bottom: 2px solid var(--bs-border-color, #cbd5e1);
    height: 46px;
}

.crp-gantt-rowhead {
    flex: 0 0 240px;
    min-width: 240px;
    max-width: 240px;
    padding: 4px 8px;
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-right: 2px solid var(--bs-border-color, #cbd5e1);
    background: var(--bs-body-bg, #fbfcfe);
    position: sticky;
    left: 0;
    z-index: 3;
}

.crp-gantt-axis .crp-gantt-rowhead {
    z-index: 10;
    background: var(--bs-tertiary-bg, #f8fafc);
}

/* K-71: the component sizes the track - 400 px a working day, 40 px a day nobody works. */
.crp-gantt-axis-track,
.crp-gantt-track {
    position: relative;
    flex: 0 0 auto;
}

.crp-gantt-dayhead {
    position: absolute;
    top: 0;
    bottom: 0;
    border-left: 1px solid var(--bs-border-color, #cbd5e1);
    overflow: hidden;
    white-space: nowrap;
}

.crp-gantt-dayhead-date {
    display: block;
    padding: 4px 6px 0;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--bs-body-color, #334155);
}

.crp-gantt-dayhead-sub {
    display: block;
    padding: 5px 0 0;
    font-size: 0.66rem;
    color: var(--bs-secondary-color, #667);
}

.crp-gantt-dayhead-rest {
    background: var(--bs-secondary-bg, #eef1f7);
    text-align: center;
}

.crp-gantt-dayhead-rest .crp-gantt-dayhead-date {
    padding: 4px 0 0;
    font-size: 0.62rem;
    font-weight: 500;
}

/* An hour of the working window, in the axis's second row. */
.crp-gantt-tick {
    position: absolute;
    top: 26px;
    padding-left: 3px;
    border-left: 1px solid var(--bs-border-color, #cbd5e1);
    font-size: 0.66rem;
    line-height: 16px;
    color: var(--bs-secondary-color, #667);
    white-space: nowrap;
}

/* A day's column in a lane: its border, and a line every hour (--crp-hour is the hour's width). */
.crp-gantt-daycol {
    position: absolute;
    top: 0;
    bottom: 0;
    border-left: 1px solid var(--bs-border-color, #cbd5e1);
    background-image: repeating-linear-gradient(to right,
        transparent 0,
        transparent calc(var(--crp-hour) - 1px),
        var(--crp-gantt-hourline, rgba(15, 23, 42, 0.07)) calc(var(--crp-hour) - 1px),
        var(--crp-gantt-hourline, rgba(15, 23, 42, 0.07)) var(--crp-hour));
}

.crp-gantt-daycol-rest {
    background: var(--bs-secondary-bg, #eef1f7);
}

.crp-gantt-lane {
    display: flex;
    border-bottom: 1px solid var(--bs-border-color-translucent, #f0f2f7);
}

.crp-gantt-lane-wc .crp-gantt-rowhead {
    background: var(--bs-secondary-bg, #eef1f7);
    font-weight: 600;
}

.crp-gantt-lane-wc .crp-gantt-track {
    min-height: 8px;
    background: var(--bs-tertiary-bg, #f7f8fb);
}

.crp-gantt-rowhead-machine {
    padding-left: 14px;
}

.crp-gantt-bar {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 5px;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0.7rem;
    line-height: 13px;
    padding: 1px 3px;
    color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.crp-gantt-bar-wo {
    background: var(--bs-primary, #3b6fd4);
}

.crp-gantt-bar-mrp {
    background: #d99114;
}

/* Two lines: the work order, then the operation and its hours. */
.crp-gantt-bar-line {
    position: relative;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

/* The part of the bar beyond the machine's capacity for the day. */
.crp-gantt-bar-overflow,
.crp-gantt-swatch-overflow {
    background: repeating-linear-gradient(135deg, #dc2626 0 6px, #b91c1c 6px 12px);
}

.crp-gantt-bar-overflow {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

/* An expanded machine: a bar too short for its label has it beside the bar. */
.crp-gantt-bar-beside {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 0.7rem;
    line-height: 13px;
    color: var(--bs-body-color, #334155);
    white-space: nowrap;
    overflow: hidden;
}

/* ▸ / ▾ opens a machine into a row per operation; the toolbar opens or closes them all. */
.crp-gantt-rowhead-toggle {
    cursor: pointer;
}

.crp-gantt-rowhead-toggle:hover {
    background: var(--bs-tertiary-bg, #f1f5f9);
}

.crp-gantt-toolbar-end {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* The day's load that does not fit in the working window at all. */
.crp-gantt-marker {
    position: absolute;
    z-index: 2;
    border-radius: 5px;
    background: #b91c1c;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.crp-gantt-bar-line:first-child {
    font-weight: 600;
}

.crp-gantt-bar-detail {
    opacity: 0.9;
}

/* The machine's load / capacity for the day, coloured by the load matrix's crp-cell-* classes. */
.crp-gantt-daycell {
    position: absolute;
    top: 4px;
    border-radius: 4px;
    font-family: var(--bs-font-monospace, monospace);
    font-size: 11px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}

.crp-analysis-gantt-panel {
    height: 100%;
}

/* ── CRP karanlik tema düzeltmeleri ─────────────────────────────────────
   DX fluent-dark bazi Bootstrap degiskenlerini ACIK degerlerde birakir
   (secondary-bg, border-color ve *-bg-subtle/-text-emphasis paletleri).
   theme-detect.js <html data-ice-theme> damgasini basar; bu blok yalniz
   CRP yuzeyleri icin karanliga uygun degerleri saglar. */
[data-ice-theme="dark"] .crp-matrix-scroll,
[data-ice-theme="dark"] .crp-chart,
[data-ice-theme="dark"] .crp-gantt-scroll {
    border-color: #4a4a4a;
}

[data-ice-theme="dark"] .crp-matrix-table th,
[data-ice-theme="dark"] .crp-matrix-table td {
    border-color: #454545;
}

[data-ice-theme="dark"] .crp-matrix-colhead,
[data-ice-theme="dark"] .crp-matrix-rowhead-header {
    background: #3a3a3a;
    color: #fff;
}

[data-ice-theme="dark"] .crp-matrix-rowhead {
    background: #2f2f2f;
}

[data-ice-theme="dark"] .crp-row-wc .crp-matrix-rowhead,
[data-ice-theme="dark"] .crp-gantt-lane-wc .crp-gantt-rowhead {
    background: #3a3a3a;
}

[data-ice-theme="dark"] .crp-cell-idle {
    background: #2c2c2c;
}

[data-ice-theme="dark"] .crp-cell-empty {
    background: #242424;
    color: rgba(255, 255, 255, 0.28);
}

/* The light rules colour these cells with !important, so the dark ones must too (K-49). */
[data-ice-theme="dark"] .crp-cell-ok {
    background: #17391c !important;
    color: #7fd18b !important;
}

[data-ice-theme="dark"] .crp-cell-warning {
    background: #46350c !important;
    color: #ecc36a !important;
}

[data-ice-theme="dark"] .crp-cell-overload {
    background: #4a1c18 !important;
    color: #f1948a !important;
}

[data-ice-theme="dark"] .crp-legend-swatch {
    border-color: rgba(255, 255, 255, 0.25);
}

[data-ice-theme="dark"] .crp-gantt-axis {
    background: #3a3a3a;
    border-bottom-color: #4a4a4a;
}

[data-ice-theme="dark"] .crp-gantt-rowhead {
    background: #2f2f2f;
    border-right-color: #4a4a4a;
}

[data-ice-theme="dark"] .crp-gantt-lane {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

[data-ice-theme="dark"] .crp-gantt-daycol {
    --crp-gantt-hourline: rgba(255, 255, 255, 0.07);
    border-left-color: #4a4a4a;
}

[data-ice-theme="dark"] .crp-gantt-daycol-rest,
[data-ice-theme="dark"] .crp-gantt-dayhead-rest {
    background: #262626;
}

[data-ice-theme="dark"] .crp-gantt-dayhead,
[data-ice-theme="dark"] .crp-gantt-tick {
    border-left-color: #4a4a4a;
}

[data-ice-theme="dark"] .crp-gantt-rowhead-toggle:hover {
    background: #3a3a3a;
}

[data-ice-theme="dark"] .crp-gantt-lane-wc .crp-gantt-track {
    background: #2c2c2c;
}

/* ==========================================================================
   Work Order Planning V2 - Routing Flow & Interactive Mini Gantt
   ========================================================================== */

button.card-routing-flow,
.card-routing-flow {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    padding: 3px 6px;
    margin-top: 5px;
    cursor: pointer;
    flex-wrap: wrap;
    transition: all 0.15s ease;
    width: 100%;
    text-align: left;
    outline: none;
}

button.card-routing-flow:hover,
.card-routing-flow:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.btn-routing-modal-open {
    background: transparent;
    border: none;
    padding: 1px 4px;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s ease;
    opacity: 0.75;
}

.btn-routing-modal-open:hover {
    opacity: 1;
    transform: scale(1.15);
    background: rgba(13, 110, 253, 0.12);
}

.routing-step {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 9.5px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    line-height: 1.2;
}

.routing-step.step-planned {
    background: #e2e8f0;
    color: #334155;
    border: 1px solid #cbd5e1;
}

.routing-step.step-in-progress {
    background: #dbeafe;
    color: #1e40af;
    border: 1px solid #93c5fd;
}

.routing-step.step-completed {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}

.routing-step .step-seq {
    font-weight: 700;
    font-size: 8.5px;
    opacity: 0.85;
}

.routing-step .step-wc {
    font-weight: 600;
}

.step-arrow {
    font-size: 8px;
    color: #94a3b8;
    margin: 0 1px;
}

.routing-flow-info-icon {
    font-size: 10px;
    margin-left: auto;
    opacity: 0.65;
}

/* Routing Flow Modal Styles */
.routing-modal-container {
    padding: 4px;
}

.routing-modal-header-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 16px;
}

.routing-kpi-pill {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 4px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
}

.routing-kpi-pill .kpi-title {
    font-size: 10px;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
}

.routing-kpi-pill .kpi-val {
    font-size: 13px;
    font-weight: 700;
}

.routing-section-title {
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.routing-stepper-track {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding: 12px 8px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.routing-stepper-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 140px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    transition: all 0.2s ease;
}

.routing-stepper-node.node-completed {
    border-color: #86efac;
    background: #f0fdf4;
}

.routing-stepper-node.node-inprogress {
    border-color: #93c5fd;
    background: #eff6ff;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.15);
}

.routing-stepper-node .node-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #0d6efd;
    color: #ffffff;
    font-weight: 700;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}

.routing-stepper-node.node-completed .node-circle {
    background: #198754;
}

.routing-stepper-node.node-planned .node-circle {
    background: #64748b;
}

.routing-stepper-node .node-name {
    font-size: 12px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.2;
    margin-bottom: 4px;
}

.routing-stepper-node .node-wc {
    font-size: 11px;
    color: #64748b;
    margin-bottom: 6px;
}

.node-status-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
}

.stepper-line {
    font-size: 16px;
    color: #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stepper-line.line-completed {
    color: #198754;
}

.routing-ops-table {
    font-size: 12px;
}

.routing-ops-table th {
    font-weight: 600;
    font-size: 11.5px;
    color: #475569;
    padding: 6px 8px;
}

.routing-ops-table td {
    padding: 6px 8px;
}

.routing-progress-track {
    height: 14px;
    background: #e2e8f0;
}

/* Inline Card Ops Drawer */
.card-inline-ops-drawer {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 6px 8px;
    margin-top: 5px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.03);
    animation: iceDrawerSlideDown 0.15s ease-out;
}

.inline-op-item {
    font-size: 11px;
}

.inline-op-item:last-child {
    border-bottom: none !important;
}

@keyframes iceDrawerSlideDown {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Work Order Planning V2: Color Lens & Card Styling
   ========================================================================== */

/* 1. Material Lens */
.lens-material .card-mat-ready {
    border-left-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.04);
}
.lens-material .card-mat-partial {
    border-left-color: #f59e0b !important;
    background: rgba(245, 158, 11, 0.04);
}
.lens-material .card-mat-missing {
    border-left-color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.04);
}

/* 2. Due Date Risk Lens */
.lens-duedate .card-risk-overdue {
    border-left-color: #ef4444 !important;
    background: #fff1f2 !important;
}
.lens-duedate .card-risk-imminent {
    border-left-color: #f59e0b !important;
    background: #fffbeb !important;
}
.lens-duedate .card-risk-ontime {
    border-left-color: #10b981 !important;
    background: #f0fdf4 !important;
}

/* 3. Customer Lens */
.lens-customer .card-cust-0 { border-left-color: #3b82f6 !important; }
.lens-customer .card-cust-1 { border-left-color: #8b5cf6 !important; }
.lens-customer .card-cust-2 { border-left-color: #10b981 !important; }
.lens-customer .card-cust-3 { border-left-color: #f59e0b !important; }
.lens-customer .card-cust-4 { border-left-color: #ec4899 !important; }
.lens-customer .card-cust-5 { border-left-color: #06b6d4 !important; }
.lens-customer .card-cust-6 { border-left-color: #6366f1 !important; }
.lens-customer .card-cust-7 { border-left-color: #14b8a6 !important; }

/* ==========================================================================
   Work Order Planning V2: Card Density Modes
   ========================================================================== */

.density-compact .unplanned-card,
.density-compact .planned-wo-card {
    padding: 3px 6px !important;
    min-height: 44px;
}

.density-compact .card-customer-row {
    display: none !important;
}

.density-compact .planned-card-part-name,
.density-compact .card-part-name {
    font-size: 10px !important;
    margin-bottom: 2px !important;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.density-compact .planned-card-seq-row {
    margin-bottom: 1px !important;
    padding-bottom: 1px !important;
}

.density-compact .planned-card-meta,
.density-compact .card-meta-row {
    font-size: 9px !important;
    margin-bottom: 0 !important;
}

.density-compact .card-material-status-row {
    margin-bottom: 1px !important;
}

.density-compact .badge-mat-ready,
.density-compact .badge-mat-partial,
.density-compact .badge-mat-missing,
.density-compact .card-so-badge {
    font-size: 7.5px !important;
    padding: 0 3px !important;
}

/* ==========================================================================
   BOM Material Shortage Drilldown Modal
   ========================================================================== */

.bom-kpi-summary-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 16px;
}

.bom-kpi-item {
    display: flex;
    flex-direction: column;
}

.bom-kpi-label {
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
}

.bom-kpi-val {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}

.bom-progress-wrapper {
    flex: 1;
    min-width: 160px;
}

.bom-progress-bar-track {
    height: 10px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
    margin-top: 4px;
}

.bom-progress-bar-fill {
    height: 100%;
    background: #10b981;
    border-radius: 999px;
    transition: width 0.3s ease;
}

.bom-progress-bar-fill.fill-shortage {
    background: #ef4444;
}

.bom-progress-bar-fill.fill-partial {
    background: #f59e0b;
}

.bom-components-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.bom-components-table th {
    background: #f1f5f9;
    color: #475569;
    font-weight: 600;
    padding: 8px 10px;
    text-align: left;
    border-bottom: 2px solid #cbd5e1;
    font-size: 11px;
}

.bom-components-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: middle;
}

.bom-components-table tr:hover {
    background-color: #f8fafc;
}

.bom-comp-code {
    font-weight: 600;
    color: #0f172a;
}

.bom-comp-name {
    font-size: 11px;
    color: #475569;
}

.badge-supply-stock {
    background-color: #e0f2fe;
    color: #0284c7;
    font-size: 9px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
}

.badge-supply-po {
    background-color: #fef3c7;
    color: #d97706;
    font-size: 9px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
}

.badge-supply-prod {
    background-color: #f3e8ff;
    color: #7c3aed;
    font-size: 9px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
}

/* ==========================================================================
   Production Working Calendar & Non-Working Days / Holidays
   ========================================================================== */
.day-column.day-non-working {
    background: repeating-linear-gradient(
        -45deg,
        #f8fafc,
        #f8fafc 10px,
        #f1f5f9 10px,
        #f1f5f9 20px
    ) !important;
    border-color: #cbd5e1 !important;
}

.day-header.header-non-working {
    background-color: #e2e8f0 !important;
    color: #64748b !important;
    border-bottom: 2px solid #cbd5e1 !important;
}

.non-working-badge {
    background-color: #fee2e2;
    color: #b91c1c;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #fca5a5;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 130px;
    display: inline-block;
}

.holiday-special-badge {
    background-color: #fef3c7;
    color: #b45309;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #fcd34d;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 140px;
    display: inline-block;
}

.cap-day-column.day-non-working {
    background: repeating-linear-gradient(
        -45deg,
        #f8fafc,
        #f8fafc 10px,
        #f1f5f9 10px,
        #f1f5f9 20px
    ) !important;
}

.cap-cell-non-working {
    background-color: rgba(241, 245, 249, 0.7);
    color: #94a3b8;
    font-size: 10px;
    font-style: italic;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-date-picker-wrapper {
    min-width: 140px;
    max-width: 155px;
}

.nav-date-picker-wrapper .dxbl-edit {
    height: 28px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
}

/* ==========================================================================
   MRP Run Visual Cockpit & Workspace
   Aligned with Product & Work Order Structure Explorers (compact object & grid heights)
   ========================================================================== */

.mrp-run-detail-main {
    --mrp-gap: 6px;
    height: calc(100dvh - 90px);
    min-height: 0;
    overflow: hidden;
}

.mrp-run-detail-main > .dxbl-row {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--mrp-gap) !important;
    height: 100% !important;
    overflow: hidden !important;
}

.mrp-run-detail-main > .dxbl-row > .dxbl-fl-group {
    margin-top: 0;
    margin-bottom: 0;
}

.mrp-run-detail-main .mrp-run-workspace-area {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
}

.mrp-run-detail-main .mrp-run-workspace-area > .dxbl-row,
.mrp-run-detail-main .mrp-run-workspace-area .dxbl-fl-item,
.mrp-run-detail-main .mrp-run-workspace-area .dxbl-fl-ctrl {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.mrp-run-workspace-root {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    gap: 6px;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

/* ── Top Cockpit Control Bar: Selector, Run MRP ───────────────────────────── */
.mrp-cockpit-control-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bs-card-bg, #ffffff);
    border: 1px solid var(--bs-border-color, #e2e8f0);
    border-radius: 8px;
    padding: 6px 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    flex-wrap: wrap;
    gap: 8px;
    flex: 0 0 auto;
}

.mrp-control-bar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 300px;
}

.mrp-control-label {
    font-weight: 600;
    font-size: 12px;
    color: var(--bs-secondary-color, #475569);
    margin-bottom: 0;
    white-space: nowrap;
}

.mrp-run-combobox {
    min-width: 260px;
    max-width: 460px;
    flex: 1;
}

.mrp-control-bar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mrp-empty-workspace {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: var(--bs-card-bg, #ffffff);
    border: 2px dashed var(--bs-border-color, #cbd5e1);
    border-radius: 8px;
    text-align: center;
}

.mrp-empty-icon {
    font-size: 40px;
    margin-bottom: 8px;
}

.mrp-empty-workspace h3 {
    font-size: 1.15rem;
    color: var(--bs-body-color, #1e293b);
    margin-bottom: 6px;
    font-weight: 600;
}

.mrp-empty-workspace p {
    font-size: 0.9rem;
    color: var(--bs-secondary-color, #64748b);
    max-width: 480px;
    margin-bottom: 14px;
}

/* ── Top Header Ribbon ───────────────────────────────────────────────────── */
.mrp-header-ribbon {
    background: var(--bs-card-bg, #ffffff);
    border: 1px solid var(--bs-border-color, #e2e8f0);
    border-radius: 8px;
    padding: 6px 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    flex: 0 0 auto;
}

.mrp-header-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.mrp-header-info-strip {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1 1 auto;
}

.mrp-run-no-badge {
    font-size: 14px;
    font-weight: 700;
    color: var(--bs-body-color, #1e293b);
    letter-spacing: -0.2px;
}

.mrp-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    line-height: 1.3;
}

.status-completed {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.status-running {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
    animation: pulse-glow 2s infinite ease-in-out;
}

.status-error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.status-draft {
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
}

@keyframes pulse-glow {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.85; transform: scale(1.02); }
}

.mrp-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--bs-secondary-color, #475569);
    background: var(--bs-tertiary-bg, #f1f5f9);
    padding: 2px 7px;
    border-radius: 4px;
    border: 1px solid var(--bs-border-color, #e2e8f0);
}

.mrp-chip-duration {
    background: #eef2ff;
    color: #4338ca;
    border-color: #c7d2fe;
    font-weight: 600;
}

.mrp-chip-cleanup {
    background: #fef3c7;
    color: #92400e;
    border-color: #fde68a;
}

.mrp-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.mrp-error-banner {
    margin-top: 6px;
    padding: 6px 10px;
    background: #fef2f2;
    color: #991b1b;
    border-left: 3px solid #ef4444;
    border-radius: 4px;
    font-size: 11.5px;
}

/* ── MRP Operating Workflow Stepper ───────────────────────────────────────── */
.mrp-workflow-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    background: var(--bs-card-bg, #ffffff);
    border: 1px solid var(--bs-border-color, #e2e8f0);
    border-radius: 8px;
    padding: 3px 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    flex: 0 0 auto;
}

.mrp-step-item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 3px 8px;
    border-radius: 6px;
    transition: all 0.15s ease-in-out;
    flex: 1;
    border: 1px solid transparent;
}

.mrp-step-item:hover {
    background: var(--bs-tertiary-bg, #f8fafc);
    border-color: var(--bs-border-color, #e2e8f0);
}

.mrp-step-item.active {
    background: rgba(13, 110, 253, 0.08);
    border-color: #bfdbfe;
    box-shadow: 0 1px 2px rgba(13, 110, 253, 0.08);
}

.mrp-step-num {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bs-tertiary-bg, #e2e8f0);
    color: var(--bs-secondary-color, #475569);
    font-weight: 700;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mrp-step-item.active .mrp-step-num {
    background: #0d6efd;
    color: #ffffff;
}

.mrp-step-info {
    display: flex;
    flex-direction: column;
}

.mrp-step-title {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--bs-body-color, #1e293b);
    line-height: 1.2;
}

.mrp-step-desc {
    font-size: 10px;
    color: var(--bs-secondary-color, #64748b);
    margin-top: 1px;
}

.mrp-step-divider {
    color: var(--bs-border-color, #cbd5e1);
    font-size: 12px;
    user-select: none;
}

/* ── Proposal Merge Center Styles ────────────────────────────────────────── */
.mrp-merge-group-card {
    border: 1px solid var(--bs-border-color, #e2e8f0);
    border-radius: 8px;
    background: var(--bs-card-bg, #ffffff);
    margin-bottom: 10px;
    padding: 10px;
    transition: border-color 0.15s ease;
}

.mrp-merge-group-card:hover {
    border-color: #0d6efd;
}

.mrp-merge-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--bs-border-color, #f1f5f9);
}

.mrp-merge-part-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--bs-body-color, #0f172a);
}

.mrp-merge-highlight-badge {
    font-size: 10.5px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 10px;
    background: #e0f2fe;
    color: #0369a1;
}

/* ── KPI Grid ────────────────────────────────────────────────────────────── */
.mrp-kpi-grid {
    display: flex;
    gap: 8px;
    width: 100%;
    margin-bottom: 2px;
    flex: 0 0 auto;
}

.mrp-kpi-card {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bs-card-bg, #ffffff);
    border: 1px solid var(--bs-border-color, #e2e8f0);
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.mrp-kpi-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.mrp-kpi-card.active {
    border-color: #0d6efd;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.2);
    background: rgba(13, 110, 253, 0.04);
}

.mrp-kpi-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    flex-shrink: 0;
}

.mrp-kpi-demands .mrp-kpi-icon-wrapper {
    background: #eff6ff;
    color: #2563eb;
}

.mrp-kpi-supplies .mrp-kpi-icon-wrapper {
    background: #ecfdf5;
    color: #059669;
}

.mrp-kpi-proposals-wo .mrp-kpi-icon-wrapper {
    background: #fffbeb;
    color: #d97706;
}

.mrp-kpi-proposals-pr .mrp-kpi-icon-wrapper {
    background: #f5f3ff;
    color: #7c3aed;
}

.mrp-kpi-diagnostics .mrp-kpi-icon-wrapper {
    background: #f8fafc;
    color: #475569;
}

.mrp-kpi-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mrp-kpi-label {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--bs-secondary-color, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mrp-kpi-val-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 1px;
}

.mrp-kpi-val {
    font-size: 17px;
    font-weight: 700;
    color: var(--bs-body-color, #0f172a);
    font-family: var(--bs-font-monospace, monospace);
    line-height: 1.2;
}

.mrp-kpi-sub {
    font-size: 10.5px;
    color: var(--bs-secondary-color, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Tab Navigation ──────────────────────────────────────────────────────── */
.mrp-tabs-container {
    border-bottom: 2px solid var(--bs-border-color, #e2e8f0);
    margin-bottom: 2px;
    position: relative;
    z-index: 5;
    flex: 0 0 auto;
}

.mrp-tabs-container .dxbl-tabs {
    font-size: 12.5px;
}

.mrp-tabs-container .dxbl-tabs-item-link {
    padding: 6px 12px !important;
}

.mrp-tab-body {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Tab Panel & Table ───────────────────────────────────────────────────── */
.mrp-panel {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bs-card-bg, #ffffff);
    border: 1px solid var(--bs-border-color, #e2e8f0);
    border-radius: 8px;
    padding: 8px 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.mrp-toolbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}

.mrp-toolbar-left,
.mrp-toolbar-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.mrp-search-box {
    width: 250px;
}

.mrp-filter-chips {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mrp-chip {
    background: var(--bs-tertiary-bg, #f1f5f9);
    border: 1px solid var(--bs-border-color, #e2e8f0);
    border-radius: 16px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--bs-secondary-color, #475569);
    cursor: pointer;
    transition: all 0.15s ease;
}

.mrp-chip:hover {
    background: var(--bs-border-color, #e2e8f0);
}

.mrp-chip.active {
    background: #0d6efd;
    color: #ffffff;
    border-color: #0d6efd;
}

.mrp-chip.chip-overdue.active {
    background: #dc3545;
    border-color: #dc3545;
    color: #ffffff;
}

.mrp-chip.chip-urgent.active {
    background: #ffc107;
    border-color: #ffc107;
    color: #000000;
}

.mrp-selected-count-badge {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

/* ── Table Styling ───────────────────────────────────────────────────────── */
.mrp-table-wrapper {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid var(--bs-border-color, #e2e8f0);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
}

.mrp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.mrp-table thead th {
    position: sticky;
    top: 0;
    background: var(--bs-tertiary-bg, #f8fafc);
    color: var(--bs-secondary-color, #475569);
    font-weight: 600;
    font-size: 12px;
    padding: 6px 10px;
    border-bottom: 2px solid var(--bs-border-color, #e2e8f0);
    text-align: left;
    white-space: nowrap;
    z-index: 2;
}

.mrp-table tbody td {
    padding: 5px 10px;
    border-bottom: 1px solid var(--bs-border-color, #f1f5f9);
    color: var(--bs-body-color, #1e293b);
    vertical-align: middle;
    font-size: 12px;
}

.mrp-table tbody tr:hover {
    background: rgba(59, 130, 246, 0.05);
}

.mrp-table tbody tr.selected-row {
    background: rgba(59, 130, 246, 0.12) !important;
}

.mrp-urgency-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
}

.mrp-badge-overdue {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.mrp-badge-urgent {
    background: #fffbeb;
    color: #d97706;
    border: 1px solid #fde68a;
}

.mrp-badge-normal {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.mrp-action-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.mrp-icon-btn {
    background: transparent;
    border: 1px solid var(--bs-border-color, #e2e8f0);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 11.5px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.mrp-icon-btn:hover {
    background: var(--bs-tertiary-bg, #f1f5f9);
    transform: scale(1.08);
}

.mrp-empty-state {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    color: var(--bs-secondary-color, #64748b);
    font-size: 12.5px;
}

/* ── Pegging Tree Styling ────────────────────────────────────────────────── */
.mrp-pegging-tree-container {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-right: 4px;
}

.mrp-tree-card {
    border: 1px solid var(--bs-border-color, #e2e8f0);
    border-radius: 6px;
    background: var(--bs-card-bg, #ffffff);
    padding: 8px 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.mrp-tree-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
}

.mrp-node-type-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.mrp-badge-demand {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.mrp-badge-wo {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}

.mrp-badge-pr {
    background: #f5f3ff;
    color: #6d28d9;
    border: 1px solid #ddd6fe;
}

.mrp-badge-stock {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

.mrp-tree-ref {
    font-weight: 700;
    color: var(--bs-body-color, #0f172a);
}

.mrp-tree-part {
    color: var(--bs-secondary-color, #475569);
}

.mrp-tree-qty {
    font-weight: 600;
    color: var(--bs-body-color, #0f172a);
}

.mrp-tree-date {
    font-size: 11px;
    color: var(--bs-secondary-color, #64748b);
}

.mrp-tree-children {
    margin-left: 18px;
    margin-top: 6px;
    padding-left: 8px;
    border-left: 2px dashed var(--bs-border-color, #cbd5e1);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mrp-tree-child-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 11.5px;
}

.mrp-tree-line,
.mrp-tree-subline {
    color: #94a3b8;
    font-weight: bold;
}

.mrp-tree-child-badge {
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 4px;
    border: 1px solid var(--bs-border-color, #e2e8f0);
}

.mrp-tree-subchildren {
    margin-left: 20px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 3px;
}

.mrp-tree-subchild-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
}

/* ── Dark Theme Overrides ────────────────────────────────────────────────── */
[data-ice-theme="dark"] .mrp-cockpit-control-bar,
[data-ice-theme="dark"] .mrp-empty-workspace,
[data-ice-theme="dark"] .mrp-header-ribbon,
[data-ice-theme="dark"] .mrp-workflow-stepper,
[data-ice-theme="dark"] .mrp-kpi-card,
[data-ice-theme="dark"] .mrp-panel,
[data-ice-theme="dark"] .mrp-tree-card {
    background: var(--bs-card-bg, #1e293b);
    border-color: var(--bs-border-color, #334155);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

[data-ice-theme="dark"] .mrp-control-label,
[data-ice-theme="dark"] .mrp-empty-workspace h3 {
    color: #f1f5f9;
}

[data-ice-theme="dark"] .mrp-run-no-badge,
[data-ice-theme="dark"] .mrp-kpi-val,
[data-ice-theme="dark"] .mrp-tree-ref,
[data-ice-theme="dark"] .mrp-table td {
    color: #f1f5f9;
}

[data-ice-theme="dark"] .mrp-meta-chip,
[data-ice-theme="dark"] .mrp-chip {
    background: #334155;
    border-color: #475569;
    color: #cbd5e1;
}

[data-ice-theme="dark"] .mrp-table-wrapper,
[data-ice-theme="dark"] .mrp-table th,
[data-ice-theme="dark"] .mrp-table td {
    border-color: #334155;
}

[data-ice-theme="dark"] .mrp-table th {
    background: #0f172a;
    color: #94a3b8;
}

[data-ice-theme="dark"] .mrp-table tbody tr:hover {
    background: #334155;
}

[data-ice-theme="dark"] .mrp-table tbody tr.selected-row {
    background: #1e3a8a !important;
}

/* ==========================================================================
   CRP Cockpit Styles
   ========================================================================== */
.crp-run-detail-main {
    height: calc(100dvh - 120px) !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.crp-run-detail-main .crp-run-workspace-area {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
}

.crp-run-detail-main .crp-run-workspace-area > .dxbl-row,
.crp-run-detail-main .crp-run-workspace-area .dxbl-fl-item,
.crp-run-detail-main .crp-run-workspace-area .dxbl-fl-ctrl {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.crp-cockpit-workspace-root {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    gap: 6px;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

.crp-empty-workspace {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: var(--bs-card-bg, #ffffff);
    border: 2px dashed var(--bs-border-color, #cbd5e1);
    border-radius: 8px;
    text-align: center;
}

.crp-empty-icon {
    font-size: 40px;
    margin-bottom: 8px;
}

.crp-empty-workspace h3 {
    font-size: 1.15rem;
    color: var(--bs-body-color, #1e293b);
    margin-bottom: 6px;
    font-weight: 600;
}

.crp-empty-workspace p {
    font-size: 0.9rem;
    color: var(--bs-secondary-color, #64748b);
    max-width: 480px;
    margin-bottom: 14px;
}

.crp-error-banner {
    padding: 6px 10px;
    background: #fef2f2;
    color: #991b1b;
    border-left: 3px solid #ef4444;
    border-radius: 4px;
    font-size: 11.5px;
}

.crp-stale-alert-banner {
    background: #fffbeb !important;
    border-color: #fde68a !important;
}

.crp-date-box {
    width: 125px;
}

.crp-wc-combobox {
    min-width: 160px;
    max-width: 260px;
}

.crp-tab-body {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.crp-panel {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bs-card-bg, #ffffff);
    border: 1px solid var(--bs-border-color, #e2e8f0);
    border-radius: 8px;
    padding: 8px 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

[data-ice-theme="dark"] .crp-empty-workspace,
[data-ice-theme="dark"] .crp-panel {
    background: var(--bs-card-bg, #1e293b);
    border-color: var(--bs-border-color, #334155);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

[data-ice-theme="dark"] .crp-empty-workspace h3 {
    color: #f1f5f9;
}

/* ==========================================================================
   Ürün Yapısı (Product Structure Explorer) Styles
   ========================================================================== */

.product-structure-main {
    --structure-gap: 4px;
    height: calc(100dvh - 140px);
    min-height: 0;
    overflow: hidden;
}

.product-structure-main > .dxbl-row {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--structure-gap) !important;
    height: 100% !important;
    overflow: hidden !important;
}

/* Keep the native XAF search editors clear of the tab strip. */
.product-structure-main .structure-search-criteria {
    flex: 0 0 auto;
    min-width: 0;
    padding-top: 12px;
    padding-bottom: 4px;
}
/* Empty KPI content must not leave an extra flex gap before a search. */
.product-structure-main .product-structure-kpi-row:not(:has(.product-structure-kpi-container)) {
    display: none;
}

.product-structure-main > .dxbl-row > .dxbl-fl-group {
    margin-top: 0;
    margin-bottom: 0;
}
.product-structure-main .product-structure-kpi-row {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
}

.product-structure-main .product-structure-kpi-row > .dxbl-row,
.product-structure-main .product-structure-kpi-row .dxbl-fl-item,
.product-structure-main .product-structure-kpi-row .dxbl-fl-ctrl {
    height: auto !important;
    min-height: 0 !important;
}

.product-structure-main .product-structure-workspace-area {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
}

.product-structure-main .product-structure-workspace-area > .dxbl-row,
.product-structure-main .product-structure-workspace-area .dxbl-fl-item,
.product-structure-main .product-structure-workspace-area .dxbl-fl-ctrl {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.product-structure-kpi-container {
    display: flex;
    gap: 10px;
    width: 100%;
    margin-bottom: 2px;
}

.structure-kpi-card {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bs-card-bg, #ffffff);
    border: 1px solid var(--bs-border-color, #e2e8f0);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
}

.structure-kpi-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}

.structure-kpi-card .kpi-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    flex-shrink: 0;
}

.kpi-card-levels .kpi-icon-wrapper { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.kpi-card-components .kpi-icon-wrapper { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.kpi-card-operations .kpi-icon-wrapper { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.kpi-card-duration .kpi-icon-wrapper { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }
.kpi-card-alternates .kpi-icon-wrapper { background: rgba(236, 72, 153, 0.1); color: #ec4899; }
.kpi-card-wo .kpi-icon-wrapper { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.kpi-card-ops .kpi-icon-wrapper { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }
.kpi-card-overload .kpi-icon-wrapper { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.kpi-card-util .kpi-icon-wrapper { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.kpi-card-msg .kpi-icon-wrapper { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }

.structure-kpi-card.cursor-pointer { cursor: pointer; }
.structure-kpi-card.active {
    border-color: #4f46e5 !important;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2) !important;
}

.structure-kpi-card .kpi-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.structure-kpi-card .kpi-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--bs-secondary-color, #64748b);
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.structure-kpi-card .kpi-value-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.structure-kpi-card .kpi-main-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--bs-body-color, #1e293b);
    font-family: var(--bs-font-monospace, monospace);
}

.structure-kpi-card .kpi-sub-value {
    font-size: 11px;
    color: var(--bs-secondary-color, #94a3b8);
    white-space: nowrap;
}

.product-structure-workspace-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    gap: 8px;
}

.structure-top-filter-bar {
    padding: 8px 12px;
    background: var(--bs-card-bg, #ffffff);
    border: 1px solid var(--bs-border-color, #e2e8f0);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.structure-top-filter-bar .filter-label {
    font-size: 12px;
    color: var(--bs-secondary-color, #475569);
}

.part-picker-combo {
    min-width: 220px;
    max-width: 320px;
}

.revision-picker-combo {
    width: 90px;
}

.effective-date-dxedit {
    width: 130px;
}

.tree-search-dxtext {
    min-width: 200px;
}

.structure-main-content {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    gap: 8px;
    overflow: hidden;
}

.structure-tree-panel {
    flex: 1 1 70%;
    min-height: 0;
    background: var(--bs-card-bg, #ffffff);
    border: 1px solid var(--bs-border-color, #e2e8f0);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.structure-table-container,
.structure-treelist-container {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.structure-treelist {
    font-size: 13px;
}

.structure-treelist .dxbl-grid-table td,
.structure-treelist .dxbl-table td {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.structure-table {
    font-size: 12.5px;
}

.structure-table thead th {
    position: sticky;
    top: 0;
    background: var(--bs-tertiary-bg, #f8fafc);
    color: var(--bs-secondary-color, #475569);
    font-weight: 600;
    font-size: 12px;
    text-transform: none;
    letter-spacing: normal;
    padding: 8px 10px;
    border-bottom: 2px solid var(--bs-border-color, #e2e8f0);
    z-index: 2;
}

.structure-table tbody tr {
    transition: background-color 0.15s ease;
}

.structure-table tbody td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--bs-border-color, #f1f5f9);
}

.structure-row.row-root {
    background-color: rgba(59, 130, 246, 0.04) !important;
    font-weight: 600;
}

.structure-row.row-operation {
    background-color: rgba(16, 185, 129, 0.04);
}

.structure-row.row-selected {
    background-color: rgba(59, 130, 246, 0.12) !important;
    border-left: 3px solid #3b82f6;
}

.btn-tree-toggle {
    width: 22px;
    height: 22px;
    font-size: 11px;
    line-height: 1;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.15s, color 0.15s;
}

.btn-tree-toggle:hover {
    background-color: rgba(59, 130, 246, 0.15);
    color: #1d4ed8;
}

.tree-leaf-spacer {
    display: inline-block;
    width: 22px;
}

.node-icon-badge {
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-alt-badge {
    background-color: rgba(139, 92, 246, 0.12);
    color: #7c3aed;
    font-weight: 600;
    font-size: 11px;
    border-radius: 12px;
    transition: all 0.2s;
}

.btn-alt-badge:hover {
    background-color: #7c3aed;
    color: #ffffff;
}

.structure-inspector-panel {
    flex: 0 0 32%;
    min-width: 360px;
    max-width: 460px;
    min-height: 0;
    background: var(--bs-card-bg, #ffffff);
    border: 1px solid var(--bs-border-color, #e2e8f0);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.25s ease;
}

.structure-inspector-panel.collapsed {
    flex: 0 0 45px;
    min-width: 45px;
    max-width: 45px;
}

.structure-inspector-panel.collapsed .inspector-body,
.structure-inspector-panel.collapsed .inspector-title {
    display: none;
}

.inspector-body {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
}

.inspector-hero-card {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(147, 197, 253, 0.05));
}

.ice-bg-indigo {
    background-color: #6366f1 !important;
}

.ice-bg-purple {
    background-color: #8b5cf6 !important;
}

.ice-bg-teal {
    background-color: #0d9488 !important;
}

.structure-row.row-routing-alt {
    background-color: rgba(139, 92, 246, 0.04);
}

.structure-row.row-recipe-alt {
    background-color: rgba(13, 148, 136, 0.04);
}

.structure-row.row-unassigned-group {
    background-color: rgba(100, 116, 139, 0.04);
}

.icon-routing-alt {
    background-color: rgba(139, 92, 246, 0.15);
    color: #7c3aed;
}

.icon-recipe-alt {
    background-color: rgba(13, 148, 136, 0.15);
    color: #0f766e;
}

.icon-unassigned-group {
    background-color: rgba(100, 116, 139, 0.15);
    color: #475569;
}

/* Dark Theme Overrides */
[data-ice-theme="dark"] .structure-kpi-card,
[data-ice-theme="dark"] .structure-top-filter-bar,
[data-ice-theme="dark"] .structure-tree-panel,
[data-ice-theme="dark"] .structure-inspector-panel {
    background: var(--bs-card-bg, #1e293b);
    border-color: var(--bs-border-color, #334155);
}

[data-ice-theme="dark"] .structure-table thead th {
    background: #0f172a;
    color: #94a3b8;
    border-color: #334155;
}

[data-ice-theme="dark"] .structure-table tbody td {
    border-color: #334155;
}

[data-ice-theme="dark"] .structure-row.row-root {
    background-color: rgba(59, 130, 246, 0.12) !important;
}

[data-ice-theme="dark"] .structure-row.row-operation {
    background-color: rgba(16, 185, 129, 0.1);
}

[data-ice-theme="dark"] .structure-row.row-selected {
    background-color: rgba(59, 130, 246, 0.25) !important;
}

[data-ice-theme="dark"] .stock-card {
    background: #0f172a !important;
    border-color: #334155 !important;
}

.main-product-card {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.06), rgba(99, 102, 241, 0.03));
    border-color: rgba(59, 130, 246, 0.2) !important;
}

[data-ice-theme="dark"] .main-product-card {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.3) !important;
}

/* The frame around the tab bodies (it was a DxLoadingPanel until 25.09.2026). */
.crp-cockpit-workspace-root .crp-tab-frame {
    width: 100%;
    position: relative;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.crp-tab-body {
    width: 100%;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.crp-panel {
    width: 100%;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: var(--bs-card-bg, #ffffff);
    border: 1px solid var(--bs-border-color, #e2e8f0);
    border-radius: 8px;
}

.crp-matrix-split-container {
    display: flex;
    flex-direction: column;
    flex: 1 1 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    gap: 12px;
    overflow: hidden !important;
}

.crp-matrix-top-pane {
    flex: 1 1 50% !important;
    min-height: 200px;
    max-height: 60%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: auto;
    background: var(--bs-card-bg, #ffffff);
    border: 1px solid var(--bs-border-color, #e2e8f0);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.crp-matrix-bottom-pane {
    flex: 1 1 50% !important;
    min-height: 200px;
    max-height: 60%;
    display: flex;
    flex-direction: column;
    background: var(--bs-card-bg, #ffffff);
    border: 1px solid var(--bs-border-color, #e2e8f0);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    padding: 8px;
    overflow: hidden;
}

.crp-cockpit-grid {
    font-size: 12.5px !important;
}

/* The CRP cockpit's grids wear the MRP cockpit's table (user request 22.09.2026): the same row height,
   hover and selection tint. Their header and cell lines are the load matrix's above them (user requests
   24.09.2026): headers in the captions' own case, one colour, a line between rows and between columns, a
   heavier line under the header. DevExpress keeps the sorting, paging and multi-page selection the
   leveling buttons work on. */
.crp-cockpit-grid .dxbl-grid-table th,
.crp-cockpit-grid .dxbl-table th {
    background: var(--bs-tertiary-bg, #f8fafc) !important;
    color: var(--bs-secondary-color, #475569) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    padding: 6px 10px !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 1px solid var(--bs-border-color, #e3e6ee) !important;
    border-bottom: 2px solid var(--bs-border-color, #e3e6ee) !important;
    white-space: nowrap;
}

.crp-cockpit-grid .dxbl-grid-table td,
.crp-cockpit-grid .dxbl-table td {
    padding: 5px 10px !important;
    font-size: 12px !important;
    vertical-align: middle !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 1px solid var(--bs-border-color, #e3e6ee) !important;
    border-bottom: 1px solid var(--bs-border-color, #e3e6ee) !important;
}

/* The wrapper draws the outer edge. */
.crp-cockpit-grid .dxbl-grid-table tr > th:last-child,
.crp-cockpit-grid .dxbl-grid-table tr > td:last-child {
    border-right: 0 !important;
}

.crp-cockpit-grid .dxbl-grid-table tbody tr:hover > td {
    background-color: rgba(59, 130, 246, 0.05) !important;
}

.crp-cockpit-grid .dxbl-grid-table tbody tr[aria-selected="true"] > td {
    background-color: rgba(59, 130, 246, 0.12) !important;
}

/* Notices in the soft tints of the cockpits' KPI icons (user request 24.09.2026): green of "Overall
   Utilization", red of "Overloaded Centers", amber and blue of the structure cards. Bootstrap's alerts
   come out in the DevExpress theme as solid colours with dark text on them. The MRP and CRP cockpits
   show every result here and nowhere else - no XAF toast beside it.
   A 4px stripe in the notice's own colour on its left edge tells the four kinds apart at a glance
   (user decision 25.09.2026). It is written after border-color, which paints all four sides. */
.ice-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
}

.ice-notice-success {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.25);
    border-left: 4px solid #10b981;
    color: #047857;
}

.ice-notice-danger {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    border-left: 4px solid #ef4444;
    color: #b91c1c;
}

.ice-notice-warning {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.3);
    border-left: 4px solid #f59e0b;
    color: #b45309;
}

.ice-notice-info {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.25);
    border-left: 4px solid #3b82f6;
    color: #1d4ed8;
}

/* A notice with a heading and a list rather than one sentence and a close button. */
.ice-notice-block {
    display: block;
}

/* A result can take several lines (a leveling step's linked orders, approval warnings). */
.ice-notice-text {
    white-space: pre-line;
}

.ice-notice .btn-close {
    flex-shrink: 0;
    font-size: 10px;
    padding: 4px;
    opacity: 0.55;
}

.ice-notice .btn-close:hover {
    opacity: 0.9;
}

[data-ice-theme="dark"] .ice-notice-success {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.35);
    border-left-color: #34d399;
    color: #6ee7b7;
}

[data-ice-theme="dark"] .ice-notice-danger {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.4);
    border-left-color: #f87171;
    color: #fca5a5;
}

[data-ice-theme="dark"] .ice-notice-warning {
    background: rgba(245, 158, 11, 0.16);
    border-color: rgba(245, 158, 11, 0.4);
    border-left-color: #fbbf24;
    color: #fcd34d;
}

[data-ice-theme="dark"] .ice-notice-info {
    background: rgba(59, 130, 246, 0.16);
    border-color: rgba(59, 130, 246, 0.4);
    border-left-color: #60a5fa;
    color: #93c5fd;
}

[data-ice-theme="dark"] .ice-notice .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Small helpers of the CRP cockpit's MRP-style toolbars and cells */
.crp-site-combobox {
    min-width: 140px;
    max-width: 240px;
}

.crp-pane-toolbar {
    flex: 0 0 auto;
    padding: 6px 8px 0;
}

/* Nothing sits on its right, so the filters take the row instead of wrapping at their own width. */
.crp-pane-toolbar .mrp-toolbar-left {
    flex: 1 1 auto;
}

.crp-matrix-body {
    flex: 1 1 0;
    min-height: 0;
    overflow: auto;
}

.crp-cell-muted {
    color: var(--bs-secondary-color, #64748b);
    font-size: 11px;
}

.crp-toolbar-note {
    font-size: 11.5px;
    color: var(--bs-secondary-color, #64748b);
}

.crp-chip-clear {
    background: none;
    border: 0;
    padding: 0 0 0 4px;
    color: inherit;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

[data-ice-theme="dark"] .crp-matrix-top-pane,
[data-ice-theme="dark"] .crp-matrix-bottom-pane {
    background: var(--bs-card-bg, #1e293b);
    border-color: var(--bs-border-color, #334155);
}

[data-ice-theme="dark"] .crp-cockpit-grid .dxbl-grid-table th,
[data-ice-theme="dark"] .crp-cockpit-grid .dxbl-table th {
    background: #0f172a !important;
    color: #94a3b8 !important;
    border-color: #334155 !important;
}

[data-ice-theme="dark"] .crp-cockpit-grid .dxbl-grid-table td,
[data-ice-theme="dark"] .crp-cockpit-grid .dxbl-table td {
    border-color: #334155 !important;
    color: #f1f5f9;
}

[data-ice-theme="dark"] .crp-cockpit-grid .dxbl-grid-table tbody tr:hover > td {
    background-color: #334155 !important;
}

[data-ice-theme="dark"] .crp-cockpit-grid .dxbl-grid-table tbody tr[aria-selected="true"] > td {
    background-color: #1e3a8a !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ICE HOME DASHBOARD / OPERATIONS COCKPIT
   ═══════════════════════════════════════════════════════════════════════════ */
.ice-dashboard-main,
.ice-dashboard-main.dxbl-fl-group,
.ice-dashboard-main > .dxbl-row,
.ice-dashboard-main .dxbl-fl-group,
.ice-dashboard-main .dxbl-fl-item,
.ice-dashboard-main .dxbl-fl-ctrl,
.ice-dashboard-workspace-area,
.ice-dashboard-workspace-area.dxbl-fl-group,
.ice-dashboard-workspace-area > .dxbl-row,
.ice-dashboard-workspace-area .dxbl-fl-item,
.ice-dashboard-workspace-area .dxbl-fl-ctrl {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.ice-dashboard-workspace {
    margin-top: 0;
    padding: 8px 20px 20px 20px;
    background-color: var(--bs-body-bg, #f8fafc);
    min-height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* One wide board (user request 25.09.2026): as wide as its widest row and never narrower than
       the view. The view's own scroller scrolls it sideways, with its one scrollbar at the bottom
       of the screen. */
    width: max-content;
    min-width: 100%;
}

/* The dashboard's layout group is as wide as the view, so the board measures the visible width
   against it (100cqw). Inline-size containment only: the board's overflow still reaches the
   view's scroller. */
.ice-dashboard-workspace-area.dxbl-fl-group {
    container-type: inline-size;
}

/* Above the board nothing scrolls sideways: the header, the alert, the filter chips and the quick
   actions stay where they are and keep the visible width. 16px is their own distance from the
   scroller's edge - the workspace's 20px padding less the form layout's 4px - so they do not
   slide before they stick. */
.ice-dashboard-workspace > :is(.ice-dashboard-header, .ice-dashboard-alert-banner, .ice-dashboard-filter-chips, .ice-dashboard-quick-actions-bar) {
    position: sticky;
    left: 16px;
    width: calc(100cqw - 40px);
}

/* ── Header Strip ── */
.ice-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0 0 6px 0;
    margin-top: 0;
    border-bottom: 1px solid var(--bs-border-color, #e2e8f0);
}

.ice-dashboard-title-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ice-dashboard-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--bs-heading-color, #0f172a);
    display: flex;
    align-items: center;
    gap: 8px;
}

.ice-dashboard-icon {
    font-size: 22px;
}

.ice-dashboard-subtitle {
    font-size: 13px;
    color: var(--bs-secondary-color, #64748b);
}

.ice-dashboard-last-updated {
    font-size: 12px;
    color: var(--bs-tertiary-color, #94a3b8);
}

.ice-dashboard-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ice-dashboard-site-select {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ice-site-combobox {
    min-width: 180px;
}

.ice-dashboard-autorefresh-select {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ice-autorefresh-combobox {
    min-width: 100px;
    width: 110px;
}

/* ── Urgent Alert Banner ── */
.ice-dashboard-alert-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-left: 5px solid #ef4444;
    border-radius: 10px;
    padding: 10px 16px;
    box-shadow: 0 4px 12px -2px rgba(239, 68, 68, 0.12), 0 2px 4px -1px rgba(239, 68, 68, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ice-dashboard-alert-banner:hover {
    box-shadow: 0 6px 16px -2px rgba(239, 68, 68, 0.18), 0 3px 6px -1px rgba(239, 68, 68, 0.08);
}

.ice-alert-icon-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ice-alert-icon {
    font-size: 20px;
}

.ice-alert-text-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.ice-alert-title {
    font-weight: 700;
    font-size: 13px;
    color: #991b1b;
}

.ice-alert-description {
    font-size: 13px;
    color: #b91c1c;
}

.ice-alert-action-btn {
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 4px 12px !important;
    border-radius: 6px !important;
}

/* ── Filter Chips ── */
.ice-dashboard-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ice-filter-chip {
    border: 1px solid var(--bs-border-color, #cbd5e1);
    background: var(--bs-card-bg, #ffffff);
    color: var(--bs-secondary-color, #475569);
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.ice-filter-chip:hover {
    background: var(--bs-tertiary-bg, #f1f5f9);
    border-color: #94a3b8;
}

.ice-filter-chip.active {
    background: #0d6efd;
    color: #ffffff;
    border-color: #0d6efd;
    box-shadow: 0 2px 4px rgba(13, 110, 253, 0.25);
}

.ice-filter-chip-btn {
    border-radius: 20px !important;
    padding: 4px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: all 0.15s ease-in-out !important;
}

/* ── Quick Action Workbench ── */
.ice-dashboard-quick-actions-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    background: var(--bs-card-bg, #ffffff);
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid var(--bs-border-color, #e2e8f0);
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.02), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: box-shadow 0.2s ease;
}

.ice-quick-actions-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--bs-secondary-color, #475569);
}

.ice-quick-action-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ice-quick-action-separator {
    width: 1px;
    height: 24px;
    background-color: var(--bs-border-color, #cbd5e1);
    margin: 0 4px;
}

.ice-cockpit-quick-btn {
    font-weight: 600 !important;
}

/* ── KPI Counter Grid & Cards (Compact Executive Strip) ──
   One row however many cards there are. The cards share the widest one's width and stretch to
   fill the view when they are few. */
.ice-kpi-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(176px, 1fr);
    gap: 8px;
    width: max-content;
    min-width: calc(100cqw - 40px);
}

.ice-kpi-card {
    background: var(--bs-card-bg, #ffffff);
    border-radius: 8px;
    padding: 8px 14px;
    border: 1px solid var(--bs-border-color, #e2e8f0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
    border-left-width: 4px;
}

.ice-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}

.ice-kpi-card.kpi-danger {
    border-left-color: #ef4444;
}

.ice-kpi-card.kpi-warning {
    border-left-color: #f59e0b;
}

.ice-kpi-card.kpi-info {
    border-left-color: #3b82f6;
}

.ice-kpi-card.kpi-secondary {
    border-left-color: #64748b;
}

.kpi-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.kpi-card-icon {
    font-size: 14px;
}

.kpi-card-value {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--bs-heading-color, #0f172a);
}

.ice-kpi-card.kpi-danger .kpi-card-value {
    color: #dc2626;
}

.ice-kpi-card.kpi-warning .kpi-card-value {
    color: #d97706;
}

.ice-kpi-card.kpi-info .kpi-card-value {
    color: #2563eb;
}

.kpi-card-label {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--bs-secondary-color, #475569);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kpi-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1px;
}

.kpi-card-arrow-btn {
    font-size: 11px !important;
    font-weight: 700 !important;
    opacity: 0.6;
    transition: opacity 0.15s ease, transform 0.15s ease;
    text-decoration: none !important;
}

.ice-kpi-card:hover .kpi-card-arrow-btn {
    opacity: 1;
    transform: translateX(3px);
}

/* Badges. The case comes from here, not from the text: "Today" and "Overdue" share their keys with
   ordinary labels, so their translations are title case ("Bugün", "Gecikmiş"). */
.kpi-badge-danger, .kpi-badge-warning, .kpi-badge-info, .kpi-badge-secondary {
    font-size: 9.5px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.kpi-badge-danger {
    background-color: #fee2e2;
    color: #991b1b;
}

.kpi-badge-warning {
    background-color: #fef3c7;
    color: #92400e;
}

.kpi-badge-info {
    background-color: #dbeafe;
    color: #1e40af;
}

.kpi-badge-secondary {
    background-color: #f1f5f9;
    color: #475569;
}

/* ── Work Order Status & Visual Charts Grid (3D Depth & Elevation) ── */
/* Two rows growing to the right, three columns in view; the charts fill a column top to bottom.
   The columns have a set width: a chart takes its width from its column, so a column sized from
   the chart would keep whatever width the chart last drew at. */
.ice-dashboard-charts-grid {
    display: grid;
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    grid-auto-columns: max(420px, calc((100cqw - 72px) / 3));
    gap: 16px;
    width: max-content;
}

.ice-dashboard-chart-card {
    background: var(--bs-card-bg, #ffffff);
    border-radius: 10px;
    border: 1px solid var(--bs-border-color, #e2e8f0);
    box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.06), 0 2px 4px -1px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ice-dashboard-chart-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -4px rgba(0, 0, 0, 0.10), 0 4px 8px -2px rgba(0, 0, 0, 0.05);
}

.ice-dashboard-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: var(--bs-tertiary-bg, #f8fafc);
    border-bottom: 1px solid var(--bs-border-color, #e2e8f0);
}

.ice-dashboard-chart-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bs-heading-color, #1e293b);
}

.ice-dashboard-chart-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 12px;
    background: #dbeafe;
    color: #1e40af;
}

.ice-dashboard-chart-body {
    padding: 6px 12px 10px 12px;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 218px;
}

/* Empty Chart State */
.ice-chart-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 171px;
    width: 100%;
    color: var(--bs-secondary-color, #94a3b8);
    gap: 8px;
    text-align: center;
}

.ice-chart-empty-icon {
    font-size: 32px;
    opacity: 0.5;
    line-height: 1;
}

.ice-chart-empty-text {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--bs-secondary-color, #64748b);
}

/* ── Operational Micro-Lists ── */
/* One row growing to the right however many lists are added, four in view. */
.ice-micro-lists-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max(380px, calc((100cqw - 88px) / 4));
    gap: 16px;
    width: max-content;
}

.ice-micro-card {
    background: var(--bs-card-bg, #ffffff);
    border-radius: 10px;
    border: 1px solid var(--bs-border-color, #e2e8f0);
    box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.06), 0 2px 4px -1px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ice-micro-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -4px rgba(0, 0, 0, 0.10), 0 4px 8px -2px rgba(0, 0, 0, 0.05);
}

.ice-micro-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: var(--bs-tertiary-bg, #f8fafc);
    border-bottom: 1px solid var(--bs-border-color, #e2e8f0);
}

.ice-micro-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--bs-heading-color, #1e293b);
}

.ice-micro-view-all {
    background: none;
    border: none;
    color: #0d6efd;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background-color 0.15s;
}

.ice-micro-view-all:hover {
    background: rgba(13, 110, 253, 0.08);
    text-decoration: underline;
}

.ice-micro-view-all-btn {
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    padding: 0 !important;
}

.ice-micro-view-all-btn:hover {
    text-decoration: underline !important;
}

.ice-row-link-btn {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    padding: 0 !important;
    text-align: left !important;
}

.ice-row-link-btn:hover {
    text-decoration: underline !important;
}

/* The notification list: a header is longer than a document number and a subject is a sentence. The
   header wraps within its column with the time under it, and the subject stops after three lines. */
.ice-row-link-btn.ice-notification-title {
    white-space: normal !important;
    min-width: 130px;
}

.ice-notification-time {
    font-size: 11px;
    color: var(--bs-secondary-color, #64748b);
    white-space: nowrap;
    margin-top: 2px;
}

.ice-notification-subject {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ice-micro-card-body {
    padding: 0;
    overflow-x: auto;
}

.ice-micro-table {
    margin-bottom: 0;
    font-size: 12px;
}

.ice-micro-table th {
    background: var(--bs-tertiary-bg, #f8fafc);
    color: var(--bs-secondary-color, #64748b);
    font-weight: 600;
    font-size: 12px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--bs-border-color, #e2e8f0);
}

.ice-micro-table td {
    padding: 7px 12px;
    vertical-align: middle;
    border-bottom: 1px solid var(--bs-border-color, #f1f5f9);
}

.ice-clickable-row {
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.ice-clickable-row:hover {
    background-color: rgba(13, 110, 253, 0.05) !important;
}

.ice-part-code {
    font-weight: 600;
    color: var(--bs-heading-color, #1e293b);
}

.ice-part-name {
    font-size: 11px;
    color: var(--bs-secondary-color, #64748b);
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ice-micro-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    color: #16a34a;
    font-size: 13px;
    font-weight: 500;
}

.ice-empty-icon {
    font-size: 18px;
}

/* ── Dark Theme Overrides ── */
[data-ice-theme="dark"] .ice-dashboard-workspace {
    background-color: var(--bs-body-bg, #0f172a);
}

[data-ice-theme="dark"] .ice-dashboard-alert-banner {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.3);
    border-left-color: #ef4444;
}

[data-ice-theme="dark"] .ice-alert-title {
    color: #fca5a5;
}

[data-ice-theme="dark"] .ice-alert-description {
    color: #fca5a5;
}

/* --bs-heading-color is not defined by the dark theme, so the title fell back to its light colour. */
[data-ice-theme="dark"] .ice-dashboard-title {
    color: #f1f5f9;
}

[data-ice-theme="dark"] .ice-quick-action-separator {
    background-color: #334155;
}

[data-ice-theme="dark"] .ice-dashboard-chart-card {
    background: #1e293b;
    border-color: #334155;
}

[data-ice-theme="dark"] .ice-dashboard-chart-header {
    background: #0f172a;
    border-color: #334155;
}

[data-ice-theme="dark"] .ice-dashboard-chart-title {
    color: #e2e8f0;
}

[data-ice-theme="dark"] .ice-dashboard-chart-badge {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
}

[data-ice-theme="dark"] .ice-filter-chip {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}

[data-ice-theme="dark"] .ice-filter-chip:hover {
    background: #334155;
    color: #e2e8f0;
}

[data-ice-theme="dark"] .ice-dashboard-quick-actions-bar {
    background: #1e293b;
    border-color: #334155;
}

[data-ice-theme="dark"] .ice-kpi-card {
    background: #1e293b;
    border-color: #334155;
}

[data-ice-theme="dark"] .kpi-card-value {
    color: #f1f5f9;
}

[data-ice-theme="dark"] .ice-kpi-card.kpi-danger .kpi-card-value {
    color: #f87171;
}

[data-ice-theme="dark"] .ice-kpi-card.kpi-warning .kpi-card-value {
    color: #fbbf24;
}

[data-ice-theme="dark"] .ice-kpi-card.kpi-info .kpi-card-value {
    color: #60a5fa;
}

[data-ice-theme="dark"] .kpi-card-label {
    color: #94a3b8;
}

[data-ice-theme="dark"] .kpi-badge-danger {
    background-color: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

[data-ice-theme="dark"] .kpi-badge-warning {
    background-color: rgba(245, 158, 11, 0.2);
    color: #fde68a;
}

[data-ice-theme="dark"] .kpi-badge-info {
    background-color: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
}

[data-ice-theme="dark"] .kpi-badge-secondary {
    background-color: #334155;
    color: #cbd5e1;
}

[data-ice-theme="dark"] .ice-micro-card {
    background: #1e293b;
    border-color: #334155;
}

[data-ice-theme="dark"] .ice-micro-card-header {
    background: #0f172a;
    border-color: #334155;
}

[data-ice-theme="dark"] .ice-micro-card-title {
    color: #e2e8f0;
}

[data-ice-theme="dark"] .ice-micro-table th {
    background: #0f172a;
    color: #94a3b8;
    border-color: #334155;
}

[data-ice-theme="dark"] .ice-micro-table td {
    border-color: #334155;
    color: #cbd5e1;
}

[data-ice-theme="dark"] .ice-clickable-row:hover {
    background-color: rgba(59, 130, 246, 0.12) !important;
}

[data-ice-theme="dark"] .ice-part-code {
    color: #f1f5f9;
}

[data-ice-theme="dark"] .ice-part-name {
    color: #94a3b8;
}

/* ── Cockpit colours that used to be inline (K-49) ──────────────────────────────────────── */
.mrp-qty-demand,
.mrp-qty-negative {
    color: #dc3545;
}

.mrp-qty-supply,
.mrp-qty-positive {
    color: #198754;
}

.mrp-qty-withheld {
    color: #fd7e14;
}

.mrp-qty-proposed {
    color: #0d6efd;
}

.mrp-log-time {
    font-size: 11px;
    color: #6c757d;
}

.structure-kpi-card .kpi-icon-wrapper.kpi-icon-overload {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

.structure-kpi-card .kpi-icon-wrapper.kpi-icon-balanced {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

/* ── MRP and CRP cockpits, the dashboard, the CRP matrix and their popups in the dark theme ──
   (UAT-054, K-49) DevExpress' Blazing Dark leaves Bootstrap's light, white and dark colours at
   their light-theme values and native controls light: bg-light and bg-white panels stayed white
   under the theme's white text, text-dark badges read grey on blue, table-light and table-success
   rows glared, step numbers were white on white. These screens and their popups (rendered outside
   the screen, hence ice-cockpit-popup) re-point the variables and override the utilities that
   bypass them; the ICE classes that only had light colours get their dark tints. */
[data-ice-theme="dark"] :is(.mrp-run-workspace-root, .crp-cockpit-workspace-root, .ice-dashboard-workspace, .crp-matrix, .ice-cockpit-popup) {
    --bs-light-rgb: 30, 41, 59;
    --bs-dark-rgb: 15, 23, 42;
    color-scheme: dark;
}

[data-ice-theme="dark"] :is(.mrp-run-workspace-root, .crp-cockpit-workspace-root, .ice-dashboard-workspace, .crp-matrix, .ice-cockpit-popup) .bg-white {
    background-color: #1e293b !important;
}

[data-ice-theme="dark"] :is(.mrp-run-workspace-root, .crp-cockpit-workspace-root, .ice-dashboard-workspace, .crp-matrix, .ice-cockpit-popup) .badge.bg-light {
    background-color: #334155 !important;
    color: #e2e8f0 !important;
    border-color: #475569 !important;
}

[data-ice-theme="dark"] :is(.mrp-run-workspace-root, .crp-cockpit-workspace-root, .ice-dashboard-workspace, .crp-matrix, .ice-cockpit-popup) .badge.bg-success {
    background-color: #15803d !important;
}

[data-ice-theme="dark"] :is(.mrp-run-workspace-root, .crp-cockpit-workspace-root, .ice-dashboard-workspace, .crp-matrix, .ice-cockpit-popup) .badge.bg-danger {
    background-color: #b91c1c !important;
}

[data-ice-theme="dark"] :is(.mrp-run-workspace-root, .crp-cockpit-workspace-root, .ice-dashboard-workspace, .crp-matrix, .ice-cockpit-popup) .text-danger {
    color: #fca5a5 !important;
}

[data-ice-theme="dark"] :is(.mrp-run-workspace-root, .crp-cockpit-workspace-root, .ice-dashboard-workspace, .crp-matrix, .ice-cockpit-popup) .text-primary {
    color: #c4b5fd !important;
}

[data-ice-theme="dark"] :is(.mrp-run-workspace-root, .crp-cockpit-workspace-root, .ice-dashboard-workspace, .crp-matrix, .ice-cockpit-popup) .text-info {
    color: #7dd3fc !important;
}

[data-ice-theme="dark"] :is(.mrp-run-workspace-root, .crp-cockpit-workspace-root, .ice-dashboard-workspace, .crp-matrix, .ice-cockpit-popup) code {
    color: #f9a8d4;
}

[data-ice-theme="dark"] :is(.mrp-run-workspace-root, .crp-cockpit-workspace-root, .ice-dashboard-workspace, .crp-matrix, .ice-cockpit-popup) .table-light {
    --bs-table-bg: #0f172a;
    --bs-table-color: #cbd5e1;
    --bs-table-border-color: #334155;
    --bs-table-striped-bg: #0f172a;
    --bs-table-hover-bg: #1e293b;
    color: #cbd5e1;
}

[data-ice-theme="dark"] :is(.mrp-run-workspace-root, .crp-cockpit-workspace-root, .ice-dashboard-workspace, .crp-matrix, .ice-cockpit-popup) .table-success {
    --bs-table-bg: #064e3b;
    --bs-table-color: #d1fae5;
    --bs-table-border-color: #065f46;
    color: #d1fae5;
}

[data-ice-theme="dark"] :is(.mrp-run-workspace-root, .crp-cockpit-workspace-root, .ice-dashboard-workspace, .crp-matrix, .ice-cockpit-popup) .btn-outline-secondary {
    --bs-btn-color: #cbd5e1;
    --bs-btn-border-color: #475569;
    --bs-btn-hover-color: #f1f5f9;
    --bs-btn-hover-bg: #334155;
    --bs-btn-hover-border-color: #64748b;
    --bs-btn-active-color: #f1f5f9;
    --bs-btn-active-bg: #334155;
    --bs-btn-active-border-color: #64748b;
    color: #cbd5e1;
    border-color: #475569;
}

[data-ice-theme="dark"] .crp-stale-alert-banner {
    background-color: rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
}

[data-ice-theme="dark"] .crp-stale-alert-banner .text-dark {
    color: #fde68a !important;
}

[data-ice-theme="dark"] .mrp-step-num {
    background: #334155;
    color: #cbd5e1;
}

[data-ice-theme="dark"] .mrp-step-item.active .mrp-step-num {
    background: #0d6efd;
    color: #ffffff;
}

[data-ice-theme="dark"] .mrp-status-pill.status-completed,
[data-ice-theme="dark"] .mrp-badge-normal,
[data-ice-theme="dark"] .mrp-badge-stock {
    background: rgba(16, 185, 129, 0.15);
    color: #6ee7b7;
    border-color: rgba(16, 185, 129, 0.35);
}

[data-ice-theme="dark"] .mrp-status-pill.status-running,
[data-ice-theme="dark"] .mrp-badge-demand {
    background: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.35);
}

[data-ice-theme="dark"] .mrp-status-pill.status-error,
[data-ice-theme="dark"] .mrp-badge-overdue {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.35);
}

[data-ice-theme="dark"] .mrp-badge-urgent,
[data-ice-theme="dark"] .mrp-badge-wo {
    background: rgba(245, 158, 11, 0.15);
    color: #fcd34d;
    border-color: rgba(245, 158, 11, 0.35);
}

[data-ice-theme="dark"] .mrp-badge-pr {
    background: rgba(139, 92, 246, 0.18);
    color: #c4b5fd;
    border-color: rgba(139, 92, 246, 0.35);
}

[data-ice-theme="dark"] .mrp-merge-highlight-badge {
    background: rgba(14, 165, 233, 0.18);
    color: #7dd3fc;
}

[data-ice-theme="dark"] .mrp-kpi-demands .mrp-kpi-icon-wrapper {
    background: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
}

[data-ice-theme="dark"] .mrp-kpi-supplies .mrp-kpi-icon-wrapper {
    background: rgba(16, 185, 129, 0.15);
    color: #6ee7b7;
}

[data-ice-theme="dark"] .mrp-kpi-proposals-wo .mrp-kpi-icon-wrapper {
    background: rgba(245, 158, 11, 0.15);
    color: #fcd34d;
}

[data-ice-theme="dark"] .mrp-kpi-proposals-pr .mrp-kpi-icon-wrapper {
    background: rgba(139, 92, 246, 0.18);
    color: #c4b5fd;
}

[data-ice-theme="dark"] .mrp-kpi-diagnostics .mrp-kpi-icon-wrapper {
    background: rgba(148, 163, 184, 0.15);
    color: #cbd5e1;
}

[data-ice-theme="dark"] .mrp-merge-group-card {
    background: #1e293b;
    border-color: #334155;
}

[data-ice-theme="dark"] .mrp-icon-btn {
    color: #e2e8f0;
    border-color: #475569;
}

[data-ice-theme="dark"] .mrp-qty-demand,
[data-ice-theme="dark"] .mrp-qty-negative {
    color: #fca5a5;
}

[data-ice-theme="dark"] .mrp-qty-supply,
[data-ice-theme="dark"] .mrp-qty-positive {
    color: #86efac;
}

[data-ice-theme="dark"] .mrp-qty-withheld {
    color: #fdba74;
}

[data-ice-theme="dark"] .mrp-qty-proposed {
    color: #93c5fd;
}

[data-ice-theme="dark"] .mrp-log-time {
    color: #94a3b8;
}

[data-ice-theme="dark"] .structure-kpi-card .kpi-icon-wrapper.kpi-icon-overload {
    color: #f87171;
}

[data-ice-theme="dark"] .structure-kpi-card .kpi-icon-wrapper.kpi-icon-balanced {
    color: #34d399;
}

/* ── Cockpit success buttons ───────────────────────────────────────────────────
   Run MRP / Run CRP and the approvals wear the success notice's tone (.ice-notice-success), a
   step darker: the notice's translucent emerald at 20% instead of 10% as the fill, and the
   notice's own text colour (user request 25.09.2026). The first try filled the button with that
   text colour and came out far too dark. Translucent, so the button sits on the white card and
   on the dark one alike; CockpitVisualConventionTests keeps it tied to the notice. */
:is(.mrp-run-workspace-root, .crp-cockpit-workspace-root, .ice-cockpit-popup) .dxbl-btn-success {
    --dxbl-btn-bg: rgba(16, 185, 129, 0.2);
    --dxbl-btn-border-color: rgba(16, 185, 129, 0.45);
    --dxbl-btn-color: #047857;
    --dxbl-btn-hover-bg: rgba(16, 185, 129, 0.3);
    --dxbl-btn-hover-border-color: rgba(16, 185, 129, 0.6);
    --dxbl-btn-hover-color: #065f46;
    --dxbl-btn-active-bg: rgba(16, 185, 129, 0.4);
    --dxbl-btn-active-border-color: rgba(16, 185, 129, 0.7);
    --dxbl-btn-active-color: #064e3b;
    --dxbl-btn-focus-bg: rgba(16, 185, 129, 0.2);
    --dxbl-btn-focus-shadow-color: rgba(16, 185, 129, 0.35);
    --dxbl-btn-disabled-bg: rgba(16, 185, 129, 0.08);
    --dxbl-btn-disabled-border-color: rgba(16, 185, 129, 0.2);
    --dxbl-btn-disabled-color: rgba(4, 120, 87, 0.55);
}

[data-ice-theme="dark"] :is(.mrp-run-workspace-root, .crp-cockpit-workspace-root, .ice-cockpit-popup) .dxbl-btn-success {
    --dxbl-btn-bg: rgba(16, 185, 129, 0.25);
    --dxbl-btn-border-color: rgba(16, 185, 129, 0.5);
    --dxbl-btn-color: #6ee7b7;
    --dxbl-btn-hover-bg: rgba(16, 185, 129, 0.35);
    --dxbl-btn-hover-border-color: rgba(16, 185, 129, 0.65);
    --dxbl-btn-hover-color: #a7f3d0;
    --dxbl-btn-active-bg: rgba(16, 185, 129, 0.45);
    --dxbl-btn-active-border-color: rgba(16, 185, 129, 0.75);
    --dxbl-btn-active-color: #d1fae5;
    --dxbl-btn-focus-bg: rgba(16, 185, 129, 0.25);
    --dxbl-btn-disabled-bg: rgba(16, 185, 129, 0.1);
    --dxbl-btn-disabled-border-color: rgba(16, 185, 129, 0.2);
    --dxbl-btn-disabled-color: rgba(110, 231, 183, 0.5);
}

/* ── Dashboard charts ──────────────────────────────────────────────────────────────
   The shapes take their colours from DashboardChartPalette: soft, solid tones that read on the
   white and on the dark card (user request 25.09.2026, after a saturated and a pastel round).
   Everything around them follows the theme here. DevExtreme writes the colour of each text it
   draws into the element's inline style at the moment it draws, so a chart drawn in one theme
   kept that theme's text after a switch - the dark axis labels vanished on the dark card
   (YI-023). Only an !important rule wins over an inline style.
   The numbers are plain text beside the shapes: white would not read on the light tones, and the
   coloured box DevExtreme draws behind each one made the charts look busy. */
.ice-dashboard-workspace .dxc-labels-group .dxc-labels rect {
    fill-opacity: 0;
}

.ice-dashboard-workspace .dxc-labels-group text {
    fill: #334155 !important;
    font-weight: 600 !important;
}

.ice-dashboard-workspace .dxc-arg-elements text,
.ice-dashboard-workspace .dxc-val-elements text {
    fill: #64748b !important;
}

.ice-dashboard-workspace .dxc-val-grid path {
    stroke: #e2e8f0;
}

.ice-dashboard-workspace .dxc-arg-line path,
.ice-dashboard-workspace .dxc-val-line path {
    stroke: #cbd5e1;
}

/* Each rendered chart point opens its underlying filtered list. */
.ice-dashboard-workspace .ice-dashboard-drill-chart .dxc-series .dxc-markers path,
.ice-dashboard-workspace .ice-dashboard-drill-chart .dxc-series .dxc-markers rect {
    cursor: pointer;
}

/* A donut's slices are parted by a line in the card's colour. */
.ice-dashboard-workspace .ice-dashboard-donut .dxc-series .dxc-markers path {
    stroke: #ffffff;
    stroke-width: 2px;
}

.ice-dashboard-workspace .dxbl-chart-legend-def-icon {
    rx: 3px;
    ry: 3px;
}

[data-ice-theme="dark"] .ice-dashboard-workspace .dxc-labels-group text {
    fill: #e2e8f0 !important;
}

[data-ice-theme="dark"] .ice-dashboard-workspace .dxc-arg-elements text,
[data-ice-theme="dark"] .ice-dashboard-workspace .dxc-val-elements text {
    fill: #94a3b8 !important;
}

[data-ice-theme="dark"] .ice-dashboard-workspace .dxc-val-grid path {
    stroke: #334155;
}

[data-ice-theme="dark"] .ice-dashboard-workspace .dxc-arg-line path,
[data-ice-theme="dark"] .ice-dashboard-workspace .dxc-val-line path {
    stroke: #475569;
}

[data-ice-theme="dark"] .ice-dashboard-workspace .ice-dashboard-donut .dxc-series .dxc-markers path {
    stroke: #1e293b;
}

/* ── Shop Floor Terminal / Dijital Atölye Visual UI ─────────────────────────────
   Touch-first, responsive shop-floor operator workspace for industrial terminals,
   tablets, and desktop screens. Min 48-52px touch targets, high contrast, dark mode. */
.shopfloor-terminal-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: #f8fafc;
    color: #1e293b;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    padding: 12px;
    box-sizing: border-box;
    gap: 12px;
}

/* Top Sticky Control Ribbon */
.shopfloor-top-ribbon {
    background: #ffffff;
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid #e2e8f0;
}

.shopfloor-top-ribbon .ribbon-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Operator Badge */
.operator-badge-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 6px 14px;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.operator-badge-box:hover {
    background: #e2e8f0;
    border-color: #94a3b8;
}

.operator-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #2563eb;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
}

.operator-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.operator-label {
    font-size: 11px;
    text-transform: uppercase;
    color: #64748b;
    font-weight: 600;
}

.operator-name {
    font-size: 14px;
    color: #0f172a;
}

.operator-switch-icon {
    font-size: 16px;
    color: #64748b;
    margin-left: 4px;
}

/* Barcode Scanner Box */
.barcode-search-box {
    display: flex;
    align-items: center;
    flex: 1 1 320px;
    background: #ffffff;
    border: 2px solid #3b82f6;
    border-radius: 10px;
    padding: 4px 8px;
    gap: 8px;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.barcode-icon {
    font-size: 18px;
}

.barcode-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 15px;
    font-weight: 600;
    background: transparent;
    color: #0f172a;
}

.barcode-input::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

.btn-clear-search {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 16px;
    cursor: pointer;
    padding: 2px 6px;
}

.btn-clear-search:hover {
    color: #475569;
}

.btn-scan-submit {
    font-weight: 600;
}

.operator-barcode-search-box,
.serial-barcode-search-box {
    width: 100%;
    min-width: 0;
}

.operator-barcode-search-box .barcode-input,
.serial-barcode-search-box .barcode-input {
    min-width: 0;
}

.operator-barcode-search-box .btn-scan-submit,
.serial-barcode-search-box .btn-scan-submit {
    flex-shrink: 0;
}

/* Ribbon Filters */
.shopfloor-refresh-control {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.shopfloor-refresh-button {
    width: 100%;
}

.ribbon-filters {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-left: auto;
}

.filter-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-label {
    font-size: 13px;
    color: #475569;
    font-weight: 600;
}

.filter-combo {
    width: 140px;
}

/* Status Chips */
.shopfloor-terminal-container .status-filter-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 3px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.12);
    vertical-align: baseline;
}

.shopfloor-terminal-container .dot-Started { background: #22c55e; }
.shopfloor-terminal-container .dot-SetupStarted { background: #f59e0b; }
.shopfloor-terminal-container .dot-Released { background: #cbd5e1; }
.shopfloor-terminal-container .dot-PartiallyReported { background: #ef4444; }
.shopfloor-terminal-container .dot-SetupCompleted { background: #8b5cf6; }
.shopfloor-terminal-container .dot-PartiallyCanceled { background: #f97316; }
.shopfloor-terminal-container .dot-Canceled { background: #94a3b8; }
.shopfloor-terminal-container .dot-Reported { background: #3b82f6; }

.status-chips-label {
    font-size: 12px;
    text-transform: uppercase;
    color: #64748b;
    font-weight: 700;
}

.status-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.chip {
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #334155;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.chip:hover {
    background: #e2e8f0;
}

.chip.active {
    background: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
}

.chip-inprogress.active {
    background: #16a34a;
    border-color: #16a34a;
}

.chip-setup.active {
    background: #d97706;
    border-color: #d97706;
}

.chip-stopped.active {
    background: #dc2626;
    border-color: #dc2626;
}

.chip-reported.active {
    background: #475569;
    border-color: #475569;
}

/* Alerts */
.shopfloor-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
}

.shopfloor-alert.alert-danger {
    background-color: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.shopfloor-alert.alert-success {
    background-color: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.shopfloor-alert.alert-warning {
    background-color: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}

.alert-close {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    margin-left: auto;
    color: inherit;
}

/* Main Body Layout */
.shopfloor-body {
    display: flex;
    gap: 14px;
    flex: 1;
    min-height: 0;
}

/* Left Operations Pane */
.shopfloor-operations-pane {
    flex: 1 1 54%;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.pane-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 12px;
}

.pane-title {
    font-size: 16px;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 8px;
}

.badge-count {
    background: #e2e8f0;
    color: #334155;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
}

.batch-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-text-action {
    background: none;
    border: none;
    color: #2563eb;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 6px;
}

.btn-text-action:hover {
    text-decoration: underline;
}

.operations-card-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    padding-right: 4px;
    flex: 1;
}

.shopfloor-terminal-container .operation-card-section {
    flex: 0 0 auto;
    min-width: 0;
}

.shopfloor-terminal-container .operation-group {
    padding: 8px;
    border: 1px solid var(--bs-primary-border-subtle, #c7d2fe);
    border-inline-start: 3px solid #818cf8;
    border-radius: 12px;
    background: var(--bs-tertiary-bg, #f8fafc);
}

.shopfloor-terminal-container .operation-group-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 10px;
    margin-bottom: 8px;
    color: var(--bs-primary-text-emphasis, #3730a3);
    font-size: 12px;
}

.shopfloor-terminal-container .operation-group-title {
    min-width: 0;
    overflow-wrap: anywhere;
}

.shopfloor-terminal-container .operation-group-count {
    padding: 3px 7px;
    border-radius: 6px;
    background: var(--bs-primary-bg-subtle, #e0e7ff);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.shopfloor-terminal-container .operation-group-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

/* Operation Card */
.operation-card {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 8px;
    user-select: none;
}

.shopfloor-terminal-container .operation-card {
    padding: 8px 10px;
    gap: 6px;
}

.shopfloor-terminal-container .operation-card > .card-header {
    padding: 4px 6px;
}

.shopfloor-terminal-container .operation-card > .card-body {
    padding: 2px 6px;
}

.shopfloor-terminal-container .operation-card > .card-footer {
    padding: 6px 6px 0;
    margin-top: 0;
}

.operation-card:hover {
    border-color: #94a3b8;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
}

.operation-card.selected {
    border-color: #2563eb;
    background: #eff6ff;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

.operation-card.status-running-card {
    border-left: 6px solid #16a34a;
}

.operation-card.status-setup-card {
    border-left: 6px solid #d97706;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-wo-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.op-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.wo-no {
    font-weight: 700;
    color: #0f172a;
    font-size: 15px;
}

.wo-seq {
    color: #64748b;
    font-weight: 600;
    font-size: 13px;
}

.card-status-badge .badge {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.badge-running { background: #dcfce7; color: #15803d; }
.badge-setup { background: #fef3c7; color: #b45309; }
.badge-reported { background: #f1f5f9; color: #475569; }
.badge-stopped { background: #fee2e2; color: #b91c1c; }
.badge-ready { background: #f1f5f9; color: #334155; }

.shopfloor-terminal-container .sub-table .badge-secondary {
    background-color: #fef3c7;
    color: #92400e;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 rgba(22, 163, 74, 0.4);
    animation: pulse 1.5s infinite;
}

.pulse-dot.setup {
    background: #d97706;
    box-shadow: 0 0 0 rgba(217, 119, 6, 0.4);
}

@keyframes pulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.7); }
    70% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

.card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.part-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.part-code {
    font-size: 14px;
    color: #1e293b;
}

.part-name {
    font-size: 13px;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.op-name-row {
    font-size: 13px;
    color: #334155;
    display: flex;
    gap: 12px;
}

.shopfloor-terminal-container .card-active-resources {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px 12px;
    margin-top: 4px;
    min-width: 0;
}

.shopfloor-terminal-container .active-resource-row {
    display: flex;
    flex: 1 1 260px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

.shopfloor-terminal-container .active-resource-label {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
}

.shopfloor-terminal-container .active-resource-items {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 6px;
    min-width: 0;
}

.shopfloor-terminal-container .active-resource-tag {
    padding: 3px 6px;
    border-radius: 4px;
    background: #dcfce7;
    color: #166534;
    font-size: 12px;
    line-height: 1.4;
    max-width: calc((100% - 6px) / 2);
    overflow-wrap: anywhere;
}

.shopfloor-terminal-container .active-resource-tag:only-child {
    max-width: 100%;
}

.card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    border-top: 1px dashed #e2e8f0;
    padding-top: 6px;
    margin-top: 4px;
}

.qty-info {
    display: flex;
    gap: 10px;
    color: #475569;
}

.wc-machine-info {
    display: flex;
    gap: 6px;
}

.mch-tag, .wc-tag {
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
    font-size: 11px;
}

/* Right Action Pane */
.shopfloor-action-pane {
    flex: 1 1 46%;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    overflow-y: auto;
    gap: 14px;
}

/* The queue and the action pad scroll inside the screen. Unbounded, the terminal grew with every card - 73 on the
   Armoni site, 11,000 px - so the queue never scrolled on its own and the action pad left the screen as the page
   scrolled (tour, 11.10.2026). The 410 px leave room for the view's criteria and the ribbon above the panes. */
.shopfloor-operations-pane,
.shopfloor-action-pane {
    max-height: max(480px, calc(100vh - 410px));
}

.operations-card-list,
.machine-status-pane {
    min-height: 0;
}

.action-pad-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #94a3b8;
    text-align: center;
    padding: 40px;
}

.action-pad-empty .empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

/* Selected Op Hero */
.selected-op-hero {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.selected-op-hero.hero-running {
    background: #f0fdf4;
    border-color: #86efac;
}

.selected-op-hero.hero-setup {
    background: #fefce8;
    border-color: #fde047;
}

.hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hero-wo-label {
    font-size: 12px;
    color: #64748b;
    text-transform: uppercase;
    font-weight: 600;
}

.hero-wo-no {
    font-size: 18px;
    color: #0f172a;
    margin: 0 6px;
}

.hero-seq {
    font-size: 14px;
    color: #475569;
}

.status-pill {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.status-pill-running { background: #22c55e; color: #ffffff; }
.status-pill-setup { background: #eab308; color: #78350f; }
.status-pill-reported { background: #64748b; color: #ffffff; }
.status-pill-stopped { background: #dc2626; color: #ffffff; }
.status-pill-ready { background: #94a3b8; color: #ffffff; }

.hero-part {
    font-size: 15px;
    color: #334155;
    display: flex;
    gap: 8px;
    align-items: baseline;
}

.hero-part-code {
    font-weight: 700;
    color: #0f172a;
}

/* Hero Stopwatch */
.hero-stopwatch-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px 12px;
    margin: 4px 0;
}

.stopwatch-icon { font-size: 18px; }
.stopwatch-label { font-size: 13px; color: #475569; font-weight: 500; }
.stopwatch-timer { font-size: 18px; font-weight: 800; color: #16a34a; font-family: monospace; }
.stopwatch-operator { font-size: 12px; color: #64748b; }

/* Hero Stats Grid */
.hero-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 4px;
}

.stat-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.stat-label { font-size: 11px; text-transform: uppercase; color: #64748b; font-weight: 600; }
.stat-val { font-size: 16px; font-weight: 700; }
.stat-rem { color: #2563eb; }
.stat-exec { color: #059669; }
.stat-recv { color: #d97706; }
.stat-req { color: #475569; }

/* Touch Action Buttons Grid (Min 52px Touch-Optimized) */
.touch-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

.touch-btn {
    min-height: 52px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    cursor: pointer;
    transition: transform 0.1s ease, filter 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    user-select: none;
}

.touch-btn:active {
    transform: scale(0.97);
}

.touch-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

.touch-btn .btn-icon {
    font-size: 16px;
}

/* Button Color Variants */
.btn-start-production { background: #16a34a; }
.btn-start-production:hover:not(:disabled) { background: #15803d; }

.btn-stop-production { background: #ea580c; }
.btn-stop-production:hover:not(:disabled) { background: #c2410c; }

.btn-start-setup { background: #0284c7; }
.btn-start-setup:hover:not(:disabled) { background: #0369a1; }

.btn-stop-setup { background: #334155; }
.btn-stop-setup:hover:not(:disabled) { background: #1e293b; }

.btn-approve { background: #059669; grid-column: span 2; }
.btn-approve:hover:not(:disabled) { background: #047857; }

.btn-scrap { background: #dc2626; }
.btn-scrap:hover:not(:disabled) { background: #b91c1c; }

.btn-receive { background: #2563eb; }
.btn-receive:hover:not(:disabled) { background: #1d4ed8; }

.btn-manual-issue { background: #7c3aed; }
.btn-manual-issue:hover:not(:disabled) { background: #6d28d9; }

.btn-tool { background: #475569; }
.btn-tool:hover:not(:disabled) { background: #334155; }

.btn-group-operations, .btn-ungroup { background: #ca8a04; }
.btn-group-operations:hover:not(:disabled), .btn-ungroup:hover:not(:disabled) { background: #a16207; }

/* Sub Details Tabs */
.op-details-section {
    display: flex;
    flex-direction: column;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 4px;
}

.shopfloor-terminal-container .op-details-section {
    flex: 1 1 auto;
    min-height: 360px;
}

.tabs-nav {
    display: flex;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
}

.tab-nav-btn {
    flex: 1;
    background: none;
    border: none;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.15s ease;
}

.tab-nav-btn:hover {
    color: #0f172a;
    background: #e2e8f0;
}

.tab-nav-btn.active {
    color: #2563eb;
    background: #ffffff;
    border-bottom-color: #2563eb;
}

.tab-content-area {
    padding: 12px;
    flex: 1 1 auto;
    min-height: 300px;
    max-height: clamp(360px, 50vh, 720px);
    overflow-y: auto;
}

.tab-empty {
    color: #94a3b8;
    text-align: center;
    padding: 24px;
    font-size: 13px;
}

.sub-table-responsive {
    overflow-x: auto;
}

.sub-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.sub-table th, .sub-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #e2e8f0;
    text-align: left;
}

.sub-table th {
    background: #f8fafc;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
}

.sub-text {
    font-size: 11px;
    color: #64748b;
}

.btn-sub-action {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
}

.btn-sub-action:hover {
    background: #e2e8f0;
}

.btn-sub-receive {
    background: #dbeafe;
    color: #1e40af;
    border-color: #bfdbfe;
}

/* Modals */
.last-op-box {
    /* Match the MRP supply icon's mint surface through Bootstrap utilities. */
    --bs-light-rgb: 236, 253, 245;
    --bs-border-color: #a7f3d0;
}

.touch-modal-body {
    /* Keep Bootstrap row gutters inside the popup body. */
    padding: 16px;
    min-width: 0;
}

/* Terminal material sources share the touch popup actions and keep narrow layouts inside the viewport. */
.material-source-popup {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 80vh;
    overflow-y: auto;
}

.material-source-summary,
.material-source-row {
    border: 1px solid var(--bs-border-color, #e2e8f0);
    border-radius: 8px;
    padding: 12px;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #1e293b);
    min-width: 0;
}

.material-source-summary {
    background: #ecfdf5;
    border-color: #a7f3d0;
}

.material-source-part,
.material-source-identity,
.material-source-balances,
.material-source-entry {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.material-source-part > strong {
    font-size: 16px;
}

.material-source-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.material-source-metrics > div {
    display: flex;
    flex-direction: column;
}

.material-source-metrics span,
.material-source-hint,
.material-source-identity small {
    font-size: 12px;
}

.material-source-tabs {
    flex-wrap: wrap;
    border-radius: 8px;
}

.material-source-search {
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--bs-border-color, #e2e8f0);
    border-radius: 8px;
    background: var(--bs-body-bg, #fff);
    color: inherit;
}

.material-source-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 38vh;
    overflow-y: auto;
    min-height: 80px;
}

.material-source-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(160px, 0.85fr);
    gap: 12px;
    font-size: 13px;
}

.material-source-entry label {
    font-weight: 600;
}

.material-source-quantity-input {
    display: flex;
    align-items: stretch;
    gap: 6px;
}

.material-source-quantity-input > .w-100 {
    flex: 1;
    min-width: 0;
    width: 0 !important;
}

.material-source-fill {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 6px 10px;
    font-size: 13px;
}

.material-source-row.undo-pending {
    border-color: #d97706;
    background: #fffbeb;
}

.material-source-undo-note {
    color: #92400e;
}

.material-source-total {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
}

.material-source-hint,
.material-source-empty {
    margin: 0;
}

@media (max-width: 640px) {
    .material-source-row { grid-template-columns: 1fr; }
    .material-source-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .material-source-tabs .tab-nav-btn { flex-basis: 45%; }
}

[data-ice-theme="dark"] .material-source-popup {
    --bs-border-color: #334155;
}

[data-ice-theme="dark"] .material-source-summary {
    background: #064e3b;
    border-color: #065f46;
}

[data-ice-theme="dark"] .material-source-row.undo-pending {
    background: #451a03;
    border-color: #b45309;
}

[data-ice-theme="dark"] .material-source-undo-note {
    color: #fde68a;
}

.byproduct-receipt-popup {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 80vh;
    overflow-y: auto;
    color: var(--bs-body-color, #1e293b);
}

.byproduct-receipt-summary {
    border: 1px solid #a7f3d0;
    border-radius: 8px;
    padding: 12px;
    background: #ecfdf5;
}

.byproduct-receipt-product,
.byproduct-receipt-field,
.byproduct-receipt-metrics > div {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.byproduct-receipt-product > strong { font-size: 16px; }
.byproduct-receipt-product > small,
.byproduct-receipt-metrics span { font-size: 12px; }
.byproduct-receipt-field > label { font-weight: 600; }
.byproduct-receipt-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.byproduct-receipt-quantity {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.byproduct-receipt-quantity > .w-100 { flex: 1; min-width: 0; width: 0 !important; }
.byproduct-receipt-tracking {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 12px;
}

.byproduct-receipt-serials {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 120px;
    overflow-y: auto;
}

.byproduct-receipt-serials > span { border: 1px solid var(--bs-border-color, #cbd5e1); border-radius: 4px; padding: 4px 8px; }
[data-ice-theme="dark"] .byproduct-receipt-summary { background: #064e3b; border-color: #065f46; }

.byproduct-receipt-previous { border: 1px solid var(--bs-border-color, #cbd5e1); border-radius: 8px; padding: 10px; margin: 12px 0; }
.byproduct-receipt-history-toggle { border: 0; background: transparent; color: inherit; font-weight: 600; padding: 4px; text-align: start; width: 100%; }
.byproduct-receipt-history-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 0; border-top: 1px solid var(--bs-border-color, #cbd5e1); }
.byproduct-receipt-history-info { flex: 1; min-width: min(100%, 220px); display: flex; flex-direction: column; gap: 3px; overflow-wrap: anywhere; }
.byproduct-receipt-history-info small { opacity: .8; }
.byproduct-receipt-undo-confirm { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid #dc2626; border-radius: 8px; }
.byproduct-receipt-undo-confirm .modal-actions-touch { margin-top: 4px; }
.inventory-history-note { padding: 8px 12px; font-size: .85em; opacity: .8; }
.inventory-history-list { padding: 0 12px 12px; }
.inventory-history-row { padding: 10px 0; border-bottom: 1px solid var(--bs-border-color, #cbd5e1); overflow-wrap: anywhere; }
.inventory-history-heading, .inventory-history-values { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
.inventory-history-heading { justify-content: space-between; }
.inventory-history-heading time { font-size: .85em; opacity: .8; }

.tool-usage-popup { display: flex; flex-direction: column; gap: 14px; max-height: 80vh; overflow-y: auto; color: var(--bs-body-color, #1e293b); }
.tool-usage-summary { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid #a7f3d0; border-radius: 8px; background: #ecfdf5; overflow-wrap: anywhere; }
.tool-usage-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.tool-usage-toolbar > button { flex-shrink: 0; }
.tool-usage-hint { flex: 1; min-width: min(100%, 200px); font-size: .85em; opacity: .85; }
.tool-usage-list { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tool-usage-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; padding: 12px; border: 1px solid var(--bs-border-color, #cbd5e1); border-radius: 8px; background: var(--bs-body-bg, #fff); }
.tool-usage-selection { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tool-usage-selection > label { font-weight: 600; }
.tool-usage-state { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.tool-usage-state .form-check { min-height: 32px; display: flex; align-items: center; gap: 8px; margin-bottom: 0; }
.tool-usage-state .form-check-input { flex-shrink: 0; margin-top: 0; }
.tool-usage-state small { font-size: .85em; opacity: .85; }
.tool-usage-remove { align-self: center; }
.tool-usage-empty { padding: 22px 12px; text-align: center; border: 1px dashed var(--bs-border-color, #cbd5e1); border-radius: 8px; }
[data-ice-theme="dark"] .tool-usage-summary { background: #064e3b; border-color: #065f46; }
[data-ice-theme="dark"] .tool-usage-popup { --bs-border-color: #475569; }
@media (max-width: 480px) {
    .tool-usage-row { padding: 10px; gap: 8px; }
    .tool-usage-toolbar > button { width: 100%; }
}
.inventory-history-values { margin-top: 5px; }
.inventory-history-row small { display: block; }
.inventory-history-row.is-undo { border-inline-start: 3px solid #dc2626; padding-inline-start: 8px; }

.operator-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    max-height: 380px;
    overflow-y: auto;
}

.operator-select-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.operator-select-card:hover {
    border-color: #2563eb;
    background: #eff6ff;
}

.op-card-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #3b82f6;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.op-card-name {
    font-size: 14px;
    display: block;
    color: #0f172a;
}

.op-card-code {
    font-size: 11px;
    color: #64748b;
}

/* Touch Stepper */
.touch-stepper-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.btn-step {
    min-width: 48px;
    height: 48px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    cursor: pointer;
}

.btn-step:hover {
    background: #e2e8f0;
}

.stepper-input {
    flex: 1 1 80px;
    min-width: 0;
    width: 80px;
    height: 48px;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    border: 2px solid #cbd5e1;
    border-radius: 8px;
}

.btn-step-max {
    height: 48px;
    padding: 0 14px;
    background: #dbeafe;
    border: 1px solid #93c5fd;
    border-radius: 8px;
    color: #1d4ed8;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
}

/* Touch Toggle Group */
.touch-button-group {
    display: flex;
    gap: 8px;
}

.touch-button-group.vertical {
    flex-direction: column;
}

.btn-toggle {
    flex: 1;
    min-height: 44px;
    background: #f8fafc;
    border: 2px solid #cbd5e1;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    color: #334155;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
    padding: 8px 12px;
}

.btn-toggle:hover {
    background: #e2e8f0;
}

.btn-toggle.active {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

.modal-actions-touch {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.modal-actions-touch.vertical {
    flex-direction: column;
}

.btn-touch-primary, .btn-touch-secondary, .btn-touch-link {
    min-height: 48px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    padding: 10px 16px;
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-touch-primary {
    flex: 2;
    color: #ffffff;
}

.btn-touch-secondary {
    flex: 1;
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #cbd5e1;
}

.btn-touch-success { background: #16a34a; }
.btn-touch-warning { background: #d97706; }
.btn-touch-danger { background: #dc2626; }
.btn-touch-info { background: #0284c7; }
.btn-touch-purple { background: #7c3aed; }
.btn-touch-indigo { background: #4f46e5; }
.btn-touch-secondary-action { background: #475569; }

.btn-touch-link {
    background: none;
    color: #64748b;
    border: none;
}

/* Responsive Media Queries */
@media (max-width: 1024px) {
    .shopfloor-body {
        flex-direction: column;
    }
    .shopfloor-operations-pane,
    .shopfloor-action-pane {
        flex: 1 1 100%;
    }
    .touch-actions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .shopfloor-terminal-container {
        padding: 6px;
    }
    .ribbon-row.main-row {
        flex-direction: column;
        align-items: stretch;
    }
    .operator-badge-box, .barcode-search-box {
        width: 100%;
    }
    .ribbon-filters {
        width: 100%;
        justify-content: space-between;
    }
    .touch-actions-grid {
        grid-template-columns: 1fr;
    }
    .btn-approve {
        grid-column: span 1;
    }
}

/* Dark Theme Support */
[data-ice-theme="dark"] .shopfloor-terminal-container {
    background-color: #0f172a;
    color: #f1f5f9;
}

[data-ice-theme="dark"] .shopfloor-top-ribbon,
[data-ice-theme="dark"] .shopfloor-operations-pane,
[data-ice-theme="dark"] .shopfloor-action-pane,
[data-ice-theme="dark"] .operation-card,
[data-ice-theme="dark"] .selected-op-hero,
[data-ice-theme="dark"] .barcode-search-box,
[data-ice-theme="dark"] .operator-badge-box {
    background-color: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
}

[data-ice-theme="dark"] .barcode-input {
    color: #f1f5f9;
}

[data-ice-theme="dark"] .chip {
    background: #1e293b;
    border-color: #334155;
    color: #cbd5e1;
}

[data-ice-theme="dark"] .chip.active {
    background: #0284c7;
    color: #ffffff;
}

[data-ice-theme="dark"] .operation-card:hover {
    border-color: #64748b;
}

[data-ice-theme="dark"] .operation-card.selected {
    background: #1e3a8a;
    border-color: #3b82f6;
}

[data-ice-theme="dark"] .shopfloor-terminal-container .operation-group {
    background: #0f172a;
    border-color: #6366f1;
}

[data-ice-theme="dark"] .shopfloor-terminal-container .operation-group-header {
    color: #c7d2fe;
}

[data-ice-theme="dark"] .shopfloor-terminal-container .operation-group-count {
    background: #312e81;
    color: #e0e7ff;
}

[data-ice-theme="dark"] .shopfloor-terminal-container .active-resource-label {
    color: #cbd5e1;
}

[data-ice-theme="dark"] .shopfloor-terminal-container .active-resource-tag {
    background: #064e3b;
    color: #a7f3d0;
}

[data-ice-theme="dark"] .wo-no,
[data-ice-theme="dark"] .hero-wo-no,
[data-ice-theme="dark"] .part-code,
[data-ice-theme="dark"] .hero-part-code,
[data-ice-theme="dark"] .operator-name {
    color: #ffffff;
}

[data-ice-theme="dark"] .part-name,
[data-ice-theme="dark"] .hero-part-name,
[data-ice-theme="dark"] .wo-seq,
[data-ice-theme="dark"] .hero-seq {
    color: #94a3b8;
}

[data-ice-theme="dark"] .stat-card,
[data-ice-theme="dark"] .hero-stopwatch-bar,
[data-ice-theme="dark"] .tab-nav-btn.active {
    background: #0f172a;
    border-color: #334155;
    color: #f1f5f9;
}

[data-ice-theme="dark"] .last-op-box {
    --bs-light-rgb: 6, 46, 35;
    --bs-border-color: #065f46;
    color: #d1fae5;
}

[data-ice-theme="dark"] .tabs-nav {
    background: #1e293b;
    border-color: #334155;
}

[data-ice-theme="dark"] .tab-nav-btn {
    color: #94a3b8;
}

[data-ice-theme="dark"] .sub-table th {
    background: #0f172a;
    color: #94a3b8;
}

[data-ice-theme="dark"] .sub-table td {
    border-color: #334155;
    color: #e2e8f0;
}

[data-ice-theme="dark"] .btn-toggle,
[data-ice-theme="dark"] .btn-step,
[data-ice-theme="dark"] .btn-touch-secondary,
[data-ice-theme="dark"] .operator-select-card {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}

[data-ice-theme="dark"] .btn-toggle.active {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

/* Hide XAF grids until their initial column widths have been fitted. */
dxbl-grid[xaf-grid-owner-dxgridlisteditorbase="DevExpress.ExpressApp.Blazor.Editors.DxGridListEditor"]:not(.ice-grid-auto-fit-ready) {
    visibility: hidden;
}

/* General ledger transfer preview (D-13): the document whose voucher stands beside the list is marked clearly. */
.ice-gl-preview-documents .dxbl-grid-selected-row > td {
    background: rgba(59, 130, 246, 0.16) !important;
    font-weight: 600;
}

[data-ice-theme="dark"] .ice-gl-preview-documents .dxbl-grid-selected-row > td {
    background: #1e3a8a !important;
}

/* ── Downtime capture and machine status (Durus-OEE-Plani-V1_1 §7.1-7.2) ── */
.ribbon-downtime-btn {
    min-height: 44px;
    border: none;
    border-radius: 10px;
    background: #b91c1c;
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
    padding: 8px 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    white-space: nowrap;
}

.ribbon-downtime-btn:hover { background: #991b1b; }

.ribbon-fullscreen-btn {
    min-height: 44px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #f1f5f9;
    color: #334155;
    font-weight: 700;
    font-size: 14px;
    padding: 8px 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    white-space: nowrap;
}

.ribbon-fullscreen-btn:hover { background: #e2e8f0; }

[data-ice-theme="dark"] .ribbon-fullscreen-btn {
    background: #1e293b;
    color: #f1f5f9;
    border-color: #334155;
}

/* Full screen on the terminal: over the application's header (1030) and under the terminal's own windows - DevExpress
   opens its popups from 1050 up, so the board's 2000 would have hidden them. The panes get the room the header had. */
.shopfloor-terminal-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 1040;
    overflow-y: auto;
}

/* The application's logo where full screen hides the header: the terminal and the machine status board. */
.ice-fullscreen-logo {
    flex: 0 0 200px;
}

.shopfloor-terminal-fullscreen .shopfloor-operations-pane,
.shopfloor-terminal-fullscreen .shopfloor-action-pane {
    max-height: max(480px, calc(100vh - 190px));
}

.pane-view-toggle {
    display: flex;
    gap: 6px;
}

.btn-resume { background: #15803d; }
.btn-resume:hover:not(:disabled) { background: #166534; }

.btn-downtime { background: #b91c1c; }
.btn-downtime:hover:not(:disabled) { background: #991b1b; }

.btn-downtime-list { background: #7c2d12; }
.btn-downtime-list:hover:not(:disabled) { background: #6c2410; }

.downtime-reason-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}

.downtime-reason-tile {
    min-height: 56px;
    border: 2px solid var(--downtime-reason-color, #6b7280);
    border-left-width: 8px;
    border-radius: 10px;
    background: #ffffff;
    color: #0f172a;
    font-weight: 700;
    font-size: 13px;
    padding: 8px 10px;
    text-align: left;
    cursor: pointer;
}

.downtime-reason-tile.selected {
    background: var(--downtime-reason-color, #6b7280);
    color: #ffffff;
}

.downtime-reason-alternatives {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.downtime-popup-tabs {
    display: flex;
    gap: 8px;
}

.downtime-unclassified-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.downtime-unclassified-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.downtime-unclassified-row.active {
    border-color: #2563eb;
}

.machine-status-pane {
    flex: 1;
    overflow-y: auto;
}

.machine-status-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;
}

.machine-status-tiles-large {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

.machine-status-empty {
    padding: 24px;
    text-align: center;
    color: #64748b;
}

.machine-status-tile {
    --machine-state-color: #64748b;
    border-radius: 12px;
    border: 2px solid var(--machine-state-color);
    border-top-width: 10px;
    background: #ffffff;
    color: #0f172a;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 13px;
    min-height: 120px;
}

.machine-status-clickable { cursor: pointer; }
.machine-status-clickable:hover { box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18); }

.machine-state-running { --machine-state-color: #16a34a; }
.machine-state-setup { --machine-state-color: #0284c7; }
.machine-state-down { --machine-state-color: var(--machine-reason-color, #dc2626); }
.machine-state-planneddown { --machine-state-color: var(--machine-reason-color, #64748b); }
.machine-state-idle { --machine-state-color: #ca8a04; }
.machine-state-offshift { --machine-state-color: #94a3b8; }

/* The state badge drops under the code when both do not fit, and breaks its own text only where a line
   of its own is still too narrow: "Außerhalb der Schicht" is wider than a 190px terminal tile, ran off its
   edge and squeezed the machine code onto three lines (downtime UAT-055, K-12). */
.machine-status-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 2px 6px;
}

.machine-status-code { font-size: 15px; }

.machine-status-state {
    background: var(--machine-state-color);
    color: #ffffff;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    max-width: 100%;
    text-align: center;
}

.machine-status-name,
.machine-status-workcenter,
.machine-status-part,
.machine-status-operators {
    color: #475569;
}

.machine-status-elapsed {
    font-size: 18px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.machine-status-reason {
    font-weight: 700;
    color: var(--machine-state-color);
}

.machine-status-tiles-large .machine-status-tile { font-size: 15px; min-height: 160px; }
.machine-status-tiles-large .machine-status-code { font-size: 20px; }
.machine-status-tiles-large .machine-status-elapsed { font-size: 26px; }

/* The machine's OEE so far today on the TV board (OEE licence, Durus-OEE-Plani-V1_1 §7.2). */
.machine-status-oee {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.machine-status-tiles-large .machine-status-oee { font-size: 18px; }

.machine-status-board {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px;
}

.machine-status-board-tv {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: #f1f5f9;
    padding: 16px 20px;
    overflow-y: auto;
}

.machine-status-board-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.machine-status-board-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Side by side: a combo box takes the whole width it is given, so the two stacked (tour, 11.10.2026). */
.machine-status-board-site,
.machine-status-board-workcenter {
    flex: 0 0 300px;
    width: 300px;
}

.machine-status-board-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.machine-status-count {
    border-left: 6px solid var(--machine-state-color);
    background: #ffffff;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 14px;
}

.machine-status-board-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.machine-status-board-clock {
    font-size: 26px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

[data-ice-theme="dark"] .downtime-reason-tile,
[data-ice-theme="dark"] .machine-status-tile,
[data-ice-theme="dark"] .machine-status-count {
    background: #1e293b;
    color: #f1f5f9;
}

[data-ice-theme="dark"] .downtime-reason-tile.selected {
    background: var(--downtime-reason-color, #6b7280);
    color: #ffffff;
}

[data-ice-theme="dark"] .machine-status-name,
[data-ice-theme="dark"] .machine-status-workcenter,
[data-ice-theme="dark"] .machine-status-part,
[data-ice-theme="dark"] .machine-status-operators,
[data-ice-theme="dark"] .machine-status-empty {
    color: #cbd5e1;
}

[data-ice-theme="dark"] .downtime-unclassified-row {
    border-color: #334155;
}

[data-ice-theme="dark"] .machine-status-board-tv {
    background: #0f172a;
    color: #f1f5f9;
}

/* "Report Fault" on a machine tile and the stop window's maintenance request box (Bakim-Modul-Plani-V2_0 M6). */
.machine-status-fault-button {
    margin-top: auto;
    align-self: flex-start;
    border: 1px solid #b45309;
    border-radius: 8px;
    background: #fffbeb;
    color: #92400e;
    font-weight: 700;
    font-size: 12px;
    padding: 4px 10px;
    cursor: pointer;
}

.machine-status-fault-button:hover { background: #fef3c7; }

.downtime-maintenance-request {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 15px;
}

.downtime-maintenance-request .form-check-input {
    width: 1.4em;
    height: 1.4em;
    margin: 0;
}

[data-ice-theme="dark"] .machine-status-fault-button {
    background: #451a03;
    border-color: #f59e0b;
    color: #fde68a;
}

/* Open maintenance and the next planned maintenance stop on a machine tile (Bakim-Modul-Plani-V2_0 B4.4). */
.machine-status-maintenance,
.machine-status-planned-maintenance {
    color: #475569;
    font-weight: 600;
}

/* An order under way that stops the machine; one that leaves it running keeps the calm colour above. */
.machine-status-maintenance-stopping {
    color: #b91c1c;
    font-weight: 700;
}

[data-ice-theme="dark"] .machine-status-maintenance,
[data-ice-theme="dark"] .machine-status-planned-maintenance {
    color: #cbd5e1;
}

[data-ice-theme="dark"] .machine-status-maintenance-stopping {
    color: #f87171;
}

/* ---- OEE cockpit (Durus-OEE-Plani-V1_1 §9, G4.1) ---- */
.oee-cockpit {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px;
}

.oee-cockpit-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* DevExpress editors fill their container: the filters get fixed widths so they share one row. */
.oee-cockpit-filters > .oee-cockpit-site,
.oee-cockpit-filters > .oee-cockpit-workcenter,
.oee-cockpit-filters > .oee-cockpit-machine {
    flex: 0 0 240px;
    width: 240px;
}

.oee-cockpit-filters > .oee-cockpit-date { flex: 0 0 140px; width: 140px; }
.oee-cockpit-filters > .oee-cockpit-period { flex: 0 0 110px; width: 110px; }

.oee-cockpit-label {
    font-size: 13px;
    color: var(--bs-secondary-color, #64748b);
}

.oee-cockpit-alert {
    border: 1px solid #f5c2c7;
    background: #f8d7da;
    color: #842029;
    border-radius: 6px;
    padding: 8px 12px;
}

.oee-cockpit-note {
    font-size: 13px;
    color: var(--bs-secondary-color, #64748b);
}

.oee-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.oee-kpi {
    background: var(--bs-body-bg, #ffffff);
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px;
}

.oee-kpi-main { border-top: 4px solid #6366f1; }

.oee-kpi-caption {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--bs-secondary-color, #64748b);
}

.oee-kpi-value {
    font-size: 26px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.oee-good { color: #15803d; }
.oee-fair { color: #b45309; }
.oee-poor { color: #b91c1c; }

.oee-gauges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.oee-gauge {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 260px;
    flex: 1;
}

.oee-gauge-caption { width: 110px; font-size: 13px; }
.oee-gauge-value { width: 60px; text-align: right; font-variant-numeric: tabular-nums; }

.oee-gauge-track {
    position: relative;
    flex: 1;
    height: 14px;
    border-radius: 7px;
    background: #e2e8f0;
    overflow: hidden;
}

.oee-gauge-fill {
    height: 100%;
    background: #6366f1;
}

.oee-gauge-fill.oee-good { background: #16a34a; }
.oee-gauge-fill.oee-fair { background: #f59e0b; }
.oee-gauge-fill.oee-poor { background: #dc2626; }

.oee-gauge-reference {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 85%;
    border-left: 2px dashed #0f172a;
}

.oee-gauge-legend {
    font-size: 12px;
    color: var(--bs-secondary-color, #64748b);
}

.oee-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 12px;
}

.oee-card {
    background: var(--bs-body-bg, #ffffff);
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px;
    min-width: 0;
}

.oee-card h4 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 8px;
}

.oee-card h5 {
    font-size: 13px;
    font-weight: 600;
    margin: 8px 0 4px;
}

.oee-empty {
    color: var(--bs-secondary-color, #64748b);
    font-size: 13px;
    padding: 12px 0;
}

.oee-table,
.oee-waterfall-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.oee-table th,
.oee-table td,
.oee-waterfall-table td {
    padding: 4px 6px;
    border-bottom: 1px solid #eef2f7;
    vertical-align: middle;
}

.oee-table th { color: var(--bs-secondary-color, #64748b); font-weight: 600; text-align: left; }
.oee-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.oee-clickable { cursor: pointer; }
.oee-clickable:hover { background: rgba(99, 102, 241, .08); }

.oee-bar {
    height: 10px;
    border-radius: 5px;
    background: #eef2f7;
    overflow: hidden;
}

.oee-bar-fill { height: 100%; background: #6366f1; }
.oee-bar-total { background: #64748b; }
.oee-bar-loss { background: #f59e0b; }
.oee-bar-good { background: #16a34a; }
.oee-bar-breakdown { background: #dc2626; }
.oee-bar-unexplained { background: #94a3b8; }
.oee-bar-setup { background: #0ea5e9; }

.oee-bar-label { font-size: 12px; margin-bottom: 2px; }
.oee-waterfall-caption { width: 42%; }
.oee-waterfall-bar { width: 38%; }
.oee-waterfall-loss .oee-waterfall-caption { padding-left: 18px; color: var(--bs-secondary-color, #64748b); }

.oee-heat-scroll { overflow-x: auto; }

.oee-heat-table {
    border-collapse: separate;
    border-spacing: 2px;
    font-size: 12px;
}

.oee-heat-table th {
    font-weight: 600;
    padding: 2px 6px;
    white-space: nowrap;
    text-align: left;
}

.oee-heat-cell {
    min-width: 38px;
    height: 26px;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}

.oee-heat-good { background: #bbf7d0; color: #14532d; }
.oee-heat-fair { background: #fde68a; color: #78350f; }
.oee-heat-poor { background: #fecaca; color: #7f1d1d; }
.oee-heat-idle { background: #f1f5f9; }
.oee-heat-none { background: #f8fafc; }

.oee-issue-list {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
}

/* A machine's day as it went (G4.4): one bar per production day, stretches placed by time. */
.oee-timeline-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 3px 0;
}

.oee-timeline-day { width: 88px; font-size: 12px; white-space: nowrap; }

.oee-timeline-bar {
    position: relative;
    flex: 1;
    height: 18px;
    border-radius: 4px;
    background: #f1f5f9;
    overflow: hidden;
}

.oee-timeline-seg { position: absolute; top: 0; bottom: 0; }
.oee-seg-running { background: #16a34a; }
.oee-seg-setup { background: #0ea5e9; }
.oee-seg-breakdown { background: #dc2626; }
.oee-seg-otherloss { background: #f97316; }
.oee-seg-shortstop { background: #facc15; }
.oee-seg-unexplained { background: #94a3b8; }
.oee-seg-break { background: #cbd5e1; }
.oee-seg-plannedstop { background: #a78bfa; }
.oee-seg-notplanned { background: #f8fafc; }

.oee-timeline-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
    font-size: 12px;
}

.oee-timeline-key { display: inline-flex; align-items: center; gap: 4px; }

.oee-timeline-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    border: 1px solid #e2e8f0;
}

[data-ice-theme="dark"] .oee-kpi,
[data-ice-theme="dark"] .oee-card {
    background: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
}

[data-ice-theme="dark"] .oee-table th,
[data-ice-theme="dark"] .oee-table td,
[data-ice-theme="dark"] .oee-waterfall-table td {
    border-bottom-color: #334155;
}

[data-ice-theme="dark"] .oee-table th { color: #cbd5e1; }
[data-ice-theme="dark"] .oee-bar,
[data-ice-theme="dark"] .oee-gauge-track { background: #334155; }
[data-ice-theme="dark"] .oee-gauge-reference { border-left-color: #f1f5f9; }
[data-ice-theme="dark"] .oee-good { color: #4ade80; }
[data-ice-theme="dark"] .oee-fair { color: #fbbf24; }
[data-ice-theme="dark"] .oee-poor { color: #f87171; }
[data-ice-theme="dark"] .oee-heat-idle,
[data-ice-theme="dark"] .oee-heat-none { background: #0f172a; }
[data-ice-theme="dark"] .oee-heat-good { background: #166534; color: #dcfce7; }
[data-ice-theme="dark"] .oee-heat-fair { background: #92400e; color: #fef3c7; }
[data-ice-theme="dark"] .oee-heat-poor { background: #991b1b; color: #fee2e2; }
[data-ice-theme="dark"] .oee-timeline-bar,
[data-ice-theme="dark"] .oee-seg-notplanned { background: #0f172a; }
[data-ice-theme="dark"] .oee-timeline-swatch { border-color: #334155; }

/* T-19: a day a planned stop took capacity from - the matrix cell, the Gantt day row and the Gantt band over the
   stop's hours. Last in the file on purpose: the load colours set the background shorthand with !important, which
   would clear the hatch. */
.crp-cell-stopped,
.crp-gantt-stopband,
.crp-gantt-stopband-swatch {
    background-image: repeating-linear-gradient(135deg, rgba(100, 116, 139, 0.30) 0 4px, transparent 4px 8px) !important;
}

.crp-cell-stopped {
    color: #475569;
}

.crp-gantt-stopband,
.crp-gantt-stopband-swatch {
    background-color: rgba(100, 116, 139, 0.12);
}

.crp-gantt-stopband {
    position: absolute;
    bottom: 2px;
    border-left: 1px solid rgba(100, 116, 139, 0.55);
    border-right: 1px solid rgba(100, 116, 139, 0.55);
    border-radius: 3px;
}

[data-ice-theme="dark"] .crp-cell-stopped,
[data-ice-theme="dark"] .crp-gantt-stopband,
[data-ice-theme="dark"] .crp-gantt-stopband-swatch {
    background-image: repeating-linear-gradient(135deg, rgba(203, 213, 225, 0.22) 0 4px, transparent 4px 8px) !important;
}

[data-ice-theme="dark"] .crp-cell-stopped {
    color: #cbd5e1;
}

[data-ice-theme="dark"] .crp-gantt-stopband,
[data-ice-theme="dark"] .crp-gantt-stopband-swatch {
    background-color: rgba(203, 213, 225, 0.08);
}