/* 勤務実績の上に出す、締めの状態 */
.attendance-closing-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-bottom: 20px;
  padding: 14px 20px;
  border: 1px solid #d9dbea;
  border-radius: 10px;
  background: #fff;
}
.attendance-closing-status--closed { border-color: #b9dcc8; background: #f3faf6; }
.attendance-closing-status__main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.attendance-closing-status__badge {
  flex: 0 0 auto;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.attendance-closing-status__badge--closed { color: #fff; background: #27765a; }
.attendance-closing-status__badge--open { color: #8a5a00; background: #fdf0d2; }
.attendance-closing-status__text { margin: 0; color: #3f4775; font-size: 14px; }
.attendance-closing-status__actions form { margin: 0; }
.attendance-closing-status__button {
  display: inline-block;
  padding: 9px 18px;
  border: 0;
  border-radius: 6px;
  color: #fff;
  background: #4f5d95;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.attendance-closing-status__button:hover { background: #3f4a7a; }
.attendance-closing-status__button--disabled,
.attendance-closing-status__button--disabled:hover { color: #8a93a6; background: #eceef4; cursor: not-allowed; }
.attendance-closing-status__button--secondary { border: 1px solid #cbd1df; color: #b4373b; background: #fff; }
.attendance-closing-status__button--secondary:hover { border-color: #b4373b; background: #fff5f5; }
.attendance-closing-status__logs { flex-basis: 100%; color: #596275; font-size: 13px; }
.attendance-closing-status__logs summary { cursor: pointer; }
.attendance-closing-status__logs ul { margin: 6px 0 0; padding-left: 20px; }

/* 勤務実績のCSVボタンより後に読まれるとは限らないので、クラスを重ねて強くする */

/* 締める前の確認画面 */
.attendance-closing-confirm { width: 100%; max-width: 760px; margin: 0 auto; padding: 24px; box-sizing: border-box; color: #263238; }
.attendance-closing-confirm__card { padding: 24px; border: 1px solid #d9dbea; border-radius: 10px; background: #fff; }
.attendance-closing-confirm__facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; margin: 0 0 20px; }
.attendance-closing-confirm__facts dt { color: #596275; font-weight: 700; }
.attendance-closing-confirm__facts dd { margin: 0; }
.attendance-closing-confirm__lead { margin: 0 0 8px; font-weight: 700; }
.attendance-closing-confirm__effects { margin: 0 0 20px; padding-left: 20px; line-height: 1.8; }
.attendance-closing-confirm__notice { padding: 12px 16px; border-radius: 6px; background: #f7f8fc; }
.attendance-closing-confirm__warnings { margin-bottom: 20px; padding: 12px 16px; border: 1px solid #f0c36d; border-radius: 6px; background: #fff8e8; }
.attendance-closing-confirm__warnings-title { margin: 0 0 6px; color: #8a5a00; font-weight: 700; }
.attendance-closing-confirm__warnings ul { margin: 0; padding-left: 20px; }
.attendance-closing-confirm__ok { margin: 0 0 20px; color: #27765a; font-weight: 700; }
.attendance-closing-confirm__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px 32px; }
.attendance-closing-confirm__actions form { margin: 0; }
.attendance-closing-confirm__back { color: #525b91; font-weight: 700; }
.attendance-closing-confirm__submit {
  padding: 10px 22px;
  border: 0;
  border-radius: 6px;
  color: #fff;
  background: #27765a;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.attendance-closing-confirm__submit:hover { background: #1f5f48; }

@media (max-width: 768px) {
  .attendance-closing-status { padding: 12px 16px; }
  .attendance-closing-status__main { align-items: flex-start; }
  .attendance-closing-status__actions { width: 100%; }
  .attendance-closing-status__button { width: 100%; box-sizing: border-box; text-align: center; }
  .attendance-closing-confirm { padding: 16px; }
}

/* 締めた月の1人の画面の、この人だけ解除・締め直す */
.person-closing { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 16px; padding: 10px 14px; border: 1px solid #d9dbea; border-radius: 10px; color: #3f4775; background: #f7f8fc; font-size: 14px; }
.person-closing--unlocked { border-color: #f0c36d; color: #6b4700; background: #fff8e8; }
/* 右上の大きなはんこ（締済）にボタンが隠れないよう、はんこのぶん右をあける */
@media (min-width: 769px) { .attendance-report__main:has(.attendance-closed-seal) .person-closing { margin-right: 140px; } }
.person-closing__text { flex: 1 1 320px; min-width: 0; margin: 0; line-height: 1.6; }
.person-closing__badge { display: inline-block; margin-right: 8px; padding: 1px 10px; border-radius: 999px; color: #fff; background: #b07a12; font-size: 13px; }
.person-closing__form { margin: 0; }
.person-closing__button { padding: 7px 16px; border: 1px solid #cbd1df; border-radius: 999px; color: #b4373b; background: #fff; font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.person-closing__button:hover { border-color: #b4373b; background: #fff5f5; }
.person-closing__button--reclose { border: 0; color: #fff; background: #27765a; }
.person-closing__button--reclose:hover { background: #1f5f48; }

/* 前の結果とのくらべ表（勤怠集計の下） */
.closing-comparison { margin-top: 12px; padding: 10px 14px; border: 1px solid #e3e6ec; border-radius: 10px; background: #fff; }
.closing-comparison__title { margin: 0 0 6px; color: #596275; font-size: 13px; font-weight: 700; }
.closing-comparison__scroll { overflow-x: auto; }
.closing-comparison__table { border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.closing-comparison__table th,
.closing-comparison__table td { padding: 4px 10px; border-bottom: 1px solid #eef0f4; text-align: left; white-space: nowrap; }
.closing-comparison__table thead th { color: #8a93a6; font-size: 12px; font-weight: 600; }
.closing-comparison__table tbody th { padding-right: 18px; color: #596275; font-weight: 600; }
.closing-comparison__table thead .closing-comparison__cell--changed { color: #8a5a00; font-weight: 700; }
.closing-comparison__table td.closing-comparison__cell--changed { color: #8a5a00; font-weight: 700; }
.closing-comparison__row--after td.closing-comparison__cell--changed { background: #fff3d6; }

@media print { .person-closing, .closing-comparison { display: none; } }

/* 締めの解除のモーダル（危ない操作なので赤で強く知らせる） */
.closing-reopen {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 7000;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.closing-reopen.is-open { display: flex; }
.closing-reopen__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .7); }
.closing-reopen__dialog {
  position: relative;
  width: min(600px, 100%);
  max-height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 28px;
  border-radius: 14px;
  color: #263238;
  background: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.closing-reopen__header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.closing-reopen__mark {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #fff;
  background: #b4373b;
  font-size: 22px;
  font-weight: 900;
}
.closing-reopen__title { margin: 0; color: #8f2327; font-size: 21px; }
.closing-reopen__danger {
  margin: 0 0 16px;
  padding: 10px 14px;
  border: 1px solid #f0b8b9;
  border-radius: 8px;
  color: #8f2327;
  background: #fff3f3;
  font-weight: 700;
}
.closing-reopen__closed-by { margin: 0 0 10px; color: #596275; font-size: 14px; }
.closing-reopen__effects { margin: 0 0 20px; padding-left: 20px; line-height: 1.75; }
.closing-reopen__effects li + li { margin-top: 6px; }
.closing-reopen__effects strong { color: #8f2327; }
.closing-reopen__form { margin: 0; padding-top: 18px; border-top: 1px solid #e3e6ec; }
.closing-reopen__label { display: block; margin-bottom: 8px; font-weight: 700; }
.closing-reopen__input {
  width: 9em;
  padding: 10px 12px;
  border: 2px solid #cbd1df;
  border-radius: 8px;
  font: inherit;
  font-size: 20px;
  letter-spacing: .4em;
  box-sizing: border-box;
}
.closing-reopen__input:focus { border-color: #b4373b; outline: none; }
.closing-reopen__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px 16px; margin-top: 20px; }
.closing-reopen__cancel,
.closing-reopen__submit {
  padding: 10px 22px;
  border-radius: 8px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.closing-reopen__cancel { border: 2px solid #8993a3; color: #364152; background: #fff; }
.closing-reopen__submit { border: 0; color: #fff; background: #b4373b; }
.closing-reopen__submit:hover { background: #8f2327; }
.closing-reopen__submit:disabled { color: #8a93a6; background: #eceef4; cursor: not-allowed; }

@media (max-width: 768px) {
  .closing-reopen { padding: 16px; }
  .closing-reopen__dialog { padding: 20px; }
  .closing-reopen__cancel,
  .closing-reopen__submit { flex: 1 1 auto; }
}