/**
 * World2Blinded - Components
 * Buttons, cards, forms, badges, tables, and UI elements
 */

/* ═══════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════ */

/* Primary Button */
.btn-primary {
  background: var(--gold);
  color: #050505;
  border: none;
  padding: 18px 40px;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  transition: background-color var(--transition-medium), 
              transform var(--transition-fast), 
              box-shadow var(--transition-base);
}

.btn-primary:hover {
  background: var(--gold-light);
  transform: translateY(-1px);
  box-shadow: var(--shadow-gold);
}

/* Secondary Button */
.btn-secondary {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--border-gold-medium);
  padding: 0.7rem 1.6rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  transition: background var(--transition-base), border-color var(--transition-base);
}

.btn-secondary:hover {
  background: rgba(212, 175, 55, 0.08);
  border-color: rgba(212, 175, 55, 0.6);
}

/* Ghost Button */
.btn-ghost {
  background: transparent;
  border: none;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  cursor: pointer;
  transition: color var(--transition-base);
  padding: 0.4rem 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.btn-ghost:hover {
  color: var(--gold);
}

/* RDV Button (Service Pages) */
.btn-rdv {
  background: var(--gold);
  color: #050505;
  border: none;
  padding: 0.65rem 1.4rem;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-base), transform var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

.btn-rdv:hover {
  background: var(--gold-light);
  transform: translateY(-1px);
}

/* Ghost Link */
.btn-ghost-link {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: color var(--transition-base);
}

.btn-ghost-link:hover {
  color: var(--gold);
}

/* Button Modifiers */
.btn-sm {
  padding: 0.45rem 0.9rem !important;
  font-size: var(--text-xs) !important;
}

.btn-full {
  width: 100%;
  justify-content: center;
}

/* Action Buttons (Dashboard) */
.btn-confirm {
  background: var(--success-bg) !important;
  color: var(--success) !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
}

.btn-confirm:hover {
  background: rgba(34, 197, 94, 0.25) !important;
  box-shadow: none !important;
}

.btn-refuse {
  background: var(--error-bg) !important;
  color: var(--error) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.btn-refuse:hover {
  background: rgba(239, 68, 68, 0.25) !important;
  box-shadow: none !important;
}

.btn-complete {
  background: var(--info-bg) !important;
  color: var(--info) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

.btn-complete:hover {
  background: rgba(59, 130, 246, 0.25) !important;
  box-shadow: none !important;
}

/* Google Button */
.btn-google {
  width: 100%;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 0.9rem var(--space-md);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  transition: border-color var(--transition-base), background var(--transition-base);
  margin-bottom: var(--space-lg);
}

.btn-google:hover {
  border-color: rgba(212, 175, 55, 0.4);
  background: rgba(212, 175, 55, 0.03);
}

/* ═══════════════════════════════════════════
   CARDS
═══════════════════════════════════════════ */

.card {
  background: #0A0A0A;
  border: 1px solid rgba(212, 175, 55, 0.15);
  padding: var(--space-lg);
  transition: border-color var(--transition-slow);
}

.card:hover {
  border-color: rgba(212, 175, 55, 0.12);
}

/* Stat Card */
.stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  padding: var(--space-lg);
  text-align: center;
  transition: border-color var(--transition-medium), transform var(--transition-medium);
}

.stat-card:hover {
  border-color: var(--border-gold);
  transform: translateY(-2px);
}

.stat-card .stat-icon {
  font-size: 1.4rem;
  margin-bottom: 0.7rem;
  opacity: 0.7;
}

.stat-card .stat-num {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 0.3rem;
}

.stat-card .stat-lbl {
  font-size: var(--text-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

/* ═══════════════════════════════════════════
   FORMS
═══════════════════════════════════════════ */

.field {
  margin-bottom: 1.2rem;
}

.field label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-sm);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--card2);
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 0.85rem var(--space-md);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  outline: none;
  transition: border-color var(--transition-medium);
  appearance: none;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--border-gold-strong);
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.06);
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgba(160, 160, 160, 0.35);
}

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

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

/* ═══════════════════════════════════════════
   BADGES
═══════════════════════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.65rem;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.badge-pending   { background: var(--warning-bg); color: var(--warning); }
.badge-confirmed { background: var(--success-bg); color: var(--success); }
.badge-completed { background: var(--info-bg);    color: var(--info); }
.badge-cancelled { background: var(--error-bg);   color: var(--error); }
.badge-unread    { background: rgba(212, 175, 55, 0.15); color: var(--gold); }
.badge-read      { background: rgba(212, 175, 55, 0.05); color: var(--muted); }
.badge-replied   { background: rgba(34, 197, 94, 0.1); color: var(--success); }
.badge-admin     { background: rgba(212, 175, 55, 0.12); color: var(--gold); }
.badge-client    { background: rgba(212, 175, 55, 0.05); color: var(--muted); }

/* ═══════════════════════════════════════════
   TABLES
═══════════════════════════════════════════ */

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

th {
  text-align: left;
  padding: 0.7rem var(--space-md);
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-bottom: 1px solid var(--border);
}

td {
  padding: 0.95rem var(--space-md);
  border-bottom: 1px solid rgba(212, 175, 55, 0.03);
  vertical-align: middle;
}

tr:last-child td {
  border-bottom: none;
}

tr:hover td {
  background: rgba(212, 175, 55, 0.015);
}

/* ═══════════════════════════════════════════
   TOAST NOTIFICATION
═══════════════════════════════════════════ */

#toast {
  position: fixed;
  bottom: var(--space-xl);
  right: var(--space-xl);
  background: var(--card);
  border: 1px solid var(--border-gold-medium);
  color: var(--fg);
  padding: var(--space-md) var(--space-lg);
  font-size: 0.85rem;
  z-index: var(--z-modal);
  max-width: 340px;
  display: none;
}

/* ═══════════════════════════════════════════
   EMPTY STATE
═══════════════════════════════════════════ */

.empty {
  text-align: center;
  padding: 3.5rem var(--space-xl);
  color: var(--muted);
}

.empty-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-md);
  opacity: 0.3;
}