/* Staff phone lookup. Loaded unconditionally but the link only appears when staff.js confirms
   the server has a PIN configured, so this costs nothing when the feature is off. */

#staff_link {
  position: fixed; right: 10px; bottom: env(safe-area-inset-bottom, 10px);
  z-index: 40; padding: 4px 8px; border: none; background: transparent;
  color: var(--muted); font-size: 0.72rem; opacity: 0.55; cursor: pointer;
}
#staff_link:hover { opacity: 1; }

#staff_panel { position: fixed; inset: 0; z-index: 51; display: flex; align-items: center; justify-content: center; }
.staff_backdrop { position: absolute; inset: 0; background: rgba(12, 15, 22, 0.72); }
.staff_box {
  position: relative; width: min(94vw, 380px); max-height: 88vh; overflow-y: auto;
  background: var(--card); border-radius: var(--radius); padding: 18px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.3);
}
.staff_box h2 { margin: 0 0 14px; font-size: 1.05rem; }
.staff_box label { display: block; margin: 0 0 4px; font-size: 0.85rem; color: var(--muted); }
.staff_box input {
  width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 8px;
  font: inherit; margin-bottom: 12px; box-sizing: border-box;
}
.staff_msg { min-height: 1.2em; margin: 0 0 8px; font-size: 0.88rem; color: var(--err); }

.staff_result {
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px;
}
.staff_result_head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.staff_result_name { font-weight: 700; }
.staff_result_type { font-size: 0.76rem; color: var(--muted); }
.staff_result_code { font-family: ui-monospace, monospace; font-size: 0.95rem; margin: 4px 0 8px; color: var(--brand-dark); }
.staff_result .barcode { width: 100%; height: 60px; }

.staff_actions { display: flex; gap: 8px; margin-top: 4px; }
.staff_actions .btn { flex: 1 1 auto; width: auto; }