/**
 * 3-components.css
 * Reusable component styles
 */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border);
  user-select: none;
  text-decoration: none;
}

.btn:hover:not(:disabled) {
  background-color: var(--color-card);
  border-color: var(--color-text-tertiary);
}

.btn:active:not(:disabled) {
  transform: scale(0.98);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn.btn-loading {
  position: relative;
  color: transparent;
}

.btn.btn-loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -8px;
  border: 2px solid var(--color-border);
  border-right-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Button Variants */
.btn-primary {
  background-color: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

.btn-primary:hover:not(:disabled) {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.btn-danger {
  background-color: var(--color-danger);
  color: white;
  border-color: var(--color-danger);
}

.btn-danger:hover:not(:disabled) {
  background-color: var(--color-danger-dark);
  border-color: var(--color-danger-dark);
}

.btn-success {
  background-color: var(--color-success);
  color: white;
  border-color: var(--color-success);
}

.btn-success:hover:not(:disabled) {
  background-color: var(--color-success-dark);
  border-color: var(--color-success-dark);
}

.btn-warning {
  background-color: var(--color-warning);
  color: #000;
  border-color: var(--color-warning);
}

.btn-warning:hover:not(:disabled) {
  background-color: var(--color-warning-dark);
  border-color: var(--color-warning-dark);
}

/* Button Sizes */
.btn-sm {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-sm);
}

.btn-lg {
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-lg);
}

.btn-block {
  width: 100%;
}

/* Button Group */
.btn-group {
  display: flex;
  gap: var(--spacing-sm);
}

.btn-group.vertical {
  flex-direction: column;
}

/* Icon Button */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.btn-icon:hover {
  background-color: var(--color-card);
  border-color: var(--color-primary);
}

.btn-icon.is-muted {
  color: var(--color-text-tertiary);
  opacity: 0.72;
}

.btn-icon.sm {
  width: 2rem;
  height: 2rem;
}

/* Form Fields */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  min-width: 0;
}

.field-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.field-label.required::after {
  content: "*";
  color: var(--color-danger);
  margin-left: 0.25rem;
}

.field-input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  transition: border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.field-input::placeholder {
  color: var(--color-text-tertiary);
}

.field-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.field-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

textarea.field-input {
  resize: vertical;
  min-height: 100px;
}

select.field-input {
  cursor: pointer;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
}

.field-row.three {
  grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 640px) {
  .field-row {
    grid-template-columns: 1fr;
  }
  .field-row.three {
    grid-template-columns: 1fr;
  }
}

/* Inline Form */
.inline-form {
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-end;
  flex-wrap: wrap;
}

.inline-form .field {
  flex: 1;
  min-width: 200px;
}

/* Stack Form */
.stack-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* Checkbox & Radio */
.checkbox-line {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
}

.checkbox-line input[type="checkbox"],
.checkbox-line input[type="radio"] {
  cursor: pointer;
}

.inline-checks {
  display: flex;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
}

/* Cards */
.card {
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
  transition: all var(--transition-base);
}

.card:hover {
  border-color: var(--color-text-tertiary);
  box-shadow: var(--shadow-lg);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-md);
}

.card-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.card-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: var(--spacing-xs);
}

.card-body {
  color: var(--color-text-primary);
}

.card-foot {
  display: flex;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-border);
}

.card-actions {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: flex-end;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}

.badge-blue {
  background-color: rgba(59, 130, 246, 0.1);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.badge-green {
  background-color: rgba(16, 185, 129, 0.1);
  color: var(--color-success);
  border-color: var(--color-success);
}

.badge-red {
  background-color: rgba(239, 68, 68, 0.1);
  color: var(--color-danger);
  border-color: var(--color-danger);
}

.badge-yellow {
  background-color: rgba(251, 191, 36, 0.1);
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.role-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  background-color: var(--color-surface);
  color: var(--color-text-primary);
}

.role-chip.admin {
  background-color: rgba(239, 68, 68, 0.18);
  color: var(--color-danger);
}

.role-chip.moderator,
.role-chip.staff {
  background-color: rgba(251, 191, 36, 0.2);
  color: var(--color-accent);
}

.role-chip.player,
.role-chip.user {
  background-color: rgba(16, 185, 129, 0.2);
  color: var(--color-success);
}

/* Code Box */
.code-box {
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  overflow-x: auto;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Data Table */
.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table thead {
  background-color: var(--color-surface);
  border-bottom: 2px solid var(--color-border);
}

.data-table th {
  padding: var(--spacing-md);
  text-align: left;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

.data-table td {
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-primary);
}

.data-table tbody tr:hover {
  background-color: var(--color-surface);
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-lg);
}

/* KPI Card */
.kpi-card {
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
  text-align: center;
}

.kpi-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-sm);
}

.kpi-value {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.kpi-value-small {
  font-size: var(--font-size-xl);
}

.kpi-value.is-online {
  color: var(--color-success);
}

.kpi-value.is-offline {
  color: var(--color-danger);
}

.kpi-value.is-pending {
  color: var(--color-text-secondary);
}

.kpi-blue {
  border-left: 4px solid var(--color-primary);
}

.kpi-green {
  border-left: 4px solid var(--color-success);
}

.kpi-red {
  border-left: 4px solid var(--color-danger);
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--spacing-lg);
}

/* Form Hint */
.form-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-top: var(--spacing-xs);
}

/* Alerts */
.alert {
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-lg);
  border-left: 4px solid;
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-start;
}

.alert-warning {
  background-color: rgba(245, 158, 11, 0.1);
  border-left-color: var(--color-warning);
  color: var(--color-warning);
}

.alert-danger {
  background-color: rgba(239, 68, 68, 0.1);
  border-left-color: var(--color-danger);
  color: var(--color-danger);
}

.alert-success {
  background-color: rgba(16, 185, 129, 0.1);
  border-left-color: var(--color-success);
  color: var(--color-success);
}

.alert-info {
  background-color: rgba(59, 130, 246, 0.1);
  border-left-color: var(--color-info);
  color: var(--color-info);
}

/* Slot Grid */
.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--spacing-lg);
}

.slot-card {
  background-color: var(--color-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-base);
}

.slot-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
}

.slot-card.active {
  border-color: var(--color-primary);
  background-color: rgba(59, 130, 246, 0.1);
}

/* Actions d'une carte personnage.
   La carte porte desormais l'action principale ; il ne reste ici que des
   commandes secondaires. Le bouton « Selectionner » a ete retire : dans une
   colonne de 150 px il etait comprime sous la largeur de son propre libelle,
   et comme un <button> ne masque pas son debordement, le texte se dessinait
   sous le bouton voisin, hors de toute zone cliquable. `min-width: max-content`
   et `flex-wrap` empechent desormais qu'une commande redevienne plus etroite
   que ce qu'elle affiche. */
.slot-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

.slot-actions > * {
  min-width: max-content;
}

/* Suppression : definitive, donc discrete. Elle partageait la largeur a
   egalite avec la selection, ce qui donnait autant de poids visuel a l'action
   irreversible qu'a l'action courante. */
.character-delete-action {
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 4px);
  background: transparent;
  color: var(--color-text-muted, #8fa6b5);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: color var(--transition-base), border-color var(--transition-base);
}

.character-delete-action:hover,
.character-delete-action:focus-visible {
  border-color: var(--color-danger, #ef4444);
  color: var(--color-danger, #ef4444);
}

/* Etat de la carte, en clair : « Actif » ou l'invitation a cliquer. Sans
   bouton, rien n'aurait dit ce que fait la carte. */
.character-state {
  margin-top: var(--spacing-sm);
  color: var(--color-text-muted, #8fa6b5);
  font-size: var(--font-size-sm);
  font-weight: 700;
}

.character-card.active .character-state {
  color: var(--color-primary, #3b82f6);
}

.character-card.is-selectable:focus-visible {
  outline: 2px solid var(--color-primary, #3b82f6);
  outline-offset: 2px;
}

/* Market Results */
.market-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--spacing-lg);
}

.market-card {
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: all var(--transition-base);
}

.market-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg);
}

.market-card-head {
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
}

.market-card-body {
  padding: var(--spacing-md);
}

.market-price {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent);
  margin-bottom: var(--spacing-sm);
}

.market-actions {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

/* Chat Feed */
.chat-feed {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  max-height: 400px;
  overflow-y: auto;
}

.chat-message {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--color-primary);
}

.chat-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  color: white;
  flex-shrink: 0;
}

.chat-content {
  flex: 1;
  min-width: 0;
}

.chat-header {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
}

.chat-sender {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.chat-time {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

.chat-text {
  color: var(--color-text-primary);
  word-break: break-word;
}

.chat-form {
  display: flex;
  gap: var(--spacing-sm);
}

.chat-form input {
  flex: 1;
}

/* Error Summary */
.error-summary {
  background-color: var(--color-card);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.error-summary-title {
  font-weight: var(--font-weight-bold);
  color: var(--color-danger);
  margin-bottom: var(--spacing-sm);
}

.error-summary-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.error-summary-list li {
  color: var(--color-danger);
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-xs);
}

/* Multiplier Grid */
.multiplier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--spacing-md);
}

.multiplier-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.multiplier-field label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.multiplier-field input {
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  color: var(--color-text-primary);
}

/* Items List */
.items-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.item-row {
  display: grid;
  grid-template-columns: 1fr 100px 50px;
  gap: var(--spacing-md);
  align-items: center;
  padding: var(--spacing-md);
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.items-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  flex-wrap: wrap;
}

/* Config Grid */
.config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-lg);
}

.config-section {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.config-section-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--spacing-md);
}

.multiplier-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
}

.multiplier-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.multiplier-field .field-label {
  margin-bottom: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Cards Grid */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--spacing-lg);
}

.cards-grid.single {
  grid-template-columns: 1fr;
}

.cards-grid.two-col {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Admin Cards Row */
.admin-cards-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
  align-items: flex-start;
}