/* static/signage/style.css
   受付モニター: 白基調。1行=1時間（時間/担当/予定）の時間割＋動画＋アニメーション。 */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  background: #ffffff; color: #222;
  font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  overflow: hidden;
}

.view { position: absolute; inset: 0; width: 100vw; height: 100vh; }
.hidden { display: none; }

/* 動画/静止画 */
#media-view { background: #ffffff; }
#media-view video, #media-view img {
  width: 100%; height: 100%; object-fit: contain; background: #ffffff;
}

/* 時間割 */
#timetable-view {
  padding: 3vh 4vw; display: flex; flex-direction: column; height: 100vh;
}
#tt-header {
  display: flex; align-items: baseline; justify-content: center;
  gap: 3vw; margin-bottom: 2.5vh;
}
#date-label { font-size: 5vh; color: #1b2a38; font-weight: bold; }
#clock {
  font-size: 5vh; color: #1b7f3b; font-weight: bold;
  font-variant-numeric: tabular-nums; letter-spacing: 0.2vw;
}
#timetable-wrap { flex: 1; min-height: 0; }

table.tt {
  width: 100%; height: 100%;
  border-collapse: collapse; table-layout: fixed;
  animation: fadeIn 0.6s ease;
}
table.tt th, table.tt td {
  border: 1px solid #d3d8de; text-align: center; font-size: 3.6vh;
}
table.tt th { background: #1b7f3b; color: #fff; padding: 1.2vh; font-size: 3.8vh; }

td.time { background: #eef1f4; color: #1b2a38; font-weight: bold; width: 24%; }
td.name { color: #1b2a38; font-weight: bold; width: 26%; font-size: 3.8vh; }

/* 予定セルの色（行の種別で出し分け） */
tr.free td.status { color: #1b7f3b; line-height: 1.25; }
tr.lesson td.status { background: #e8eef5; color: #2c3e50; font-weight: bold; }
.free-main { display: block; font-weight: bold; }
.free-sub { display: block; font-size: 2.1vh; margin-top: 0.5vh; color: #4a8c63; }

/* 現在の時間帯ハイライト（動き付き） */
tr.now td.time, tr.now td.name { background: #fff6d6; }
tr.lesson.now td.status { color: #fff; animation: pulseRed 1.6s ease-in-out infinite; }
tr.free.now td.status { color: #fff; animation: pulseGreen 1.6s ease-in-out infinite; }
tr.free.now td.status .free-main { color: #fff; }
tr.free.now td.status .free-sub { color: #eaffea; }

/* レッスン中の点滅ドット */
.live-dot {
  display: inline-block; width: 1.6vh; height: 1.6vh; border-radius: 50%;
  background: #fff; margin-right: 0.8vw; vertical-align: middle;
  animation: blink 1s step-start infinite;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes blink { 50% { opacity: 0.2; } }
@keyframes pulseRed {
  0%, 100% { background: #d8453a; }
  50% { background: #f0685c; }
}
@keyframes pulseGreen {
  0%, 100% { background: #1f9d4d; }
  50% { background: #2bbf63; }
}

/* 担当名はクリック可能（離席トグル） */
td.name { cursor: pointer; user-select: none; }
td.name.away { color: #c0392b; }

/* 離席中の行：予定欄は白地・赤文字・点滅なし */
tr.away td.status {
  background: #ffffff !important;
  color: #c0392b !important;
  font-weight: bold;
  animation: none !important;
}