/* ============================================================
   console.css  –  後台視覺層（取代 theme-platform.css）

   刻意做成「一般企業後台」的樣子，不是漂亮的 landing page：
   左側固定選單、資料用表格、密度高、一頁看得到比較多列。

   具體避開的東西（客戶說版面「太有 AI 感」，指的就是這些）：
     · 漸層底色、彩色陰影、24px 大圓角
     · 每張卡片都浮起來、hover 會位移
     · 置中的大標題與大量留白
     · emoji 當圖示
   改成：1px 灰邊框、3–4px 圓角、系統字體、單一主色，
   顏色只用在狀態標示這種小面積的地方。
   ============================================================ */

/* ---------- 色票（覆寫 style.css 的變數，舊元件跟著改） ---------- */
:root {
  --green-1:   #1b5486;   /* 主色：沉穩藍，取代原本的亮綠／亮藍 */
  --green-2:   #24659c;
  --green-3:   #3b7cb5;
  --green-bg:  #f3f5f8;   /* 頁面底色 */
  --green-lite:#e3e8ee;   /* 分隔線 */
  --text-1:    #1c2530;
  --text-2:    #55616f;
  --text-3:    #68707a;   /* 次要文字：4.59:1 on --green-bg（WCAG AA 需 4.5） */
  --danger:    #b42318;
  --danger-lt: #fef3f2;

  --line:      #d7dde5;
  --surface:   #ffffff;
  --hover:     #f6f8fa;

  --nav-bg:      #22303d;
  --nav-fg:      #c3ccd6;
  --nav-fg-dim:  #8a97a3;  /* 深色側欄上的次要文字，一樣要過 4.5:1 */
  --nav-active:  #2f4152;

  --shadow-sm: none;
  --shadow-md: 0 6px 24px rgba(16, 24, 40, .14);
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --transition: .12s ease;

  --sidenav-w: 216px;
  --topbar-h:  52px;
}

/* ---------- 基礎 ---------- */
html { font-size: 15px; }

body {
  font-family: "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", system-ui, sans-serif;
  background: var(--green-bg);
  color: var(--text-1);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 600; }

/* ---------- 版面骨架 ---------- */
.console {
  display: flex;
  min-height: 100vh;
}

.sidenav {
  width: var(--sidenav-w);
  flex: 0 0 var(--sidenav-w);
  background: var(--nav-bg);
  color: var(--nav-fg);
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
}

.sidenav__brand {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.sidenav__brand-name {
  display: block;
  color: #fff;
  font-size: var(--fs-lg);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidenav__brand-sub {
  display: block;
  color: var(--nav-fg-dim);
  font-size: var(--fs-xs);
  margin-top: 1px;
}

.sidenav__nav {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0 24px;
}

.nav-group {
  color: var(--nav-fg-dim);
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  padding: 14px 16px 5px;
}

.nav-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 16px;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  color: var(--nav-fg);
  font: inherit;
  font-size: var(--fs-md);
  cursor: pointer;
  transition: background var(--transition);
}

.nav-item:hover { background: rgba(255, 255, 255, .06); color: #fff; }

.nav-item--active {
  background: var(--nav-active);
  border-left-color: #6ba3d8;
  color: #fff;
  font-weight: 600;
}

/* 二階選單（在分組標題底下）縮排，看得出從屬關係 */
.nav-group + .nav-item,
.nav-group + .nav-item + .nav-item { padding-left: 26px; }

.console__body {
  flex: 1;
  min-width: 0;
  margin-left: var(--sidenav-w);
}

.topbar {
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 30;
}

.topbar__menu {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xl);
  line-height: 1;
  padding: 5px 9px;
  cursor: pointer;
  color: var(--text-2);
}

.topbar__title {
  font-size: var(--fs-lg);
  font-weight: 600;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar__user {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-sm);
  color: var(--text-2);
  white-space: nowrap;
}

.console main {
  max-width: none;
  margin: 0;
  padding: 20px 24px 56px;
}

/* 行動版：選單收成抽屜 */
.console__scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(16, 24, 40, .45);
  z-index: 35;
}

@media (max-width: 900px) {
  .sidenav { transform: translateX(-100%); transition: transform .18s ease; }
  .console--nav-open .sidenav { transform: none; }
  .console--nav-open .console__scrim { display: block; }
  .console__body { margin-left: 0; }
  .topbar__menu { display: block; }
  .console main { padding: 16px 14px 48px; }
  .topbar__user span { display: none; }
  /* 窄螢幕讓表格橫向捲，不要把中文擠成一行一兩個字 */
  .data-table { min-width: 620px; }
  .data-table .col-site { width: auto; white-space: nowrap; }
}

/* ---------- 工具列 ---------- */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}

.toolbar--sub {
  background: var(--surface);
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding: 8px 12px;
  margin-bottom: 0;
}

.toolbar--sub + .table-scroll { border-radius: 0 0 var(--radius-md) var(--radius-md); }

.toolbar__title {
  font-size: var(--fs-lg);
  font-weight: 600;
}

.toolbar__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.counter {
  font-size: var(--fs-sm);
  color: var(--text-2);
  margin-right: 4px;
}

.inline-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--text-2);
  margin: 0;
}

.inline-field select { width: auto; }

.section-title {
  font-size: var(--fs-base);
  font-weight: 600;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

/* ---------- 按鈕 ---------- */
.btn {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-1);
  font-size: var(--fs-md);
  font-weight: 500;
  box-shadow: none;
}

.btn:hover:not(:disabled) { background: var(--hover); border-color: #bcc6d2; }
.btn:active { transform: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn--primary {
  background: var(--green-1);
  border-color: var(--green-1);
  color: #fff;
  width: auto;
  padding: 7px 16px;
  font-size: var(--fs-md);
  font-weight: 600;
  box-shadow: none;
}
.btn--primary:hover:not(:disabled) {
  background: var(--green-2);
  border-color: var(--green-2);
  box-shadow: none;
}

.btn--sm { padding: 4px 10px; font-size: var(--fs-sm); }
.btn--primary.btn--sm { padding: 5px 12px; }

.btn--danger {
  background: var(--surface);
  border-color: #e6c3bf;
  color: var(--danger);
}
.btn--danger:hover:not(:disabled) { background: var(--danger-lt); border-color: var(--danger); color: var(--danger); }

/* 表格裡當連結用的按鈕 */
.link-cell {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--green-1);
  cursor: pointer;
  text-align: left;
}
.link-cell:hover { text-decoration: underline; }

/* ---------- 表單元件 ---------- */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="date"],
input[type="file"],
textarea,
select {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  font-size: var(--fs-md);
  background: var(--surface);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
  border-color: var(--green-2);
  box-shadow: 0 0 0 2px rgba(27, 84, 134, .14);
}

label { font-size: var(--fs-md); font-weight: 500; margin-bottom: 4px; }

.form-group { margin-bottom: 14px; }

.form-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: none;
  padding: 18px 20px;
  max-width: 560px;
  margin-bottom: 16px;
}

.filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-bottom: 12px;
}

/* style.css 的 .filter-row select 比單獨的 select 更明確，要同樣明確才蓋得掉 */
.filter-row select {
  min-width: 120px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  font-size: var(--fs-md);
}

.filter-date {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-sm);
  color: var(--text-2);
  font-weight: 400;
  margin: 0;
}

.search-bar { margin-bottom: 0; min-width: 160px; }
.search-bar input { padding-left: 10px; }
.search-bar::before { content: none; }

.panel-hint {
  font-size: var(--fs-sm);
  color: var(--text-2);
  margin-bottom: 12px;
}

.field-hint { font-size: var(--fs-xs); }

/* ---------- 表格 ---------- */
.table-scroll {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow-x: auto;
}

.data-table { font-size: var(--fs-md); }

.data-table th,
.data-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--green-lite);
  vertical-align: middle;
}

.data-table th {
  background: #eef1f5;
  color: var(--text-2);
  font-weight: 600;
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--line);
}

.data-table tbody tr:hover { background: var(--hover); }
.data-table tbody tr.row--off { color: var(--text-3); }
.data-table tbody tr.row--off td:first-child { text-decoration: line-through; }

.data-table .col-num    { width: 76px;  text-align: right; }
.data-table .col-status { width: 88px;  white-space: nowrap; }
.data-table .col-date   { width: 150px; white-space: nowrap; color: var(--text-2); }
.data-table .col-site   { width: 180px; }
.data-table .col-ops    { width: 1%;    white-space: nowrap; text-align: right; }
.data-table .col-ops .btn + .btn { margin-left: 4px; }

.table-empty {
  padding: 36px 14px;
  text-align: center;
  color: var(--text-3);
}

/* 狀態標示：只有這裡用顏色 */
.state { border: 1px solid; }
.state--on  { color: #15803d; border-color: #b7e0c3; background: #f2fbf5; }
.state--off { color: var(--text-2); border-color: var(--line); background: #f2f4f7; }

/* ---------- 總覽 ---------- */
.dash-grid {
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}

@media (max-width: 1100px) { .dash-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .dash-grid { grid-template-columns: repeat(2, 1fr); } }

.dash-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: none;
  padding: 12px 14px;
  gap: 4px;
}
.dash-card:hover { transform: none; box-shadow: none; background: var(--hover); }
.dash-card__label { font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); }
.dash-card__value { font-size: var(--fs-3xl); font-weight: 600; }

/* 左側色條是唯一的顏色線索，寫在 .dash-card 之後才不會被蓋掉 */
.dash-card--pending  { border-left-color: #c2410c; }
.dash-card--progress { border-left-color: var(--green-1); }
.dash-card--resolved { border-left-color: #15803d; }

.dash-section-title {
  font-size: var(--fs-base);
  font-weight: 600;
  margin: 0 0 8px;
}

#dash-recent {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.recent-row {
  border-bottom: 1px solid var(--green-lite);
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  padding: 9px 14px;
}
.recent-row:last-child { border-bottom: none; }

.mini-stat { border: 1px solid var(--line); }

/* ---------- Modal ---------- */
.modal-card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 20px 22px;
}

.modal-title {
  font-size: var(--fs-lg);
  font-weight: 600;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.modal-actions { gap: 8px; }

.modal-site-context {
  font-size: var(--fs-sm);
  color: var(--text-2);
  margin: -6px 0 12px;
}

/* 批次匯入說明與錯誤清單 */
.steps {
  margin: 0 0 16px 18px;
  padding: 0;
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.7;
}

.import-errors {
  border: 1px solid #e6c3bf;
  background: var(--danger-lt);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 14px;
  max-height: 220px;
  overflow-y: auto;
  font-size: var(--fs-sm);
  color: #7a2018;
}
.import-errors__title { font-weight: 600; margin-bottom: 6px; }
.import-errors ul { margin: 0; padding-left: 18px; line-height: 1.7; }

/* ---------- 登入頁 ---------- */
.login-section { background: var(--green-bg); }

.login-card {
  border: 1px solid var(--line);
  border-top: 3px solid var(--green-1);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 3px rgba(16, 24, 40, .08);
  padding: 32px 28px;
}

.login-title { font-size: var(--fs-xl); font-weight: 600; }
.login-sub   { font-size: var(--fs-md); color: var(--text-2); }
.login-card .btn--primary { width: 100%; padding: 10px; }

/* ---------- 通報紀錄卡片 ---------- */
.console .card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: none;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.console .card:hover { box-shadow: none; border-color: #bcc6d2; }

.card__badge {
  background: #eef1f5;
  color: var(--text-2);
  border-radius: var(--radius-xs);
  font-weight: 600;
}
.card__header { margin-bottom: 4px; }
.card__time { font-size: var(--fs-xs); color: var(--text-3); }
.card__case-no { font-size: var(--fs-xs); color: var(--text-3); margin: 0; }
.card__desc { font-size: var(--fs-md); margin: 2px 0 0; }
.card__footer { margin-top: 8px; padding-top: 8px; }

/* ---------- 帳號管理 ---------- */
.user-row {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: none;
  padding: 10px 14px;
  margin-bottom: 8px;
}

.role-badge { border: 1px solid var(--line); }
.role-badge--owner  { background: #f2f4f7; color: var(--text-2); }
.role-badge--admin  { background: #e7eef5; color: var(--green-1); }
.role-badge--member { background: #f2f4f7; color: var(--text-2); }

/* ---------- 其他 ---------- */
.empty-state {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 36px 20px;
  font-size: var(--fs-md);
}

.spinner__ring { border-color: var(--green-lite); border-top-color: var(--green-1); }
.spinner__text { color: var(--text-2); }

.stats-badge { background: var(--green-1); }

.qr-code-box { display: flex; justify-content: center; }
.qr-url-text { font-size: var(--fs-xs); color: var(--text-3); word-break: break-all; margin-top: 8px; }
.qr-point-label { font-size: var(--fs-md); color: var(--text-2); margin-bottom: 10px; }

.email-tag { background: #e7eef5; color: var(--green-1); }
.checkbox-grid { border: 1px solid var(--line); border-radius: var(--radius-sm); }