/* Traffic Overview Subpage — Phase 5 — matches Figma 3872:72014 */

/* Override .Subpage spacing to fit a content-area page (no double padding). */
.Subpage.TrafficOverview {
  padding: 20px 24px 30px 24px;
  background-color: #F5F6F8;
  font-family: "Noto Sans TC", Helvetica, Arial, sans-serif;
  font-style: normal;
}

/* Breadcrumb header: 客戶  ›  整體流量概況 */
.TrafficOverview .TOBreadcrumb {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}

.TrafficOverview .TOBreadcrumb .Crumb {
  font-family: "Noto Sans TC", Helvetica, Arial, sans-serif;
  font-size: 16px;
  color: #6B6B6B;
  cursor: pointer;
}

.TrafficOverview .TOBreadcrumb .Crumb:hover {
  color: #389BFF;
}

.TrafficOverview .TOBreadcrumb .Sep {
  color: #BFBFBF;
  font-size: 16px;
  margin: 0 2px;
}

.TrafficOverview .TOBreadcrumb .Current {
  font-family: "Noto Sans TC", Helvetica, Arial, sans-serif;
  font-size: 22px;
  font-weight: 500;
  color: #1f1f1f;
}

/* Card row */
.TrafficOverview .TOCardRow {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 14px;
  margin-bottom: 16px;
}

.TrafficOverview .TOCard {
  flex: 1 1 0;
  min-width: 0;
  background: #ffffff;
  border: 1px solid #ECEEF1;
  border-radius: 5px;
  padding: 14px 18px 12px 18px;
  box-shadow: 0 2px 8px rgba(16, 30, 115, 0.04);
  display: flex;
  flex-direction: column;
}

.TrafficOverview .TOCard .CardLabel {
  font-size: 11px;
  color: #9A9A9A;
  margin-bottom: 10px;
  line-height: 1.2;
}

.TrafficOverview .TOCard .CardValueRow {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.TrafficOverview .TOCard .CardValue {
  display: flex;
  align-items: baseline;
}

.TrafficOverview .TOCard .CardValue .Num {
  font-size: 22px;
  font-weight: 500;
  color: #2D2D2D;
  line-height: 1.1;
  font-style: normal;
  font-family: "Noto Sans TC", Helvetica, Arial, sans-serif;
}

.TrafficOverview .TOCard .CardValue .Unit {
  font-size: 12px;
  color: #2D2D2D;
  margin-left: 4px;
  font-style: normal;
}

/* Progress bar for remaining quota — green like figma */
.TrafficOverview .TOCard .ProgressTrack {
  width: 100%;
  height: 6px;
  background: #EEF0F3;
  border-radius: 10px;
  overflow: hidden;
  margin: 8px 0 6px 0;
}

.TrafficOverview .TOCard .ProgressFill {
  height: 100%;
  background: #3ACA60;
  border-radius: 10px;
}

.TrafficOverview .TOCard .CardFootRow {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 11px;
  color: #9A9A9A;
  margin-top: 4px;
}

/* Trend chip — up = green (positive growth), down = red (decline) */
.TrafficOverview .TOChip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  font-style: normal;
  font-family: "Noto Sans TC", Helvetica, Arial, sans-serif;
  /* 蓋掉全域 .up/.down 的 rotate（那是給箭頭用的，誤套到膠囊） */
  transform: none !important;
  -webkit-transform: none !important;
}

.TrafficOverview .TOChip.up {
  background: #E9F8EE;
  color: #2EAB5E;
}

.TrafficOverview .TOChip.down {
  background: #FFECEA;
  color: #E04F4F;
}

.TrafficOverview .TOChip img {
  width: 11px;
  height: 11px;
  display: block;
}

/* Section card (chart + table) */
.TrafficOverview .TOSection {
  background: #ffffff;
  border: 1px solid #ECEEF1;
  border-radius: 5px;
  padding: 18px 22px 22px 22px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(16, 30, 115, 0.04);
}

.TrafficOverview .TOSectionHead {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.TrafficOverview .TOSectionHead .SectionTitle {
  font-size: 18px;
  font-weight: 500;
  color: #2D2D2D;
}

.TrafficOverview .TOPeriodSelect {
  width: 130px;
}

/* Chart placeholder size */
.TrafficOverview .TOChart {
  width: 100%;
  height: 300px;
}

/* Top projects table — clean rows, no outer border */
.TrafficOverview .TOTable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.TrafficOverview .TOTable th,
.TrafficOverview .TOTable td {
  text-align: left;
  padding: 12px 16px;
  font-size: 13px;
  border-bottom: 1px solid #F0F2F5;
}

.TrafficOverview .TOTable tbody tr:last-child td {
  border-bottom: none;
}

.TrafficOverview .TOTable th {
  background: transparent;
  font-weight: 500;
  color: #9A9A9A;
  font-size: 12px;
  border-bottom: 1px solid #ECEEF1;
}

.TrafficOverview .TOTable td {
  color: #2D2D2D;
}

/* Status pill with green dot */
.TrafficOverview .TOTable .Status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #2D2D2D;
}

.TrafficOverview .TOTable .Status .Dot,
.TrafficOverview .TOTable .Status .DotRed,
.TrafficOverview .TOTable .Status .DotOrange {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.TrafficOverview .TOTable .Status .Dot { background: #3ACA60; }
.TrafficOverview .TOTable .Status .DotRed { background: #EB5945; }
.TrafficOverview .TOTable .Status .DotOrange { background: #F5A623; }

/* Percent column with bar + text */
.TrafficOverview .TOTable .PercentCell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.TrafficOverview .TOTable .Bar {
  flex: 0 0 120px;
  height: 6px;
  background: #EEF0F3;
  border-radius: 6px;
  overflow: hidden;
}

.TrafficOverview .TOTable .Bar > span {
  display: block;
  height: 100%;
  background: #3ACA60;
  border-radius: 6px;
}

.TrafficOverview .TOTable .PercentCell .PercentText {
  font-size: 13px;
  color: #6B6B6B;
  min-width: 32px;
}

/* Header button on Customer List page that links to Traffic Overview */
.TrafficOverviewBtn {
  margin-top: 5px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
  padding: 0 14px;
  height: 44px;
  border-radius: 3px;
  background-color: #ffffff;
  border: solid 1px #e8e8e8;
}

.TrafficOverviewBtn:hover {
  background-color: #F8F9FB;
}

.TrafficOverviewBtn .Icon {
  width: 18px;
  height: 18px;
  margin-right: 6px;
  background-image: url('../img/phase5/ic_dashboard.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.TrafficOverviewBtn .Text {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #535353;
}

/* Per-row icon (left of EDIT) — links to per-customer traffic detail page */
.IconTrafficDashboard {
  width: 22px;
  height: 22px;
  cursor: pointer;
  background-image: url('../img/phase5/dashboard.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.85;
  transition: opacity 0.15s;
}

.IconTrafficDashboard:hover {
  opacity: 1;
}

/* ===== CBI-918 專案效能管理 (PerfPage) ===== */
.PerfPage .PerfSearch {
  height: 32px;
  border: 1px solid #E4E7EB;
  border-radius: 16px;
  padding: 0 14px;
  font-size: 13px;
  color: #535353;
  outline: none;
  width: 220px;
}
.PerfPage .PerfDdBtn {
  height: 32px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border: 1px solid #E4E7EB;
  border-radius: 16px;
  font-size: 13px;
  color: #535353;
  background: #fff;
  cursor: pointer;
  white-space: nowrap;
}
.PerfPage .PerfDdBtn:hover { border-color: #389BFF; }
.PerfPage .PerfDdPanel {
  position: absolute;
  top: 38px;
  right: 0;
  width: 200px;
  max-height: 320px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #ECEEF1;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(16,30,115,0.12);
  z-index: 50;
  padding: 4px 0;
}
.PerfPage .PerfDdItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px;
  font-size: 13px;
  color: #2D2D2D;
  cursor: pointer;
}
.PerfPage .PerfDdItem:hover { background: #F5F8FF; }
.PerfPage .PerfDdBack {
  padding: 8px 14px;
  font-size: 12px;
  color: #389BFF;
  cursor: pointer;
  border-bottom: 1px solid #F0F2F5;
}
.PerfPage .PerfStatus {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}
.PerfPage .PerfStatus .Switching { color: #389BFF; font-size: 13px; }
.PerfPage .PerfStatus .Done { color: #3ACA60; font-size: 13px; }
.PerfPage .PerfSpin {
  color: #389BFF;
  display: inline-block;
  animation: perfspin 1s linear infinite;
}
@keyframes perfspin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.PerfPage .PerfBtnGhost {
  border: 1px solid #E4E7EB;
  background: #fff;
  color: #6B6B6B;
  border-radius: 4px;
  padding: 3px 12px;
  font-size: 12px;
  cursor: pointer;
}
.PerfPage .PerfBtnGhost:hover { border-color: #EB5945; color: #EB5945; }
.PerfPage .PerfBtnAck {
  border: none;
  background: #389BFF;
  color: #fff;
  border-radius: 4px;
  padding: 4px 14px;
  font-size: 12px;
  cursor: pointer;
}
.PerfPage .PerfBtnAck:hover { background: #2D8AE6; }
.PerfPage .PerfWarn {
  margin-top: 14px;
  background: #FEF2F2;
  border-radius: 6px;
  padding: 10px 16px;
  font-size: 13px;
  color: #E04F4F;
}
.PerfPage .PerfPager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}
.PerfPage .PgBtn, .PerfPage .PgNum {
  cursor: pointer;
  font-size: 13px;
  color: #6B6B6B;
  min-width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.PerfPage .PgNum.active { background: #389BFF; color: #fff; }
.PerfPage .PgEllipsis { color: #BFBFBF; }

/* DB 效能卡片：列出多個 DB，卡片固定寬不擠壓，超過寬度時可左右滑動 */
.PerfPage .TOCardRow {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.PerfPage .TOCardRow .TOCard {
  flex: 0 0 auto;
  min-width: 200px;
}
.PerfPage .TOCardRow::-webkit-scrollbar { height: 6px; }
.PerfPage .TOCardRow::-webkit-scrollbar-thumb { background: #D5DAE0; border-radius: 3px; }
.PerfPage .TOCardRow::-webkit-scrollbar-track { background: transparent; }