/* =================================================================
   CLUTCH SERVERS - HIJACK DE BOOTSTRAP PARA WEAPON PAINTS
   ================================================================= */

/* 1. Fondo global y tipografía base */
body {
  background-color: var(--bg) !important;
  color: var(--text) !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
}

/* 2. Tarjetas de las Armas (Cards) */
.card {
  background-color: var(--bg-panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
}
.card-header {
  border-bottom: 1px solid var(--line-soft) !important;
}
.card-footer {
  border-top: 1px solid var(--line-soft) !important;
}
.card-title.item-name {
  font-family: 'Archivo Expanded', sans-serif !important;
  font-weight: 700;
  color: var(--text) !important;
}

/* 3. Botones (De azul genérico a Naranja Clutch) */
.btn-primary, .btn-outline-primary {
  background-color: var(--orange) !important;
  color: #191008 !important;
  border: none !important;
  font-weight: 600 !important;
  border-radius: var(--radius) !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
}
.btn-primary:hover, .btn-outline-primary:hover {
  background-color: #ff6c37 !important;
}

/* 4. Botones Secundarios / Peligro (Cerrar sesión) */
.btn-danger, .btn-secondary, .btn-outline-secondary {
  background-color: var(--bg-panel-2) !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
  border-radius: var(--radius) !important;
}
.btn-danger:hover, .btn-secondary:hover {
  border-color: var(--orange) !important;
  background-color: var(--bg) !important;
  color: var(--text) !important;
}

/* 5. Inputs y Selectores (Formularios) */
.form-control, .form-select {
  background-color: var(--bg) !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
  font-family: 'IBM Plex Mono', monospace !important;
  border-radius: var(--radius) !important;
}
.form-control:focus, .form-select:focus {
  background-color: var(--bg) !important;
  border-color: var(--orange) !important;
  color: var(--text) !important;
  box-shadow: 0 0 0 2px var(--orange-dim) !important;
}

/* 6. Panel superior (Reemplaza el contenedor azul de Bootstrap) */
.bg-primary.text-white.p-3.rounded {
  background: linear-gradient(135deg, var(--bg-panel) 0%, var(--bg-panel-2) 100%) !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
  border-radius: var(--radius) !important;
}
.bg-primary.text-white.p-3.rounded h2 {
  font-family: 'Archivo Expanded', sans-serif !important;
  font-size: 22px !important;
}

/* 7. Ventanas Modales (Ajustes de Skin) */
.modal-content {
  background-color: var(--bg-panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
}
.modal-header {
  border-bottom: 1px solid var(--line-soft) !important;
}
.modal-footer {
  border-top: 1px solid var(--line-soft) !important;
}
.modal-title {
  font-family: 'Archivo Expanded', sans-serif !important;
  font-size: 18px !important;
}