/* Operations / four-channel monitor */
.monitor-toolbar{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:16px 20px;margin-bottom:18px;border:1px solid var(--line);border-radius:12px;background:#fff}
.monitor-source-label{display:flex;align-items:center;gap:10px;font-size:.875rem;color:#576672}
.monitor-source-label>svg{width:19px;height:19px;color:#718b7c}
.monitor-source-label strong{font-weight:400}
.monitor-source-label>span{font-size:.75rem;letter-spacing:1px;color:#6e7b88;border-left:1px solid var(--line);padding-left:12px;margin-left:2px}
.monitor-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.monitor-actions .btn.small{font-size:.875rem;min-height:37px}
.monitor-actions .btn[aria-pressed=true]{background:#edf3ed;border-color:#cad9c7;color:#4c7056}
.camera-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.camera-grid.single-camera{grid-template-columns:1fr}
.camera-panel{min-width:0;background:#17272e;border:1px solid #2a3e46;border-radius:12px;overflow:hidden;box-shadow:0 3px 12px #20302d07}
.camera-panel[hidden],.camera-error[hidden],.camera-text-button[hidden]{display:none}
.camera-head{min-height:54px;padding:13px 17px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid #33444a}
.camera-name{display:flex;align-items:center;gap:11px;min-width:0}
.camera-name>span{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.8125rem;letter-spacing:1px;color:#d4e6d7;white-space:nowrap}
.camera-name h2{font-size:.875rem;font-weight:400;letter-spacing:0;color:#98acb5;border-left:1px solid #41535a;padding-left:11px}
.camera-controls{display:flex;gap:12px;align-items:center}
.camera-status{font-size:.75rem;color:#aac0b9;white-space:nowrap}
.camera-icon{display:grid;place-items:center;width:28px;height:28px;border:1px solid #45585f;background:#23363e;color:#b7c9c7;border-radius:5px;flex-shrink:0}
.camera-icon:hover{background:#344b52;color:#e5f1eb}
.camera-icon svg{width:14px;height:14px}
.camera-stage{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;background:#0c191e;overflow:hidden}
.camera-stage>img,.camera-stage>video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.camera-stage>video{background:#0b161b}
.camera-crop{position:relative;width:56.25%;aspect-ratio:1;overflow:hidden;background:#000}
.camera-crop img{position:absolute;max-width:none;display:block}
.camera-error{position:absolute;inset:0;display:grid;place-content:center;padding:25px;background:#132329ec;text-align:center;color:#d6ded8;font-size:.875rem}
.camera-footer{min-height:49px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 16px;border-top:1px solid #2c424a}
.camera-file{display:flex;align-items:center;gap:7px;min-width:0;font-size:.75rem;color:#a3b8c0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.camera-file>svg{width:13px;height:13px;flex-shrink:0}
.camera-file-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.camera-file-button{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:.8125rem;color:#b8cfbb;padding:3px 0}
.camera-file-button svg{width:14px;height:14px}
.camera-file-button:hover{color:#e0f0d9}
.camera-file-button.disabled{opacity:.45;cursor:default;pointer-events:none}
.camera-file-actions:focus-within .camera-file-button{outline:2px solid #90c1a1;outline-offset:4px;border-radius:2px}
.camera-text-button{padding:3px 0;background:transparent;font-size:.75rem;color:#afc2c8;text-decoration:underline;text-underline-offset:3px}
.camera-text-button:hover{color:#e5eeee}
.monitor-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 2px;color:#6c7a85;font-size:.8125rem}
.monitor-bottom>span:first-child{display:flex;align-items:center;gap:7px}
.monitor-bottom svg{width:14px;height:14px}
.monitor-bottom time{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:#6d7d86}
.monitor-divider{color:#b7c0c7;padding:0 9px}
.monitor-bottom #record-status.recording{color:#a74942}
.monitor-bottom #record-status strong{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.875rem;margin-left:5px}
.record-button.recording{background:#a84c45;border-color:#a84c45;color:#fff}
.record-button.recording:hover{background:#8f3f39;border-color:#8f3f39;color:#fff}

/* Quality history */
.quality-period{display:flex;align-items:center;gap:18px;padding:17px 20px;border:1px solid var(--line);background:white;border-radius:12px;margin-bottom:20px;flex-wrap:wrap}
.period-title{display:flex;align-items:center;gap:8px;color:#617580;font-size:.875rem}
.period-title svg{width:17px;height:17px;color:#81998b}
.date-range{display:flex;align-items:center;gap:10px;color:#81919b;margin-left:auto}
.date-range label{display:flex}
.date-range input{min-width:0;width:148px;border:1px solid #e0e6eb;border-radius:7px;background:#fff;padding:8px 10px;color:#627181;font-size:.875rem;min-height:39px;font-family:inherit}
.period-presets{display:flex;gap:3px;background:#f0f3f5;border:1px solid #e5e9ee;border-radius:7px;padding:3px}
.period-presets button{background:transparent;padding:6px 14px;min-height:32px;border-radius:4px;font-size:.875rem;color:#6c7985}
.period-presets button[aria-pressed=true]{background:white;box-shadow:0 1px 4px #2c3c3012;color:#487257;font-weight:700}
.period-presets button:hover{color:#335b40}
.date-error{font-size:.875rem;color:#a84c45;padding:0 3px 18px}
.quality-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
.quality-kpis .kpi:nth-child(2){border-right:1px solid var(--line);border-bottom:0}
.quality-kpis .kpi:first-child{border-bottom:0}
.quality-kpis .kpi-value{color:#435a51}
.quality-dot{width:7px;height:22px;border-radius:3px;background:#91af99}
.quality-dot.tomato{background:#4b82ba}
.quality-dot.lettuce{background:#25916a}
.quality-chart-grid{grid-template-columns:minmax(0,2.1fr) minmax(255px,1fr)}
.chart-legend{display:flex;align-items:center;gap:13px;flex-wrap:wrap;flex-shrink:0}
.chart-legend>span{display:flex;align-items:center;gap:5px;font-size:.75rem;color:#6e7e88}
.chart-legend i{width:10px;height:4px;border-radius:1px;display:block}
.chart-legend .total-legend{height:10px;background:#b7caba}
.chart-legend .tomato-legend{background:#4b82ba}
.chart-legend .lettuce-legend{background:#25916a}
.quality-chart-grid>.panel:first-child>.panel-body{min-height:306px;display:grid;align-items:center}
.trend-chart{overflow-x:auto;max-width:100%;padding:10px 0 4px}
.quality-trend{display:block;width:100%;height:auto;min-width:640px;overflow:visible;stroke:none}
.chart-gridline{stroke:#e9edf1;stroke-width:1}
.chart-axis{fill:#74818e;stroke:none;font-size:16px;font-family:Pretendard,sans-serif;font-weight:400}
.quality-bar{fill:#b7caba;stroke:none}
.quality-line{fill:none;stroke-width:2.3;stroke-linejoin:round;stroke-linecap:round}
.tomato-line{stroke:#4b82ba}
.lettuce-line{stroke:#25916a}
.tomato-point{fill:#4b82ba;stroke:#fff;stroke-width:1.2}
.lettuce-point{fill:#25916a;stroke:#fff;stroke-width:1.2}
.quality-donut{width:210px;max-width:100%;margin:0 auto 5px}
.quality-donut svg{width:100%;height:auto;display:block;stroke:none}
.donut-count{font-size:39px;font-weight:700;fill:#4d675b;stroke:none;font-family:Pretendard,sans-serif}
.donut-caption{font-size:14px;fill:#748378;stroke:none;font-family:Pretendard,sans-serif}
.quality-donut-legend>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid #edf0f3;font-size:.8125rem;color:#6e7d76}
.quality-donut-legend>div>span{display:flex;align-items:center;gap:7px}
.quality-donut-legend i{width:8px;height:8px;border-radius:2px}
.quality-donut-legend strong{color:#637268;font-weight:400;font-variant-numeric:tabular-nums}
.quality-donut-legend small{display:inline-block;width:45px;text-align:right;margin-left:10px;color:#738176;font-size:.75rem}
.quality-empty{min-height:280px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:10px;padding:25px;color:#6b7e75}
.quality-empty>svg{width:30px;height:30px;color:#93ab99;margin-bottom:5px}
.quality-empty h3{font-size:1rem;font-weight:400}
.quality-empty p{font-size:.875rem;color:#788b7e}
.quality-time{font-size:.8125rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.quality-time>span{font-size:.75rem;margin-left:10px;color:#73818b}

@media(max-width:1240px){.quality-chart-grid{grid-template-columns:minmax(0,1.8fr) minmax(240px,1fr)}.quality-chart-grid .panel-head{align-items:flex-start;flex-wrap:wrap;gap:12px}.quality-donut{width:195px}.chart-legend{gap:12px}.camera-head{padding-left:14px;padding-right:14px}.camera-footer{padding-left:14px;padding-right:14px}}
@media(max-width:1100px) and (min-width:1001px){.quality-period{gap:12px}.period-title{width:100%}.date-range{margin-left:0}.period-presets{margin-left:auto}.monitor-toolbar{align-items:flex-start;flex-direction:column;gap:13px}.monitor-actions{width:100%;justify-content:flex-end}.camera-controls{gap:7px}.camera-status{display:none}}
@media(max-width:780px){.quality-chart-grid{grid-template-columns:1fr}.quality-chart-grid>.panel:first-child>.panel-body{min-height:0}.quality-period{gap:14px}.period-title{width:100%}.date-range{margin-left:0}.period-presets{margin-left:auto}.quality-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.quality-kpis .kpi{padding:20px}.quality-kpis .kpi-value{font-size:2rem}.quality-kpis .kpi-top{font-size:.8125rem}.quality-dot{height:18px;width:5px}.quality-donut{width:220px}.camera-grid{gap:14px}.camera-name{gap:7px}.camera-name h2{padding-left:7px;font-size:.8125rem}.camera-controls{gap:7px}.camera-status{display:none}.camera-head{min-height:48px;padding:10px 12px}.camera-footer{padding:10px 12px;gap:8px}.camera-file{max-width:150px}.camera-file-actions{gap:7px}.camera-file-button{font-size:.75rem}.camera-file-button svg{display:none}.monitor-toolbar{padding:15px 17px}.monitor-source-label>span{display:none}.monitor-actions{gap:7px}.monitor-actions .btn.small{font-size:.8125rem;padding:8px}}
@media(max-width:540px){.monitor-toolbar{align-items:flex-start;flex-direction:column;gap:12px}.monitor-source-label>span{display:inline}.monitor-actions{width:100%;justify-content:space-between}.monitor-actions .btn.small{font-size:.8125rem;flex:1}.monitor-actions .btn.small svg{width:14px;height:14px}.camera-grid{grid-template-columns:1fr}.camera-status{display:inline}.camera-name h2{font-size:.875rem}.camera-head{padding:12px 15px}.camera-footer{padding:11px 15px}.camera-file{max-width:180px}.camera-file-button{font-size:.8125rem}.camera-file-button svg{display:block}.monitor-bottom{align-items:flex-start;flex-direction:column;gap:10px;padding-top:16px;font-size:.8125rem}.quality-period{padding:16px;gap:14px}.date-range{width:100%;gap:8px}.date-range label{flex:1;min-width:0}.date-range input{width:100%;font-size:.8125rem;padding:9px 7px}.period-presets{width:100%;margin:0}.period-presets button{flex:1}.quality-kpis{grid-template-columns:1fr}.quality-kpis .kpi,.quality-kpis .kpi:nth-child(2){padding:21px 24px;border-right:0;border-bottom:1px solid var(--line)}.quality-kpis .kpi:first-child{border-bottom:1px solid var(--line)}.quality-kpis .kpi:last-child{border-bottom:0}.quality-kpis .kpi-top{font-size:.875rem}.quality-kpis .kpi-value{font-size:2.25rem}.quality-chart-grid .panel-head{gap:10px}.quality-donut{width:210px}.quality-donut-legend{max-width:340px;margin:auto}.quality-time>span{display:block;margin-left:0;margin-top:2px}.quality-empty{padding:26px 15px;min-height:235px}}