/**
 * 發電量查詢樣式
 * 一律引用佈景的設計 token，不自訂色碼。
 */

/* 報表動輒十幾欄，這一頁不套用一般內文的閱讀寬度限制。
   佈景若改用其他 class 名，只需在這裡補一條選擇器。 */
body.gc-has-power-query .entry-content { max-width: none; }

/*
 * 標題列：左邊標題、右邊「目前登入的帳號 + 登出」。
 * 手機空間不夠時整列改直排，帳號與登出仍在同一行不拆開。
 */
.gc-power__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2, 1rem);
  margin-bottom: var(--space-3, 1.5rem);
}

.gc-power__heading {
  font-size: var(--fs-2xl, 1.75rem);
  color: var(--color-primary, #20458b);
  margin-bottom: 0;
}

.gc-power__account {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--fs-sm, 0.9rem);
}

.gc-power__user { color: var(--color-text-muted, #6b7280); }

.gc-power__logout {
  padding: 0.35rem 0.9rem;
  color: var(--color-primary, #20458b);
  border: 1px solid var(--color-line, #d9dee8);
  border-radius: 999px;
  white-space: nowrap;
  transition: border-color 0.25s, background-color 0.25s;
}

.gc-power__logout:hover {
  border-color: var(--color-primary, #20458b);
  background: var(--color-primary-bg, #eef3fb);
  opacity: 1;
}

/*
 * 四個條件 + 兩顆按鈕的排法。
 *
 * 客戶帳號獨佔第一列：選項文字是「代號 — 電廠全名」，最長的
 * 「CB5-CHP-A — 崙尾東三號電廠 A 區」要將近 300px 才排得下一行。
 * 以前四個欄位平分一列，這欄永遠不夠寬，文字折成兩行就比日期欄高出一截，
 * 看起來像四個大小不一的框。給它整列（最寬 30rem）之後就不會再折行。
 */
.gc-power__form {
  display: grid;
  grid-template-columns: repeat(3, minmax(9rem, 15rem)) auto;
  justify-content: start;
  gap: var(--space-2, 1rem);
  align-items: end;
  margin-bottom: var(--space-3, 1.5rem);
}

.gc-power__field { display: flex; flex-direction: column; gap: 0.35rem; position: relative; }

.gc-power__field--customer { grid-column: 1 / -1; max-width: 30rem; }

.gc-power__field label {
  font-size: var(--fs-sm, 0.875rem);
  font-weight: var(--fw-medium, 500);
  color: var(--color-text-sub, #444b4e);
}

/*
 * 日期欄是原生 input，客戶帳號與資料單位被佈景的 SheetSelect 換成按鈕，
 * 兩者預設的內距與圓角不同（.ssel-btn 用的是卡片圓角），高度差了 11px。
 * 這裡把三種控制項與兩顆按鈕壓成同一組尺寸，整列才會等高。
 */
.gc-power__field select,
.gc-power__field input,
.gc-power__field .ssel-btn {
  min-height: 2.75rem;
  padding: 0.5rem 0.9rem;
  font-size: var(--fs-base, 1rem);
  font-family: inherit;
  color: var(--color-text, #222526);
  background: #fff;
  border: 1px solid var(--color-line, #d2d2d2);
  border-radius: var(--radius-button, 0.625rem);
}

/* 桌機寬度已足夠排一行，不讓它折行把框撐高；真的遇到超長名稱才截字並以 title 補足 */
.gc-power__field .ssel-val { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.gc-power__field .ssel { width: 100%; }

.gc-power__field select:focus,
.gc-power__field input:focus {
  outline: 2px solid var(--color-primary, #20458b);
  outline-offset: 1px;
}

.gc-power__field .is-invalid { border-color: #d53d38; }

.gc-power__error {
  margin: 0;
  font-size: var(--fs-xs, 0.75rem);
  color: #d53d38;
}

.gc-power__actions { display: flex; gap: var(--space-1, 0.5rem); }

.gc-power__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  font-size: var(--fs-base, 1rem);
  font-family: inherit;
  border: none;
  border-radius: var(--radius-button, 0.625rem);
  cursor: pointer;
  transition: var(--transition, 0.3s);
  white-space: nowrap;
}

.gc-power__btn--primary { color: #fff; background: var(--color-primary, #20458b); }
.gc-power__btn--download { color: #fff; background: var(--color-accent, #eeac29); text-decoration: none; }
.gc-power__btn:hover { opacity: 0.85; }
.gc-power__btn:disabled,
.gc-power__btn.is-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

.gc-power__result {
  min-height: 18rem;
  padding: var(--space-3, 1.5rem);
  background: var(--color-second-bg, #f4f7f8);
  border-radius: var(--radius-card, 1.25rem);
  color: var(--color-text-sub, #444b4e);
  overflow-x: auto;
}

.gc-power__notice,
.gc-power__note {
  font-size: var(--fs-sm, 0.875rem);
  color: var(--color-text-sub, #444b4e);
}

.gc-power__note { margin-top: var(--space-3, 1.5rem); }

/* 報表表格 */
#gc-report-tabs > ul { display: flex; flex-wrap: wrap; gap: var(--space-1, 0.5rem); list-style: none; padding: 0; margin: 0 0 var(--space-2, 1rem); }

#gc-report-tabs > ul a {
  display: inline-block;
  padding: 0.35rem 0.8rem;
  font-size: var(--fs-sm, 0.875rem);
  color: var(--color-primary, #20458b);
  background: #fff;
  border-radius: var(--radius-button, 0.625rem);
  text-decoration: none;
}

.gc-report-table { width: 100%; border-collapse: collapse; background: #fff; font-size: var(--fs-sm, 0.875rem); }
.gc-report-table td { border: 1px solid var(--color-line, #d2d2d2); padding: 0.4rem 0.6rem; text-align: center; white-space: nowrap; }

@media (max-width: 800px) {
  .gc-power__form { grid-template-columns: 1fr; }
  .gc-power__field--customer { max-width: none; }
  .gc-power__actions { flex-direction: column; }
  .gc-power__btn { width: 100%; text-align: center; }

  /* 手機只有一欄寬，長電廠名寧可折成兩行也不要截掉——客戶要靠這行字認案場 */
  .gc-power__field .ssel-val { white-space: normal; }
}