/* ════════════════════════════════════════
   勤怠管理システム — Bootstrap カスタムオーバーレイ
   Bootstrap 5 を前提とし、不足分のみ定義
════════════════════════════════════════ */

body { font-family: "Meiryo", "Hiragino Sans", sans-serif; }

/* ── ユーティリティ ── */
.mono    { font-variant-numeric: tabular-nums; font-family: "Courier New", monospace; }
.x-small { font-size: 0.72rem; }

/* ── 打刻時計 ── */
.punch-clock {
  font-size: 3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
  color: #1e293b;
  line-height: 1.1;
}

/* ── 打刻ボタン（Bootstrap の btn に重ねる） ── */
.btn-punch-lg {
  font-size: 1.1rem;
  padding: 0.9rem 0.5rem;
  letter-spacing: 0.08em;
  border-radius: 8px;
}
.btn-punch-lg:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ── 打刻種別バッジ（テーブル内） ── */
.punch-badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 99px;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}
.punch-badge-clock_in    { background: #d1fae5; color: #065f46; }
.punch-badge-break_start { background: #fef3c7; color: #92400e; }
.punch-badge-break_end   { background: #cffafe; color: #0e7490; }
.punch-badge-clock_out   { background: #fee2e2; color: #b91c1c; }

/* ── 勤務区分バッジ（遅刻・残業など） ── */
.badge-kintai {
  display: inline-block;
  padding: 0.18rem 0.55rem;
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}
.badge-late        { background: #fee2e2; color: #b91c1c; }
.badge-early-arr   { background: #d1fae5; color: #065f46; }
.badge-early-leave { background: #fef3c7; color: #92400e; }
.badge-ot          { background: #ede9fe; color: #5b21b6; }

/* ── 管理者 日別ブロック ── */
.day-block {
  border-bottom: 1px solid #e2e8f0;
}
.day-block:last-child { border-bottom: none; }
.day-block .day-header {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
.day-block.day-approved .day-header {
  background: #f0fdf4;
  border-bottom-color: #bbf7d0;
}

/* ── Navbar バッジ（施設名） ── */
.navbar .badge {
  font-size: 0.75rem;
  font-weight: 600;
}

/* ── テーブル内 w-40 ── */
.w-40 { width: 40%; }

/* ── レスポンシブ微調整 ── */
@media (max-width: 576px) {
  .punch-clock   { font-size: 2.2rem; }
  .btn-punch-lg  { font-size: 1rem; padding: 0.75rem 0.25rem; }
}