/* ================================================================
   Azzy Training – Custom component styles (dark gym theme)
   Plain CSS — no @apply (Tailwind CDN does not process external files)
   ================================================================ */

/* Navigation */
.nav-link {
  color: #9ca3af;
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  transition: color 0.15s;
  text-decoration: none;
  display: inline-block;
}
.nav-link:hover { color: #facc15; }
.nav-link-active { color: #facc15; background: rgba(250, 204, 21, 0.1); }
.nav-link-mobile {
  color: #9ca3af;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.15s;
  display: block;
}
.nav-link-mobile:hover { color: #facc15; }

/* Cards */
.card {
  background: #111827;
  border: 1px solid #1f2937;
  border-radius: 0.75rem;
  padding: 1.25rem;
}

/* Form controls */
.input-field {
  background: #1f2937;
  border: 1px solid #374151;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  color: #f3f4f6;
  font-size: 0.875rem;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
  appearance: auto;
}
.input-field::placeholder { color: #6b7280; }
.input-field:focus {
  border-color: #eab308;
  box-shadow: 0 0 0 1px #eab308;
}
.label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #d1d5db;
  margin-bottom: 0.375rem;
}

/* Buttons */
.btn-primary {
  background: #eab308;
  color: #111827;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  font-size: 0.875rem;
  transition: background 0.15s;
  text-decoration: none;
  display: inline-block;
}
.btn-primary:hover { background: #fde047; }

.btn-secondary {
  background: #1f2937;
  color: #d1d5db;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid #374151;
  cursor: pointer;
  font-size: 0.875rem;
  transition: background 0.15s;
  text-decoration: none;
  display: inline-block;
}
.btn-secondary:hover { background: #374151; }

/* Set buttons */
.set-btn {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
  border: 1px solid;
  transition: all 0.15s;
  user-select: none;
  background: none;
}
.set-btn:active { transform: scale(0.95); }
.set-btn-pending {
  background: #1f2937;
  color: #9ca3af;
  border-color: #374151;
}
.set-btn-pending:hover { background: #374151; color: #e5e7eb; }
.set-btn-done {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border-color: rgba(34, 197, 94, 0.35);
}
.set-btn-done:hover { background: rgba(34, 197, 94, 0.25); }

/* HTMX loading indicator */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline; }
.htmx-request .htmx-default { display: none; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #374151; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #4b5563; }

/* Tabular numbers for timer */
.tabular-nums { font-variant-numeric: tabular-nums; }