/* ---- 設計預覽：總覽（public/js/views/preview/overview.js）。只放這頁用到、app.css 沒有的樣式，類名都以 .pv-ov- 開頭 ---- */
.pv-ov > * + *,
.pv-ov-drill-body > * + *,
.pv-ov .pv-panel > * + * {
  margin-top: 12px;
}

.pv-ov .pv-panel > .card-head + * {
  margin-top: 0;
}

.pv-ov-small {
  font-size: 0.8rem;
}

.pv-ov p.pv-ov-small {
  margin-bottom: 0;
}

/* 分頁列：損益表／庫存總覽，右邊是誰・日期 */
.pv-ov-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* 日期區間＋查詢＋快速區間 */
.pv-ov-range {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.pv-ov-dates {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.pv-ov-dates input {
  width: 150px;
  min-height: 40px;
  border: none;
  padding: 4px;
}

/* 六張卡片：iPad 橫向一排六張，字小一點 */
.pv-ov-cards {
  gap: 10px;
}

.pv-ov-cards .pv-card {
  padding: 10px 12px;
}

.pv-ov-cards .pv-card-value {
  font-size: 1.45rem;
}

.pv-ov-cards .pv-card-sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pv-ov-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.pv-ov-card-top .pv-card-label {
  white-space: nowrap;
}

.pv-page button.pv-ov-q {
  min-height: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--terracotta);
  font-size: 0.78rem;
  font-weight: 700;
}

.pv-ov-hl {
  border: 2px solid var(--green);
}

.pv-ov-amber .pv-card-value {
  color: #a87a12;
}

.pv-ov-red .pv-card-value {
  color: var(--alert);
}

/* SVG 圖 */
.pv-ov-svg svg {
  display: block;
  width: 100%;
  height: auto;
}

.pv-ov-donut svg {
  display: block;
  width: 220px;
  max-width: 100%;
  height: auto;
  margin: 8px auto;
}

.pv-ov-keys {
  display: flex;
  gap: 16px;
  font-size: 0.8rem;
}

.pv-ov-key::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 3px;
  margin-right: 6px;
  vertical-align: middle;
  background: var(--c);
}

/* 圖例：色塊・名稱・金額・占比 */
.pv-ov-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}

.pv-ov-legend-row {
  display: grid;
  grid-template-columns: 14px 1fr auto 44px;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
}

.pv-ov-legend-row i {
  width: 14px;
  height: 14px;
  border-radius: 3px;
}

.pv-ov-legend-row span.muted {
  text-align: right;
}

.pv-ov-legend-total {
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.pv-ov-pie {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 20px;
}

.pv-ov-pie .pv-ov-donut svg {
  width: 260px;
}

/* 橫條 */
.pv-ov-hbars {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.pv-ov-hbar-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 0.9rem;
}

.pv-ov-track {
  height: 14px;
  border-radius: 4px;
  background: #f1ebe0;
  overflow: hidden;
}

.pv-ov-track i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--green-2);
}

/* 查詢頁 */
.pv-ov-drillhead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.pv-ov-drillhead h2 {
  margin: 0;
  font-size: 1.25rem;
}

.pv-page button.pv-ov-back {
  min-height: 40px;
  padding: 6px 12px;
}

.pv-ov-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.pv-ov-filter select {
  width: auto;
}

.pv-ov-filter + .pv-ov-filter {
  margin-top: 12px;
}

.pv-ov-grow {
  flex: 1;
}

.pv-ov-chips .cat-tabs button {
  min-height: 36px;
  padding: 4px 12px;
  font-size: 0.85rem;
}

.pv-ov-filterbox {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #f5f0e6;
}

.pv-ov-punch {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}

.pv-ov-btnrow {
  display: flex;
  gap: 8px;
}

.pv-ov-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 0 8px;
  font-size: 0.85rem;
  white-space: nowrap;
}

/* 全站 input 是 100% 寬、44px 高；勾選框要蓋回原本大小，不然字會被擠成三行 */
.pv-ov-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0;
  flex: none;
}

/* 薪資費用查詢：篩選全部收進同一個框，第二行是快速選、只看異常、搜尋 */
.pv-ov-punch {
  row-gap: 8px;
  padding: 10px 14px;
}

/* 標籤放在欄位左邊，省一行高度 */
.pv-ov-punch .pv-field {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.pv-ov-punch .pv-field .pv-label {
  flex: none;
  margin: 0;
}

.pv-ov-punch .pv-ov-span {
  grid-column: 1 / -1;
}

.pv-ov-punch input,
.pv-ov-punch select {
  min-height: 38px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.pv-ov-punch .pv-ov-span button.primary {
  min-height: 38px;
}

/* 打卡表列高壓低：10 筆一個畫面看得完 */
.pv-ov-tight table.list th,
.pv-ov-tight table.list td {
  padding-top: 4px;
  padding-bottom: 4px;
}

/* 打卡表那張卡片的內距與間距也收小（整頁要放得進 iPad 11 吋 834 高） */
.pv-panel:has(> .pv-ov-punch) {
  padding: 14px 16px;
  gap: 10px;
}

.pv-ov-tight .pv-pill {
  padding-top: 0;
  padding-bottom: 0;
}

.pv-ov-summary {
  font-size: 0.9rem;
}

.pv-ov-h3 {
  margin: 16px 0 0;
  font-size: 1rem;
}

a.pv-ov-go {
  border-color: var(--terracotta);
  background: var(--terracotta);
  color: #fff;
}