html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  background: #f6f7f9;
  color: #1f2933;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.container {
  max-width: 1280px;
}

.page-title,
.button-row,
.filter-bar,
.bulk-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.filter-bar {
  justify-content: flex-start;
}

.filter-bar .form-control {
  max-width: 180px;
}

.metric-grid,
.detail-grid,
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.metric-grid > div,
.detail-grid > div,
.content-section,
.auth-panel {
  background: #fff;
  border: 1px solid #d9dee7;
  border-radius: 6px;
  padding: 1rem;
}

.metric-grid span,
.detail-grid span {
  display: block;
  color: #64748b;
  font-size: 0.875rem;
}

.metric-grid strong,
.detail-grid strong {
  display: block;
  font-size: 1.4rem;
  overflow-wrap: anywhere;
}

.form-grid label {
  font-weight: 600;
}

.check-line {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.button-row {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.actions {
  white-space: nowrap;
}

.status-error {
  background: #fff1f2;
}

.auth-panel {
  max-width: 420px;
  margin: 4rem auto;
}

/* ───────────────────────── 專案詳細頁 (Clients/Details) ───────────────────────── */

.crumb { font-size: 13px; color: #64748b; margin: 4px 0 10px; }
.crumb a { color: #64748b; text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.crumb .sep, .meta-line .sep { color: #94a3b8; }

.detail-head { margin-bottom: 14px; }
.detail-head h1 { font-size: 26px; margin: 0 0 6px; letter-spacing: -.3px; }
.meta-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: #64748b; }
.meta-line b { color: #1f2933; }

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }

.id-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 320px;
  background: #f1f3f7; border: 1px solid #eceff4; border-radius: 5px;
  padding: 1px 6px; color: #475569;
}
.id-chip .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.id-chip button { border: 0; background: none; padding: 0; cursor: pointer; color: #94a3b8; font-size: 12px; line-height: 1; }
.id-chip button:hover { color: #1f2933; }

.status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
}
.status-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-pill.run  { background: #e8f5ee; color: #198754; }
.status-pill.run .dot { animation: dot-pulse 1.6s infinite; }
.status-pill.stop { background: #eef1f5; color: #5b6673; }
.status-pill.warn { background: #fff6e0; color: #b57e00; }
.status-pill.err  { background: #fdecec; color: #c62828; }
@keyframes dot-pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

.tag { display: inline-block; font-size: 12px; padding: 1px 7px; border-radius: 4px; background: #eef1f5; color: #475569; font-weight: 600; }
.tag.green { background: #e8f5ee; color: #198754; }
.tag.blue  { background: #e8f0fe; color: #0d6efd; }

/* 操作列：上排生命週期、下排前往 */
.op-bar {
  background: #fff; border: 1px solid #d9dee7; border-radius: 6px;
  padding: 10px 14px; margin-bottom: 16px;
}
.op-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.op-row + .op-row { margin-top: 10px; padding-top: 10px; border-top: 1px solid #eceff4; }
.op-row form { margin: 0; }
.op-label { font-size: 12px; color: #94a3b8; width: 34px; flex: none; }
.op-divider { width: 1px; align-self: stretch; background: #eceff4; margin: 0 4px; }
.op-row .btn-light { border: 1px solid #d9dee7; background: #fff; }
.op-row .btn-light:hover { background: #f4f6f9; }

/* 兩欄：執行狀態 / 撥打進度 */
.detail-cols { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; align-items: start; margin-bottom: 16px; }
@media (max-width: 900px) { .detail-cols { grid-template-columns: 1fr; } }
.detail-cols .content-section { margin-bottom: 0; }

.sec-title {
  font-size: 14px; font-weight: 700; margin: 0 0 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.sec-link { font-size: 13px; font-weight: 500; }
.dim { color: #94a3b8; }
.err-text { color: #c62828; }
.warn-text { color: #d99100; }

.now-box {
  display: flex; align-items: center; gap: 14px;
  background: #fafbfc; border: 1px solid #eceff4; border-radius: 6px;
  padding: 12px 14px; margin-bottom: 14px;
}
.now-big { font-size: 20px; font-weight: 600; overflow-wrap: anywhere; }
.now-sub { font-size: 13px; color: #64748b; }
.now-phone { margin-left: auto; text-align: right; }
.now-phone b { display: block; font-size: 20px; font-family: ui-monospace, Menlo, Consolas, monospace; }
.now-phone span { font-size: 12px; color: #64748b; }

dl.kv { display: grid; grid-template-columns: auto 1fr; gap: 0; margin: 0; font-size: 14px; }
dl.kv dt { color: #64748b; padding: 6px 0; font-size: 13px; white-space: nowrap; }
dl.kv dd { margin: 0; padding: 6px 0 6px 24px; text-align: right; overflow-wrap: anywhere; }
dl.kv dt, dl.kv dd { border-bottom: 1px solid #eceff4; }
dl.kv dt:last-of-type, dl.kv dd:last-of-type { border-bottom: 0; }
.ago { color: #94a3b8; font-size: 12.5px; margin-left: 6px; }
/* 詳細頁「撥號節奏」第二行：偵錯用的效能數字 */
.gov-diag { color: #64748b; font-size: 12.5px; margin-top: 2px; font-variant-numeric: tabular-nums; }

/* 撥打進度 */
.progress-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.progress-top b { font-size: 22px; font-variant-numeric: tabular-nums; }
.progress-top .of { font-size: 14px; color: #64748b; font-weight: 400; margin-left: 4px; }
.progress-top span { font-size: 13px; color: #64748b; }
.seg-bar { height: 8px; border-radius: 99px; background: #eef1f5; overflow: hidden; display: flex; margin: 2px 0 12px; }
.seg-bar i { display: block; height: 100%; }
.seg-bar .s-ok { background: #198754; }
.seg-bar .s-fa { background: #f0a3a3; }
.seg-bar .s-re { background: #f6c344; }
.seg-bar .s-no { background: #e2e8f0; }

.stat-list { display: grid; gap: 1px; background: #eceff4; border: 1px solid #eceff4; border-radius: 6px; overflow: hidden; }
.stat-list > div { background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; font-size: 13.5px; }
.stat-list > div span { color: #64748b; display: flex; align-items: center; gap: 7px; }
.stat-list > div b { font-size: 16px; font-variant-numeric: tabular-nums; }
.swatch { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.swatch.ok { background: #198754; }
.swatch.fa { background: #f0a3a3; }
.swatch.re { background: #f6c344; }
.swatch.no { background: #e2e8f0; }
.foot-note { font-size: 12px; color: #94a3b8; margin: 10px 0 0; line-height: 1.5; }

/* 設定摘要 */
.cfg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 2px 28px; }
.cfg-item { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid #eceff4; font-size: 13.5px; }
.cfg-item span { color: #64748b; white-space: nowrap; }
.cfg-item b { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.cfg-note { display: block; font-weight: 400; font-style: normal; color: #64748b; font-size: 12.5px; }
details.more-cfg summary { cursor: pointer; font-size: 13px; color: #0d6efd; margin-top: 14px; }
details.more-cfg[open] summary { margin-bottom: 10px; }

/* 日誌 */
table.log-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.log-table th { text-align: left; font-size: 12px; color: #64748b; font-weight: 600; padding: 0 10px 8px; border-bottom: 1px solid #d9dee7; }
table.log-table td { padding: 9px 10px; border-bottom: 1px solid #eceff4; vertical-align: top; }
table.log-table tr:last-child td { border-bottom: 0; }
table.log-table tr:hover td { background: #fafbfc; }
table.log-table .t-time { white-space: nowrap; color: #64748b; font-variant-numeric: tabular-nums; width: 1%; }
table.log-table .t-time .d { color: #94a3b8; font-size: 12px; margin-left: 4px; }
table.log-table .t-evt { white-space: nowrap; font-weight: 600; width: 1%; }
table.log-table .t-msg { color: #334155; overflow-wrap: anywhere; }
table.log-table tr.log-err td { background: #fdf5f5; }
table.log-table tr.log-err:hover td { background: #fbeeee; }
.lvl { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.lvl.i { background: #cbd5e1; }
.lvl.w { background: #eab308; }
.lvl.e { background: #dc3545; }


/* 進階參數 hover 說明 */
.cfg-item .tip {
  position: relative;
  cursor: help;
  border-bottom: 1px dotted #8a94a3;
}
.cfg-item .tip::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  bottom: calc(100% + 9px);
  z-index: 40;
  width: max-content;
  max-width: 260px;
  padding: 8px 10px;
  border-radius: 6px;
  background: #1f2937;
  color: #f1f5f9;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.6;
  white-space: normal;
  text-align: left;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .12s ease, transform .12s ease;
  pointer-events: none;
}
.cfg-item .tip::before {
  content: "";
  position: absolute;
  left: 12px;
  bottom: calc(100% + 4px);
  z-index: 41;
  border: 5px solid transparent;
  border-top-color: #1f2937;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease;
  pointer-events: none;
}
.cfg-item .tip:hover::after,
.cfg-item .tip:focus-visible::after,
.cfg-item .tip:hover::before,
.cfg-item .tip:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 最近日誌分頁列的樣式已移到下方共用的 .tp / .tp-scroll 區塊 */

/* ───────────────────────── 專案清單頁 (Clients/Index) ───────────────────────── */

.page-title h1.cl-title { font-size: 24px; margin: 0; letter-spacing: -.4px; }
.cl-count { font-size: 13px; color: #64748b; font-weight: 400; margin-left: 8px; }
.cl-head-btns { display: flex; gap: 8px; flex: none; }

/* 篩選列 */
.cl-filter {
  background: #fff; border: 1px solid #d9dee7; border-radius: 8px;
  padding: 10px 12px; margin-bottom: 14px;
  display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap;
}
.cl-filter .fld { display: flex; flex-direction: column; gap: 3px; }
.cl-filter .fld.grow { flex: 1; min-width: 220px; }
.cl-filter label { font-size: 11.5px; color: #94a3b8; padding-left: 2px; margin: 0; }
.cl-filter .form-control,
.cl-filter .form-select {
  font-size: 13.5px; padding: 5px 9px; border-radius: 6px; border-color: #d9dee7;
  min-width: 140px; max-width: 220px;
}
.cl-filter .fld.grow .form-control { max-width: none; width: 100%; }
.cl-filter .acts { margin-left: auto; display: flex; gap: 8px; }
.cl-filter .acts .btn { font-size: 13px; padding: 5px 14px; }
.cl-filter .acts .btn:not(.btn-primary) { border: 1px solid #d9dee7; background: #fff; }

/* 已套用條件 */
.cl-chips { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; font-size: 12.5px; color: #64748b; }
.cl-chips .chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #e8f0fe; color: #0d6efd; border: 1px solid #cfe0fd;
  border-radius: 99px; padding: 2px 8px 2px 10px; font-weight: 600; text-decoration: none;
  max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cl-chips .chip:hover { background: #dbe8fd; }
.cl-chips .chip i { font-style: normal; color: #6f9dee; }

/* 空狀態 */
.cl-empty {
  background: #fff; border: 1px solid #d9dee7; border-radius: 8px;
  padding: 48px 20px; text-align: center; color: #64748b;
}
.cl-empty p { margin: 0 0 14px; font-size: 14px; }
.cl-empty .btn:not(.btn-primary) { border: 1px solid #d9dee7; background: #fff; }

/* 表格 */
.cl-card { background: #fff; border: 1px solid #d9dee7; border-radius: 8px; overflow: hidden; }
.cl-table { width: 100%; border-collapse: collapse; }
.cl-table thead th {
  text-align: left; font-size: 11.5px; font-weight: 600; color: #94a3b8; letter-spacing: .4px;
  padding: 10px 14px; background: #fafbfc; border-bottom: 1px solid #d9dee7; white-space: nowrap;
}
.cl-table tbody td { padding: 12px 14px; border-bottom: 1px solid #eceff4; vertical-align: middle; font-size: 13.5px; }
.cl-table tbody tr:last-child td { border-bottom: 0; }
.cl-table tbody tr:hover td { background: #fafbfc; }
.cl-table tr.row-err td { background: #fdf5f5; }
.cl-table tr.row-err:hover td { background: #fbeeee; }

.cl-table th.c-name   { width: 34%; }
.cl-table th.c-status { width: 12%; }
.cl-table th.c-line   { width: 12%; }
.cl-table th.c-prog   { width: 19%; }
.cl-table th.c-act    { width: 15%; }
.cl-table th.c-ops    { width: 8%; text-align: right; }

.cl-name { font-weight: 600; font-size: 14.5px; color: #1f2933; text-decoration: none; display: block; overflow-wrap: anywhere; }
.cl-name:hover { color: #0d6efd; text-decoration: underline; }
.cl-sub { font-size: 12px; color: #64748b; display: flex; align-items: center; gap: 6px; margin-top: 3px; flex-wrap: wrap; }
.cl-sub .sep { color: #cbd5e1; }
.cl-sub .id-chip { max-width: 190px; background: #f1f3f7; border-color: #f1f3f7; font-size: 11px; }
.cl-sub .id-chip .mono { font-size: 11px; }
.cl-sub .tag { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cl-err {
  color: #c62828; font-size: 11.5px; margin-top: 4px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cl-dim { color: #94a3b8; font-size: 13px; }

/* 撥打進度 */
.cl-num { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl-num b { font-size: 14.5px; }
.cl-num .g { color: #64748b; margin-right: 6px; }
.cl-num .ok { color: #198754; font-weight: 600; margin-right: 6px; }
.cl-num .fa { color: #c96a6a; font-weight: 600; }
.cl-bar { height: 6px; border-radius: 99px; background: #eef1f5; overflow: hidden; display: flex; max-width: 170px; margin-top: 5px; }
.cl-bar i { display: block; height: 100%; }
.cl-bar .s-ok { background: #198754; }
.cl-bar .s-fa { background: #f0a3a3; }
.cl-bar .s-no { background: #e2e8f0; }

/* 最近活動 */
.cl-time { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl-time .d { display: block; font-size: 11.5px; color: #94a3b8; }

/* 圖示操作列 */
.cl-ops { display: flex; gap: 2px; justify-content: flex-end; }
.cl-ops .op {
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; color: #64748b; text-decoration: none; position: relative; font-size: 15px; line-height: 1;
}
.cl-ops .op:hover { background: #eef1f5; color: #0d6efd; }
.cl-ops .op.go { color: #198754; }
.cl-ops .op.go:hover { background: #e8f5ee; color: #198754; }
.cl-ops .op::after {
  content: attr(data-t); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: #1f2937; color: #f1f5f9; font-size: 11.5px; padding: 3px 7px; border-radius: 4px; white-space: nowrap;
  opacity: 0; visibility: hidden; transition: opacity .12s ease; pointer-events: none; z-index: 30;
}
.cl-ops .op:hover::after, .cl-ops .op:focus-visible::after { opacity: 1; visibility: visible; }

@media (max-width: 992px) {
  .cl-card { overflow-x: auto; }
  .cl-table { min-width: 940px; }
  .cl-filter .acts { margin-left: 0; width: 100%; }
}

/* ═════════════ 共用：表格捲動容器 + 分頁列 (_TablePager) ═════════════ */
/*
   .tp-scroll  給表格一個高度天花板，捲軸只出現在表格裡，頁面外框不動；
               表頭 sticky，捲到第幾列都還看得到欄位名稱。
               高度用 --tp-max-h 覆寫，各頁自己決定（預設 60vh）。
   .tp         分頁列本體，內容由 wwwroot/js/table-pager.js 產生。
               它在 .tp-scroll 外面，所以不會被表格內容捲走。
*/

.tp-scroll {
  max-height: var(--tp-max-h, 60vh);
  overflow: auto;
  overscroll-behavior: contain;
}
.tp-scroll > table {
  margin-bottom: 0;
}
.tp-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  /* border-collapse: collapse 的表格，sticky 表頭的 border 會跟著捲走，
     所以底線改用 inset shadow 畫。 */
  box-shadow: inset 0 -1px 0 #d9dee7;
}
/* .log-table 表頭原本 padding-top 為 0（貼齊上方標題），
   放進捲動容器後會直接黏在邊緣，補回上緣留白。 */
.tp-scroll .log-table thead th {
  padding-top: 8px;
  background: #fafbfc;
}

.tp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #eceff4;
}
.tp-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tp-info {
  font-size: 12.5px;
  color: #64748b;
  font-variant-numeric: tabular-nums;
}
.tp-size-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: #64748b;
}
.tp-size {
  width: 92px;
}
.tp-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tp .btn:disabled {
  opacity: .45;
  cursor: default;
}
.tp .pagination {
  margin-bottom: 0;
}

/* 整頁型清單：分頁列外框做成卡片，與表格區塊分開 */
.tp.tp-card {
  margin-top: 0;
  padding: 12px 16px;
  border: 1px solid #d9dee7;
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: #fff;
}