/*
*download_item.css
*========= 共通: トークン / ベース ========= 
*/

/* チェックボックスのカスタムスタイル */
.checkbox-label {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
  border: 1px solid #000;
  background-color: #fff;
  color: #000;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.checkbox-label input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  width: 0;
  height: 0;
  display: none;
}

/* チェック時のスタイル */
.checkbox-label input[type="checkbox"]:checked ~ span {
  color: #fff;
}

.checkbox-label:has(input[type="checkbox"]:checked) {
  background-color: #0066cc;
  color: #fff;
  border-color: #0066cc;
}

/* item-group の基本スタイル */
.item-group {
  margin-bottom: 16px;
}

.item-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.item-list li {
  margin: 0;
}

/* 項目ページ: データの種類カード（画像2レイアウト） */
body[data-page="item"] .dtype-card{
  width: 230px;
  padding: 0;
  border: 1px solid #d0d3de;
  background: #fff;
}

body[data-page="item"] .dtype-card .card__header{
  margin: 0;
  padding: 4px 10px;
  background: #7f8fb8;
}

body[data-page="item"] .dtype-card .card__title{
  color: #fff;
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.2;
}

body[data-page="item"] .dtype-card .radio-stack{
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body[data-page="item"] .dtype-card .radio{
  display: flex;
  align-items: center;
  gap: 2px;
  line-height: 1.2;
}

/* 項目ページ: 項目セクション（予測値/実況値 共通レイアウト） */
body[data-page="item"] #forecastItemsSection,
body[data-page="item"] #observedItemsSection{
  margin-top: 10px;
  padding: 0;
  border: 1px solid #d0d3de;
  background: #fff;
}

body[data-page="item"] #forecastItemsSection .card__header,
body[data-page="item"] #observedItemsSection .card__header{
  margin: 0;
  padding: 4px 10px;
  background: #7f8fb8;
}

body[data-page="item"] #forecastItemsSection .card__title,
body[data-page="item"] #observedItemsSection .card__title{
  color: #fff;
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.2;
}

body[data-page="item"] #forecastItemList,
body[data-page="item"] #observedItemList{
  padding: 12px 16px 14px;
}

body[data-page="item"] #forecastItemList .item-group,
body[data-page="item"] #observedItemList .item-group{
  margin-bottom: 14px;
}

body[data-page="item"] #forecastItemList .item-group strong,
body[data-page="item"] #observedItemList .item-group strong{
  display: block;
  margin-bottom: 8px;
}

body[data-page="item"] #forecastItemList hr,
body[data-page="item"] #observedItemList hr{
  margin: 12px 0;
  border: none;
  border-top: 1px dashed #999;
}

body[data-page="period"] .period-card{
  border: none;
  background: transparent;
  padding: 0;
}

body[data-page="period"] .period-panel{
  margin-top: 10px;
  border: 1px solid #d0d3de;
  background: #fff;
}

body[data-page="period"] .period-panel .card__header{
  margin: 0;
  padding: 4px 10px;
  background: #7f8fb8;
}

body[data-page="period"] .period-panel .card__title{
  color: #fff;
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.2;
}

body[data-page="period"] .period-panel > div{
  padding-left: 16px;
  padding-right: 16px;
}

body[data-page="period"] .period-panel .radio{
  line-height: 1.3;
}

body[data-page="period"] .period-panel select{
  min-width: 3.2em;
  height: 1.55em;
  border: 1px solid #8d9870;
  background: #edf2c8;
  font-size: 0.95rem;
}

body[data-page="period"] #btnForecastLatest{
  min-width: 40px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid #9a9a9a;
  background: #fff;
  cursor: pointer;
}