/* =========================================================
Simple Schedule Poll (MVP) front.css
v0.6.0+
========================================================= */

/* -------------------------
Layout / Typography
------------------------- */
.ssp-mvp-wrap{max-width:980px;margin:0 auto;padding:16px}
.ssp-mvp-h1{font-size:22px;margin:0 0 8px}
.ssp-mvp-h2{font-size:18px;margin:0 0 10px}
.ssp-mvp-meta{opacity:.8;margin-bottom:10px}
.ssp-mvp-desc{margin:12px 0}

/* -------------------------
Boxes / Inputs / Buttons
------------------------- */
.ssp-mvp-box{border:1px solid #ddd;border-radius:12px;padding:14px;margin:14px 0;background:#fff}
.ssp-mvp-input{width:100%;max-width:520px;padding:10px;border:1px solid #ccc;border-radius:10px}
.ssp-mvp-num{width:140px;padding:8px;border:1px solid #ccc;border-radius:10px}
.ssp-mvp-row{margin-top:10px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ssp-mvp-btn{padding:10px 14px;border:1px solid #333;border-radius:12px;background:#f7f7f7;cursor:pointer}
.ssp-mvp-btn-primary{border-color:#0a58ca}
.ssp-mvp-savehint{opacity:.8}
.ssp-mvp-muted{opacity:.75}
.ssp-mvp-error{color:#b00020}
.ssp-mvp-warn{padding:10px;border-radius:10px;background:#fff3cd;border:1px solid #ffe69c;margin:10px 0}

/* -------------------------
Participants
------------------------- */
.ssp-mvp-pgrid{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ssp-mvp-pill{padding:8px 12px;border:1px solid #666;border-radius:999px;background:#fff;cursor:pointer}
.ssp-mvp-pill.is-active{border-width:2px}
.ssp-mvp-pillrow{display:flex;gap:8px;align-items:center}
.ssp-mvp-details{margin-top:10px}
.ssp-mvp-join{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap}

/* =========================================================
Tables: scroll container
========================================================= */
.ssp-mvp-tablewrap{
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  z-index: 1;
}

/* =========================================================
Tables: base
========================================================= */
.ssp-mvp-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:720px;
}

.ssp-mvp-table th,
.ssp-mvp-table td{
  border:1px solid #e2e2e2;
  padding:8px;
  white-space:nowrap;
  background:#fff;
  color:inherit;

  position: relative;
  z-index: 1;
}

/* =========================================================
Sticky header + first column
========================================================= */
.ssp-mvp-table thead th{
  position: sticky;
  top: 0;                 /* ★全角スペース混入を修正 */
  z-index: 10;
  background: #fff;
}

.ssp-mvp-table th:first-child,
.ssp-mvp-table td:first-child{
  position: sticky;
  left: 0;
  z-index: 20;
  background: #fff;
  box-shadow: 2px 0 0 rgba(0,0,0,0.06);
}

.ssp-mvp-table thead th:first-child{
  z-index: 30;
}

/* -------------------------
Mobile: slightly compact
------------------------- */
@media (max-width:600px){
  .ssp-mvp-table{ min-width:640px; }
  .ssp-mvp-table th,
  .ssp-mvp-table td{ font-size:14px; }
}

/* -------------------------
Buttons (symbol)
------------------------- */
.ssp-mvp-btn3{display:flex;gap:6px}
.ssp-mvp-btn3 button{padding:8px 12px;border:1px solid #666;border-radius:10px;background:#fff;cursor:pointer}
.ssp-mvp-btn3 button.is-on{border-width:2px}

/* -------------------------
Choice buttons
------------------------- */
.ssp-mvp-choice{display:flex;flex-wrap:wrap;gap:8px}
.ssp-mvp-choice button{
  border:1px solid #d0d7de;
  background:#fff;
  border-radius:999px;
  padding:8px 14px;
  line-height:1;
  cursor:pointer;
}
.ssp-mvp-choice button.is-on{border-color:#111;font-weight:700}
.ssp-mvp-choice button:disabled{opacity:.5;cursor:not-allowed}

/* -------------------------
Comments
------------------------- */
.ssp-mvp-comments{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.ssp-mvp-comment{border:1px solid #e2e2e2;border-radius:12px;padding:10px;background:#fafafa}
.ssp-mvp-comment-head{font-weight:600;margin-bottom:6px}
.ssp-mvp-comment-body{white-space:pre-wrap}
.ssp-mvp-matrix tr.is-me td{font-weight:600}
.ssp-mvp-matrix tr.is-me td{outline:2px solid #999; outline-offset:-2px}

/* -------------------------
Save hint states
------------------------- */
#sspSaveHint.is-dirty{
  font-weight:700;
  color:#b00020;
  padding:2px 8px;
  border-radius:6px;
  background:rgba(176,0,32,0.08);
}
#sspSaveHint.is-closed{ font-weight:600; }

.ssp-mvp-closed{
  padding:12px 14px;
  border:1px solid rgba(0,0,0,.12);
  border-left:4px solid #d63638;
  border-radius:10px;
  background:rgba(214,54,56,.06);
  margin:10px 0 14px;
  line-height:1.5;
}

/* =========================================================
Readability helpers (省略表示)
========================================================= */
.ssp-mvp-ell{
  display:block;              /* ★省略を安定させる */
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* =========================================================
Input / Agg tables: tighten first column
========================================================= */
.ssp-mvp-table.ssp-mvp-table-tightfirst{
  table-layout: fixed;
  margin-top: 10px;
}

.ssp-mvp-table.ssp-mvp-table-tightfirst th:first-child,
.ssp-mvp-table.ssp-mvp-table-tightfirst td:first-child{
  width:auto;
  min-width:0;
  max-width:none;
}

/* =========================================
2) スマホ：入力テーブルを“画面内に収める”
- 横スクロールしない
- 1列目sticky解除
- 入力セルを詰める
========================================= */
@media (max-width:600px){
  /* 入力テーブルだけ min-width を解除して画面幅に */
  .ssp-mvp-table-input{
    min-width: 0;
    width: 100%;
    table-layout: fixed; /* 2列レイアウトを安定させる */
  }

  /* 入力：列幅（候補:入力） */
  .ssp-mvp-table-input th:first-child,
  .ssp-mvp-table-input td:first-child{
    width: 46%;
    min-width: 0;
    max-width: none;
  }
  .ssp-mvp-table-input th:nth-child(2),
  .ssp-mvp-table-input td:nth-child(2){
    width: 54%;
  }

  /* sticky解除（入力テーブルだけ） */
  .ssp-mvp-table-input thead th{
    position: static;
  }
  .ssp-mvp-table-input th:first-child,
  .ssp-mvp-table-input td:first-child{
    position: static;
    box-shadow: none;
  }

  /* セルの余白を少し詰める */
  .ssp-mvp-table-input th,
  .ssp-mvp-table-input td{
    padding: 6px 6px;
  }

  /* 入力部品も縮める（数値/choice/○△×） */
  .ssp-mvp-table-input .ssp-mvp-num{
    width: 100%;
    max-width: 120px;
  }
  .ssp-mvp-table-input .ssp-mvp-btn3 button,
  .ssp-mvp-table-input .ssp-mvp-choice button{
    padding: 6px 10px;
  }
}

/* 入力/集計（matrix以外）：2列目は残り幅 */
.ssp-mvp-table.ssp-mvp-table-tightfirst:not(.ssp-mvp-matrix) th:nth-child(2),
.ssp-mvp-table.ssp-mvp-table-tightfirst:not(.ssp-mvp-matrix) td:nth-child(2){
  width:auto;
}

/* =========================================================
Input table date cell: full + wrap (改行OK)
========================================================= */
td.ssp-input-date{
  white-space: normal;
  word-break: break-word;
  line-height: 1.35;
}
.ssp-input-date-text{
  white-space: normal;
  word-break: break-word;
}

/* =========================================================
Matrix: width policy
========================================================= */
.ssp-mvp-table.ssp-mvp-matrix{
  table-layout: fixed;
  margin-top: 10px;
}

@media (min-width:601px){
  .ssp-mvp-table.ssp-mvp-matrix{
    width: 100%;
    min-width: 720px;
  }
}

@media (max-width:600px){
  .ssp-mvp-table.ssp-mvp-matrix{
    width: max-content;
    min-width: 0;
  }
/*スマホではmatrix th 日付を改行*/
  .ssp-mvp-table.ssp-mvp-matrix th.ssp-mvp-col-date{
  width:110px;
  min-width:110px;
  max-width:110px;
  white-space: wrap;
}
}

/* 名前列幅 */
.ssp-mvp-table.ssp-mvp-matrix th.ssp-mvp-col-name,
.ssp-mvp-table.ssp-mvp-matrix td.ssp-mvp-col-name{
  width:110px;
  min-width:110px;
  max-width:110px;
  white-space: wrap;
}

/* 日付列幅（thで幅決定） */
.ssp-mvp-table.ssp-mvp-matrix th.ssp-mvp-col-date{
  width:110px;
  min-width:110px;
  max-width:110px;
}

/* 回答一覧（日付ヘッダ）は1行で */
/*.ssp-mvp-matrix th{
  white-space: nowrap;
}*/

/* matrix内の省略spanは block にしない（縦積み防止） */
.ssp-mvp-matrix th .ssp-mvp-ell{
  display: inline-block !important;
  vertical-align: middle;
}

/* =========================================
Date wrap (Agg/Matrix): always full + wrap
- 集計/回答一覧の候補日は PC/スマホ共通で改行OK
- 入力は既存の .ssp-input-date を継続
========================================= */

/* 候補日セル：改行許可 */
.ssp-date-wrap{
  white-space: nowrap !important;   /* テーブル基本 nowrap を上書き */
  /*word-break: break-word;*/
  line-height: 1.35;
}

/* 中のテキストも念のため */
.ssp-date-wrap-text{
  white-space: normal;
  /*word-break: break-word;*/
  display: block;
}

/* matrixのヘッダにも強制で効かせる（テーマ干渉対策） */
.ssp-mvp-table.ssp-mvp-matrix th.ssp-date-wrap{
  white-space: normal !important;
}

/* テーマ側が td/th の padding-left:0 を強制している対策
→ SSPのテーブルだけ左余白を戻す */
.ssp-mvp-wrap .ssp-mvp-table th,
.ssp-mvp-wrap .ssp-mvp-table td{
  padding-left: 8px;
  padding-right: 8px;
}

/* =========================================
1) 候補セル：PCは改行なし / スマホは改行あり
========================================= */

/* PC（既定）：改行しない */
.ssp-mvp-table-input td.ssp-input-date,
.ssp-mvp-table-input td.ssp-input-date .ssp-input-date-text,
.ssp-mvp-table-agg td.ssp-mvp-col-date{
  white-space: nowrap;
}

/* スマホ：候補セルだけ改行OK */
@media (max-width:600px){
  .ssp-mvp-table-input td.ssp-input-date,
  .ssp-mvp-table-input td.ssp-input-date .ssp-input-date-text,
  .ssp-mvp-table-agg td.ssp-mvp-col-date{
    white-space: normal;
    word-break: break-word;
    line-height: 1.35;
  }
}

/* =========================================
3) スマホ：集計テーブルの2列目以降を細く見せる
- 内容（短い語）に合わせて縮む方向
========================================= */
@media (max-width:600px){
  .ssp-mvp-table-agg{
    min-width: 0;
    width: 100%;
    table-layout: auto; /* 内容に合わせる（重要） */
  }

  .ssp-mvp-table-agg th,
  .ssp-mvp-table-agg td{
    padding: 6px 6px;
    font-size: 13px;
  }

  /* 2列目以降は“短い文字前提”で少しタイトに */
  .ssp-mvp-table-agg th:not(:first-child),
  .ssp-mvp-table-agg td:not(:first-child){
    white-space: nowrap;
  }
}

/* =========================================
入力テーブルだけ：1列目固定幅(120px)を解除
→ PCでも省略せず全文を見せる（中身なりの幅）
========================================= */
.ssp-mvp-table.ssp-mvp-table-input{
  table-layout: auto;      /* fixed を解除（中身で幅決定） */
  min-width: 0;            /* 720px 強制も解除しておく（必要に応じて） */
}

/* tightfirst の first-child 幅指定を入力テーブルだけ無効化 */
.ssp-mvp-table.ssp-mvp-table-input th:first-child,
.ssp-mvp-table.ssp-mvp-table-input td:first-child{
  width: auto;
  min-width: 0;
  max-width: none;
}

/* =========================================
CSV buttons (small version)
========================================= */
#sspCsvMatrixWide,
#sspCsvMatrixTrans,
#sspCsvAgg{
  padding: 6px 10px !important;
  font-size: 13px !important;
  border-radius: 10px !important;
  border: 1px solid #bbb !important;
  background: #fff !important;
  line-height: 1.2;
  width: auto !important;
}

/* hover */
#sspCsvMatrixWide:hover,
#sspCsvMatrixTrans:hover,
#sspCsvAgg:hover{
  border-color: #111 !important;
}

/* もしテーマ側で極端に大きくされる場合の保険 */
#sspCsvAgg,
#sspCsvWide,
#sspCsvTrans{
  width: auto !important;
}

/* =========================================
Matrix toggle: make tabs look like buttons
========================================= */
#sspMatrixTabs{
  display: flex;
  gap: 8px;
  margin: 10px 0 14px;
  flex-wrap: wrap;
}

#sspMatrixTabs .ssp-mvp-tab{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  font-size: 13px;
  border-radius: 999px;
  border: 1px solid #bbb;
  background: #fff;
  text-decoration: none;
  line-height: 1;
}

#sspMatrixTabs .ssp-mvp-tab:hover{
  border-color: #111;
}

#sspMatrixTabs .ssp-mvp-tab.is-on{
  border-color: #111;
  font-weight: 700;
  background: rgba(0,0,0,0.06);
}

/* =========================================
Matrix(転置) の 1列目(候補日) は改行ありにする
- PC/スマホ共通
========================================= */
.ssp-mvp-matrix-trans td.ssp-mvp-col-date:first-child,
.ssp-mvp-matrix-trans th.ssp-mvp-col-date:first-child{
  white-space: normal !important;     /* nowrap を打ち消す */
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

/* ついでに、転置テーブルの1列目だけ「省略」もしない */
.ssp-mvp-matrix-trans td.ssp-mvp-col-date:first-child .ssp-mvp-ell,
.ssp-mvp-matrix-trans th.ssp-mvp-col-date:first-child .ssp-mvp-ell{
  white-space: normal !important;
}