/* 产线大屏 — 扩展 wall.css */

.line-wall-header .wall-title-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.line-wall-header {
    min-height: 56px;
    padding-bottom: 8px;
}

.line-switcher {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    max-width: min(720px, 70vw);
}

.line-switch-btn {
    min-width: 64px;
    padding: 4px 12px;
    border: 1px solid rgba(0, 198, 255, 0.35);
    background: rgba(0, 40, 80, 0.45);
    color: #7aa4c8;
    font-size: 13px;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.line-switch-btn:hover {
    color: #fff;
    border-color: #00e5ff;
}

.line-switch-btn.active {
    color: #fff;
    border-color: #00e5ff;
    background: linear-gradient(180deg, rgba(0, 140, 220, 0.55), rgba(0, 60, 120, 0.55));
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.3);
}

/* 与运营大屏一致：两行三列，工单占左下，走势占右下两列 */
.line-wall-grid {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 10px;
    overflow: hidden;
}

.line-wall-grid > .wall-panel {
    min-width: 0;
    min-height: 0;
}

#panel-kpi { grid-column: 1; grid-row: 1; }
#panel-month { grid-column: 2; grid-row: 1; }
#panel-staff { grid-column: 3; grid-row: 1; }
#panel-orders { grid-column: 1; grid-row: 2; }

#panel-orders .wall-table {
    table-layout: fixed;
    width: 100%;
}

#panel-orders .wall-table th:nth-child(1) { width: 10%; }
#panel-orders .wall-table th:nth-child(2) { width: 22%; }
#panel-orders .wall-table th:nth-child(3) { width: 16%; }
#panel-orders .wall-table th:nth-child(4) { width: 22%; }
#panel-orders .wall-table th:nth-child(5),
#panel-orders .wall-table th:nth-child(6) { width: 10%; }
#panel-orders .wall-table th:nth-child(7) { width: 10%; }

#panel-orders .wall-table td.order-model-cell {
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.line-wall-series {
    grid-column: 2 / -1;
    grid-row: 2;
}

.line-kpi-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-content: start;
    overflow: auto;
}

.wall-muted { color: #7aa4c8; }

#panel-staff .wall-panel-body {
    overflow: hidden;
    min-height: 0;
}

/* 避免 .staff-form { display:flex } 覆盖 [hidden]，导致编辑态与展示态叠在一起 */
.staff-view[hidden],
.staff-form[hidden] {
    display: none !important;
}

/* 展示态：紧凑但仍醒目 */
.staff-view {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    min-height: 0;
    overflow: auto;
    position: relative;
    padding-bottom: 22px;
}

.staff-view-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.staff-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 6px;
    border: 1px solid rgba(0, 180, 255, 0.28);
    background: rgba(0, 40, 80, 0.4);
    min-width: 0;
}

.staff-metric-label {
    font-size: 12px;
    color: #7aa4c8;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.staff-metric-value {
    font-size: clamp(22px, 2vw, 32px);
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 12px rgba(0, 229, 255, 0.35);
    line-height: 1.1;
}

.staff-metric-value-accent {
    color: #00e5ff;
}

.staff-view-people {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.staff-person-leader {
    grid-column: 1 / -1;
}

.staff-person {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid rgba(0, 180, 255, 0.22);
    background: rgba(0, 40, 80, 0.35);
    min-width: 0;
}

.staff-person-label {
    font-size: 12px;
    color: #7aa4c8;
}

.staff-person-value {
    font-size: clamp(18px, 1.5vw, 24px);
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.staff-view-actions {
    margin-top: auto;
    flex-shrink: 0;
    padding-top: 4px;
}

.staff-edit-icon {
    position: absolute;
    left: 2px;
    bottom: 2px;
    z-index: 2;
    width: 22px;
    height: 22px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 180, 220, 0.5);
    background: rgba(0, 45, 85, 0.9);
    color: #8ec8e8;
    border-radius: 3px;
    cursor: pointer;
    opacity: 1;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.staff-edit-icon:hover {
    color: #00e5ff;
    border-color: rgba(0, 229, 255, 0.75);
    background: rgba(0, 70, 120, 0.95);
}

.staff-toast {
    position: absolute;
    left: 28px;
    bottom: 2px;
    z-index: 3;
    max-width: calc(100% - 36px);
    padding: 4px 8px;
    border: 1px solid rgba(255, 176, 32, 0.45);
    background: rgba(40, 28, 8, 0.92);
    color: #ffc857;
    font-size: 12px;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
}

.staff-toast[hidden] {
    display: none !important;
}

.staff-edit-btn,
.staff-cancel-btn,
.staff-save-btn {
    min-width: 88px;
    padding: 8px 16px;
    font-size: 13px;
    letter-spacing: 0.06em;
    cursor: pointer;
    color: #fff;
}

.staff-edit-btn {
    border: 1px solid rgba(0, 198, 255, 0.55);
    background: rgba(0, 60, 120, 0.45);
}

.staff-edit-btn:hover {
    border-color: #00e5ff;
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.3);
}

.staff-cancel-btn {
    border: 1px solid rgba(120, 150, 180, 0.45);
    background: rgba(20, 40, 70, 0.55);
    color: #a8c8e0;
}

.staff-cancel-btn:hover {
    border-color: #a8c8e0;
    color: #fff;
}

/* 编辑态 */
.staff-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    min-height: 0;
    overflow: auto;
}

.staff-field {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.staff-label {
    font-size: 12px;
    color: #7aa4c8;
}

.staff-input {
    width: 100%;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid rgba(0, 198, 255, 0.35);
    background: rgba(0, 30, 60, 0.55);
    color: #e8f4ff;
    font-size: 14px;
    outline: none;
}

.staff-input:focus {
    border-color: #00e5ff;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.25);
}

.staff-rate-value {
    font-size: clamp(20px, 1.8vw, 28px);
    font-weight: 700;
    color: #00e5ff;
    font-variant-numeric: tabular-nums;
}

.staff-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 4px;
    flex-shrink: 0;
}

.staff-save-btn {
    border: 1px solid #00e5ff;
    background: linear-gradient(180deg, rgba(0, 140, 220, 0.55), rgba(0, 60, 120, 0.55));
}

.staff-save-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.staff-save-btn:not(:disabled):hover {
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.35);
}

.staff-perm-hint {
    font-size: 12px;
    color: #7aa4c8;
}

@media (max-width: 1100px) {
    body.wall-body { overflow: auto; }
    .wall-shell { height: auto; min-height: 100%; }
    .line-wall-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        overflow: visible;
    }
    #panel-kpi,
    #panel-month,
    #panel-staff,
    #panel-orders,
    .line-wall-series {
        grid-column: auto;
        grid-row: auto;
    }
    .line-wall-grid > .wall-panel { min-height: 260px; }
}

.wall-series-box {
    position: relative;
}

/* 工单信息放在标题栏右侧，不叠在折线上 */
.line-wall-series > .wall-panel-head {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
    gap: 12px;
    border-bottom: 1px solid rgba(0, 198, 255, 0.18);
    background: linear-gradient(90deg, rgba(0, 140, 220, 0.18), transparent 60%);
}

.line-wall-series > .wall-panel-head > .wall-panel-title {
    flex: 1;
    min-width: 0;
    margin: 0;
    border-bottom: none;
    background: none;
    display: flex;
    align-items: center;
}

.sn-order-badge {
    position: static;
    flex: 0 1 auto;
    align-self: center;
    margin: 4px 10px 4px 0;
    min-width: 200px;
    max-width: min(48%, 420px);
    padding: 6px 12px;
    border: 1px solid rgba(0, 198, 255, 0.35);
    background: rgba(2, 20, 45, 0.72);
    box-shadow: none;
    pointer-events: none;
}

.sn-order-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sn-order-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    line-height: 1.35;
}

.sn-order-row + .sn-order-row {
    margin-top: 2px;
}

.sn-order-label {
    flex: 0 0 auto;
    min-width: 56px;
    font-size: 12px;
    color: #7aa4c8;
    letter-spacing: 0.04em;
}

.sn-order-value {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 700;
    color: #e8f4ff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sn-order-qty {
    font-size: 16px;
    color: #00e5ff;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.35);
}

.sn-order-badge:has(.sn-order-idle) {
    min-width: 0;
}

.sn-order-idle {
    padding: 4px 2px;
    font-size: 14px;
    font-weight: 600;
    color: #8fb4d4;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.sn-chart-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    font-size: 15px;
    font-weight: 600;
    color: #7aa4c8;
    letter-spacing: 0.06em;
    background: rgba(2, 16, 36, 0.22);
}

.sn-chart-empty[hidden] {
    display: none !important;
}

/* 旧多工单 item 类保留，避免残留样式冲突 */
.sn-order-item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    line-height: 1.35;
    padding: 2px 4px;
    border-radius: 4px;
    border-left: 3px solid transparent;
}

.sn-order-item.is-current {
    border-left-color: #00e5ff;
    background: rgba(0, 229, 255, 0.08);
}

.sn-order-item-label {
    flex: 0 0 auto;
    font-size: 11px;
    color: #7aa4c8;
    min-width: 48px;
}

.sn-order-item-value {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: #b0d4f1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}