/**
 * style.css — 編輯器介面樣式
 * KISA-DOC 網站生成器
 */

/* ==================== CSS 變數 ==================== */
:root {
  --bg:             #14141f;
  --bg-elevated:    #1a1a28;
  --panel-bg:       #1e1e2e;
  --panel-bg-2:     #232336;
  --border:         #2d2d44;
  --border-strong:  #3a3a55;
  --text:           #e4e4ec;
  --text-secondary: #8b8ba7;
  --text-muted:     #6b6b85;
  --accent:         #7c8fff;
  --accent-hover:   #6b7fff;
  --accent-soft:    rgba(124,143,255,0.12);
  --danger:         #ef4f63;
  --danger-soft:    rgba(239,79,99,0.12);
  --success:        #4ade80;
  --warning:        #fbbf24;
  --input-bg:       #16161f;
  --input-bg-focus: #1a1a28;
  --card-bg:        #262638;
  --hover-bg:       #2c2c42;
  --shadow-sm:      0 1px 2px rgba(0,0,0,0.2);
  --shadow:         0 4px 14px rgba(0,0,0,0.35);
  --shadow-lg:      0 12px 32px rgba(0,0,0,0.5);
  --radius:         10px;
  --radius-sm:      6px;
  --radius-xs:      4px;
  --transition:     all 0.16s cubic-bezier(0.4,0,0.2,1);
  --font-mono:      'SF Mono','Cascadia Code','Consolas',monospace;
  --font-sans:      -apple-system,BlinkMacSystemFont,'Segoe UI','PingFang TC','Microsoft JhengHei',sans-serif;
}

/* ==================== 重置 ==================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }

/* ==================== 捲軸 ==================== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #3a3a55; border-radius: 5px; border: 2px solid var(--panel-bg); }
::-webkit-scrollbar-thumb:hover { background: #4a4a6a; }

/* ==================== 基底 ==================== */
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  height: 100vh; width: 100vw;
  overflow: hidden;
  display: flex;
  user-select: none;
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
}

/* ==================== 左側面板 ==================== */
#left-panel {
  width: 288px; min-width: 288px;
  background: var(--panel-bg);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  height: 100vh; z-index: 10; overflow: hidden;
}
#left-panel .panel-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 700; font-size: 16px;
  background: linear-gradient(135deg,#1c1c2c 0%,#22223a 100%);
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0; letter-spacing: 0.2px;
}
#left-panel .panel-header .logo-icon {
  width: 30px; height: 30px;
  background: linear-gradient(135deg,var(--accent) 0%,#a78bfa 100%);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: #fff;
  box-shadow: 0 4px 12px rgba(124,143,255,0.35);
}
#left-panel .scroll-area {
  flex: 1; overflow-y: auto;
  padding: 10px 10px 20px;
  display: flex; flex-direction: column; gap: 4px;
}

/* ==================== Section 標題 ==================== */
.section-title {
  font-size: 12px; text-transform: uppercase;
  letter-spacing: 1.4px; color: var(--text-muted);
  padding: 14px 8px 6px; font-weight: 700;
  display: flex; align-items: center; gap: 6px;
}

/* ==================== 按鈕 ==================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--card-bg); color: var(--text);
  cursor: pointer; font-size: 12.5px; font-weight: 500;
  font-family: var(--font-sans);
  transition: var(--transition); white-space: nowrap;
}
.btn:hover { background: var(--hover-bg); border-color: var(--border-strong); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.accent {
  background: linear-gradient(135deg,var(--accent) 0%,#6b7fff 100%);
  border-color: var(--accent); color: #fff; font-weight: 600;
  box-shadow: 0 4px 14px rgba(124,143,255,0.35);
}
.btn.accent:hover {
  background: linear-gradient(135deg,var(--accent-hover) 0%,#5a6fff 100%);
  box-shadow: 0 6px 18px rgba(124,143,255,0.45);
}
.btn.danger { border-color: rgba(239,79,99,0.4); color: var(--danger); background: var(--danger-soft); }
.btn.danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-secondary); }
.btn.ghost:hover { background: var(--hover-bg); color: var(--text); }
.btn.sm { padding: 5px 10px; font-size: 11px; }
.btn.xs { padding: 3px 8px; font-size: 10px; border-radius: var(--radius-xs); }
.btn.icon-only { padding: 3px 6px; min-width: 24px; }
.btn-row { display: flex; gap: 6px; flex-wrap: wrap; }

/* ==================== 頁面列表 ==================== */
#page-list { display: flex; flex-direction: column; gap: 3px; }
#page-list .page-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; border-radius: var(--radius-sm);
  cursor: pointer; background: var(--card-bg);
  border: 1px solid transparent; transition: var(--transition);
  gap: 6px; font-size: 12.5px;
}
#page-list .page-item:hover { background: var(--hover-bg); }
#page-list .page-item.active {
  border-color: var(--accent);
  background: linear-gradient(135deg,rgba(124,143,255,0.15) 0%,rgba(124,143,255,0.08) 100%);
  box-shadow: 0 0 0 1px rgba(124,143,255,0.2);
}
#page-list .page-item .page-name {
  flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
  cursor: pointer; font-weight: 500;
}
#page-list .page-item .page-actions {
  display: flex; gap: 2px; flex-shrink: 0;
  opacity: 0.65; transition: var(--transition);
}
#page-list .page-item:hover .page-actions { opacity: 1; }

/* ==================== 元件庫 ==================== */
#component-library { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 2px 0; }
#component-library .comp-btn {
  padding: 10px; font-size: 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--card-bg); color: var(--text);
  cursor: pointer; transition: var(--transition);
  text-align: left; font-weight: 500;
}
#component-library .comp-btn:hover {
  background: var(--accent-soft); border-color: var(--accent);
  color: #fff; transform: translateY(-1px);
}

/* ==================== 選單編輯器 ==================== */
#menu-editor { display: flex; flex-direction: column; gap: 2px; }
#menu-editor .menu-item-row {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 2px; font-size: 12px;
  border-radius: var(--radius-xs); flex-wrap: nowrap; overflow: hidden;
}
#menu-editor .menu-item-row:hover { background: rgba(124,143,255,0.06); }
#menu-editor .menu-item-row input[type="text"] {
  flex: 1; min-width: 40px; max-width: 72px;
  padding: 5px 7px; border-radius: var(--radius-xs);
  border: 1px solid var(--border); background: var(--input-bg);
  color: var(--text); font-size: 11px;
}
#menu-editor .menu-item-row select {
  padding: 4px 6px; border-radius: var(--radius-xs);
  border: 1px solid var(--border); background: var(--input-bg);
  color: var(--text); font-size: 11px; max-width: 78px;
}
#menu-editor .menu-item-row input[type="color"] {
  width: 22px; height: 22px; padding: 0; border: none; margin: 0 2px;
  flex-shrink: 0; border-radius: var(--radius-xs); cursor: pointer;
}
#menu-editor .menu-children {
  margin-left: 14px; border-left: 2px solid var(--border-strong);
  padding-left: 8px; display: flex; flex-direction: column; gap: 2px;
}

/* ==================== 預覽區 ==================== */
#preview-area { flex: 1; display: flex; flex-direction: column; background: #2a2a3a; min-width: 300px; }
#preview-toolbar {
  padding: 10px 16px;
  background: linear-gradient(180deg,#252538 0%,#1f1f30 100%);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0; font-size: 12px; color: var(--text-secondary);
}
#preview-toolbar .page-indicator {
  font-weight: 600; color: var(--text); font-size: 13px;
  display: flex; align-items: center; gap: 6px;
}
#preview-toolbar .page-indicator::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--success); box-shadow: 0 0 8px rgba(74,222,128,0.6);
}
#preview-frame-wrapper {
  flex: 1; overflow: auto; padding: 24px;
  display: flex; justify-content: center; align-items: flex-start;
}
#preview-frame {
  width: 100%; max-width: 900px; background: #fff;
  box-shadow: var(--shadow-lg); border-radius: 6px;
  overflow: visible; position: relative;
}

/* 元件選取樣式 */
#preview-frame .preview-component {
  position: relative; cursor: pointer;
  transition: outline 0.12s; outline: 2px solid transparent;
}
#preview-frame .preview-component:hover { outline: 2px dashed rgba(124,143,255,0.7); }
#preview-frame .preview-component.selected {
  outline: 2px solid var(--accent) !important;
  z-index: 5; box-shadow: 0 0 0 6px rgba(124,143,255,0.22);
}
#preview-frame .comp-label {
  position: absolute; top: -26px; left: 0;
  font-size: 11px; background: var(--accent); color: #fff;
  padding: 4px 10px; border-radius: 6px;
  pointer-events: none; opacity: 0; transition: opacity 0.15s;
  z-index: 10; white-space: nowrap; font-weight: 600;
  box-shadow: 0 4px 12px rgba(124,143,255,0.4);
}
#preview-frame .preview-component.selected .comp-label,
#preview-frame .preview-component:hover .comp-label { opacity: 1; }

/* ==================== 右側面板 ==================== */
#right-panel {
  width: 340px; min-width: 340px;
  background: var(--panel-bg); border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  height: 100vh; z-index: 10; overflow: hidden;
}
#right-panel .panel-header {
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  font-weight: 700; font-size: 16px;
  background: linear-gradient(135deg,#1c1c2c 0%,#22223a 100%);
  flex-shrink: 0; display: flex; align-items: center; gap: 8px;
  letter-spacing: 0.2px;
}
#right-panel .scroll-area {
  flex: 1; overflow-y: auto;
  padding: 12px 12px 24px;
  display: flex; flex-direction: column; gap: 8px;
}
#right-panel .empty-state {
  text-align: center; color: var(--text-muted);
  padding: 60px 20px; font-size: 13px; line-height: 1.7;
}
#right-panel .empty-state .empty-icon {
  font-size: 40px; display: block; margin-bottom: 12px; opacity: 0.5;
}

/* ==================== 屬性編輯器 ==================== */
.props-header {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px;
  background: linear-gradient(135deg,rgba(124,143,255,0.16) 0%,rgba(124,143,255,0.06) 100%);
  border: 1px solid rgba(124,143,255,0.3);
  border-radius: var(--radius); margin-bottom: 4px;
}
.props-header .comp-type-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: #fff; }

.prop-section { border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel-bg-2); overflow: hidden; transition: var(--transition); }
.prop-section:hover { border-color: var(--border-strong); }
.prop-section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; cursor: pointer; user-select: none;
  font-size: 14px; font-weight: 600; color: var(--text);
  letter-spacing: 0.3px; transition: var(--transition);
}
.prop-section-header:hover { background: var(--hover-bg); }
.prop-section-header .ps-title { display: flex; align-items: center; gap: 8px; }
.prop-section-header .ps-icon { font-size: 16px; opacity: 0.9; }
.prop-section-header .ps-chevron { font-size: 10px; color: var(--text-muted); transition: transform 0.2s; }
.prop-section.collapsed .ps-chevron { transform: rotate(-90deg); }
.prop-section-body { padding: 4px 12px 12px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--border); }
.prop-section.collapsed .prop-section-body { display: none; }

.prop-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.prop-group { display: flex; flex-direction: column; gap: 5px; }
.prop-group label { font-size: 12px; font-weight: 600; color: var(--text-secondary); letter-spacing: 0.3px; text-transform: uppercase; }
.prop-group input, .prop-group textarea, .prop-group select {
  padding: 9px 11px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--input-bg);
  color: var(--text); font-size: 13.5px; font-family: var(--font-sans);
  resize: vertical; transition: var(--transition);
}
.prop-group input:focus, .prop-group textarea:focus, .prop-group select:focus {
  outline: none; border-color: var(--accent);
  background: var(--input-bg-focus); box-shadow: 0 0 0 3px rgba(124,143,255,0.15);
}
.prop-group textarea { min-height: 64px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; }
.prop-group input[type="color"] { padding: 3px; height: 34px; cursor: pointer; min-width: 46px; max-width: 46px; border-radius: var(--radius-sm); }
.prop-group .img-upload-row { display: flex; gap: 6px; align-items: center; }
.prop-group .img-upload-row input[type="text"] { flex: 1; }

.color-row { display: flex; gap: 6px; align-items: center; }
.color-row input[type="text"] { flex: 1; font-family: var(--font-mono); font-size: 11.5px; }

.item-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; background: var(--input-bg); display: flex; flex-direction: column; gap: 6px; }
.item-card-head { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--text-secondary); font-weight: 600; }
.sub-group-title { font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing: 1px; text-transform: uppercase; margin-top: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }

/* ==================== 顏色清除按鈕 ==================== */
.color-clear-btn {
  background: transparent; border: none; color: var(--text-muted);
  cursor: pointer; font-size: 13px; padding: 4px 6px; line-height: 1;
  border-radius: var(--radius-xs); transition: var(--transition);
}
.color-clear-btn:hover { color: var(--danger); background: var(--danger-soft); }

/* ==================== 切換開關 ==================== */
.toggle-switch { position: relative; display: inline-block; width: 34px; height: 20px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #4a4a66; transition: 0.3s; border-radius: 20px; }
.toggle-slider:before { position: absolute; content: ''; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: white; transition: 0.3s; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.toggle-switch input:checked + .toggle-slider { background-color: var(--accent); }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(14px); }
.toggle-row { display: flex; align-items: center; gap: 10px; }
.toggle-label { font-size: 11px; color: var(--text-secondary); line-height: 1.3; }

/* ==================== 範本選擇 ==================== */
#template-select {
  padding: 8px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--input-bg);
  color: var(--text); font-size: 13px; width: 100%; cursor: pointer;
}
#template-select option { background: var(--panel-bg); color: var(--text); }

/* ==================== 匯出設定 ==================== */
.export-options { display: flex; gap: 6px; flex-wrap: wrap; }
.export-options .btn { flex: 1; }
.export-settings-group { padding: 0 8px 12px; display: flex; flex-direction: column; gap: 6px; }
.export-settings-group .prop-group { margin-bottom: 0; }

/* ==================== Toast ==================== */
#toast {
  position: fixed; bottom: 28px; right: 28px; z-index: 999;
  background: #262638; color: #fff;
  padding: 12px 20px; border-radius: var(--radius);
  font-size: 13px; font-weight: 500;
  opacity: 0; pointer-events: none;
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
  box-shadow: var(--shadow-lg); border: 1px solid var(--border-strong);
  transform: translateY(8px);
}
#toast.show { opacity: 1; transform: translateY(0); }

/* ==================== 預覽區內元件共用 ==================== */
.footer-three-col { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; }
.footer-three-col > div { flex: 1; min-width: 200px; }
.list-item-row { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid #eee; }
.list-item-date { font-weight: 600; min-width: 90px; }
.list-item-content { flex: 1; }
.video-container { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 6px; overflow: hidden; }
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.youtube-two-col { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.youtube-two-col > div:first-child { flex: 1 1 60%; min-width: 300px; }
.youtube-two-col > div:last-child { flex: 1 1 35%; min-width: 250px; padding: 10px; }
.split-scroll-container { display: flex; gap: 0; }
.split-left { flex: 0 0 auto; position: sticky; top: 0; height: 100vh; overflow: hidden; }
.split-right { flex: 1; overflow-y: auto; max-height: 100vh; }
.product-card { border: 1px solid #ddd; border-radius: 8px; overflow: hidden; background: #fff; }

/* ==================== 橫向手機 RWD ==================== */
@media screen and (orientation: landscape) and (max-width: 900px) {
  #left-panel  { width: 220px; min-width: 220px; }
  #right-panel { width: 280px; min-width: 280px; }
  #preview-frame-wrapper { padding: 12px; }
  #preview-frame { max-width: 100%; }
  .prop-grid-2 { grid-template-columns: 1fr 1fr; }
  #component-library { grid-template-columns: 1fr 1fr; }
}
@media screen and (orientation: landscape) and (max-width: 700px) {
  #left-panel  { width: 180px; min-width: 180px; }
  #right-panel { width: 220px; min-width: 220px; }
  #left-panel .panel-header, #right-panel .panel-header { font-size: 13px; padding: 10px 12px; }
  #preview-toolbar { padding: 6px 10px; flex-wrap: wrap; gap: 4px; }
  #preview-toolbar .page-indicator { font-size: 11px; }
  .btn { font-size: 10px; padding: 4px 8px; }
  .btn.sm { font-size: 9px; padding: 3px 6px; }
  .prop-group input, .prop-group textarea, .prop-group select { font-size: 11px; padding: 5px 7px; }
  .prop-section-header { font-size: 12px; padding: 8px 10px; }
  #preview-frame-wrapper { padding: 8px; }
}
@media screen and (orientation: landscape) and (max-width: 550px) {
  #left-panel  { width: 140px; min-width: 140px; }
  #right-panel { width: 180px; min-width: 180px; }
  #left-panel .panel-header .logo-icon { width: 22px; height: 22px; font-size: 11px; }
  #left-panel .panel-header { font-size: 11px; padding: 6px 8px; }
  #right-panel .panel-header { font-size: 11px; padding: 6px 8px; }
  #component-library .comp-btn { font-size: 10px; padding: 6px 4px; }
  .section-title { font-size: 10px; padding: 8px 4px 4px; }
  #preview-toolbar .btn { font-size: 8px; padding: 2px 5px; }
  .prop-grid-2 { grid-template-columns: 1fr; }
  #component-library { grid-template-columns: 1fr 1fr; }
}