/* ================================================================
   email-templates.css — Email template editor panel (extracted from index.html Block 3)
   ================================================================ */

.et-wrap { display:flex; gap:16px; align-items:flex-start; }
.et-list-panel { width:260px; flex-shrink:0; }
.et-list-card { background:#fff; border-radius:10px; box-shadow:0 1px 4px rgba(0,0,0,0.08); overflow:hidden; }
.et-list-header { padding:14px 16px; border-bottom:1px solid #e8ecf0; display:flex; justify-content:space-between; align-items:center; }
.et-list-header h3 { margin:0; font-size:14px; font-weight:600; color:#1e293b !important; }
.et-list-header .et-count { font-size:12px; color:#94a3b8; }
#emailTemplateList { }
.et-list-item { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 16px; border-bottom:1px solid #f1f5f9; cursor:pointer; transition:background 0.15s; }
.et-list-item:last-child { border-bottom:none; }
.et-list-item:hover { background:#f8fafc; }
.et-list-item.active { background:#f0eeff; border-left:3px solid #8458b3; }
.et-list-item .et-item-name { font-size:13px; font-weight:500; color:#334155; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.et-list-item .et-item-key { font-size:11px; color:#94a3b8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.et-list-item .et-item-row { display:flex; align-items:flex-start; gap:8px; width:100%; }
.et-list-item .et-item-info { flex:1; min-width:0; }
.et-badge { display:inline-flex; align-items:center; padding:2px 10px; border-radius:20px; font-size:11px; font-weight:600; letter-spacing:0.3px; flex-shrink:0; }
.et-badge.on { background:#d1fae5; color:#059669; border:1px solid #6ee7b7; }
.et-badge.off { background:#fee2e2; color:#dc2626; border:1px solid #fca5a5; }
.et-editor-panel { flex:1; min-width:0; }
.et-editor-card { background:#fff; border-radius:10px; box-shadow:0 1px 4px rgba(0,0,0,0.08); overflow:hidden; }
.et-editor-head { padding:16px 20px; border-bottom:1px solid #e8ecf0; display:flex; justify-content:space-between; align-items:center; }
.et-editor-head .et-title { font-size:14px; font-weight:600; color:#1e293b !important; }
.et-editor-head .et-desc { font-size:12px; color:#94a3b8; margin-top:2px; }
.et-editor-head-btns { display:flex; align-items:center; gap:10px; }
.et-editor-body { padding:16px 20px; }
.et-editor-body .ql-editor { padding:0; line-height:1.7; color:#1e293b !important; }
.et-editor-body .ql-editor p { margin:0 0 10px !important; }
.et-editor-body .ql-editor p:last-child { margin-bottom:0 !important; }
.et-editor-body .ql-editor a { display:inline-block; padding:6px 16px !important; background:#8458b3 !important; color:#fff !important; border-radius:6px !important; text-decoration:none !important; font-size:13px !important; margin:8px 0 !important; }
.et-editor-body .ql-editor a:hover { background:#6b46a0; }
.et-editor-body .ql-editor blockquote { border-left:3px solid #8458b3; padding-left:12px; margin:8px 0; color:#64748b; }
.et-form-row { display:flex; gap:12px; margin-bottom:14px; }
.et-form-row > .et-form-group { flex:1; }
.et-form-group { display:flex; flex-direction:column; gap:5px; }
.et-form-group label { font-size:12px; font-weight:500; color:#475569; }
.et-form-group input, .et-form-group select, .et-form-group textarea { border:1px solid #d1d9e6; border-radius:7px; padding:8px 10px; font-size:13px; color:#1e293b; background:#fff; outline:none; transition:border-color 0.15s; }
.et-form-group input:focus, .et-form-group select:focus { border-color:#8458b3; }
.et-form-group input[readonly] { background:#f8fafc; color:#94a3b8; cursor:not-allowed; }
.et-form-group input[type="checkbox"] { width:16px; height:16px; cursor:pointer; }
.et-section-block { border-top:1px solid #f1f5f9; padding:14px 20px; }
.et-section-block:first-child { border-top:none; }
.et-section-label { font-size:12px; font-weight:600; color:#475569; margin-bottom:8px; }
.et-var-btns { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.et-var-btn { padding:3px 10px; background:#f1f5f9; border:1px solid #e2e8f0; border-radius:20px; font-size:11px; color:#64748b; cursor:pointer; }
.et-var-btn:hover { background:#e2e8f0; color:#334155; }
.et-test-panel { background:#f0fdf4; border-top:1px solid #bbf7d0; padding:14px 20px; }
.et-test-row { display:flex; gap:10px; align-items:center; margin-bottom:8px; }
.et-test-row input { border:1px solid #86efac; border-radius:7px; padding:7px 10px; font-size:13px; width:260px; }
.et-test-result { font-size:12px; color:#166534; margin-top:6px; }
.et-empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 20px; color:#94a3b8; text-align:center; }
.et-empty-state .et-empty-icon { font-size:36px; margin-bottom:10px; }
.et-empty-state p { margin:0; font-size:14px; }

/* 發送紀錄 */
.et-logs-wrap { margin-top:16px; }
.et-logs-card { background:#fff; border-radius:10px; box-shadow:0 1px 4px rgba(0,0,0,0.08); overflow:hidden; }
.et-logs-head { padding:14px 20px; border-bottom:1px solid #e8ecf0; display:flex; justify-content:space-between; align-items:center; }
.et-logs-head h3 { margin:0; font-size:14px; font-weight:600; color:#1e293b !important; }
.et-logs-filters { display:flex; gap:8px; align-items:center; }
.et-logs-filters input, .et-logs-filters select { border:1px solid #d1d9e6; border-radius:7px; padding:6px 10px; font-size:12px; color:#1e293b; background:#fff; outline:none; }
.et-logs-filters input:focus, .et-logs-filters select:focus { border-color:#8458b3; }
.et-logs-table-wrap { overflow-x:auto; }
.et-logs-table { width:100%; border-collapse:collapse; }
.et-logs-table th { text-align:left; padding:10px 16px; font-size:11px; font-weight:600; color:#94a3b8; text-transform:uppercase; letter-spacing:0.5px; background:#f8fafc; border-bottom:1px solid #e8ecf0; white-space:nowrap; }
.et-logs-table td { padding:10px 16px; font-size:13px; color:#334155; border-bottom:1px solid #f1f5f9; }
.et-logs-table tr:last-child td { border-bottom:none; }
.et-logs-table tr:hover td { background:#f8fafc; }
.et-status-sent { color:#059669; font-weight:500; }
.et-status-failed { color:#dc2626; font-weight:500; }
.et-pagination { display:flex; justify-content:center; gap:4px; padding:12px 16px; border-top:1px solid #f1f5f9; }
.et-page-btn { padding:4px 10px; border:1px solid #e2e8f0; border-radius:5px; font-size:12px; color:#64748b; cursor:pointer; background:#fff; }
.et-page-btn:hover { background:#f1f5f9; }
.et-page-btn.active { background:#8458b3; color:#fff; border-color:#8458b3; }
.et-page-btn:disabled { opacity:0.5; cursor:not-allowed; }

/* Quill editor container override */
#etQuillEditor { border: 1px solid #d1d9e6 !important; border-radius: 8px !important; background: #fff !important; }
#etQuillEditor .ql-toolbar { border: none !important; border-bottom: 1px solid #f1f5f9 !important; padding: 8px 12px !important; background: #f8fafc; }
#etQuillEditor .ql-container { border: none !important; font-size: 14px !important; }
#etQuillEditor .ql-editor { padding: 12px 16px !important; line-height: 1.7 !important; color: #1e293b !important; }
#etQuillEditor .ql-editor p { margin: 0 0 10px !important; }
#etQuillEditor .ql-editor p:last-child { margin-bottom: 0 !important; }
#etQuillEditor .ql-editor a { display: inline-block !important; padding: 6px 16px !important; background: #8458b3 !important; color: #fff !important; border-radius: 6px !important; text-decoration: none !important; font-size: 13px !important; margin: 4px 0 !important; }
#etQuillEditor .ql-editor a:hover { background: #6b46a0 !important; }
#etQuillEditor .ql-editor blockquote { border-left: 3px solid #8458b3; padding-left: 12px; margin: 8px 0; color: #64748b; }
#etQuillEditor .ql-editor ol, #etQuillEditor .ql-editor ul { padding-left: 20px; margin: 0 0 10px; }
#etQuillEditor .ql-editor li { margin-bottom: 4px; }