/* album / photos の共通 filter chip + 年月 bar chart CSS
   /@{user} album section と /photos で共有 */

/* filter chip 横スクロール (PC でラベル消えない構造)。
   nav.album-filter > div.album-filter-scrollwrap > ul.pagination 構造で。 */
.album-filter {
  overflow: hidden;
}
.album-filter-scrollwrap {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.album-filter-scrollwrap > ul.pagination {
  display: flex;
  flex-wrap: nowrap !important;
  width: max-content;
  margin-bottom: 0;
}
.album-filter-scrollwrap > ul.pagination > .page-item {
  flex: 0 0 auto;
}

/* 年月 bar chart: 各年ごとに group 化、 group 内に bars row + 年ラベル button。
   年ラベルは bar 全幅に広がる wide tap target (mobile 対応)。 */
.photos-bars-inner {
  display: inline-flex;
  align-items: flex-end;
  gap: 4px;
  padding-bottom: 2px;
}
.photos-year-group {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  flex: 0 0 auto;
}
.photos-bars-row {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  min-height: 60px;
}
.photos-bar-col {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 10px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  flex: 0 0 auto;
}
.photos-bar {
  display: block;
  width: 6px;
  background: #b0c4de;
  border-radius: 2px 2px 0 0;
  min-height: 0;
  transition: background 0.1s;
}
.photos-bar-col:hover .photos-bar { background: #4a7fb8; }
.photos-bar-col.active .photos-bar { background: #0d6efd; }
.photos-year-group.year-only-active .photos-bar { background: #6c757d; }
.photos-year-label {
  margin-top: 2px;
  padding: 4px 2px;
  font-size: 11px;
  color: #666;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  text-align: center;
  line-height: 1;
  min-height: 24px;
}
.photos-year-label:hover {
  background: #f0f0f0;
  border-color: #ddd;
  color: #333;
}
.photos-year-label.active {
  background: #0d6efd;
  border-color: #0d6efd;
  color: white;
  font-weight: 500;
}

/* 期間 header column: 「📅 期間:」 label を上、 「全期間」 button を下に積む */
.photos-period-header {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  flex: 0 0 auto;
  margin-right: 4px;
  padding-right: 4px;
  border-right: 1px solid #eee;
}
.photos-period-label {
  font-size: 0.85em;
  color: #666;
  margin-bottom: 4px;
  white-space: nowrap;
  line-height: 1;
}
.photos-all-label {
  min-width: 56px;
  padding-left: 8px;
  padding-right: 8px;
}