/* =========================================================
   Event Header (title + meta bar)
   ========================================================= */

.event-head{
  display:flex;
  align-items:center;
  gap:12px;
}

/* h2 は他ページでも使うので、class で制御 */
.event-title{
  margin:0;           /* ← これが無いと上下余白がズレる */
  line-height:1.2;
}

/* meta bar は右寄せ・文字長に合わせる */
.event-meta-bar{
  margin-left:auto;   /* 右端へ */
  display:inline-flex;
  align-items:center;

  width:fit-content;  /* 文字長に合わせる */
  max-width:70%;

  padding:6px 10px;
  border-radius:10px;
  border:1px solid #e2e5ea;
  background:#f2f3f5;

  color:#444;
  font-size:0.95rem;
  line-height:1.2;
}

/* 文字が長いときは省略 */
.event-meta-text{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* 幹事モード：グレー背景を維持（hoverあり） */
.event-meta-bar.is-admin{
  background:rgba(0,0,0,0.08);
  border:1px solid rgba(0,0,0,0.08);
}
.event-meta-bar.is-clickable{ cursor:pointer; }
.event-meta-bar.is-admin.is-clickable:hover{
  background:rgba(0,0,0,0.12);
}

/* 一般モード：枠・背景・余白を完全に消す（表示は右寄せのまま） */
.event-meta-bar.is-public{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  outline:none !important;

  padding:0 !important;
  border-radius:0 !important;
}

/* 念のためテキスト側も潰す（どこかで装飾されても無効化） */
.event-meta-bar.is-public .event-meta-text{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
}

/* =========================================================
   [Event Page] cancelled tone down
   ========================================================= */

.event-page.is-cancelled {
  opacity: 0.72;
  filter: grayscale(0.25);
}

/* 文字が薄すぎる場合の救済（タイトルは少しだけ濃く） */
.event-page.is-cancelled .event-title,
.event-page.is-cancelled .section-title {
  opacity: 0.95;
}

/* キャンセルバッジ */
.event-cancel-badge {
  margin-left: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.18);
  background: rgba(0,0,0,0.06);
  color: #222;
  font-size: 0.9rem;
  line-height: 1.1;
  white-space: nowrap;
}

/* =========================================
   Event page: Member class select (inherit modal-select look)
   ========================================= */

.member-class-cell {
  /* テーブル内での縦位置がズレやすいので保険 */
  vertical-align: middle;
}

.member-class-select {
  /* 既存 modal-select の見た目を継承 */
  width: 100%;
  max-width: 140px; /* colgroup 140px に合わせる */
  box-sizing: border-box;

  padding: 8px 34px 8px 12px;  /* 右側は矢印分を確保 */
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;

  background: #f3f4f6;
  border: none;
  border-radius: 10px;

  color: #111;
  outline: none;
  box-shadow: none;

  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* ▼ 擬似矢印（wrap不要版：SVGを背景として描画） */
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<polyline points='6 9 12 15 18 9'/>\
</svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
}

/* focus時もモーダル寄せ */
.member-class-select:focus {
  background: #eef0f3;
}

/* disabled（guestで member_id なしのとき） */
.member-class-select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* =========================================
   Event page: Class (public mode) gray pill like comment
   ========================================= */

/* 一般モード：クラスは span なので背景を付ける */
.member-class-text{
  display: inline-block;
  width: 100%;
  max-width: 140px;          /* colgroupに合わせる。必要なら180pxへ */
  box-sizing: border-box;

  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;

  background: #f3f4f6;       /* modal-selectと同じグレー */
  border-radius: 10px;
  color: #111;

  /* 空欄でも高さを確保して見栄えを揃える */
  min-height: 34px;
}

/* 空欄のときは薄く（コメント欄の :empty 表示と同じ思想） */
.member-class-text:empty::before{
  content: " ";
}