/**
 * 對應 web-app/index.html 新版 <style> 區塊（3頁籤 UI + 右側滑出面板 + IES Picker
 * Modal 兩層），抽出來成獨立 CSS 檔（wp_enqueue_style 用）。選擇器皆補上
 * .rs-widget-root 前綴，避免污染 WordPress 主題全域樣式；內部 DOM id 維持跟
 * web-app 版一致（main.js 等前端 JS 直接複製過來，選擇器沒有調整）。
 *
 * 顏色變數（--bg-panel 等）用 .rs-widget-root 當作 CSS 變數作用域容器，
 * 不寫在 :root（避免影響 WordPress 主題其餘全域樣式）。
 *
 * 【2026新增：帳號登入 + 專案存檔功能】#panel-header 改成 flex 排版容納
 * #project-panel-btn 常駐按鈕，並新增 #project-panel-overlay 彈出浮層樣式
 * （仿 IES Picker Modal 兩層彈窗結構）。
 *
 * 【2026-11-05 合併】補上 web-app/index.html 新增的下列區塊樣式（對應
 * template-panel.php 同步新增的 DOM，詳見該檔案開頭註解）：
 *   - #mode-quick-buttons / .mode-quick-btn：左上角4顆互動模式快捷按鈕。
 *   - .side-panel-action-row / .side-panel-action-btn：Replace Model/Duplicate按鈕列。
 *   - #luminaire-types-panel / .lum-type-card：Luminaire Types管理面板卡片。
 *   - #crosswalk-panel / #crosswalk-list：斑馬線垂直照度面板。
 */

.rs-widget-root {
  --bg-panel: #1b2028;
  --bg-panel-alt: #232a35;
  --bg-input: #2a323e;
  --bg-hover: #323c4a;
  --border-c: #3a4452;
  --text-main: #e6e9ef;
  --text-dim: #9aa4b2;
  --accent: #4da3ff;
  --accent-strong: #2f7fe0;
  --warn-bg: #ffe08a;
  --warn-text: #2a2200;

  position: relative;
  width: 100%;
  height: 80vh;
  min-height: 480px;
  max-height: 900px;
  overflow: hidden;
  font: 13px/1.4 Arial, sans-serif;
  box-sizing: border-box;
}
.rs-widget-root *, .rs-widget-root *::before, .rs-widget-root *::after {
  box-sizing: border-box;
}

/* 全螢幕模式：容器撐滿整個螢幕。需相容各家瀏覽器的 fullscreen 偽類前綴。 */
.rs-widget-root:fullscreen,
.rs-widget-root:-webkit-full-screen,
.rs-widget-root:-moz-full-screen,
.rs-widget-root:-ms-fullscreen {
  width: 100vw;
  height: 100vh;
  max-height: none;
  background: #000;
}

.rs-widget-root #btn-fullscreen {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 1300;
  padding: 6px 12px;
  border: 1px solid var(--border-c);
  border-radius: 4px;
  background: rgba(27, 32, 40, 0.85);
  color: var(--text-main);
  font: 13px/1.2 Arial, sans-serif;
  cursor: pointer;
}
.rs-widget-root #btn-fullscreen:hover {
  background: var(--bg-hover);
}

.rs-widget-root #map {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  height: 100%;
  width: 100%;
}

/* ===================================================================
 * 左上角4顆互動模式快捷按鈕（2026-11-05新增）。仿 #panel-toggle-btn 的
 * panel-open 位移邏輯：面板展開時往右位移，收合時貼齊地圖左緣。
 * =================================================================== */
.rs-widget-root #mode-quick-buttons {
  position: absolute;
  left: 10px;
  top: 52px;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: left 0.15s;
}
.rs-widget-root #mode-quick-buttons.panel-open {
  left: 418px;
}
.rs-widget-root .mode-quick-btn {
  width: 32px;
  height: 32px;
  padding: 6px;
  border-radius: 6px;
  border: 1px solid var(--border-c);
  background: var(--bg-panel);
  color: var(--text-main);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.rs-widget-root .mode-quick-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
}
/* 斑馬線圖示是 fill:currentColor 的實心條紋矩形（非線條描邊），上面 svg 選取器的
   stroke/fill:none 預設值會蓋掉子元素自己設定的 fill="currentColor"，這裡針對該
   按鈕的 svg 子元素特別覆寫回來，確保 <rect> 真的被填滿成實心黑色色塊，而不是空心
   外框。對應 web-app/index.html 同一條規則（2026-11-05 修正：plugin 版先前遺漏
   這兩條規則，導致 icon 全部變成實心黑色色塊，與 web-app 版視覺不一致）。 */
.rs-widget-root #mode-btn-draw-crosswalk svg {
  fill: currentColor;
  stroke: none;
}
.rs-widget-root .mode-quick-btn:hover {
  background: var(--bg-hover);
  border-color: var(--accent);
}
.rs-widget-root .mode-quick-btn[data-active="true"] {
  background: var(--accent);
  border-color: var(--accent-strong);
  color: #0c1622;
}

/* ===================================================================
 * 左側主面板（Shared area + Tab bar + Tab content）
 * =================================================================== */
.rs-widget-root #panel {
  position: absolute;
  left: 10px;
  top: 10px;
  bottom: 10px;
  z-index: 1000;
  background: var(--bg-panel);
  border: 1px solid var(--border-c);
  border-radius: 8px;
  padding: 0;
  font: 13px/1.4 Arial, sans-serif;
  color: var(--text-main);
  width: 400px;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 18px rgba(0,0,0,0.45);
  overflow: hidden;
}

.rs-widget-root #panel-header {
  padding: 12px 14px 8px 14px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rs-widget-root #panel h1 {
  font-size: 13px;
  margin: 0 0 8px 0;
  color: var(--text-main);
  font-weight: 700;
}
.rs-widget-root #project-panel-btn {
  flex-shrink: 0;
  font-size: 11px;
  padding: 4px 8px;
  margin-bottom: 8px;
}

.rs-widget-root #shared-area {
  padding: 0 14px 10px 14px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-c);
}

.rs-widget-root #tab-bar {
  display: flex;
  gap: 2px;
  padding: 8px 8px 0 8px;
  flex-shrink: 0;
  background: var(--bg-panel-alt);
}
.rs-widget-root .tab-btn {
  flex: 1;
  text-align: center;
  padding: 9px 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  border-radius: 6px 6px 0 0;
  transition: background 0.15s, color 0.15s;
}
.rs-widget-root .tab-btn:hover {
  background: var(--bg-hover);
  color: var(--text-main);
}
.rs-widget-root .tab-btn.active {
  color: var(--accent);
  background: var(--bg-panel);
  border-bottom: 3px solid var(--accent);
}

.rs-widget-root #tab-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 14px 14px 14px;
}
.rs-widget-root #tab-content::-webkit-scrollbar { width: 8px; }
.rs-widget-root #tab-content::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.18);
  border-radius: 4px;
}

.rs-widget-root .tab-panel { display: none; }
.rs-widget-root .tab-panel.active { display: block; }

.rs-widget-root #panel .row { margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.rs-widget-root #panel select,
.rs-widget-root #panel input[type="text"],
.rs-widget-root #panel input[type="number"] {
  flex: 1;
  background: var(--bg-input);
  color: var(--text-main);
  border: 1px solid var(--border-c);
  border-radius: 4px;
  padding: 4px 6px;
}
.rs-widget-root #panel select:focus, .rs-widget-root #panel input:focus {
  outline: none;
  border-color: var(--accent);
}
.rs-widget-root #panel label { color: var(--text-main); }
.rs-widget-root #panel button {
  padding: 4px 10px;
  border: 1px solid var(--border-c);
  border-radius: 4px;
  background: var(--bg-input);
  color: var(--text-main);
  cursor: pointer;
}
.rs-widget-root #panel button:hover {
  background: var(--bg-hover);
  border-color: var(--accent);
}

.rs-widget-root .section-block {
  margin-top: 10px;
  border-top: 1px solid var(--border-c);
  padding-top: 10px;
}
.rs-widget-root .section-title {
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text-main);
  font-size: 12.5px;
}

/* --- Status toast --- */
.rs-widget-root #status-toast {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 1500;
  max-width: 360px;
  background: rgba(27, 32, 40, 0.96);
  color: var(--text-main);
  border: 1px solid var(--border-c);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  padding: 10px 14px;
  font: 13px/1.45 Arial, sans-serif;
  white-space: pre-wrap;
  box-shadow: 0 6px 24px rgba(0,0,0,0.5);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.rs-widget-root #status-toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* --- Selected panel sliders (inside right-side slide-out panel) --- */
.rs-widget-root #selected-panel {
  margin-top: 8px;
}
.rs-widget-root #selected-panel .slider-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.rs-widget-root #selected-panel .slider-row label {
  width: 80px;
  flex-shrink: 0;
}
.rs-widget-root #selected-panel .slider-row input[type="range"] {
  flex: 1;
  accent-color: var(--accent);
}
.rs-widget-root #selected-panel .slider-row .val {
  width: 48px;
  text-align: right;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}
.rs-widget-root #selected-panel[data-disabled="true"] .side-panel-field input[type="range"],
.rs-widget-root #selected-panel[data-disabled="true"] .side-panel-field select {
  opacity: 0.4;
  pointer-events: none;
}

/* --- Heatmap panel --- */
.rs-widget-root #heatmap-panel .slider-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.rs-widget-root #heatmap-panel .slider-row label {
  width: 100px;
  flex-shrink: 0;
}
.rs-widget-root #heatmap-panel .slider-row input[type="range"] {
  flex: 1;
  accent-color: var(--accent);
}
.rs-widget-root #heatmap-panel .slider-row .val {
  width: 48px;
  text-align: right;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}
.rs-widget-root #heatmap-panel .check-row {
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.rs-widget-root #btn-run-heatmap {
  width: 100%;
  padding: 8px 10px;
  font-weight: 700;
  font-size: 14px;
  border: 1px solid var(--accent-strong);
  border-radius: 4px;
  background: var(--accent);
  color: #0c1622;
  cursor: pointer;
  margin-bottom: 8px;
}
.rs-widget-root #btn-run-heatmap:hover { background: #6fb6ff; }

/* ===================================================================
 * 右側滑出面板：選取路燈後的屬性編輯面板（Height/Yaw/Tilt/Arm/Arrangement/
 * CCT/Shield/Distribution + 頂部 Model 圖片）。z-index 刻意高於 lux-legend
 * (1200)，滑出時允許直接蓋住右上角圖例。
 * =================================================================== */
.rs-widget-root #luminaire-side-panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 320px;
  max-width: 90%;
  z-index: 1250;
  background: var(--bg-panel);
  border-left: 1px solid var(--border-c);
  box-shadow: -6px 0 24px rgba(0,0,0,0.5);
  color: var(--text-main);
  transform: translateX(100%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.rs-widget-root #luminaire-side-panel.open {
  transform: translateX(0);
}
.rs-widget-root #luminaire-side-panel-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-c);
}
.rs-widget-root #luminaire-side-panel-header .side-panel-title {
  font-weight: 700;
  font-size: 13.5px;
}
.rs-widget-root #luminaire-side-panel-close {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
}
.rs-widget-root #luminaire-side-panel-close:hover { color: var(--text-main); }
.rs-widget-root #luminaire-side-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
}
.rs-widget-root #luminaire-side-panel-model-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-main);
  text-align: center;
  margin-bottom: 6px;
  word-break: break-word;
  flex-shrink: 0;
}
.rs-widget-root #luminaire-side-panel-image-wrap {
  width: 100%;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-panel-alt);
  border: 1px solid var(--border-c);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 14px;
  color: var(--text-dim);
  font-size: 12px;
  flex-shrink: 0;
}
.rs-widget-root #luminaire-side-panel-image-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: none;
}
.rs-widget-root #luminaire-side-panel-image-wrap img.loaded {
  display: block;
}
.rs-widget-root #luminaire-side-panel-image-wrap #luminaire-side-panel-image-placeholder {
  display: block;
}
.rs-widget-root #luminaire-side-panel-image-wrap img.loaded + #luminaire-side-panel-image-placeholder {
  display: none;
}

/* --- 2026-11-05新增：Replace Model / Duplicate 快捷按鈕列 --- */
.rs-widget-root .side-panel-action-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.rs-widget-root .side-panel-action-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px;
  background: var(--bg-panel-alt);
  border: 1px solid var(--border-c);
  border-radius: 6px;
  color: var(--text-main);
  cursor: pointer;
  font-size: 10.5px;
}
.rs-widget-root .side-panel-action-btn:hover {
  background: var(--bg-hover);
  border-color: var(--accent);
  color: var(--accent);
}
.rs-widget-root .side-panel-action-btn svg {
  width: 18px;
  height: 18px;
}

.rs-widget-root .side-panel-field {
  margin-bottom: 14px;
}
.rs-widget-root .side-panel-field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}
.rs-widget-root .side-panel-field-label-row label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
}
.rs-widget-root .side-panel-field-label-row .val {
  font-size: 12px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.rs-widget-root .side-panel-field input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
  box-sizing: border-box;
}
.rs-widget-root .side-panel-field select {
  width: 100%;
  background: var(--bg-input);
  color: var(--text-main);
  border: 1px solid var(--border-c);
  border-radius: 4px;
  padding: 6px 7px;
  box-sizing: border-box;
  font-size: 12.5px;
}
.rs-widget-root .side-panel-section-title {
  font-weight: 700;
  font-size: 12.5px;
  color: var(--text-main);
  margin: 18px 0 10px 0;
  padding-top: 12px;
  border-top: 1px solid var(--border-c);
}

/* --- 2026-11-05新增：歸屬 Luminaire Type 提示文字 --- */
.rs-widget-root #type-controlled-hint {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 4px;
}
.rs-widget-root #type-controlled-hint.active {
  color: var(--accent);
}

/* Arrangement 12宮格選擇器 */
.rs-widget-root .arrangement-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.rs-widget-root .arrangement-grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 3px;
  background: var(--bg-panel-alt);
  border: 1px solid var(--border-c);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.rs-widget-root .arrangement-grid-item:hover {
  border-color: var(--accent);
  background: var(--bg-hover);
}
.rs-widget-root .arrangement-grid-item.selected {
  border-color: var(--accent);
  background: var(--bg-hover);
  box-shadow: 0 0 0 1px var(--accent);
}
.rs-widget-root .arrangement-grid-item-icon {
  width: 100%;
  height: 36px;
  color: var(--text-dim);
}
.rs-widget-root .arrangement-grid-item.selected .arrangement-grid-item-icon {
  color: var(--accent);
}
.rs-widget-root .arrangement-grid-item-label {
  font-size: 8.5px;
  line-height: 1.15;
  text-align: center;
  color: var(--text-dim);
  word-break: break-word;
}
.rs-widget-root .arrangement-grid-item.selected .arrangement-grid-item-label {
  color: var(--accent);
  font-weight: 700;
}

.rs-widget-root #selected-spec-hint {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 4px;
}

/* --- Lux legend: keep original (light) style, not dark-themed --- */
.rs-widget-root #lux-legend {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 1200;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #333;
  border-radius: 4px;
  padding: 6px 8px;
  font: 12px/1.2 Arial, sans-serif;
  color: #111;
  pointer-events: none;
  min-width: 170px;
  display: none;
}
.rs-widget-root .legend-row { display:flex; align-items:center; margin:2px 0; }
.rs-widget-root .legend-swatch { width:14px; height:10px; margin-right:6px; border:1px solid rgba(0,0,0,0.25); }
.rs-widget-root .lux-label-div {
  font: 10px/1.1 Arial, sans-serif;
  color: #111;
  background: transparent;
  text-shadow: 0 0 2px rgba(255,255,255,0.85), 0 0 2px rgba(255,255,255,0.85);
  transform: translate(-50%, -50%);
  pointer-events: none;
  white-space: nowrap;
}

.rs-widget-root #addr-suggestions {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  z-index: 1300;
  background: var(--bg-panel-alt);
  border: 1px solid var(--border-c);
  border-top: none;
  border-radius: 0 0 4px 4px;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 4px 8px rgba(0,0,0,0.35);
  display: none;
}
.rs-widget-root #addr-suggestions .suggestion-item {
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text-main);
  cursor: pointer;
  border-bottom: 1px solid var(--border-c);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rs-widget-root #addr-suggestions .suggestion-item:last-child {
  border-bottom: none;
}
.rs-widget-root #addr-suggestions .suggestion-item:hover,
.rs-widget-root #addr-suggestions .suggestion-item.active {
  background: var(--bg-hover);
  color: var(--accent);
}
.rs-widget-root #map.crosshair-cursor {
  cursor: crosshair;
}
.rs-widget-root #region-panel .row { margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.rs-widget-root #region-panel label { flex-shrink: 0; }
.rs-widget-root #region-panel input[type="number"] {
  width: 70px;
  padding: 2px 4px;
}
.rs-widget-root #region-panel .mode-radio-row {
  display: flex;
  gap: 14px;
  margin-bottom: 6px;
}
.rs-widget-root #region-panel .mode-radio-row label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: normal;
}
.rs-widget-root #region-results {
  font-size: 11px;
  color: var(--text-main);
  white-space: pre-wrap;
  background: var(--bg-input);
  border: 1px solid var(--border-c);
  border-radius: 4px;
  padding: 6px 8px;
  margin-top: 6px;
}
.rs-widget-root .grid-point-marker-info {
  font-size: 10px;
}

/* --- Batch report panel --- */
.rs-widget-root #batch-report-panel .category-group {
  border: 1px solid var(--border-c);
  border-radius: 4px;
  margin-bottom: 6px;
  overflow: hidden;
}
.rs-widget-root #batch-report-panel .category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-panel-alt);
  padding: 4px 8px;
  cursor: pointer;
  font-weight: 700;
  font-size: 12px;
  color: var(--text-main);
}
.rs-widget-root #batch-report-panel .category-header .toggle-icon {
  font-size: 11px;
  color: var(--text-dim);
}
.rs-widget-root #batch-report-panel .category-body {
  max-height: 160px;
  overflow-y: auto;
  padding: 4px 8px;
}
.rs-widget-root #batch-report-panel .category-body.collapsed {
  display: none;
}
.rs-widget-root #batch-report-panel .ies-check-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 2px 0;
}
.rs-widget-root #batch-report-panel .ies-check-row label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.rs-widget-root #batch-report-panel .select-all-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-dim);
  padding: 2px 0 4px 0;
  border-bottom: 1px dashed var(--border-c);
  margin-bottom: 4px;
}
.rs-widget-root #btn-run-batch-report {
  width: 100%;
  padding: 8px 10px;
  font-weight: 700;
  font-size: 14px;
  border: 1px solid var(--accent-strong);
  border-radius: 4px;
  background: var(--accent);
  color: #0c1622;
  cursor: pointer;
  margin: 8px 0;
}
.rs-widget-root #btn-run-batch-report:hover { background: #6fb6ff; }
.rs-widget-root #batch-report-results {
  font-size: 11px;
  color: var(--text-main);
  background: var(--bg-input);
  border: 1px solid var(--border-c);
  border-radius: 4px;
  padding: 6px 8px;
  margin-top: 6px;
  max-height: 220px;
  overflow-y: auto;
}
.rs-widget-root #batch-report-results table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.rs-widget-root #batch-report-results th, .rs-widget-root #batch-report-results td {
  border-bottom: 1px solid var(--border-c);
  padding: 3px 4px;
  text-align: right;
  white-space: nowrap;
  color: var(--text-main);
}
.rs-widget-root #batch-report-results th:first-child, .rs-widget-root #batch-report-results td:first-child {
  text-align: center;
  white-space: nowrap;
}
.rs-widget-root #batch-report-results th:nth-child(2), .rs-widget-root #batch-report-results td:nth-child(2) {
  text-align: left;
}

.rs-widget-root #batch-filter-panel select.filter-op-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  flex: 0 0 34px !important;
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  padding: 1px 0 !important;
  font-size: 11px;
  text-align: center;
  text-align-last: center;
  box-sizing: border-box;
}

/* --- Luminaire list --- */
.rs-widget-root #lamp-list-panel { margin-top: 0; }
.rs-widget-root #lamp-list {
  background: var(--bg-input);
  border: 1px solid var(--border-c) !important;
}

/* ===================================================================
 * 2026-11-05新增（2026-11-05 修正：改為與 web-app/index.html 完全一致的
 * class 名稱，原本這裡的 .lum-type-card-header / .lum-type-color-dot /
 * .lum-type-card-count / .lum-type-card-actions 等皆是跟
 * luminaire-types.js 實際產生的 DOM class 對不上的舊草稿，導致面板跑版、
 * Show Type Color 等元件未能正確顯示）：Luminaire Types 管理面板
 * =================================================================== */
.rs-widget-root #luminaire-types-panel { margin-top: 10px; }
.rs-widget-root .lum-type-card {
  background: var(--bg-input);
  border: 1px solid var(--border-c);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 8px;
}
.rs-widget-root .lum-type-card-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.rs-widget-root .lum-type-collapse-btn {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  font-size: 11px;
  line-height: 1;
  border: 1px solid var(--border-c);
  border-radius: 4px;
  background: var(--bg-panel-alt);
  color: var(--text-main);
  cursor: pointer;
}
.rs-widget-root .lum-type-collapse-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.rs-widget-root .lum-type-name-input {
  flex: 1;
  background: var(--bg-panel-alt);
  color: var(--text-main);
  border: 1px solid var(--border-c);
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 12.5px;
  font-weight: 700;
}
.rs-widget-root .lum-type-color-input {
  flex-shrink: 0;
  width: 28px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--border-c);
  border-radius: 4px;
  background: var(--bg-panel-alt);
  cursor: pointer;
}
.rs-widget-root .lum-type-toggle-row {
  margin-bottom: 4px;
}
.rs-widget-root .lum-type-delete-btn {
  flex-shrink: 0;
  padding: 4px 8px;
  font-size: 11px;
  border: 1px solid var(--border-c);
  border-radius: 4px;
  background: var(--bg-panel-alt);
  color: var(--text-main);
  cursor: pointer;
}
.rs-widget-root .lum-type-delete-btn:hover {
  border-color: #ef4444;
  color: #ef4444;
}
.rs-widget-root .lum-type-model-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 11.5px;
}
.rs-widget-root .lum-type-model-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-dim);
}
.rs-widget-root .lum-type-replace-btn {
  flex-shrink: 0;
  padding: 4px 8px;
  font-size: 11px;
  border: 1px solid var(--border-c);
  border-radius: 4px;
  background: var(--bg-panel-alt);
  color: var(--text-main);
  cursor: pointer;
}
.rs-widget-root .lum-type-replace-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.rs-widget-root .lum-type-field { margin-bottom: 8px; }
.rs-widget-root .lum-type-field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 3px;
}
.rs-widget-root .lum-type-field input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}
.rs-widget-root .lum-type-count-row {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 4px;
}
.rs-widget-root .lum-type-field select {
  width: 100%;
  background: var(--bg-panel-alt);
  color: var(--text-main);
  border: 1px solid var(--border-c);
  border-radius: 4px;
  padding: 5px 6px;
  font-size: 12px;
  box-sizing: border-box;
}
.rs-widget-root .lum-type-field select:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.rs-widget-root .lum-type-card-body {
  padding-top: 2px;
}
.rs-widget-root .lum-type-add-btn {
  width: 100%;
  padding: 8px 10px;
  font-weight: 700;
  font-size: 12.5px;
  border: 1px dashed var(--border-c);
  border-radius: 6px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  margin-top: 4px;
}
.rs-widget-root .lum-type-add-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ===================================================================
 * 2026-11-05新增（2026-11-05 修正：改為與 web-app/index.html 完全一致的
 * class 名稱，原本這裡用 .crosswalk-row / .crosswalk-row-header /
 * .crosswalk-row-body + <table> 樣式，跟 crosswalk-panel.js 實際產生的
 * DOM（.cw-row / .cw-stats / .cw-detail-panel / .cw-detail-row 等純文字
 * 列表排版，並非 table）完全對不上，導致面板跑版）：
 * Crosswalk Vertical Illuminance 面板
 * =================================================================== */
.rs-widget-root #btn-draw-crosswalk {
  width: 100%;
  padding: 8px 10px;
  font-weight: 700;
  font-size: 13px;
  border: 1px solid var(--border-c);
  border-radius: 4px;
  background: var(--bg-input);
  color: var(--text-main);
  cursor: pointer;
}
.rs-widget-root #btn-draw-crosswalk:hover {
  background: var(--bg-hover);
  border-color: var(--accent);
}
.rs-widget-root #btn-draw-crosswalk[data-active="true"] {
  background: var(--accent);
  color: #0c1622;
  border-color: var(--accent-strong);
}
.rs-widget-root #crosswalk-list .cw-row {
  padding: 6px 8px;
  font-size: 12px;
  border-bottom: 1px solid var(--border-c);
}
.rs-widget-root #crosswalk-list .cw-stats {
  color: var(--text-dim);
  white-space: pre-wrap;
  font-size: 11px;
  margin-top: 2px;
}
.rs-widget-root .cw-detail-header {
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 4px;
}
.rs-widget-root .cw-detail-stats {
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.rs-widget-root .cw-detail-list {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border-c);
  border-radius: 4px;
}
.rs-widget-root .cw-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 3px 6px;
  font-size: 12px;
  border-bottom: 1px solid var(--border-c);
}
.rs-widget-root .cw-detail-row:last-child { border-bottom: none; }
.rs-widget-root .cw-detail-id {
  font-weight: 700;
  flex: 1;
  white-space: nowrap;
}
.rs-widget-root .cw-detail-side {
  color: var(--text-dim);
  font-size: 11px;
  width: 40px;
  flex-shrink: 0;
  text-align: center;
}
.rs-widget-root .cw-detail-val {
  font-variant-numeric: tabular-nums;
  width: 70px;
  text-align: right;
  flex-shrink: 0;
  font-weight: 700;
  color: #ef4444;
}
.rs-widget-root #crosswalk-list .cw-detail-panel {
  margin-top: 6px;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--border-c);
  border-radius: 4px;
  background: var(--bg-panel-alt);
}
/* cw-infowindow 是 google.maps.InfoWindow 的內容，容器本身是瀏覽器原生白底，
   沿用舊專案的淺色文字配色，不套用 web-app 深色主題變數（不加 .rs-widget-root
   前綴，因為 InfoWindow 內容是由 Google Maps 附加到 document.body 底下的獨立
   容器，不在 .rs-widget-root 這個 DOM 子樹內，加前綴會導致選不到）。 */
.cw-infowindow {
  font: 13px/1.4 Arial, sans-serif;
  color: #111;
  min-width: 220px;
  max-width: 280px;
}
.cw-infowindow .cw-detail-stats { color: #333; }
.cw-infowindow .cw-detail-list,
.cw-infowindow .cw-detail-row { border-color: #ddd; }
.cw-infowindow .cw-detail-side { color: #666; }

/* --- Collapse/expand whole panel --- */
.rs-widget-root #panel.collapsed {
  width: 0;
  min-width: 0;
  padding: 0;
  border: none;
  box-shadow: none;
  overflow: hidden;
}
.rs-widget-root #panel-toggle-btn {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 1001;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--border-c);
  background: var(--bg-panel);
  color: var(--text-main);
  cursor: pointer;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  transition: left 0.15s;
}
.rs-widget-root #panel-toggle-btn.panel-open {
  left: 418px;
}

/* --- Advanced/debug collapsible section --- */
.rs-widget-root .advanced-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 11.5px;
  color: var(--text-dim);
  padding: 4px 0;
  user-select: none;
}
.rs-widget-root .advanced-toggle:hover { color: var(--accent); }
.rs-widget-root .advanced-toggle .caret {
  display: inline-block;
  transition: transform 0.15s;
}
.rs-widget-root .advanced-toggle.expanded .caret {
  transform: rotate(90deg);
}
.rs-widget-root .advanced-body {
  display: none;
  padding-top: 6px;
}
.rs-widget-root .advanced-body.expanded {
  display: block;
}

/* --- IES luminaire picker wizard modal (ies-picker-modal.js) --- */
.rs-widget-root #ies-picker-overlay {
  display: none;
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  z-index: 2000;
  background: rgba(0,0,0,0.55);
  align-items: center;
  justify-content: center;
}
.rs-widget-root #ies-picker-modal {
  background: var(--bg-panel);
  border: 1px solid var(--border-c);
  border-radius: 8px;
  width: 96%;
  max-width: 96%;
  height: 92%;
  max-height: 92%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  color: var(--text-main);
  overflow: hidden;
}
.rs-widget-root #ies-picker-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-c);
  flex-shrink: 0;
}
.rs-widget-root #ies-picker-modal-header h2 {
  font-size: 18px;
  margin: 0;
  font-weight: 700;
}
.rs-widget-root #ies-picker-close-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
}
.rs-widget-root #ies-picker-close-btn:hover { color: var(--text-main); }
.rs-widget-root #ies-picker-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  display: flex;
  flex-direction: row;
}
.rs-widget-root #ies-picker-body-flex {
  display: flex;
  flex-direction: row;
  width: 100%;
  min-height: 0;
}
.rs-widget-root #ies-picker-category-list {
  flex: 0 0 200px;
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 14px;
  border-right: 1px solid var(--border-c);
  overflow-y: auto;
  background: var(--bg-panel-alt);
}
.rs-widget-root .ies-picker-cat-btn {
  width: 100%;
  padding: 16px 10px;
  font-size: 14px;
  font-weight: 700;
  background: var(--bg-input);
  border: 1px solid var(--border-c);
  border-radius: 6px;
  color: var(--text-main);
  cursor: pointer;
  text-align: center;
}
.rs-widget-root .ies-picker-cat-btn:hover {
  background: var(--bg-hover);
  border-color: var(--accent);
}
.rs-widget-root .ies-picker-cat-btn.active {
  border-color: var(--accent);
  color: #0c1622;
  background: var(--accent);
}
.rs-widget-root #ies-picker-series-grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 18px;
  align-content: stretch;
  align-items: stretch;
  padding: 20px;
  overflow-y: auto;
}
@media (max-width: 900px) {
  .rs-widget-root #ies-picker-series-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.rs-widget-root .ies-picker-series-card {
  background: var(--bg-input);
  border: 1px solid var(--border-c);
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
}
.rs-widget-root .ies-picker-series-img {
  width: 100%;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-panel-alt);
  border-radius: 6px;
  overflow: hidden;
  color: var(--text-dim);
  font-size: 13px;
}
.rs-widget-root .ies-picker-series-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.rs-widget-root .ies-picker-series-title {
  font-weight: 700;
  font-size: 14px;
}
.rs-widget-root .ies-picker-model-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rs-widget-root .ies-picker-model-item {
  border-radius: 4px;
}
.rs-widget-root .ies-picker-model-name-row {
  font-size: 13px;
  padding: 6px 9px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-dim);
}
.rs-widget-root .ies-picker-model-name-row:hover {
  background: var(--bg-hover);
  color: var(--accent);
}
.rs-widget-root .ies-picker-model-name-row.active {
  background: var(--bg-hover);
  color: var(--accent);
  font-weight: 700;
}
.rs-widget-root .ies-picker-loading, .rs-widget-root .ies-picker-error, .rs-widget-root .ies-picker-empty {
  font-size: 12px;
  color: var(--text-dim);
  padding: 10px 0;
}
.rs-widget-root .ies-picker-error { color: #ff6b6b; }
.rs-widget-root #ies-picker-step3-model-label {
  font-weight: 700;
  font-size: 13px;
}
.rs-widget-root .ies-picker-step3-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rs-widget-root .ies-picker-step3-form label {
  font-size: 11.5px;
  color: var(--text-dim);
}
.rs-widget-root .ies-picker-select-row {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.rs-widget-root .ies-picker-select-row .ies-picker-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 120px;
  min-width: 100px;
}
.rs-widget-root .ies-picker-step3-form select {
  width: 100%;
  background: var(--bg-input);
  color: var(--text-main);
  border: 1px solid var(--border-c);
  border-radius: 4px;
  padding: 5px 6px;
  box-sizing: border-box;
}
.rs-widget-root .ies-picker-step3-form select:focus {
  outline: none;
  border-color: var(--accent);
}
.rs-widget-root .ies-picker-range-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rs-widget-root .ies-picker-range-row .ies-picker-range-label-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rs-widget-root .ies-picker-range-row .ies-picker-unlimited-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
}
.rs-widget-root .ies-picker-range-row .ies-picker-range-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rs-widget-root .ies-picker-range-row input[type="range"] {
  flex: 1 1 auto;
  accent-color: var(--accent);
}
.rs-widget-root .ies-picker-range-row input[type="range"]:disabled {
  opacity: 0.4;
}
.rs-widget-root .ies-picker-step3-form input[type="number"] {
  width: 90px;
  flex-shrink: 0;
  background: var(--bg-input);
  color: var(--text-main);
  border: 1px solid var(--border-c);
  border-radius: 4px;
  padding: 4px 6px;
  box-sizing: border-box;
}
.rs-widget-root .ies-picker-step3-form input[type="number"]:disabled {
  opacity: 0.4;
}
.rs-widget-root .ies-picker-step3-form .ies-picker-search-btn {
  width: 100%;
  padding: 9px 10px;
  font-weight: 700;
  font-size: 13.5px;
  border: 1px solid var(--accent-strong);
  border-radius: 4px;
  background: var(--accent);
  color: #0c1622;
  cursor: pointer;
}
.rs-widget-root .ies-picker-step3-form .ies-picker-search-btn:hover {
  background: #6fb6ff;
}
.rs-widget-root .ies-picker-nearest-results {
  margin-top: 8px;
}
.rs-widget-root .ies-picker-results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.rs-widget-root .ies-picker-results-table th, .rs-widget-root .ies-picker-results-table td {
  border-bottom: 1px solid var(--border-c);
  padding: 5px 6px;
  text-align: center;
  color: var(--text-main);
}
.rs-widget-root .ies-picker-results-table tbody tr {
  cursor: pointer;
}
.rs-widget-root .ies-picker-results-table tbody tr:hover {
  background: var(--bg-hover);
  color: var(--accent);
}
.rs-widget-root #ies-picker-modal-footer {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--border-c);
  flex-shrink: 0;
}

/* --- Lumen/Wattage search small modal (overlaid on top of the large modal) --- */
.rs-widget-root #ies-picker-lumen-overlay {
  display: none;
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  z-index: 2100;
  background: rgba(0,0,0,0.6);
  align-items: center;
  justify-content: center;
}
.rs-widget-root #ies-picker-lumen-modal {
  background: var(--bg-panel);
  border: 1px solid var(--border-c);
  border-radius: 8px;
  width: 500px;
  max-width: 92%;
  max-height: 80%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0,0,0,0.7);
  color: var(--text-main);
  overflow: hidden;
}
.rs-widget-root #ies-picker-lumen-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-c);
  flex-shrink: 0;
}
.rs-widget-root #ies-picker-lumen-modal-title {
  font-size: 15px;
  font-weight: 700;
}
.rs-widget-root #ies-picker-lumen-close-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
}
.rs-widget-root #ies-picker-lumen-close-btn:hover { color: var(--text-main); }
.rs-widget-root #ies-picker-lumen-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
}

/* --- My Projects panel (帳號登入 + 專案存檔功能，仿 IES Picker Modal 兩層彈窗結構) --- */
.rs-widget-root #project-panel-overlay {
  display: none;
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  z-index: 2200;
  background: rgba(0,0,0,0.55);
  align-items: center;
  justify-content: center;
}
.rs-widget-root #project-panel-modal {
  background: var(--bg-panel);
  border: 1px solid var(--border-c);
  border-radius: 8px;
  width: 480px;
  max-width: 92%;
  max-height: 80%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0,0,0,0.7);
  color: var(--text-main);
  overflow: hidden;
}
.rs-widget-root #project-panel-list .project-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--border-c);
  border-radius: 4px;
  margin-bottom: 6px;
  background: var(--bg-input);
}
.rs-widget-root #project-panel-list .project-row .project-name {
  flex: 1;
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rs-widget-root #project-panel-list .project-row button {
  font-size: 11px;
  padding: 3px 8px;
  flex-shrink: 0;
}
.rs-widget-root #project-panel-list .project-empty-hint {
  font-size: 12px;
  color: var(--text-dim);
  padding: 10px 0;
}