/* 土台 */
.orch-matrix-wrap {
  font-size: 18px;       /* ← 全体的に拡大（標準14→18） */
  line-height: 1.6;
  color: #111;
}

/* テーブル */
.orch-matrix { border-collapse: separate; border-spacing: 0; width:max-content; min-width:100%; table-layout: fixed; }
.orch-matrix th, .orch-matrix td {
  border-bottom:1px solid #eee;
  border-right:1px solid #eee;
  padding:8px 10px;
  text-align:center;
  white-space:nowrap;
  font-size: 1.05em;     /* ← 全体的に1段階大きく */
  color:#222;             /* ← 黒文字 */
}

/* ヘッダ列（イベント）を上部固定、白背景 */
.orch-matrix thead th {
  font-size: 1.1em;      /* ← イベントタイトル見やすく */
  position: sticky; top:0; z-index:2;
  background:#fff;        /* ← 白 */
  color:#111;
  font-weight:600;
}

/* イベント列幅 */
.orch-matrix .event-col { min-width: 160px; }
.orch-matrix .ev-date  { 
  font-size: 1.05em;     /* ← 読みやすく */
  font-weight:600;
  color:#111;
}
.orch-matrix .ev-title {
  font-size: 1.00em; 
  color:#666;
}

/* 縦セル（パート＋氏名） */
.orch-matrix .member-cell .mem-name {
  font-size: 1.1em;      /* ← 名前をより目立たせる */
  font-weight: 700;
   color:#111;
  }

/* 出欠セル（日本語ラベル表示） */
.att-cell {
  font-size: 1.1em;       /* ← 出席・欠席をより明確に */
  font-weight: 700;
}
.att-cell.attend  { color:#157347; } /* 出席=濃い緑 */
.att-cell.absent  { color:#b02a37; } /* 欠席=赤 */
.att-cell.late,
.att-cell.early   { color:#996c00; } /* 遅刻/早退=茶/黄系 */
.att-cell.unknown { color:#6c757d; } /* 未回答=グレー */


.orch-matrix-toolbar {
  position: sticky;
  top: 0;                 /* 管理バーに被る場合は 32px などに調整可 */
  z-index: 30;
  background: #ffffffcc;  /* うっすら半透明 */
  backdrop-filter: blur(4px);
  border-bottom: 1px solid #e5e7eb;
  padding: 8px 12px;
}
.orch-matrix-legend .legend-item { display:inline-block; margin-right: 10px; font-size: 12px; color:#222; }

/* 空/エラー表示 */
.orch-matrix-empty, .orch-matrix-error { padding: 12px; color:#444; }

/* スクロールコンテナ */
.orch-matrix-table {
  width: 100%;
  max-height: 68vh;       /* 必要に応じて高さ調整 */
  overflow: auto;          /* 縦横スクロール */
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  padding: 4px;
  color: #222;
  position: relative;     /* ← sticky の基準を安定させる */
}

/* ヘッダ（上端固定） */
.orch-matrix thead th {
  position: sticky;
  top: 0;
  z-index: 3;             /* 後述の左列より上 */
  background: #fff;
  color: #111;
  font-weight: 700;
  border-bottom: 1px solid #eee;
}

/* 左端の氏名列（横スクロールで固定） */
.orch-matrix .sticky-col {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fff;
  color: #111;
  text-align: left;
  min-width: 140px;
}

/* 左上の角（上＆左 両方固定） */
.orch-matrix thead th.corner-cell {
  left: 0;
  z-index: 5;             /* 最前面にして重なり順を解決 */
}

/* 出欠セル（日本語ラベルの前提） */
.att-cell { font-size: 14px; font-weight: 700; }

/* 出席：緑系の網掛け＋文字色も緑 */
.att-cell.attend {
  color: #157347;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(21, 115, 71, 0.10) 0px,
      rgba(21, 115, 71, 0.10) 6px,
      rgba(21, 115, 71, 0.20) 6px,
      rgba(21, 115, 71, 0.20) 12px
    );
}

/* 遅刻：黄土系（やや茶色寄り） */
.att-cell.late {
  color: #8a6d1d;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(138, 109, 29, 0.10) 0px,
      rgba(138, 109, 29, 0.10) 6px,
      rgba(138, 109, 29, 0.20) 6px,
      rgba(138, 109, 29, 0.20) 12px
    );
}

/* 早退：オレンジ寄り（明るく差別化） */
.att-cell.early {
  color: #c06014;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(192, 96, 20, 0.10) 0px,
      rgba(192, 96, 20, 0.10) 6px,
      rgba(192, 96, 20, 0.18) 6px,
      rgba(192, 96, 20, 0.18) 12px
    );
}

/* 欠席：背景なし、赤文字強調 */
.att-cell.absent {
  color: #b02a37;
  background: none;
}

/* 未回答：背景なし、グレー文字（入力未済を明示） */
.att-cell.unknown {
  color: #6c757d;
  background: none;
}


/* パート部分だけ文字装飾 */
.mem-name .mem-part {
  color: #0066cc;     /* ←目立たせたい色（青系） */
  font-weight: 700;   /* 太字 */
  font-size: 1.0em;   /* 少し小さめにしたいなら 0.9em〜1em */
  margin-right: 4px;  /* 氏名との間にすこし空白 */
}

/* リンクっぽく見せる */
.mem-link { text-decoration: underline; }

.att-cell.has-memo { position: relative; padding-right: 18px; }
.att-cell .memo-mark {
  margin-left: 6px;
  font-size: 0.9em;
  vertical-align: middle;
}

/* パートフィルター用 */

/* フィルタ全体の見た目をカード風に */
.orch-matrix-filter {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #f8fafc;              /* 薄いグレー */
  border: 1px solid #e5e7eb;         /* 明るい枠線 */
  border-radius: 12px;               /* 角丸 */
  padding: 8px 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

/* ラベルのタイポ */
.orch-matrix-filter label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 600;
  color: #475569;                    /* slate 系で少し落ち着いた色 */
  padding: 0;                        /* 以前のパディングは外す */
}

/* セレクト：角丸 + 立体感 + カスタム矢印 */
.orch-matrix-filter select {
  appearance: none;                  /* ネイティブ装飾を消す */
  -webkit-appearance: none;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: linear-gradient(#fff, #f8fafc);
  padding: 6px 28px 6px 10px;        /* 右は矢印分の余白を広めに */
  font-size: 20px;
  line-height: 1.2;
  outline: none;
  transition: border-color .15s, box-shadow .15s;

  /* 右端の▼をSVGで作る（濃すぎない黒） */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23222'><path d='M4 6l4 4 4-4'/></svg>");  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px;
}

/* ホバー/フォーカス時の手触り */
.orch-matrix-filter select:hover {
  border-color: #d1d5db;
}
.orch-matrix-filter select:focus {
  border-color: #60a5fa;             /* #3b82f6系でもOK */
  box-shadow: 0 0 0 3px rgba(59,130,246,.25);
}

.orch-matrix-viewport {
  max-height: calc(100vh - 220px); /* 余白やヘッダ高に合わせて調整 */
  overflow: auto;
}

/* スマホで横スクロール時に読みやすく */
@media (max-width: 600px) {
  .orch-matrix-wrap {
    font-size: 17px;      /* ← スマホ時さらに拡大 */
    line-height: 1.5;
    max-height: 80vh;
  }

  .orch-matrix th,
  .orch-matrix td {
    padding: 12px 10px;
  }

  .orch-matrix .ev-date {
    font-size: 1.0em;
  }

  .orch-matrix .ev-title {
    font-size: 1.0em;
  }

  .orch-matrix .mem-name {
    font-size: 1.0em;
  }

  .att-cell {
    font-size: 1.0em;
  }
  .orch-matrix-filter { gap: 8px; padding: 8px 10px; }
  .orch-matrix-filter label { font-size: 20px; }
  .orch-matrix-filter select { font-size: 20px; padding: 8px 32px 8px 12px; }
}