.monitoring-tabs { display: flex; border-bottom: 1px solid #dee2e6; }
.monitoring-tabs button { background: none; border: none; padding: 10px 15px; cursor: pointer; border-bottom: 3px solid transparent; font-size: 0.9rem; color: #495057; }
.monitoring-tabs button:hover { color: #0056b3; }
.monitoring-tabs button.active { border-bottom-color: #007bff; color: #007bff; font-weight: bold; }
.monitoring-content { padding: 15px; min-height: 400px; }
.overview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px; }
.chart-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); gap: 15px; }
.chart-title { font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.problems-list { display: flex; flex-direction: column; gap: 10px; }
.problem-card { display: flex; align-items: center; padding: 10px; border-radius: 5px; border-left-width: 5px; border-left-style: solid; background-color: #f8f9fa; }
.problem-icon { font-size: 1.5rem; margin-right: 15px; width: 30px; text-align: center; }
.problem-details { flex-grow: 1; }
.problem-header { display: flex; justify-content: space-between; align-items: baseline; }
.problem-name { font-weight: 500; }
.problem-time { font-size: 0.8rem; color: #6c757d; }
.problem-opdata { font-size: 0.85rem; color: #495057; margin-top: 4px; }
.sev-info { border-left-color: #17a2b8; } .sev-info .problem-icon { color: #17a2b8; }
.sev-warning { border-left-color: #ffc107; } .sev-warning .problem-icon { color: #ffc107; }
.sev-average { border-left-color: #fd7e14; } .sev-average .problem-icon { color: #fd7e14; }
.sev-high { border-left-color: #dc3545; } .sev-high .problem-icon { color: #dc3545; }
.sev-disaster { border-left-color: #7B014C; } .sev-disaster .problem-icon { color: #7B014C; }