/* ── Trainer App Styles ── */

/* Container for the main app once logged in */
#app {
  padding: var(--base-gap);
}

/* Example: a card grid in the trainer view */
.trainer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--base-gap);
  margin: var(--base-gap) 0;
}

/* Trainer-specific button — merged from .btn */
.trainer-btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-family: var(--font-stack);
  font-size: 1rem;
  color: var(--card-bg);
  background: var(--accent);
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}

.trainer-btn:hover {
  background: var(--bt-hover);
  opacity: 0.95;
}

/* === Keypad styles === */
:root {
  --kp-key: 80px;  /* key size */
  --kp-gap: 8px;   /* gap between keys */
}

#keypad { margin-top: 1rem; }

.kp-display {
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid #2c3056;
  border-radius: 10px;
  font-size: 1.5rem;
  margin: 0 auto 8px;                /* center horizontally */
  box-sizing: border-box;            /* include border in width */
  width: calc(3 * var(--kp-key) + 2 * var(--kp-gap)); /* match keys width */
}

.kp-keys {
  display: grid;
  grid-template-columns: repeat(3, var(--kp-key));
  gap: var(--kp-gap);
  justify-content: center;
  margin-bottom: 8px;
}

.kp-btn {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--primary);
  color: var(--card-bg);
  border: none;
  cursor: pointer;
  touch-action: manipulation; /* snappier taps on mobile */
}

/* Desktop-only hover for keypad buttons */
@media (hover: hover) and (pointer: fine) {
  .kp-btn:hover { opacity: 0.9; }
}

.kp-span3 { grid-column: span 3; }

.kp-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* Optional: shrink keys on very small phones */
@media (max-width: 360px) {
  :root {
    --kp-key: 64px;
    --kp-gap: 6px;
  }
}