/* ============================================================
   差旅 24 小時服務專線 — 3CX 通話報表
   色彩：墨藍 #17263B / 紙白 #FBFBFA / 接通青 #227D67
        未接磚紅 #B23A32 / 等候琥珀 #C77F1F / 線 #DDE2E8
   ============================================================ */

:root {
  --ink: #17263B;
  --ink-soft: #45536B;
  --paper: #FBFBFA;
  --surface: #FFFFFF;
  --line: #DDE2E8;
  --good: #227D67;
  --bad: #B23A32;
  --wait: #C77F1F;
  --focus: #2B5BA8;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 15px; }

body {
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
  font-feature-settings: "tnum";
}

button, input, select { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- 頂欄 ---------- */
.topbar { background: var(--ink); color: #fff; }
.topbar-inner {
  max-width: 1240px; margin: 0 auto; padding: 1.4rem 1.5rem;
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1.5rem; flex-wrap: wrap;
}
.topbar h1 { font-size: 1.55rem; font-weight: 900; letter-spacing: .02em; }
.subtitle { color: #B9C4D6; font-size: .95rem; margin-top: .15rem; }
.meta { text-align: right; font-size: .88rem; color: #D7DEE9; display: grid; gap: .2rem; justify-items: end; }
.meta span { color: #fff; font-weight: 500; }

.file-load {
  margin-top: .35rem; cursor: pointer; font-size: .82rem;
  border: 1px solid #5B6C89; border-radius: 3px; padding: .28rem .7rem;
  color: #E8EDF5; transition: background .15s;
}
.file-load:hover { background: #24354F; }
.file-load input { display: none; }

main { max-width: 1240px; margin: 0 auto; padding: 0 1.5rem 3rem; }

/* ---------- 篩選 ---------- */
.filters {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--ink);
  margin-top: 1.25rem;
  padding: 1rem 1.2rem .6rem;
}
.filter-row { display: flex; flex-wrap: wrap; gap: .9rem 1.4rem; margin-bottom: .7rem; }
.filter-group { display: flex; flex-direction: column; gap: .25rem; min-width: 130px; flex: 1 1 130px; max-width: 220px; }
.filter-group label { font-size: .78rem; color: var(--ink-soft); font-weight: 500; }
.filter-group select, .filter-group input {
  border: 1px solid var(--line); border-radius: 3px;
  padding: .38rem .5rem; background: #fff; font-size: .88rem;
}
.filter-actions { justify-content: flex-end; }

.btn-ghost {
  border: 1px solid var(--line); background: #fff; border-radius: 3px;
  padding: .38rem .9rem; cursor: pointer; font-size: .85rem; color: var(--ink-soft);
}
.btn-ghost:hover { border-color: var(--ink-soft); color: var(--ink); }
.btn-solid {
  border: none; background: var(--ink); color: #fff; border-radius: 3px;
  padding: .42rem 1rem; cursor: pointer; font-size: .85rem;
}
.btn-solid:hover { background: #24354F; }

/* ---------- KPI ---------- */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  background: var(--surface);
  border: 1px solid var(--line); border-top: none;
}
.kpi { padding: 1rem .9rem .85rem; border-left: 1px solid var(--line); }
.kpi:first-child { border-left: none; }
.kpi-value { font-size: 1.65rem; font-weight: 900; letter-spacing: -.01em; line-height: 1.15; }
.kpi-label { font-size: .78rem; color: var(--ink-soft); margin-top: .2rem; }
.kpi-good .kpi-value { color: var(--good); }
.kpi-bad .kpi-value { color: var(--bad); }
.kpi-wait .kpi-value { color: var(--wait); }

/* ---------- 圖表 ---------- */
.charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
  margin-top: 1.4rem;
}
.chart-block {
  background: var(--surface); border: 1px solid var(--line);
  padding: 1rem 1.1rem 1.1rem;
}
.chart-wide { grid-column: 1 / -1; }
.chart-block h2 {
  font-size: .95rem; font-weight: 700; margin-bottom: .7rem;
  padding-bottom: .5rem; border-bottom: 1px solid var(--line);
}
.chart-block canvas { max-height: 300px; }

/* ---------- 表格 ---------- */
.table-section {
  background: var(--surface); border: 1px solid var(--line);
  margin-top: 1.4rem; padding: 1rem 1.1rem 1.1rem;
}
.table-head {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: .5rem; margin-bottom: .7rem;
  padding-bottom: .5rem; border-bottom: 1px solid var(--line);
}
.table-head h2 { font-size: .95rem; font-weight: 700; }
.table-note { font-size: .78rem; color: var(--ink-soft); }
.table-tools { display: flex; align-items: center; gap: .9rem; }

.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .85rem; white-space: nowrap; }
th, td { padding: .45rem .6rem; text-align: left; border-bottom: 1px solid #EDF0F4; }
th { font-weight: 700; color: var(--ink-soft); font-size: .78rem; border-bottom: 1px solid var(--line); }
th.num, td.num { text-align: right; }
tbody tr:hover { background: #F3F6FA; }

.tag { display: inline-block; padding: .06rem .45rem; border-radius: 2px; font-size: .78rem; }
.tag-good { background: #E4F1EE; color: var(--good); }
.tag-bad  { background: #F6E7E5; color: var(--bad); }
.tag-neutral { background: #EEF1F5; color: var(--ink-soft); }

.pager {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; margin-top: .9rem; font-size: .85rem; color: var(--ink-soft);
}

footer {
  border-top: 1px solid var(--line);
  padding: 1.2rem 1.5rem 2rem;
  max-width: 1240px; margin: 0 auto;
  font-size: .8rem; color: var(--ink-soft);
}
footer code { background: #EEF1F5; padding: .05rem .3rem; border-radius: 2px; }

/* ---------- 響應式 ---------- */
@media (max-width: 860px) {
  .charts { grid-template-columns: 1fr; }
  .topbar-inner { align-items: flex-start; flex-direction: column; }
  .meta { text-align: left; justify-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- 多選下拉 ---------- */
.ms { position: relative; }
.ms-btn {
  width: 100%; text-align: left;
  border: 1px solid var(--line); border-radius: 3px;
  padding: .38rem 1.6rem .38rem .5rem; background: #fff; font-size: .88rem;
  cursor: pointer; position: relative;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ms-btn::after {
  content: ""; position: absolute; right: .55rem; top: 50%;
  width: .45rem; height: .45rem;
  border-right: 1.5px solid var(--ink-soft); border-bottom: 1.5px solid var(--ink-soft);
  transform: translateY(-70%) rotate(45deg);
}
.ms-btn.active { border-color: var(--focus); }
.ms.has-selection .ms-btn { border-color: var(--ink); background: #F0F4FA; font-weight: 500; }
.ms-panel {
  display: none; position: absolute; z-index: 30; top: calc(100% + 4px); left: 0;
  min-width: 100%; max-height: 280px; overflow-y: auto;
  background: #fff; border: 1px solid var(--line); border-radius: 3px;
  box-shadow: 0 6px 18px rgba(23, 38, 59, .15);
  padding: .3rem 0; white-space: nowrap;
}
.ms.open .ms-panel { display: block; }
.ms-tools {
  display: flex; gap: .8rem; padding: .25rem .7rem .4rem;
  border-bottom: 1px solid var(--line); margin-bottom: .25rem;
}
.ms-tools button {
  border: none; background: none; cursor: pointer;
  font-size: .78rem; color: var(--focus); padding: 0;
}
.ms-opt {
  display: flex; align-items: center; gap: .45rem;
  padding: .28rem .7rem; cursor: pointer; font-size: .85rem;
}
.ms-opt:hover { background: #F3F6FA; }
.ms-opt input { accent-color: var(--ink); }