/* style.css — Brewtec LINE Hub: Clock In/Out */
/* Restyled to match the hub.css light theme (white bg, LINE green accents).  */
/* The HTML structure and JS classes are unchanged — only colours and sizing. */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Sarabun', 'Noto Sans Thai', system-ui, sans-serif;
  background-color: #FFFFFF;
  color: #1F1F1F;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

/* ── Panel layout ─────────────────────────────────────────────────────────── */

.panel {
  width: 100%;
  max-width: 360px;
  text-align: center;
  animation: fadeIn 0.2s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* ── App title ────────────────────────────────────────────────────────────── */

.app-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #06C755;          /* LINE green — matches hub accent */
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.instruction {
  font-size: 0.95rem;
  color: #6B7280;
  margin-bottom: 20px;
}

/* ── PIN display ──────────────────────────────────────────────────────────── */

.pin-display {
  width: 100%;
  height: 56px;
  line-height: 56px;
  padding: 0 16px;
  font-size: 1.8rem;
  letter-spacing: 0.4em;
  text-align: center;
  background-color: #F7F8FA;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  color: #1F1F1F;
  margin-bottom: 12px;
  outline: none;
  cursor: default;
  -webkit-appearance: none;
  appearance: none;
}

.pin-display:focus {
  border-color: #06C755;
  box-shadow: 0 0 0 3px rgba(6, 199, 85, 0.12);
}

/* ── PIN pad ──────────────────────────────────────────────────────────────── */

.pin-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.pin-btn {
  height: 64px;
  font-size: 1.5rem;
  font-weight: 600;
  font-family: inherit;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  background-color: #FFFFFF;
  color: #1F1F1F;
  cursor: pointer;
  transition: background-color 0.1s ease, transform 0.08s ease;
  -webkit-tap-highlight-color: transparent;
}

.pin-btn:active {
  background-color: #EEF1F5;
  transform: scale(0.95);
}

/* Clear button */
.pin-btn--clear {
  color: #DC2626;
  font-size: 1rem;
}

.pin-btn--clear:active {
  background-color: rgba(220, 38, 38, 0.06);
}

/* Enter button — LINE green */
.pin-btn--enter {
  background-color: #06C755;
  border-color: #06C755;
  color: #FFFFFF;
  font-size: 1.1rem;
}

.pin-btn--enter:active {
  background-color: #05A847;
}

.pin-btn:disabled,
.pin-btn--enter:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ── Greeting panel ───────────────────────────────────────────────────────── */

.greeting {
  font-size: 1rem;
  line-height: 1.6;
  color: #1F1F1F;
  margin-bottom: 24px;
  padding: 14px 16px;
  background-color: #F7F8FA;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
}

/* ── Action button (Clock In / Clock Out) ─────────────────────────────────── */

.action-btn {
  display: block;
  width: 100%;
  padding: 16px;
  font-size: 1.1rem;
  font-weight: 600;
  font-family: inherit;
  border: none;
  border-radius: 10px;
  background-color: #06C755;   /* green = Clock In */
  color: #FFFFFF;
  cursor: pointer;
  margin-bottom: 12px;
  min-height: 44px;
  transition: background-color 0.15s ease, transform 0.05s ease;
  box-shadow: 0 1px 3px rgba(6, 199, 85, 0.3);
  -webkit-tap-highlight-color: transparent;
}

/* Clock Out — amber/orange, distinct from Clock In green */
.action-btn--out {
  background-color: #FF8800;
  box-shadow: 0 1px 3px rgba(255, 136, 0, 0.3);
}

.action-btn:active {
  transform: translateY(1px);
}

.action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Secondary action (Done / Retry) */
.action-btn--secondary {
  background-color: #FFFFFF;
  color: #6B7280;
  border: 1px solid #E5E7EB;
  font-size: 0.95rem;
  font-weight: 500;
  box-shadow: none;
}

.action-btn--secondary:active {
  background-color: #F7F8FA;
}

/* Back / link button */
.link-btn {
  background: none;
  border: none;
  color: #6B7280;
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
  padding: 8px;
  margin-top: 4px;
  text-decoration: underline;
}

/* ── Result panel ─────────────────────────────────────────────────────────── */

.result-icon {
  font-size: 2.5rem;
  color: #16A34A;
  margin-bottom: 12px;
}

.result-text {
  font-size: 1rem;
  line-height: 1.6;
  color: #1F1F1F;
  margin-bottom: 24px;
  padding: 14px 16px;
  background-color: rgba(22, 163, 74, 0.06);
  border: 1px solid rgba(22, 163, 74, 0.4);
  border-radius: 12px;
}

/* ── Error panel ──────────────────────────────────────────────────────────── */

.error-icon {
  font-size: 2.5rem;
  color: #DC2626;
  margin-bottom: 12px;
}

.error-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #DC2626;
  margin-bottom: 24px;
  padding: 12px 16px;
  background-color: rgba(220, 38, 38, 0.06);
  border: 1px solid rgba(220, 38, 38, 0.35);
  border-radius: 10px;
}