/* キオスク画面にはナビバーが無いので、ナビバー分を引かず画面いっぱいの高さにする */
.main-content:has(.kiosk) {
  height: 100dvh;
  padding: 0;
}

/* 全キオスク画面共通: ビューポート高に収める縦flexレイアウト。
   固定余白を使わず dvh ベースでスケールさせ、縦スクロールを不要にする */
.kiosk {
  box-sizing: border-box;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 2dvh, 24px);
  background: #f4f7f8;
  color: #17323b;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

.kiosk__version {
  position: fixed;
  right: 12px;
  bottom: 8px;
  color: #9aa8ad;
  font-size: 12px;
  letter-spacing: .04em;
}

.kiosk input,
.kiosk select {
  user-select: text;
  -webkit-user-select: text;
}

.kiosk__heading { cursor: default; }

/* 区分選択画面の時計（.kiosk-stamp__clock）と同じ大きさ */
.kiosk-scanner__clock {
  margin: clamp(8px, 1.6dvh, 18px) 0;
  font-size: clamp(44px, 9dvh, 92px);
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.kiosk--scanner .kiosk__heading h1 {
  margin-bottom: clamp(6px, 1.2dvh, 14px);
}

.kiosk__heading h1,
.kiosk--rescue h1 {
  margin: 0;
  font-size: clamp(24px, 4.2dvh, 46px);
}

.kiosk__heading p,
.kiosk--rescue > p {
  margin: 4px 0 0;
  font-size: clamp(15px, 2.2dvh, 22px);
}

/* スキャナは「残り高さ」いっぱいを使い、そこからアスペクト比で幅が決まる */
.kiosk-scanner-area {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: clamp(8px, 1.6dvh, 20px) 0;
}

.kiosk-scanner {
  position: relative;
  height: 100%;
  aspect-ratio: 4 / 3;
  max-width: min(88vw, 760px);
  overflow: hidden;
  border-radius: 24px;
  background: #172126;
}

.kiosk-scanner__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}

.kiosk-scanner__video--rear { transform: none; }

.kiosk-scanner__canvas { display: none; }

.kiosk-scanner__frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(48%, 360px);
  aspect-ratio: 1;
  border: 8px solid rgba(255, 255, 255, .9);
  border-radius: 24px;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 999px rgba(0, 0, 0, .22);
}

.kiosk-scanner__flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.kiosk-scanner__flash--active { animation: kiosk-flash .2s ease-out; }

@keyframes kiosk-flash {
  50% { background: rgba(100, 255, 175, .75); }
}

.kiosk-scanner__stopped {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  border: 0;
  background: rgba(10, 22, 28, .92);
  color: white;
  font-size: 24px;
}

.kiosk-scanner__stopped strong,
.kiosk-scanner__stopped span { display: block; margin: 12px; }

.kiosk__message,
.kiosk-stamp__message {
  min-height: clamp(26px, 3.4dvh, 34px);
  color: #b42318;
  font-size: clamp(18px, 2.4dvh, 24px);
  font-weight: 700;
}

.kiosk-logout {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 7000;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.kiosk-logout.is-open { display: flex; }
.kiosk-logout__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .65); }

.kiosk-logout__dialog {
  position: relative;
  width: min(560px, 100%);
  padding: 34px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
  text-align: center;
}

.kiosk-logout__title { margin: 0 0 24px; color: #27313d; font-size: clamp(23px, 4vw, 32px); }
.kiosk-logout__form { margin: 0; }

.kiosk-logout__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.kiosk-logout__button {
  min-height: 72px;
  border: 2px solid #8993a3;
  border-radius: 12px;
  background: #fff;
  color: #364152;
  font-size: 24px;
  font-weight: 700;
  cursor: pointer;
}

.kiosk-logout__button--submit { border-color: #b42318; color: #b42318; }

.kiosk-logout__camera { margin-top: 24px; padding-top: 24px; border-top: 1px solid #d5dae2; }
.kiosk-logout__button--camera { width: 100%; font-size: 20px; }
.kiosk-logout__button:focus { outline: 4px solid rgba(59, 130, 246, .3); outline-offset: 2px; }

/* 区分選択画面 */
.kiosk--stamp { gap: clamp(2px, .8dvh, 10px); }

.kiosk-stamp__clock {
  font-size: clamp(44px, 9dvh, 92px);
  font-weight: 700;
  line-height: 1.1;
}

.kiosk-stamp__greeting {
  margin: clamp(6px, 2dvh, 24px) 0 0;
  font-size: clamp(19px, 2.8dvh, 28px);
}

.kiosk-stamp__name {
  margin: 0;
  font-size: clamp(36px, 7dvh, 78px);
  line-height: 1.2;
}

.kiosk-stamp__prompt {
  margin: 0;
  font-size: clamp(17px, 2.4dvh, 24px);
}

.kiosk-stamp__actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-content: center;
  gap: clamp(14px, 2.4dvh, 24px);
  width: min(100%, 1100px);
  margin: clamp(10px, 2.8dvh, 34px) auto;
}

.kiosk-stamp__action {
  position: relative;
  width: 100%;
  min-height: clamp(84px, 11dvh, 120px);
  border: 3px solid currentColor;
  border-radius: 20px;
  background: white;
  font-size: clamp(28px, 3.8dvh, 38px);
  font-weight: 700;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .18);
}

.kiosk-stamp__action--clock-in,
.kiosk-stamp__action--break-end { color: #147d64; }
.kiosk-stamp__action--clock-out { color: #bd3b32; }
.kiosk-stamp__action--break { color: #c27615; }
.kiosk-stamp__action--recommended {
  --kiosk-pulse-color: rgba(38, 63, 72, .32);
  border-color: transparent;
  color: white;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .18), 0 0 0 3px var(--kiosk-pulse-color);
}
.kiosk-stamp__action--clock-in.kiosk-stamp__action--recommended,
.kiosk-stamp__action--break-end.kiosk-stamp__action--recommended {
  --kiosk-pulse-color: rgba(20, 125, 100, .42);
  background: #147d64;
}
.kiosk-stamp__action--clock-out.kiosk-stamp__action--recommended {
  --kiosk-pulse-color: rgba(189, 59, 50, .42);
  background: #bd3b32;
}
.kiosk-stamp__action--break.kiosk-stamp__action--recommended {
  --kiosk-pulse-color: rgba(194, 118, 21, .42);
  background: #c27615;
}
.kiosk-stamp__action--recommended:not(:disabled),
.kiosk-stamp__self-report--recommended:not(:disabled) {
  animation: kiosk-recommended-pulse 1.5s ease-in-out infinite;
}
.kiosk-stamp__action:disabled { opacity: .5; animation: none; }

@keyframes kiosk-recommended-pulse {
  0%, 100% { box-shadow: 0 6px 14px rgba(0, 0, 0, .18), 0 0 0 3px var(--kiosk-pulse-color); }
  50% { box-shadow: 0 6px 14px rgba(0, 0, 0, .18), 0 0 16px 12px var(--kiosk-pulse-color); }
}

@media (prefers-reduced-motion: reduce) {
  .kiosk-stamp__action--recommended:not(:disabled),
  .kiosk-stamp__self-report--recommended:not(:disabled) { animation: none; }
}

.kiosk-stamp__action:active,
.kiosk-stamp__self-report:active,
.kiosk-stamp__action.is-pressed:disabled,
.kiosk-stamp__self-report.is-pressed:disabled {
  opacity: 1;
  transform: scale(.94);
  filter: brightness(.88);
}

/* 打刻完了画面 */
.kiosk-done {
  position: fixed;
  inset: 0;
  z-index: 6000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.6dvh, 18px);
  padding: 24px;
  background: #e3f5ee;
  color: #0f5c49;
  text-align: center;
  animation: kiosk-done-in .25s ease-out;
}

.kiosk-done[hidden] { display: none; }
.kiosk-done p { margin: 0; }

.kiosk-done__check {
  width: clamp(110px, 22dvh, 200px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #147d64;
  animation: kiosk-done-pop .4s cubic-bezier(.2, 1.4, .4, 1);
}

.kiosk-done__check svg { display: block; width: 100%; height: 100%; }

.kiosk-done__check path {
  fill: none;
  stroke: #fff;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kiosk-done__title { font-size: clamp(40px, 8dvh, 84px); font-weight: 800; line-height: 1.2; }
.kiosk-done__name { color: #17323b; font-size: clamp(28px, 5dvh, 52px); font-weight: 700; }
.kiosk-done__stamp { color: #17323b; font-size: clamp(34px, 6.4dvh, 66px); font-weight: 800; font-variant-numeric: tabular-nums; }
.kiosk-done__time { margin-left: .6em; }
.kiosk-done__closing { margin-top: clamp(6px, 1.6dvh, 18px); font-size: clamp(22px, 3.6dvh, 36px); font-weight: 700; }
.kiosk-done__hint { margin-top: clamp(10px, 3dvh, 36px); color: #4d6b63; font-size: clamp(15px, 2dvh, 20px); }

/* 出勤前の残業の注意（黄色）・警告（赤）。打刻ボタンを覆い、確認ボタンで閉じる */
.kiosk-overtime {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.4dvh, 16px);
  padding: 24px;
  text-align: center;
  animation: kiosk-done-in .25s ease-out;
}

.kiosk-overtime[hidden] { display: none; }
.kiosk-overtime p { margin: 0; }

.kiosk-overtime--caution { --overtime-accent: #a15c00; --overtime-fill: #f2b01e; background: #fff6d9; color: #5c3b00; }
.kiosk-overtime--danger { --overtime-accent: #b42318; --overtime-fill: #d92d20; background: #fde4e1; color: #5f130d; }

.kiosk-overtime__badge {
  padding: .25em 1em;
  border-radius: 999px;
  background: var(--overtime-accent);
  color: #fff;
  font-size: clamp(22px, 3.6dvh, 36px);
  font-weight: 800;
}

.kiosk-overtime__name { font-size: clamp(28px, 5dvh, 52px); font-weight: 700; color: #17323b; }
.kiosk-overtime__label { margin-top: clamp(6px, 1.4dvh, 16px); font-size: clamp(17px, 2.4dvh, 24px); }
.kiosk-overtime__value {
  color: var(--overtime-accent);
  font-size: clamp(48px, 10dvh, 104px);
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.kiosk-overtime__meter {
  position: relative;
  width: min(100%, 720px);
  margin: clamp(6px, 1.4dvh, 16px) 0 clamp(22px, 3.4dvh, 34px);
}

.kiosk-overtime__meter-track {
  height: clamp(16px, 2.4dvh, 24px);
  border-radius: 999px;
  background: rgba(23, 50, 59, .12);
  overflow: hidden;
}

.kiosk-overtime__meter-fill { height: 100%; border-radius: 999px; background: var(--overtime-fill); }

.kiosk-overtime__meter-mark {
  position: absolute;
  top: 100%;
  transform: translateX(-50%);
  padding-top: 4px;
  border-left: 2px solid rgba(23, 50, 59, .35);
  font-size: clamp(13px, 1.8dvh, 17px);
  white-space: nowrap;
}

.kiosk-overtime__meter-mark:last-of-type { transform: translateX(-100%); border-left: none; border-right: 2px solid rgba(23, 50, 59, .35); }

.kiosk-overtime__remaining { font-size: clamp(20px, 3.2dvh, 32px); font-weight: 700; }

.kiosk-overtime__confirm {
  min-width: min(100%, 360px);
  min-height: clamp(64px, 9dvh, 96px);
  margin-top: clamp(10px, 2.4dvh, 28px);
  border: 3px solid var(--overtime-accent);
  border-radius: 20px;
  background: #fff;
  color: var(--overtime-accent);
  font-size: clamp(24px, 3.8dvh, 38px);
  font-weight: 800;
  cursor: pointer;
}

.kiosk-overtime__confirm:focus-visible { outline: 4px solid rgba(59, 130, 246, .4); outline-offset: 3px; }

/* 押し忘れの知らせ。残業の知らせと同じ全画面で、要確認の打刻と同じオレンジにする */
.kiosk-forgotten {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.8dvh, 20px);
  padding: 24px;
  background: #fff0e0;
  color: #5c2c06;
  text-align: center;
  animation: kiosk-done-in .25s ease-out;
}

.kiosk-forgotten[hidden] { display: none; }
.kiosk-forgotten p { margin: 0; }

.kiosk-forgotten__badge {
  padding: .25em 1em;
  border-radius: 999px;
  background: #b54708;
  color: #fff;
  font-size: clamp(22px, 3.6dvh, 36px);
  font-weight: 800;
}

.kiosk-forgotten__name { font-size: clamp(28px, 5dvh, 52px); font-weight: 700; color: #17323b; }
.kiosk-forgotten__message { margin-top: clamp(6px, 1.4dvh, 16px); font-size: clamp(22px, 3.4dvh, 34px); font-weight: 700; line-height: 1.5; }
.kiosk-forgotten__stamp { display: block; color: #b54708; font-size: clamp(32px, min(8dvh, 9vw), 84px); font-weight: 800; line-height: 1.2; }
.kiosk-forgotten__hint { font-size: clamp(20px, 3dvh, 30px); }

.kiosk-forgotten__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  width: min(100%, 760px);
}

.kiosk-forgotten__button {
  max-width: 100%;
  min-width: min(100%, 360px);
  min-height: clamp(64px, 9dvh, 96px);
  margin-top: clamp(10px, 2.4dvh, 28px);
  padding: 0 20px;
  border: 3px solid #b54708;
  border-radius: 20px;
  background: #fff;
  color: #b54708;
  font-size: clamp(18px, min(3.4dvh, 3.2vw), 34px);
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.kiosk-forgotten__actions .kiosk-forgotten__button { flex: 1 1 300px; min-width: 0; }
.kiosk-forgotten__button--cancel { border-color: #64748b; color: #334155; }
.kiosk-forgotten__button:focus-visible { outline: 4px solid rgba(59, 130, 246, .4); outline-offset: 3px; }

@keyframes kiosk-done-in { from { opacity: 0; } }
@keyframes kiosk-done-pop { from { transform: scale(.4); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .kiosk-done,
  .kiosk-done__check,
  .kiosk-overtime,
  .kiosk-forgotten { animation: none; }
}

.kiosk-stamp__action-group { display: flex; flex-direction: column; align-items: stretch; }
.kiosk-stamp__self-report-separator {
  margin: clamp(20px, 3dvh, 28px) 12px clamp(20px, 2.8dvh, 26px);
  border-top: 1px solid #d6a2a0;
}
.kiosk-stamp__self-report {
  min-height: 52px;
  border: 2px solid #b42318;
  border-radius: 12px;
  background: #fff;
  color: #b42318;
  font-size: clamp(17px, 2.2dvh, 22px);
  font-weight: 700;
}
.kiosk-stamp__self-report--recommended {
  --kiosk-pulse-color: rgba(180, 35, 24, .42);
  border-color: transparent;
  background: #b42318;
  color: white;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .18), 0 0 0 3px var(--kiosk-pulse-color);
}
.kiosk-stamp__self-report:disabled { opacity: .5; animation: none; }

.kiosk__finish-button {
  display: inline-block;
  margin-top: clamp(8px, 2.4dvh, 30px);
  padding: clamp(12px, 1.8dvh, 18px) 34px;
  border: 2px solid #60747c;
  border-radius: 14px;
  background: white;
  color: #263f48;
  font-size: clamp(18px, 2.2dvh, 22px);
  text-decoration: none;
}

/* 救済画面: スタッフ一覧が残り高さに収まるよう、ボタンは高さ方向に圧縮可能にする */
.kiosk--rescue { justify-content: flex-start; }
.kiosk--rescue .kiosk__finish-form { margin-top: auto; }

.kiosk--rescue h2 {
  margin: clamp(4px, 1dvh, 12px) 0 0;
  font-size: clamp(20px, 3dvh, 30px);
}

.kiosk-rescue__departments {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: clamp(8px, 1.4dvh, 16px);
  width: min(100%, 960px);
  margin: clamp(10px, 2dvh, 28px) auto 0;
}

.kiosk-rescue__staffs {
  flex: 1 1 auto;
  min-height: 0;
  align-content: center;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(8px, 1.4dvh, 16px);
  width: min(100%, 960px);
  margin: clamp(10px, 1.6dvh, 24px) auto 0;
}

.kiosk-rescue__department,
.kiosk-rescue__staff {
  padding: clamp(10px, 1.8dvh, 22px) 14px;
  border: 2px solid #9cabb0;
  border-radius: 14px;
  background: white;
  color: #17323b;
  font-size: clamp(18px, 2.3dvh, 23px);
  text-decoration: none;
}

.kiosk-rescue__department--selected { border-color: #147d64; background: #dff3ec; }
.kiosk-rescue__staff { min-height: 0; }
.kiosk-rescue__staff span { display: block; }
.kiosk-rescue__staff-number { color: #63757b; font-size: clamp(13px, 1.7dvh, 17px); }
.kiosk-rescue__staff-name { margin-top: 4px; font-size: clamp(19px, 2.6dvh, 26px); font-weight: 700; }