/* Parent dashboard custom layer — most styling is Tailwind utilities;
   this file only handles things tied to JS state (active tab, screen router). */

body {
  background:
    radial-gradient(circle at 12% 0%, rgba(249,115,22,0.04) 0%, transparent 40%),
    #FAFAF8;
}

.screen { display: none; }
.screen[data-active] { display: block; animation: fadeIn 0.25s ease; }

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

/* Tab buttons in the top nav */
.tab-btn {
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  font-weight: 600;
  background: transparent;
  color: #78716C;
  border: none;
  padding: 8px 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 150ms, color 150ms;
}
.tab-btn:hover { color: #1C0F07; background: #FFF7ED; }
.tab-btn.active {
  background: #1C0F07;
  color: #FAFAF8;
}
.tab-btn.active:hover { background: #1C0F07; color: #FAFAF8; }

/* ===== PIN keypad on the login screen ===== */
.pin-dot {
  width: 14px;
  height: 14px;
  border-radius: 9999px;
  border: 2px solid #E7E5E4;
  background: #ffffff;
  transition: background 120ms, border-color 120ms;
}
.pin-dot.filled {
  background: #F97316;
  border-color: #F97316;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
#login-pin-display.shake { animation: shake 0.4s ease; }

.keypad-btn {
  font-family: 'Manrope', sans-serif;
  font-size: 24px;
  font-weight: 700;
  background: #ffffff;
  color: #1C0F07;
  border: 2px solid #E7E5E4;
  border-radius: 14px;
  padding: 14px 0;
  cursor: pointer;
  transition: transform 80ms, background 120ms, border-color 120ms;
  font-variant-numeric: tabular-nums;
}
.keypad-btn:hover { border-color: #FB923C; }
.keypad-btn:active { transform: translateY(2px); background: #FFF7ED; }
.keypad-btn.action {
  font-size: 18px;
  color: #78716C;
}