/* ============================================================
 * events.page.css（イベント一覧ページ専用）
 * - event.php には影響させないため、必ず .events-page でスコープする
 *
 * 【5か条チェック】
 * 1) インラインCSS/JS禁止：OK（外部CSSのみ）
 * 2) セキュリティ：OK（CSSのみで入力/出力なし）
 * 3) 監査ログ要否：対象外（CSS）
 * 4) 冒頭コメント整備：OK（本ヘッダ）
 * 5) 原則全文差し替え：本ファイル（全文）
 *
 * 【修正履歴】
 *  - 20260301_uidfix_mybooking：myBooking 対応
 *  - 20260302_cal_title：スマホカレンダーのタイトル表示改善
 *      font-size 11px→9px、padding縮小、letter-spacing追加
 *  - 20260302_cal_leftedge：タイトル左端詰め＋左色帯追加
 *  - 20260302_cal_statuscolor：状態色を「濃い背景＋白文字」に変更
 *  - 20260302_cal_fullwidth：ラベルをセル幅いっぱいに広げる
 *      cal-items の左右padding を完全ゼロに
 *      cal-item__label の左右padding も最小化（左帯3px+1px隙間のみ）
 *      → 右端の余白をなくし1〜2文字多く表示できるよう改善
 * ============================================================ */

/* ============================================================
 * 共通（このページ内だけ）
 * ============================================================ */
.events-page,
.events-page *{
  box-sizing:border-box;
}

.events-page{
  --cal-line: rgba(0,0,0,0.10);
  --cal-bg: #fff;

  --cal-sun-bg: rgba(255,0,0,0.06);
  --cal-sat-bg: rgba(0,80,255,0.06);
  --cal-hol-bg: rgba(255,0,0,0.10);

  --cal-today-ring: rgba(0,150,0,0.55);
  --cal-today-dot:  rgba(0,150,0,0.95);

  /* 状態色：スマホカレンダーのタイトルラベル用 */
  --ev-join-bg:    #1a8a1a;
  --ev-join-txt:   #ffffff;
  --ev-join-bar:   #0d5c0d;

  --ev-wait-bg:    #b8860b;
  --ev-wait-txt:   #ffffff;
  --ev-wait-bar:   #7a5800;

  --ev-prefav-bg:  #c85a00;
  --ev-prefav-txt: #ffffff;
  --ev-prefav-bar: #8c3c00;

  --ev-default-bg:  rgba(0,0,0,0.07);
  --ev-default-txt: inherit;
  --ev-default-bar: transparent;

  /* PC（チップ）用は薄めのまま維持 */
  --ev-pc-join-bg:    rgba(0,180,0,0.18);
  --ev-pc-join-bar:   #00b400;
  --ev-pc-wait-bg:    rgba(220,160,0,0.22);
  --ev-pc-wait-bar:   #d4a000;
  --ev-pc-prefav-bg:  rgba(230,100,0,0.20);
  --ev-pc-prefav-bar: #e06400;
}

/* ============================================================
 * ページング
 * ============================================================ */
.events-page nav.pg{
  display:flex;
  gap:10px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  margin:18px 0 28px;
}

.events-page nav.pg .pg-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:46px;
  height:46px;
  padding:0 14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  font-weight:800;
  font-size:16px;
  line-height:1;
  user-select:none;
  text-decoration:none;
  color:inherit;
}

.events-page nav.pg a.pg-link:hover{ background:#f7f7f7; }

.events-page nav.pg .pg-link.is-current{
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
}

.events-page nav.pg .pg-link.is-disabled{
  opacity:.45;
  pointer-events:none;
}

.events-page nav.pg .pg-ellipsis{
  padding:0 6px;
  opacity:.6;
}

/* 注意文 */
.events-page .ev-note{
  margin:10px 0 6px;
  color:rgba(0,0,0,0.65);
  font-size:14px;
}

@media (max-width: 720px){
  .events-page .ev-row__thumb{ display:none !important; }
}

/* ============================================================
 * カレンダー：ヘッダ
 * ============================================================ */
.events-page .cal-head{
  display:grid;
  grid-template-columns: auto 1fr auto;
  gap:10px;
  align-items:center;
  margin-bottom:10px;
}

.events-page .cal-center{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.events-page .cal-title{
  text-align:center;
  font-weight:900;
  font-size:18px;
  line-height:1.2;
}

.events-page .cal-today{ width:fit-content; }

/* ============================================================
 * ★凡例（legend）
 * ============================================================ */
.events-page .cal-legend{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:6px 0 10px;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:14px;
  background:#fff;
}

.events-page .cal-legend__left,
.events-page .cal-legend__right{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.events-page .cal-legend__chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
  height:26px;
  padding:0 10px;
  border-radius:999px;
  font-weight:900;
  font-size:13px;
  border:1px solid rgba(0,0,0,0.10);
  background:#fafafa;
}

.events-page .cal-legend__chip--sun{
  color:#b00020;
  background:rgba(255,0,0,0.06);
}
.events-page .cal-legend__chip--sat{
  color:#0b3d91;
  background:rgba(0,80,255,0.06);
}
.events-page .cal-legend__chip--hol{
  color:#b00020;
  background:rgba(255,0,0,0.10);
}

/* ★凡例バッジ：実際のタイトル表示と同じ「濃い背景＋白文字＋左帯」 */
.events-page .cal-legend__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:26px;
  padding:0 10px 0 8px;
  border-radius:4px;
  font-weight:900;
  font-size:12px;
  border:1px solid rgba(0,0,0,0.10);
}

.events-page .cal-legend__badge--join{
  background: var(--ev-join-bg);
  color: var(--ev-join-txt);
  border-left: 4px solid var(--ev-join-bar);
}
.events-page .cal-legend__badge--wait{
  background: var(--ev-wait-bg);
  color: var(--ev-wait-txt);
  border-left: 4px solid var(--ev-wait-bar);
}
.events-page .cal-legend__badge--fav{
  background: var(--ev-prefav-bg);
  color: var(--ev-prefav-txt);
  border-left: 4px solid var(--ev-prefav-bar);
}

/* ============================================================
 * カレンダー：ベース（PC）
 * ============================================================ */
.events-page .cal{
  width:100%;
}

.events-page .cal-week{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap:8px;
  margin:10px 0 10px;
}

.events-page .cal-weekday{
  text-align:center;
  font-weight:900;
  font-size:13px;
  line-height:1;
  padding:10px 0;
  border-radius:12px;
  background:#fafafa;
  border:1px solid rgba(0,0,0,0.08);
}

.events-page .cal-grid{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap:8px;
}

.events-page .cal-cell{
  position:relative;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:16px;
  min-height:120px;
  background:#fff;
  overflow:hidden;
}

.events-page .cal-cell--pad{
  background:transparent;
  border-color:transparent;
}

.events-page .cal-day{
  position:absolute;
  top:10px;
  left:10px;
  font-weight:900;
  font-size:13px;
  line-height:1;
  color:rgba(0,0,0,0.72);
}

.events-page .cal-items{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:34px 10px 10px;
}

.events-page .cal-more{
  font-size:12px;
  font-weight:800;
  color:rgba(0,0,0,0.65);
  padding:2px 4px;
}

/* ============================================================
 * ★土日祝（セル背景）
 * ============================================================ */
.events-page .cal-cell--sat{ background: var(--cal-sat-bg); }
.events-page .cal-cell--sat .cal-day{ color:#0b3d91; font-weight:900; }

.events-page .cal-cell--sun{ background: var(--cal-sun-bg); }
.events-page .cal-cell--sun .cal-day{ color:#b00020; font-weight:900; }

.events-page .cal-cell--hol{ background: var(--cal-hol-bg); }
.events-page .cal-cell--hol .cal-day{ color:#b00020; font-weight:900; }

/* 祝日名（PCはチップ） */
.events-page .cal-cell--hol::after{
  content: attr(data-holiday);
  position:absolute;
  top:8px;
  right:8px;
  font-size:11px;
  font-weight:800;
  color:rgba(176,0,32,0.85);
  background:rgba(255,255,255,0.75);
  padding:2px 6px;
  border-radius:999px;
  border:1px solid rgba(176,0,32,0.18);
  pointer-events:none;
}

/* ============================================================
 * ★今日（本日）：リング + ドット
 * ============================================================ */
.events-page .cal-cell--today{
  box-shadow: inset 0 0 0 2px var(--cal-today-ring);
}

.events-page .cal-cell--today::before{
  content:"";
  position:absolute;
  top:6px;
  left:6px;
  width:8px;
  height:8px;
  border-radius:999px;
  background: var(--cal-today-dot);
  box-shadow: 0 0 0 3px rgba(0,150,0,0.12);
  pointer-events:none;
}

.events-page .cal-cell--today .cal-day{
  color: rgba(0,120,0,1);
  font-weight:900;
}

/* ============================================================
 * ★カレンダーイベント（PC）：チップ風＋左帯
 * ============================================================ */
.events-page .cal-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  border-radius:6px;
  padding:2px 6px;
  background:#fff;
  border:1px solid rgba(0,0,0,0.06);
  border-left: 3px solid var(--ev-default-bar);
}

.events-page .cal-item.is-join,
.events-page .cal-item.cal-item--join{
  background: var(--ev-pc-join-bg);
  border-left: 3px solid var(--ev-pc-join-bar);
}

.events-page .cal-item.is-wait,
.events-page .cal-item.cal-item--wait{
  background: var(--ev-pc-wait-bg);
  border-left: 3px solid var(--ev-pc-wait-bar);
}

.events-page .cal-item.is-pre-fav,
.events-page .cal-item.cal-item--pre-fav{
  background: var(--ev-pc-prefav-bg);
  border-left: 3px solid var(--ev-pc-prefav-bar);
}

.events-page .cal-item:hover{ filter: brightness(0.97); }

.events-page .cal-item__label{
  display:inline-block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.events-page .cal-fav-mark{
  margin-left:4px;
  font-weight:900;
  font-size:12px;
  line-height:1;
  opacity:0.95;
}

/* ============================================================
 * 旧：バッジ（残置：互換用）
 * ============================================================ */
.events-page .cal-badges{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
}

.events-page .cal-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:18px;
  padding:0 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  border:1px solid rgba(0,0,0,0.10);
  background:#fff;
  line-height:1;
}

.events-page .cal-badge--join{ background:rgba(0,200,0,0.10); }
.events-page .cal-badge--wait{ background:rgba(255,140,0,0.12); }
.events-page .cal-badge--fav{  background:rgba(255,215,0,0.18); }

/* ============================================================
 * スマホの「リスト表示」だけヤマカラ風
 * ============================================================ */
@media (max-width: 640px){
  .events-page .ev-list{ display:block; }

  .events-page .ev-row.ev-row--m{
    display:block;
    background:#fff;
    border:1px solid rgba(0,0,0,0.08);
    border-radius:16px;
    padding:14px 14px 12px;
    margin:12px 0;
    box-shadow: 0 8px 18px rgba(0,0,0,0.04);
  }

  .events-page .ev-row.ev-row--m:active{ transform: translateY(1px); }

  .events-page .ev-rowm-head{
    display:flex;
    align-items:flex-start;
    gap:10px;
  }

  .events-page .ev-rowm-title{
    flex:1;
    font-weight:900;
    font-size:18px;
    line-height:1.25;
    letter-spacing:0.2px;
  }

  .events-page .ev-row.ev-row--m .ev-row__fav{
    flex:0 0 auto;
    margin-left:auto;
  }

  .events-page .ev-rowm-body{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    margin-top:10px;
  }

  .events-page .ev-rowm-left{
    flex:1;
    min-width:0;
  }

  .events-page .ev-rowm-line{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin:6px 0;
    color:rgba(0,0,0,0.72);
    font-size:14px;
    line-height:1.35;
  }

  .events-page .ev-rowm-ico{
    flex:0 0 auto;
    width:18px;
    text-align:center;
    opacity:0.85;
    transform: translateY(1px);
  }

  .events-page .ev-rowm-txt{
    flex:1;
    min-width:0;
    word-break:break-word;
  }

  .events-page .ev-row.ev-row--m .ev-row__organizer-link{
    font-weight:700;
    text-decoration:underline;
    text-underline-offset:3px;
  }

  .events-page .ev-rowm-right{
    flex:0 0 auto;
    display:flex;
    align-items:flex-start;
  }

  .events-page .ev-row.ev-row--m .ev-status-badge{
    min-width:108px;
    padding:10px 10px;
    border-radius:14px;
  }

  .events-page .ev-row.ev-row--m .ev-status-main{ font-weight:900; font-size:14px; }
  .events-page .ev-row.ev-row--m .ev-status-sub{ font-size:12px; opacity:0.9; }
}

/* ============================================================
 * ★スマホ：カレンダーを「フル幅 + 格子 + iOS風」へ
 * ============================================================ */
@media (max-width: 640px){

  /* フルブリード */
  .events-page .cal{
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: 0;
    padding-right: 0;
  }

  .events-page .cal-head{
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0 12px;
  }

  .events-page .cal-legend{
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  /* 曜日ヘッダ：罫線格子 */
  .events-page .cal-week{
    gap:0;
    margin:10px 0 0;
    border-top:1px solid var(--cal-line);
    border-left:1px solid var(--cal-line);
    background:var(--cal-bg);
    border-radius:0;
    overflow:hidden;
  }

  .events-page .cal-weekday{
    border-radius:0;
    background:transparent;
    padding:10px 0;
    font-size:12px;
    border-right:1px solid var(--cal-line);
    border-bottom:1px solid var(--cal-line);
  }

  /* 日付グリッド：罫線格子 */
  .events-page .cal-grid{
    gap:0;
    border-left:1px solid var(--cal-line);
    border-bottom:1px solid var(--cal-line);
    background:var(--cal-bg);
    border-radius:0;
    overflow:hidden;
  }

  .events-page .cal-cell{
    border-radius:0;
    border:0;
    border-right:1px solid var(--cal-line);
    border-bottom:1px solid var(--cal-line);
    min-height: 92px;
    overflow:hidden;
    background:#fff;
  }

  .events-page .cal-cell--pad{ background:#fff; }

  /* 土日祝背景 */
  .events-page .cal-cell--sun{ background: var(--cal-sun-bg); }
  .events-page .cal-cell--sat{ background: var(--cal-sat-bg); }
  .events-page .cal-cell--hol{ background: var(--cal-hol-bg); }

  /* 今日：リング + ドット */
  .events-page .cal-cell--today{
    box-shadow: inset 0 0 0 2px var(--cal-today-ring);
  }
  .events-page .cal-cell--today::before{
    top:4px;
    left:3px;
  }

  /* ★日付数字：上・左を詰める */
  .events-page .cal-day{
    top:4px;
    left:3px;
    font-size:11px;
  }

  /* 祝日名 */
  .events-page .cal-cell--hol::after{
    content: attr(data-holiday);
    position:absolute;
    top:4px;
    right:3px;
    background: transparent;
    border: 0;
    padding: 0;
    border-radius: 0;
    max-width: calc(100% - 28px);
    font-size:9px;
    font-weight:800;
    color: rgba(176,0,32,0.90);
    line-height: 1.15;
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    pointer-events:none;
  }

  /* ★イベント領域
   *   - padding-top: 日付数字の高さ分（18px）のみ
   *   - 左右padding: 完全ゼロ → セルの格子線ギリギリまで使う
   *   これが「右端に余白が残る」原因だったため全部ゼロにする */
  .events-page .cal-items{
    padding: 18px 0 2px;   /* ★ 左右は 0 */
    gap: 2px;
  }

  /* ============================================================
   * 縦テープ要素を確実に消す（保険）
   * ============================================================ */
  .events-page .cal-item .cal-item__bar,
  .events-page .cal-item .cal-item__tape,
  .events-page .cal-item .cal-item__stripe,
  .events-page .cal-item .cal-item__left,
  .events-page .cal-item .cal-item__mark,
  .events-page .cal-item .cal-item__marker{
    display:none !important;
    width:0 !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
  }

  .events-page .cal-item > :not(.cal-item__label):not(.cal-fav-mark){
    display:none !important;
  }

  /* ★イベント行：完全に枠なし・余白なし */
  .events-page .cal-item{
    border:0 !important;
    background:transparent !important;
    border-radius:0 !important;
    padding:0 !important;
    display:block !important;
    width:100% !important;
    margin:0 !important;
  }

  /* ============================================================
   * ★タイトルラベル
   *
   *   幅をセルいっぱいに広げるための設定：
   *   - width:100% かつ margin/padding の左右を極限まで削る
   *   - 左帯 border-left:3px の分だけ padding-left:4px を確保
   *   - 右は padding-right:0（テキストが途切れても … で表示される）
   *   - box-sizing:border-box により border-left も幅内に収まる
   * ============================================================ */
  .events-page .cal-item__label{
    display:block !important;
    width:100% !important;       /* ★ セル幅いっぱいに広げる */
    box-sizing:border-box !important;

    font-size:9px;
    font-weight:900;
    line-height:1.15;
    letter-spacing:-0.3px;

    margin:0 !important;
    /* ★ 左帯3px + テキスト隙間1px = 4px。右は 0 で余白なし */
    padding:1px 0 1px 4px !important;

    border-radius:0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    background: var(--ev-default-bg);
    color: var(--ev-default-txt);
    border-left: 3px solid var(--ev-default-bar);
  }

  /* ★参加（confirmed）：濃い緑背景 + 白文字 */
  .events-page .cal-item.is-join .cal-item__label,
  .events-page .cal-item.cal-item--join .cal-item__label{
    background:  var(--ev-join-bg);
    color:       var(--ev-join-txt);
    border-left: 3px solid var(--ev-join-bar);
  }

  /* ★キャンセル待ち（waiting）：濃い琥珀背景 + 白文字 */
  .events-page .cal-item.is-wait .cal-item__label,
  .events-page .cal-item.cal-item--wait .cal-item__label{
    background:  var(--ev-wait-bg);
    color:       var(--ev-wait-txt);
    border-left: 3px solid var(--ev-wait-bar);
  }

  /* ★募集前お気に入り：濃い橙背景 + 白文字 */
  .events-page .cal-item.is-pre-fav .cal-item__label,
  .events-page .cal-item.cal-item--pre-fav .cal-item__label{
    background:  var(--ev-prefav-bg);
    color:       var(--ev-prefav-txt);
    border-left: 3px solid var(--ev-prefav-bar);
  }

  /* 押した時に反応 */
  .events-page .cal-item:active .cal-item__label{
    filter: brightness(0.90);
  }

  /* ♥ */
  .events-page .cal-fav-mark{
    font-size:11px;
    font-weight:900;
    line-height:1;
    margin-left:2px;
  }

  .events-page .cal-more{
    font-size:11px;
    padding:0 2px;
  }

  /* カレンダー表示時に検索を隠す */
  .events-page[data-view="cal"] #filterForm{
    display:none !important;
  }
  
}

/* カレンダー表示時：検索エリアを非表示（PC/スマホ共通） */
.events-page[data-view="cal"] #filterForm{
  display:none !important;
}