/* static/css/churchtag-admin.css
   Styles for the Church Tag admin page.

   Design goal: usable one-handed in a dark room. Large tap
   targets, clear team colors, obvious button states. */

/* ============================================================
   SETTINGS PANEL
   ============================================================ */

.admin-panel {
  display: flex;
  gap: 20px;
  max-width: 560px;
  margin-bottom: 20px;
  padding: 16px 20px;
  border-radius: 10px;
  background-color: var(--code-bg);
}

.admin-setting {
  flex: 1;
}

.admin-setting label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.9em;
  opacity: 0.8;
}

.admin-setting input,
.admin-setting select {
  width: 100%;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background-color: var(--theme);
  color: var(--primary);
  font-size: 16px;
  font-family: inherit;
}

/* ============================================================
   MATCH TIMER
   ============================================================ */

.admin-timer {
  max-width: 560px;
  padding: 12px 20px;
  margin-bottom: 20px;
  border-radius: 10px;
  background-color: var(--code-bg);
  text-align: center;
  font-size: 1em;
  opacity: 0.6;
}

.admin-timer-active {
  opacity: 1;
  font-weight: 700;
  font-size: 1.6em;
  color: #e74c3c;
  font-variant-numeric: tabular-nums;
}

.admin-timer-done {
  opacity: 1;
  font-weight: 700;
  font-size: 1.3em;
  color: #2ecc71;
}

/* ============================================================
   ACTION BUTTONS
   ============================================================ */

.admin-buttons {
  display: flex;
  gap: 10px;
  max-width: 560px;
  margin-bottom: 20px;
}

.admin-btn {
  flex: 1;
  padding: 14px 16px;
  border: none;
  border-radius: 6px;
  background-color: #3498db;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.15s;
}

.admin-btn:hover:not(:disabled) {
  opacity: 0.85;
}

.admin-btn:disabled {
  background-color: #555;
  opacity: 0.4;
  cursor: default;
}

/* "Cancel" button in remove mode — red so it's obvious */
.admin-btn-cancel {
  background-color: #e74c3c;
}

/* Hide the Confirm button when not in remove mode */
.admin-btn-hidden {
  display: none;
}

/* ============================================================
   QUEUE LIST
   ============================================================ */

.admin-queue-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px 0;
  max-width: 560px;
}

.admin-queue-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 6px;
  border-radius: 8px;
  background-color: var(--code-bg);
  cursor: pointer;
  transition: opacity 0.2s, background-color 0.2s;

  /* Prevents text selection when clicking rapidly */
  user-select: none;
  -webkit-user-select: none;
}

.admin-queue-item:active {
  opacity: 0.7;
}

.admin-queue-pos {
  font-weight: bold;
  min-width: 24px;
  color: var(--secondary);
}

.admin-queue-name {
  flex: 1;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.admin-queue-mode {
  font-size: 0.85em;
  opacity: 0.75;
}

.admin-queue-count,
.admin-empty {
  opacity: 0.6;
  font-size: 0.9em;
}

.admin-error {
  color: #e74c3c;
}

/* ============================================================
   REMOVE MODE STYLES
   ============================================================

   All players fade out. Tapping one makes it solid + highlighted
   to mark it for removal. */

.admin-queue-faded {
  opacity: 0.25;
}

.admin-queue-selected {
  opacity: 1;
  outline: 3px solid #3498db;
  outline-offset: -1px;
}

/* ============================================================
   TEAM COLOR STYLES
   ============================================================

   Each team gets a background color. Text color is adjusted so
   it stays readable against each background. */

.admin-team-red {
  background-color: rgba(231, 76, 60, 0.85);
  color: #fff;
}

.admin-team-yellow {
  background-color: rgba(241, 196, 15, 0.85);
  color: #333;
}

.admin-team-blue {
  background-color: rgba(52, 152, 219, 0.85);
  color: #fff;
}

.admin-team-green {
  background-color: rgba(46, 204, 113, 0.85);
  color: #fff;
}

/* Override the position number and mode text for colored rows
   so they don't fight the background. */
.admin-team-red .admin-queue-pos,
.admin-team-blue .admin-queue-pos,
.admin-team-green .admin-queue-pos {
  color: rgba(255, 255, 255, 0.9);
}

.admin-team-yellow .admin-queue-pos {
  color: rgba(0, 0, 0, 0.7);
}

.admin-team-red .admin-queue-mode,
.admin-team-blue .admin-queue-mode,
.admin-team-green .admin-queue-mode {
  opacity: 1;
  color: rgba(255, 255, 255, 0.7);
}

.admin-team-yellow .admin-queue-mode {
  opacity: 1;
  color: rgba(0, 0, 0, 0.5);
}

/* ============================================================
   STATUS MESSAGES
   ============================================================ */

.admin-msg {
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 0.9em;
  max-width: 560px;
  margin-bottom: 16px;
}

.admin-msg-success {
  background-color: rgba(46, 160, 67, 0.15);
  color: #4ac26b;
}

.admin-msg-error {
  background-color: rgba(231, 76, 60, 0.15);
  color: #e74c3c;
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 480px) {
  .admin-buttons {
    flex-wrap: wrap;
  }

  .admin-btn {
    flex: 1 1 45%;
  }

  .admin-panel {
    flex-direction: column;
    gap: 12px;
  }
}