/*
  振替表・教室時間割テーブル（school-table）
  - 読込: views/_share/stylesheets.ejs（トップページ振替表カード）
  - Socket.io（hurikaeRoomIn/henkou）で DOM 更新されるセルに .mark-* / .bg-* を JS 付与
  - 450px / 768px ブレークポイントでフォント・テーブル高さを切替
*/

/* 振替表・時間割テーブルの文字サイズ段階 */
.school-table {
  height: auto;
}

/* 振替表・時間割テーブルの文字サイズ段階 */
.font-s-head {
  font-size: 10px;
  color: rgb(102, 102, 102);
}

/* 振替表・時間割テーブルの文字サイズ段階 */
.font-m-head {
  font-size: 12px;
  font-weight: 500;
  color: rgb(0, 0, 0);
}

/* 振替表・時間割テーブルの文字サイズ段階 */
.font-l-head {
  font-size: 15px;
  font-weight: 500;
  color: rgb(0, 0, 0);
}

/* 振替表・時間割テーブルの文字サイズ段階 */
.font-xl-head {
  font-size: 20px;
  font-weight: 500;
  color: #000;
}

/* 振替表・時間割テーブルの文字サイズ段階 */
.member-font {
  font-size: 11px;
}

/* school-time のレイアウト・表示スタイル */
.school-time {
  background-color: rgb(173, 173, 173);
  height: 200px;
}

/* zero-member のレイアウト・表示スタイル */
.zero-member {
  background-color: rgba(193, 193, 193, 0.699);
}

/* newfriend のレイアウト・表示スタイル */
.newfriend {
  background: linear-gradient(transparent 80%, #99ccff 0%);
}

/* none のレイアウト・表示スタイル */
.none {
  display: none;
}

/* scmarker のレイアウト・表示スタイル */
.scmarker {
  background: linear-gradient(transparent 40%, #6cffce76 40%);
}

/* school-mark のレイアウト・表示スタイル */
.school-mark {
  font-size: 10px;
}

/* hedder-mark のレイアウト・表示スタイル */
.hedder-mark {
  font-size: 10px;
}

/* 振替表セル上のマーカー色・背景色（JS が class 切替） */
.mark-set-btn {
  font-size: 10px;
}

/* checkAttend のレイアウト・表示スタイル */
.checkAttend {
  background-image: linear-gradient(
    1deg,
    rgba(212, 241, 243, 1),
    rgba(179, 218, 253, 1)
  );
}

/* sohgoh-red のレイアウト・表示スタイル */
.sohgoh-red {
  color: #d71718;
}

/* 振替表セル上のマーカー色・背景色（JS が class 切替） */
.mark-blue {
  color: #0000cd;
}

/* 振替表セル上のマーカー色・背景色（JS が class 切替） */
.mark-green {
  color: #008000;
}

/* 振替表セル上のマーカー色・背景色（JS が class 切替） */
.mark-yellow {
  color: #ffd700;
}

/* 振替表セル上のマーカー色・背景色（JS が class 切替） */
.mark-orange {
  color: #ff8c00;
}

/* 振替表セル上のマーカー色・背景色（JS が class 切替） */
.mark-purple {
  color: #9370db;
}

/* 振替表セル上のマーカー色・背景色（JS が class 切替） */
.mark-pink {
  color: #ff69b4;
}

/* 振替表セル上のマーカー色・背景色（JS が class 切替） */
.mark-cyan {
  color: #00ced1;
}

/* 振替表セル上のマーカー色・背景色（JS が class 切替） */
.bg-blue {
  background-color: #0000cd;
}

/* ホバー・フォーカス時の視覚フィードバック */
.bg-blue:hover {
  background-color: #0000a0;
}

/* 振替表セル上のマーカー色・背景色（JS が class 切替） */
.bg-sg-red {
  background-color: #d71718;
}

/* ホバー・フォーカス時の視覚フィードバック */
.bg-sg-red:hover {
  background-color: #a01212;
}

/* 振替表セル上のマーカー色・背景色（JS が class 切替） */
.bg-yellow {
  background-color: #ffd700;
}

/* ホバー・フォーカス時の視覚フィードバック */
.bg-yellow:hover {
  background-color: #ccac00;
}

/* 振替表セル上のマーカー色・背景色（JS が class 切替） */
.bg-green {
  background-color: #008000;
}

/* ホバー・フォーカス時の視覚フィードバック */
.bg-green:hover {
  background-color: #006600;
}

/* 振替表セル上のマーカー色・背景色（JS が class 切替） */
.bg-orange {
  background-color: #ff8c00;
}

/* ホバー・フォーカス時の視覚フィードバック */
.bg-orange:hover {
  background-color: #cc7000;
}

/* 振替表セル上のマーカー色・背景色（JS が class 切替） */
.bg-purple {
  background-color: #9370db;
}

/* ホバー・フォーカス時の視覚フィードバック */
.bg-purple:hover {
  background-color: #7559af;
}

/* 振替表セル上のマーカー色・背景色（JS が class 切替） */
.bg-pink {
  background-color: #ff69b4;
}

/* ホバー・フォーカス時の視覚フィードバック */
.bg-pink:hover {
  background-color: #cc5490;
}

/* 振替表セル上のマーカー色・背景色（JS が class 切替） */
.bg-cyan {
  background-color: #00ced1;
}

/* ホバー・フォーカス時の視覚フィードバック */
.bg-cyan:hover {
  background-color: #00a5a7;
}

/* 振替表セル上のマーカー色・背景色（JS が class 切替） */
.bg-brown {
  background-color: #8b4513;
}

/* ホバー・フォーカス時の視覚フィードバック */
.bg-brown:hover {
  background-color: #6e370f;
}

/* 振替表セル上のマーカー色・背景色（JS が class 切替） */
.boder-purple {
  border-color: #9370db;
}

/* 振替表セル上のマーカー色・背景色（JS が class 切替） */
.boder-pink {
  border-color: #ff69b4;
}

/* 振替表セル上のマーカー色・背景色（JS が class 切替） */
.boder-cyan {
  border-color: #00ced1;
}

/* 振替表セル上のマーカー色・背景色（JS が class 切替） */
.boder-brown {
  border-color: #8b4513;
}

/* 振替表セル上のマーカー色・背景色（JS が class 切替） */
.boder-orange {
  border-color: #ff8c00;
}

/* 振替表セル上のマーカー色・背景色（JS が class 切替） */
.boder-green {
  border-color: #008000;
}

/* 振替表セル上のマーカー色・背景色（JS が class 切替） */
.boder-blue {
  border-color: #0000cd;
}

/* 振替表セル上のマーカー色・背景色（JS が class 切替） */
.boder-red {
  border-color: #d71718;
}

/* 振替表セル上のマーカー色・背景色（JS が class 切替） */
.boder-yellow {
  border-color: #ffd700;
}

/* 定員超過・満員の視覚表示 */
.capacity-over {
  color: #ff4500;
}

/* 定員超過・満員の視覚表示 */
.capacity-true {
  color: #4169e1;
}

/* タブレット以下：レイアウトを縦積み・全幅化 */
@media screen and (min-width: 450px) and (max-width: 768px) {
  /* 768pxまでの幅の場合に適応される */
  .school-table {
    height: auto;
  }

  /* 振替表・時間割テーブルの文字サイズ段階 */
  .font-s-head {
    font-size: 7px;
    color: rgb(102, 102, 102);
  }

  /* 振替表・時間割テーブルの文字サイズ段階 */
  .font-m-head {
    font-size: 9px;
    font-weight: 500;
    color: rgb(0, 0, 0);
  }

  /* 振替表・時間割テーブルの文字サイズ段階 */
  .font-l-head {
    font-size: 12px;
    font-weight: 500;
    color: rgb(0, 0, 0);
  }

  /* 振替表・時間割テーブルの文字サイズ段階 */
  .font-xl-head {
    font-size: 15px;
    font-weight: 500;
    color: #000;
  }

  /* 振替表・時間割テーブルの文字サイズ段階 */
  .member-font {
    font-size: 11px;
  }

  /* school-time のレイアウト・表示スタイル */
  .school-time {
    background-color: rgb(173, 173, 173);
    height: 200px;
  }

  /* zero-member のレイアウト・表示スタイル */
  .zero-member {
    background-color: rgba(193, 193, 193, 0.699);
  }

  /* school-mark のレイアウト・表示スタイル */
  .school-mark {
    font-size: 9px;
  }

  /* hedder-mark のレイアウト・表示スタイル */
  .hedder-mark {
    font-size: 12px;
  }

  /* 振替表セル上のマーカー色・背景色（JS が class 切替） */
  .mark-set-btn {
    font-size: 10px;
  }
}

/* スマホ幅：コンパクト表示・タップ領域調整 */
@media screen and (max-width: 450px) {
  /* 450pxまでの幅の場合に適応される */
  .school-table {
    min-height: 300px;
    max-height: 400px;
    overflow-y: scroll;
  }

  /* 振替表・時間割テーブルの文字サイズ段階 */
  .font-s-head {
    font-size: 11px;
    color: rgb(102, 102, 102);
  }

  /* 振替表・時間割テーブルの文字サイズ段階 */
  .font-m-head {
    font-size: 13px;
    font-weight: 500;
    color: rgb(0, 0, 0);
  }

  /* 振替表・時間割テーブルの文字サイズ段階 */
  .font-l-head {
    font-size: 14px;
    font-weight: 500;
    color: rgb(0, 0, 0);
  }

  /* 振替表・時間割テーブルの文字サイズ段階 */
  .font-xl-head {
    font-size: 16px;
    font-weight: 500;
    color: #000;
  }

  /* 振替表・時間割テーブルの文字サイズ段階 */
  .member-font {
    font-size: 12px;
  }

  /* school-time のレイアウト・表示スタイル */
  .school-time {
    background-color: rgb(173, 173, 173);
    height: 200px;
  }

  /* zero-member のレイアウト・表示スタイル */
  .zero-member {
    background-color: rgba(193, 193, 193, 0.699);
  }

  /* school-mark のレイアウト・表示スタイル */
  .school-mark {
    font-size: 9px;
  }

  /* hedder-mark のレイアウト・表示スタイル */
  .hedder-mark {
    font-size: 12px;
  }

  /* 振替表セル上のマーカー色・背景色（JS が class 切替） */
  .mark-set-btn {
    font-size: 12px;
  }
}