/* Hide page content until authGate.js confirms a signed-in staff member */
html.auth-pending body {
  visibility: hidden;
}

/* Shown while waiting; if Firebase can't load, this stays up instead of a blank page */
html.auth-pending::before {
  content: 'Checking sign-in…';
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  font: 15px system-ui, sans-serif;
  color: #a3a3a3;
  background: #1b1b1b;
}

/* Optional signed-in badge, filled by authGate.js on pages with #accountStatus */
#accountStatus {
  position: fixed;
  top: 12px;
  right: 16px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font: 13px system-ui, sans-serif;
}

#accountStatus:empty {
  display: none;
}

.account-signout {
  border: 1px solid #ffd700;
  border-radius: 999px;
  padding: 3px 10px;
  background: transparent;
  color: #ffd700;
  font: inherit;
  cursor: pointer;
}

.account-signout:hover {
  background: #ffd700;
  color: #000;
}

/* Added by authGate.js for admins. Inside a header it flows with the other buttons;
   on pages without one it is pinned so it doesn't land in the middle of the content. */
.admin-page-link {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid #ffd700;
  border-radius: 6px;
  color: #ffd700;
  font: 13px system-ui, sans-serif;
  text-decoration: none;
  white-space: nowrap;
}

.admin-page-link:hover {
  background: #ffd700;
  color: #000;
}

/* Call Notes reminder alarm (reminderAlarm.js), shown on every page while a reminder is due */
.reminder-banner {
  position: fixed;
  right: 84px; /* clear of the chat bubble in the bottom-right corner */
  bottom: 12px;
  left: 12px;
  z-index: 2000;
  display: grid;
  gap: 6px;
  max-height: 40vh;
  overflow-y: auto;
  animation: reminder-banner-in 0.3s ease-out;
}

.reminder-banner[hidden] {
  display: none;
}

.reminder-banner-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 10px 12px;
  border: 2px solid #ff6b6b;
  border-radius: 8px;
  background: #2a1414;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
  color: #fff;
  font: 14px system-ui, sans-serif;
  text-align: left;
}

.reminder-banner-label {
  flex: 1 1 160px;
  font-weight: 700;
}

.reminder-banner-row small {
  color: #ff6b6b;
  font-weight: 600;
}

.reminder-banner-row button {
  padding: 4px 10px;
  border: 1px solid #ffd700;
  border-radius: 6px;
  background: transparent;
  color: #ffd700;
  font: 13px system-ui, sans-serif;
  cursor: pointer;
}

.reminder-banner-row button:hover {
  background: #ffd700;
  color: #000;
}

@keyframes reminder-banner-in {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

body > .admin-page-link {
  position: fixed;
  top: 12px;
  left: 16px;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.75);
}