/* ========================================
   智慧烏來 智慧環控系統 - 樣式表
   ======================================== */

/* ========================================
   色碼表 (Color Palette)
   ======================================== */

:root {
  /* 主要色彩 */
  --primary-blue: #5D99F9;        /* 烏來配色 - 主要藍色 - 按鈕、連結 */
  --primary-blue-dark: rgb(66, 78, 249);   /* 深藍色 - 懸停狀態 */
  --primary-blue-darker: rgb(36, 50, 249); /* 更深藍色 - 按鈕深色狀態 */
  
  /* 背景色彩 */
  --bg-primary: #10151C;          /*  烏來配色 - 主要背景 - 深灰黑 */
  --bg-secondary: #1f2937;        /*  烏來配色 - 次要背景 - 深灰 */ 
  --bg-tertiary: #374151;         /* 第三背景 - 中灰 */
  --bg-quaternary: #4b5563;       /* 第四背景 - 淺灰 */
  
  /* 文字色彩 */
  --text-primary: #ffffff;        /* 主要文字 - 白色 */
  --text-secondary: #d1d5db;      /* 次要文字 - 淺灰 */
  --text-muted: #6b7280;          /* 靜音文字 - 中灰 */
  
  /* 狀態色彩 */
  --status-success: #22C55E;      /* 烏來配色 - 成功狀態 - 綠色 */
  --status-error: #EF4343;        /* 烏來配色 - 錯誤狀態 - 紅色 */
  --status-warning: #FFBC42;      /* 烏來配色 - 警告狀態 - 黃色 */
  --status-info: #60a5fa;          /* 資訊狀態 - 淺藍 */
  --status-off: #6b7280;          /* 關閉狀態 - 灰色 */
  
  /* 邊框色彩 */
  --border-primary: #374151;      /* 主要邊框 */
  --border-secondary: #6b7280;    /* 次要邊框 */
  
  /* 特殊色彩 */
  --accent-orange: #f97316;       /* 強調橙色 */
  --accent-yellow: #facc15;       /* 強調黃色 */
  
  /* 透明度變數 */
  --opacity-66: 0.66;             /* 66% 透明度 */
  --opacity-50: 0.5;              /* 50% 透明度 */
  --opacity-25: 0.25;             /* 25% 透明度 */
}

/* ========================================
   基礎樣式 (Base Styles)
   ======================================== */

* {
  box-sizing: border-box;
}

body {
  font-family: "Inter", "Noto Sans TC", sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.6;
}

.main-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  background-color: var(--bg-primary);
}

.card-container {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 0.5rem;
  padding: 1rem;
}

/* ========================================
   滾動條樣式 (Custom Scrollbar)
   ======================================== */

/* 默認滾動條樣式 */
::-webkit-scrollbar {
  width: 8px;
  transition: width 0.3s ease;
}

/* 滾動時顯示更大的滾動條 */
:root {
  --scrollbar-width: 8px;
}

body.scrolling ::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: var(--bg-primary);
  transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb {
  background: var(--bg-tertiary);
  border-radius: 4px;
  transition: background 0.3s ease, width 0.3s ease, border-radius 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--bg-quaternary);
  width: 12px;
}

/* 滾動時滾動條變大 */
body.scrolling ::-webkit-scrollbar-thumb {
  background: var(--primary-blue);
  width: 12px;
  border-radius: 6px;
}

/* 滾動條縮放動畫 */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes scrollbarPulse {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

body.scrolling ::-webkit-scrollbar-thumb {
  animation: scrollbarPulse 1s ease-in-out infinite;
}

/* Firefox 滾動條樣式 */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--bg-tertiary) var(--bg-primary);
}

body.scrolling * {
  scrollbar-width: auto;
  scrollbar-color: var(--primary-blue) var(--bg-primary);
}

/* ========================================
   圖示樣式 (Icon Styles)
   ======================================== */

.lucide {
  stroke-width: 1.5;
}

/* ========================================
   手風琴動畫 (Accordion Animation)
   ======================================== */

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}

.accordion-content.open {
  max-height: 1500px;
}

/* ========================================
   導航按鈕 (Navigation Buttons)
   ======================================== */

.nav-button {
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  background-color: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
}

.nav-button:hover {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

.nav-button.active {
  background-color: var(--primary-blue);
  color: var(--text-primary);
  border-color: var(--primary-blue);
}

/* ========================================
   控制開關 (Control Switch)
   ======================================== */

.control-switch {
  width: 52px;
  height: 32px;
  background-color: var(--bg-secondary);
  border-radius: 9999px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border: none;
}

.control-switch.on {
  background-color: var(--primary-blue-dark);
}

.control-switch-handle {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 28px;
  height: 28px;
  background-color: var(--text-primary);
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.control-switch.on .control-switch-handle {
  transform: translateX(20px);
}

/* ========================================
   平面圖樣式 (Floor Plan Styles)
   ======================================== */

.plan-container {
  position: relative;
  background-color: var(--bg-primary);
  border-radius: 0.5rem;
  padding: 1rem;
  border: 1px solid var(--border-primary);
  margin-left: auto;
}

/* Leaflet 地圖在 plan-container 中的樣式 */
.plan-container #wulai-leaflet-map {
  border-radius: 0.5rem;
  overflow: hidden;
  background-color: white !important;
  position: relative; /* 讓子元素可以相對定位 */
}

/* 開發者座標顯示器 (左下角) */
.coordinate-display {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.9);
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-family: "Noto Sans TC", sans-serif;
  font-size: 14px;
  pointer-events: none; /* 讓點擊穿透 */
  display: block; /* 顯示提示文字 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 增加陰影讓文字更明顯 */
  color: #333;
}

/* 回到地圖按鈕 (左上角) */
.reset-map-button {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  padding: 10px 16px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-family: "Noto Sans TC", sans-serif;
  font-size: 14px;
  cursor: pointer;
  display: block;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: background-color 0.2s;
  color: #333;
}

.reset-map-button:hover {
  background: rgba(255, 255, 255, 1);
}

.reset-map-button:active {
  background: rgba(240, 240, 240, 1);
}

/* Leaflet 容器背景色設置為白色（全局設置） */
.leaflet-container {
  background-color: white !important;
}

/* Leaflet 縮放控件位置調整 - 往下移動避免與「回到地圖」按鈕重疊 */
.leaflet-control-zoom {
  margin-top: 60px !important;
  margin-left: 10px !important;
}

/* 隱藏 Leaflet 版權/來源圖標 */
.leaflet-control-attribution {
  display: none !important;
}

/* Leaflet 地圖瓦片容器背景色 */
.leaflet-tile-container {
  background-color: white !important;
}

/* 確保 plan-container 中的 Leaflet 容器也使用白色背景 */
.plan-container .leaflet-container {
  background-color: white !important;
}

/* 確保 Leaflet 地圖圖片清晰顯示 */
.plan-container .leaflet-image-layer,
.plan-container .leaflet-image-layer img {
  image-rendering: auto !important;
  -ms-interpolation-mode: bicubic !important;
  max-width: none !important;
  max-height: none !important;
  filter: none !important;
}

/* Leaflet 圖層控制器樣式優化 (適合平板觸控) */
.leaflet-control-layers {
  padding: 16px !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
}

.leaflet-control-layers-list {
  margin: 0 !important;
  padding: 0 !important;
}

.leaflet-control-layers-base,
.leaflet-control-layers-overlays {
  margin: 0 !important;
  padding: 0 !important;
}

.leaflet-control-layers-overlays label {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 8px 0 !important;
  cursor: pointer !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
  min-height: 24px !important;
}

/* 复选框样式 - 24x24px */
.leaflet-control-layers-overlays input[type="checkbox"] {
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  border: 2px solid #5D99F9 !important;
  border-radius: 4px !important;
  background-color: white !important;
  position: relative !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}

.leaflet-control-layers-overlays input[type="checkbox"]:checked {
  background-color: #5D99F9 !important;
  border-color: #5D99F9 !important;
}

.leaflet-control-layers-overlays input[type="checkbox"]:checked::after {
  content: "✓" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: white !important;
  font-size: 16px !important;
  font-weight: bold !important;
  line-height: 1 !important;
}

.leaflet-control-layers-overlays input[type="checkbox"]:hover {
  border-color: #4a7fd8 !important;
  box-shadow: 0 0 0 2px rgba(93, 153, 249, 0.2) !important;
}

.leaflet-control-layers-overlays input[type="checkbox"]:checked:hover {
  background-color: #4a7fd8 !important;
  border-color: #4a7fd8 !important;
}

/* 自定義地圖篩選下拉選單 */
.map-filter-dropdown {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1000;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  min-width: 200px;
  font-family: "Noto Sans TC", sans-serif;
}

.filter-header {
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
  border-radius: 8px 8px 0 0;
}

.filter-dropdown-container {
  position: relative;
}

.filter-dropdown-toggle {
  width: 100%;
  padding: 12px 16px;
  background: white;
  border: none;
  border-top: 1px solid #e5e7eb;
  border-radius: 0 0 8px 8px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  color: #333;
  transition: background-color 0.2s;
}

.filter-dropdown-toggle:hover {
  background: #f9fafb;
}

.filter-selected-text {
  flex: 1;
  text-align: left;
}

.filter-arrow {
  font-size: 12px;
  color: #6b7280;
  transition: transform 0.2s;
}

.filter-dropdown-menu.show .filter-arrow {
  transform: rotate(180deg);
}

.filter-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  margin-top: -1px;
  overflow: hidden;
  z-index: 1001;
}

.filter-dropdown-menu.show {
  display: block;
}

.filter-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color 0.2s;
  margin: 0;
  min-height: 24px;
}

.filter-option:hover {
  background: #f9fafb;
}

.filter-option:not(:last-child) {
  border-bottom: 1px solid #f3f4f6;
}

.filter-checkbox {
  width: 24px;
  height: 24px;
  margin: 0;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 2px solid var(--primary-blue);
  border-radius: 4px;
  background-color: white;
  position: relative;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.filter-checkbox:checked {
  background-color: var(--primary-blue);
  border-color: var(--primary-blue);
}

.filter-checkbox:checked::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
}

.filter-checkbox:hover {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 2px rgba(93, 153, 249, 0.2);
}

.filter-checkbox:checked:hover {
  background-color: var(--primary-blue);
  border-color: var(--primary-blue);
}

.filter-option span {
  font-size: 16px;
  color: #333;
  line-height: 1.5;
}

/* Leaflet 彈出視窗樣式 */
.plan-container .leaflet-popup-content-wrapper {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-radius: 0.5rem;
  border: 1px solid var(--border-primary);
}

.plan-container .leaflet-popup-content {
  margin: 12px;
  font-size: 14px;
  color: var(--text-primary);
}

.plan-container .leaflet-popup-tip {
  background: var(--bg-secondary);
}

/* 自定義 Popup 樣式 (來自 wuliai_map.html) */
.custom-popup .leaflet-popup-content-wrapper {
  border-radius: 8px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
}

.custom-popup .leaflet-popup-content {
  margin: 0;
  width: 280px !important;
}

.popup-header {
  background-color: #2c3e50;
  color: white;
  padding: 10px 15px;
  font-weight: bold;
  font-size: 1.1em;
}

.popup-header.category-facility {
  background-color: #e74c3c;
} /* 紅色 */

.popup-header.category-water {
  background-color: #3498db;
} /* 藍色 */

.popup-header.category-scenic {
  background-color: #27ae60;
} /* 綠色 */

.popup-header.category-camera {
  background-color: #4b5563;
} /* 深灰色 */

.popup-body {
  padding: 15px;
  font-size: 0.95em;
  line-height: 1.5;
  color: #333;
  background-color: white;
}

.map-zoom-controls {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: white;
  border-radius: 0.375rem;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.zoom-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
  padding: 0;
}

.zoom-btn:hover {
  background-color: #f3f4f6;
}

.zoom-btn:active {
  background-color: #e5e7eb;
}

.zoom-btn:not(:last-child) {
  border-bottom: 1px solid #e5e7eb;
}

.zoom-icon {
  font-size: 24px;
  font-weight: 300;
  color: #374151;
  line-height: 1;
  user-select: none;
}

.plan-svg .building {
  fill: rgba(55, 65, 81, var(--opacity-66));
  stroke: var(--border-secondary);
  stroke-width: 2;
  cursor: pointer;
  transition: fill 0.2s ease;
}

.plan-svg .building:hover,
.plan-svg .building.active {
  fill: var(--primary-blue);
}

/* 地图上的建筑物圆形框框 - 浅灰色填充 */
.plan-svg .space-nav-item .building {
  fill: rgba(156, 163, 175, 0.15) !important; /* 浅灰色填充 */
  stroke: rgba(156, 163, 175, 0.6) !important; /* 灰色边框 */
  stroke-width: 1.5 !important;
  transition: all 0.2s ease !important;
}

.plan-svg .space-nav-item .building:hover {
  fill: rgba(156, 163, 175, 0.25) !important; /* hover 时浅灰色更深 */
  stroke: rgba(156, 163, 175, 1) !important; /* hover 时灰色边框更明显 */
  stroke-width: 2 !important;
}

.plan-svg .area {
  fill: var(--bg-quaternary);
}

.plan-svg text {
  fill: var(--text-primary);
  font-size: 24px;
  font-weight: 500;
}

.plan-svg .device {
  fill: var(--bg-tertiary);
  stroke: var(--border-secondary);
  stroke-width: 1;
  cursor: pointer;
}

.plan-svg .device:hover {
  stroke: var(--primary-blue);
}

.plan-svg .device.active {
  fill: var(--primary-blue);
}

.plan-svg .device.error {
  fill: var(--status-error);
}

/* ========================================
   溫度矩形資訊 (Temperature Rectangle Info)
   ======================================== */

.temp-rect-info {
  color: var(--text-secondary);
  font-family: monospace;
  font-size: 12px;
  line-height: 1.4;
}

.temp-rect-btn {
  background: var(--primary-blue);
  color: var(--text-primary);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  cursor: pointer;
  font-size: 12px;
  transition: background-color 0.2s ease;
}

.temp-rect-btn:hover {
  background: var(--primary-blue-dark);
}

.temp-rect-btn.secondary {
  background: var(--text-muted);
}

.temp-rect-btn.secondary:hover {
  background: var(--bg-quaternary);
}

/* ========================================
   標籤按鈕 (Tab Buttons)
   ======================================== */

.tab-button {
  padding: 0.5rem 1rem;
  background-color: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
}

.tab-button:hover {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

.tab-button.active {
  background-color: var(--primary-blue);
  color: var(--text-primary);
  border-color: var(--primary-blue);
}

/* ========================================
   模態框 (Modal)
   ======================================== */

.modal-content {
  background-color: var(--bg-secondary);
  padding: 2rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border-primary);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* ========================================
   狀態指示器 (Status Indicators)
   ======================================== */

.status-ok {
  background-color: var(--status-success);
  color: var(--text-primary);
  /* padding: 0.25rem 0.5rem; */
  border-radius: 0.25rem;
  font-size: 12px;
  font-weight: 500;
}

.status-error {
  background-color: var(--status-error);
  color: var(--text-primary);
  /* padding: 0.25rem 0.5rem; */
  border-radius: 0.25rem;
  font-size: 12px;
  font-weight: 500;
}

.status-off {
  background-color: var(--status-off);
  color: var(--text-primary);
  /* padding: 0.25rem 0.5rem; */
  border-radius: 0.25rem;
  font-size: 12px;
  font-weight: 500;
}

/* ========================================
   頂部導航欄 (Top Navigation)
   ======================================== */

.top-nav {
  background: rgba(17, 24, 39, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-primary);
  padding: 1rem 1.5rem;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* ========================================
   響應式設計 (Responsive Design)
   ======================================== */

@media (max-width: 768px) {
  .main-container {
    padding: 0 0.5rem;
  }
  
  .nav-button {
    padding: 0.5rem 1rem;
    font-size: 14px;
  }
  
  .plan-container {
    padding: 0.5rem;
  }
  
  .modal-content {
    padding: 1rem;
    margin: 1rem;
  }
}

@media (max-width: 480px) {
  .control-switch {
    width: 44px;
    height: 28px;
  }
  
  .control-switch-handle {
    width: 24px;
    height: 24px;
  }
  
  .control-switch.on .control-switch-handle {
    transform: translateX(16px);
  }
}

/* ========================================
   工具類別 (Utility Classes)
   ======================================== */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* 標準色碼類別 */
.bg-primary-blue { background-color: var(--primary-blue); }
.bg-primary-blue-dark { background-color: var(--primary-blue-dark); }
.bg-primary-blue-darker { background-color: var(--primary-blue-darker); }
.bg-bg-primary { background-color: var(--bg-primary); }
.bg-bg-secondary { background-color: var(--bg-secondary); }
.bg-bg-tertiary { background-color: var(--bg-tertiary); }
.bg-bg-quaternary { background-color: var(--bg-quaternary); }
.bg-status-success { background-color: var(--status-success); }
.bg-status-error { background-color: var(--status-error); }
.bg-status-warning { background-color: var(--status-warning); }
.bg-status-info { background-color: var(--status-info); }
.bg-status-off { background-color: var(--status-off); }
.bg-accent-orange { background-color: var(--accent-orange); }
.bg-accent-yellow { background-color: var(--accent-yellow); }

/* 自定義色碼類別 */
.bg-custom-gray-800 { background-color: #1F2937; }

.text-primary-blue { color: var(--primary-blue); }
.text-primary-blue-dark { color: var(--primary-blue-dark); }
.text-primary-blue-darker { color: var(--primary-blue-darker); }
.text-bg-primary { color: var(--bg-primary); }
.text-bg-secondary { color: var(--bg-secondary); }
.text-bg-tertiary { color: var(--bg-tertiary); }
.text-bg-quaternary { color: var(--bg-quaternary); }
.text-status-success { color: var(--status-success); }
.text-status-error { color: var(--status-error); }
.text-status-warning { color: var(--status-warning); }
.text-status-info { color: var(--status-info); }
.text-status-off { color: var(--status-off); }
.text-accent-orange { color: var(--accent-orange); }
.text-accent-yellow { color: var(--accent-yellow); }

.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }

.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }

.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }

.rounded { border-radius: 0.25rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-full { border-radius: 9999px; }

.shadow { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.shadow-lg { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); }

/* ========================================
   動畫效果 (Animations)
   ======================================== */

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

@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

.fade-in {
  animation: fadeIn 0.3s ease-out;
}

.slide-in {
  animation: slideIn 0.3s ease-out;
}

/* ========================================
   固定標題樣式 (Fixed Header Styles) - 已停用
   ======================================== */

/* ========================================
   溫度矩形控制 (Temperature Rectangle Controls)
   ======================================== */

.temp-rect-controls {
  position: fixed;
  top: 20px;
  right: 20px;
  background: var(--bg-secondary);
  padding: 15px;
  border-radius: 8px;
  border: 1px solid var(--border-primary);
  z-index: 1000;
  min-width: 200px;
}

.temp-rect-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ========================================
   樓層平面圖樣式 (Floor Plan Styles)
   ======================================== */

.floor-plan-svg .room {
  fill: var(--bg-tertiary);
  stroke: var(--border-secondary);
  stroke-width: 2;
  opacity: 0.6;
}

.floor-plan-svg .temp-rect {
  fill: rgba(59, 130, 246, 0.3);
  stroke: var(--primary-blue);
  stroke-width: 2;
  stroke-dasharray: 5, 5;
  cursor: move;
}

.floor-plan-svg .temp-rect:hover {
  fill: rgba(59, 130, 246, 0.5);
  stroke-width: 3;
}

.floor-plan-svg .resize-handle {
  fill: var(--primary-blue);
  stroke: var(--text-primary);
  stroke-width: 2;
  cursor: nw-resize;
  opacity: 0.8;
}

.floor-plan-svg .resize-handle:hover {
  fill: var(--primary-blue-darker);
  opacity: 1;
}

.floor-plan-svg .resize-handle.se {
  cursor: se-resize;
}

.floor-plan-svg .resize-handle.sw {
  cursor: sw-resize;
}

.floor-plan-svg .resize-handle.ne {
  cursor: ne-resize;
}

.floor-plan-svg .resize-handle.nw {
  cursor: nw-resize;
}

.floor-plan-svg .floor-device-control {
  cursor: pointer;
}

.floor-plan-svg .device-icon-bg {
  transition: fill 0.2s, stroke 0.2s;
  stroke-width: 2;
  stroke: transparent;
}

.floor-plan-svg .device-icon-bg.status-error {
  stroke: var(--status-error);
}

.floor-plan-svg .device-icon-fg {
  transition: color 0.2s;
}

.floor-plan-svg .room-label {
  font-size: 20px;
  fill: whitesmoke;
}

/* 確保平面圖背景圖片清晰顯示 - 使用高品質渲染 */
.floor-plan-svg {
  image-rendering: auto;
  shape-rendering: auto;
}

/* 針對所有圖片使用高品質渲染 */
.floor-plan-svg image {
  image-rendering: auto;
  -ms-interpolation-mode: bicubic;
}

/* 針對 JPG 格式的特殊處理 - JPG 有損壓縮需要更好的插值 */
.floor-plan-svg image[href*=".jpg"],
.floor-plan-svg image[href*=".jpeg"] {
  image-rendering: auto;
  -ms-interpolation-mode: bicubic;
  /* 減少模糊效果，確保不使用任何濾鏡 */
  filter: none;
  /* 強制使用高品質縮放算法 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   模態框樣式 (Modal Styles)
   ======================================== */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
}

/* ========================================
   響應式設計更新 (Updated Responsive Design)
   ======================================== */

@media (max-width: 640px) {
}

/* ========================================
   列印樣式 (Print Styles)
   ======================================== */

@media print {
  .top-nav,
  .control-switch,
  .temp-rect-btn {
    display: none;
  }
  
  body {
    background: white;
    color: black;
  }
  
  .plan-container {
    background: white;
    border: 1px solid #ccc;
  }
}

/* ========================================
   Minor Loading Overlay (URL 參數變化時的載入動畫)
   ======================================== */

.minor-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  backdrop-filter: blur(4px);
  transition: opacity 0.3s ease;
}

.minor-loading-overlay.hidden {
  display: none;
}

.minor-loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.spinner-circle {
  width: 50px;
  height: 50px;
  border: 4px solid rgba(93, 153, 249, 0.3);
  border-top-color: var(--primary-blue);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.spinner-text {
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 500;
  font-family: "Noto Sans TC", sans-serif;
}

/* ========================================
   回到頂部按鈕 (Scroll to Top Button)
   ======================================== */

.scroll-to-top-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  background-color: var(--primary-blue);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(93, 153, 249, 0.4);
  transition: all 0.3s ease;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
}

.scroll-to-top-btn.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-to-top-btn:hover {
  background-color: var(--primary-blue-dark);
  box-shadow: 0 6px 16px rgba(93, 153, 249, 0.5);
  transform: translateY(-2px);
}

.scroll-to-top-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(93, 153, 249, 0.4);
}

.scroll-to-top-btn i {
  color: white;
  width: 24px;
  height: 24px;
}

@media (max-width: 768px) {
  .scroll-to-top-btn {
    width: 48px;
    height: 48px;
    bottom: 20px;
    right: 20px;
  }
  
  .scroll-to-top-btn i {
    width: 20px;
    height: 20px;
  }
}