/* 員工手機端 */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  background: #f5f6f8; color: #222; max-width: 480px; margin: 0 auto;
  min-height: 100vh; padding-bottom: 70px;
}
header { background: #06c755; color: #fff; padding: 16px; text-align: center; }
header h1 { font-size: 1.15rem; }
main { padding: 16px; }
.card { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 14px;
        box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.clock { text-align: center; font-size: 2.4rem; font-variant-numeric: tabular-nums;
         font-weight: 700; padding: 8px 0 2px; }
.date { text-align: center; color: #777; margin-bottom: 10px; }
.btn-row { display: flex; gap: 12px; }
button.punch { flex: 1; padding: 20px 0; font-size: 1.25rem; font-weight: 700;
  border: none; border-radius: 12px; color: #fff; cursor: pointer; }
button.punch:disabled { opacity: .45; }
.punch.in  { background: #06c755; }
.punch.out { background: #ff8c00; }
.status { text-align: center; padding: 10px; border-radius: 8px; margin-top: 12px;
          display: none; font-size: .95rem; }
.status.ok   { display: block; background: #e6f9ee; color: #0a7a3d; }
.status.warn { display: block; background: #fff4e0; color: #b25e00; }
.status.err  { display: block; background: #fde8e8; color: #b91c1c; }
.gps { text-align: center; color: #888; font-size: .85rem; margin-top: 8px; }
input, select, textarea { width: 100%; padding: 12px; margin: 6px 0 12px;
  border: 1px solid #ddd; border-radius: 8px; font-size: 1rem; }
button.primary { width: 100%; padding: 14px; font-size: 1.05rem; border: none;
  border-radius: 10px; background: #06c755; color: #fff; font-weight: 700; }
h2 { font-size: 1.05rem; margin-bottom: 10px; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { padding: 8px 6px; border-bottom: 1px solid #eee; text-align: left; }
th { color: #888; font-weight: 500; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: .78rem; }
.tag.late  { background: #fde8e8; color: #b91c1c; }
.tag.flag  { background: #fff4e0; color: #b25e00; }
.tag.ok    { background: #e6f9ee; color: #0a7a3d; }
.tag.pending  { background: #eef2ff; color: #4338ca; }
.tag.approved { background: #e6f9ee; color: #0a7a3d; }
.tag.rejected { background: #fde8e8; color: #b91c1c; }
nav.tabbar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px; display: flex; background: #fff;
  border-top: 1px solid #e5e5e5; }
nav.tabbar a { flex: 1; text-align: center; padding: 12px 0; color: #888;
  text-decoration: none; font-size: .85rem; }
nav.tabbar a.active { color: #06c755; font-weight: 700; }
.hidden { display: none !important; }
.center { text-align: center; color: #777; padding: 24px 0; }