/* -*- coding: utf-8 -*- */
/* 意見回饋 / 通知中心 全域 widget 樣式（主色對齊系統綠 #059669） */

:root {
  --fb-accent: #059669;
  --fb-accent-dark: #047857;
  --fb-ink: #0f172a;
  --fb-body: #475569;
  --fb-muted: #94a3b8;
  --fb-line: #e2e8f0;
  --fb-bg: #f8fafc;
}

/* ---- 導覽列圖示按鈕 ---- */
.nav-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: none;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  color: var(--fb-ink);
  transition: background .15s ease;
}
.nav-icon-btn:hover { background: rgba(5, 150, 105, .1); color: var(--fb-accent); }
.nav-icon-btn.active { background: rgba(5, 150, 105, .15); color: var(--fb-accent); }
.nav-icon-btn svg { width: 20px; height: 20px; }

/* 限定鈴鐺按鈕內，避免污染後台側邊欄同名 .nav-badge */
.nav-icon-btn .nav-badge {
  position: absolute;
  top: -1px; right: -1px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  box-sizing: border-box;
  background: #ff3b30;            /* iOS 系統紅 */
  color: #fff;
  font-size: 11px; line-height: 14px; font-weight: 700;
  border-radius: 9px; text-align: center;
  border: 2px solid #fff;        /* 白色外環，iOS 風 */
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

/* ---- 共用：遮罩與面板 ---- */
.fb-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, .45);
  display: none; align-items: center; justify-content: center;
  z-index: 2000; padding: 16px;
}
.fb-overlay.active { display: flex; }

.fb-modal {
  background: #fff; border-radius: 16px;
  width: 100%; max-width: 600px;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  animation: fbPop .18s ease;
}
/* 細緻滾動條（詳情框 / 面板）*/
.fb-modal, .fb-tab-body { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
.fb-modal::-webkit-scrollbar, .fb-tab-body::-webkit-scrollbar { width: 8px; }
.fb-modal::-webkit-scrollbar-track, .fb-tab-body::-webkit-scrollbar-track { background: transparent; }
.fb-modal::-webkit-scrollbar-thumb, .fb-tab-body::-webkit-scrollbar-thumb {
  background: #cbd5e1; border-radius: 4px; border: 2px solid transparent; background-clip: content-box;
}
.fb-modal::-webkit-scrollbar-thumb:hover, .fb-tab-body::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: content-box; }
@keyframes fbPop { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.fb-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 2px solid var(--fb-accent);
}
.fb-modal-head h3 { margin: 0; font-size: 17px; color: var(--fb-ink); }
.fb-close {
  border: none; background: transparent; font-size: 22px;
  color: var(--fb-muted); cursor: pointer; line-height: 1;
}
.fb-modal-body { padding: 22px; }

/* ---- 表單 ---- */
.fb-field { margin-bottom: 16px; }
.fb-field label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--fb-body); margin-bottom: 6px;
}
.fb-field .req { color: #ef4444; }
.fb-input, .fb-textarea, .fb-select {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px; border: 1px solid var(--fb-line);
  border-radius: 8px; font-size: 14px; color: var(--fb-ink);
  font-family: inherit;
}
.fb-input:focus, .fb-textarea:focus, .fb-select:focus {
  outline: none; border-color: var(--fb-accent);
  box-shadow: 0 0 0 3px rgba(5,150,105,.12);
}
.fb-textarea { min-height: 110px; resize: vertical; }

.fb-type-group { display: flex; gap: 10px; }
.fb-type-opt {
  flex: 1; text-align: center; padding: 10px;
  border: 1px solid var(--fb-line); border-radius: 8px;
  cursor: pointer; font-size: 14px; color: var(--fb-body);
  transition: all .15s ease;
}
.fb-type-opt.active {
  border-color: var(--fb-accent); background: rgba(5,150,105,.08);
  color: var(--fb-accent-dark); font-weight: 600;
}

.fb-file-list { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.fb-file-item {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: var(--fb-body);
  background: var(--fb-bg); padding: 6px 10px; border-radius: 6px;
}
.fb-file-item button { border: none; background: none; color: #ef4444; cursor: pointer; font-size: 14px; }
.fb-hint { font-size: 11px; color: var(--fb-muted); margin-top: 4px; }

.fb-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.fb-btn {
  padding: 10px 22px; border-radius: 8px; font-size: 14px;
  font-weight: 600; cursor: pointer; border: 1px solid transparent;
}
.fb-btn-primary { background: var(--fb-accent); color: #fff; }
.fb-btn-primary:hover { background: var(--fb-accent-dark); }
.fb-btn-primary:disabled { opacity: .6; cursor: not-allowed; }
.fb-btn-ghost { background: #fff; border-color: var(--fb-line); color: var(--fb-body); }

/* ---- 通知鈴鐺下拉 ---- */
.fb-bell-panel {
  position: fixed; top: 52px; right: 16px;
  width: 400px; max-height: min(80vh, 520px);
  background: #fff; border: 1px solid var(--fb-line);
  border-radius: 14px; box-shadow: 0 16px 48px rgba(0,0,0,.18);
  display: none; z-index: 2001; flex-direction: column;
}
.fb-bell-panel.active { display: flex; }
/* 指向鈴鐺按鈕的小三角（視覺指明由按鈕觸發） */
.fb-bell-panel::before {
  content: ''; position: absolute; top: -8px; left: var(--arrow-left, 50%);
  width: 14px; height: 14px; background: #fff;
  border-left: 1px solid var(--fb-line); border-top: 1px solid var(--fb-line);
  transform: rotate(45deg);
}
.fb-tabs { display: flex; border-bottom: 1px solid var(--fb-line); border-radius: 14px 14px 0 0; }
.fb-tab {
  flex: 1; padding: 12px; text-align: center; cursor: pointer;
  font-size: 13px; color: var(--fb-muted); font-weight: 600;
  border-bottom: 2px solid transparent;
}
.fb-tab.active { color: var(--fb-accent-dark); border-bottom-color: var(--fb-accent); }
.fb-tab .fb-tab-count {
  display: inline-block; margin-left: 4px; min-width: 16px;
  padding: 0 4px; background: #ef4444; color: #fff;
  font-size: 10px; border-radius: 8px;
}
.fb-tab-body { padding: 8px; overflow-y: auto; flex: 1; min-height: 0; }
.fb-notif {
  position: relative; display: block;
  padding: 10px 28px 10px 12px; border-radius: 8px;
  text-decoration: none; color: var(--fb-ink); cursor: pointer;
}
.fb-notif:hover { background: var(--fb-bg); }
.fb-notif .fb-notif-title { font-size: 13px; font-weight: 600; }
.fb-notif .fb-notif-meta { font-size: 11px; color: var(--fb-muted); margin-top: 2px; }
/* 未讀：淡底凸顯 + 右側紅點（已讀則無） */
.fb-notif.unread { background: rgba(5,150,105,.07); }
.fb-notif.unread:hover { background: rgba(5,150,105,.12); }
.fb-unread-dot { display: none; }
.fb-notif.unread .fb-unread-dot {
  display: block; position: absolute;
  top: 50%; right: 12px; transform: translateY(-50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: #ff3b30;
}
.fb-empty, .fb-soon { padding: 32px 16px; text-align: center; color: var(--fb-muted); font-size: 13px; }
.fb-overdue-all {
  display: block; text-align: center; padding: 10px; font-size: 13px; font-weight: 600;
  color: var(--fb-accent-dark); text-decoration: none;
  border-top: 1px solid var(--fb-line); margin-top: 4px;
}
.fb-overdue-all:hover { background: var(--fb-bg); }

/* 逾期單筆項目：左側個案資訊、右側逾期天數（紅、最突出）＋行動 */
.fb-ov-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--fb-line); border-radius: 10px; margin-bottom: 6px;
  text-decoration: none; transition: background .12s ease, border-color .12s ease;
}
.fb-ov-item:hover { background: var(--fb-bg); border-color: #fecaca; }
.fb-ov-main { flex: 1; min-width: 0; }
.fb-ov-line1 { display: flex; align-items: baseline; gap: 8px; }
.fb-ov-case { font-size: 14px; font-weight: 700; color: #0f172a; }
.fb-ov-name { font-size: 12px; color: #64748b; }
.fb-ov-line2 { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.fb-ov-phase { font-size: 11px; font-weight: 600; color: #0369a1; background: #e0f2fe; padding: 1px 8px; border-radius: 8px; }
.fb-ov-date { font-size: 11px; color: #94a3b8; }
.fb-ov-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.fb-ov-days { font-size: 15px; font-weight: 800; color: #dc2626; }
.fb-ov-go { font-size: 11px; font-weight: 600; color: var(--fb-accent-dark); white-space: nowrap; }

.fb-tag {
  display: inline-block; font-size: 11px; padding: 1px 8px;
  border-radius: 10px; font-weight: 600;
}
.fb-tag-bug { background: #fee2e2; color: #b91c1c; }
.fb-tag-issue { background: #e0f2fe; color: #075985; }

/* ---- 附件預覽 gallery ---- */
.fb-gallery { margin: 8px 0; }
.fb-gallery-main {
  width: 100%; background: var(--fb-bg);
  border: 1px solid var(--fb-line); border-radius: 10px;
  overflow: hidden; text-align: center;
}
.fb-gallery-main img {
  max-width: 100%; max-height: 340px; object-fit: contain; display: block; margin: 0 auto;
}
.fb-gallery-thumbs {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px;
}
.fb-thumb {
  width: 56px; height: 56px; object-fit: cover;
  border-radius: 8px; cursor: pointer;
  border: 2px solid transparent; opacity: .65;
  transition: opacity .15s ease, border-color .15s ease;
}
.fb-thumb:hover { opacity: 1; }
.fb-thumb.active { border-color: var(--fb-accent); opacity: 1; }