/* ════════════════════════════════════════════════════════════════
   ccu-grafana.css — 그라파나 CCU 미러 탭 (admin 전용)
   설계: _workspace/2026-06-12_webapp_grafana_mirror_p3_plan.md §4·§5-3
   - 풀블리드 다크 플랫 카드 (부유 카드 지양) + 시안/게임 색 라인
   - 급감 RED: .ccu-card--alert (앱 전역 alert 토큰 var(--color-error) + dot pulse)
   ════════════════════════════════════════════════════════════════ */

/* pane(.tab-content) 기본 overflow:hidden!important 를 ID 우선순위로 오버라이드 — 카드 스크롤 허용.
   (미적용 시 3번째 카드[배틀그라운드]가 pane 하단에 잘려 도달 불가 — #trends-tab/#games-tab 선례) */
#ccu-grafana-tab { overflow-y: auto !important; padding: 12px 14px 20px !important; }
#ccu-grafana-body {
    display: flex;
    flex-direction: column;
    gap: 10px; /* [v6.7.220] 카드 간격 축소 */
    flex: 1 1 auto;   /* [v6.7.222] 탭 높이 채움 — 카드 flex 분배의 기준 컨테이너 */
    min-height: 0;    /* flex 자식 overflow 정상화 (미지정 시 카드가 안 줄어 스크롤 폴백 깨짐) */
}

/* 그래프별 시간범위 토글 (24h~5분) */
.ccu-view-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-bottom: 6px; /* [v6.7.220] 컴팩트 */
}
.ccu-view-btn {
    font-size: 0.68rem;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted, #a8a8a8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    line-height: 1.5;
}
.ccu-view-btn:hover { background: rgba(255, 255, 255, 0.09); color: #cfe6ff; }
.ccu-view-btn.active {
    background: rgba(34, 211, 238, 0.16);
    color: #7fd7ea;
    border-color: rgba(34, 211, 238, 0.42);
    font-weight: 600;
}

/* ── 카드 ── */
.ccu-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 10px 13px 12px; /* [v6.7.220] 컴팩트 */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    /* [v6.7.222] 탭(pane) 높이를 카드들이 균등 분배 → 그래프가 탭 크기에 비례 유동(그라파나형).
       내부 flex column 으로 차트만 flex:1 채움(헤더/토글/이벤트는 고정). 합이 min-height 미만으로 줄면 body 스크롤 폴백. */
    flex: 1 1 0;
    min-height: 210px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ccu-card-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 7px; /* [v6.7.220] 컴팩트 */
}
.ccu-dot {
    align-self: center;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--primary-color, #3182f6);
    flex-shrink: 0;
}
.ccu-card-title {
    font-size: 0.98rem;
    font-weight: 700;
    color: #e6edf5;
    letter-spacing: 0.2px;
}
.ccu-card-now { display: inline-flex; align-items: baseline; gap: 3px; }
.ccu-card-now b {
    font-size: 1.5rem;
    font-weight: 800;
    color: #cfe6ff;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.ccu-now-unit { font-size: 0.74rem; color: var(--text-muted, #a8a8a8); }
.ccu-card-meta {
    font-size: 0.74rem;
    color: var(--text-muted, #a8a8a8);
    font-variant-numeric: tabular-nums;
}
.ccu-card-badges { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; }

/* ── 차트 ── */
/* [v6.7.222] 고정 height(150px) 제거 → flex:1 로 카드 내 남은 공간을 차트가 채움.
   Chart.js maintainAspectRatio:false + responsive(ResizeObserver) 가 이 컨테이너 height 변화를
   따라가므로 pane resize:both 드래그 시 차트가 비례 리사이즈된다(JS 무변경).
   min-height 로 차트 최소 가독 보장(이벤트 많은 카드에서 0 붕괴 방지). */
.ccu-card-chart {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    min-height: 90px;
}
/* 차트만 유동(flex:1) — 헤더/토글/이벤트는 자연 높이 고정(차트가 남는 공간 흡수). */
.ccu-card-head,
.ccu-view-toggle,
.ccu-card-events { flex-shrink: 0; }

/* ── 급감 이벤트 리스트 (푸터) ── */
.ccu-card-events { margin-top: 10px; }
.ccu-events-title {
    font-size: 0.72rem;
    color: var(--text-muted, #a8a8a8);
    margin-bottom: 4px;
    letter-spacing: 0.3px;
}
.ccu-event-row {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 0.76rem;
    padding: 2px 0;
    color: #c6d0db;
    font-variant-numeric: tabular-nums;
}
.ccu-event-ts { color: var(--text-muted, #a8a8a8); min-width: 44px; }
.ccu-event-val { color: #aeb9c6; }
.ccu-event-delta { color: var(--text-muted, #a8a8a8); font-size: 0.72rem; }
.ccu-event-pct { color: var(--color-error, #cf6679); font-weight: 700; margin-left: auto; }

/* ── 배지 ── */
.ccu-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}
.ccu-badge-drop {
    background: rgba(var(--color-error-rgb, 207, 102, 121), 0.16);
    color: var(--color-error, #cf6679);
    border: 1px solid rgba(var(--color-error-rgb, 207, 102, 121), 0.45);
}
.ccu-badge-stale {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted, #a8a8a8);
    border: 1px solid rgba(255, 255, 255, 0.12);
    cursor: help;
}
.ccu-badge-nodata {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted, #a8a8a8);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ── RED 경보 상태 (§5-3) — 앱 전역 critical 시각 언어 일치 ── */
.ccu-card--alert {
    border-color: rgba(var(--color-error-rgb, 207, 102, 121), 0.6);
    box-shadow: 0 0 0 1px rgba(var(--color-error-rgb, 207, 102, 121), 0.25),
                0 0 18px rgba(var(--color-error-rgb, 207, 102, 121), 0.16);
}
.ccu-card--alert .ccu-card-now b { color: var(--color-error, #cf6679); }
.ccu-card--alert .ccu-dot {
    background: var(--color-error, #cf6679);
    animation: ccu-dot-pulse 2s ease-in-out infinite;
}
@keyframes ccu-dot-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--color-error-rgb, 207, 102, 121), 0.6); }
    50% { box-shadow: 0 0 0 5px rgba(var(--color-error-rgb, 207, 102, 121), 0); }
}

/* ── 수집 지연(stale) 상태 ── */
.ccu-card--stale { opacity: 0.82; }
.ccu-card--stale .ccu-dot { background: var(--text-muted, #a8a8a8); }

/* ── 경고/빈 상태 ── */
.ccu-warn {
    font-size: 0.78rem;
    color: #e0b341;
    background: rgba(224, 179, 65, 0.1);
    border: 1px solid rgba(224, 179, 65, 0.3);
    border-radius: 8px;
    padding: 7px 12px;
}
.ccu-empty {
    text-align: center;
    color: var(--text-muted, #a8a8a8);
    font-size: 0.85rem;
    padding: 40px 16px;
}

/* ════════════════════════════════════════════════════════════════
   [v6.7.221] 라이트 모드 — 다크 하드코딩 텍스트/카드 배경이 흰 배경에서 안 보이는 문제.
   카드 제목/현재 동접 숫자(#e6edf5·#cfe6ff)·메타·토글·이벤트를 슬레이트 톤으로 오버라이드.
   차트 라인/툴팁/그리드 색은 ccu-grafana-tab.js _chartColors() 가 data-theme 분기 처리(여기 불필요).
   ════════════════════════════════════════════════════════════════ */
body[data-theme="light"] .ccu-card {
    background: #FFFFFF;
    border-color: rgba(15, 23, 42, 0.10);
}
body[data-theme="light"] .ccu-card-title { color: #0F172A; }
body[data-theme="light"] .ccu-card-now b { color: #0F172A; }
body[data-theme="light"] .ccu-now-unit,
body[data-theme="light"] .ccu-card-meta { color: #64748B; }
body[data-theme="light"] .ccu-view-btn {
    background: rgba(15, 23, 42, 0.04);
    color: #475569;
    border-color: rgba(15, 23, 42, 0.12);
}
body[data-theme="light"] .ccu-view-btn:hover { background: rgba(15, 23, 42, 0.08); color: #0F172A; }
body[data-theme="light"] .ccu-view-btn.active {
    background: rgba(8, 145, 178, 0.12);
    color: #0891B2;
    border-color: rgba(8, 145, 178, 0.42);
}
body[data-theme="light"] .ccu-events-title,
body[data-theme="light"] .ccu-event-ts { color: #64748B; }
body[data-theme="light"] .ccu-event-row { color: #334155; }
body[data-theme="light"] .ccu-event-val { color: #475569; }
body[data-theme="light"] .ccu-event-delta { color: #64748B; }
body[data-theme="light"] .ccu-event-pct { color: #dc2626; }
body[data-theme="light"] .ccu-empty { color: #64748B; }
body[data-theme="light"] .ccu-badge-stale,
body[data-theme="light"] .ccu-badge-nodata {
    background: rgba(15, 23, 42, 0.05);
    color: #64748B;
    border-color: rgba(15, 23, 42, 0.12);
}
/* RED 경보 — 현재값을 라이트에서도 또렷한 빨강으로 (카드 배경이 흰색이라 연빨강은 약함). */
body[data-theme="light"] .ccu-card--alert .ccu-card-now b { color: #dc2626; }
/* [v6.7.224] 경고문 .ccu-warn — 호박 텍스트(#e0b341, 1.9:1)가 흰 카드서 소실. 시트오류/연결오류 실발화 경로.
   RED 경보는 라이트 처리됐는데 warn 만 누락된 비대칭 해소. amber-800 텍스트 + 진한 보더로 대비 확보. */
body[data-theme="light"] .ccu-warn {
    color: #92400E;
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(217, 119, 6, 0.45);
}