/* ========== DEVICE CARD ONLY ========== */

/* 🔥 summary-card 왼쪽 라인과 정확히 맞추기 위해 패딩 제거 */
.device-grid {
  overflow-y: auto;
  padding: 0 16px 16px 0 !important;
  margin-top: 0 !important;   /* 🔥 summary 카드와 간격 줄이기 */
}

/* 한 줄(row) */
.device-row {
  display: flex;
  flex-direction: column;    /* ✅ 위: 라벨, 아래: 카드영역 */
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 18px;
}

/* 그룹명 라벨 */
.device-row-label {
  font-size: 15px;
  font-weight: 700;
  color: #374151;
  padding-left: 4px;
}

/* 가로 스크롤 카드 영역 */
.device-row-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 10px;
}

/* 카드 폭 고정 */
.device-row-scroll .device-card {
  flex: 0 0 var(--device-card-width, 260px);
  max-width: var(--device-card-width, 260px);
}

/* 스크롤바 스타일 */
.device-row-scroll::-webkit-scrollbar { height: 6px; }
.device-row-scroll::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.04); }
.device-row-scroll::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.35); border-radius: 3px; }


/* ========================================================= */
/*                      DEVICE CARD UI                       */
/* ========================================================= */

.device-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 14px 16px 16px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;

  position: relative;
  overflow: hidden;
  flex: 0 0 260px; /* 🔥 카드 고정폭 */
}

/* 카드 상단 - 장비 이름 영역 */
.device-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.device-name {
  font-size: 16px;
  font-weight: 600;
}

/* 전원/LED 상태가 나오는 한 줄 */
.device-status-row {
  display: flex;
  align-items: center;
  gap: 12px;           /* 전원 / LED 사이 간격 */
  margin-top: 2px;
  margin-bottom: 4px;
}

/* 상태 공통 스타일 */
.device-status,
.device-led-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;     /* 🔥 전원/LED 글자 크기 동일 */
  font-weight: 500;
}

.device-status.status-pending {
  color: #f1c40f;
}

/* dot */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #22c55e;
  animation: blink 1.1s infinite alternate;
}

/* 상태별 dot 색상 */
.status-connecting .status-dot { background-color: #3b82f6; }
.status-disconnected .status-dot { background-color: #ef4444; animation: none; }
.status-off .status-dot { background-color: #777; }
.status-idle .status-dot { background-color: #f1c40f; }
.status-running .status-dot { background-color: #2ecc71; }
.status-stopped .status-dot { background-color: #e74c3c; }

/* LED 켜짐/꺼짐 dot 색상 */
.device-led-status.led-on .status-dot {
  background-color: #ffd54f; /* 노란색 느낌 */
}

.device-led-status.led-off .status-dot {
  background-color: #777;
}

@keyframes blink {
  0% { opacity: 0.4; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.2); }
}

/* 지표 / 프로그레스바 */
.device-metric-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: #6b7280;
  margin-bottom: 4px;
}

.device-metric-row span:last-child {
  font-weight: 600;
  color: #111827;
}

.progress-bar {
  position: relative;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
}

.progress-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #34d399, #2563eb);
  transform-origin: left center;
  transform: scaleX(0.5);
}

/* 카드 하단 버튼 */
.device-footer {
  margin-top: 6px;
  display: flex;
  flex-direction: column;   /* 🔥 가로 → 세로 배치 */
  gap: 6px;
}

.device-footer-main,
.device-footer-sub {
  display: flex;
  justify-content: flex-end;  /* 버튼을 오른쪽 정렬 */
}

/* 버튼 스타일 */
.btn-device-play {
  background: #fbbf24;
  color: #ffffff;
}

.btn-device-stop {
  background: #4f46e5;
  color: #ffffff;
}

.btn-device-led-toggle {
  background: #e5e7eb;
  color: #111827;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-device-led-toggle.led-on {
  background: #34d399;  /* 초록색 */
  color: #ffffff;
}

.btn-device-led-toggle.led-off {
  background: #9ca3af;  /* 회색 */
  color: #ffffff;
}

/* 비활성 버튼 공통 */
.btn-device-play:disabled,
.btn-device-stop:disabled,
.btn-device-led-toggle:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* 장비 제어 오버레이 */
.device-control-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
  color: #ffffff;
  font-size: 12px;
  pointer-events: all;
  z-index: 10;
  text-align: center;
}

.device-control-spinner {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 3px solid rgba(255, 255, 255, 0.4);
  border-top-color: #ffffff;
  animation: device-spin 0.8s linear infinite;
  margin-bottom: 6px;
}

.device-control-text {
  letter-spacing: 0.08em;
  font-weight: 500;
  opacity: 0.95;
}

@keyframes device-spin {
  to { transform: rotate(360deg); }
}

/* ===== 카드 헤더 우측 예약 아이콘 ===== */
.btn-device-reserve {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: none;
  background: #e5e7eb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #4b5563;
  cursor: pointer;

   /* 🔥 애니메이션용 */
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

/* ✅ 정상 장비일 때만 hover 효과 (is-disabled 아니고, disabled 아니면) */
.btn-device-reserve:hover:not(.is-disabled):not(:disabled) {
  background: #facc15;         /* 노란색 강조 */
  color: #111827;
  transform: scale(1.15);      /* 살짝 확대 */
}

.btn-device-reserve:hover:not(.is-disabled):not(:disabled) i {
  transform: rotate(18deg);    /* 아이콘 살짝 기울기 */
}

/* disabled(연결 실패) 상태일 때는 hover 효과 없앰 */
.btn-device-reserve.is-disabled,
.btn-device-reserve:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
  background: #e5e7eb;
  color: #9ca3af;
}

.btn-device-reserve.is-disabled:hover,
.btn-device-reserve:disabled:hover {
  background: #e5e7eb;
  color: #9ca3af;
}

.btn-device-reserve:hover {
  background: #d1d5db;
}

.btn-device-reserve i {
  pointer-events: none;  /* 아이콘만 클릭되는 문제 방지 */
}
.device-led-status.led-unknown .status-dot {
  background-color: #d9d9d9;
}

.device-led-status.led-unknown span:last-child {
  color: #888;
}

/* 연결 실패(에러) 공통 스타일 */
.status-disconnected .status-dot {
  background-color: #e74c3c !important;
}
.status-disconnected span:last-child {
  color: #e74c3c !important;
}

/* LED 확인 불가 */
.device-led-status.led-unknown .status-dot {
  background-color: #e74c3c !important;
}
.device-led-status.led-unknown span:last-child {
  color: #e74c3c !important;
}