/* style.css (Global / Common) */

/* 1. [수정됨] 폰트 주소 채워 넣음 (이제 폰트가 나옵니다!) */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap');

/* 2. [7대 상태 컬러 표준 v3] 딥 다크 모드 기본 색상 변수 */
:root {
  --bg: #0c1220; /* 쿨리닉 스타일 딥 네이비 배경 */
  --card: rgba(22, 30, 50, 0.95);
  --card-header-bg: #1a2540;
  --card-header-text: #e6edf3;
  --card-border: rgba(255, 255, 255, 0.2);
  --text-primary: #e6edf3;
  --text-secondary: #d0d7de;

  /* [6대 상태 표준 CSS 기본 변수 추가] status_rules.js 지연 실행 시의 0.1초 플리커 제거 */
  --status-normal-color: #28a745;
  --status-running-color: #007bff;
  --status-warning-color: #f39c12;
  --status-overcool-color: #9b59b6;
  --status-inspection-color: #dc3545;
  --status-offline-color: #6c757d;
  
  --sidebar-width: 250px;
  --sidebar-bg: #0a0f1a;
  --table-text: #e6edf3;
  --table-border: rgba(200, 200, 200, 0.3);
}

/* 3. 기본 폰트 강제 적용 (안전한 Noto Sans) */
html,
body {
  margin: 0;
  padding: 0;
  color: var(--text-primary);
  font-family: 'Noto Sans KR', sans-serif !important;
  background-color: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 디지털 숫자 폰트 (Orbitron) */
[data-testid="stMetricValue"],
.temp-number {
  font-family: 'Orbitron', sans-serif !important;
  letter-spacing: 1px;
}

/* --- [여기부터] 상태별 깜빡임 효과 (추가됨) --- */

/* 프리미엄 펄스(Glow) 애니메이션 엔진 */
@keyframes neonPulseGlow {
  0% { transform: scale(1); opacity: 0.8; text-shadow: 0 0 5px currentColor; }
  50% { transform: scale(1.03); opacity: 1; text-shadow: 0 0 15px currentColor; }
  100% { transform: scale(1); opacity: 0.8; text-shadow: 0 0 5px currentColor; }
}

/* 1. 알람 (노랑/황색 계열 주의) */
.blinking-alarm {
  color: var(--status-warning-color);
  font-weight: 900;
  display: inline-block;
}

/* 2. 경고 (노랑/황색 계열 주의) */
.blinking-warning {
  color: var(--status-warning-color);
  font-weight: 900;
  display: inline-block;
}

/* 3. 고장/점검 (빨강 계열 점검) */
.blinking-breakdown {
  color: var(--status-inspection-color);
  font-weight: 900;
  display: inline-block;
}

/* 4. 점검 (빨강 계열 점검) */
.blinking-check {
  color: var(--status-inspection-color);
  font-weight: 800;
  /* animation: neonPulseGlow 1.0s ease-in-out infinite; 글씨 깜빡임 제거 */
  display: inline-block;
}

/* --- [추가] 상태별 텍스트 및 테두리 색상 동기화 (레거시 제거됨) --- */

/* --- 고급화된 카드 상태 디자인 (Glow, Shadow, 배경색 퍼짐) --- */
.card {
  background: rgba(10, 15, 25, 0.4) !important; /* 조금 더 투명하고 맑게 */
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border-radius: 0px !important;
  margin: 18px 0;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* 6대 상태 표준 클래스 */
.card.status-normal { 
  border: 2px solid var(--status-normal-color) !important;
  background: rgba(10, 15, 25, 0.4) !important;
  box-shadow: inset 0 0 15px color-mix(in srgb, var(--status-normal-color) 10%, transparent), 0 8px 32px rgba(0, 0, 0, 0.2);
  color: var(--status-normal-color) !important;
}
.status-normal {
  color: var(--status-normal-color) !important;
}

.card.status-running { 
  border: 2px solid var(--status-running-color) !important;
  background: rgba(10, 15, 25, 0.4) !important;
  box-shadow: inset 0 0 15px color-mix(in srgb, var(--status-running-color) 10%, transparent), 0 8px 32px rgba(0, 0, 0, 0.2);
  color: var(--status-running-color) !important;
}
.status-running {
  color: var(--status-running-color) !important;
}

.card.status-warning { 
  border: 2px solid var(--status-warning-color) !important;
  background: rgba(10, 15, 25, 0.4) !important;
  box-shadow: inset 0 0 15px color-mix(in srgb, var(--status-warning-color) 10%, transparent), 0 8px 32px rgba(0, 0, 0, 0.2);
  color: var(--status-warning-color) !important;
}
.status-warning {
  color: var(--status-warning-color) !important;
}

.card.status-overcool { 
  border: 2px solid var(--status-overcool-color) !important;
  background: rgba(10, 15, 25, 0.4) !important;
  box-shadow: inset 0 0 15px color-mix(in srgb, var(--status-overcool-color) 10%, transparent), 0 8px 32px rgba(0, 0, 0, 0.2);
  color: var(--status-overcool-color) !important;
}
.status-overcool {
  color: var(--status-overcool-color) !important;
}

.card.status-inspection { 
  border: 2px solid var(--status-inspection-color) !important;
  background: rgba(10, 15, 25, 0.4) !important;
  box-shadow: inset 0 0 15px color-mix(in srgb, var(--status-inspection-color) 10%, transparent), 0 8px 32px rgba(0, 0, 0, 0.2);
  color: var(--status-inspection-color) !important;
}
.status-inspection {
  color: var(--status-inspection-color) !important;
}

.card.status-offline { 
  border: 2px solid var(--status-offline-color) !important;
  background: rgba(10, 15, 25, 0.4) !important;
  filter: none !important; 
  color: var(--status-offline-color) !important;
}
.status-offline {
  color: var(--status-offline-color) !important;
}

.container {
  max-width: 1440px;
  margin-left: 0;
  padding-left: 40px;
}

.navbar .container {
  max-width: 720px;
}

.navbar.bg-dark {
  min-height: 48px;
  padding-left: 0;
  padding-right: 0;
  background-color: #343a40 !important;
}

.nav-company-name {
  display: none;
}

.navbar-logo-jsiot {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #ffffff;
  display: flex;
  align-items: center;
}

.navbar-logo-jsiot .js-part {
  color: #00e5ff;
}

.card-header {
  height: 35px;
  background: rgba(12, 18, 30, 0.95) !important; /* 이전보다 한 단계 더 어두운 딥 네이비 톤 */
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 12px;
  color: var(--card-header-text);
}

.card-header.offline-header {
  background: rgba(108, 117, 125, 0.3) !important;
  opacity: 1;
}

.card-header .label {
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.card-header .icons {
  display: flex;
  gap: 15px;
}

.card-nav-link {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--card-header-text);
  text-decoration: none;
  transition: color 0.3s ease, transform 0.2s ease, text-shadow 0.2s ease;
  display: inline-block;
}

.card-nav-link:hover {
  color: var(--status-normal-color);
  transform: scale(1.05);
  text-shadow: 0 0 6px color-mix(in srgb, var(--status-normal-color) 60%, transparent);
}

.card-nav-link.active {
  color: var(--status-normal-color) !important;
  font-weight: 700 !important;
  text-shadow: 0 0 6px var(--status-normal-color), 0 0 12px color-mix(in srgb, var(--status-normal-color) 90%, transparent);
  animation: neonPulse 1.6s ease-in-out infinite;
  transform: scale(1.08);
}

@keyframes neonPulse {
  0% {
    text-shadow: 0 0 4px color-mix(in srgb, var(--status-normal-color) 80%, transparent);
  }

  50% {
    text-shadow: 0 0 8px var(--status-normal-color);
  }

  100% {
    text-shadow: 0 0 4px color-mix(in srgb, var(--status-normal-color) 80%, transparent);
  }
}

.footer {
  margin-top: 60px;
  padding: 30px 10px;
  text-align: center;
  font-size: 14px;
  color: var(--text-secondary);
  border-top: 1px solid var(--card-border);
}

.main-content {
  flex: 1;
}

.table th,
.table td {
  font-size: 14px !important;
  padding: 8px !important;
  vertical-align: middle;
}

.table {
  color: var(--table-text) !important;
  background-color: transparent !important;
}

.table th,
.table td {
  border-color: var(--table-border) !important;
  color: var(--table-text) !important;
}

canvas {
  background-color: transparent !important;
}

body {
  background: #0c1220 !important; /* 쿨리닉 스타일 딥 네이비 */
  background-size: cover !important;
  background-attachment: fixed !important;
}

/* --- [추가] 좌측 고정 사이드바 레이아웃 체계 --- */
.app-layout {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

.sidebar-menu {
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  border-right: 1px solid var(--card-border);
  padding: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
}

.sidebar-link {
  color: #8899b0;
  text-decoration: none;
  padding: 15px 25px;
  font-size: 15px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 15px;
  transition: all 0.2s ease;
  border-left: 4px solid transparent;
}

.sidebar-link:hover, .sidebar-link.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  border-left: 4px solid var(--status-normal-color);
}

.main-wrapper {
  flex: 1;
  margin-left: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
  transition: margin-left 0.3s ease;
}

.top-nav {
  background-color: var(--sidebar-bg) !important;
  border-bottom: 1px solid var(--card-border);
}

@media (max-width: 991.98px) {
  .sidebar-menu {
    transform: translateX(-100%);
  }
  .sidebar-menu.show {
    transform: translateX(0);
  }
  .main-wrapper {
    margin-left: 0;
  }
}

/* 스마트폰 가로모드: 사이드바 높이 부족 시 내부 스크롤 허용 */
@media (max-width: 991.98px) and (orientation: landscape) {
  .sidebar-menu.show .sidebar-content {
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .sidebar-menu.show .sidebar-footer {
    display: none !important;
  }
}

.block-container {
  padding-top: 0 !important;
  padding-bottom: 1rem !important;
}

/* --- [추가] 상세 페이지 상태 아이콘 애니메이션 및 모바일 대응 --- */

/* 1. 팬(쿨러) 회전 애니메이션 */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

#status-fan.active i,
.status-fan.active svg {
  animation: spin 2s linear infinite;
  transform-origin: center;
}

/* 2. 모바일 화면(폭 768px 이하) 아이콘 크기 축소 */
@media only screen and (max-width: 768px) {

  .status-comp,
  .status-fan {
    width: 60px !important;
    height: 60px !important;
    padding: 10px !important;
    margin: 5px !important;
  }

  .status-comp i,
  .status-fan i,
  .status-comp svg,
  .status-fan svg {
    font-size: 2rem !important;
    width: 32px !important;
    height: 32px !important;
  }

}
/* Force zero border radius for ALL card components */
.card, .card-header, .card-body, .card-footer, .card-img, .card-img-top, .card-img-bottom { border-radius: 0px !important; }

/* Force Bootstrap Zero Radius */