/**
 * 發電量查詢樣式
 * 一律引用佈景的設計 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;
}

.gc-power__form {
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  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 label {
  font-size: var(--fs-sm, 0.875rem);
  font-weight: var(--fw-medium, 500);
  color: var(--color-text-sub, #444b4e);
}

.gc-power__field select,
.gc-power__field input {
  padding: 0.5rem 0.65rem;
  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);
}

.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-block;
  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__actions { flex-direction: column; }
  .gc-power__btn { width: 100%; text-align: center; }
}