/* system-monitor.css — CEO 실시간 시스템 모니터 스타일 */

/* ── 서브탭 바 ── */
/* .kpip-subtab-bar — glass 컴포넌트로 이동 */


/* ── 서브뷰 전환 ── */
.kpip-subview {
    animation: sysmonFadeIn var(--duration-base) var(--easing-smooth);
}

.kpip-subview.hidden {
    display: none;
}

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

/* ── 상단 4열 그리드 ── */
.sysmon-top-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-3);
    margin-bottom: var(--s-4);
}

/* ── 카드 공통 ── */
.sysmon-card {
    background: var(--bg-raised);
    border-radius: var(--radius);
    padding: var(--s-4);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.sysmon-card-title {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-sub);
    line-height: var(--leading-none);
}

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

/* ── 헬스 상태 ── */
.sysmon-health-row {
    display: flex;
    align-items: center;
    gap: var(--s-3);
}

.sysmon-health-dot {
    width: var(--s-3);
    height: var(--s-3);
    border-radius: 50%;
    flex-shrink: 0;
}

.sysmon-dot--healthy {
    background: var(--green);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}

.sysmon-dot--degraded {
    background: var(--amber);
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

.sysmon-dot--critical, .sysmon-dot--warning {
    background: var(--red);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}

.sysmon-health-label {
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--text);
    letter-spacing: var(--tracking-tighter);
}

/* ── 메타 행 ── */
.sysmon-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
}

.sysmon-meta-label {
    font-size: var(--text-xs);
    color: var(--text-sub);
    font-family: var(--font-mono);
}

.sysmon-meta-value {
    font-size: var(--text-sm);
    color: var(--text);
    font-family: var(--font-mono);
    font-weight: var(--weight-medium);
    font-variant-numeric: tabular-nums;
}

/* ── 컴포넌트 상태 ── */
.sysmon-components {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}

.sysmon-comp {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-2);
    background: var(--surface-w5);
    border-radius: var(--radius-s);
}

.sysmon-comp-dot {
    width: var(--s-1-5);
    height: var(--s-1-5);
    border-radius: 50%;
}

.sysmon-comp--healthy .sysmon-comp-dot { background: var(--green); }
.sysmon-comp--degraded .sysmon-comp-dot { background: var(--amber); }
.sysmon-comp--unavailable .sysmon-comp-dot { background: var(--red); }

.sysmon-comp-name {
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    color: var(--text-sub);
    text-transform: capitalize;
}

/* ── 리소스 ── */
.sysmon-resource-item {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}

.sysmon-resource-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sysmon-metric-value {
    font-size: var(--text-sm);
    font-family: var(--font-mono);
    font-weight: var(--weight-bold);
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.sysmon-val--warning { color: var(--amber); }
.sysmon-val--critical { color: var(--red); }
.sysmon-val--accent { color: var(--accent); }

/* 메모리 바 */
.sysmon-bar-track {
    height: var(--s-1);
    background: var(--surface-w8);
    border-radius: var(--radius-s);
    overflow: hidden;
}

.sysmon-bar-fill {
    height: 100%;
    background: var(--green);
    border-radius: var(--radius-s);
    transition: width var(--duration-moderate) var(--easing-smooth);
}

.sysmon-bar--warning { background: var(--amber); }
.sysmon-bar--critical { background: var(--red); }

/* ── 통계 그리드 ── */
.sysmon-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-3);
}

.sysmon-stat {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}

.sysmon-stat-value {
    font-size: var(--text-xl);
    font-family: var(--font-mono);
    font-weight: var(--weight-bold);
    color: var(--text);
    letter-spacing: var(--tracking-tighter);
    font-variant-numeric: tabular-nums;
    line-height: var(--leading-tight);
}

.sysmon-stat-label {
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    color: var(--text-sub);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

/* ── 하단 2열 ── */
.sysmon-bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--s-3);
}

/* ── Active Job 행 ── */
.sysmon-active-jobs {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    max-height: 480px;
    overflow-y: auto;
}

.sysmon-job-row {
    background: var(--surface-w5);
    border-radius: var(--radius-s);
    padding: var(--s-3);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

.sysmon-job-header {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

.sysmon-job-team {
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    font-weight: var(--weight-bold);
    color: var(--accent);
    text-transform: uppercase;
}

.sysmon-job-id {
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    color: var(--text-sub);
}

.sysmon-job-status {
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    font-weight: var(--weight-medium);
    padding: var(--s-1) var(--s-1);
    border-radius: var(--radius-s);
}

.sysmon-status--running {
    color: var(--green);
    background: var(--green-bg);
}

.sysmon-status--triaging {
    color: var(--amber);
    background: var(--amber-bg);
}

.sysmon-status--waiting_input {
    color: var(--amber);
    background: var(--amber-bg);
}

.sysmon-job-elapsed {
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    color: var(--text-sub);
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

.sysmon-job-content {
    font-size: var(--text-sm);
    color: var(--text-sub);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sysmon-job-agents {
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    color: var(--text-sub);
}

/* 프로그레스 바 */
.sysmon-job-progress {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

.sysmon-progress-track {
    flex: 1;
    height: 3px;
    background: var(--surface-w8);
    border-radius: var(--radius-s);
    overflow: hidden;
}

.sysmon-progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: var(--radius-s);
    transition: width var(--duration-moderate) var(--easing-smooth);
}

.sysmon-job-round {
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    color: var(--text-sub);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* ── 에이전트 성능 테이블 ── */
.sysmon-agent-table {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}

.sysmon-agent-header-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--s-2);
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    color: var(--text-sub);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    padding: var(--s-1) 0;
}

.sysmon-agent-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--s-2);
    font-size: var(--text-sm);
    font-family: var(--font-mono);
    color: var(--text);
    padding: var(--s-1) 0;
    font-variant-numeric: tabular-nums;
}

.sysmon-agent-name {
    color: var(--text-sub);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── 빈 상태 ── */
.sysmon-empty {
    padding: var(--s-4);
    text-align: center;
    font-size: var(--text-sm);
    font-family: var(--font-mono);
    color: var(--text-sub);
}

/* ── 새로고침 버튼 ── */
.sysmon-refresh-btn {
    padding: var(--s-1);
    background: transparent;
    color: var(--text-sub);
    border-radius: var(--radius-s);
    cursor: pointer;
    transition: color var(--duration-fast) var(--easing-smooth), background var(--duration-fast) var(--easing-smooth);
    display: flex;
    align-items: center;
}

.sysmon-refresh-btn:hover {
    color: var(--text);
    background: var(--surface-hover);
}

/* ── API Documentation 뷰어 ── */
.sysmon-apidocs-controls {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

.sysmon-apidocs-filter {
    background: var(--surface-w5);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-s);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    min-width: clamp(100px, 18vw, 160px);
}

.sysmon-apidocs-summary {
    display: flex;
    gap: var(--s-3);
}

.sysmon-apidocs-stat {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-sub);
    font-variant-numeric: tabular-nums;
}

.sysmon-apidocs-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    max-height: 480px;
    overflow-y: auto;
}

.sysmon-apidocs-group {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}

.sysmon-apidocs-cat-header {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    color: var(--text-sub);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    padding: var(--s-1) 0;
}

.sysmon-apidocs-cat-count {
    font-weight: var(--weight-normal);
    color: var(--text-sub);
    opacity: 0.6;
}

.sysmon-apidocs-routes {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}

.sysmon-apidocs-row {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-s);
    background: var(--surface-w5);
}

.sysmon-apidocs-row:hover {
    background: var(--surface-hover);
}

.sysmon-apidocs-method {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    min-width: var(--s-8-5);
    text-align: center;
    padding: var(--s-1) var(--s-1);
    border-radius: var(--radius-s);
    flex-shrink: 0;
}

.sysmon-method--get { color: var(--green); background: var(--green-bg); }
.sysmon-method--post { color: var(--amber); background: var(--amber-bg); }
.sysmon-method--put { color: var(--blue, #60a5fa); background: rgba(96, 165, 250, 0.12); }
.sysmon-method--delete { color: var(--red); background: var(--red-bg); }
.sysmon-method--patch { color: var(--purple, #a78bfa); background: rgba(167, 139, 250, 0.12); }

.sysmon-apidocs-path {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text);
    white-space: nowrap;
    flex-shrink: 0;
}

.sysmon-apidocs-search {
    background: var(--surface-w5);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-s);
    outline: none;
    width: clamp(120px, 20vw, 180px);
    flex-shrink: 0;
}

.sysmon-apidocs-auth {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    padding: var(--s-1) var(--s-1);
    border-radius: var(--radius-pill);
    white-space: nowrap;
    flex-shrink: 0;
}

.sysmon-apidocs-auth--yes {
    color: var(--amber);
    background: var(--amber-bg);
}

.sysmon-apidocs-auth--no {
    color: var(--green);
    background: var(--green-bg);
}

.sysmon-apidocs-desc {
    font-size: var(--text-xs);
    color: var(--text-sub);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* ── 반응형 ── */
@media (max-width: 960px) {
    .sysmon-top-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .sysmon-bottom-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .sysmon-top-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Agent Status 요약 바 ── */
.sysmon-agent-summary { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-3); }
.sysmon-as-badge { font-size: 11px; font-family: var(--font-mono); font-weight: var(--weight-medium); padding: var(--s-1) var(--s-2); border-radius: var(--radius-s); font-variant-numeric: tabular-nums; }
.sysmon-as--total { color: var(--text-sub); background: var(--surface-w5); }
.sysmon-as--working { color: var(--accent); background: var(--surface-w8); }
.sysmon-as--idle { color: var(--text-sub); background: var(--surface-w5); }
.sysmon-as--error { color: var(--red); background: var(--surface-w8); }
.sysmon-card--agent-status .sysmon-agent-header-row,
.sysmon-card--agent-status .sysmon-agent-row { grid-template-columns: 2fr 1fr 1fr 3fr; }
.sysmon-agent-task { color: var(--text-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }

/* ── M7 확장: 3열 그리드 (알림 폼 / 로그 뷰어 / API 타이밍) ── */
.sysmon-extra-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--s-3);
    margin-top: var(--s-4);
}

/* ── 알림 임계값 설정 폼 ── */
.sysmon-alert-form {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.sysmon-alert-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
}

.sysmon-alert-label {
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    color: var(--text-sub);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    flex-shrink: 0;
}

.sysmon-alert-input {
    width: var(--s-11);
    padding: var(--s-1) var(--s-2);
    background: var(--surface-w5);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    border: none;
    border-radius: var(--radius-s);
    text-align: right;
    outline: none;
    transition: background var(--duration-fast) var(--easing-smooth);
}

.sysmon-alert-input:focus {
    background: var(--surface-w8);
    box-shadow: 0 0 0 2px var(--accent-glow);
}

.sysmon-alert-unit {
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    color: var(--text-sub);
    flex-shrink: 0;
}

.sysmon-alert-save {
    align-self: flex-end;
    padding: var(--s-1) var(--s-3);
    background: var(--accent);
    color: var(--accent-on);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    border: none;
    border-radius: var(--radius-s);
    cursor: pointer;
    transition: background var(--duration-fast) var(--easing-smooth);
}

.sysmon-alert-save:hover {
    background: var(--accent-deep);
}

/* ── 로그 뷰어 ── */
.sysmon-log-viewer {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    min-height: 0;
}

.sysmon-log-filters {
    display: flex;
    gap: var(--s-1);
    flex-shrink: 0;
}

.sysmon-log-filter {
    padding: var(--s-1) var(--s-2);
    background: transparent;
    color: var(--text-sub);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    border-radius: var(--radius-s);
    cursor: pointer;
    transition: color var(--duration-fast) var(--easing-smooth), background var(--duration-fast) var(--easing-smooth);
}

.sysmon-log-filter:hover {
    color: var(--text);
    background: var(--surface-hover);
}

.sysmon-log-filter.active {
    color: var(--accent);
    background: var(--surface-w8);
}

.sysmon-log-terminal {
    background: var(--bg);
    border-radius: var(--radius-s);
    padding: var(--s-3);
    flex: 1;
    min-height: var(--card-min-sm);
    max-height: 480px;
    overflow-y: auto;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: 1.6;
    color: var(--text-sub);
}

.sysmon-log-line {
    display: flex;
    gap: var(--s-2);
    padding: var(--s-1) 0;
}

.sysmon-log-time {
    color: var(--text-faint);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.sysmon-log-level {
    flex-shrink: 0;
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    min-width: var(--s-7-5);
}

.sysmon-log-level--info  { color: var(--teal); }
.sysmon-log-level--warn  { color: var(--amber); }
.sysmon-log-level--error { color: var(--red); }

.sysmon-log-msg {
    color: var(--text);
    word-break: break-all;
}

/* ── API 응답시간 테이블 ── */
.sysmon-api-table {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}

.sysmon-api-header-row {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr 1fr;
    gap: var(--s-2);
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    color: var(--text-sub);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    padding: var(--s-1) 0;
}

.sysmon-api-row {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr 1fr;
    gap: var(--s-2);
    font-size: var(--text-sm);
    font-family: var(--font-mono);
    color: var(--text);
    padding: var(--s-1) 0;
    font-variant-numeric: tabular-nums;
}

.sysmon-api-route {
    color: var(--text-sub);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sysmon-api-fast { color: var(--green); }
.sysmon-api-mid  { color: var(--amber); }
.sysmon-api-slow { color: var(--red); }

/* ── M7: 시스템 알림 배너 ── */
.sysmon-alerts {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    margin-bottom: var(--s-3);
}
.sysmon-alert-item {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius-s);
    font-size: var(--text-sm);
    animation: sysmon-alert-in var(--duration-base) var(--easing-smooth);
}
.sysmon-alert-item--info {
    background: var(--clr-info-bg);
    color: var(--clr-info);
}
.sysmon-alert-item--warning {
    background: var(--clr-warning-bg);
    color: var(--amber);
}
.sysmon-alert-item--critical {
    background: var(--clr-error-bg);
    color: var(--clr-error);
}
.sysmon-alert-icon {
    flex-shrink: 0;
    width: var(--s-4);
    height: var(--s-4);
    margin-top: var(--s-0);
}
.sysmon-alert-body {
    flex: 1;
    min-width: 0;
}
.sysmon-alert-msg {
    word-break: break-word;
}
.sysmon-alert-meta {
    display: flex;
    gap: var(--s-2);
    margin-top: var(--s-1);
    color: var(--text-faint);
    font-size: var(--text-micro, 11px);
}
.sysmon-alert-dismiss {
    flex-shrink: 0;
    background: none;
    color: var(--text-faint);
    cursor: pointer;
    padding: var(--s-1);
    border-radius: var(--radius-s);
    transition: color var(--duration-fast) var(--easing-smooth);
}
.sysmon-alert-dismiss:hover {
    color: var(--text);
}
@keyframes sysmon-alert-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── M7 확장: 에러 통계 패널 ── */
.sysmon-error-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-3);
    margin-top: var(--s-4);
}

.sysmon-err-breakdown {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    margin-top: var(--s-2);
}

.sysmon-err-source-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-1) var(--s-2);
    background: var(--surface-w3);
    border-radius: var(--radius-s);
    font-size: var(--text-xs);
    font-family: var(--font-mono);
}

.sysmon-err-source-name {
    color: var(--text-sub);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sysmon-err-source-count {
    color: var(--text);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    margin-left: var(--s-2);
}

.sysmon-recent-errors-list {
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}

.sysmon-err-item {
    display: grid;
    grid-template-columns: 56px 48px 80px 1fr;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-2);
    background: var(--surface-w3);
    border-radius: var(--radius-s);
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    align-items: center;
}

.sysmon-err-time { color: var(--text-sub); font-variant-numeric: tabular-nums; }
.sysmon-err-src { color: var(--text-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sysmon-err-msg { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sysmon-err-level {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.sysmon-err-level--critical { color: var(--red); }
.sysmon-err-level--warning { color: var(--amber); }
.sysmon-err-level--error { color: var(--red); opacity: 0.8; }

/* ── M7 확장 반응형 ── */
@media (max-width: 960px) {
    .sysmon-extra-grid {
        grid-template-columns: 1fr;
    }
    .sysmon-error-stats-grid {
        grid-template-columns: 1fr;
    }
}
@media (min-width: 641px) and (max-width: 960px) {
    .sysmon-extra-grid {
        grid-template-columns: 1fr 1fr;
    }
}