/* ========================================================
   帯ストリップ（③の下に追加する専用パーツ）のスタイル
   ③(calendar-week.css)と同じ色変数(--cal-*)があればそれを流用します。
   ======================================================== */

.calbs-widget,
.calbs-widget *,
.calbs-widget *::before,
.calbs-widget *::after {
  box-sizing: border-box;
}

.calbs-widget {
  --_border: var(--cal-border, #e3e1db);
  --_bg: var(--cal-bg, #ffffff);
  --_text: var(--cal-text, #2b2b28);
  --_muted: var(--cal-muted, #8a8a82);
  --_band-color: #3a8f6f;
  --_band-bg: rgba(58, 143, 111, 0.12);
  --_radius: var(--cal-radius, 8px);

  width: 100%;
  border: 1px solid var(--_border);
  border-top: none; /* ③の下枠と二重にならないようにする */
  border-radius: 0 0 var(--_radius) var(--_radius);
  background: var(--_bg);
  font-family: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  color: var(--_text);
  overflow: hidden;
  margin-top: -1px; /* weekの線と1本に重ねる */
}

/* ---- PC用: ③の矢印ボタン(40px)ぶんだけ左右を空け、日付列と幅を揃える ---- */
.calbs-desktop {
  display: flex;
  align-items: stretch;
  padding-bottom: 7px;
}

.calbs-spacer {
  flex: 0 0 40px;
}

.calbs-gantt {
  flex: 1;
  position: relative;
  padding: 8px 0;
}

.calbs-gantt--empty {
  padding: 16px 12px;
  text-align: center;
  font-size: 16px;
  color: var(--_muted);
}

.calbs-bar {
  position: absolute;
  box-sizing: border-box;
  display: flex;
  gap: 8px;
  min-width: 180px;
  padding: 8px;
  margin: 0 2px;
  border-radius: 8px;
  background: var(--band-item-bg, var(--_band-bg));
  border: 1px solid var(--_border);
  border-left: 4px solid var(--band-item-color, var(--_band-color));
  color: var(--_text);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.calbs-bar:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.calbs-bar-image {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 5px;
  background: #eee;
}

.calbs-bar-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.calbs-bar-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calbs-bar-period {
  font-size: 14px;
  font-weight: 600;
  color: var(--band-item-color, var(--_band-color));
  margin: 1px 0 3px;
  white-space: nowrap;
}

.calbs-bar-desc {
  font-size: 11px;
  line-height: 1.4;
  color: var(--_muted);
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ---- スマホ用: 縦積みのシンプルなカード一覧 ---- */
.calbs-mobile {
  display: none; /* PC幅では常に非表示 */
}

.calbs-mobile-card {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  background: var(--band-item-bg, transparent);
  border-bottom: 1px solid var(--_border);
  border-left: 4px solid var(--band-item-color, var(--_band-color));
  border-radius: var(--_radius);
  color: var(--_text);
  text-decoration: none;
  margin: 5px auto;
  width: 98%;
}

.calbs-mobile-card:last-child {
  border-bottom: none;
}

.calbs-mobile-card .calbs-bar-image {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
}

.calbs-mobile-card .calbs-bar-desc {
  -webkit-line-clamp: 2;
}

.calbs-mobile--empty {
  text-align: center;
  font-size: 12px;
  color: var(--_muted);
  padding: 14px 12px;
}

/* スマホ幅では、③自体が縦リストに切り替わり列の位置が無くなるため、
   帯もPC用のガント配置(列揃え)ではなく、縦積みカード一覧に切り替える */
@media (max-width: 640px) {
  .calbs-desktop {
    display: none;
  }

  .calbs-mobile {
    display: block;
  }
}