/* static/css/churchtag.css — Player page styles */

/* Stats boxes */
.ct-stats { display: flex; gap: 12px; margin-bottom: 20px; }
.ct-stat-box { flex: 1; padding: 12px 16px; border-radius: 10px; background-color: var(--code-bg); text-align: center; }
.ct-stat-label { display: block; font-size: 0.8em; opacity: 0.6; margin-bottom: 4px; }
.ct-stat-value { display: block; font-size: 1.4em; font-weight: 700; font-variant-numeric: tabular-nums; }
.ct-stat-active { color: #e74c3c; }
.ct-stat-done { color: #2ecc71; }

/* Info section */
.ct-info { margin-bottom: 24px; }
.ct-floor-plan { width: 100%; border-radius: 10px; background-color: #fff; margin-bottom: 10px; }
.ct-rules-btn { display: inline-block; padding: 10px 20px; border-radius: 6px; background-color: var(--code-bg); color: var(--primary); text-decoration: none; font-size: 0.95em; font-weight: 600; }
.ct-rules-btn:hover { opacity: 0.85; }

/* Signup form */
.signup-form { max-width: 560px; margin-bottom: 32px; padding: 20px; border-radius: 10px; background-color: var(--code-bg); }
.signup-field { margin-bottom: 16px; }
.signup-field label { display: block; margin-bottom: 6px; font-size: 0.9em; opacity: 0.8; }
.signup-field input, .signup-field select { width: 100%; padding: 12px; border-radius: 6px; border: 1px solid var(--border); background-color: var(--theme); color: var(--primary); font-size: 16px; font-family: inherit; }
.signup-field input:focus, .signup-field select:focus { outline: 2px solid var(--secondary); outline-offset: 1px; }
#signup-button { width: 100%; padding: 14px; border: none; border-radius: 6px; background-color: var(--primary); color: var(--theme); font-size: 16px; font-weight: 600; font-family: inherit; cursor: pointer; }
#signup-button:hover:not(:disabled) { opacity: 0.9; }
#signup-button:disabled { opacity: 0.5; cursor: default; }
.signup-message { margin: 12px 0 0 0; padding: 10px 12px; border-radius: 6px; font-size: 0.9em; }
.signup-message-success { background-color: rgba(46, 160, 67, 0.15); color: #4ac26b; }
.signup-message-error { background-color: rgba(231, 76, 60, 0.15); color: #e74c3c; }

/* Vote tally */
.tally-section { max-width: 560px; margin-bottom: 24px; padding: 16px 20px; border-radius: 10px; background-color: var(--code-bg); }
.tally-heading { margin: 0 0 12px 0; font-size: 1em; font-weight: 600; }
.tally-list { list-style: none; padding: 0; margin: 0; }
.tally-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tally-row:last-child { margin-bottom: 0; }
.tally-label { min-width: 120px; font-size: 0.9em; }
.tally-bar-track { flex: 1; height: 10px; border-radius: 5px; background-color: var(--border); }
.tally-bar-fill { display: block; height: 100%; border-radius: 5px; background-color: var(--secondary); transition: width 0.3s ease; }
.tally-votes { min-width: 20px; text-align: right; font-weight: 600; font-size: 0.9em; font-variant-numeric: tabular-nums; }

/* Queue list */
.queue-list { list-style: none; padding: 0; margin: 0 0 16px 0; max-width: 560px; }
.queue-item { display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin-bottom: 6px; border-radius: 8px; background-color: var(--code-bg); border-left: 4px solid transparent; transition: background-color 0.3s; }
.queue-position { font-weight: bold; min-width: 24px; color: var(--secondary); }
.queue-name { flex: 1; font-weight: 600; overflow-wrap: anywhere; }
.queue-mode { font-size: 0.8em; opacity: 0.6; white-space: nowrap; }
.queue-wait { font-size: 0.8em; opacity: 0.7; font-variant-numeric: tabular-nums; white-space: nowrap; }
.queue-count, .queue-empty { opacity: 0.6; font-size: 0.9em; }
.queue-error { color: #e74c3c; padding: 12px 0; }
.queue-error-hint { opacity: 0.6; font-size: 0.9em; }

/* Group colors — left border by queue position */
.queue-group-next   { border-left-color: var(--secondary); }
.queue-group-green  { border-left-color: #2ecc71; }
.queue-group-yellow { border-left-color: #f1c40f; }
.queue-group-orange { border-left-color: #e67e22; }
.queue-group-red    { border-left-color: #e74c3c; }
.queue-group-purple { border-left-color: #9b59b6; }
.queue-group-blue   { border-left-color: #3498db; }

/* Team colors — solid fill when admin assigns teams */
.queue-team-red    { background-color: rgba(231, 76, 60, 0.85); color: #fff; border-left-color: #c0392b; }
.queue-team-yellow { background-color: rgba(241, 196, 15, 0.85); color: #333; border-left-color: #f39c12; }
.queue-team-blue   { background-color: rgba(52, 152, 219, 0.85); color: #fff; border-left-color: #2980b9; }
.queue-team-green  { background-color: rgba(46, 204, 113, 0.85); color: #fff; border-left-color: #27ae60; }

.queue-team-red .queue-position, .queue-team-blue .queue-position, .queue-team-green .queue-position { color: rgba(255,255,255,0.9); }
.queue-team-yellow .queue-position { color: rgba(0,0,0,0.7); }
.queue-team-red .queue-mode, .queue-team-red .queue-wait, .queue-team-blue .queue-mode, .queue-team-blue .queue-wait, .queue-team-green .queue-mode, .queue-team-green .queue-wait { opacity: 1; color: rgba(255,255,255,0.7); }
.queue-team-yellow .queue-mode, .queue-team-yellow .queue-wait { opacity: 1; color: rgba(0,0,0,0.5); }

/* Mobile */
@media (max-width: 480px) {
  .queue-item { flex-wrap: wrap; }
  .queue-name { flex: 1 1 50%; }
  .queue-mode, .queue-wait { flex: 0 0 auto; }
  .tally-label { min-width: 90px; font-size: 0.85em; }
}