/* タイムカード（打刻明細）。勤務実績とスタッフ画面で使う。紙のタイムカードと同じく出勤・退勤の見出しを青くする */
.timecard-wrap {
  width: 100%;
  overflow-x: auto;
}

.timecard {
  width: 100%;
  min-width: 360px;
  border-collapse: collapse;
  background: #ffffff;
  font-variant-numeric: tabular-nums;
}

.timecard th,
.timecard td {
  padding: 6px 10px;
  border: 1px solid #d5dcea;
  text-align: center;
  vertical-align: middle;
}

.timecard thead th {
  font-size: 13px;
  font-weight: 700;
  color: #3f4775;
  background: #eef2fa;
}

.timecard .timecard__main-head {
  color: #ffffff;
  background: #2f5fb3;
}

.timecard__label-head {
  width: 1%;
  white-space: nowrap;
}

.timecard__label {
  width: 1%;
  white-space: nowrap;
  font-weight: 700;
  color: #1f2937;
  background: #f8fafc;
}

.timecard__label-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}

.timecard__day {
  min-width: 2ch;
  text-align: right;
}

.timecard__weekday {
  font-size: 12px;
  font-weight: 400;
  color: #64748b;
}

.timecard__row--saturday .timecard__weekday,
.timecard__row--saturday .timecard__day { color: #2563eb; }
.timecard__row--sunday .timecard__weekday,
.timecard__row--sunday .timecard__day { color: #dc2626; }
.timecard__row--today .timecard__label { background: #fff7e6; }

.timecard__warning {
  flex: none;
}

/* 同じ日の2回目の勤務は、日付の区切り線より細い線で区切る */
.timecard__row:not(.timecard__row--day-start) td {
  border-top-style: dashed;
}

.timecard__time {
  min-width: 64px;
  font-size: 15px;
  color: #1f2937;
}

.timecard__time--main {
  font-weight: 700;
}

.timecard__stamp {
  display: block;
  white-space: nowrap;
}

.timecard__stamp + .timecard__stamp {
  margin-top: 2px;
}

.timecard__self-report {
  display: inline-block;
  margin-left: 4px;
  padding: 0 4px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #9a3412;
  background: #ffedd5;
  vertical-align: 1px;
}

.timecard__empty {
  color: #64748b;
}

@media (max-width: 600px) {
  .timecard th,
  .timecard td {
    padding: 5px 6px;
  }

  .timecard__time {
    min-width: 0;
    font-size: 14px;
  }
}

@media print {
  .timecard th,
  .timecard td {
    padding: 2px 6px;
    font-size: 11px;
  }

  .timecard .timecard__main-head,
  .timecard thead th {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}


/* 勤怠計算（印刷・全員のタイムカードで「勤怠計算もつける」とき） */
.timecard .timecard__calc-head {
  color: #3f4775;
  background: #e3e8f6;
}

.timecard__calc-value {
  min-width: 44px;
  font-size: 14px;
  color: #1f2937;
  text-align: right !important;
}

/* 打刻と勤怠計算のあいだに太めの線 */
.timecard--calc .timecard__calc:nth-child(1 of .timecard__calc) {
  border-left: 2px solid #9aa7c7;
}

.timecard__calc-segments {
  font-size: 13px;
  color: #1f2937;
  white-space: nowrap;
}

.timecard--calc .timecard__sub-head { white-space: nowrap; }

.timecard__calc-plan {
  min-width: 64px;
  font-size: 12px;
  color: #1f2937;
  text-align: left !important;
}

.timecard__calc-plan .timecard__stamp { white-space: normal; }

.timecard__calc-uncalculated {
  font-size: 12px;
  font-weight: 700;
  color: #9a3412;
}

.timecard-hide-calc .timecard__calc { display: none; }

@media print {
  .timecard--calc th,
  .timecard--calc td {
    padding: 2px 4px;
  }

  .timecard__calc-value,
  .timecard__calc-segments,
  .timecard__calc-plan { font-size: 11px; }

  /* 勤怠計算つきはA4縦に入るよう、打刻のマスを詰める */
  .timecard--calc .timecard__time { min-width: 0; }
  .timecard--calc .timecard__calc-value { min-width: 0; }
}